* { padding:0px ; margin:0px ;}

body { margin: 0; font-family: Verdana, Tahoma, Arial, sans-serif; font-size : 11px; color : #000; background-color : #545050; }

a {  color: #383838; }
a:hover {  color: #888; text-decoration: none; }

img { border: 0; }

h1 {font-family:"times new roman", serif; font-size:38px; color:#444; font-variant:small-caps; text-align:center; margin:10px 10px 20px 10px; text-decoration:underline;}
h2 {padding:3px ; margin:5px; }

p { padding:2px ; margin-bottom:5px}

input , textarea {color:#333 ; font-weight:bold ; border:2px #333 solid; margin-left:2px ; margin-right:2px; background-color:#CCC;}
textarea:focus {border:2px dotted #000; background-color:#FFF; color:#000}
input:focus {border:2px dotted #000; background-color:#FFF;   }

table {width:100%; }
th {text-align:center; font-size:13px; border : 1px solid #AAA; }

ul {margin-left:5px; padding-left:5px; }

fieldset { margin:5px ; padding:5px ; margin-bottom:15px;  border:1px solid black}
legend { border:1px solid #444; padding:3px 5px; font-weight:bold; color:#FFF ; background-color:#585858 ; margin:2px; }


/* vrac */
#blablabla {text-align:center;}

/* menu */
#menus { float:right; margin:30px 20px 20px 20px; }
#menu, .menu {background-color:#A7A1AF;  text-align:center; margin-bottom:10px; color:#CDC0C0; width:200px; background-image:url('img/fondu_menu.png'); background-repeat: no-repeat; background-position: left; }
#menu .titre, .menu .titre { 	padding-top:5px; line-height:25px; background:url('img/theme_bandeau.png') #4A4A4A ; font-weight:bold ; color:#FFF}
#menu ul {text-align:left; list-style-type:none ; padding:5px ; }
#menu li { display:block; line-height:24px; padding-left:28px;  }
#menu a { color: #444; font-weight:bold; text-decoration:none;  }
#menu a:hover {color:#000; text-decoration:underline;}
#menu em {color:#FFF;}
#menu ul li ul { margin-top:-8px; margin-left:-4px; }
#menu .infos { background:url('img/icon/users.png') no-repeat left center;}
#menu .realisations { background:url('img/icon/screen.png') no-repeat left top; }
#menu .php { background-image:url('img/icon/applications-internet.png') ; background-repeat:no-repeat ; background-position: left center;}
#menu .flash { background:url('img/icon/applications-multimedia.png') no-repeat left center;}
#menu .js { background:url('img/icon/applications-other.png') no-repeat left center;}
#menu .images { background:url('img/icon/image.png') no-repeat left center;}
#menu .divertissements { background:url('img/icon/favorite.png') no-repeat left top;}
#menu .logiciels { background:url('img/icon/terminal.png') no-repeat left center;}
#menu .druss { background:url('img/icon/book.png') no-repeat left center;}
#menu .loisirs { background:url('img/icon/games.png') no-repeat left center;}
#menu .contact { background:url('img/icon/mail_new.png') no-repeat left center;}
#menu .liens { background:url('img/icon/browser.png') no-repeat left center;}

/* navigation */
#navigation, .navigation {margin:3px; color:#000 ; background:transparent ;  text-align:center; margin-top:20px; }
#navigation a:hover, .navigation  a:hover {color:#A36; }
#previous 		, .previous		{ background-image: url("img/icon/previous.png"); 	background-repeat: no-repeat; background-position: left ; padding: 5px; padding-left: 20px;  font-weight: bold; text-decoration: none; color: #272727; }
#next 			, .next			{ background-image: url("img/icon/next.png"); 		background-repeat: no-repeat; background-position: right; padding: 5px; padding-right: 20px; font-weight: bold; text-decoration: none; color: #272727; }
#not-previous	, .not-previous 	{ background-image: url("img/icon/not-go-previous.png"); background-repeat: no-repeat; background-position: left ; padding: 5px; padding-left: 20px ; font-weight: bold; text-decoration: none; color: #8E8E8E; }
#not-next		, .not-next  	{ background-image: url("img/icon/not-go-next.png")	 ; background-repeat: no-repeat; background-position: right; padding: 5px; padding-right: 20px; font-weight: bold; text-decoration: none; color: #8E8E8E; }


/* contenu */
#contenu { padding:10px; padding-bottom:20px; margin-left:30px; margin-top:30px ; margin-bottom:20px ; margin-right:260px; position:static; background-color: #A9A6A6; background-image:url('img/fondu_600.png'); background-repeat: repeat-y; background-position: left;}
#contenu h1 {padding-top:20px; }
#contenu h2 {text-decoration:underline; }
#contenu h3 {text-indent:20px; margin:3px; padding-top:10px;}
#contenu h4 { color:#EEE; border-left:1px solid white ; border-right:1px solid white; margin:auto; padding-left:10px; padding-right:10px; display:inline; }
#contenu p {margin:0; margin-top:3px; margin-bottom:5px; }
#contenu a {font-weight:bolder;}
#contenu li {margin-left:12px ; padding:2px; }
#contenu td {padding:5px; }

/* cadres : contenu + menu */
#contenu, #menu , .menu{ border:2px solid #292020; border-top:4px solid #292020; border-right:4px solid #292020 ; }
			/* menu : border:#111 solid 2px ; */
			
/* contenu::contact */
#contenu .contact a { font-weight:normal; }
#contenu .contact { padding: 5px ; border:none; width: 650px ; text-align:center ; margin:auto;}
#contenu .contact label { display:block ; }
#contenu .contact label span{ float:left ; width:130px ; text-align:left ; margin:15px 5px 0px 5px ;}
#contenu .contact form input {margin:15px 5px 0px 5px ;}
#contenu .contact form input[type="submit"], #contenu .contact form input[type="submit"]:hover, #contenu .contact form input[type="submit"]:focus, #contenu .contact textarea {display:block ; margin-left:203px;}
#contenu .contact .ok {display:block ; margin-left:203px;}
#contenu .contact form input[disabled="disabled"] , #contenu .contact form input[disabled="disabled"]:hover, #contenu .contact form input[disabled="disabled"]:focus  {background-color:#AAA; font-style:italic ; } 
#contenu .contact textarea { display : inline ; overflow:auto; margin:15px 5px 0px 5px ;}
#contenu a.info-bulles {text-decoration: none; cursor: help; color:#000 ; background-color:transparent ; }
#contenu a.info-bulles span {display: none;}
#contenu a.info-bulles:hover span {text-decoration: none; width :auto ; display: inline; position: absolute; z-index: 100; margin: -5px 0 0 15px; background: #FFEEEE; text-align: left; color: #333333; padding: 2px; border: dotted 1px #7B2459; /*filter:alpha(opacity=92); -moz-opacity:0.92; opacity: 0.92; */}

/* contenu::réalisations */
#contenu .imgrea { margin:2px 15px; display:block ;}
#contenu .imagerealisation  { float:left;  margin:3px;}
#contenu .textrealisation  { display:block; margin-left:190px;   margin-bottom:20px;  }
#contenu .realisation { margin:0px; padding:0px; clear:left; display:block ; margin-bottom:3px; text-align:left}

/* contenu::autre */
#contenu #druss { font-family: Verdana,Arial,Helvetica,sans-serif; text-align: left; font-size:13px;  }
#contenu #druss img { padding:5px ; margin-right:10px;  }
#contenu .logiciel { text-align:justify; }
#contenu .logiciel img { padding:5px ; margin:2px 5px;  }

/* général */
.vignette { background-image: url("img/theme_image_ombre.png"); background-repeat: no-repeat; background-position: 7px 10px; padding: 10px; width: 128px; height: 96px;  }
.soulign { text-decoration:underline;}
.small {font-size:70%}
.big {font-size:130%}
.clean {clear:both}
.cleanl {clear:left}
.cleanr {clear:right}
.left, .right {margin:0; border:0; padding:0; }
.left  {float:left;  }
.right {float:right; }
.msie {background-color: #F4E7EA; border: 1px solid #986265; padding: 6px; margin: 5px; line-height: 20px; text-align: center;}
.msie strong { color:#F00; font-weight:bold; }
.bandeau-erreur  { background: #FFB5B5; border: 1px solid #FF0000; line-height: 22px; text-align: center; padding: 10px; color:#F00; font-weight:bold; }
.bandeau-info 	{ background: #EFE0E7; border: 1px solid #BB4488; line-height: 22px; text-align: center; padding: 10px; color:#B25; font-weight:bold; }
.bandeau-infobleu 	{ background: #E0E7EF; border: 1px solid #4488BB; line-height: 22px; text-align: center; padding: 10px; color:#25B; font-weight:bold; }
.bandeau-erreur a, .bandeau-info a, .bandeau-infobleu a {font-weight:normal ; color:#000; text-decoration:none; }
.bandeau-erreur a:hover, .bandeau-info a:hover, .bandeau-infobleu a:hover {text-decoration:underline; }	
	
/* footer */ 
/* #footer { float:right; border:1px dashed #222; text-align:center; padding:2px ; position:relative; margin:auto; display:inline; margin-right:10px;} */
#footer {clear: both; margin:auto; padding-top: 8px; height: 22px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; color: #777; background-image: url("img/theme_bas.png"); text-align: center;}
#footer a { color:#777 ; text-decoration:none; }
#footer a:hover { color:#999 ; text-decoration:underline; }

/* banniere(s) */
#shadow { height: 13px; margin: 0; padding: 0; color: #FFF; background-image: url("img/ombre.png"); }
#banner { height: 130px; margin: 0;  padding: 0; background-image: url("img/top_fond.png"); }
#banner_txt { position: absolute; z-index: 2; width: 100%; height: 130px; background-image: url("img/top_fond_texte.png"); background-position: center 2px; }
#banner_top { width: 100%; min-width: 780px; position: absolute; z-index: 3; height: 130px; }
#banner_logo img { width: 206px; height: 130px; }
#banner_logo { background-image: url("img/top_texte.png"); float: left; }
#banner_visus { width: 566px; float: right; }
#banner_visus img { float: right; }
#banner_masque { width: 566px; height: 130px; background-image: url("img/top_delimit.png"); position: absolute; z-index: 5; }

/* calendrier */
#calendrier table {font-size:10px; font-family:verdana, sans-serif ; color:#222 ; border:none}
#calendrier td, #calendrier th {border : 1px solid #333; text-align:center; }
#calendrier td.mois {color:#040; vertical-align:top; line-height:16px; font-size:12px; font-weight:bold; }
#calendrier img { margin:0px 10px; }
#calendrier th { font-weight:bold; font-family:verdana, monospace; width:24px; font-size:10px;  }
#calendrier th:hover {color:#000;}
#calendrier td strong {font-weight:bold; color:#3E8E03; }
#calendrier td strong:hover {font-weight:bold; color:#5EAE13; }
#calendrier {text-align:center; margin:auto; width:200px; }
#calendrier * a img  {border:none;}

/* lightbox */
#lightbox{position: absolute;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}
#lightbox a img{ border: none; }
#outerImageContainer{position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}
#imageContainer{padding: 10px;}
#loading{position: absolute;top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
#hoverNav{position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{width: 49%;height: 100%;background: transparent url('img/blank.gif') no-repeat; /* Trick IE into showing hover */display: block;}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url('img/prevlabel.gif') left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url('img/nextlabel.gif') right 15% no-repeat; }
#imageDataContainer{font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;margin: 0 auto;line-height: 1.4em;overflow: auto;width: 100%	}
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}		
#overlay{position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;background-color: #000;}