/* 

------------------------------------
This CSS is only for SCREEN display
------------------------------------

!!! CAUTION : THIS CSS IS WORK IN PROGRESS AND  NOT WORKING AS EXPECTED SINCE THIS TEXT IS HERE !!!! 
												-----------
*/


/**
 * @package Css
 * @author Jean Lalande, Nicolas Hamelin
 * @copyright Twisto, a Trademark of RoseGrenouille Inc.
 */


/*
----------------------------------------------------------
This CSS is easy searchable with your favorite text editor
----------------------------------------------------------

All declarations are grouped by topics and each topic have a comment line. Just search '@'+'NameOfTheTopic'. We use english and plural as default convention for topics names.

--> Crazy Example : @restaurants

Moreover, each topic is splited in two differents blocks :

	- general	| everywhere use	| Example: 	h2, a:hover
	- specific	| contextual use	| Example: 	form h2, #contact ul

Finally, every helper or specific javascript action depending css should be considered as a different file and imported in this one  

--> Example : 	search, infobulle, etc....


For specific information about CSS syntax and differents "how to ", visit the support twisto team website at http://trac.twisto.com/TWO/wiki/CssSyntax ( sorry, registered users only ).

-------------------------------------
List of topics by order of appareance
-------------------------------------

-Name-		-Tags or details-

colors		All colors wich used in this StyleSheet
blocks		*, html, body, every #ID blocks
texts		p, keyboard, code, acronym, abbr, pre, cite, blockquote , .class text effects 
titles		h1, h2, h3, h4, h5, h6  
lists		ul, ol , li , dd, dt, dl
links		a
tables		table, th, td, tr, tbody
images		img
forms		form, legend, fieldset, input, select, option, label, textarea

------------------------------------------------------------------
This CSS contains easy-searchable "ToDo" . Just search for "@todo"
------------------------------------------------------------------

------------------------------------------------------------------
This CSS contains easy-searchable "colors" for color update . Just search for "@color+number"
------------------------------------------------------------------


/*  @colors
 	
	1 : #F39500 --> jaune orange
	2 : #555555 --> gris fonce  
	3 : #CC7E00 --> brun clair
	4 : #A66600 --> brun foncé
	5 : #39B0BF --> bleu cyan
	6 : #AAEAF2 --> bleu ciel foncé
	7 : #B3F6FF --> bleu ciel clair
	8 : #0D0D0D --> gris très foncé noir
	9 : #F2F2F2 --> gris clair blanc
*/
			
/* ----------------------------------------------------------------------------------------------- */


/* @blocks */

/* General */

* {	
margin:0; 
padding:0;
}

html{
font-size:100%;
}

body {
font-family: "myriad",Verdana , Arial , Sans-Serif;
font-size:80%;
text-align:center;
background:#FFF url("/public/images/design/screen/background.gif") bottom center repeat-x;
padding:2em;
font-weight:normal;
}

#container{
width:950px;
margin:0 auto;
background: url("/public/images/design/screen/creditcards.gif") bottom left no-repeat;
}

#accessibility{
visibility:hidden;
}

#NavBar {
text-align:right;
height:30px;
line-height:30px;
margin:0 auto;
padding-right:30px;
}


#header {
border:0px solid #aaa;
background:#FFF url("/public/images/design/screen/header.png") top left no-repeat;
position:relative;
height:200px;
text-align: right;
}

#search{
position:absolute;
top:291px;
margin-left:21px;
color:#FFF;
font-size: 140%
}


#menu{
width:14em;
float:left;
margin-bottom:70px;
}

#content{
padding:1em 0 1em 2em;
text-align:justify;
overflow:auto;
}

#contenu{
/* equivalenent a #content */ 
}

#interaction{
}

#adsense{
margin-top:60px;
/* display:none; */
}

#backtotop{
width:24px;
height:24px;
margin-left:692px;
background:url(/public/images/design/screen/backtotop.png) center top no-repeat transparent;
clear:both;
}

#backtotop:hover{
background:url(/public/images/design/screen/backtotop.png) center bottom no-repeat transparent;
}

#backtotop a{
color:transparent;
width:31px;
height:30px;
display:block;
}


#footer {
font-size:90%;
margin:0 auto;
padding:10px 0 2px 5px;
text-align:right;
border-top:1px solid #CCC;
clear:both;
}

/* Specifics */

.blocdroit{
border:1px solid #aaa;
padding:0;
margin:0 0 15px 2em;
width:16em;
float:right;
text-align:left;
clear:right;
font-size: 80%;
background-color:#FFF;
font-family:geneva;
}

.blocdroit h2{
text-align:left;
color:#333;
padding:0.5em;
line-height:1.2em;
margin:0 0 1em 0;
border-left:0px solid #F39500;
border-bottom:1px solid #CCC;
background-color: #EEE;
clear:both;
font-weight:bold;
}

.blocdroit li, .blocdroit p{
padding:0.2em 1em;
}

.blocdroit form{
margin:10px 10px 0 10px;
}

.blocdroit img{
margin:0;
float:right;
border:none;
}

.blocdroit a {
text-decoration: none;}

.blocdroit label{
width:90px;
float:left;
display:inline;
margin-right:5px;
text-align:left;
}

.blocdroit .input{
margin-bottom:5px;
width:87px;
}

.blocdroit .bouton{
}

#menurapide{
border:1px solid #F39500;
padding:0;
margin:0 0 1em 2em;
width:16em;
float:right;
text-align:left;
font-size: 80%;
background-color: #FFF;
font-family:Geneva;
}

#menurapide h2{
text-align:left;
color:#FFF;
padding:0.5em;
line-height:1.2em;
margin:0 0 1em 0;
border-left:0px solid #F39500;
border-bottom:1px solid #CCC;
background-color: #F39500;
font-weight:normal;
}

#menurapide ul, .blocdroit ul{
margin:-10px 0 5px 0;
}

#menurapide li, #menurapide p, .blocdroit li{
padding:0.2em 1em;
list-style-type: square;
list-style-position: inside;
}

#menurapide a{
text-decoration: none;}

/* 1/3 content width */

.third{
width:228px;
float:left;
margin:0 30px 30px 0;
padding:0;
}

.third + .third +.third{
margin-right:0;
}

/* 2/3 content width */

.twicethirdright{
width:486px;
float:left;
margin:0 0 30px 0;
padding:0;
}


/* 1/2 content width */

.half{
width:357px;
float:left;
margin:0 30px 30px 0;
padding:0;
}
.half+.half{
margin-right:0;
}



.minimized img{
float:left;
width:40px;
margin-left:-60px;
}

.minimized {
margin-left:60px;}




/* @texts */

/* General */

hr {
margin:10px 0; 
}

p{
font-size:90%;
margin-bottom:0.8em;
}


kbd {
border-bottom:3px solid #E8A514; /* @color3 */
font-size:90%;
font-weight:bold;
}

code{
color:#666;
font-size:120%;
font-weight:bold;
padding:0 2px;
}

acronym,abbr {
cursor:help;
border-bottom:1px dotted #F39500; /* @color2 */
}

kbd {
border:1px solid #F39500;
font-weight:bold;
color:#F39500;
padding:1px 2px;
font-family:Verdana;
margin-top: 2px;
font-size: 90%;
}

pre{
}

cite{
}

blockquote{
border:1px solid #AAA;
background-color:#EEE;
color:#666;
padding:0 2em 1em 2em;
margin-top:1em;
}

/* Specific */

/* couleurs */

.color1{
color:#F39500;  /* jaune orange */
}
.color2{
color:#555; /* gris fonce */
}
.color3{
color:#CC7E00; /* brun clair */
}
.color4{
color:#A66600;  /* brun fonce */
}
.color5{
color:#39B0BF;  /* Cyan */
}
.color6{
color:#AAEAF2;   /* bleu ciel fonce */
}

.color7{
color:#B3F6FF;   /* bleu ciel clair */
}

.color8{
color:#0D0D0D;  /* gris tres foncé noir */
}

.color9{
color:#F2F2F2; /*  gris clair blanc  */
}

.twistomatic{
color:#F39500;
padding:0 2px;
}

#textinprogress{
border:1px dotted #F39500;
padding:5px 20px;
margin:20px 0;
color:#555;
font-size:60%
}

.list {
list-style-type:disc;
margin:20px 10px 20px 20px;
font-size:85%;
width:auto;
}

.list li{
margin-bottom:5px;
}

.example{
padding:10px;

}

.blocevidence {
background-color:#f2f0dd;
padding:10px;
font-size: 80%;
width:200px;
}

.descriptif_porfolio{
margin-left:300px;
padding-top:1em;
}

.hidden{
visibility:hidden;
}

/* Plus and minus buttons */

.savoirplus{
color:#F39500;
text-decoration:none;
background: url('/public/images/design/screen/savoirplus.gif') transparent right top  no-repeat;
padding-right:20px;
line-height:16px;
display:block;
text-align:right;
font-weight:bold;
}

.savoirplus:hover{
color:black;
cursor:pointer;
background: url('/public/images/design/screen/savoirplus.gif') transparent right bottom  no-repeat;
}

.plus{
background: url('/public/images/design/screen/savoirplus.gif') transparent right top  no-repeat;
line-height:16px;
display:block;
width:16px;
height:16px;
float:right;
}

.plus:hover{
background: url('/public/images/design/screen/savoirplus.gif') transparent right bottom  no-repeat;
line-height:16px;
display:block;
width:16px;
height:16px;
float:right;
}

.minus{
background: url('/public/images/design/screen/savoirmoins.gif') transparent right top  no-repeat;
line-height:16px;
display:block;
width:16px;
height:16px;
float:right;
}

.minus:hover{
background: url('/public/images/design/screen/savoirmoins.gif') transparent right bottom  no-repeat;
line-height:16px;
display:block;
width:16px;
height:16px;
float:right;
}


/* Phone and fax */

.phone{
background: url('/public/images/design/screen/phone.gif') transparent left center  no-repeat;
line-height:16px;
padding-left:35px;
}

.fax{
background: url('/public/images/design/screen/fax.gif') transparent left center  no-repeat;
line-height:16px;
padding-left:35px;
}





/* @notifications */

.error_notification{
margin:2em 0;
padding:0.5em;
border:1px solid #C00;
color:#666;
font-size:95%;
}

.alert_notification{
margin:2em 0;
padding:10px 30px;
border:1px solid #F90;
border-left:5px solid #F90;
border-right:5px solid #F90;
color:#666;
font-size:95%;
}

.success_notification{
margin:2em 0;
padding:10px 30px;
border:1px solid #690;
border-left:5px solid #690;
border-right:5px solid #690;
color:#666;
font-size:95%;
}

.info_notification{
margin:2em 0;
padding:10px 30px;
border:1px solid #0065A4;
border-left:5px solid #0065A4;
border-right:5px solid #0065A4;
color:#666;
font-size:95%;
}

.info_notification p:first-child{
color: #0065A4;
font-weight:bold;
margin-bottom:5px;
}

.error_notification p:first-child {
color: #C00;
font-weight:bold;
margin-bottom:5px;
}

.alert_notification p:first-child {
color: #F90;
font-weight:bold;
margin-bottom:5px;
}

.success_notification p:first-child {
color: #690;
font-weight:bold;
margin-bottom:5px;
}

.alert_notification p, .info_notification p, .success_notification p, .error_notification p{
margin:0;
}

/* register button */

.register{
width:200px;
height:30px;
margin-left:540px;
text-align:center;
background: url(/public/images/design/screen/register.gif) transparent no-repeat right center;
padding-top:13px;
margin-bottom:20px;
}

/* questions / answers */

.question{
border-left:3px solid #F39500;
padding-left:10px;
}

.answer{
margin-left:20px;
color:#666;
}

.prix{
float:right;
font-weight:bold;
border-top:2px solid #A66600;
border-bottom:2px solid #A66600;
padding: 2px;
position:relative;
margin-top:-15px;
font-size:90%;
}

/* portfolio */

.half p{
font-size:90%;
}

/* Support */
.example{
background-color:#EEE;
text-align:center;
margin:20px 0;
border-left:10px solid #F39500
}

/* ----------------------------------------------------------------------------------------------- */


/* @titles */

/* General */

h1{    /*titre de la page*/
text-align:right;
font-size:200%;
padding:0.1em;
padding-top:10px;
line-height:2em;
color:#A66600;
background: url(/public/images/design/screen/h1.gif) no-repeat left center;
font-weight: normal;
}

h2{   /*gros titre de niveau 2 dans les pages de contenu */
color:#39B0BF;
font-size:130%;
margin:30px 0;
line-height: 24px;
background: url(/public/images/design/screen/h2.gif) no-repeat left center;
padding-left:15px;
clear:left;
font-weight: normal;
}

h3 {
margin:20px 0 10px 0;
color:#333;
text-decoration:none;
font-size:110%;
font-weight: bold;
}

h4 {
margin-bottom:10px;
font-size:80%;
color: #E8A514;
}

h5 {
margin-bottom:5px;
}

h6 {
margin-bottom:5px;
}

/* Specific */

body h2:first-child{
margin-top:0
}

.third + h2 {
clear:left;
}

.sub_h3{
color:#F39500;
font-size:85%;
font-weight:bold;
margin:10px 0 25px 0;
}
.third>h3,.half>h3,.twicethirdright>h3{
margin:0 0 10px 0;
}
div+h2{
margin-top:50px;
}
/* ----------------------------------------------------------------------------------------------- */


/* @lists */


/* General */


ul {  /* make the default list rendered without symbols befoore each line */
list-style-type: none; 
width:100%;
padding:0;
margin:0;
height:1%; /* IE<7 HasLayout control */
}

ol {
list-style-type:decimal;
list-style-position:inside;
margin:2em;
border-left:2px dashed #EEE;
padding:0 1em;
}

li {
list-style-position:inside;
}

dl {
}

dt {
}

dd {
}


/* Specific */

/* lists wich should appears as a regular list */

.list { 
list-style-type:square;
list-style-position:inside;
margin:20px;
padding:0 10px;
width:auto;
}

.list li {
margin-bottom:10px;
}

.third ul{
font-size:85%;
}

.third li{
list-style-type: square;

}


/* ----------------------------------------------------------------------------------------------- */


/* @links */

/* General */

a{
color:#555;
text-decoration:underline;
}

a:visited {
}

a:hover {
color:#F39500;
}

a:active{
color:#000;
}


/* foreign language pages links  */

a[hreflang="en"]:after {
content: "\0000a0"url("/public/images/design/screen/english.gif"); /* @todo : create english.gif image */
}

a[hreflang] {
content: normal !important; /*  Hack for Opera */
}

a[hreflang="es"]:after {
content: "\0000a0"url("/public/images/design/screen/espagnol.gif");  /* @todo : create espagnol.gif image */
}

a[hreflang] {
content: normal !important; /*  Hack for Opera  */
}

a[hreflang="fr"]:after {
content: "\0000a0"url("/public/images/design/screen/french.gif");  /* @todo : create espagnol.gif image */
}

a[hreflang] {
content: normal !important; /*  Hack for Opera  */
}

/* external websites links  */

#content a[class="externe"] {
background : url("/public/images/design/screen/external.gif") center left no-repeat;
padding-left:16px;
text-decoration:none; 
}


/* pdf links */

a[class="pdf"] {
background : url("/public/images/design/screen/pdf_grey.png")center left no-repeat;
padding-left:16px;
text-decoration:none; 
}

/* images and photos links */

a[class="image"] {
background : url("/public/images/design/screen/photo.png")center left no-repeat;
padding-left:16px;
text-decoration:none; 
}



/* Specific */

/* Barre de navigation haute */

#NavBar a{
text-decoration: none;
}

#NavBar a:hover{
color: black;
}

/* Footer */

#footer a{
text-decoration: none;}

#footer a:hover{
color: #000;}

/* Menu gauche */

.menu{
border-top:10px solid #CCC;
background:url("/public/images/design/screen/menu_bottom.gif") bottom center no-repeat;
padding-bottom:30px;
}

.menu li {
cursor: pointer;
margin:0;
height:2em;
line-height:2em;
text-align: left;
font-weight: bold;
list-style-type: none;
list-style-position: inside;
border-left:10px solid #CCC;
border-right:10px solid #CCC;
}


.menu li:hover {
color:#F39500;
background-color:#ddd;
text-align:left;
border-left:10px solid #BBB;
border-right:10px solid #BBB;
}

.menu li a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
padding-left:1em;
}


.menu li a:hover {
color:#F39500;
text-align:left;
}
body#index li#indexlink,
body#contact li#contactlink,
body#profil li#profillink,
body#portfolio li#portfoliolink,
body#entreprise li#entrepriselink,
body#services li#serviceslink {
border-left:10px solid #F39500;
border-right:10px solid #F39500;
}

body#contact li#contactlink a,
body#index li#indexlink a,
body#profil li#profillink a,
body#portfolio li#portfoliolink a,
body#entreprise li#entrepriselink a,
body#services li#serviceslink a{
color: #F39500;
}

/* Mini navigation */

.mininavigation{
text-align: right;}

/* Menu inter pages */

#topmenu{
background-color:#555;
margin-left:14em;
padding-right:25px;
}

#topmenu a{
background-color:#555;
text-align: center;
display:block;
float:right;
padding:5px 3px;
color:#CCC;
text-decoration: none;
font-size:90%;
width:160px;
border-left: 2px solid #CCC;
}
#topmenu a:hover{
background-color:#F39500;
color:#FFF;}

#topmenubottom{
clear:right;
margin:0;
padding:0;
background-color:red;
}
#topmenu .active{
background-color:#333;
}
#topmenu a:first-child{
border-right: 2px solid #CCC;
}

#headertest{
color:#FFF;
font-size:110%;
text-align:left;
margin-left:680px;
padding-top:160px;
}

#header #headermenu{
margin-left:724px;
text-align:left;
padding:10px;
padding-top:15px;
display:none;
}

#headermenu ul{
list-style-type: square;
}

#headermenu li{
margin-bottom: 5px;
}


#headermenu li:hover{
color:#FFF;
list-style-type: circle;
}

#headermenu li a {
color: #fff;
text-decoration: none;
padding-left: 5px;
}

#headermenu li a:hover {
color: #333;
}

#headermenu p{
margin-left:17px;
text-align:left;
font-size: 97%;
color:#666;
}

/* register button */

.register a{
color:#FFF;
text-decoration: none;
}

.register a:hover{
color:#333;
}

/* ----------------------------------------------------------------------------------------------- */



/* @forms */

form{
margin:1.2em 0;
padding:0;
height:1%;
}

fieldset{
border:none;
padding:10px 0 0 0;
}

legend{
color:#0065A4;
margin:10px 0;
padding-bottom:5px;
display:none;
}

label{
width:100px;
float:left;
display:inline;
margin-right:2em;
text-align:left;
padding-right:24px;
background: none;
min-height: 18px;
}
input[type=radio]+label{
float:none;
padding-left:10px;
position:relative;
top:3px;
}

input{
margin-bottom:1.4em;
font-size:90%;
width:307px;
}
input[type=radio]{
margin-bottom:10px;
line-height:10px;
height:10px;
width:auto;
}

input[type="submit"],input[type="button"],input[type="reset"]{
margin-top:15px;
width:auto;
}

input:focus{
background-color: #EEE;
}

select{
margin-bottom:1.4em;
font-size:90%;
width:313px;
}

textarea{
margin-bottom:1.4em;
font-size:80%;
width:308px;
}

textarea:focus{
background-color: #EEE;
}

option{
padding-left:0.5em;
}

/* Specific */

/* Top Search bar css init for Safari | Others browsers styles are supported by applesearch.css*/

#search form{
margin:2px;
padding:0;}

#search input{
width:140px;
color:#CCC;
margin-bottom:0;
font-family: Verdana;
}

#search input:focus{
color:#F39500;
}

#search fieldset {
margin:0;
padding:0;
border:none;
}

#search label { 
display:none; 
}

#search form .sbox_l  {
display:none;
}

#search form .sbox_r  {
display:none;
}

#search form input {
background: none;
}

/* two fields forms | ex: Connection */

/* @todo : clean up inline forms section */

.inline_form label{ 
width:auto;
float:none;
display:inline;
margin-right:0;
margin-left:0.5em;
text-align:left;

}

.checkbox_form label{ 
width:auto;
float:left;
display:inline;
margin-right:0;
text-align:left;
font-size:1em;
}



/*
@todo check for using images butoon instead of regulars ones

input[type="submit"],input[type="button"],input[type="reset"]{
width:30px;
height:30px;
margin-right:10px;
margin-top:-20px;
background-color:red;
}
*/



.SelectCourt{
width:auto;}

.inline_form input,.inline_form select{ /* Formulaire sur une seule ligne */
margin-bottom:0;
margin-left:0.5em;
width:auto;
}

.checkbox_form input,.checkbox_form select{ /* Formulaire sur une seule ligne */
margin-right:0.5em;
float:left;
clear:left;
}
.checkbox_form img{ /* Formulaire sur une seule ligne */
margin:1em 0;

}


/* Hide Antispam test fields */

#email2, #email2label{
visibility:hidden;
margin-bottom:-40px;
height:0;
}

/* width adjustments for 1/3 and 2/3 page widths */

.twicethirdright label{
width:120px;
}

.twicethirdright input[type=text]{
width:159px;}

/* width adjustments for 1/2 page widths */
.half input[type=text],.half input[type=password] {
width:160px;
}

.half label{
width:100px;}

/*url fields like www.sitename.extension */

.url label{
width:40px;
padding-right:0;
margin-right:0;
}
.url input{
width:130px;
margin-left:0;

}
.url select{
width:60px;
}

/* ----------------------------------------------------------------------------------------------- */

/* @images */

/* General */



/* Specific */


/* floating images | Newspaper-like */
/* regular size */
.leftimage {
float:left;
margin:0 10px 10px 0;
padding:15px;
background: url("/public/images/design/screen/around_photo.gif") top no-repeat;
width:100px;
height:100px; /* @color3 */
}
.rightimage{
float:right;
margin: 0 0 10px 10px;
padding:15px;
background: url("/public/images/design/screen/around_photo.gif") top no-repeat;
width:100px;
height:100px; /* @color3 */
}
/* thumbnail size */
.smallleftimage {
float:left;
margin:0 10px 5px 0;
padding:5px;
background: url("/public/images/design/screen/around_photo_small.gif") top no-repeat;
width:50px;
height:50px; /* @color3 */
}
.smallrightimage{
float:right;
margin: 0 0 5px 10px;
padding:5px;
background: url("/public/images/design/screen/around_photo_small.gif") top no-repeat;
width:50px;
height:50px; /* @color3 */
}

/*  images in gallery */

.gallery .fancybox img, .gallery .lightbox img{
float:left;
margin: 0 8px 16px 9px;
padding:15px;
background: url("/ressources/images/two/around_photo_zoom.gif") top center no-repeat;
width:100px;
height:100px; 
position:relative;
}

.fancybox img:hover, .lightbox img:hover{
background: url("/ressources/images/two/around_photo_zoom.gif") bottom center no-repeat;
}

.gallery{
padding:15px 1px 0 0;
border:1px dashed #CCC;
}



/* ----------------------------------------------------------------------------------------------- */


/* @tables */

table {
text-align:left;
border:1px solid #CCC;
border-top:1px solid #AAA;
margin-bottom:2em;
border-collapse:collapse;
width:100%;
font-size:70%;
}

th {
background-color:#F39500;
color:#FFF;
border-bottom:1px solid #aaa;
font-size:110%;
padding:3px;
font-weight: normal;
}

tr {
border-bottom:1px solid #aaa;
}

tr:hover{
background-color: #EEE;
}

td{
width:80px;
padding:3px;
}

/* specifics */

table.halftable {
margin:2em auto;
width:50%;
text-align:center;
}

/* ----------------------------------------------------------------------------------------------- */


/*
-------------------------------------
To be continued......
-------------------------------------
*/