* {margin:0; padding:0;} /* on remet à 0 les préférences du navigateur, comme indiqué dans le cours 9 -- ceci n'est pas forcément obligatoire, mais évite de mauvaise surprise. */

/* On cable la nouvelle police, on lui donne un nom et on indique l'url où la télécharger. Cours 9 */ 
@font-face {font-family:'NewFont'; src:url('http://themes.googleusercontent.com/static/fonts/fruktur/v1/wW9QEJ2KEYS75opRHz2YTg.woff');}

/* On indique la nouvelle police pour les titre et on ajoute l'ombrage. On déclare cela pour les 3 types de titre d'un coup. - cours 3 et 4b */
h1,h2,h3 {
	font-family:'NewFont'; 
	text-shadow: 0.1em 0.1em 0.2em rgba(30,30,30,0.6);
	margin-bottom:0.5em; /* Instruction non nécessaire, c'est juste une question d'esthétique */
}

/* On décale légèrement le titre de l'article - Cours 4b */
article h2 {margin-left:1em;}

/* On définit la couleur de fond de toute la page - Cours 3 */
html {background-color:#ff7;}	

/* Pour le body, qui englobe le header, le footer et ce qui restera entre deux et qu'on n'aura pas retiré du flux */
body {
	width:98%; /* On définit une largeur relative (pour l'adaptabilité de la page au cadre) légèrement inférieure à 100% (pour laisser que la "marge" html transparaitre) - Cours 4 */
	margin:1%; /* On laisse 1% de marge ce qui complète la largeur totale de l'écran, en largeur on occupe donc bien les 100% d'espace (98%+2*1%) - Cours 4b */
	background-color:#fdd; 
	border-radius : 1em; /* On arrondi les bords du cadre - Démo du cours 9 (site présentant vos projets) */
}

/* L'article étant centré gauche et n'occupant pas toute la largeur du body, on procède comme pour le body - Cours 3, 4, 4b, 9 + Demo */
article{margin-left: 1%; width:77%; background-color:#eee; border-radius:0.5em;}

/* Afin que les 2 boîtes du header principale s'accolle l'un à l'autre et soit centré, on va les transformer en texte - Cours 4, 9 + Demo */			
body>header * {display:inline-block;}
/* Comme désormais l'intérieur est considéré comme du texte, on le centre en tant que tel, et on profite de le faire aussi pour le footer - Cours 3 */
body>header, footer {text-align:center;}

/* Le nom et la date étant dans une autre couleur et en italique, on déclare tout cela - Cours 3 */
time, span {font-style:italic; color:brown;}

/* On colore les liens - Cours 3 */
a {color:aqua;}


/* On retire du flux la balise aside pour pouvoir la positionner "après" l'article et au-dessus de celui-ci - Cours 9 */			
aside {
	border: 1px solid black; /* On ajoute la bordure noire - Cours 3 */
	position:fixed; /* On retire du flux et on la fixe pour l'avoir toujour à l'écran (pratique durant le travail), mais on peut également règler cela sur "absolute" - Cours 9 */
	z-index:3; /* Comme on veut que les consignes cache le reste, on lui donne une valeur z-index supérieure - Cours 9 */ 
	width:20%; /* Comme précédement, on fixe la largeur pour que cette boite s'encastre à la droite de l'article - Cours 4 */
	top:9.8%; right:2%; /* On positionne la boite - Cours 9 */
	overflow:hidden; white-space:nowrap; text-overflow:ellipsis; /* On cache ce qui déborde, mais c'est étrange, les ... n'aparaissent pas. Normale, cette balise ne contient pas du texte en soit mais d'autres balises - Cours 9 */
	background-color:rgba(200,200,200,0.92); /* Pour la transparence, on applique celle-ci au fond, sinon la police est également impactée et cela devient nettement moins visible. Mais nous n'avons pas vu cette astuce, donc j'attendais la déclaration "opacity:0.92;" - Cours 9 */
}

/* Comme nous l'avons vu avant, la gestion des "..." ne fonctionne pas si on la déclare avant, du coup il faut le faire sur les balises qui contienne du texte. On utilise ici la valeur inherit pour pouvoir la modifier au survol du bloc aside - Cours 9 */
aside * {overflow:inherit; white-space:inherit; text-overflow:inherit; }

/* On espace un peut les boites du bord pour l'aspect cosmetique - Cours 4b */
ul {margin:1em;}
li {margin-left:2em;}

/* On gère le survol de la souris avec un :hover, on modifie donc la largeur, l'overflow et l'espace. Il n'est pas nécessaire de modifier text-overflow puisque celle-ci sera automatiquement invalidée par les deux autres - Cours 9 */
aside:hover {width:80%; overflow:visible; white-space:normal;}


/* On positionne le texte avec une marge et on le souligne - Cours 3 et 4b */
article header p {margin:0 0 1em 3em; text-decoration:underline;}

/* On redimensionne les images pour qu'elles aient toutes deux la même dimension. Encore une fois on utilise le % pour avoir une adaptabilité à la taille de l'écran. Le display n'est pas nécessaire, je l'ajoute pour une compatibilité avec la majorité des navigateurs. - Cours 4*/
article header img {display:inline-block; width:40%;}
/* On centre les images, ce qui nous oblige à centrer le texte puisqu'elle sont considérées comme élément en-ligne. - Cours 3 */
article header {text-align:center;}
/* Malheureusement, cela centre aussi le titre et le texte... que je dois donc replacer à gauche. Pour éviter cela, il aurait fallu ajouter une balise html <div> autour des images. */
article header * {text-align:left;}


/* J'ajoute l'image demandée avant les blockquotes. Evidemment on pouvait le faire avec une balise html - Cours 9 */	
blockquote:before{content:url('http://www.bemery.ch/calvin/quotes.png');}
			
/* Initialement, l'exercice devait nécessiter jQuery tools, je maintiens donc le corrigé pour l'exercice original pour que vous puissiez le refaire comme entrainement. */
/* Overlay fonctionne sur le principe d'une classe qui positionne la boite. Celle-ci est par défaut caché avec un display:none; qui sera modifier directement dans la balise par jQuery */		
.simple_overlay {
	display:none; /* Durant l'épreuve cela n'était pas nécessaire puisqu'elle devait de toutes façon être affichée. Par contre cela impliquait de la sortir du flux avec un "position:absolute;" - Cours 9 */
	z-index:10000; /* Pas nécessaire pour l'épreuve - Cours 9 */
	background-color:rgba(150,30,30,0.8); /* Pas nécessaire pour l'épreuve, la transparence du fond - Astuce précédemment décrite */
	color:white;
	width:80%;
	max-height:80%; /* Pour éviter que le cadre ne sorte de l'écran. Idéalement, il faudrait ajouter un "overflow:auto;" */
	border:2px solid black;
	border-radius : 1em;
	box-shadow: 1em 1em 0.5em rgba(30,30,30,0.6); /* pour l'ombrage de la boite - cours 3 */
	padding : 1em;
	text-indent:1em; /* Pour le retrait de la première ligne (et de l'image) du texte. - cours 3 */
}

/* Overlay rajoute automatiquement un lien pour ferme dans une balise a ayant la classe .close. On positionne donc cette l'image.  */
.simple_overlay .close {
    background-image:url(http://www.iraniumthemovie.com/widget/close.png); /* Dans overlay, l'image doit être ajouté en fond - cours 3 */
    position:absolute;
    right:-15px; /* l'utilisation de valeur négative permet de décaler l'image au-delà de la boite qui la contient - cours 9 */
    top:-15px;
    cursor:pointer; /* le changement de curseur n'était pas nécessaire de changer le curseur, mais comme il ne s'agit pas d'un vrai bouton, jquerytools noue propose de le faire. */
    height:35px;
    width:35px;
}

/* Pour que l'image de soit encadrée par le texte, il faut qu'elle flotte. La définition de la largeur permet encore une fois de s'assurer que les 2 images aient les mêmes dimensions d'affichage - cours 4, 4b */
.simple_overlay img {float:left; width:20%;}