/*
© 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, .left,
.float-left, .floatLeft {
	float: left!important;
	position: relative;
}
.right,
.float-right, .floatRight {
	float: right!important;
	position: relative;
}
/* Displaying */
.hidden { /* not visible + Accessible http://www.webaim.org/techniques/css/invisiblecontent/ (mDube) */
	display: block;
	position: absolute;
	left: -9999px;
	top: auto;
	/*width: 1px;
	height: 1px;*/
	overflow: hidden;
}
.invisible,
.dNone, .displayNone, .display-none { /* not visible + NOT accessible */
	display: none!important;
}
.dBlock, .displayBlock, .display-block {
	display: block!important;
}
.inline,
.dInline, .displayInline, .display-inline {
	display: inline-block!important; /* if the browser support this value */
	display: inline; /* for the older browsers (like IE) */
}
/* 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: 1.2em;
}
/* Spacer / Espacement to apply on empty block level elements (like DIV, P, etc...) */
.spacer {
	width: 1px;
	height: 1.2em; /* default line-height */
}
.spacer-y, spacerY {
	height: 1.2em;
}
.spacer-x, spacerX {
	width: 1%;
}

/*
| Horizontal Rule (separateur de sujet - Standards Activis)
| <div class="hr"><hr /><a href="#content" title="Back to top"><span>&uarr;</span></a></div>
*/
div.hr {
	clear: both;
	position: relative;
	margin-top: 2.4em;
	padding-bottom: 2.4em;
	border-top: 1px solid gray;
}
.hr hr {
	display: none;
}
.hr a {
	display: block;
	position: absolute;
	top: -.9em;
	right: 0; /*may vary according to the site designs*/
	padding: 0 3px 2px 3px;
	text-decoration: none;
	font: bold 1em/1.2em verdana,arial,sans-serif;
	border: none;
	background-color: white; /* to ovverrule with the #content background-color */
}
/* If the required by the designer, simply hide the span and apply the background-image to the above <a> tag. mDube */
.hr a span {
	vertical-align: text-bottom;
}

/*
| Generating collumn layout 
| Markup reference: <article class="collumn x2col"> <section.first/> <section/> </article>
| X2col = 2 collumns
| X3col = 3 collumns
*/

#content .collumn section {
	float: left;
	position: relative;
}
#content .x2col section {
	width: 49%;
	margin-left: 1.8%;
}
#content .x3col section {
	width: 33%;
	margin-left: 1%;
}
#content .collumn .first,
#content .x2col  .first,
#content .x3col  .first {
	margin-left: 0;
}

/*
======================
| HEADER + FOOTER MENUS
======================
*/
.main nav ul {
	clear: both;
	margin: 0;
	padding: 0;
	height: 1em;
}
.main nav li {
	float: left;
	display: inline;
	margin: 0 .8em 0 0;
	padding: 0 0 0 1em;
	list-style: none;
	border-left: 1px dotted gray;
}
.main nav li:first-child,
.main nav li.first {
	padding-left: 0;
	border-left: none;
}
header.main hr,
footer.main .hr {
	display: 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 site logo
| <a id=logo><img/></a> 
| 1st: Integrate the print version logo (hover white background) as an image within the link <a#logo> in your markup.
| 2nb: Hide the <img> tag and apply the RGB "screen version" as background-image to the <a#logo>.
*/
header #logo {
	display: block;
	width: auto;
	height: auto;
	background: transparent none no-repeat left top;
}
#logo img {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 
| FOOTER basics
*/
#copyright li.first {
	white-space: nowrap;
}
#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 data titles */
.vcard .type {
	display: inline;
	margin: 0 .2em 0 0;
}
/* vCard data definition */
.vcard .value {
	display: inline;
}
/* These info are styled as if they were H2 tags */
.vcard .fn .type, .vcard .fn .value,
.vcard .org .type, .vcard .org .value,
.vcard .fn h2, .vcard .fn h3, .vcard .fn h4,
.vcard .org h2, .vcard .org h3, .vcard .org h4 {
	font-size: 1.8em;
	font-weight: normal;
}
/* Invisible vCard titles by default */
.vcard .fn .type,
.vcard .org .type,
.vcard .adr .type {
	display: block;
	position: absolute;
	left: -9999px;
}

/*
==========
| FORM CONVENTION
| <form> + <fieldset> + <div> + <label>Lorem</label> & <input/>
| <form> + <fieldset> + <div> + <label>Lorem</label> & <label.radio><input/>Lorem</label>
| <form> + <fieldset> + <div> + <label.checkbox><input/>Lorem</label>
| <form> + <fieldset.button> + <button.reset> & <button.submit>
| <form> + <fieldset.action> + <a.btn.back> & <a.btn.next>
==========
*/

/* Form cointainers */
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.action,
fieldset.button {
	padding-bottom: 0;
	padding-left: 1.5em;
	border: none;
}

/* Form fields */
input[type=text], input.text,
input[type=password], input.password,
textarea {
	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*/
}
/* Always wrap radio and checkbox inputs within label tags */
label.radio,
label.checkbox {
	display: inline-block!important;
}
/* If not wrap within labels, add a class to each inputs type checkbox and radio buttons */
input.radio, input[type=radio],
input.checkbox, input[type=checkbox],
input.button, input[type=button], input.btn,
input.image, 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*/
}
input.readonly {
	background-color: #efefef;
}
select option:before {
	content:"• "; /*firefox only, beautiful degradation in the others*/
}
select option.first {
	font-style: italic; /*<option value="-1" class="first"> this should only target a first option where NO values are declared.*/
	opacity: .7;
}
/* Label used as links within content text */
label.link {
	display: inline;
	text-decoration: underline;
	cursor: pointer;
}
label.link:hover,
label.link.hover {
	text-decoration: none;
}

/* Form buttons */
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;
	font-weight: bold;
	line-height: 1em;
	color: black;
	border: 1px solid gray;
	background: #EEE none repeat-x left top;
	cursor: pointer;
}
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;
}
button span, a.button span, a.btn span {
	white-space: nowrap;
}

/*
------------------
| FORM DEFAULT CONTAINER
| Standard best practice is to wrap each set of LABEL and FIELD within its own DIV.
------------------
*/
/* Row design requires <form class=row> */
.row label {
	display: block;
	float: left;
	clear: left;
	width: 48%;
	margin-right: 1%;
	padding-top: .3em; /*horizontal alignment with its field*/
	text-align: right;
}
.row input,
.row textarea,
.row select {
	float: left;
	clear: none;
	width: 48%;
}
/* 
| to align the buttons with the above field,
| wrap them in a seperate <fieldset.button>
*/
.row .select select
.row fieldset.button {
	margin-left: 49%;
}

/* 
------------------
| 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: 5px 5px 5px 60px;
}
.validation h3, .validation p {
	margin: 0!important;
}
.validation ul {
	margin-top: .6em;
}
.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,
#submitError.validation li strong	{ color:#cc0000; }
/* Validation alert message = Bleu, pour une mise en garde */
#submitAlert.validation				{ border:1px solid #0071c7; background-color:#f2f8fd; } 
#submitAlert.validation span.ico	{ background-position:-96px 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; /* Jaune */
}
#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;
}

/*
----------------
| Sitemap List
----------------
*/
ul.sitemapList {
	float: none;
	clear: both;
	position: relative;
	max-width: 100%;
	width: 98%; /*ie*/
}
.sitemapList li {
	padding: 0;
	font-weight: bold;
	list-style: none;
	background: transparent none no-repeat left top; /*if using images instead of list-style*/
}
/*collumn style*/
.sitemapList .group {
	float: left;
	width: 32%;
	margin: 0 1% 1em 0;
}
.sitemapList .home { /*Hidding this, no need to repeat again.*/
	position: absolute;
	left: -9999px;
	width: auto;
}
/* Second level */
.sitemapList .group ul {
	margin: 0;
	padding: 0;
}