* {padding: 0; margin: 0;}

body{
background-color: #fff;
margin:0;
padding:0;
line-height: 1.5em;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 62.5%;
color: #1f1e1e;
}

#body{
background: #f3f0f0;
}

/* DIV */

#mainsite{
width: 960px;
margin: 0 auto;
overflow:hidden;
margin-bottom: 10px;
border: 1px solid #eee;
background-color: #fbf7f0;
}

#head{height: 300px;}

#headtitle {
display: none;
float: left;
max-width: 62.5%;
margin-top: 47px;
margin-left: 20px;
text-align: left;
}

img#banner {
position: absolute;
margin-top: 0;
}

div.social {
float: right;
position: relative;
right: 20px;
top: 5px;
bottom: 5px;
height: 21px;
z-index: 1000;
}

img.social {padding:0 0 0 15px;}
img.social:hover {transform: scale(1.15)}

span.social {font-weight:600;line-height:30px;vertical-align:bottom}


#search {
clear: right;
float:right;
position: relative;
top: 283px;
right: 3px;
height: 32px;
background-color: #fbf7f0;
z-index: 1000;
}

#search input.submit {
display:none
}

#search input.text {
width: 180px;
height: 27px;
border: 1px solid #ccc;
text-transform: uppercase;
background: transparent url(images/search.png) no-repeat right 3px;
}


/* Général */

#contentin h1, #content h2, #content h3, #content h1 a, #contentin h4, #content h5 {
font-family: "Baskerville Old Face", "Times New Roman", serif;
font-weight: 300;
}

#contentin h1 {font-size: 2.6em; margin:0.5em 0 0.5em 0; color: #485357; padding-bottom: 1em; line-height:1em} 
#contentin h2, #contentin h3 {font-size:2.6em; margin:20px 0; color: #485357; padding-bottom: 1em; border-bottom: 1px solid silver}
#contentin h1::first-letter, #content h2::first-letter, #content h3::first-letter {
font-size:1.0em; text-transform: uppercase;
} 
#contentin h4 {font-size: 2.4em;}
#contentin h5 {font-size: 2.2em;}
#contentin h6 {font-size: 0.8em; font-weight: 100}

#contentin p, #contentin blockquote, #contentin li {
text-align:justify;
padding-bottom: 1em;
font-size: 1.4em;
line-height: 1.5em;
}

#contentin li {line-height: 1.2em; margin: 0 0 0 14px}

#contentin blockquote {font-size: 1em;margin: 0 0 10px 2em;padding: 0 0 0 10px; border-left: 5px solid #8c0c0b;}
#contentin blockquote p {padding:0; margin:0}

#pp_last_update {
float: right;
display: inline-block;
margin-top: 8px;
color:#555;
font-size: 1.1em;
}

p {}
a {text-decoration:none; color: #8c0c0b; outline: none}
.blue-font {color:#005a8c}
.red-font {color:#8c0c0b}
.black-font {color:#333}

ul li {line-height: 1.2em; border: 0; padding: 3px 0; margin: 0 0 0 22px;}

ul.menulevel1, ul.menulevel2, ul.menulevel3, ul.menulevel4, ul.menulevel5, ul.sitemaplevel1, ul.sitemaplevel2, ul.sitemaplevel3, ul.sitemaplevel4, ul.sitemaplevel5, ul.submenu, ul.search {
padding-left: 0;
margin-left: 0;
}

ul.sitemaplevel1, ul.sitemaplevel2, ul.sitemaplevel3 {font-size: 12px; padding: 0;  list-style-type: decimal; }
ul.sitemaplevel1 li, ul.sitemaplevel2 li , ul.sitemaplevel3 li {padding: 5px 0; margin: 0}
ul.sitemaplevel3 li {height: 1px}
ul.sitemaplevel1 li::first-letter, ul.sitemaplevel2 li::first-letter {text-transform:capitalize}

form {margin:0;}

img {border:0;}
img.img_right {float: right; margin: 5px 0 5px 15px}
img.img_left {float: left; margin: 5px 15px -5px 0}

#contentin img {margin-bottom: 15px;}

.cadre {padding: 5px; border: 1px solid #ddd; box-shadow: 3px 3px 3px #cc;}

li {line-height: 1.0em;}

p.info {border:1px solid silver; display:inline-block; border-radius: 3px}

hr{clear:both;border:0;border-bottom: 1px solid #999;height:1px;text-align:left;margin0:20px 1px 20px;}

video {width:100%;height:100%;border:0 solid #333; border-width: 0}

.clear {clear:both}

/*   Full menu start  */ 

#menu{
width: 100%;
max-width: 960px;
font-size: 1.6em;
}

/*  Menu end   */ 

/*   Mobile menu start  */

#navi {
background: #485357 url(images/menu.png) no-repeat 100% 1px;height: 29px; text-align:center; position:relative;
}

#mobilmenu{
display: none;
}
/*  Menu mobile end   */

/*   Content  */ 
#content{
width:100%
font-size: 2.6em;
}

#contentin{
float:left;
max-width: 920px;
min-height: 200px;
padding: 0;
margin: 10px 20px;
}



/*  Colonne droite */
#boxin{
float:right;
max-width: 310px;
padding: 0; 
margin: 35px 20px 0px 10px;
}

div.boxin {
line-height: 1.3em; 
color: #666;
margin-bottom: 20px;
min-height: 80px;
}

#boxin h1, #boxin h2, #boxin h3, #boxin h4 {
background: #005a8c; font-size:1.8em; color:#fff; padding:10px; margin-bottom: 10px
}

div.boxin p {
text-align:justify;
font-size:1.4em;
line-height:1.3em;
}

div.boxin p a {
color: #005a8c;
}

div.boxin p a:hover{
color: #222;
}

div.boxin p img {vertical-align:bottom}
div.boxin p.shorttext a:hover {display:inline-block; background: #fafaff}

.col {margin:0;padding:0;}
.col0 { /* colonne gauche en accueil */
float: left;
max-width: 650px;
}
.col img {display:block; position:relative; max-width:100%;}

p.sidelink, p.moreLink {
display: inline-block;
padding: 10px;
background-color: #ccdee8;
text-transform: uppercase;
}

p.sidelink:hover, p.moreLink:hover {
background-color: #005a8c;
}

p.sidelink:hover a, p.sidelink:hover a:hover, p.moreLink:hover a, p.moreLink:hover a:hover {
color: #fff;	
}

#socialbox {max-width:240px; margin-top:-10px}

/* Mini-bog */

p.mblog_cat {border-top:1px solid silver}
span.mblog_time {float:right;margin-top:-35px}

/* Commentaires (twocents) */

.top_comment h4 {padding:15px 0}


/* Formulaire contact */

form.xh_mailform {width:500px; max-width:90%;background: #ddd;padding:20px; font-size:1em}
form.xh_mailform input, form.xh_mailform textarea {border: 1px solid silver;}
span.xh_captcha_code{font-size:2em;letter-spacing:-2px;font-style:italic;font-weight:700;background:none;color: #555;font-family: fantasy; text-shadow:2px 2px #99a; line-height:1em }
form.xh_mailform input[type=submit]{padding:8px 10px; font-size: 1.5em}


/*  Footer   */ 

#footer {
width: 100%;
max-width: 960px;
padding: 5px 0 10px 0;
margin-top:50px;
background: #2a2a2a;
color: #ccc;
font-size:1.2em
}
#footer p {text-align:center; line-height: 1.8em}
#footer a {color: #fff}

span.sitemap_txt {text-transform: uppercase; background: gray; padding: 5px}

p.navLinks {border-bottom: 1px solid gray; padding: 5px; margin-bottom: 5px}
p.navLinks a {text-transform: uppercase;}

/*  fin du footer   */ 

/* Image Home de menu */
#home_img {display:inline-block;float:left;width:18px;height:18px}
#home_img img{margin-top:10px;z-index:100}

/* Widget Scroll To Top  */
.scrollToTop{
	width:13px; 
	height:13px;
	padding:13px 20px 7px 0;
	border: 3px solid #555;
	border-radius: 20px;
	font-weight: bold;
	color: #000;
	position:fixed;
	bottom:25px;
	right:25px;
	display:none;
	background: #777;
	opacity:0.6;
}
.scrollToTop a{
	text-decoration:none;
	font-size: 40px;
	color: #000;
}
.scrollToTop:hover{
	opacity:1;
}

/* main navigation start */

div.multi_drop_menus * {
margin:0; 
padding:0;
line-height:1.2em;   
}

div.multi_drop_menus {
float:left;
width:100%;
font-family: Verdana, Helvetica, Arial, Geneva, sans-serif;
font-weight: 100;
color:#fff;
margin:0; 
background-color: #2a2a2a;
text-transform: uppercase;
}

div.multi_drop_menus ul {
display:inline;
background-color: #2a2a2a;
margin-left: 35px
}

div.multi_drop_menus li { 
font-size:95%;     
text-align: center;
border-right: 1px solid gray;
min-width: 150px;
height: 20px;
padding:10px 0;

}                						   

div.multi_drop_menus li:hover {
background-color: #8c0c0b;
}
div.multi_drop_menus a {color: #fff; padding:0 14px;}
div.multi_drop_menus a:hover {color:#fff;}
div.multi_drop_menus a:visited {color:#fff;}
div.multi_drop_menus ul li ul {text-align: left; margin-top:10px; min-width: 210px}
div.multi_drop_menus li li {background-color: #333;text-align: left;width:100%;line-height:40px;}
div.multi_drop_menus ul li ul li ul  {top:-1px;} 
div.multi_drop_menus ul {float:left;font-size:1em;}
div.multi_drop_menus li {float:left;list-style-type:none;position:relative;}
div.multi_drop_menus a {display:block;text-decoration:none;}
div.multi_drop_menus ul li ul {position:absolute;border:0;margin-left:0;}
div.multi_drop_menus ul li ul li {padding:0;border-left:0;border-right:0;font-size:0.8em;height:20px; padding:8px 0 5px}
div.multi_drop_menus ul li ul {display:none;}
div.multi_drop_menus ul li:hover ul {display:block;z-index:1000;}

div.multi_drop_menus ul li ul li ul  {position:absolute;visibility:hidden;left:100%;top:-5px;min-width:300px;border-bottom:1px solid gray}

div.multi_drop_menus ul li ul li:hover ul {visibility:visible;}
div.multi_drop_menus ul li ul li ul li  {height:16px; padding:6px 0 6px;}
div.multi_drop_menus ul li ul li:hover ul li ul {visibility:hidden;}
div.multi_drop_menus ul li ul li ul li:hover ul {visibility:visible;}
div.multi_drop_menus.vertical ul {border-left:0;margin-left:0;}

.vertical ul {width:100%;}
div.multi_drop_menus.vertical li {position:relative;width:100%;clear:left;border-right:0;}
div.multi_drop_menus.vertical ul ul  {position:absolute;left:100%;top:-1px;}
div.multi_drop_menus.vertical ul ul ul {left:100%;}

* html div.multi_drop_menus {z-index:1;}			

* html div.multi_drop_menus ul li ul {z-index:400; /*ensures menu is on top of other page elements */}

div.multi_drop_menus ul.menulevel1 a:hover, div.multi_drop_menus ul.menulevel2 a:hover, div.multi_drop_menus ul.menulevel3 a:hover{color:#ffffff;text-decoration:none;}

li.sdoc, li.sdocs, li ul li.sdoc, li ul li.sdocs {background-color:#8c0c0b;}



/*------ Menu Mobile---------*/

#mobilmenu{float:left;width:92%;font-size:90%;color:#fff;}

#mobilmenu li,#mobilmenu ul{list-style-type:none;margin:0;}

#mobilmenu a{display:block;color:#fff;text-decoration:none;line-height:200%;padding-left:1em;padding-right:1em;background: #2a2a2a;}

#mobilmenu a:hover{background: #8c0c0b;color: #fff;}

#mobilmenu li{font-size:2em;list-style-type:none;list-style-image:none;padding:0;text-transform:uppercase}

#mobilmenu li li{font-size:0.85em;}

#mobilmenu ul.menulevel1 li{line-height:1em;margin:1px 0}



/*----- MOBILE CSS ----- */

@media only screen and (min-width : 1024px){
#navi{display: none}
}



@media only screen and (min-width : 769px) and (max-width : 1023px) {

body{font-size: 60%}

#head {width: 100%;}

#mainsite {width: 100%; padding: 0}          

#contentin {max-width: 60%;}



img{max-width: 100%; height: auto;}  

#navi{display: none}

div.multi_drop_menus {width:95%;font-size:80%}

div.multi_drop_menus li {min-width: 80px} 

a {text-decoration:none}

#headtitle{top: 5px}

#headtitle h1 {font-size: 335%}

#headtitle h2 {font-size: 200%}

}



@media (min-width: 481px) and (max-width: 768px) {

body{font-size: 60%}

#head {width: 100%; height: 250px;}

#mainsite {width: 100%; padding: 0}          

#contentin {width: 100%; max-width:94%}

#boxin {width:100%; max-width: 95%}

img{max-width: 100%; height: auto;}  

div.multi_drop_menus {width:95%;font-size:80%}

div.multi_drop_menus li {min-width: 80px} 

a {text-decoration:none}

#search{position:absolute;clear:both;float:left;top:10px;left:20px;width:190px}

div.social {position:absolute;clear:both;float:right;top:10px;right:20px;margin:0}

#headtitle{margin-top: 75px; max-width: 95%;}

#headtitle h1 {font-size: 320%;}

#headtitle h2 {font-size: 190%}

#menu{display: none} 

}



@media (min-width: 321px) and (max-width: 480px) {

body{font-size: 60%}

#head {width: 100%; height: 90px;}

#mainsite {width: 100%; padding: 0}          

#contentin {width: 100%; max-width:97%;margin-left:5px}

#boxin {width:100%; max-width: 94%;margin-left:5px}

img{max-width: 100%; height: auto;}  

div.multi_drop_menus {width:95%;font-size:80%}

div.multi_drop_menus li {min-width: 80px} 

a {text-decoration:none}

#search{position:absolute;clear:both;float:left;top:3px;left:3px;width:190px}

div.social {position:absolute;clear:both;float:left;top:3px;right:3px;margin:0}

#headtitle{margin-top: 85px; max-width: 90%;}

#headtitle h1 {font-size: 320%;line-height:1em;margin-top:10px;margin-left:-2px}

#headtitle h2 {font-size: 185%;line-height:1em; margin-top: -15px}

#menu{display: none}

#navi {position:relative; margin-top:60px;}

#navi ul {width:90%}

}



@media (max-width: 320px) {

body{font-size: 60%}

#head {width: 100%; height: 50px;}

#mainsite {width: 100%; padding: 0}          

#contentin {width: 100%; max-width:95%;margin-left:5px}

#boxin {width:100%; max-width: 95%;margin-right:7px}

img{max-width: 100%; height: auto;}  

div.multi_drop_menus {width:95%;font-size:80%}

div.multi_drop_menus li {min-width: 80px} 

a {text-decoration:none}

#search{position:absolute;clear:both;float:left;top:0;left:0;width:190px}

div.social {position:absolute;clear:both;float:left;top:0;right:0;margin:0}

#headtitle{margin-top: 85px; max-width: 90%;}

#headtitle h1 {font-size: 300%;line-height:1em;margin-top:10px;margin-left:-2px}

#headtitle h2 {font-size: 180%;line-height:1em; margin-top: -15px}

#menu{display: none}

#navi {position:relative; margin-top:60px;}

#navi ul {width:90%}

}