/* ---------------------------
    Theme Name: Web Tutoriel
    Theme URI: http://www.web-tutoriel.com/
    Description: Theme du site web-tutoriel.com créé par Nicolas MAROT (blog.xenetis.org).
    Author: Nicolas MAROT
------------------------------
Mes couleurs :
    #5d5c5a :#gris-noir
    #DF800A : Orange foncé
    #f38b0b :orange clair;
    #e8e8e8:gris bordure;
------------------------------ */


/* -----------------------------------------------
    GLOBAL RESET CSS
----------------------------------------------- */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,img {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:Georgia,serif;
    vertical-align:baseline;
}
ul{ color:#5d5c5a;margin-left:20px;padding-left:20px;list-style-image:url('charte/carre-liste.png');list-style-position: outside;display:block;}
ol{padding-left:20px;list-style-position: outside;}
li{margin-top: 3px;}
p{color:#5d5c5a;}
#menu li{margin:0;}
#sous_menu{padding:0;margin:0;}

/* HTML GENERIQUE */
body {
    font-family:Georgia,"Lucida Sans",Verdana,Arial,sans-serif;
    font-size:100%;
    background: #FFFFFF ;

    position:relative;

}
 
a:link, a:visited, a:active {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
 

 
/* ELEMENTS PRINCIPAUX DE MA PAGE */

#page {width:1000px;margin:0 auto 50px auto;text-align:left;border:1px solid #e8e8e8;z-index:1;background-color:#f0efeb;}
#header {width:1002px;background-color:#fff;margin-left:-1px;position:relative;}
#header a{font-size:64px;color:#5d5c5a;text-decoration:none; }
#content {width:980px;margin:0 auto 0 auto;text-align:left;padding:0 10px;position:relative}
#sidebar-first { }
#sidebar-second { }
#footer {background-color: #3d464c;color:white;height:150px;padding:10px;margin-top:50px;}
#menu   {    background: url("charte/fond-menu.png") repeat scroll left center #f0efeb;;
    height: 44px;
    width: 1020px;
    margin-left:-10px;margin-right:auto;
     }
 
/* ELEMENTS SECONDAIRES */

#content a{color:#5d5c5a;text-decoration:underline;}
#content a:hover{color:#f38b0b ;}

h1{ 
font-size:38px;
color:#5d5c5a;
margin:10px 0;
text-align:left;
display:block;
text-decoration: underline;

}


h1:first-letter{

}


h2{
font-size:20px;
color:#5d5c5a;
margin:10px 0;
text-align:left;


}

h2.grand{
    font-size:26px;
    text-decoration: underline;
}

h3{
color:#FFF;
padding-left:5px;
font-size:17px;
background:url('charte/fond_h2.png') left no-repeat;
width:300px;
margin:40px 0 20px -20px;
height:37px;
line-height:30px;
padding-left:5px;
font-weight:normal;
text-align:left;
}
 h3:first-letter{
font-size:20px;
}

h4{
font-size:16px;
color: #f38b0b;
font-weight:bold;
margin-top:10px;
}




/* ELEMENTS MENU */
#onglet_menu {
z-index:80;
width:990px;
height:34px;
list-style:none;
padding:0;
margin:0 auto 15px auto;
position:relative;
font-size:16px;

 }
 #onglet_menu li{
position:relative;
float:left;
color:white;
line-height:34px;
height:34px;
 }

#onglet_menu li img{
margin-top:6px;
}

 #onglet_menu li:hover{
background-color: #df800a;

 }
 #onglet_menu > li:hover,#onglet_menu li.open{
    margin-top:1px;}

#onglet_menu li.open{
position:relative;
z-index:1000;
background-color: #df800a;
border-bottom:1px solid #df800a;
 }


 #onglet_menu li a{

padding:0 23px;
height:34px;
color:white;
line-height:34px;
text-decoration:none;
 }
 
 #onglet_menu li.boutique {
    background-color: #0e70e9;    margin:0;
}

 #onglet_menu li.boutique:hover {
 background-color:#0c60c8;

 }

#onglet_menu li.separateur{
width:1px;
height:34px;
background:url('charte/separateur.png') no-repeat;
}

#sous_menu {
z-index:-1;
position:absolute;
top:33px;
left:-1px;
border:1px solid #c97309;
width:250px;
list-style:none;
background-color: #df800a;

}
#sous_menu li{
clear:both;
height:34px;
width:250px;
}

#sous_menu li:hover{
background-color:#f38b0b;
}

#sous_menu li a{
padding:0 0 0 5px;

}





/* ELEMENTS CONTENT */

#img_accueil{width:700px;margin:0 auto;}

.div_quote{position:relative;padding:10px;background-color:#bcbbb8;margin-bottom:50px;}
.div_quote.large{width:960px;height:auto;clear:both;}
.div_quote p{ display:block;color:#5d5c5a;font-size:18px;text-align: left;margin:1px 0 0 5px;}
.div_quote p:first-letter{
padding-left:28px;
font-size:20px;

}
.div_quote span{ font-weight:bold; font-size:64px; color:#5d5c5a;position:absolute;}
.div_quote span.start_quote{ left:5px;top:0;}
.div_quote span.end_quote{ right:5px;bottom:-34px;}


#slider{


width:705px;
height:324px;
background-color:#FFF;

position:relative;
}
#content #slider .legende {
position:absolute;
bottom:0;
right:0;
background-color:#5d5c5a;
color:white;
height:34px;
text-align:center;
font-size:22px;
line-height:34px;
width:480px;


}
#content #slider .legende a {
   text-decoration: none;
  color:white;
}

#rotator .ui-tabs-hide,#rotator_sac .ui-tabs-hide {
    display:none;
}
#rotator #tabs_rotator .ui-tabs-nav{
list-style:none;
}

#rotator .ui-tabs-panel{
background-color:#FFF;
height:324px;
width:480px;
float:left;

}

#rotator .ui-tabs-panel p.description{
    padding:10px;
    font-size:18px;
}

#rotator .ui-tabs-panel  a.link{
position:relative;
padding:0 16px 0 16px;
margin-left:10px;
background:url('charte/fleche_droite.png') left center no-repeat;
z-index:2;
}

#rotator .ui-tabs-panel img.img_slider{
 
    height:150px;
    position: absolute;
    bottom:34px;
    right:0;
    z-index:1;
    }

#tabs_rotator{float:left;}
#tabs_rotator .ui-tabs-nav{
background-color:#bcbbb8;

text-align:center;
margin:0;
padding: 0;
height:324px;
width:225px;

}
#tabs_rotator .ui-tabs-nav li{

height:64px;
margin:0px;
line-height:62px;
font-size:16px;
}
#tabs_rotator .ui-tabs-nav li a,.ui-tabs-nav li a:hover{
text-decoration:none;
color:#5d5c5a;
height:64px;
display:block;
}
#tabs_rotator .ui-tabs-nav li.ui-tabs-selected,#tabs_rotator .ui-tabs-nav li.ui-tabs-nav-item:hover{
background-color:#f39f37;

}
#tabs_rotator li.separateur{
    height:1px;
    background-color:#5d5c5a;
    width:225px;
}

#tryptique{
clear:both;
width:980px;
margin:20px 0;
height:250px;

}

#tryptique .case_orange{
width:306px;
height:200px;

background:url('charte/coin_bleu_2.png') no-repeat bottom right #f39f37;
float:left;
}
#tryptique .case_orange a{
    color:#5d5c5a;
}

#tryptique .case_orange.marge{
    margin:0 30px 0 0;
}
#tryptique .case_orange   span{
    display:block;
    width:50px;
    height:50px;
    float:left;
}
#tryptique .case_orange  h2 {
    height:50px;
    margin:10px 5px;
    line-height:50px;
   
}
#tryptique .case_orange.trucs span.sprite-trucs{
    background:url('charte/sprite.png') -50px  0   no-repeat;
    
}

#tryptique .case_orange.trucs:hover span.sprite-trucs{
    background-position: 0px 0px ;
   
}

#tryptique .case_orange.contact span.sprite-contact{
    background:url('charte/sprite.png') -50px -50px no-repeat;
    
}


#tryptique .case_orange.contact:hover span.sprite-contact{
    background-position:  0 -50px ;
}

#tryptique .case_orange.boutique span.sprite-boutique{
    background:url('charte/sprite.png') -50px -100px   no-repeat;
}

#tryptique .case_orange.boutique:hover span.sprite-boutique{
    background-position:0 -100px;
}

#tryptique p{
    padding:5px 10px;
    font-size:20px;
}

ol{
    display:block;
    background-color: #BCBBB8;
    color:#5d5c5a;
    padding:10px;
    width: auto;
    font-size:18px;
    float:left;
	list-style:roman;

    list-style-position: inside;
}

/* ELEMENTS DE FORMULAIRE */
input { }
input.button { }
label { }
 
/* DIVERS */
#page  .ancre:hover{
      color:#5d5c5a;  

}


#page .bouton a,.bouton a:hover{
  color:#5d5c5a;  
}

.attention{
border:1px solid red;
color:red;
background:url('charte/attention.png')  no-repeat left center #ffd1d1;
text-align:left;
clear:both;
height:30px;
font-size:12px;
line-height:30px;
margin:10px 0;
padding-left:20px;


}

.information{
border:1px solid blue;
color:blue;
background:url('charte/information.png')  no-repeat left 5px #67a7cd;
text-align:left;
clear:both;
height:auto;
font-size:12px;
line-height:30px;
margin:10px 0;
padding-left:20px;


}
.validation{
border:1px solid green;
color:green;
background:url('charte/validation.png')  no-repeat left center #8fd78f;
text-align:left;
clear:both;
height:30px;
font-size:12px;
line-height:30px;
margin:10px 0;
padding-left:20px;


}

.image{border:1px solid #d4d4d4;position: relative;width:auto;margin-right:25px;}
.image span.legende{text-align: center;width:100%;position:absolute;left:0;bottom:0;font-style:italic;}
.image img{border:1px solid #d4d4d4; margin:10px 10px 20px 10px; }
.image.center{margin:0 auto;clear:both;width:400px;}
p.left{margin:20px; display:block;width:50%;}
p.left:first-letter{padding-left:20px;font-size: 20px;}
p:first-letter{padding-left:20px;font-size: 20px;}

ul.left{margin:0 20px 20px 20px; display:block;}


#groupe_politec{

position:absolute;
top:10px;
right:320px;
width:140px;
height:60px;
background:url('charte/groupe_politec.png') 0 0  white;
}

#groupe_politec:hover{
background:url('charte/groupe_politec.png') 0 -80px   white;
cursor:pointer;
}

#groupe_politec div{
border:1px solid #3C4043;
background-color:white;
height:150px;
z-index:1000;
position:absolute;
top:50px;
left:0px;
width:190px;
}
#groupe_politec img{
text-align:left;
}

#groupe_politec div img{
width:16px;
height:16px;
margin-right:5px;
margin-top:5px;
float:left;

}

#groupe_politec div ul{
margin:0px 0;
padding:0;
list-style:none;
text-align:left;
}
#groupe_politec div li{

padding-left:5px;
height:25px;

}
#groupe_politec div li:hover{

}
#groupe_politec div li a{
height:16px;
line-height:26px;
color:#3C4043;
font-size:12px;
font-weight:bold;
}
#groupe_politec div li:hover,#groupe_politec div li:hover a{
background-color:#F58700;
color:white;
}


#footer a{color:white;}
#footer a:hover{color:#ff9000;text-decoration:none;}
#footer div{
float:left;

margin-top:3px;
border-right:1px solid #d9d9d9;
height:105px;
min-width:150px;
}
#footer div.menu_bottom_fin{
border:none;
}
#footer div ul{
list-style-position:inside;
margin:0  10px;
padding:0;
}

#achat_ligne{
position:absolute;
top:20px;
right:100px;
width:180px;
height:60px;
text-align:left;
background:url('charte/en_ligne.png') right center no-repeat transparent;
}

#bouton_boutique{

background-color:#f39f37 ;
height:40px;
display:block;
position:absolute;
top:0px;
right:50px;
font-size: 18px;
padding: 5px ;
margin:10px 0;
line-height:40px;
width:150px;
z-index:100;

}
#bouton_boutique a:hover{
   color:#5D5C5A;
}

.clear { 
    clear: both;
}
 
.left {
    float: left;
}
 
.right {
    float: right;
}
.center{
text-align:center;
}

.fleche_bleu{
background:url('charte/fleche_droite.png') center left no-repeat transparent;
padding-left:18px;
}

#go_top{
position:fixed;
right:5%;
bottom:50%;
}