/*
Rouge: #CE0707
Body: #EDE9E9
Bleu: #0066CC
Jaune: #FFCC00
Violet: #AFA0E0
*/
body{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #333;
padding: 0;
margin: 0;
background: #E9E9E9;
}
.spacer{
clear: both;
padding: 0px;
margin: 0px;
}
ul{
padding: 0px;
margin: 0px;
list-style: url(../../image/design/puce-rect-red.gif);
}

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


img{
border: none;
}
img.vignette{
padding: 5px 0px;
}



/******************************************************************************/
/* Structure
/******************************************************************************/
#all{
margin: auto;
margin-top: 30px;
width: 688px;
}

#site{
float:left;
width: 640px;
text-align: center;
border: solid 3px #FFF;
background: #000;
padding: 5px;
}

#lateral{
float:left;
width: 20px;
height: 250px;
}
#horizontal{
width: 250px;
height: 20px;
}


#top-menu{
padding: 0px;
margin: 0px;
height: 20px;
}
#top-menu-float{
float: left;
width: 32%;
color: #FFF;
}


#header{
margin-bottom: 5px;
height: 40px;
background: url(../../image/design/bg-websg.jpg);
}

#mainmenu{
height: 37px;
text-align: left;
background: url(../../image/design/bg-mainmenu.gif) 50% 50% no-repeat;
}


#main-content{
padding: 10px 5px 25px 5px;
background: #FFF url(../../image/design/bg-maincontent.gif) 100% 100% no-repeat;  
height: 300px;
min-height: 300px;
}
html>body #main-content{
height: auto;  
}


#submenu{
margin: 0px;
height: 20px;
}

#submenu ul.width1{ /* Pages Developpement & Internet */
padding: 0px;
margin: 0px;
width: 563px;
}
#submenu ul.width2{
padding: 0px;
margin: 0px;
width: 520px;
}
#submenu ul.width3{ /* Page CV */
padding: 0px;
margin: 0px;
width: 440px;
}
#submenu ul.contact{ /* Page Contact */
padding: 0px;
margin: 0px;
width: 390px;
}


#bandeau-cv{
margin: -5px 0px 10px 0px;
padding: 2px;
background: #E9E9E9;
color: #999;
font-weight: bold;  
}

/******************************************************************************/
/* Top-Menu
/******************************************************************************/
#top-menu ul {
margin: 0px;
list-style: none;
}

#top-menu ul li {
float: left;
text-align: left;
margin: 0px;
padding: 0px 125px;
display: inline;
}
#top-menu ul li a {
display: block;
padding: 0px 4px;
color: #FFF;
text-align: left;
font-size: 11px;
font-weight: bold;
}
#top-menu ul li a:hover {
color: #FFCC99;
}
#top-menu ul li.selected a {
border-top: #FFCC99 solid 4px;
}



/******************************************************************************/
/* Main Menu
/******************************************************************************/
#mainmenu ul {
height: 25px; 
margin: 0px;
list-style: none;
}

#mainmenu ul li {
float: left;
text-align: left;
margin: 0px;
padding: 0px 0px;
display: inline;
}
#mainmenu ul li a {
display: block;
padding: 5px 16px;
color: #CCC;
text-align: left;
font-size: 11px;
font-weight: bold;
}
#mainmenu ul li.selected a {
color: #FFF;
padding-top: 10px;
}
#mainmenu ul li a:hover {
color: #FFF;
}


/******************************************************************************/
/* submenu
/******************************************************************************/
#submenu ul {
margin: 0px;
list-style: none;
}

#submenu ul li {
float: left;
text-align: left;
margin: 0px;
padding: 0px 24px;
display: inline;
}
#submenu ul li a {
display: block;
padding: 0px;
/*color: #AFB9C2;*/
color: #A0B0A9;
text-align: left;
font-size: 12px;
font-weight: bold;
}
#submenu ul li a:hover {
color: #000;
}
#submenu ul li.selected a {
color: #D64202;
border-top: solid 2px;
}


/******************************************************************************/
/* Page-Content
/******************************************************************************/
#main-content ul {
margin: 0px;
margin-left: 65px; 
text-align: left;
}
#main-content ul.realisation {
margin-left: 30px;
margin-top: 15px; 
}
#main-content ul.realisation li{
margin-top: 0px; 
}

#main-content ul li {
margin: 0px;
}

#main-content ul.ul-center{
margin: 10px 0px 0px 150px;
}


/******************************************************************************/
/* BOX
/******************************************************************************/
#accueil-box1{
position: relative;
top: 30px;
left: 0px;
width: 400px;
text-align: center;
}
html>body #accueil-box1{
left: 120px;  
}
#accueil-box2{
position: relative;
top: 40px;
left: 0px;
width: 400px;
text-align: center;
}
html>body #accueil-box2{
left: 120px;  
}

.box{
margin: auto;  
}
.box-float-left{
float: left;
margin-left: 7px;
width: 46%;  
}
html>body .box-float-left{
margin-left: 15px;
}
#main-content .box-float-left ul {
margin-left: 35px; 
}

.box-float-right{
float: right;
margin-right: 7px;
width: 46%;  
}
html>body .box-float-right{
margin-right: 15px;
}
#main-content .box-float-right ul {
margin-left: 35px; 
}

.box-title{
margin: auto;
padding: 1px 0px;  
width: 100px;
background: #DE4301; 
color: #FFF;  
font-weight: bold;
position: relative;
z-index: 10;
border: solid 2px #FFF;
}
.box-middle{
margin: auto;
}
.box-left{
margin-left: 10px;
}
.box-right{
margin-right: 10px;
}

.box-content{
margin: auto;
text-align: justify;
margin-top: -10px;  
padding: 5px;
padding-top: 15px;
background: #FDE4CA;  
color: #333;
position: relative;
z-index: 9;
border: solid 1px #DE4301;
}

html>body .box-content{
border: dotted 1px #DE4301; /* pas de dotted dans IE */ 
}



/******************************************************************************/
/* Weblaps
/******************************************************************************/
#top-part{
padding: 0px 0px 20px 0px;
border-bottom: solid 1px #CCC;  
}
#left-part{
float:left;
width: 60%;
height: 200px;
padding: 10px;  
border-right: solid 1px #CCC;  
}
#right-part{
float: right;
padding: 10px;  
}





/******************************************************************************/
/* Tableaux
/******************************************************************************/
table{
text-align: center;
}

caption{
text-align: center;
padding-top: 15px;
padding-bottom: 10px;
font-weight: bold;
}

.legend{
font-size: 10px;
}

td, th{
padding: 2px 7px;
}

td{
background: #FDE4CA;
}

tr.color1 td, th{
background: #DE4301;  
color: #FFF;
}
tr.color2 td{
background: #FDE4CA;  
}
tr.color3 td{
background: #FFF;  
}
/******************************************************************************/
/* Liens
/******************************************************************************/
a:link, a:visited{
color: #D64202;
text-decoration : none;
}
a:hover{
color: #FFCC00;
}


/******************************************************************************/
/* Polices
/******************************************************************************/
.center{
text-align: center;
}
.bold{
font-weight: bold;
}
p{
padding: 0px;
margin: 15px 0px 5px 0px;
}

.msg-page{
padding: 2px;
margin-top: 30px;
color: #D64202;
border: solid 1px;
}

.colored{
color: #D64202;
}


/******************************************************************************/
/* Formulaire
/******************************************************************************/


input{
font-size: 12px;
text-align: left;
color: #666666;
background-color: #F4F1F1;
}

input.submit-sg{
border: 1px solid #C2BEBD;
background-color: transparent;
color: #000;
text-align: center;
font-size: 12px;
font-weight: bold;
}

textarea{
color: #666666;
background-color: #F4F1F1;
}




.form-row{
margin: auto;
margin-top: 10px;
clear: both;
text-align: center;
}

.form-etiquette {
float: left;
width: 15%;
text-align: right;
font-size: 12px;
}
.form-champs {
float: right;
width: 83%;
text-align: left;
}

fieldset.contact{
margin: auto;
}



/****************************************************** Formulaire de contact */
legend{
color: #D64202;
}

.float-left-50{
float: left;
width: 49%;
}
.float-right-50{
float: right;
width: 49%;
}

dl, dt, dd{
margin: 0px;
padding: 0px;
text-align: left; /* Pb IE */
}

html>body dl.form{ /* IE applique ce padding � tous ce qui se trouve dans dl */
padding-top: 15px;  
}

dl.form dt {
float: left;
clear: left;
margin: 5px;
width: 150px;
border-bottom: 1px dotted #ccc;
text-align: left;
display: inline;
}
dl.form dd {
margin: 5px;
margin-left: 160px;
text-align: left;
}
dl.form input {
width: 220px;
}

.form-error{
font-size: 12px;
color: #DE2110;
text-align: center;
}


.real-left{
	float: left;
	width: 70%;
}
.real-right{
	float: right;
	width: 25%;
}