@import url(reset.css);
@import url(typo.css);

html{background-color: #000000; height: 100%; overflow: auto;}
body{height: 100%;}

/* ----------------------  Div Généraux ---------------- */

#background{position: relative; background: url('../images/bg.jpg') no-repeat; width: 1400px; height: 553px; left: 50%; margin-left: -700px; margin-top: -553px; z-index: -100;}
#global{position: relative; width: 800px; min-height: 100%; margin: 10px auto 0 auto; color: #000000}
#bg_page{ background: url('../images/bg_page.jpg') repeat-y; width: 800px;}
#header{ background: url('../images/header.jpg') no-repeat; width: 800px; height: 258px;}
#footer{background: url('../images/footer.jpg') no-repeat; width: 800px; height: 111px;}

h1{
position: relative;
width: 528px;
height: 50px;  
margin: 0 auto ; 
background: url("../images/h1.png") no-repeat top left;
padding: 25px 0 0 0;
text-align: center;
}

/* ----------------------  Navigation ---------------- */
#fond_menu{
position: absolute;
left:0;
top: 260px;
background: url('../images/fond_menu.jpg') no-repeat;
width: 204px;
height: 416px;
margin-top: 35px;
}
#fond_menu ul{
list-style-type: none;
background: transparent;
width: 204px;
height: 227px;
padding-top: 54px;
}
#fond_menu li a{ 
display: block;
height: 34px;
width: 204px;
background: url('../images/btn_menu_off.jpg') no-repeat;
margin: 0 0 14px 0;
}
#fond_menu li a:hover{display: block; background: url('../images/btn_menu_on.jpg') no-repeat;}
#fond_menu li.active a{background: url('../images/btn_menu_on.jpg') no-repeat;}
#fond_menu li a.accueil{background-position: 0 0;}
#fond_menu li a.accueil:hover{background-position: 0 0;}
#fond_menu li a.portrait{background-position: 0 -48px;}
#fond_menu li a.portrait:hover{background-position: 0 -48px;}
#fond_menu li a.portfolio{background-position: 0 -96px;}
#fond_menu li a.portfolio:hover{background-position: 0 -96px;}
#fond_menu li a.roulages{background-position: 0 -144px;}
#fond_menu li a.roulages:hover{background-position: 0 -144px;}
#fond_menu li a.contact{background-position: 0 -192px;}
#fond_menu li a.contact:hover{background-position: 0 -192px;}

#subnav ul{padding: 206px 0 0 210px; list-style-type: none;}
#subnav li{float: left; margin: 0 12px 0 0;}
#subnav li a{display: block ; height: 31px; width: 129px; background: url("../images/btn_sub_off.jpg") no-repeat; 
padding: 8px 0;}
#subnav li a.active {background: url("../images/btn_sub_on.jpg") no-repeat; color: #DDD}
#subnav li a:hover {background: url("../images/btn_sub_on.jpg") no-repeat; color: #DDD}


/* ----------------------  Contenu ---------------- */

#contenu{width: 584px; height: 100%; margin: 0 0 0 192px; padding-top: 10px;}
#contenu_top{background: url('../images/contenu_top.jpg') no-repeat; width: 584px; height: 18px;}
#contenu_ctr{background: url('../images/contenu_ctr.jpg') repeat-y; width: 584px; height: 100%; min-height: 389px;}
#contenu_btm{background: url('../images/contenu_btm.jpg') no-repeat; width: 584px; height: 117px; padding-bottom: 10px;}

#flow{width: 580px; min-height: 385px; height: auto !important; height: 385px;}
.erreur{display: block; color: red; width: 80%; border: 2px solid red; border-left: 4px solid red; padding: 10px; margin: 10px auto; font-style: italic}
.valide{display: block; color: green; width: 80%; border: 2px solid green; border-left: 4px solid green; padding: 10px; margin: 10px auto 0 auto; font-style: italic}

#new{ width: 450px; margin: auto; margin-bottom: 20px;}
li.new{ list-style-type: none; background: url('../images/icones/new.gif') no-repeat 0 3px; padding-left: 60px; margin-bottom: 2px;}

/*  -------------  Formulaire  ----------- */
#contenu form{margin: auto; width: 400px; z-index: 1000000;}
#contenu form .row_element{margin: 15px 0; height: 25px;}
#contenu form .row_message{height: 149px;}
#contenu form .row_submit{margin: 31px 0 0 0; padding-left: 210px; height: 20px;}
#contenu form label{float: left; width: 68px; text-align: right;}
#contenu form input[type="text"]{
float: right; 
width: 290px; 
height: 25px; 
border: none; 
background: transparent url("../images/input.png") no-repeat; 
padding: 5px}
#contenu form textarea{
float: right; 
width: 290px; 
height: 150px; 
overflow: visible; 
border: none; 
background: transparent url("../images/textarea.png") no-repeat;  
padding: 5px;}
#contenu form input[type="text"]:hover, 
#contenu form input[type="text"]:focus{background: transparent url("../images/input_hover.png") no-repeat;} 
#contenu form textarea:hover, 
#contenu form textarea:focus{background: transparent url("../images/textarea_hover.png") no-repeat; }
#contenu form input[type="submit"], #contenu form input[type="reset"]{
display: inline; width: 80px; height: 20px; background: #444; border: none; color: #EEE; font-size: 0.9em}
#contenu form input[type="submit"]:hover, #contenu form input[type="reset"]:hover{
background: #CCC; border: none; color: #222;}
#contenu form label{padding-top: 6px;}


/*  -------------  Thumbnails Lightbox  ----------- */

.left{display: block; float: left; width: 124px; height: 150px; padding-right: 25px}
.right{display: block; float: right; width: 124px; height: 150px; padding-left: 25px}

/*  -------------  Portfolio  ----------- */

.pf_gallery{padding: 15px 0 0 15px;}
a.pf{position: relative; float: left; width: 124px; margin-top: 20px; padding-left: 40px;}
a.pf span.lien{display: block; background: url("../images/icones/fleche.gif") no-repeat center left; padding-left: 12px;}
#pf01, #pf02, #pf03, #pf04, #pf05, #pf06{width: 124px; margin: 10px 0 0 0;}
#pf_list{height: 100px; padding-left: 60px;}
#pf_list ul{ float: left; margin: 15px 0 0 10px;}
#pf_list li{height: 20px; padding: 0 0 0 15px; list-style-type: none; background: url("../images/icones/fleche.gif") no-repeat center left;}
#pf_list li.retour{margin-top: 15px; background: url("../images/icones/flecheback.gif") no-repeat center left;}

.back{
width: 100px;
margin: 0 auto; 
padding: 8px 0 10px 15px; 
list-style-type: none; 
background: url("../images/icones/flecheback.gif") no-repeat center left; 
font-size: 0.9em;
}

.lien{background: url("../images/icones/lienexterne.png") no-repeat center left; padding-left: 12px;}

#flashcontent{width: 530px; height: 100%; margin: 0 auto; }

/*  -------------  Tables  ----------- */

#traces{width: 500px; height: 1%; margin: 25px 0 0 35px;}
#traces td.td_img, #traces td.td_lnk{text-align:center; padding-bottom: 5px;}
#traces td.td_lnk a{background: url("../images/icones/fleche.gif") no-repeat center left; padding-left: 10px;}

#liens{width: 500px; height: 1%; margin: 0 auto 0 auto;}
#liens td.td_img, #liens td.td_lnk{text-align:center;} 
#liens td.td_lnk{padding-bottom: 10px; }
#liens td.td_lnk a{background: url("../images/icones/lienexterne.png") no-repeat center left; padding-left: 15px;}

.clear{clear:both; height: 1px;}

/*  -------------  Footer  ----------- */
#footer p{padding: 1px 0 0 15px; float: left;}
#valid{height: 27px; width: 450px; position: relative; margin-left: 310px; padding-top: 10px}
#validCSS{float: left; background: url("../images/validCSS.jpg") no-repeat; width: 76px; height: 27px; }
#validXHTML{float: left; background: url("../images/validXHTML.jpg") no-repeat; width: 76px; height: 27px; margin-left: 12px;}