/*####################### 
MISE EN PAGE GÉNÉRALE 
####################### */


body 
{
font-family: verdana, arial, sans-serif;         /*sauf si mentionné */
text-align: center;     /* IE corrige le bug de l'alignement des <div> pour la page du blog*/
margin-top: 0;
padding: 0;
}



#container
{
position: relative;
width: 900px;
margin: auto;
padding: 0;
}

#filler
{
position: relative;
float: left;
width: 900px;
height: 60px;
margin: auto;
background: transparent url(http://www.eriklebeau.com/images/titre.gif)  top left no-repeat;
}

#navtop
{
position: relative;
float: right;
width: 170px;
height: 60px;
margin: auto;
}


#mainmenu
{
float: right;
width: 900px;
padding: 0;
margin: 0;
text-align: left;
background-color: transparent;
/*background: transparent url(http://www.eriklebeau.com/images/fondnouvelletop.gif) right bottom no-repeat;*/
}


#main
{
position: relative;
float: left;
width: 900px;
padding-left: 0;
text-align: left;
border-right: 1px solid #aaa;     /* première mouture: 1px dashed #bb9 */ 
border-left: 1px solid #aaa;
background-color: #fff;
}



#contentlong
{
position: relative;
float: left;
width: 900px;
padding: 0;
margin-top: 15px;
}




#droit
{
position: relative;
float: left;
margin-top: 0;
width: 250px;
}


#footer 
{
position: relative;
clear: both;
width: 900px;
height: 40px;
margin: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
background: #fff;
}



#bottom
{
position: relative; 
height: 60px;
margin: 0;
background-color: #ccc;
}



h1
{
font-family: arial, sans-serif; 
text-align: left;
font-size: 11px; 
font-weight: 600;
margin: 0;
padding-top: 10px;
}




h1 a
{
font-size: 11px; 
font-weight: 600;
letter-spacing:1px;
text-decoration: none;
color: #fff;
}

h1 a:hover
{
font-size: 11px; 
font-weight: 600;
letter-spacing:1px;
text-decoration: none;
color: #d90;
}

h2 
{
font-family: Trebuchet ms , sans-serif;
font-size: 16px; 
font-weight: 600;
color: #C07F2D;        
letter-spacing: -1px; 
margin: 0 0 5px 0;
padding: 0 0 0 50px;
}

h3
{
font-family: Trebuchet ms, sans-serif;
color: #326ea1;    
font-size: 11px;
font-weight: bold;
text-align: left;
padding: 0 0 0 20px;
margin: 0;
}



h4
{
font-size: 11px; 
font-weight: 600;
color: #C07F2D;      
letter-spacing: 0px; 
margin: 0;
}

 #content h3, #contentvitrail h3, #contentjournal h4  
{
padding: 0 0 0 50px;
}

#gauchejournal h4 
{
padding: 0 0 0 30px;
}


#contentnouvelle p, #content p, #contentlong p, #contact p, #contentjournal p, #contentvitrail p
{
color: #555;
font-size: 11px;
font-weight: 500;
padding: 0 30px 10px 50px;
margin: 0;
text-align: left;
line-height: 1.7;
}

#contentnouvelle p, #commentlist, .intros, #titrecomment, #respond,  #droitweb p, #droit p, #droit li, #droitbio p
{
color: #555;
}


/*######################
NAVIGUATION PRINCIPALE
####################### */


#mainmenu ul 
{
list-style-type: none;
margin: 0;
padding: 5px 8px 5px 38px;
background-color: transparent;
border-bottom: 1px solid #aaa;
}

#mainmenu ul li
{
display: inline;
padding: 5px 8px 5px 8px;
margin: 0;
}


#mainmenu a
{
font-size: 10px;
font-weight: bold;
color: #999;
text-decoration: none;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 0;
padding: 5px 8px 5px 8px;
}

#mainmenu a:hover
{
font-size: 10px;
font-weight: bold; 
color: #333;
text-decoration: none;
margin-right: 10px;
margin-bottom: 0;
padding: 5px 8px 5px 8px;
}

.menuhighlight
{
font-size: 10px;
font-weight: bold;
color: #333;
text-decoration: none;
margin-right: 10px;
border: 1px solid #aaa;
border-bottom: 2px solid #fff ;
padding: 5px 8px 5px 8px;
background: #fff;
}




#droit a, #commentlist a, .fermer a, .portfolio a, #gauche a
{
color: #58d;
font-size: 10px;
font-weight: 600;
text-decoration: none;
letter-spacing: normal !important;    
letter-spacing: -1px;    /* ajustement pour IE */
}



#droit a:hover, #commentlist a:hover, .fermer a:hover, .portfolio a:hover, #gauche a:hover
{
color: #207;
font-size: 10px;
font-weight: 600;
text-decoration: none;
}


#content a, .prev, .next, #contentnouvelle a, #contentlong a,  #main a, #droitweb a, #droitbio a
{
color: #4B77C2;
font-size: 10px;
font-weight: 500;
text-decoration: underline;
}


#content a:hover, #contentnouvelle a:hover, #contentlong a:hover,  #main a:hover, #droitweb a:hover, #droibio a:hover
{
color: #d90;
font-size: 10px;
font-weight: 500;
text-decoration: underline;
}


/*##############
PAGE NOUVELLE
###############*/


#contentnouvelle
{
position: relative;
float: left;
width: 530px;
padding-bottom: 0;
margin-top: 15px;
}




#contentnouvelle h3
{
padding: 0 0 0 50px;
}


#contentnouvelle img
{
float: left;
margin: 5px 8px 0 0;
padding: 0;
border: solid 4px #DED9C2;
}

#contentnouvelle .imgright
{
float: right;
margin: 0 0 0 5px;
padding: 0;
}

#droitnouvelle
{
position: relative;
float: left;
margin: 0;
padding: 0;
width: 370px;
background: #fff url(http://www.eriklebeau.com/images/fondnouvelle.gif) top right no-repeat; 
}

#droitnouvelle ul
{
list-style: disc url(http://www.eriklebeau.com/images/bullet_arrow.gif);
margin: 20px 0 30px 0;
padding: 0 40px 0 70px;
text-align: left;
}

#nobullet
{
list-style: none;
}

#droitnouvelle li
{
margin: 0 0 10px 0;
padding: 0;
}

#droitnouvelle li a
{
color: #c83;
font-size: 11px;
font-weight: 500;
line-height: 1 !important; 
line-height: 1.6;
letter-spacing: 0px !important;    
letter-spacing: -0.3px;    /* ajustement pour IE */
text-decoration: none;
}

#droitnouvelle li a:hover
{
color: #c83;
font-size: 11px;
font-weight: 500;
line-height: 1 !important; 
line-height: 1.6;
letter-spacing: 0px !important;    
letter-spacing: -0.4px;    /* ajustement pour IE */
text-decoration: none;
}

.droitnouvelleb
{
color: #c83;
font-size: 10px;
font-weight: 600;
line-height: 1 !important; 
line-height: 1.5;
letter-spacing: 0px !important;    
letter-spacing: -0.6px;    /* ajustement pour IE */
}

#droitnouvelle li a img 
{
float: right;
padding: 0;
margin: 20px 0 5px 5px;
border:  2px solid #89A052;
}


#droitnouvelle li a:hover img 
{
float: right;
padding: 0;
margin: 20px 0 5px 5px;
border:  2px solid #c83;
}




/*################# 
PAGE  DESIGN WEB   
################## */



#contentweb 
{
position: relative;
float: left;
width: 675px;
padding: 0;
margin: 40px 0 0 0;
}


#gaucheweb
{
position: relative;
float: left;
width: 220px;
margin: 40px 0 0 0;
padding: 0;
}

.mainweb
{
background: #fff url(http://www.eriklebeau.com/images/fondweb.gif) top left no-repeat;
}


#client
{
position: relative;
float: left;
width: 375px;
padding: 0;
margin: 0;
}


#droitweb
{
position: relative;
float: left;
width: 280px;
margin: 0;
padding: 0;
}

#droitweb p
{
font-size: 11px;
font-weight: 500;
text-align: left;
padding: 0 30px 15px 40px;
line-height: 1.8;
margin: 0;
}

#droitweb h3, h4
{
padding: 0 0 0 40px;
}


#webnav
{
width: 110px;
list-style-type: none;
margin: 0 0 0 50px;
padding: 0;
}

#webnav li
{
display: block;
padding: 0 0 0 15px;
margin: 0 0 10px 0;
text-align: right;
}

#webnav a span { display:none }

#dojo a {display:block; width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_dojo.jpg) 0 0 no-repeat; }
#dojo a:hover {background-position: -100px 0;}
#dojo .selected {display:block; width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_dojo.jpg) -100px 0 no-repeat;}


#lhl a {display:block;width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_lhl.jpg) 0 0 no-repeat; }
#lhl a:hover {background-position: -100px 0;}
#lhl .selected {display:block; width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_lhl.jpg) -100px 0 no-repeat;}

#sdv a {display:block;width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_sdv.jpg) 0 0 no-repeat; }
#sdv a:hover {background-position: -100px 0;}
#sdv .selected {display:block; width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_sdv.jpg) -100px 0 no-repeat;}

#giri a {display:block;width:100px; height:69px;margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_giri.jpg) 0 0 no-repeat; }
#giri a:hover {background-position: -100px 0;}
#giri .selected {display:block; width:100px; height:69px; margin:0; padding:0; background: transparent url(http://www.eriklebeau.com/images/mini_giri.jpg) -100px 0 no-repeat;}


.bigscreenshot
{
float: right;
margin: 0;
padding: 5px;
border: solid 7px #DED9C2;
}

#client ul
{
list-style-type: none;
float: right;
color: #9EB860;
font-size: 10px;
font-weight: 600;
letter-spacing: normal !important; 
letter-spacing: -0.2mm;       /*ajustement pour IE*/
margin: 10px 0 0 0;
padding: 5px 0 5px 0;
background-color: transparent;
}

#client ul li
{
width: 20px;
display: inline;
padding: 0;
margin: 0;
}


#client a
{
width: 20px;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: left;
text-decoration: none;
margin: 0;
padding: 10px 10px 10px 10px;
background: transparent url(http://www.eriklebeau.com/images/rond_off.gif) center no-repeat;
}

#client a:hover
{
width: 20px;
font-size: 10px;
font-weight: bold; 
color: #fff;
text-align: left;
text-decoration: none;
margin: 0;
padding: 10px 10px 10px 10px;
background: transparent url(http://www.eriklebeau.com/images/rond_on.gif) center no-repeat;
}


.selected
{
width: 20px;
font-size: 10px;
font-weight: bold; 
color: #fff;
text-align: left;
text-decoration: none;
margin: 0;
padding: 10px 10px 10px 10px;
background: transparent url(http://www.eriklebeau.com/images/rond_on.gif) center no-repeat;
}

.textewebintro 
{
color: #326ea1;
font-size: 11px;
font-weight: 600;
letter-spacing: normal !important; 
letter-spacing: -0.2mm;       /*ajustement pour IE*/
}


/*#############
PAGE JOURNAL
##############*/

.fondjournal
{
background: transparent url(http://www.eriklebeau.com/images/fondjournal.gif) top repeat-y;
}

#gauchejournal
{
position: relative;
float: left;
width: 200px;
padding-bottom: 0;
margin: 0;
background: #fff;
}

#gauchejournal p
{
color: #c83;
font-size: 11px;
font-weight: 500;
padding: 0 15px 0 30px;
margin: 0;
text-align: left;
line-height: 1.5;
}

#gauchejournal h2 
{
padding: 0 20px 0 30px;
}

#contentjournal
{
position: relative;
float: left;
width: 500px;
padding-bottom: 0;
margin: 0;
}

#contentjournal img
{
float: left;
padding: 5px 5px 0 0;
margin: 0;

}




#droitjournal
{
position: relative;
float: left;
margin-top: 0;
width: 200px;
}


#droitjournal h4
{
margin: 0;
padding: 0;
}


#droitjournal ul, #gauchejournal ul
{
list-style: none;
padding: 0;
margin:  0 0 20px 0;
}


#droitjournal li, #gauchejournal li
{
list-style: none;
margin: 0;
padding: 0; 
}

#gauchejournal li a
{
background: transparent url(http://www.eriklebeau.com/images/lienexterne.png) right no-repeat;
padding-right: 15px;
}

#gauchejournal li
{
padding-left: 30px;
}



#droitjournal li a
{
list-style: none;
font-size: 10px;
font-weight: 500;
}

#droitjournal li a:hover
{
list-style: none;
font-size: 10px;
font-weight: 500;
color: #207;
}


#commentaire
{
float: left;
width: 200px;
background-color: #eee;
}

.date        
{
color: #c83;               
font-size: 10px; 
font-weight: 500;
text-align: left;
padding: 0;
margin: 0 0 0 50px;
}


.comment
{
text-align: center;
padding: 5px 0 5px 15px;
margin: 0;
background: transparent url(http://www.eriklebeau.com/images/com_icon.gif) left no-repeat;
border: 1px dashed #B2B2B2; 
border-width: 1px 0;
}



.commentarchives  
{
height:15px;
margin-left: 25px;
background: transparent url(http://www.eriklebeau.com/images/com_icon.gif) left no-repeat;
padding-left: 20px;
}


.edit
{
padding-left: 50px;
background: transparent;
}


#titrecomment
{
text-align: left;
margin: 0;
padding: 0 0 0 50px;
}


#contentjournal .posted
{
width: 500px;
font-size: 10px;
margin: 0;
padding: 0 0 0 50px;
font-weight: 10px;
text-align: left;
color: #c83;
background: transparent url(http://www.eriklebeau.com/images/tag.gif) left no-repeat;
}



#commentlist
{
width: 320px;
font-size: 10px;
margin: 0 0 0 50px;
}


#commentlist li 
{
list-style: none;
width: 400px;
border: 1px solid #E0D6C7;
margin: 0px 0px 30px;
padding: 0;
}


.color1  /*alterner la couleur des blocs commentaires*/
{
background-color: #f2f2f5;
}

.color2 
{
background-color: #fff;
}



#commentlist cite
{
font-style: normal;  /*ça annule l'italic */
padding: 5px 10px;
font-weight: bold;
border-bottom: 1px solid #E0D6C7;
display: block;
}

#commentlist p 
{ 
width: 380px;
padding: 5px 10px;
font-size: 8pt !important; 
}

#commentlist a 
{ 
text-decoration: none;
}

#commentlist a:hover 
{ 
text-decoration: none;
}

#postcomment
{
background: #BACEDA;
}


#postcomment p
{
color: #fff;
}


#respond
{ 
text-align: left;
color: #fff;
padding-top: 10px;
padding-left: 50px;
margin: 0;
}

#textarea 
{
width: 400px;
}

.author
{
font-size: 11px;
font-weight: bold;
color: #420;
}

.nav
{
width: 300px;
height: 20px;
}

.prev, .next 
{
float: left;
text-align: left;
}




/*##############
PAGE CONTACT
###############*/

.langswitch
{
padding-left: 40px;
}

form
{
background: #BACEDA url(http://www.eriklebeau.com/images/fondbleu.gif) top left no-repeat;
margin: 0;
padding: 0;
}

.textwhite
{
color: #fff;
padding: 0 0 0 10px;
}


/*########
PAGE BIO
#########*/

#content 
{
position: relative;
float: left;
width: 650px;
padding-bottom: 0;
margin: 0;
}

#content img
{
float: left;
padding: 5px 5px 0 0;
margin: 0 0 0 0 ;
}


.bio
{
background: #fff url(http://www.eriklebeau.com/images/fondbio.gif) bottom right repeat;
padding: 0;
margin: 0;
}

#droitbio p
{
font-size: 11px;
font-weight: 500;
text-align: left;
padding: 0 20px 15px 30px;
line-height: 1.8;
margin: 0;
}

#droitbio h4
{
padding: 20px 20px 10px 30px;
margin: 0;
}


/*########
FOOTER
#########*/


#footer p
{
font-size: 9px;
font-weight: 500;
text-align: left;
color: #aaa;
margin: 0;
padding:  15px 0 0 50px;
}

#footertext
{
float: left;
height: 40px;
}

#footerlink
{
float: right;
height: 40px;
}

#footerlink a img
{
border: 1px solid #ccc;
text-decoration: none;
padding: 0;
margin: 7px 10px 0 0;
}



#footerlink a:hover img
{
border: 1px solid #5B5B5B;
text-decoration: none;
padding: 0;
margin: 7px 10px 0 0;
}







/*AUTRES*/



table
{
border: solid 1px #E0D6C7;
padding: 5px;
margin-left: 50px;
}

td
{
font-size: 11px;
font-weight: 500;
color: #666;
text-align: left;
line-height: 1.5;
margin: 0;
padding-right: 15px;
}



.lienexterne
{
background: transparent url(http://www.eriklebeau.com/images/lienexterne.png) right no-repeat;
padding: 0 15px  0 0;
}

#separateur
{
width: 188px;
border-bottom: dotted 2px #E0D6C7;
margin-bottom: 20px;
}