/* ***** BEGIN LICENSE BLOCK *****
#
# Copyright (c) 2006 Kozlika.
# please ask me if you want to use this css
#
# * ***** END LICENSE BLOCK *****/
 

/* -----------------------------------------
 		Structure generale
-------------------------------------------- */
html, body, #page, #main, #supranav, .infranav, .post, .gauche, .droite, ul, li, dl, dt, dd {
	margin : 0;
	padding : 0;
	}

body {
	background : #988f80 url(images/bg.jpg);
	font-size : small;
	color : #333;
	font-family : "trebuchet ms", verdana, "lucida grande", arial, sans-serif;
}
	
#page {
	line-height : 140%;
	background : #F5D6F0 url(images/fleurs.gif) no-repeat 0 0;
	position : absolute;
	width : 640px;
	height : 600px;
	top : 50%;
	margin-top : -300px;
	left : 50%;
	margin-left : -320px;
	-moz-border-radius : 6px;
}
#accessible { 
	margin : 520px 0 0 0;
	font-size : .9em; 
	font-style : italic;
}
#accessible a { 
	color : #111;
	 text-decoration : underline;
}
#accessible a:hover { 
	background : #333; 
	color : #fff;
}

/* -----------------------------------------
 		Regles du contenu
-------------------------------------------- */

/* main et post */

.kozeries #main, .contact #main, .collectif #main, .dotclear #main, .locataires #main { width : 600px; height : 586px; background : transparent; position : absolute; top : 7px; left : 0; overflow : hidden; }
.finale #main { width : 280px; height : 586px; position : absolute; top : 7px; left:40px;; overflow : hidden; }
.contact #main { left : 40px; overflow : hidden; width : 560px; height : 586px; background : #fff url(images/fleurs.gif) no-repeat -40px -7px}
.contact .post { background : transparent; border : none;}


.gauche, .droite { float : right; width : 280px; overflow : hidden; display : inline; }

.kozeries #main { left : 40px; width : 560px;}
.kozeries .gauche, .kozeries .droite { float : left;}

.post { background : #fff; padding :20px 24px; border-left : 1px solid #ddd;height:586px; }
.gauche .post { border : none;}
.finale .post { border-right : 1px solid #ddd; border-left : none; text-align : center;}

.kozeries .post {text-indent : 24px;  background : #fff url(images/bg_post.png) no-repeat;}

p { margin : 1em 0 .5em 0;}
.kozeries .post p { margin-bottom : 2em;}
p.last { font-size : .9em; text-indent : 0;}
p.right { text-align : right;}
p.center { text-align : center;}

/* titres */
.gauche h2 { font-family : "gill sans", sans-serif; font-size : 1.66em; color : #999; font-weight : normal; margin-top : 12px;text-align : right; margin-right : -20px; margin-bottom : 42px;}
.droite h2 { font-family : "gill sans", sans-serif; font-size : 1.66em; color : #999; font-weight : normal; margin-top : 12px;text-align : left; margin-left : -20px; margin-bottom : 42px;}
.collectif .gauche h2, .collectif .droite h2 { margin-bottom : 36px;}
.gauche .post h2 span { display :none; }
.droite .post h2 span { display :none; }
.hidden { display : none;}

.locataires h2 { margin-bottom : 128px;}

.contact h2, .kozeries h2 { margin-top : 12px; margin-bottom : 120px; text-align : center;font-family : "gill sans", sans-serif; font-size : 1.66em; color : #999; font-weight : normal; }
.contact h2 { margin-bottom : 36px;}
h3 { font-size : 1.1em; color : #555; font-weight : normal; margin : 1.5em 0 .5em 0;}
.prems { margin-top : 36px;}
.deuze { margin-top : 158px;}
.finale hr.deuze { margin-top : 230px;}

p.exergue { padding : 3px 8px 5px 8px; background : #F5D6F0; font-size : .9em; -moz-border-radius : 6px; line-height : 130%; margin-bottom : .33em;}
p.comment { font-size : .9em; font-style : italic; margin-top : 2em; }

hr { width : 40%; background : #999 ; color : #999; height : 1px; margin : 0 auto; border : none;}

.credits { font-size : .9em; padding-right : 24px; padding-bottom : 10px; line-height : 130%;}


/* listes */
ul, dl { list-style-type : none;}
dd p { margin: 0 0 .55em 1em; font-size : .92em; line-height : 130%; color : #666;}
.collectif dd p { font-size : .88em; line-height : 120%; }


/* liens */
a { text-decoration : none;}
.kozeries .post a, .finale .post a { color : #00A0C6;}
.kozeries .post a:hover, .finale .post a:hover { background : #00A0C6; color : #fff;}
.collectif .post a, .contact .post a { color : #f3c;}
.collectif .post a:hover, .contact .post a:hover { background : #f3c; color : #fff;}
.dotclear .post a { color : #576AFF;}
.dotclear .post a:hover { background : #576AFF; color : #fff;}
.locataires .post a { color : #66950E;}
.locataires .post a:hover { background : #9ad61f; color : #fff;}


/* -----------------------------------------
 		Regles du menu de droite
-------------------------------------------- */

/* generales */
#supranav { width : 40px; overflow : hidden; float:right; height : 586px; margin : 7px 0 0 0; background-color : #f7ddf3;}
#supranav li { height : 110px;}
#supranav li, #supranav li a { overflow : hidden; margin : 0; padding : 0; }

#supranav li a span { width : 1px; height : 1px; font-size : 1px; position : relative; top : -2000px;}

#supranav li#li1, #supranav li#li1 a { height : 140px; background-position : 0 0;}
#supranav li#li2, #supranav li#li2 a { background-position : 0 -140px;}
#supranav li#li3, #supranav li#li3 a { background-position :  0 -250px;}
#supranav li#li4, #supranav li#li4 a { height : 130px; background-position : 0 -360px;}

#supranav li#li1 a:hover { background-position : -50px 0;}
#supranav li#li2 a:hover { background-position : -50px -140px;}
#supranav li#li3 a:hover { background-position : -50px -250px;}
#supranav li#li4 a:hover { background-position : -50px -360px;}

#supranav li a { display : block; width : 40px; height : 110px;background-color : transparent; background-repeat : no-repeat; margin : 0; padding : 0; }

/* specifiques */
.kozeries #supranav li a { background-image : url(images/menu-d-koz.png); background-repeat : no-repeat; }

.collectif #supranav { background-image : url(images/menu-d-col.png); background-repeat : no-repeat; }
.collectif #supranav li a { background-image : url(images/menu-d-col.png); background-repeat : no-repeat; }
.collectif #supranav li#li1 a { width : 1px;}

.dotclear #supranav { background-image : url(images/menu-d-dot.png); background-repeat : no-repeat;}
.dotclear #supranav li a { background-image : url(images/menu-d-dot.png); background-repeat : no-repeat; }
.dotclear #supranav li#li1 a { width : 1px;}
.dotclear #supranav li#li2 a { width : 1px;}

.locataires #supranav { background-image : url(images/menu-d-loc.png); background-repeat : no-repeat;}
.locataires #supranav li a { background-image : url(images/menu-d-loc.png); background-repeat : no-repeat; }
.locataires #supranav li#li1 a { width : 1px;}
.locataires #supranav li#li2 a { width : 1px;}
.locataires #supranav li#li3 a { width : 1px;}
.locataires #supranav li#li4 a { background-position : -50px -360px;}

#supranav li#der a { height : 100px; background-color : transparent; background-image : url(images/fin.png); background-repeat: no-repeat;  background-position : 0 0; }
#supranav li#der a:hover { background-position : -55px 0;}

.finale #supranav li#mel { height : 50px; }
.finale #supranav li#mel a { height : 50px; background : transparent url(images/fin.png) no-repeat 0 -100px;}
.finale #supranav li#der { height : 50px; }
.finale #supranav li#der a { height : 50px; background : transparent url(images/fin.png) no-repeat 0 -50px;}

.finale #supranav li#mel a:hover { background-position : -50px -100px;}

.finale #supranav li#li1 a { width : 1px;}
.finale #supranav li#li2 a { width : 1px;}
.finale #supranav li#li3 a { width : 1px;}
.finale #supranav li#li4 a { width : 1px;}

/* -----------------------------------------
 		Regles du menu de gauche
-------------------------------------------- */

/* generales */
#infranav { position : absolute; top : 0; left : 0;width : 40px; height : 586px; margin : 0; overflow : hidden; }
.finale #infranav { margin-top : 7px;}
#infranav li, #infranav li a { height : 110px; overflow : hidden; }

#infranav li a span { width : 1px; height : 1px; font-size : 1px; position : relative; top : -2000px;}
#infranav li, #infranav li a { display : block; width : 40px; height : 110px;background-color : transparent; background-repeat : no-repeat; margin : 0; padding : 0; }

.collectif #infranav li#back1, .collectif #infranav li#back1 a { height : 140px; background-position : -10px 0;}
.collectif #infranav li#back1 a:hover { height : 140px;background-position : -60px 0;}

.collectif #infranav li a { background-image : url(images/menu-g-col.png); background-repeat : no-repeat; }

.dotclear #infranav li#back1, .dotclear #infranav li#back1 a { height : 110px; background-position : -10px 0;}
.dotclear #infranav li#back1 a:hover { height : 110px;background-position : -60px 0;}
.dotclear #infranav li#back2, .dotclear #infranav li#back2 a { height : 140px; background-position : -10px -110px;}
.dotclear #infranav li#back2 a:hover { height : 140px;background-position : -60px -110px;}

.dotclear #infranav li a { background-image : url(images/menu-g-dot.png); background-repeat : no-repeat; }

.locataires #infranav li#back1, .locataires #infranav li#back1 a { height : 110px; background-position : -10px 0;}
.locataires #infranav li#back1 a:hover { height : 110px;background-position : -60px 0;}
.locataires #infranav li#back2, .locataires #infranav li#back2 a { height : 110px; background-position : -10px -110px;}
.locataires #infranav li#back2 a:hover { height : 110px;background-position : -60px -110px;}
.locataires #infranav li#back3, .locataires #infranav li#back3 a { height : 140px; background-position : -10px -220px;}
.locataires #infranav li#back3 a:hover { height : 140px;background-position : -60px -220px;}

.locataires #infranav li a { background-image : url(images/menu-g-loc.png); background-repeat : no-repeat; }

.finale #infranav li#back1, .finale #infranav li#back1 a { height : 110px; background-position : -10px 0;}
.finale #infranav li#back1 a:hover { height : 110px;background-position : -60px 0;}
.finale #infranav li#back2, .finale #infranav li#back2 a { height : 110px; background-position : -10px -110px;}
.finale #infranav li#back2 a:hover { height : 110px;background-position : -60px -110px;}
.finale #infranav li#back3, .finale #infranav li#back3 a { height : 110px; background-position : -10px -220px;}
.finale #infranav li#back3 a:hover { height : 110px;background-position : -60px -220px;}
.finale #infranav li#back4, .finale #infranav li#back4 a { height : 140px; background-position : -10px -330px;}
.finale #infranav li#back4 a:hover { height : 140px;background-position : -60px -330px;}

.finale #infranav li a { background-image : url(images/menu-g-fin.png); background-repeat : no-repeat; }

/* -----------------------------------------
 		Le formulaire de contact
-------------------------------------------- */
.contact #main { position : absolute; top : 7px; left : 0; overflow : hidden;
	left : 40px; overflow : hidden; width : 560px; height : 586px; 
	background : #fff url(images/fleurs.gif) no-repeat -40px -7px; }
.contact .post { background : transparent; border : none;}
.contact h2 { margin-top : 12px; margin-bottom : 80px; text-align :right;font-family : "gill sans", sans-serif; 
	font-size : 1.66em; color : #999; font-weight : normal; }

.collectif .post a, .contact .post a { color : #f3c;}
.collectif .post a:hover, .contact .post a:hover { background : #f3c; color : #fff;}

form { border:none; margin-left : 200px;}
fieldset * { margin : 0;}
fieldset { border:none; display : block; }
input[type=submit] { border-right : 1px solid #47c; border-bottom : 1px solid #47c;
	color : #346; text-transform : uppercase;background : #d8e7fa; font-weight : bold;font-size : .9em;}
input[type=submit]:hover { background : #4375cd; color : #fff; }
.field label { display : block; font-size : .95em;}
.field input { border : 1px solid #ccc;background : #e5eeff; width : 220px;}
.field input:focus { border : 1px solid #777;background : #fff; }
.field textarea {background : #e5eeff; border : 1px solid #ccc; width : 98%; height : 200px; margin : .5em 0; padding : 4px;}
.field textarea:focus { border : 1px solid #777; background : #fff;}

.retour { position : absolute; top : 134px; left : 14px;}
p.error { padding : 8px; background : #F5D6F0; -moz-border-radius : 6px; line-height : 130%; position : absolute; top: 60px; left : 220px; width : 300px; }