/**********
 Date : 21 juillet 2011
 Auteur : Marc Trotignon
 Version : 1.0
 
 Projet : Nouveau site du lycée du Noordover
 ****/

/*** un reset des principales balises pour commencer ***/
html, body, div {
    margin: 0px;
    padding: 0px;
}

body {
    background: #fff url(img/fond_body.jpg) center top repeat-y;
    /*background: #fff url(img/fond_body_comp.jpg) center top;
    background-attachment: fixed;*/
    font-family: Verdana, Arial, sans-serif;
    color: #373737;
}

#wrapper #header #navhaut a {
    color: #fff;Orientat
    text-decoration: none;
}
    
#wrapper #header #navhaut a:hover, focus, #wrapper #header #navhaut a.en-cours2 {
    text-decoration: underline;
}

@font-face {
    font-family: 'JournalRegular';
    src: url('font/journal-webfont.eot?') format('eot'),
         url('font/journal-webfont.woff') format('woff'),
         url('font/journal-webfont.ttf') format('truetype'),
         url('font/journal-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
}

.font {
font-family:'JournalRegular';
}

.clear {
    clear: both;
}
#wrapper #header #navbas a {
    color: #a3801a;
}

#wrapper #header #navbas a:hover, focus, #wrapper #sous_menu a:hover, focus, #wrapper #header #navbas .en-cours, #wrapper #sous_menu .en-cours{
    text-decoration: none;
    color: #fff;
    background-color: #932c3b;
}

#fondheader {
    height: 130px;
    margin: 0 auto 0 auto;
    background: url(img/fond_header2.png) center top no-repeat;
}
  
#fondmenubas {
    height: 60px;
    margin: 0 0 0px 0;
    background: url(img/fond_header_bas03.png) left repeat-x;
}
#wrapper {
    width: 940px;
    margin: -192px auto 0 auto;
    padding: 0;
    /**background-color: red;
    height: 500px;**/
}

#header {
    position: relative;
    height: 190px;
}
    
#wrapper #header h1 {
    float: left;
    margin: 0;
    padding: 6px 20px 0 0;
}
#wrapper #header #logo02 {
    margin: 0;
    padding: 12px 0 0 0;
}
 
#wrapper #header #navhaut {
    position: absolute;  
    top: 76px;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

#wrapper #header #navhaut li {
    list-style: none;
    display: inline;
    margin: 0 0 0 20px;
    padding: 0;
}

#wrapper #header #navbas .etab, #wrapper #header #navbas .vie_etab, #wrapper #header #navbas .enseign_sec, #wrapper #header #navbas .form_bts {
    text-align: left;
}

#wrapper #header #navbas .etab ul, #wrapper #header #navbas .vie_etab ul, #wrapper #header #navbas .enseign_sec ul, #wrapper #header #navbas .form_bts ul{
    text-align: left;
}
#wrapper #header #navbas, #wrapper #header #navbas ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 30px;
    text-align: center;
}

#wrapper #header #navbas {
    position: absolute;
    top: 144px;
    left: 0px;
    font-weight: bold;
    font-size: 14px;
    z-index: 110;
}

#wrapper #header #navbas a {
    display: block;
    padding: 0 0 0 10px;
    background: #fda17c;
    opacity: 0.9;
    filter:alpha(opacity=90); /* degré d'opacité pour IE*/
    color: #932c3b;
    text-decoration: none;
    width: 224px;
   
}

#wrapper #header #navbas li {
    float: left;
    border-right: 1px solid transparent;
}
html>body #wrapper #header #navbas li {
    border-right: 1px solid transparent;
}

#wrapper #header #navbas li ul {
    position: absolute;
    width: 224px;
    left: -999em;
}

#wrapper #header #navbas li ul li {
    /*border-top: 1px solid #fff;*/
}
html>body #wrapper #header #navbas li ul li {
    /* border-top: 1px solid transparent;*/
}

#wrapper #header #navbas li ul ul {
    margin: -30px 0 0 234px;
    z-index:40;
    /*border-left: 1px solid #fff;*/
}

html>body #wrapper #header #navbas li ul ul {
    /*border-left: 1px solid transparent;*/
}

#wrapper #header #navbas li .form_bts ul {
    margin: -30px 0 0 -234px;
    /*border-left: 1px solid #fff;*/
}

#wrapper #header #navbas li ul ul a{
    background: #fdb99e;
}
#wrapper #header #navbas li:hover ul ul, #wrapper #header #navbas li.sfhover ul ul {
    left: -999em;
}

#wrapper #header #navbas li:hover ul, #wrapper #header #navbas li li:hover ul, #wrapper #header #navbas li.sfhover ul, #wrapper #header #navbas li li.sfhover ul {
    left: auto;
    min-height: 0;
}

/* mise en forme de l'image et de son encadrement*/
#wrapper #accroche {
    position: absolute;
    top: 196px;
    left: auto;
    /*margin: 14px 0 10px 0;*/
    height: 300px;
    padding: 0;
    z-index:3;
}

#wrapper #accroche_img {
    position: relative;
    margin: 30px 0 16px 20px;
    height: 100%;
    width: 100%;
    z-index:4;  
}
/* mise en forme du menu vertical en latéral gauche */
#menu, #menu01, #menu02, #menu03, #menu04, #menuactua, #menucine{
	float: left;
	width: 188px;
        margin: 0 30px 0 0;
	padding: 9px 0 0 0; 
	list-style: none;
}
#menu li, #menu01 li, #menu02 li, #menu03 li, #menu04 li, #menuactua li, #menucine li {
	margin: 0 0 10px 0;
}

/* Les liens sont affichés comme des blocs, de même que les SPAN qu'ils
   contiennent, et on joue sur du padding et une même image de fond alignée
   différement à chaque fois pour créer une «boite» de lien. */
#menu a, #menu01 a, #menu02 a, #menu03 a, #menu04 a, #menuactua a, #menucine a {
	/*margin: 0;*/
        display: block;
	width: 100%; /* Nécessaire pour IE6. Voir concept de HasLayout */
	text-decoration: none;
        font-size: 12px;
	color: #113333;
        /*padding: 1px 0 1px 0;*/ 
	background: url(img/fond_menu02.png) no-repeat left bottom;
}
#menuactua a {
	/*margin: 0;*/
        display: block;
	width: 100%; /* Nécessaire pour IE6. Voir concept de HasLayout */
	text-decoration: none;
        font-size: 12px;
	color: #113333;
        /*padding: 1px 0 1px 0;*/ 
	background: url(img/fond_menu_actua.png) no-repeat left bottom;
}
#menucine a {
	/*margin: 0;*/
        display: block;
	width: 100%; /* Nécessaire pour IE6. Voir concept de HasLayout */
	text-decoration: none;
        font-size: 12px;
	color: #113333;
        /*padding: 1px 0 1px 0;*/ 
	background: url(img/fond_menu_cine.png) no-repeat left bottom;
}
#menu a span, #menu01 a span, #menu02 a span, #menu03 a span, #menu04 a span, #menucine a span, #menuactua a span {
        /*margin: 0;*/
	display: block;
	position: relative;
	bottom: 7px;
	padding: 6px 10px 6px 10px;
	background: url(img/fond_menu02.png) no-repeat left top;
}
#menuactua a span {
        /*margin: 0;*/
	display: block;
	position: relative;
	bottom: 7px;
	padding: 6px 10px 6px 10px;
	background: url(img/fond_menu_actua.png) no-repeat left top;
}
#menucine a span {
        /*margin: 0;*/
	display: block;
	position: relative;
	bottom: 7px;
	padding: 6px 10px 6px 10px;
	background: url(img/fond_menu_cine.png) no-repeat left top;
}
#menu h4, #menu01 h4, #menu02 h4, #menu03 h4, #menu04 h4, #menucine h4, #menuactua h4 {
	/*margin: 20px 0 40px 0;*/
        display: block;
	width: 100%; /* Nécessaire pour IE6. Voir concept de HasLayout */
	text-decoration: none;
        font-size: 40px;
        text-align: center;
        /*font-size: 12px;*/
	color: #113333;
        /*padding: 1px 0 1px 0;*/ 
	background: url(img/fond_titre_menu_02.png) no-repeat center bottom;
}
#menu h4 span, #menu01 h4 span, #menu02 h4 span, #menu03 h4 span, #menu04 h4 span, #menuactua h4 span, #menucine h4 span {
        /*margin: 0;*/
	display: block;
	position: relative;
	bottom: 4px;
	padding: 0px 6px 0px 6px;
	background: url(img/fond_titre_menu_02.png) no-repeat center top;
}

#menu a:hover, focus, #menu01 a:hover, focus, #menu02 a:hover, focus, #menu03 a:hover, focus, #menu04 a:hover, focus, #menuactua a:hover, focus, #menucine a:hover, focus,  {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

#menu a span:hover, focus {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu01 a span:hover, focus {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu02 a span:hover, focus {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu03 a span:hover, focus {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}
#menu04 a span:hover, focus {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}
#menuactua a span:hover, focus {
        background: url(img/fond_menu_survol_actua.png) no-repeat left top;
        color: #fff;
}
#menucine a span:hover, focus {
        background: url(img/fond_menu_survol_cine.png) no-repeat left top;
        color: #fff;
}
#menu a .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu01 a .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu02 a .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu03 a .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}

#menu04 a .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left top;
        color: #fff;
}
#menuactua a .actuel {
        background: url(img/fond_menu_survol_actua.png) no-repeat left top;
        color: #fff;
}
#menucine a .actuel {
        background: url(img/fond_menu_survol_cine.png) no-repeat left top;
        color: #fff;
}
#menuactua a {
	/*margin: 0;*/
        display: block;
	width: 100%; /* Nécessaire pour IE6. Voir concept de HasLayout */
	text-decoration: none;
	text-align: center;
        font-size: 12px;
	color: #113333;
        /*padding: 1px 0 1px 0;*/ 
	background: url(img/fond_menu_actua.png) no-repeat left bottom;
}



#menu a span .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

#menu01 a span .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

#menu02 a span .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

#menu03 a span .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

#menu04 a span .actuel {
        background: url(img/fond_menu_survol02.png) no-repeat left bottom;
        color: #fff;
}

blockquote {
    width: 696px; /* 940 - 122 - 122 = 696px*/
    height: 75px;
    padding: 0 83px 0 81px;
    background:transparent url(img/blockquotes.png) 24px 0px no-repeat;
}



.news .description h4 {
font-size:30px;
margin:-8px 0 0 0px;
padding:0px;
}
blockquote p {
    text-align: justify;
    /*font-family: */
    font-style: italic;
    font-size: 14px;
    line-height: 20px;
}

/***Contenu de la partie gauche des actualités de la page index **/
#contenu #side_gauche {
width: 460px;
height: 284px;
background: url(img/fond_agenda.jpg) no-repeat left top;
/**background-color: red;
height: 300px; **/
float:left;
margin:0px 20px 20px 0;
box-shadow: 0px 1px 5px 0px #4a4a4a; 
}

#contenu #side_gauche h3 {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 50px;
    color: #fa8151;
}

#contenu #side_gauche .news .vignette {
float:left;
margin:0 20px 0 0;
}

#contenu #side_gauche .news {
margin:0 0 10px 0;
}

#contenu #side_gauche p {
margin:0px 0 8px 0;
padding:0px;
font-size: 12px;
line-height:15px;
}

.description {
float:left;
width:300px;
}

#contenu #side_gauche a {
    font-size: 12px;
    font-style: italic;
    padding: 0 0 20px 20px;
}
.more {
display:block;
width:102px; /*112px - 32 = 80*/
height:37px; /*37-12*/
padding:9px 0 0 25px;
margin:0px;
background: url(img/bouton.png) left top no-repeat;
}
/** contenu de la partie droite agenda de la page index **/
#contenu #side_droite {
width: 460px;
height: 284px;
background: url(img/fond_agenda.jpg) no-repeat left top;
/**background-color: red;
height: 300px; **/
float:left;
margin:0px 0px 20px 0;
box-shadow: 0px 1px 5px 0px #4a4a4a; 
}

#contenu #side_droite h3 {
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 50px;
    color: #fa8151;
}

#contenu #side_droite a {
    font-size: 12px;
    font-style: italic;
    padding: 0 0 20px 20px;
}

#contenu #partenaires {
    float: left;
    height: 100px;
    width: 940px;
    margin: 0 0 20px 0;
}
/** corps du texte principal à droite des menus verticaux **/

#contenu {
	float: left;
	width: 940px;
        margin: 0 0 0 0;
	padding: 0;
        /*background: powderblue;*/
}

#contenu #placement_titre {
    margin: 0 0 20px 220px;
    /*background: url(img/fond_titre_page.jpg) left top no-repeat;*/
}

#contenu #placement_titre h3 {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 50px;
    color: #fa8151;
   
    /*background-color: blue; */
}
/* boite à fond clair */

/*#contenu .boite {
    padding: 20px;
    background: #EFF3E0;
}*/
#wrapper #sous_menu, #wrapper #sous_menu ul {
    height: 56px;
    padding: 0px 0 0 0;
    width: 940px;
    margin: 0;
    list-style: none;
    line-height: 28px;
    text-align: center;
    background: url(img/fond_header_bas.png) left repeat-x;
}

#wrapper #sous_menu a {
    display: block;
    margin: 7px 0 0 0;
    padding: 2px 0 7px 0;
    text-decoration: none;
    color: #a3801a;
    font-size: 14px;
    font-weight: bold;
    /*height: 20px;*/
    /*width: 313px;*/
}

#wrapper #sous_menu li {
    float: left;
    text-decoration: none;
}


#contenu p {
 width: 720px;
 float: left;
 margin: 0;
 text-align: justify;
 font-size: 14px;
 font-style: italic;
 text-indent: 40px;
 padding: 0 0 20px 0;
}

#contenu h4, #contenu #texte_image h4{
    margin: 0px 0 5px 0;
    padding: 0;
    font-family: 'JournalRegular'; 
    font-size: 40px;
}

#contenu #texte_image {
    float: left;
    width: 720px;
    margin: 0px 0 0 0;
    padding: 0;
}
#contenu #texte_image ul {
    padding: 0 0 0 0px;/*anciennement 0 0 0 15px */
}

#contenu #texte_image li {
    font-size: 14px;
    font-style: italic;
    text-align: justify;
    margin: 0 0 0 40px;
}

#contenu #texte_image #image img {
    float: left;
    margin: 0 20px 0 0;
    padding: 0;
}

#contenu #texte_image #image p {
    float: left;
    margin: 0;
    width: 478px;
}
/* style des tableaux informatifs */

#contenu table {
    float: right;
    width: 720px;
    font-size: 14px;
    margin: 0px;
    border-collapse: collapse;
    /*border: 1px solid #214c9b;*/
    
}

#contenu caption {
    padding: 10px 0;
    font-weight: bold;
    font-size: 16px;
   }

#contenu th, #contenu td {
    padding: 0px 8px;
    border: 1px solid #214c9b;
    text-align: left;
    vertical-align: top;
}

#contenu td {
    padding: 4px 8px;
}

#contenu td span {
     vertical-align: middle;
}
#contenu table .pair {
    background: #d9eeff;
}

#contenu table .impair {
    background: #b2ddff;
}
/** pied de page **/

#footer {
     background: #fde59e;
     border-top: 5px solid #fad051;
     padding: 0px 0 0 0; /* repousse l'image du footer après le dernier item du menu : à modifier si le menu le plus long est modifié*/
     text-align: center;
}

#footer table {
    width: 940px;
    font-size: 12px;
    text-align: center;
    margin: 0 auto 20px auto;
    border-collapse: collapse;
}

#footer th {
    font-weight: bold;
    width: 25%;
    line-height: 25px;
    color: #a3801a;
}

#footer td {
    line-height: 25px;
    vertical-align: top;
}

#footer a {
    text-decoration: none;
    color: #a3801a; 
}

#footer a:hover, focus {
    text-decoration: none;
    color: #932c3b;
}

#footer #adresse {
    width: 940px;
    margin: 0 auto 0 auto;
    padding: 0 0 20px 0;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
}

#footer #adresse a {
    /*text-decoration: none;*/
    color: blue;
}