/* 

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

											
*/


/**
 * @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 ABC 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/ABC/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"
------------------------------------------------------------------



/*  @colors
 	

*/

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


/* @blocks */

/* General */

* {	
margin:0; 
padding:0;
}

html{
font-size:100%;
}

body {
font-family:tahoma;
font-size:80%;
text-align:left;
text-decoration:none;
background-color:#82bdd6;
height: 100%;
}

object{
width:800px; 
height:800px;
}

#container{
width:90%;
margin:10px 5%;
padding:0;
}

#accessibility{
background-color:#82bdd6;
text-align:right;
border-left:2px solid white;
line-height:1.5em;
}

#header {
background-color:#82bdd6;
background-image: url("/public/images/design/screen/header.gif");
background-repeat:no-repeat;
background-position:left;
height:220px;
}

#adsense{
display:none;
}

#analytics{
display:none;
}

#gauche {
float:left;
width:14em;
border-left:2px solid #ffffff;
border-bottom:2px solid #ffffff;
padding-bottom:20px;
}

#content {
background-color:#FFF;
margin-left:14em;
padding:2em;
text-align:justify;
border:2px solid #003366;
min-height:400px;
}

#Gototop{
width:35px;
height:35px;
background: url('/public/images/design/screen/backtotop.png'); red no-repeat centre centre;
}


#footer{
text-align: right;
clear:both;
margin-top:15px;
margin-bottom:15px;
}

#lastupdate{
color:#FFF;
}

/* Specific */


/* 1/3 content width */

.third{
width:32%;
float:left;
margin:0 30px 30px 0;
padding:10px;
}

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

/* 2/3 content width */

.twicethirdright{
width:55%;
float:right;
margin:0 0 30px 0;
padding:10px;
}

.twicethirdleft{
width:462px;
float:left;
margin:0 30px 30px 0;
padding:10px;
}



/* 1/2 content width */

.half{
width:334px;
float:left;
margin:0 30px 30px 0;
padding:10px;
background-color: #EEE;
}
.half+.half{
margin-right:0;
}



/* @texts */

/* General */

hr {
margin:10px 0; 
border:1px solid #CCC;
}

p{
margin-top:1em;
}

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


code{
color:#666;
border-left:2px solid #666;
border-right:2px solid #666;
font-size:1.2em;
font-weight:bold;
padding:0 0.2em;
}

acronym,abbr {
cursor:help;
border-bottom:3px dotted #FC0;
}

acronym:hover,abbr:hover {
cursor:help;
border-bottom:3px dotted #FC0;
}


pre{
color:#333;
border:1px dotted #F39500;
font-size:120%;
background-color: #EEE;
padding:15px ;
margin:15px 0;
}

cite{
}

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

/* Specific */

/* Effets de Texte stylisé */


.magicspacer{
clear:both;
visibility:hidden;
margin:0;
}

.hidden{
visibility:hidden;
}

.consigne{
background: url("/public/images/design/screen/wiki.gif")bottom right no-repeat #82BDDB;
border:2px solid #003366;
border-left:10px solid #003366;
padding:1em 70px 0.5em 1em;
margin:1em 0;
}

.information {
font-style:italic;
color:#666;
}
.focus {
border:2px solid #003366;
border-left:10px solid #003366;
background-color:#82bddb;
padding:1em 1em 0.5em 1em;
margin:1em 0;
}

.nouvelle {
background: url("/public/images/design/screen/nouvelle.png") top right no-repeat;
border:2px solid #003366;
border-left:10px solid #003366;
padding:0.5em;
padding-top:40px; 
margin:2em 0;
}

.projet {
background: url("/public/images/design/screen/projet.png") top right no-repeat; 
border:2px solid #003366;
border-left:10px solid #003366;
padding:0.5em;
padding-top:40px;
margin:2em 0;
}

.primeur {
background: url("/public/images/design/screen/primeur.png") top right no-repeat; 
border:2px solid #003366;
border-left:10px solid #003366;
padding:0.5em;
padding-top:40px;
margin:2em 0;
}

.generalites {
background: url("/public/images/design/screen/generalites.png") top right no-repeat; 
border:2px solid #003366;
border-left:10px solid #003366;
padding:0.5em;
padding-top:40px;
margin:2em 0;
}


/* @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;
}

/* 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;
}




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


/* @titles */

/* General */
h1 {
font-size:1.8em;
line-height:1.8em;
color:white;
text-align:left;
margin-bottom:1.5em;
background-color:#003366;
padding:0.5em;
font-variant:small-caps;
}

h2 {
background: url("/public/images/design/screen/bulle.png") left no-repeat;
color:#003366;
font-size:120%;
text-align:left;
text-decoration:underline;
margin:1em 0;
padding-left:30px;
line-height:25px;
}

h3 {
font-weight:bold;
color:#003366;
font-size:1.4em;
font-variant:none;
text-align:left;
margin:0 0 1em 0;
}

h4 {
margin-bottom:5px;
}

h5 {
margin-bottom:5px;
}

h6 {	/*titres des zones pour en savoir + */
font-size:1em;
margin-bottom:1em;
font-weight:bold;
color:#Fff;
}

/* Specific*/


.fancybox+h2,{
clear:both;
}

h2:first-letter {
font-variant: small-caps;
font-size: 140%;

}


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


/* @lists */


/* General */


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

}

ol {
list-style-type:decimal;
margin-left:3em;
margin-bottom:10px;
}

li {
}

dl {
}

dt {
}

dd {
}


/* Specific */

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

.list { 
list-style-type:square;
list-style-position:inside;
margin:20px;
border-left:2px dashed #EEE;
padding:0 10px;
width:700px;
}

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

/* Menu list */

#gauche li {
width:100%;
margin-bottom:0.5em;
}


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


/* @links */

/* General */

a{
color:#003366;
text-decoration:underline;
font-weight:bold;
}

a:link{
color:#003366;
text-decoration:underline;
font-weight:bold;
}

a:visited {
color:#003366;
text-decoration:underline;
font-weight:bold;
}

a:hover {
color:#006699;
text-decoration:underline;
}

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  */

a[class="external"] {
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; 
}

/* wikipedia links */

a.wikipedia{
color: #393;
font-weight:bold;
text-decoration:underline;
}

a:hover.wikipedia {
cursor:help;
}


/* Specific */

/* Left menu */

#gauche a {
text-align:left;
text-decoration:none;
color:#003366;
padding-left:10px;
}
#gauche a:hover {
color:white;
text-decoration:underline;
padding-left:20px;
border-left:10px solid #003366;
}

body#index a#indexm,
body#apropos a#aproposm,
body#administration a#administrationm,
body#projets a#projetsm,
body#membres a#membresm,
body#pde a#pdem,
body#images a#imagesm,
body#debit a#debitm,
body#nouvelles a#nouvellesm,
body#telechargements a#telechargementsm,
body#liens a#liensm,
body#map a#mapm,
body#contact a#contactm {
color:white;
text-decoration:underline;
padding-left:20px;
border-left:10px solid #393;
}


#accessibility a{
text-decoration:none;
}

#accessibility a:hover {
color:white;
text-decoration:none;
}


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



/* @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;
}

label{
width:140px;
float:left;
display:inline;
margin-right:2em;
text-align:left;
padding-right:24px;
background: none;
min-height: 18px;
}

input{
margin-bottom:1.4em;
font-size:80%;
width:307px;
}

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

select{
margin-bottom:1.4em;
font-size:80%;
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:100px;
color:#CCC;
margin-bottom:0;
font-family: Verdana;
}

#search input:focus{
color:#0065A4;
}

#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;
}

/* ABC 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;
}


input[type="submit"],input[type="button"],input[type="reset"]{
width:auto;
}


.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],.twicethirdright input[type=password], .twicethirdright textarea{
width:250px;}

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


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

/* @images */

/* General */

img {
border:none;
vertical-align:middle;
margin-bottom:10px;

}

/* Specific */


/* floating images | Newspaper-like */


.leftimage {
float:left;
margin: 0 10px 10px 0;
padding:15px;
background: url("/public/images/design/screen/around_photo.gif") top center no-repeat;
width:100px;
height:100px;
}
.leftimage:hover{
background: url("/public/images/design/screen/around_photo.gif") bottom center no-repeat;
}

.rightimage{
float:right;
margin: 0 0 10px 10px;
padding:15px;
background: url("/public/images/design/screen/around_photo.gif") top center no-repeat;
width:100px;
height:100px; /* @color3 */
}

.rightimage:hover{
background: url("/public/images/design/screen/around_photo.gif") bottom center no-repeat;
}

.fancybox img, .lightbox img{
background: url("/public/images/design/screen/around_photo_zoom.gif") top center no-repeat;
}

/*  images in gallery */

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

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

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


/* Site specific images classes */

.imagegauche {
float:left;
margin:0 1em 1em 1em;
overflow:hidden;
border:1px solid #003366;
}
.imagedroite{
float:right;
margin:0 1em 1em 1em;
overflow:hidden;
border:1px solid #003366;
}

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


/* @tables */

table {
text-align:center;
border:1px solid black;
margin-top:2em;
margin-bottom:2em;
border-collapse:collapse;
width:100%;
}

th {
background-color:#82bdd6;
height:2.4em;
color:#fff;
border:1px solid black;
}
td {
padding:0.3em;
border:1px solid black;
}


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


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