/*
 *  This file is part of Websico: online Web Site Composer, http://websico.net
 *  Copyright (c) 2009-2020 Olivier Seston, Bordeaux, France
 *	Author: O.Seston
 *
 *  This is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  It is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this file. If not, see <http://www.gnu.org/licenses/>.
 *  
 *  --------------------------------------------------------------------------
 *  STANDARD CLASSES AND APPLICATION DEFAULT CSS CHOICES
 *  ----------------------------------------------------
 *	Colors are formated #xxxxxx for consistency with online css edition popup
 */

/************************************************ PAGE */
html {
	height: 100%;
}
body {
	margin: 0;
  	height: 100%;
  	font-family: Verdana, Geneva, sans-serif;
  	font-size: 12px; 	
	color: #555555;
	background-color: #ffffff;
}
* {
	transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}
.wsspage a {
  	color: #555555;	/* Would be better to use inherit, but IE... */
  	font-weight: bold;
  	border-style: solid;		/* Useful to be tunable dynamically */
    border-width: 0;
}
.wsspage a:hover {
  	color: white;
  	background: #8a8a8a;
  	text-decoration: none;
}
img {
    border-style: solid;
    border-width: 0;
}
a img {
  	border-width: 0;
}
iframe {
	border: none;
}
.wsspage a:hover img {
	opacity: 0.6;
}
/* Filter only some type, because other types with transparency are ugly with IE */
.wsspage a:hover img.filter {
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

/************************************************ GALLERY */
.gallery {
	background: #000;
	text-align: center;
	padding: 0;
}
.gallery .counter {
	float: left;
	font-size: 10px;
	color: #fff;
	background: #333;
	margin-top: 1em;
	margin-left: 1em;
}
.gallery .caption {
	clear: left;
	float: left;
	margin: 3em;
	max-width: 50%;
	color: #fff;
	background: #000;
	padding: 0.5em;
	border: 1px solid #555;
}
.gallery .image {
	border: 2px solid #333;
}
.gallery .progressBar {
	position: absolute;
	top: 4px;
}
.gallery .control {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.gallery .control .close {
	float: right;
	margin-right: 1em;
	margin-top: 0.5em;
	border-radius: 50%;
}
.gallery .control .play {
	float: left;
	margin-left: 1em;
	margin-top: 0.5em;
	border-radius: 10px;
}
.gallery .control .previous {
	position: absolute;
	top: 45%;
	left: 0;
	border-radius: 10px;
}
.gallery .control .next {
	position: absolute;
	top: 45%;
	right: 0;	
	border-radius: 10px;
}

/************************************************ ALL CONTAINERS */
.wscontainer {
  	padding: 10px;
  	margin: 5px;     /* DEFAULT VALUE, ANY MODIFICATION MUST BE REPORTED IN ws_jstyle.js !! (search 'webkit') */
  	border: solid 1px #eaeaea;	/* For a better visibility of container limits by default */
}
/************************************************ BASIC AND STANDARD COMPONENTS */
.wstextarea p {
    margin: 0;
    padding: 0;
}
/*.wstextarea p:first-child {margin: 0} Future use, when p elements will be interfaced
Remind: tinyMCE and empty paragraphs <p>&nbsp;</p> for empty lines */

.wscomponent {
  	border-style: solid;		/* Necessary to be tunable dynamically */
  	border-width: 0;
  	padding: 5px;
  	margin: 5px;     /* DEFAULT VALUE, ANY MODIFICATION MUST BE REPORTED IN ws_jstyle.js !! (search 'webkit') */
}
.wssbadge {
	line-height: 1px;           /* To keep image height, whatever is line-eight in the page */
}
.wssbadge img {
    cursor: pointer;
}
.wsstitle {
	font-size: 220%;
	margin-top: 15px;	/* Around 0.5em; in px unit for consistency with css popup */
	margin-bottom: 15px;	/* Around 0.5em */
	font-variant: small-caps;
	letter-spacing: 0.3em;
	line-height: 1em;
	border-bottom-width: 1px;
}
.wsstitle a {
    display: block;
	text-decoration: none;
}
.wstextarea {
	line-height: 1.5em;    /* Bad initial choice to force this property, the parent will not act on it, but difficult to go back... should think of that */
}
.wsimage {
	text-align: center;
	font-style: italic;
}
.wsimage a {
	display: block;
    margin: 0;
    padding: 0;
}
.wsimage a:hover {
    background: none;
}
.wsimage a.zoomable:hover {
	background: white url('ws_images/bg_zoom.jpg') center no-repeat;
}
.wsimage .ws_img_caption {
	margin-top: 0.5em;
}
.wsimage img {
	width: 100%;
	height: auto;
}
.wssform {
  	background: #F5F5F5;
  	border: solid 1px #dddddd;
}
.wssform form, .wssrssreader h2 {
  	margin: 0;
}
.wsslabel {
  	border-style: solid;		/* Necessary to be tunable dynamically */
  	border-width: 0;
	margin-top: 0.3em;
}
.wssinput {
    width: 100%;
}
.wssinputfield .captchaImg {
	cursor: pointer;
}
.wssinputfield button.captchaRefresh{
	border: none;
	background: none;
	cursor: pointer;
}
.wssinputfield button.captchaRefresh img {
	float: left;
}
.wssform button {
    cursor: pointer;
}
.wssform button:hover {
    opacity: 0.6;
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ws_message {                   /* Message in page after sending email */
	color: #666;
	background: #fff;
	border: solid 2px;
	padding: 0.5em;
	margin: 0.5em;
}

.wssrssreader {
	overflow: auto;    /* Ready for choosing user fixed height, incidently it fixes height when floating elements included (IE) */
  	border: solid 1px #dddddd;
}
.wssrssreader .feedTitle {
	font-size: 150%;
}
.wssrssreader .feedImage {
	float: right;
	margin-left: 1em;
}
.wssrssreader .itemTitle {
	font-size: 125%;
    display: block;
    clear: both;
  	margin-top: 1.5em;
}
.wssrssreader .itemContent {
    margin-left: 2em;
}
.wssrssreader .itemContent img {
	display: block;
}
.wssrssreader .itemContent p {   /* Revealed by fluxbb and may be useful for others */
    margin: 0;
}
.wssrssreader .itemContent ul {   /* Revealed by fluxbb and may be useful for others */
    padding-left: 2em;
}

/************************************************ STANDARD MENU */
.wssmenu {
	font-variant: small-caps;
	font-weight: bold;
	line-height: 1.3em;
	white-space: nowrap;
}
.wssmenu .button {	/* Button for reduced menu */
	display: none;
	cursor: pointer;
	border-style: solid;		/* Necessary to be tunable dynamically */
  	border-width: 0;
  	color: #C9C9C9;
  	font-family: Verdana, sans-serif;
  	font-size: 4em;
  	line-height: 0.87em;
  	height: 1em;
}
.wssmenu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.wssmenu li {
	padding: 0;
	margin: 0;
}
.wssmenu .submenu {
    display: none;
	position: absolute;
	overflow: visible; /* To fix hidden overflow of menu container */
	z-index: 10;        /* Necessary for submenu to be over some other objects like google ads */
	margin-left: 1em;	/* Useful in tree mode, especially when mediaqueried */
}
.wssmenu a {
  	color: #8a8a8a;
  	background: white;
	text-decoration: none;
  	border-style: solid;
  	border-width: 0;
	margin: 2px;
	padding-left: 0.5em;
	padding-right: 0.5em;
	display: block;
}
.wssmenu a:hover, .wssmenu a.hover {
  	color: white;
  	background: #8a8a8a;
	text-decoration: none;
}
.wssmenu .horizontal {
	overflow: hidden;	/* To adjust container height of floating elements */
}
.wssmenu .horizontal li {
	float: left;
}
.wssmenu .vertical li {
	float: none;
}
.wssmenu .tree .submenu {
	display: block;
	position: static;
	float: none;
}
.wssmenu .tree li {
	float: none;
}
/************************************************ LANGUAGE SELECTOR */
.wslangselector a {
	text-decoration: none;
}
.wslangselector img {
	width: 20px;
	height: 10px;
	border: solid 1px #ccc;
	margin: 2px 0;
}
.wslangselector.wslangselector a:hover {    /* Double classname to get precedence over page selector properties */
	background: transparent;
}
.wslangselector a:hover img {
	border-color: black;
}
/************************************************ EDITION LINK */
.wssbadge:hover {
	opacity: 0.6;
  	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
/************************************************ USER POPUP */
.ws_popup_wrapper {
	display: table;
	position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	z-index: 64;
	background-color: black;	/* For those who don't understand rgba */
	background-color: rgba(0, 0, 0, 0.6);
}
.ws_popup_inner_wrapper {
	display: table-cell;
	vertical-align: middle;
}
.ws_popup {
	max-width: 80%;
	max-height: 80%;
	margin: auto;
	overflow: auto;
	background-color: white;
	border-radius: 5px;
}
.ws_close_popup {
	float: right;
	width: 40px;
	height: 40px;
	margin-bottom: -50px;
	background: url('ws_images/ws_close.png') center no-repeat;
	text-decoration: none;
}