/* 
------------------------------------------------------------------------------------------------------------
Stylesheet for : Cocolico.net 
Author : Thuan Huynh
Email : toluna@gmx.net
Update : January 10, 2005
Some rights reserved. You can use all the following elements as long as you give me credit, 
keep your deritative works under the same Creative Commons licence and never try to use 
your work commercially. Please read the Creative Commons "By-Share Alike-Non commercial" 
licence for further details : http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
------------------------------------------------------------------------------------------------------------
*/

* {
	margin:0;
	padding:0;
}
body {
	text-align:center;
	font:normal 0.8em verdana, arial, sans-serif;
	line-height:1.6em;
	color:#220;
}
a {text-decoration:none;}
a {outline:none;}
img {border:none;}
ul {list-style:none;}

/*---------------- !BLOCS ----------------*/

#grenier, #main, #cave {
	position:relative;
	width:900px;
	margin:auto;
	text-align:left;
}

/*---------------- !ENTETE ----------------*/

#grenier {	
	height:50px;
	margin-top:3em;
	font:normal 1em arial, sans-serif;
}
#grenier span {
	position:relative;
	width:50%;
	line-height:58px;
}
#grenier span a {
	display:block;
	float:left;
	width:160px;
	height:50px;
	margin:0 8px 0 0;
	background:url(../images/logo.png) no-repeat;
}
#grenier span strong {display:none;}

#grenier ul {
	position:absolute;
	top:0;
	right:0;
	width:50%;
} 
#grenier li {
	display:inline;	
	text-transform:uppercase;
	font-size:1.1em;
	font-weight:bold;
	line-height:1.2em;
}
#grenier li a {
	display:block;
	float:left;
	padding:0 0.4em 0.04em 0.4em;
	color:#555;
}
#grenier li a:hover {
	color:#fff;
	background:#f30;
}
#grenier li strong {
	position:relative;
	top:1px;
	padding:0 0.24em 0 0;
	font-size:1.2em;
	color:#f30;
}
#grenier li a:hover strong {color:#333;}

/*---------------- !CONTENU ----------------*/

#main {
	margin-top:4.8em;
	padding-bottom:8em;
}
#main dl {
	margin:1em 0 24em;
	min-height:24em;
}
#main dd {
	float:left;
	width:30%;
	padding-right:3.34%;

}
.colEnd {padding:0;}
h1 {
	margin:0 0 .64em;
	font:normal 2.2em arial,sans-serif;
	text-transform:uppercase;
	color:#f70;
}
h3 {
	margin:0 0 1.4em;
	font:normal 1.48em arial, sans-serif;
	color:#220;
}
#main li {
	margin-top:1em;
	padding:0 0 1em;
	line-height:2em;
	text-transform:uppercase;
}
#main li li {
	display:inline;
	border:none;
	text-transform:none;
	color:#aaa;
}

#main li a {
	display:block;
	position:relative;
	color:#220;
	border-top:1px solid #ddd;
}
#main li a:hover {
	border-top:1px solid #aaa;
	background:#efb;
}
#main li li a {
	display:inline;
	margin:0 .48em 0 0;
	color:#aaa;
	border:none;
}
#main li li a:hover {
	color:#f60;
	background:none;
	border-top:none;
	border-bottom:1px solid #f60;
}

#main li a strong {
	position:absolute;
	right:0;
	font-family:arial;
	font-size:140%;
	color:#aaa;
}
#main li li a strong {display:none;}

/*---------------- !ARCHIVES ----------------*/

.large {
	clear:both;
	width:100%;
	padding:1.6em 0 2.4em;
	background:#ff9 url(../images/tapis.png) center repeat-y;
	border-top:4px solid #cc9;
	color:#fff;
}
#escale {
	width:32%;
	padding:0 0 0.8em;
	min-height:25.6em;
}
#escale p {margin-bottom:1em;}
#escale h2, #armoire dt {
	font:normal 1.4em arial,sans-serif;
	color:#f70;
	text-transform:uppercase;
	letter-spacing:.02em;
}
#escale h2 {margin-bottom:.72em;}
#escale a {
	color:#994;
	padding:0 0.12em 1px;
	border-bottom:1px solid #994;
}
#escale a:hover {
	color:#fff;
	background:#994;
}
#armoire {
	position:absolute;
	top:0;
	right:0;
	width:560px;
}
#armoire dt {
	margin-bottom:1em;
	padding-left:24px;
}
#armoire dt a {
	float:right;
	padding:.12em .24em;
	font-size:.8em;
	font-weight:bold;
	color:#cc9;
}
#armoire dt a:hover {
	color:#330;
	background:#cc9;
}
#armoire dd {
	display:inline;
	float:left;
	margin:0 0 24px 24px;
	width:88px;
	height:72px;
	overflow:hidden;
}
/* Overcome the stupid margin bug in IE/Win floats, 
   which fixes a lot of things, including disapearing company nav,
   randomly appearing text, and wrappers pushed too wide.
   http://www.positioniseverything.net/explorer/threepxtest.html */
* html #armoire {padding-left:0;}

/*---------------- !pavés ----------------*/

#celier {
	margin:2.4em 0 0;
	padding:0.8em 0;
	font-size:85%;
	border-top:1px solid #cc9;
}
#celier p {
	float:right;
	color:#cc9;
	text-align:right;
}
#celier p a {
	color:#cc9;
	font-weight:bold;
}
#celier #ad3 {
	position:absolute;
}

/*---------------- !bulles ----------------*/

.carre {
	display:block;
	position:absolute;
	width:0;
	height:104px;
	background:#f00;
}
.carre h3 {
	padding:.24em 0 0 .36em;
	color:#fff;
	font:normal 1.4em arial, sans-serif;
}

/*---------------- !EFFETS SPECIAUX ----------------*/

.hand {cursor:pointer;}
.frozen {position:absolute;}
.under {display:none;}