/* RESET 
----------------------------------------------- */

	html, body, form, fieldset, legend, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6, code, kbd, q {margin: 0; padding: 0;}
	* {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif;}

/* GENERAL 
----------------------------------------------- */
	body { padding-top: 40px; padding-bottom:10px;	background-color: white;	background-image: url('../images/background v2.jpg');	background-position: top;	background-repeat: no-repeat; background-attachment: fixed; min-height: 100%; margin-bottom: 50px;}
	/*.container { background-color: white; margin-left: auto; margin-right: auto; max-width: 1174px; height: 100%; padding-bottom: 50px; }*/
	header { text-align: center;height: 151px; border-bottom: 1px solid #333; box-shadow: 0px 2px 4px #999;}
	footer { clear: both; width : 100%; position : fixed; text-align: center; border-top: solid 1px black; font-size: 0.7em; padding-top: 10px; padding-bottom: 10px; background-color: white; bottom: 0; }
	footer a {font-weight: bold; color: red; text-decoration: none;}
	footer a:hover {font-weight: bold; color: red; text-decoration: underline;}
	footer a:visited {font-weight: bold; color: red; text-decoration: none;}
	p { font-size: 12px; padding-left: 5px; padding-right:5px;}	
	.ariane  { padding-top: 5px;padding-left: 20px; font-style: italic;} 
	article {padding-left: 10px; padding-bottom: 60px; padding-right: 10px;}
	details {background-color: white; margin-right: 10px; padding-bottom: 5px; padding-top: 5px; border-bottom: dashed 1px black;}
	details ul li {margin-left: 20px;}
	summary {padding-left: 10px; background-color: #eaeaea}
	section ul {list-style-type: none; padding: 0px; margin: 0px;}
	section ul li {background-image: url('../images/manga/bullet.png'); background-repeat: no-repeat; background-position: 0px center; padding-left: 15px; }
	section ul li:hover {background-image: url('../images/manga/bullet_on.png'); background-repeat: no-repeat; background-position: 0px center; padding-left: 15px; }
	#centre {margin-bottom: 50px; margin-right: 5px; margin-left: 5px;}
	
/* TITRES 
----------------------------------------------- */
	h1 {	font-family: 'Bangers', cursive; text-shadow: 2px 2px 4px #999;	text-align: center;	font-size: 3em;}	
	h2 { font-family: 'Boogaloo', cursive; font-size: 2em; clear: both; text-align: center; padding-top: 0px; text-shadow: 2px 2px 4px #999;}
	h3 {	font-family: 'Boogaloo', cursive; text-shadow: 2px 2px 4px #999;	text-align: center;	font-size: 2em; padding-top: 10px; padding-bottom: 10px; clear: both;}	
	h4 {	font-family: 'Boogaloo', cursive;font-size: 2em;}	
	h5 { font-family: 'Boogaloo', cursive;font-size: 1.5em; text-align: center;text-shadow: 2px 2px 4px #999;}
	h6 { color:brown; font-size: 1em; text-decoration: underline; font-weight: bold; padding-bottom: 0px;}
	.titredusite { float: left; width: 40%; padding-top: 30px; padding-left: 150px;} 
	.titredusite2 {	display: none;}
	.titretabs {font-size : 0.8em;}
	.japanese h1 {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif; text-shadow: 2px 2px 4px #999;	text-align: center;	font-size: 3em;}	
	.japanese h2 {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif;clear: both; text-align: center; padding-top: 20px; 	padding-bottom: 20px; text-shadow: 2px 2px 4px #999;}
	.japanese h3 {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif; text-shadow: 2px 2px 4px #999;	text-align: center;	font-size: 2em; padding-top: 10px; padding-bottom: 10px; clear: both;}	
	.japanese h4 {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif;font-size: 1.5em;}	
	.japanese h5 {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Tahoma, Helvetica, Sans-Serif;font-size: 1.5em; text-align: center;text-shadow: 2px 2px 4px #999;}
	.japanese h6 { color:brown; font-size: 1em; text-decoration: underline; font-weight: bold; padding-bottom: 10px;}
	.clearfix { clear: both;}
	
/* BOX de Mise en Page 
----------------------------------------------- */
	.presentation{ float: left;	height: auto;width: 100%;margin-bottom: 30px;padding: 0px 10px 15px 10px;border: 1px solid #333333;background-color: #FFFFFF;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 10px #777;	-webkit-box-shadow: 2px 2px 10px #777; box-shadow: 2px 2px 10px #777;}
	.presentation span {	margin: 0px;padding: 2px 3px 2px 2px;background-color: #FFFFFF;	font-size: 16px;font-weight: bold;color: #000099;position: relative;top: -10px;}
	.presentation a, .presentation a:hover, .presentation a:visited {color: brown;}
	section ul {padding-left: 2em;}
	
	.portrait{ float: left;	height: auto;width: auto;	margin: 10px 15px 30px 10px;padding: 0px 10px 15px 10px;border: 1px solid #333333;background-color: #FFFFFF;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 10px #777;	-webkit-box-shadow: 2px 2px 10px #777; box-shadow: 2px 2px 10px #777;}
	.portrait span {	margin: 0px;padding: 2px 3px 2px 2px;background-color: #FFFFFF;	font-size: 16px;font-weight: bold;color: #000099;position: relative;top: -10px;}
	
	
	.freeboxleft{ width: 190px;text-align: center;float: left;	height: auto; margin: 10px 15px 10px 10px;padding: 0px 10px 15px 10px;border: 1px solid #333333;background-color: #FFFFFF;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 10px #777;	-webkit-box-shadow: 2px 2px 10px #777; box-shadow: 2px 2px 10px #777;}
	.freeboxleft span {	margin: 0px;padding: 2px 3px 2px 2px;background-color: #FFFFFF;	font-size: 16px;font-weight: bold;color: #000099;position: relative;top: -10px;}
	
	.freeboxright{ width: 200px;text-align: center;float: right;	height: auto; margin: 10px 15px 10px 10px;padding: 0px 10px 15px 10px;border: 1px solid #333333;background-color: #FFFFFF;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 10px #777;	-webkit-box-shadow: 2px 2px 10px #777; box-shadow: 2px 2px 10px #777;}
	.freeboxright span {	margin: 0px;padding: 2px 3px 2px 2px;background-color: #FFFFFF;	font-size: 16px;font-weight: bold;color: #000099;position: relative;top: -10px;}
	
	.freebox{ width: auto;text-align: center; height: auto; margin: 10px 15px 30px 10px;padding: 0px 10px 15px 10px;border: 1px solid #333333;background-color: #FFFFFF;font-size: 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 2px 2px 10px #777;	-webkit-box-shadow: 2px 2px 10px #777; box-shadow: 2px 2px 10px #777;}
	.freebox span {	margin: 0px;padding: 2px 3px 2px 2px;background-color: #FFFFFF;	font-size: 16px;font-weight: bold;color: #000099;position: relative;top: -10px;}
	.freebox img { max-width: 100%; height: auto; max-height: 200px }
	#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5, #tabs-6, #tabs-7 {width: 100%; padding-left: 0px; padding-right: 0px;}
	#tabs1,#tabs2,#tabs3,#tabs4,#tabs5,#tabs6,#tabs7 {min-height: 1000px;}



/* liens 
----------------------------------------------- */
	a, a:visited { text-decoration: none; color: black;}
	a:hover { text-decoration: none; color: red; font-weight: bold; }
	.plusdinfos {position: relative; float: right; padding: 0; margin: 0; color: red; text-shadow: 2px 2px 2px #999;font-weight: bold;}
	.plusdinfos a, a:hover, a:visited {color: #993333;}
	
/* IMAGES 
----------------------------------------------- */
	img { border: 1px solid black;  height: auto;}
	.logo img{float: left;width: 200px;}
	.banner img {float: right;height: 150px;}
	.imgleft {float: left; margin-right: 10px;}
	.imgright {float: right; margin-left: 10px;}
	.imgcenter {text-align: center; margin-left: 10px;margin-right: 10px;}
	.noborder {border: none;}
	.captures { text-align: center;}
	.captures li {  display: inline; list-style-type: none; padding: 10px;}
	.captures img { margin: 10px;}
	.freeboxright img, .freeboxleft img {max-width: 100%;  }
	#carte img {
	width: 100%;
	}
	

/* MISE EN PAGE 
----------------------------------------------- */
	article ul {padding-left: 30px; font-size: 0.7em;	}
	blockquote {font-size: 0.8em; color: red;}
	#creationpage { clear: both; padding-top: 40px;}
	.deuxcolonnes {	-webkit-column-count: 2;-webkit-column-gap: 20px;-webkit-column-rule: 1px solid #ccc;-moz-column-count: 2;-moz-column-gap: 20px;-moz-column-rule: 1px solid #ccc;column-count: 2;column-gap: 20px;column-rule: 1px solid #ccc;}
	.underline {text-decoration: underline;}
	.puceleft{ float: left; padding-right: 10px; border: none;}
	.puceright{ float: right; padding-left: 10px; border: none;	}
	cite {color: red;}
	hr {clear: both;}
	
/* TABLEAUX
----------------------------------------------- */
	table { font-size: 0.8em; vertical-align: middle;}
	tr:nth-child(odd) {background:#eee;}
	tr:nth-child(even) {background:#ddd;}
	tr:first-child {background:#333; color: white;}
	table tr + tr:hover {background: #bbb; color: brown;}
	table tr + tr td:hover {background:#fff}
	table th:empty, table th:empty:hover { background: white;}
	table td {padding: 3px;}
	
	tbody tr:nth-child(odd) {background:#eee;}
	tbody tr:nth-child(even) {background:#ddd;}
	tbody tr:first-child {background:#eee; color: black;}
	tbody tr + tbody tr:hover {background: #bbb; color: white;}
	tbody tr:first-child + tbody tr tbody td:hover {background:#777}
	
	.tablerow {
	display: table-row; 
	}

	.tablecol {
	display: table;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

	.tablecell{
	display: table-cell;
	vertical-align: top;
	word-wrap: break-word;
	}
	
	.tablecell200{
	display: table-cell;
	vertical-align: top;
	word-wrap: break-word;
	max-width: 200px;
	width: 200px;
	}
	
	.tablecell200 img{
	width: 200px;
	}
	
	figure{
	width: -webkit-min-content;
	width: -moz-min-content;
	/*width: 200px;*/
	margin: 1em;
	padding: 1em;
	background: #EFEFEF;
	border: 1px solid rgba(0,0,0,.1);
	display: inline-block;
	vertical-align: top;
	}
	
	figure img {
	display: block;
	margin-bottom: 1em;
	max-width: 200px;
	max-height: 200px;
	}
	
	figcaption {
	line-height: 1.3;
	font-size: 12px;
	}
	
	.gris {color: grey;}
	 
	.techniques table {
		width: 100%;
		border: 1px solid black;
	}
	
	.techniques td {
		border: 1px solid black;
	}
	
/*--------------------------------------------- */
/* POUR LES SMARTPHONES PORTRAITS 320px~767px 	*/
/*--------------------------------------------- */

@media only screen and (max-width: 767px) {
	header { height: 100px; border: none;}
	.deuxcolonnes {	-webkit-column-count: 1;-webkit-column-gap: 10px;-webkit-column-rule: 1px solid #ccc;-moz-column-count: 1;-moz-column-gap: 10px;-moz-column-rule: 1px solid #ccc;column-count: 1;column-gap: 10px;column-rule: 1px solid #ccc;}
	/* IMAGES 
	----------------------------------------------- */
		.logo img{width: 100px;}
		.banner img {height: 100px;}
		.nodisplay {	display: none;}
}		
		
/*--------------------------------------------- */
/* POUR LES SMARTPHONES PAYSAGES 480px~767px 	*/
/*--------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
		/* IMAGES 
	----------------------------------------------- */
		.logo img{width: 200px;}
		.banner img {height: 100px;}
		.nodisplay {	display: none;}
		img { height: auto;}
		.deuxcolonnes {	-webkit-column-count: 1;-webkit-column-gap: 10px;-webkit-column-rule: 1px solid #ccc;-moz-column-count: 1;-moz-column-gap: 10px;-moz-column-rule: 1px solid #ccc;column-count: 1;column-gap: 10px;column-rule: 1px solid #ccc;}
}
/*--------------------------------------------- */
/*		 POUR LES TABLETTES 768px~991px 		*/
/*--------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991px) {
.deuxcolonnes {	-webkit-column-count: 1;-webkit-column-gap: 10px;-webkit-column-rule: 1px solid #ccc;-moz-column-count: 1;-moz-column-gap: 10px;-moz-column-rule: 1px solid #ccc;column-count: 1;column-gap: 10px;column-rule: 1px solid #ccc;}
}
/*	RETINA OVERRIDES 
----------------------------------------------- */

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

}