/*
Style sheet for the CSS3 specification
*/

/*****************************
main boxes
******************************/
* { 
	box-sizing: border-box;
	}
body { 
	text-align: center;
	width: auto;
	max-width: 1280px; /* problem with IE<7   */	
	margin: 0 auto;
	padding: 0;
	}
.content, .content-transparent {
	max-width: 960px; /* problem with IE<7  see head.php */	
	min-width: 320px; /* problem with IE<7 see head.php */	
	width: auto;
	margin: 0 auto;
	padding: 4px;
	clear: both;
	/*
	it is necessary to explicitly set the "text-align" attribute for the centered box, 
	counteracting the effects of the IE5/Win workaround.
	*/
	text-align: left;
	}
	/*
.abstract-left  { 
	position: absolute;
	left: -132px;
	width: 124px;
	}
.main {
	position: relative;
	margin-left: 132px; 
	}
.main h2 {
	clear: both;
	margin-left: -132px;
	}
	*/

.main {
	margin-left: 138px; 
	}
.main .abstract-left {
	float: left; 
	margin-left: -138px; 
	width: 128px;
	}
.main h2 {
	clear: both;
	}
#menu {
	float: right;
	margin-left: 2em;
	width: 30%;
	}
#footer {
	margin-top:8px; 
	clear: both;
	text-align: right;
	}
#header {
	margin:0; 
	padding: 4px; 
	}

@media print { 
.content, .content-transparent {
	width: auto;
	}
}

@media screen and (max-width: 960px) { 
.content, .content-transparent {
	max-width: none;
	}
}
/*****************************
others
******************************/
ol, ul { 
	margin-top : 2px; 
	}
#summary {
	border:thin solid;
	padding:8px;
	list-style-type: none;
	float: left;
	margin-right: 2em;
	/* width: 50%; /*  */
	}
#summary_icon {
	display: none;
	padding-right: 16px;
	}	
#summary ol, #summary ul {
	margin: 0;
	padding-left: 0; /*  */
	list-style-type: none;
	}
#summary ol ol, #summary ul ul {
	padding-left: 20px; /*  */
	}
.cadre, .cadre-dashed, .question {
	padding: 8px; 
	}
.cadre, .question {
	box-sizing: border-box;
	border: thin solid;
	}
.cadre-dashed {
	box-sizing: border-box;
	border: thin dashed;
	}
.center {
	margin-left: auto;
	margin-right: auto;
	}
.copyright, .signature {
	text-align: right;
	}
figure {
    overflow:hidden;
	margin-left:auto; 
	margin-right:auto;
	display:inline-block;
    }  
		
figcaption {
    height:60px;
    padding:0 4px;
    opacity:.6;
    color:#fff;
    background:#000;
    -webkit-transition: margin-top .2s ease-out;
    -moz-transition: margin-top .2s ease-out;
    transition: margin-top .2s ease-out;
    }  		

figcaption {
    opacity: 1;
    }
    		
figure:hover figcaption {
    margin-top:-60px;
    }
.inline {
	display:inline-block;
	text-align: left;
	}
.left {
	float: left;
	margin-right: 8px;
	}
.links {
	float: right;
	margin-left: 16px; 
	}
.nowrap {
	clear: both;
	}
	
pre {
	white-space: pre-wrap;
	}
.rounded {
	padding: 8px; 
	/*-moz-border-radius: 10px; /* for gecko (Firefox) obsolete */
	-webkit-border-radius: 10px; /* for webkit (Konqueror, Safari) */
	border-radius: 10px; /* CSS 3 */
	}

.right {
	float: right;
	margin-left: 8px; 
	}
table.document {
	border:none; 
	border-spacing: 0;
	margin-left: auto;
	margin-right: auto
	}

@media print { 
.print {
	display: block;
	}
.no_print, .signature {
	display: none;
	}
.left-link { 
	display: none;
	}
.links { 
	display: none;
	}
.where { 
	display: none;
	}
#summary {
	display: none;
	}
}
@media screen { 

a.out { /* externals links */
	background-image: url(clipart/external.png);
	background-position: right;
	background-repeat: no-repeat; 
	padding-right: 14px;
	}
	
a[rel~=external] { /* externals links */
	background-image: url(clipart/external.png);
	background-position: right;
	background-repeat: no-repeat; 
	padding-right: 14px;
	}
h1, h2, .title, h3, .subtitle { 
	margin-top: 0.4em;
	margin-bottom: 0.2em;
	}
.print{
	display: none;
	}:
}
/* tester 768 */
@media screen and (max-width: 640px) { 
* { /* empêcher les débordements de boîtes dûs aux border ou padding */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.center, figure, .left, img, .inline, .right, table, td, th, blockquote, code, pre, textarea, input {
	max-width: 100%; /* fixe une largeur maximale  de 100 % aux éléments potentiellement problématiques */
	}
img { /* conserver le ratio des images */
	height: auto; 
	}
#summary {
	float: none;	
	border: none;
	margin-bottom: 16px;
	display: none;
	width: auto;
	}

#summary_icon {
	display: inline-block; 

	}
	
#summary li, #summary li {
 	 background: #eeeeee; /*  */
 	-webkit-border-radius: 10px; /* for webkit (Konqueror, Safari) */
	border-radius: 10px; /* CSS 3 */
	margin: 2px;
	padding: 12px;
	
	}
#summary a {  /* pour ecrans tactiles */
 	/* line-height: *//* pour ecrans tactiles */
 	text-decoration:none;


	} 
.main .abstract-left  { 
	/* position: relative; */
	float: none;
	width: auto;
	margin-left: 0;
	margin-bottom: 8px;
	}
.main {
	/* position: relative; */
	margin-left: 0; /*  */
	}
}

@media (max-width: 640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
body {
	-webkit-text-size-adjust: 70%; /* réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad retina). */
	}
}



/*****************************
fonts
******************************/
html { /* cf http://pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ */
	font-size: 100%; 
	} 
body { 
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 0.625em;  /* 10/16 */ 
	}
h1 {
	font-size: 3.2em;
	/*letter-spacing:-0.05em; /*  */ 
	font-weight: normal;/* */
	}
h2, .title, h3, .subtitle { 
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: .2em;
	}	
.abstract-left { 
	font-size: 1.1em;  /* */
	}
h3, .subtitle {
	font-weight: normal;
	}
table {
	font-size: 1em; /*  */ 
	}

.code, code, pre {
	font-family: 'Andale mono', Consolas, Monaco, 'Ubuntu mono', monospace;
	}
.content, .content-transparent {
	font-size: 1.52em;
	}
.note, .ref, .where, .signature, .copyright { 
	font-size: 0.90em;
	}
@media screen and (max-width: 640px) { 
.content, .content-transparent {
	font-size: 1.4em;
	}
}

@media print { 
.content, .content-transparent {
	/* font-family: times new roman, times, serif; /*  */ 
	font-size: 9pt; /*  */ 
	}
h1, h2, h3, .title, .subtitle { 
	/* font-family: arial, helvetica, sans-serif; /*  */ 
	}

h3, .subtitle {
	font-size: 0.96em;
	}
}

/*****************************
colors from Jazz (Matisse)

dark blue: #003399
blue: #0066cc
light blue: #3399ff

dark orange: #cc9900
orange: #ffcc00
light orange: #ffee88

dark red: #660033
red: #cc0066

black green: #006633
green: #009933
light green: #99cc99

*******************************/
body { 
	color: #660033; /* jazz dark red */
	}
body.accueil, body.heliosphera { 
	background: url(clipart/haeckel_heliosphera.png);
	background-position: center;
	}
body.heliosphera .content { 
	background: #ffffff;
	}
body.heliosphera .content-transparent { 
	background: url(clipart/haeckel_heliosphera_light.png); /* false transparency */
	background-position: center; 
	}
body.lined { 
	background: url(clipart/lined.png); /*   */	
	}

h2 { 
	color: #ffffff; /*  */
	background-color: #660033; /* jazz dark red */
	padding: .3em; 
	}
h2 a { 
	color: #3399cc; /* jazz light blue */
	}
.accueil h2 { 
	color: #cc0066; /* jazz red */
	background-color: #ffffff; /*  */
	}
h1, .title, h3, .subtitle { 
	color: #cc0066; /* jazz red */
	}
body.orange h1,  body.orange h2 { 
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ffcc00, endColorstr=#ffffff); /* IE */ 
	background: -webkit-linear-gradient(left, #ffcc00, #ffffff);
	background: -moz-linear-gradient(left, #ffcc00, #ffffff);
	background: linear-gradient(left, #ffcc00, #ffffff); /* CSS 3 */
	background-color: #ffcc00;
	padding: 8px; 
	color: #660033; /* jazz dark red */
	}
#summary, #summary ol, #summary ul {
	/* background: #ffffff; /* */
	}
.darkorange{
	background-color: #cc9900;
	color: #ffffff;
	}
.lightorange {
	border-width: thick;
	border-style: solid;
	padding: 8px;
	border-color: #ff6634; /* jazz */
	}
.code, code, pre {
	color: black;
	}
.correction {
	color : #cc0066;
	}
.negatif { 
	background-color: #808080;
	color: #ffffff;
	}
.hearts {
	color: #cc0066; /* pour les coups de coeur */
	}	
@media print { 
	body.heliosphera { 
	background: none;
	}
	body.heliosphera .content-transparent { 
	background: none;
	}
	a, body, h1, h2, .cadre, .title, h3, .subtitle { 
	color: black;
	}
}