/*
© Activis Technologies inc.
Created: 2009-12-04
Updated: 2009-12-17 - MDube
*/


/* 
======================
| ACTIVIS CONVENTION
======================
*/

/* Site wrapper. YUI Grid propose 100%, 750px, 950px and 974px as standards */
#doc {
	width: 750px; /*default site width. Overrule it in your site.css. */
	margin: 0 auto;
}
/*
| If your doctype is HTML5, apply "CLASS MAIN" on the 3 parent <header>, <section> and <footer> of the site.
| Otherwise use the 3 IDs #header, #section & #footer on the parent <DIV>.
*/
header.main, #header,
section.main, #section,
footer.main, #footer {
	float: left;
	clear: both;
	width: 100%;
}
/* These class applies to content that will be visible ONLY for printers */
.mediaPrint {
	display: none;
}

/*
======================
| GENERIC CLASS LIBRARY
| A set of commun class names used accross multiple Activis projets
======================
*/

/* Clear: for fixing horizontal alignment after floating stuff */
.clear {
	clear: both !important;
}
.clear-none, .clearNone {
	clear: none !important;
}
.clear-left, .clearLeft {
	clear: left !important;
}
.clear-right, .clearRight {
	clear: right !important;
}
/* Floating */
.float,
.float-left, .floatLeft {
	float: left !important;
	position: relative;
}
.float-right, .floatRight {
	float: right !important;
	position: relative;
}
/* Displaying */
.inline {
	display: inline !important;
	display: inline-block !important;
}
.hidden {
	display: none!important;
}
/* Line break / Retour de ligne */
.nobr, .noBr {
	white-space: nowrap !important; /* Because the <nobr> HTML tag is depreciated in XHTML */
}
.br-after, .brAfter { /* Recreate double BR+BR spacing after a child element */
	clear: both;
	margin-bottom: 1em;
}
/* Spacer / Espacement to apply on empty block level elements (like DIV, P, etc...) */
.spacer {
	width: 1%;
	height: 1em;
}
.spacer-y, spacerY {
	height: 1em;
}
.spacer-x, spacerX {
	width: 1%;
}


/*
======================
| HEADER + FOOTER MENUS
======================
*/
.main nav ul {
	clear: both;
	margin: 0;
	padding: 0;
	height: 1em;
}
.main nav li {
	float: left;
	display: block;
	margin: 0 .8em 0 0;
	padding: 0 0 0 1em;
	list-style: none;
	border-left: 1px dotted gray;
}
#copyright li {
	white-space: nowrap;
}
.main nav li:first-child,
.main nav li.first {
	padding-left: 0;
	border-left: none;
}
header.main nav a,
footer.main nav a {
	text-decoration: none;
}
header.main nav a:hover,
footer.main nav a:hover {
	text-decoration: underline;
}
/* 
| HEADER DROPDOWN MENU
| Just add the class dropdown on the first UL.
| You will need to had a class "hover" on LI to make it work in IE6 and IE7 since they don't consider the ":first-child" selector.
| MDube
*/
#mainMenu ul.dropdown {
	position: relative;
	left: 0;
	top: 0;
}
#mainMenu .dropdown li ul {
	position: absolute;
	left: -9999px;
	margin: 0;
	padding: 0;
	background: gray; /* same color as the LI border */
}
#mainMenu .dropdown li:hover ul,
#mainMenu .dropdown li.hover ul {
	left: 0;
}
#mainMenu .dropdown li li:hover,
#mainMenu .dropdown li li.hover {
	border-left: 0;
}
#mainMenu .dropdown li li {
	float: none;
	display: block;
	width: auto;
	margin-left: 0.1em;
	margin-right: 0;
	padding-left: 0; /* the padding goes on the following child "A" below */
	border: 1px solid gray; /* same color as the UL background */
	border-top: none;
	border-left: none;
	background: transparent none repeat-x left top; /* use this for debug only */
}
#mainMenu .dropdown li li a {
	display: block;
	width: 100px;
	padding: .5em 0 .5em 1em; /* apply the vertical padding here */
	text-decoration: none;
	background-color: #EEE;
}
#mainMenu .dropdown li li a:hover {
	text-decoration: underline;
}
/* 
| HEADER site logo
| Integrate a smaller mobile/handheld or print version of the logo within the link <a#logo> in your markup. 
| Then in your CSS, hide the <img> tag and style the <a#logo> using the "screen version" of the logo.
| - When media=handheld, the width of the logo should fit in a basic mobile phone.
| - When media=print, the logo needs to be cropped over a white background.
*/
header #logo {
	display: block;
	width: auto;
	height: auto;
	background: transparent none no-repeat left top;
}
#logo img {
	position: absolute;
	left: -9999px;
}
/* 
| FOOTER basics
*/
#copyright abbr[title] {
	border: none;
}


/*
============
| vCard / hCard
| <ul.vcard> .fn=Formatted Name ; .org=Organization Name ; .adr=Delivery Address ; .email ; .tel & (.tel.fax)
| .fax is not a real vCard property, it is for CSS targetting only.
| http://microformats.org/code/hcard/creator
| http://en.wikipedia.org/wiki/VCard#Properties
| mDube, 23 dec 2009
============
*/
ul.vcard {
	margin-left: 0;
}
ul.vcard li {
	margin-left: 0;
	list-style-type: none;
	background-image: none;
}
.vcard h2, .vcard h3, .vcard h4 {
	display: inline;
	margin: 0;
}
/* These info are styled as default H2 tags */
.vcard .fn .fn,
.vcard .org .org {
	font-size: 1.8em;
	font-weight: normal;
}
/* Hidden vCard titles by default */
.vcard .fn h4,
.vcard .org h4,
.vcard .adr h4 {
	display: block;
	position: absolute;
	left: -9999px;
}

/*
==========
| FORM
==========
*/
fieldset,
div.fieldset {
	clear: left;
	padding: 1.2em 1em 0.6em 1em; /*reduced bottom-padding because of UL.FIELD container below*/
	border: 1px solid #EEE;
}
div.fieldset {
	clear: both;
	margin-bottom: 1em;
}
fieldset legend {
	padding: 0 0.25em;
	font-size: 1.4em;
	color: gray;
}
fieldset.button, fieldset.action {
	padding-bottom: 0;
	padding-left: 1.5em;
	border: none;
}
select,
input,
textarea {
	font-family: arial,helvetica,sans-serif;
	line-height: 1.2em;
	border: 1px solid gray;
	outline: none;
}
input {
	height: 1.2em;
	padding: 0.2em;
}
/* setting a consistent width, 160px (control of type=file still not possible) */
input[type=text], input.text,
input[type=password], input.password,
textarea {
	width: 97.5%;
	background-color: white;
}
input[type=text]:focus, input.text:focus,
input[type=password]:focus,input.password:focus,
textarea:focus {
	color: black;
	background-color: #ffffec; /*light yellow*/
}
/* inputs type checkbox and radio buttons */
input.radio, input[type=radio],
input.checkbox, input[type=checkbox],
input.button, input[type=button], input.btn,
input[type=image] {
	width: auto !important;
	padding: 0;
}
input.radio, input[type=radio],
input.checkbox, input[type=checkbox] {
	border-width: 0 !important;
	border: none !important; /*ie*/
}
/* Wrap ONLY radio and checkbox inputs within label tags */
label.radio,
label.checkbox {
	display: inline-block!important;
}
label input {
	width: auto !important;
	margin-top: -0.15em;
	margin-right: 0.3em;
	margin-left: 0.5em;
	border: none !important; /*ie*/
}
input.readonly {
	background-color: #efefef;
}
select {
	width: auto;
}
select option {
	background-color: white;
}
button,
input[type=button], input.button, input.btn,
a.button, a.btn {
	display: inline-block;
	margin-right: 1em;
	margin-bottom: .6em;
	padding: .3em .5em;
	font-size: 1em;
	line-height: 1em;
	color: black;
}
a.button, a.btn {
	width: auto;
	text-decoration: none;
}
button:focus,
input[type=button]:focus, input.button:focus, input.btn:focus,
a.button:focus, a.btn:focus {
	color: black;
	border-color: black;
}
button:active,
input[type=button]:active, input.button:active, input.btn:active,
a.button:active, a.btn:active {
	color: blue;
	border-color: blue;
}
input[type=button], input.button, input.btn {
	height: auto;
	font-family: verdana,arial,helvetica,sans-serif;
}

/*
==================
| FORM CONTAINER
| To get a bullet proof cross-browser form with 
| good accessibility, contain the fields within LI. 
| (MDube)
==================
*/
ul.field {
	margin-left: 0;
	padding-bottom: 0;
}
ul.field li {
	margin-left: 0;
	padding: 0.3em;
	list-style-type: none;
	background-image: none;
}
ul.field li ul,
ul.field li ol {
	padding-left: 2em; /* vertically aligned with text inputs. */
}
ul.field li li {
	margin-bottom: 0.3em;
	padding-top: 0;
}
ul.radio, 
.field .radio ul, .field ul.radio,
ul.checkbox, 
.field .checkbox ul, .field ul.checkbox {
	margin-left: 0;
	padding-left: 0;
}
ul.radio li, 
.field .radio li,
ul.checkbox li, 
.field .checkbox li {
	float: left;
	width: auto;
	margin: 0 .5em 0 0;
	padding: 0.3em;
	list-style-type: none;
	background-image: none;
}
.field label {
	line-height: 1.2em;
}

/* 
------------------
| Form Validation
| Default alert colors = Black typo + bg Yellow #fbf7e7
| Default error colors = Red #cc0000 typo + bg #faf4f4
| Default success colors = Green #006600 typo + bg #f4faf4
------------------
*/
.error select, select.error,
.error input, input.error,
.error textarea, textarea.error, {
	border-color: red!important;
}
/* Validation message container */
div.validation {
	position: relative;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em 1em 1em 60px;
}
.validation h3, .validation p {
	margin: 0;
}
.validation span.ico {
	position: absolute;
	left: 1em;
	top: 0.75em;
	display: block;
	width: 32px;
	height: 32px;
	background: transparent url(img/ui/base/ico-validation-sprite-32x32.png) no-repeat;
}
/* Validation error message = Rouge */
#submitError.validation				{ border:1px solid red; background-color:#faf4f4; } 
#submitError.validation span.ico	{ background-position:-32px top; } 
#submitError.validation h3			{ color:#cc0000; }
/* Validation alert message = Jaune */
#submitAlert.validation				{ border:1px solid #ffcc00; background-color:#fbf7e7; } 
#submitAlert.validation span.ico	{ background-position:-64px top; } 
#submitAlert.validation h3			{ color:black; }
/* Validation success message = Vert */
#submitSuccess.validation			{ border:1px solid green; background-color:#f4faf4; } 
#submitSuccess.validation span.ico	{ background-position:-128px top; } 
#submitSuccess.validation h3		{ color:#006600; }

/* Asterisques (*) des champs obligatiore */
form p.mandatory { /* Conteneur du texte explicatif 'Champs obligatoires/Mandatory fields' */
	clear: both;
	margin: 0 0 .3em 1.3em;
	color: gray;
}
form .mandatory abbr, form abbr.mandatory, 
form acronym.mandatory,
form p.mandatory abbr {
	font-weight: bold;
	padding-right: 0.2em;
	padding-left: 0.2em;
	vertical-align: text-bottom;
	border-bottom: none;
}
form .error .mandatory {
	color: #cc0000;
}

/*
------------------
| Alert message container
| exemple = /includes/error404.inc.php
| C'est un deuxieme set car il n'est pas utiliser dans le meme contexte que la validation. 
| (mDube)
------------------
*/
div.alert {
	position: relative;
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 1em 1em 1em 60px;
	border: 1px solid #ffcc00;
	background-color: #fbf7e7;
}
#content #error404 {
	margin-top: 2em;
	margin-bottom: 2em;
}
.alert span.ico {
	position: absolute;
	left: 1em;
	top: 0.75em;
	display: block;
	width: 32px;
	height: 32px;
	background: transparent url(img/ui/base/ico-validation-sprite-32x32.png) no-repeat -64px top;
}
.alert h3, .alert p {
	margin: 0;
	color: black;
}