/* 
------------------------------------------------------------------------------------------------------------
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, #rdc, #cave {
	position:relative;
	width:900px;
	margin:auto;
	text-align:left;
}

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

#grenier {	
	height:50px;
	margin-top:2.4em;
	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 ----------------*/

#rdc {
	margin-top:4em;
	overflow:hidden;
	height:34.4em;
}
#sal0, #sal1 {
	position:absolute;
	width:100%;
}

/*---------------- !salle 0 ----------------*/

#pic {
	float:left;
	margin:.4em 0 0;
}
#titre {
	float:right;
	/*width:38em;*/
	width:500px;
}
h1 {
	font:normal 2.2em arial,sans-serif;
	text-transform:uppercase;
	line-height:120%;
	letter-spacing:-0.024em;
	word-spacing:0.2em;
}
h1 a {color:#f70;}
h1 a span {visibility:hidden;}
h1 a:hover {color:#444;}
h1 a:hover span {
	visibility:visible;
	padding:0.08em;
	color:#f30;
}
#titre h2 {
	margin:0 0 0.8em;
	font-size:0.88em;
	color:#cc9;
	font-family:arial;
}
#titre h2 a, #article a {
	color:#994;
	border-bottom:1px solid #cc9;
}
#titre h2 a:hover, #article a:hover{
	color:#664;
	background:#cc9;
}
#titre h2 a.permalink {
	display:block;
	float:left;
	width:12px;
	height:10px;
	margin:4px 4px 0 0;
	border:none;
	background:url(../images/pubdate.png) no-repeat;
}
#titre h2 a.permalink img {display:none;}
#article {
	display:block;
	float:right;
	width:500px;
	height:242px;
	margin-top:.8em;
	overflow:hidden;
}
#article p, #article ul {
	margin:0 0 22px;
	font-size:13px;
	line-height:22px;
}
#article li {
	margin-left:1em;
	padding-left:1em;
	background:url(../images/bullet.png) 0 8px no-repeat;
}
#article .out {
	padding-left:1.6em;
	background:url(../images/out.png) 0 .4em no-repeat;
	font-size:.88em;
}
#article .technorati, #article .metatags {display:none;}
.slim #col0, .slim #col1 {width:18em;}
.slim #col0 {float:left;}
.slim #col1 {
	float:right;
	margin:-240px 0 0;
}
hr {
	clear:both;
	padding:1.6em 0 0;
	visibility:hidden;
}
#palier {
	float:left;
	font-family:arial,sans-serif;
}
#palier #ad1 {
	float:left;
	margin:.24em 0 0;
}
#palier li {float:right;}

/*---------------- !Intranavigation ----------------*/

#palier li a, #poutre .snav1 a {
	display:block;
	width:20px;
	height:20px;
	margin:0 0 0 .4em;
	text-align:center;
	font:bold 1.32em arial,sans-serif;
	line-height:1.2em;
	background:#fff;
	border:1px solid #ccc;
	color:#ccc; 
}
#palier a.on, #poutre a.on {
	background:#f30;
	border:1px solid #f30;
	color:#fff;	
}
#palier a.on:hover, #poutre a.on:hover {
	background:#b00;
	border:1px solid #b00;
}

/*---------------- !salle 1 ----------------*/

#poutre {font-family:arial,sans-serif;}
#poutre dd {float:left;}
#poutre h3 {
	width:20.8em;
	font:normal 1.72em arial,sans-serif;
	text-transform:uppercase;
}
#poutre a {color:#333;}
#poutre h3 a {color:#bb5;}
#poutre h3 a:hover {color:#333;}
#poutre h3 span {visibility:hidden;}
#poutre h3 a:hover span {
	visibility:visible;
	color:#bb5;
}
#poutre .snav1 {width:11em;}
#poutre .snav2 strong {
	padding:0 0 0 .12em;
	font-family:verdana,sans-serif;
}
#poutre .snav2 a {
	border:1px solid #dda;
	padding:.1em 0.24em;
	color:#bb5;
}
#poutre .snav2 a:hover {
	border-color:#bb5;
	background:#bb5;
	color:#fff;
}
#poutre li {float:left;} 

#comments {
	float:left;
	width:64%;
	height:330px;
	overflow:hidden;
}
#ad2 {
	float:right;
	width:300px;
	font:normal 200% verdana,sans-serif;
}
#colcom0, #colcom1 {width:48%;}
#colcom0 {float:left;}
#colcom1 {
	float:right;
	margin-top:-330px;
}
#comments, #comments h5 {
	font-size:12px;
	line-height:22px;
	color:#aaa;	
}
#comments p {
	color:#000;
	margin:0 0 22px;
}
#comments h5 strong, #comments h5 a {
	font-weight:bold;
	color:#f30;
	text-transform:capitalize;
}
#comments h5 a:hover {color:#333;}
#comments p a {
	color:#994;
	padding-bottom:1px;
	border-bottom:1px solid #df9;
}
#comments p a:hover {background:#df9;}

/*---------------- !COMMENT FORM ----------------*/

#commentForm {
	position:absolute;
	left:0;
	width:576px;
	background:#ff9 url(../images/gradForm.png) repeat-x;
	border-top:1px solid #fc0;
	border-bottom:1px solid #fc0;
}
#inForm{
	padding:8px 20px 10px;
} 
.commentArea, .commentMeta {margin-top:1em;}
.commentArea {
	float:left;
	width:56%;
}
.commentMeta {
	float:right;
	width:42%;
}
.commentMeta p {margin: 0 0 0.8em;}
#commentForm p em {
	font-size:.88em;
	font-style:normal;
}
#commentForm label {color:#f60;}
#commentForm label strong {color:#220;}
#commentForm textarea, #commentForm input {
	padding:2px 4px;
	background:#ffc;
	border:1px solid #cc8;
}
#commentForm textarea {
	width:88%;
	height:15em;
	font:normal 1em verdana,sans-serif;
}
#commentForm input {
	font-size:1.46em;
	width:72%;
	color:#777;
}
#commentForm .button input {
	background:#f60;
	border-color:#f60;
	font:bold 1em verdana, sans-serif;
	color:#fff;
}
#commentForm .button input:hover {
	background:#c50;
	border-color:#c50;
}
#commentForm .button {
	margin-top:1.6em;
	width:8em;
}
/*---------------- !ARCHIVES ----------------*/

.large {
	width:100%;
	padding:1.6em 0 2.4em;
	background:#cc9 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:title;
	letter-spacing:.02em;
}
#escale h2 {margin-bottom:.72em;}
#escale a {
	color:#994;
	padding:0 0 1px;
	border-bottom:1px solid #994;
}
#escale a:hover {
	color:#fff;
	background:#994;
}
#escale .noborder a, #escale .noborder a:hover {border:none}
#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;}