body {position:absolute; top:0px; margin-left: auto; margin-right: auto; width:100%;}

#global{padding: 0px; margin: 0px auto; width: 960px;}


.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}

/* modele */
#cl_0_0 {margin:0px 0px 0px 0px; padding:0px; width:100%; border-bottom:5px solid #660000;}
#cl_1_0	{margin: 0px; width:730px; padding:10px; BACKGROUND-COLOR: #FFF;}
#cl_1_1	{margin:0px; width:210px; BACKGROUND-IMAGE: url(http://idata.over-blog.com/0/02/53/25/design/fondtrait.gif);}
#cl_2_0 {margin:0px 0px 0px 0px; padding:0px; width:100%; border-top:5px solid #660000; BACKGROUND-IMAGE: url(http://idata.over-blog.com/0/02/53/25/design/fondtraitviffonce.gif);}
.box {width:100%; overflow:hidden;}
/*----------------------------------------------------------------------------*/
/* Variation                                                                  */
/*----------------------------------------------------------------------------*/
body {margin:0px; padding:0px; background-color:#CC0000 ; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:8pt; color:#000;BACKGROUND-IMAGE: url(http://www.rock-artwork.com/images/fond/fondgirl960.gif); 
background-attachment: fixed; 
BACKGROUND-COLOR: #CC0000;
background-position:top center;}
h1      { color: #330000; font-size: 20px;} /*titre des pages*/
h2      { color: #CC0000; font-size: 16px;  }
h3      { color: #330000; font-size: 12px; }
a {text-decoration:none; color:#330000; font-size:100%;}
a:hover {text-decoration:none; color:#CC0000;}
legend {color:#330000; padding-left:5px; padding-right:5px;}
li {list-style-type:none;}
img {border:0px none;}
img a {border:0px none;}
input {border:solid 1px #330000; font-size:100%; background:#ffffff; color:#330000;}

#global {margin:auto;background-color:#CC0000; BACKGROUND-IMAGE: url(http://idata.over-blog.com/0/02/53/25/design/fond.gif); border:1px solid #660000;}

/* ------------------entete ---------------------*/

#top {padding:0px;  margin:0px; color:#000; background-color:transparent;}
#top h1 {padding:0px; margin:0px; color:#CC0000;}
.topLien {text-decoration:none; color:#CC0000;}
.topLien:hover {text-decoration:underline; color:#FFCC33;}

/* ---------- TOP PERSO ------- */
img {border:0px none;}

#header {
background:#330000;
width: 960px;
height:203px;
padding: 0px;
margin:0px auto;
border-bottom:0px solid #660000;
}

#searchtop {
float:right;
	padding-right: 10px;;
	margin: 6px 2px;
	background: transparent;
}

#searchtop input{
border:solid 1px #660000; font-size:12px; background-color:#CC0000; color:#660000; width: 200px;
background-image: url(http://wno.free.fr/blog/ico/loupe.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: center right;
}

/* Menu */

#menu, #menu ul /* Liste */	
{
	padding : 0;
	margin : 0;
	list-style : none;
	text-align : left;
}

#menu /* Ensemble du menu */
{
	font-weight: bold;
	font-family : arial;
	letter-spacing: -1pt;
	font-size : 18px; 
	color: #CC0000;
	text-transform:uppercase;
	line-height : 18px;
	
}

#menu a /* Contenu des listes */
{
	display	: block;
	padding:6px 12px;
	background : #330000;
	color : #CC0000;
	text-decoration : none;
	
	
}

#menu li 
{float : left; border-right : 1px solid #660000;}

#menu li li {width: 220px; padding:0px; line-height:12px; font-family : arial; font-size : 12px; font-weight : bold; letter-spacing: 0pt; border-right: 0px solid #660000;}

#menu li ul { position: absolute; display: block; width: 172px; left: -999em; border-right: 0px solid #660000; }

#menu li ul ul {margin: -22px 0 0 144px;}

#menu a:hover, #menu li ul a:hover 	{background:#660000; color:#FFCC00; text-decoration:none; }

#menu li:hover ul ul, #menu li.sfhover ul ul {left: -999em;}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {left: auto; min-height: 0;}


/* ------------------footer ---------------------*/

#footer {padding:0px;  margin:0px; color:#330000; width:100%; background-color:transparent;}

#footer a {text-decoration:none; color:#CC0000; font-size:100%;}
#footer a:hover {text-decoration:none; color:#FFCC00;}

#footertop {padding:0px;  margin:0px;  height: 30px; background-color:#330000; font-weight: bold; font-family : arial black; letter-spacing: -2pt; font-size : 33px; color: #660000; text-transform:uppercase; line-height : 18px; text-align:center;}

#footertop a {text-decoration:none; color:#660000; font-size:100%;}
#footertop a:hover {text-decoration:none; color:#FFCC00;}

/* Colonnes footer */
#footercolumns {padding:10px; margin:0 20px 0 20px; width: 600px; text-align:left;}
#footercolumns .block {float:left; width:160px; margin:0 20px 0 0;text-align:left;}
#footercolumns .first, * html 
#footercolumns .first{clear:both; margin: 0px 20px 0px 0px;}
#footercolumns h2 { color:#CC0000; padding:0px 0px 3px 0px; text-transform: uppercase; letter-spacing: -1pt; font-family :arial; font-size : 18px; font-weight:bold; text-align:left; border-bottom: 1px dashed #330000;text-shadow: 1px 1px rgba(0, 0, 0, 0.3);}
#footercolumns .block ul {padding:0px; margin: 0px 0px 20px 0px;}
#footercolumns .block li {list-style:none; padding:0px 0px 1px 3px; margin: 0px; font-family : arial; font-size : 12px;  letter-spacing: 0pt; border-bottom: 1px dashed #660000;}
#footercolumns a {text-decoration:none; color:#330000; font-size:100%;}
#footercolumns a:hover {text-decoration:none; color:#FFCC00;}
#footercolumns br {clear:all;}

#rockfoot {float:right; width: 300px; text-align:right; margin:0 20px 0 0px;}
#rockfoot a {text-decoration:none; color:#330000; font-size:100%;}
#rockfoot a:hover {text-decoration:none; color:#FFCC00;}

#hidestuff{height:20px; overflow:hidden; background:#330000;}
#hidestuff:hover {height:auto}


/*-------------------module--------------------------*/

.box {margin:0px; padding:0px; margin:5px; border: 1px solid #330000; background-color: #CC0000; width: 195px; }
.box h2 {color:#CC0000; margin:0px 0px 0px 0px; text-transform: uppercase; letter-spacing: -1pt; font-family :arial; font-size : 18px; font-weight:bold;}
.box-titre {padding:5px; text-align:center; height:18px; border-bottom: 0px solid #990000; background-color: #330000; text-align:left;}
.box-footer {display:none;}
.box-content {overflow:auto; padding:5px; color:#660000;}
.box-content p {margin:5px 0px 5px 15px; padding:0px; color:#660000;}
.box-content a {text-decoration:none; color:#660000; font-size:100%;}
.box-content a:hover {text-decoration:none; color:#FFCC00;}
.box-content ul {margin:5px 0px 5px 0px; padding:0px; color:#660000; text-transform: uppercase;}
.box-content li {list-style:none; color:#660000; margin:5px 0px; padding:3px;  border-bottom: 1px dashed #660000; display: block; background-color: #CC0000;}
.box-content li:hover {color:#FFCC00; border-bottom: 1px dashed #FFCC00; display: block; background-color: #CC3300;}
.listAll{display:block; text-align:right;}

.archive .box-content {height:0px;overflow :hidden}
.archive:hover .box-content {height:auto}

.pages h2 {letter-spacing: .1em;}

#mylinks .box-content {}
#mylinks:hover .box-content {}

#transp h2 {display:none;}
#transp .box {border: 0px solid #CC0000; background-color:transparent;}
#transp .box-content {overflow:no; padding:0px; background-color:transparent;}
#transp .box-titre {display:none;}

/*------------------- Articles ----------------------------------*/

.article {margin-top:0px; padding:0px 20px 0px 20px; margin-bottom:20px; color: #333;}
.article p {padding:0px 20px 0px 20px ; margin:0px;}

.contenuArticle {margin:10px; padding:5px 20px 5px 20px}
.contenuArticle a {color: #CC0000; padding : 3px 3px 3px 3px;}
.contenuArticle a:hover {color: #fff; background: #CC0000; padding : 3px 3px 3px 3px;}
.contenuArticle a.image   {padding: 0px;} 
.contenuArticle a:hover.image   {background:none; padding: 0px;}  
.date {margin-right:0px; color:#AAA; text-transform: uppercase; font: 10px 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; letter-spacing: .2em;}
.afterArticle {padding: 5px; border-top:3px dashed #330000; width:100%; text-align:right; font-size:90%; color:#AAA; BACKGROUND-IMAGE: url(http://idata.over-blog.com/0/02/53/25/design/fondtraitgris2.gif);}
.beforeArticle {padding:0px 0px 0px 0px; margin:0px ; width:100%; color:#660000;}
.linkTopic {text-transform: uppercase;}
.linkTopic:hover {text-transform: uppercase;}
.titreArticle {text-decoration:none; color:#FFFFFF; text-transform: uppercase; display:block; background-color: #330000; width:98%; padding:5px 10px 5px 10px; font-weight: bold; font-family :arial; font-size : 18px; line-height : 18px;}
.titreArticle:hover {text-decoration:none; color:#CC0000; font-weight:bold; text-transform: uppercase; display:block; background-color: #330000; width:98%; padding:5px 10px 5px 10px;}
.plusExtrait {margin: 5px auto 10px auto}
.GcheTexte{float:left; margin:3px;}
.DrteTexte{float:right; margin:3px; }
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}
.extraitArticle {margin-bottom:15px;}
.titreExtrait {font-weight:bold;}
.afterReactions {text-align:right; display:block}
.afterReactions .linkAddComment, .afterReactions .linkAddTrackback { font-size:130%; }

.afterArticle, .plusExtrait { text-transform: uppercase; font: 14px  Arial, Verdana, sans-serif; margin: 0px; padding: 6px; font-size: 10px; line-height : 16px; text-align: right;}

.afterArticle a, .plusExtrait a {text-decoration: none; text-transform: uppercase; font-weight: normal; font-style: normal; color:#330000;}

.afterArticle a:hover, .plusExtrait a:hover {color:#CC0000;}

.articleAccueil a {text-decoration:none; color:#330000; font-size:100%;}
.articleAccueil a:hover {text-decoration:none; color:#CC0000; background: transparent;}

.articleAccueil .afterArticle {padding: 0px; border-top:none; background-image: none;}

.topic {float:left; margin:3px; font: 10px 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;}

.spanRecommend {float:left; margin-left:-190px; padding:5px; font: 1px 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;}

.linkComment {text-decoration:none; color:#CC0000; text-transform: uppercase;  padding:5px 10px 5px 10px; font-weight: bold; font-family :arial; font-size : 18px; line-height : 18px;}


/*--------------------Liste des articles-------------------------*/

.listArticles {margin-top:0px; margin-bottom:10px; border:0px none;}
.resumeArticle {color:#AAA;}

/*--------------------Commentaires---------------------------- */
.h2commentMessage {color:#CC0000;}
.comment {}
.comment hr {}
.commentMessage {padding:5px; border:1px dotted #BBB; margin:0px; color:#666;}
.commentOption {text-align:right; font-size:90%; color:#666; margin-bottom:10px;}
.responseMessage {text-align:right; color:#666; background-color: #ffffff; BACKGROUND-IMAGE: url(http://idata.over-blog.com/0/02/53/25/design/fondtraitgris2.gif);}
.afterReactions .linkAddComment {font-size:120%; color: #ffffff; border: 1px solid #330000;
	text-decoration: none;
	background: #330000;
	padding: 3px 5px;
margin :10px;
font-weight: bold;	
text-transform: uppercase;}

/*-----------------Newsletter-----------------------------------*/
#divNewsletter {background-color:#333333; border:1px dotted #666;}
#divNewsletter h2 {text-align:center; font-size:12pt;}
#divNewsletter input {background-color:#FFF; border:1px solid #666; color:#000;}
#divNewsletter .newsletter {}
#divNewsletter {}

.newsletter li {list-style-type: none;}
.newsletter .box-content { text-align:center; background-color:#330000; color:#FFFFFF; text-transform:uppercase; font-size:6pt;}
.newsletter h2 {color:#FFFFFF; text-align:center; letter-spacing:.1em;}
.newsletter input{
border:solid 1px #000000; font-size:12px; background-color:#ffffff; color:#330000; width: 160px;}

/* ---------------------Calendrier--------------------------------- */
.calendarTop1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#000000; font-weight: bold; background-color:transparent;}
.calendarToday1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color:#F60;}
.calendarDays1 {width:50px; height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color:#660000; text-align:center;}
.calendarHeader1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#FFCC00;}
.calendarTable1 {border:0px none;}

/*-----------------------Pagination-------------------------*/
.pagination {color:#AAA; margin:10px auto}

.pagination b.currentPage {

	color: #FFCC00;
	border: 1px solid #990000;
	text-decoration: none;
	background: #CC0000;
	padding: 3px;
	text-transform: uppercase;

}

.nextPage, .textNext, .previousPage, .textPrevious,.textLast,.textFirst {
	color: #CCC;
	border: 1px solid #CCC;
	text-decoration: none;
	background: #FFF;
	padding: 3px;
	text-transform: uppercase;
}

.nextPage:hover, .textNext:hover, .previousPage:hover, .textPrevious:hover,.textLast:hover,.textFirst:hover {
	color: #FFCC00;
	border: 1px solid #990000;
	text-decoration: none;
	background: #CC0000;
	padding: 3px;
	text-transform: uppercase;}

/*------------------- Pages ----------------------------------*/
.page {margin-top:0px; padding:0px; margin-bottom:5px; color: #555;}
.page p {padding:5px 5px 5px 5px ; margin:0px;}
.pageContent {margin:1px; padding:5px 30px 5px 30px ;}
.afterPage {padding:3px 0px; border-top:0px solid #666; width:100%; text-align:right; font-size:90%; color:#AAA;}
.beforePage {padding:0px 0px 5px 0px; margin:0px; width:100%; color:#666;}
.divPageTitle h2 {text-decoration:none; color:#CC0000;}
.divPageTitle h2:hover {text-decoration:none; color:#FFCC00;}

/*----------------erreurs etc------------------------------*/
.error {color : #FFF}

/*----------------lightbox------------------------------*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://ddata.over-blog.com/0/02/53/25/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://ddata.over-blog.com/0/02/53/25/lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }