* { margin: 0; padding: 0; }
/* remember to define focus styles! */
ol, ul { list-style: none; }
img { border: 0; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a {color: #753400; }
a:active { outline: none; }
a:focus { -moz-outline-style: none; }
a:visited { color: #753400; }
h2 a {text-decoration: none; }


span {display: none; }
hr { clear: both; margin: 0; border: none; visibility: hidden;}
/***** Global Settings *****/
html { font-size: 100%;}
body { font: 1em/1.6em "Comic Sans MS", Arial, Helvetica, sans-serif; color: black; margin: 0; padding: 0; background: url("images/fond.jpg") left top repeat-x #a8e4ff; }
#general { }
#page { width: 950px; margin: auto; background: url("images/repetition.jpg") top center repeat-y; }

#contenu {padding: 0 30px; }


/* Classes génériques */

.petit {font-size: .8em; }
.droite {text-align: right; font-style: italic; }
.flottant-gauche {float: left; }
.flottant-droite {float: right; }
.numero { font-size: 1.5em; line-height: 1.5em; padding: 3px; background: #753400; color: #e68d65; margin: 0 0 0 4px; -moz-border-radius: 10px; }

/* Headings */
h1 { font-size: 1.45em; margin: 5px 0 25px 0; padding: 0; color: #753400; }
h2 { font-size: 1.35em; border-bottom: 2px solid #753400 ; margin: 0 0 10px 0; padding: 0 0 5px 0; color: #753400; }
h3 {font-size: 1.25em; border-bottom: 2px solid #753400; padding: 3px 0; color: #753400; }


/* Header */

#header { background: url("images/gribouillis.jpg") no-repeat; height: 628px; position: relative; top: 0; left: 0; }
	#header p { text-align: right; margin: 0 15px 0 0; }
		#header p a { color: #8b3c15; text-align: right; }
		#header p a:hover { text-decoration: none; }
	#header h1 a { height: 90px; width: 270px;  position: absolute; top: 20px; left: 360px; }
		#header h1 a {display: block; }
	#header #recherche { position: absolute; left: 700px; top: 67px; }
		#header #recherche .recherche { border: none; margin: 0 0 0 5px; width: 165px; background: transparent; font-style: italic; color: #8B3C15; vertical-align: top;}
		#header #recherche .boutton { margin: 0 0 0 10px; }
	#header ul { position: absolute; top: 470px; left: 0; height: 150px; padding: 0 30px 0 20px; }
		#header ul li { float: left; }
			#header ul li a { display: block; }
			#header #accueil { height: 80px; width: 180px; }
			#header #accueil:hover, #header #accueil.actif { background: url("images/home.png"); }
			#header #personnages { height: 150px; width: 245px; }
			#header #personnages:hover, #header #personnages.actif { background: url("images/personnages.png"); }
			#header #divers { height: 80px; width: 130px; }
			#header #divers:hover, #header #divers.actif { background: url("images/divers.png"); }
			#header #tous { height: 80px; width: 103px; }
			#header #tous:hover, #header #tous.actif { background: url("images/tous.png"); }
			#header #famille { height: 80px; width: 122px; }
			#header #famille:hover, #header #famille.actif { background: url("images/famille.png"); }
			#header #couple { height: 80px; width: 120px; }
			#header #couple:hover, #header #couple.actif { background: url("images/couple.png"); }



/* Corps du site */
p { text-align: justify; padding: 0 0 1em 0; font-size: .95em;}
#colonne-gauche { width: 650px; float: left; }
	#colonne-gauche h1 {font-size: 1.25em; border-bottom: 2px solid #753400; padding: 3px 0; color: #753400; margin: 0;}
	#colonne-gauche h1.galerie { font-size: 1.45em; margin: 5px 0 25px 0; padding: 0; border: 0;}
	#colonne-gauche .arrondi { background: url("images/arrondi.jpg"); padding: 25px 60px 0 70px; text-align: justify; }
	#colonne-gauche .first p:first-letter { font-size: 1.5em; }
	#colonne-gauche #tag { text-align: right; padding: .3em 0 0 0; font-style: italic; font-size: .9em; line-height: 1em;}
		#colonne-gauche #tag a { text-decoration: none; }
		#colonne-gauche #tag { color: #753400; }
		#colonne-gauche #tag a:hover { text-decoration: underline; }
	#colonne-gauche div { margin: 15px 0 0 0; }
	#colonne-gauche img { border: solid 1px black; margin: 0 10px 0 0; }
	#colonne-gauche dl { padding: 1em 0; }
		#colonne-gauche dl dt { float: left; width: 18%; }
		#colonne-gauche dl dd { float: right; width: 80%; }
	#colonne-gauche .gribouillis { margin: 10px 20px; width: 550px;}
	#colonne-gauche ul { float: left; padding: 10px 0 0 0; }
		#colonne-gauche ul li img { border: 0;}
	#colonne-gauche #numerotation { background: #CF4D29; padding: 3px; width:100%;}
		#colonne-gauche #numerotation li { display: inline; }
		#colonne-gauche #numerotation li a { color: black; text-decoration: none; }
		#colonne-gauche #numerotation li.actif a { font-weight: bold; }
		#colonne-gauche #numerotation li a:hover { text-decoration: underline; }
	#colonne-gauche #commentaire { height: 47px ; background: url("images/commentaire.jpg") no-repeat; margin: 0; padding: 110px 60px 0 70px; font-size: .8em; font-style: italic; }
#colonne-droite { width: 202px; float: right; padding: 0 10px 0 28px; margin: 0;  }
	#colonne-droite ul li { margin: 1em 0 0 0; background: #cf4d29; -moz-border-radius: 10px; text-align: center; padding: 0 0 5px 0;}
	#colonne-droite ul li.liste { background: transparent url("images/liste.jpg") bottom no-repeat; }
		#colonne-droite ul li a { font-size: .9em; color: #2f1407; text-decoration: none; display: block; height: 100%; }
		#colonne-droite ul li a:hover { text-decoration: underline; }
		#colonne-droite img {display: block; margin: 10px auto 0 auto; }
		#colonne-droite #suivant { background: url("images/suivant.jpg"); height: 40px; }
		#colonne-droite #precedent { background: url("images/precedent.jpg"); height: 40px; }

/* Personnages */

.personnages ul li { float: left }
.personnages ul li a { display: block; }
.personnages #colonne-droite { width: 240px; float: right; padding: 0;  margin: 17px 0 0 0; }
.personnages #colonne-droite ul li { background: none; }
#papa { background: url("images/portrait-papa-mini.jpg") no-repeat; height: 326px; width: 311px; }
#papa:hover { background: url("images/portrait-papa-mini-hover.jpg") no-repeat; }
#maman { background: url("images/portrait-maman-mini.jpg") no-repeat; height: 326px; width: 278px; }
#maman:hover { background: url("images/portrait-maman-mini-hover.jpg") no-repeat; }
#colonne-droite ul li #entente { background: url("images/entente-cordiale-mini.jpg") no-repeat; height: 198px; width: 235px; margin: 150px 0 0 0; }
#colonne-droite ul li #entente:hover { background: url("images/entente-cordiale-mini-hover.jpg") no-repeat; }
#pm { background: url("images/portrait-pm-mini.jpg") no-repeat; height: 326px; width: 331px; }
#pm:hover { background: url("images/portrait-pm-mini-hover.jpg") no-repeat; }
#chatgris { background: url("images/portrait-chatgris-mini.jpg") no-repeat; height: 326px; width: 278px; }
#chatgris:hover { background: url("images/portrait-chatgris-mini-hover.jpg") no-repeat; }


/* Pied de page */

#footer { background: url("images/footer.jpg") repeat-x bottom; }
#pied { background: url("images/pied.jpg") no-repeat; height: 380px; width: 948px; margin: auto; position: relative; top: 0; left: 0; }
	#pied ul { height: 325px; }
	#pied p { padding: 5px 0 0 220px; }
	#pied a {display: block; opacity: .5; }
	#pied a:hover { visibility: visible; }
	#pied #home {position: absolute; top: 10px; left: 150px; width: 214px; height: 210px; }
	#pied #home:hover {background: url("images/pied-home.jpg") no-repeat; opacity: 1; }
	#pied #petite-madame {position: absolute; top: 10px; left: 344px; width: 230px; height: 210px; }
	#pied #petite-madame:hover { background: url("images/pied-pm.jpg") no-repeat; opacity: 1; }
	#pied #up {position: absolute; top: 30px; left: 680px; width: 214px; height: 145px; }
	#pied #up:hover {background: url("images/pied-up.jpg") no-repeat; opacity: 1; }
	#pied #contact {position: absolute; top: 170px; left: 450px; width: 165px; height: 110px; }
	#pied #contact:hover {background: url("images/pied-contact.jpg") no-repeat; opacity: 1; }
	#pied #rss {position: absolute; top: 170px; left: 620px; width: 165px; height: 110px; }
	#pied #rss:hover {background: url("images/pied-rss.jpg") no-repeat; opacity: 1; }
	


/* Lightbox */

#lightbox{ background-color: white; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; }
#lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; }	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background: url("images/overlay.png"); }


* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(/css/images/blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/css/images/overlay.png", sizingMethod="scale");
	}

.fieldset {color: #753400; border: 0; }
.fieldset label { text-align:right; width:100px; float:left; padding:0.2em; margin: 0; font-size: .8em; }
.fieldset .nobr {display:none;}  
.fieldset .textfield { margin:3px; height:20px; width:450px; border:solid 0 #fff; }
.fieldset .textarea {margin:3px; height:200px; width:450px; border:solid 0 #fff; }
.submit { margin: 3px 0 3px 107px; height:20px; border:solid 0 #fff; width:80px; }