@charset "utf-8";
/* CSS Document */

/* Liens et classes associées */
html { height: 100%; width: 100%; overflow-x: hidden; }
body { position: absolute; margin: 0px; padding: 0px; font-family: 'Kite One', sans-serif; font-size: 18px; background: #fff; color: #000; min-height: 100%; width: 100%; }
input, textarea, select { font-family: Arial, Sans; font-size: 12px; padding: 2px; border: 1px solid #bbb; border-radius: 5px; }
input:focus, textarea:focus, select:focus { outline: none; }
textarea { resize: none; }
a { color: #057; text-decoration: none; }
a:hover, a.hover { color: #39a; text-decoration: underline; cursor: pointer; }
a.actif { text-decoration: underline; font-weight: bold; }
img { border: none; vertical-align: top; }
table { margin: 0; padding: 0; }
tr, thead, tbody { margin: 0; padding: 0; }
td { margin: 0px; padding: 0; font-size: 13px; vertical-align: top; }
th { margin: 0px; padding: 0; font-size: 13px; vertical-align: top; }
p { margin: 0px; padding: 0px; }
ul, li { margin-top: 0px; margin-bottom: 0px; }
h1 { margin: 0px; padding: 3px; font-size: 22px; font-weight: bold; text-transform: uppercase; border-bottom: 0px solid #666; }
h2 { margin: 0px; padding: 0px; font-size: 20px; font-weight: bold; }
h3 { font-size: 24px; margin: 6px 0px; padding: 0px; font-weight: bold; }
h4 { font-size: 18px; margin: 6px 0px; padding: 0px; font-weight: bold; }
h5 { font-size: 15px; margin: 6px 0px; padding: 0px; font-weight: bold; }
h6 { font-family: "Courier New", Courier, monospace; font-size: 11px; background: #eee; color: #333; padding: 8px; margin: 4px 0px; border: 1px dotted #aaa; }
pre { width: auto; overflow: auto; max-width: 100%; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; border-radius: 8px; font-size: 11px; font-family: "Courier New", Courier, monospace; }

/* Classes de style */
.clear { clear: both; }
img.icone { width: 16px; height: 16px; margin-top: 2px; }
.espace { height: 6px; border: none; font-size: 0px; }
.petit { font-size: 12px; font-style: italic; }
.post { font-size: 12px; font-style: normal; font-family: Arial, Sans; padding: 6px; border: 1px dotted #888; 
			background: #FFF; color: #333; margin: 0px 6px; }
.content { position: relative; width: 1000px; left: 50%; margin-left: -500px; } 
.content.cntmt20 { margin-top: 20px; } .content.cntmt60 { margin-top: 60px; }

.hr { background:#fff; position:relative; padding: 0px 30px; min-height: 10px; color: #666; }
.hr:before, .hr:after { content:""; position:absolute; z-index:-1; top: 10px; bottom: 0; left: 12px; right: 12px;
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4); -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); box-shadow:0 0 10px rgba(0,0,0,0.4); 
	-moz-border-radius:100px / 10px; border-radius:100px / 10px; }
.hr:after { right: 20px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); 
	-o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }
/* h1.hr { text-shadow: -1px -1px 1px #bbb, -1px 1px 1px #bbb, 1px -1px 1px #bbb, 1px 1px 1px #bbb; color: #aaa; letter-spacing: 2px; padding: 4px 30px; text-align: center; }  */
 h1.hr { color: #fff; letter-spacing: 0px; padding: 4px 30px; text-align: center; background: radial-gradient(circle at center top, #444444, #fff); 
		text-shadow: -1px -1px 1px #333, 1px 1px 1px #aaa; }  
/*
h1.hr { color: #fff; text-shadow: 0px 0px 1px #bbb; padding: 2px 30px; letter-spacing: 1px; font-weight: bold;
		text-shadow: -1px 0 #333, 0 1px #333, 1px 0 #333, 0 -1px #333; }	*/
/* h1.hr:before, h1.hr:after { top: 0px; }

/* Entête de page */ 
#entete { position: fixed; top: 0px; left: 0px; width: 100%; padding: 0px; margin: 0px; background: none; z-index: 9; 
	box-shadow: 0 0 15px 10px rgba(0,0,0,0.6) inner; }
#entete:before { content: ""; position: absolute; z-index: -2; top: 50%; bottom: 0; left: 0px; right: 0px; 
	-webkit-box-shadow: 0 0 8px 6px rgba(0,0,0,0.6); -moz-box-shadow: 0 0 8px 6px rgba(0,0,0,0.6); box-shadow: 0 0 8px 6px rgba(0,0,0,0.6);
	/* -moz-border-radius: 50% / 100px; border-radius: 50% / 100px; */
}
#entete a { color: #ffffff; font-size: 15px; } #entete .icone { margin-top: 6px; }
#logobmp { height: 28px; float: left; }
#menu { float: right; margin-right: 0px; } #menu .icone { margin-top: 4px; margin-left: 0px; } #menu a { font-size: 14px; padding-top: 0px; }
#contenu { margin-top: 70px; }

#colg { float: left; width: 480px; } #cold { float: right; width: 480px; }
.imgblog { float: left; margin-right: 20px; margin-bottom: 12px; width: 200px; height: auto; }
.marge { margin-left: 50px; }

/* contenu admin */
#cntadmin { font-size: 13px; margin-top: 50px; }
 
/* Pied de page */
#pied { position: relative; bottom: 0; left: 0; width: 100%; padding: 10px 0px; text-align: center; font-size: 10px; background: #444444; color: #fff; margin-top: 10px; }
#pied:before { content: ""; position: absolute; z-index: -2; top: 0; height: 50%; left: 0px; right: 0px; 
	-webkit-box-shadow: 0 0 8px 6px rgba(0,0,0,0.6); -moz-box-shadow: 0 0 8px 6px rgba(0,0,0,0.6); box-shadow: 0 0 8px 6px rgba(0,0,0,0.6);
/*	-moz-border-radius: 50% / 100px; border-radius: 50% / 100px; */ }
#pied a { font-size: 12px; color: #fff; }
 
/* Apercu articles */
.cntArticle { font-size: 11px; line-height: 13px; margin-left: 18px; margin-bottom: 4px; padding-top: 4px; text-align: justify; }
.btnArticle { height: 16px; width: 16px; margin-top: 2px; }
.titreArticle { font-size: 14px; text-transform: uppercase; }

/* Div popup */
.divPopup { position: absolute; width: auto; height: auto; max-height: 200px; overflow: auto; background: #fff; border: 1px solid #888; }

/* ------------------------------------------------ */
/* Format PC/tablettes < 1024px						*/
@media handheld, only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {

	.content { position: relative; width: auto; margin: 0 12px; left: 0px; }
	#entete { position: relative; } #entete .content { padding: 0px; width: auto; }
	#contenu { margin-top: 20px; }
	#colg { float: none; width: auto; } #cold { float: none; width: auto; }
}

/* ------------------------------------------------ */
/* Format mobiles < 670px							*/
@media handheld, only screen and (max-width: 670px), only screen and (max-device-width: 670px) {
	body { font-size: 15px; }
	.imgblog { width: 100px; }
	.marge { margin-left: 12px; }
	#logobmp { height: auto; float: none; width: 80%; margin: 0 10%; margin-bottom: 10px; }
	#entete .content { text-align: center; }
	#menu { float: none; display: inline-block; width: auto; } #menu .icone { clear: both; float: left; margin-right: 8px; } #menu a { float: left; margin-top: 4px; }
	img { max-width: 100%; }
}