/*
* Main stylesheet
* Contains all common declarations like typography, page structure, reset CSS, forms, listing structure, etc.
*
* 
* SUMMARY :

- reset CSS
- General classes
- Typography
+ Buttons and tabs
	- Generic Button
	- Tabs
+ Elements of design
	- Page title
	- Messages
	- Quote
+ Blocks
	- Block used in case studies
+ Listings & Caroussels
	- Basic text listing 
	- CarousselLite (without Javascript)
	- CarousselLite small (smaller than CarousselLite - without Javascript)
	- Caroussel SM (Sliding menu) - with Javascript
+ Forms 
**********************************************************************************************	
* Reset CSS
**********************************************************************************************/

/*
* This method allow to reset all declarations by default browsers and to reduce the differences of interpretation between themselves.
* old basic reset { margin:0; padding:0; }
*/
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
	acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
	strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
	body { line-height: 1; }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	/* remember to define focus styles! */
	:focus { outline: 0; }
	/* remember to highlight inserts somehow! */
	ins { text-decoration: none; }
	del { text-decoration: line-through; }
	/* tables still need 'cellspacing="0"' in the markup */
	table { border-collapse: collapse; border-spacing: 0; }


/**********************************************************************************************	
* General classes
**********************************************************************************************/

	* { font:normal 12px Arial, Sans-serif; color:#666; }
	a { color:#666; text-decoration:none; }
	a:hover,
	a:focus { text-decoration:underline; }
	
	.content a { text-decoration:underline; }
	.content a:hover,
	.content a:focus { text-decoration:none; }
	
	.displayNone { display:none; }
	
	.bold,
	.strong, 
	strong { font-weight:bold; color:#333; }

	.italic { font-style:italic; }
	
	p { margin:5px 0; line-height:1.5em; }
	
	hr { clear:both; width:100%; visibility:hidden; font-size:0; height:0; }
	.hrStructure { margin-bottom:-2px; }
	.opera .hrStructure,
	.ie .hrStructure { display:none; }
	
	.last { border:none; }
	.preload { display:none; }


/**********************************************************************************************	
* Typography
**********************************************************************************************/

	h1,
	h2 { 
		font:bold 1.3em 'trebuchet MS', helvetica, arial, sans-serif; text-transform:uppercase; color:#333; 
	}
	h1 span,
	h2 span {
		font-weight:bold; color:#fe4e00;
	}
	h4 { 
		font:bold 1.2em 'trebuchet MS', helvetica, arial, sans-serif; text-transform:uppercase; color:#fff; 
	}


/**********************************************************************************************	
* Buttons and tabs
**********************************************************************************************/

/*
* Generic Button
*/
	a.button {
		text-decoration:none; float:right; margin:15px;
	}
	a.button .left {
		float:left; width:17px; height:25px;
		background:url(../img/buttons/button_left.png) no-repeat top;
	}
	a.button .center {
		float:left; height:22px; padding:3px 4px 0 4px;
		background:url(../img/buttons/button.png) repeat-x top; font:bold 0.9em 'Trebuchet MS',Arial,sans-serif; cursor:pointer; color:#333; 
	}
	a.button .right {
		float:left; width:4px; height:25px;
		background:url(../img/buttons/button_right.png) no-repeat top;
	}
	.button:hover .center,
	.button:focus .center { color:#fe4e00; }

/*
* Tabs
*/
	ul.tabs {
		clear:both; margin:10px 0; float:left; width:100%;
	}
	ul.tabs li {
		display:block; float:left; height:42px;
		background: url(../img/tabs/tab.png) repeat-x; 
	}
	
	ul.tabs li a {
		float:left; height:20px; padding:6px 25px 0 25px;
		text-decoration:none; color:#666; font-size:0.8em; font-weight:bold; border-left:solid #CCC 1px; border-right:solid #EEE 1px;
	}
	ul.tabs li.last a {
		border-right:solid #CCC 1px;	
	}
	ul.tabs li a:hover,
	ul.tabs li a:focus {
		color:black; background:#E7E7E7;
	}
	ul.tabs li.selected {
		background: url(../img/tabs/tabSelected.png) repeat-x; 
	}
	ul.tabs li.selected a,
	ul.tabs li.selected a:hover {
		color:white; background: url(../img/tabs/tabSelected.png) repeat-x; 
	}


/**********************************************************************************************	
* Elements of design (title, blocs, etc.)
**********************************************************************************************/

/*
* Page title
*/
	.pageTitle {
		width:609px; height:39px; margin:0 0 15px -15px; 
		background:url(../img/background/titlePage.png) no-repeat top left;
	}
	.pageTitle h1 {
		padding:5px 0 0 17px;
	}

/*
* Messages (Information, error, confirmation)
*/
	.msg {
	margin:20px 0; float:left;
	padding:13px 0 0 70px; font:bold 1.2em 'trebuchet MS', helvetica, arial, sans-serif; color:#FE7032; 
	width:auto; height:72px;
	}
	.msg.Alert { 
	background:url(../img/pictos/msgAlert.png) no-repeat;
	}
	.msg span {
	font-size:0.8em;
	}

/*
* Quote
*/
	.quote {
		clear:both; width:100%; 
	}
	.quote blockquote {
		text-indent:30px; padding-top:6px;float:left; width:100%;
		background:url(../img/pictos/quote_start.png) no-repeat top left; 
	}
	.quote blockquote .quoteEnd {
		padding-right:30px; float:left;
		background:url(../img/pictos/quote_end.png) no-repeat bottom right; 
	}

	/* Sign */
		.quote .quoteSignature { 
			width:40%; float:right; margin:20px 0 10px 0;
		}
		.quote .quoteSignature .quoteTitle {
			float:left; text-align:right; margin-top:-4px;
			color:#afafaf; font-size:0.7em; 
		}
		.ie6 .quote .quoteSignature .quoteTitle { margin-top:-3px; }
		
		.quote .quoteSignature .quoteWriter {
			float:left; padding-left:7px; margin-left:7px;
			font-weight:bold; color:#333; border-left:solid 1px #fe4e00; 
		}


/**********************************************************************************************	
* Blocks
**********************************************************************************************/

/*
* Block used in case studies
*/
	.blockCase {
		width:313px; clear:both; margin-bottom: 20px; float:left;
	}
	.blockCase .blockTop {
		width:100%; height:42px; 
		background:url(../img/block/case/blockTop.png) no-repeat;
	}
	.blockCase .blockTop h4 {
		padding-left:20px; padding-top:10px;
	}
	.blockCase .blockBody {
		width:100%; float:left; 
		background:url(../img/block/case/blockBody.png) repeat-y;
	}
	.blockCase .blockBottom {
		width:100%; height:21px; float:left; 
		background:url(../img/block/case/blockBottom.png) no-repeat;
	}
	.blockBody ul {
		list-style-type: none; text-align:left; padding:15px 20px 0 20px;
	}
	.blockBody li{
		padding-left: 0.8em; margin-top:15px;
		background: url(../img/pictos/puce_noire.png) no-repeat; background-position: 0 0.4em;
	}
	.ie6 .blockBody li{ height:20px; overflow:visible; }


/**********************************************************************************************	
* Listings & Caroussels
**********************************************************************************************/

/*
* Basic text listing 
*/
	.textListing {
		margin:15px 0 15px 15px; 
	}
	.textListing  li {
		list-style-position:outside; margin:0 0 0.8em 2em;  
		list-style-image:url(../img/pictos/puce_listing.png);
	}
	.ie .textListing li, 
	.opera .textListing li { padding-left:0.5em; }
	
	.textListing.black li {
		list-style-position:outside; margin:0 0 0.8em 2em;  
		list-style-image:url(../img/pictos/puce_noire.png); 
	}


/*
* CarousselLite (without Javascript)
*/
	.carousselLite {
		margin-bottom:15px;
	}
	.carousselLite li {
		list-style-style:none;
	}
	
	.carousselLite li a {
		display:block; height:32px; padding:15px 0 0 50px; 
		background:url(../img/pictos/puce.png) no-repeat center left; border-bottom:solid #C8C8C8 1px; text-decoration:none;
	}
	
	.carousselLite li a:hover,
	.carousselLite li a:focus {
		text-decoration:none; 
	 	background:url(../img/pictos/puce.png) no-repeat center left; border-bottom:solid #C8C8C8 1px; text-decoration:none; 
	 	color:black; font-weight:bold;
	}
	.contentCase .carousselLite li a.last { border:none; }
	.carousselLite li a.last { border:none; }
	.carousselLitehome li a.last{ border:none; }
	
	.carousselLite li.active a {
		background:url(../img/background/carousselLite_hover.png) no-repeat center left; font-weight:bold;
	}
	.contentCase .carousselLite {
		width:285px;
	}
	
	.contentCase .carousselLite li.active a {
		background:url(../img/background/carousselLite_hover_case.png) no-repeat center left; font-weight:bold;
	}
	
	.contentCase .carousselLite li.active a:hover,
	.contentCase .carousselLite li.active a:focus {
		background:url(../img/background/carousselLite_hover_case.png) no-repeat center left; font-weight:bold;
	}
	
	
	.content .carousselLite li.active a:hover,
	.content .carousselLite li.active a:focus {
		background:url(../img/background/carousselLite_hover.png) no-repeat center left; font-weight:bold; 
	}

/*
* CarousselLite small (smaller than CarousselLite - without Javascript)
*/
	.carousselLite.small {
		width:285px;
	}
	.carousselLite.small li a:hover,
	.carousselLite.small li a:focus{
		background:url(../img/pictos/puce.png) no-repeat center left; font-weight:bold;
	}	

/*
* Caroussel SM (Sliding menu) - with Javascript
*/
	#smPhone {
		width:239px; height:389px; float:left;
	}
	.carousselLite.sm {
		width:565px; height:330px; display:block; overflow:hidden; float:left;  margin:15px 90px 15px auto; 
	}
	.carousselLite.sm li {
		clear:both; float:left; width:100%; overflow:hidden;
		border-bottom:solid 1px #C8C8C8;
	}
	
	.sm .smActive {
		padding:10px 40px 0 40px; height:147px;
		background:#F6F6F6 url(../img/background/smActive_background.png) repeat-x; font-size:0.9em;
	}
	.sm .smActive p {
		font-weight:bold; color:black; 
	}
	.sm .smActive span {
		display:block; clear:both; padding-left:2%; margin-bottom:1em; 
		background:url(../img/pictos/puce_noire.png) no-repeat 0 5px; 
	}
	

/**********************************************************************************************	
* Forms
**********************************************************************************************/

/*
* Generic 
*/
fieldset {
	border:none;
}
label {
	cursor:pointer;
}
.ie6 label { /* ie6 don't use the same cursor name */
	cursor:hand;
}
input,
select,
textarea {
	border:solid 2px #c4c4c4; color:#666;
}
input:focus,
select:focus,
textarea:focus {
	border:solid 2px #EFE98D; color:black; background:#FFFFE1;
}
legend {
	padding:15px 0 0 0;	
	font-size:1.1em; color:black;
}

/*
* Form elements
*/
.formElement {
	clear:both; width:100%; margin:10px 0; float:left;
	font-size:1.1em;
}
.formElement label {
	display:block; text-align:left; margin-bottom:2px;
	font-weight:bold; color:black;
}
.formElement select {
	width:95%; padding:2px;
}
.formElement input {
	width:95%; height:2em; padding:0.5em 0.5em 0 0.5em;
}
.formElement textarea {
	width:95%; padding:0.5em 0.5em 0 0.5em; line-height:1.5em;
}

/* Form elements 2 */
.formElement2 { margin-bottom:15px; }
.formElement2 p { font-weight:bold; color:black; }
.formElement2 p span { font-style:italic; color:#aaa; }

input.noBorder { border:none; }
input.checkbox { border:none; }
input.radio { border:none; }
.formElement input[type="radio"],
.formElement input[type="checkbox"] { border:none; float:left; width:1em; height:1em; padding:0;line-height:0em; margin-right:1em; }