/* Ce fichier définit le style visuel pour les différents éléments du site.
 * Dans l'ordre, vous trouverez les règles qui définissent l'apparence pour:
 * - les éléments HTML en général
 * - la page
 * - l'entête
 * - le prélude
 * - le contenu
 * - la barre de navigation
 * - le pied de page
 *

 */

 
/* Les éléments HTML en général
-------------------------------------------------------- */
body{
	background: #EAE2C7;
	color: #000;
	font-size: 90%;
	font-family : Tahoma,Arial,Helvetica,sans-serif;
	voice-family: "\"}\""; voice-family:inherit;
}

h1, h2, h3, h4, h5, h6{
	font-family : Tahoma,Arial,Helvetica,sans-serif;
}
h1, h2, h3, h4, h5{
	color: #968270;
}
h1{
	font-size: 1.3em;
	margin: 2em 0 2em 1.5em;
}
h2{font-size: 1.18em;
	margin-left: 1.7em;}
h3{font-size: 1.09em;
	margin-left: 2em;}
h4{font-size: 1.02em;
	margin-left: 3em;}
h5{font-size: .87em;}
h6{font-size: 1em; margin: 0;}

pre, code{
	font-size: 1.2em;
}

pre{
	width: 100%;
	overflow: auto;
	border: 1px solid #B4B061;
}

label{
	cursor: pointer;
	cursor: hand;
}
abbr{
	cursor: help;
}

.field label{
	display: block;
}
p {
	line-height: 1.6em;
}
a{
	color: #968270;
}

a:visited{
	color: #6699CC;
}

a:hover{
	color: #968270;
}

a[href^="http://"] { 
	color: #47517C;
	text-decoration:underline;
	background-image : url(img/LnkExt.png);
	background-position : 100% 50%;
	background-repeat : no-repeat;
	padding-right : 16px;
}

a[href*="astro-blieux.fr"]   { 
	background-image :none;
}
a[hreflang]:after {
	color: gray;
	font-weight: bold;
	content: "\0000a0[" attr(hreflang) "]";
}

img, a img{
	border : none; 
	max-width: 100%; 
	text-decoration: none;
	margin: 1em .5em;
}

.left{
	float: left;
	margin: 0 2em 0 0;
}

.right{
	float: right;
	margin-left: 1em;
}
.center{text-align : center;}
.img-center{
	display: block;
	margin: 0.5em auto;
}
.relat-pos{position: relative;}
.img-vertical{
	position: relative;
	top: -100px;
	margin-left: 3em;
}
/**/
.img-bigMargin {
	margin-top: 9em;
}
.en_plus{
	font-size: 0.7em;
	color: #47517C;
	margin: 0 2em;
}

.marginLeft {
	margin-left: 13%;
}
.cadre{
	padding: 5px 10px;
	border: 1px solid #B4B061;
	-moz-border-radius: 8px;
}
.titre-gal{
	color: #968270;
	font-weight: bold;
	font-size: .7em;
	padding-right: 16px;
}
.home{float: right; margin-top: -55px;
}
.inline li{display: inline;	list-style-type: none;}
ul.notype {margin: 0;}
.notype li{list-style-type: none;	}
ul.photo-list{margin: 0 auto; list-style-type: none;}
ul.photo-list li {margin-bottom: 7px;}
ul.photo-list li img{ display: block; margin: 0 auto;}
ul.photo-list li em {font-size: 0.87em; display: block; text-align: center;}


.nomargin{margin: 0;}
.clearer{clear: both;}
hr.separator{color: #968270;background: #968270;height: 3px;border: 0; margin: 2em 3em;}
/* La page
-------------------------------------------------------- */
#page{
	background: #EAE2C7;
	/*color: inherit;*/
	width: 99%;
	padding: 0;
	margin: -.7em 0;
}
 
/* L'entête
-------------------------------------------------------- */
#top{
	margin: 0;
	padding: 0;
	width: 98%;
	height: 169px;
	background: transparent url(img/Top-dessin2.jpg) no-repeat center;
	position: relative;
}


#top h1 {
	margin: 0 20% 40px auto;
	padding-top: 30px;
	font-family : Verdana,Arial,sans-serif;
	width: 21em;
	color:  #EAE2C7;
}
#top h1 a{
	text-decoration: none;
	color:  #EAE2C7;
	display: block;
	width: 21em;
	height: 5em;
}
/* Le prélude
-------------------------------------------------------- */ 
ul#prelude {
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
}
#prelude li, #prelude a{
	padding: 0;
	margin: 0;
	color: #DFCEC0;
}
#prelude a{
	font-size: .8em;
}
#prelude a:hover{
	color: #968270;
}

/* --- 
NAVIGATION HORIZONTALE
--- */

#nav-bar  {		
	float: left;
	width: 80%;
	margin: 0 0 10px 23%;
	font: normal small-caps bold .92em tahoma;	
}
#nav-bar ul{
	margin : 0;
	padding :0;
	list-style-type : none;
}
#nav-bar li {
	display:inline;
    margin:0;
}
#nav-bar li a {
	white-space: nowrap;
    background:url(img/tabLeftBcg.gif) no-repeat left top;
    padding:0 0 0 18px;
	text-decoration: none;
	float: left; /* hack pour ie5/mac*/
}
#nav-bar a span{
    float:left;
	display: block;
    background:url(img/tabRightBcg.gif) no-repeat right top;
    padding:5px 15px 5px 0;
	color:  #EAE2C7;
}
/* Commented Backslash Hack     Cache des règles à IE5-Mac \*/
  #nav-bar a span{float:none;}
  /* Fin du hack IE5-Mac */
  
#nav-bar a:hover span{
	color: #C9B6B3;
    background:url(img/tabRightBcg.gif) no-repeat 100% -131px;
}
#nav-bar a:hover{
    background:url(img/tabLeftBcg.gif) no-repeat 0% -131px;
}
#nav-bar #active a {
    background:url(img/tabLeftBcg.gif) no-repeat 0% -131px;
    }
#nav-bar  #active a span{
    background:url(img/tabRightBcg.gif) no-repeat 100% -131px;
    }

#lang-list {
	position: absolute;
	top: 60px;
	left: 0;
	padding: 0;
}
#lang-list li {
	list-style-type: none;
	padding: 2px 0;
	 text-indent: -5000px; overflow: hidden;
}
#lang-list li a{
	display: block;
	width: 38px;
	height: 19px;
}
#lang-list #fr a{
	background :transparent url(img/fr.jpg) no-repeat center left;
}
#lang-list #en a{
	background :transparent url(img/en.jpg) no-repeat center left;
}
/* .block-container{margin:0; padding:0;} */

#desc{color: #968270; font-style: italic; font-size: 90%;}

.index-block{
	background: transparent url(img/bkg-right-news.jpg) no-repeat right top;
	width: 48%; margin-right: 2%;}

.index-block>div{background: transparent url(img/bkg-left-news.jpg) no-repeat left top;
	/* */padding: 5px 1em;} 
.index-block h3{margin: .5em auto; font-size: .87em; text-align: center;}
.index-block p{ font-size: 90%;}


/* Le contenu
-------------------------------------------------------- */
.main {
	width : 98%;
	/**/ min-width: 870px; 
	margin: 4em 1em 6ex;
	clear: both;
}
.main li {
	padding-bottom: 7px;
}
.content{
	margin: 50px 0 0 13.5%;
}
.content .right span{
	font-size: .87em;
}

.home-column{
	width: 50%;
}
.index-column{
	width: 53%;
	margin: 0 0 0 8%;
}
.narrow-column{
	width: 55%;
	margin-left: 16%;
}
.img-column {width: 38%;}
.block-container{width: 100%; margin-bottom: 1em;}

/* list d'icones de la page index
-------------------------------------------------------- */
.list-index li{
	/*height: 118px;*/
	padding: .5em 0;	
	margin: 0;
}
.list-index li a{
	display: block;
	height: 118px;
	width: 59%;
	font: normal small-caps bold .85em/2em tahoma;
	padding: 7% 0 0 150px ;
	text-decoration: none;
	color: black;
}

#item-observ a {
	background: url(img/ico-observ.jpg) no-repeat;
}
#item-rando a {
	background: url(img/ico-rando.jpg) no-repeat;
}
#item-cultur a {
	background: url(img/ico-cultur.jpg) no-repeat;
}
#item-edit a {
	background: url(img/ico-edit.jpg) no-repeat;
}
/*Style du sous-menu et comportement des liens cliqués
*/
.sub-menu{
	width: 105px;
	float: left;
	margin: 1em 0 0;
	list-style-type: none;
	padding: 2em 0 0 .8em;
	font: normal small-caps bold .95em/1em tahoma;	
	background: transparent url(img/bcg-sub-menu.gif) no-repeat;
}
.sub-menu li {
	margin: 0 0 .3em .5em;
}
.sub-menu li a{
	display: block;
	width: 105px;
	height: 35px;
	text-decoration: none;
	color: #7B634F;
}
.sub-menu li a:visited{
	color: #636D8A;
}
.sub-menu li a:hover{	
	background: transparent url(img/item-sub-menu.gif) no-repeat -5px -10px;
}

#astronomie #m-astro a, #refuge #m-refuge a, #tarifs #m-tarifs a, #reserv #m-resa a, #liens #m-liens a{
	color: #8E8D4B;
	background: transparent url(img/item-sub-menu.gif) no-repeat -5px -56px;
}
#chanier #m-chanier a, #chiran #m-chiran a, #chauvets #m-chauvets a,#majastres #m-majastres a, #blieux #m-blieux a, #verdon #m-verdon a, #circuit-rando #m-circuit-rando a {
	color: #8E8D4B;
	background: transparent url(img/item-sub-menu.gif) no-repeat -5px -56px;
}
#a-propos #m-apropos a, #calendrierBlieux #m-calendrier a, #adhesion #m-adhesion a{
	color: #8E8D4B;
	background: transparent url(img/item-sub-menu.gif) no-repeat -5px -56px;
}
#bestiaire #m-bestiaire a, #edition #m-edition a, #stage-papier #m-papier a{
	color: #8E8D4B;
	background: transparent url(img/item-sub-menu.gif) no-repeat -5px -56px;
}
#blieux .content ul{
	padding: 0;
}
#blieux .content li {
	list-style-type: none;
	padding: .2em 0;
}

#index div.index-column h2.cadre{clear: left; margin-left: 0;}
#newsWrapper {width: 305px; margin: 0 ;
	background: transparent url(img/bkg-right-news.jpg) no-repeat top right;}

#news {font-family: georgia; font-size: .9em;
	background: transparent url(img/bkg-left-news.jpg) no-repeat top left;}
#news h2 {
	margin: 0;
	padding: .3em 2em;
	line-height: 1.4em;
	text-align: center;
	color: #968270;
	background: transparent url(img/ss-titre-news.gif) no-repeat bottom center;
}
#news ul {list-style-type: none;padding:  0 .5em; margin: 0;}
#news h3 {margin: 0 .7em;}
#news h3 a{color:#968270;}
#news li p{padding-left : .5em; font-size: 93%;}

#syndication {font-size: 90%;}
#syndication a{
	padding-left: 20px;
	background : transparent url(img/feed-icon-14x14.png) no-repeat;
}
/* contenu
-------------------------------------------------------- */
#index .home-column {
	margin-top: 3em;
}
#a-propos div.content p{
	margin-right: 40%;
}
#a-propos .img-column p{
	width: 100%;
	margin: .5em auto 2em;
	text-align: center;
}
#a-propos .img-column p a{
	text-decoration: none;
}
#a-propos .img-column p img{
	display: block;
	margin: 0 auto;
}
#a-propos div.img-column{
	border-left: 2px solid #fbfff1;
}
/* --- 
 STYLE POUR RESERVATION ET ACCES
--- */
dl.table-tarif{
	width: 18em;
	margin: 0 O 2em 2em;
	padding: 1.5em;
}
dl.table-tarif dt{
	/*display: inline;*/
	font-weight: bold;
}

dl.table-tarif dd.bloc{
	display :block;
	line-height: 1.2em;
}

dl.table-tarif dd{
	display: inline;
	line-height: 2em;
	margin: 0 .5em;
}

.carte{
	width: 355px;
	float: left;
	margin: 1.5em 2.5em 2em 0;
}

.acces-trajet{
	width: 28%;
	float: left;
	margin-top: 2em;
	/*margin-left: 7em;*/
}
.acces-trajet ul{
	list-style-type : none;
	padding: 0;
}
/* Calendrier des évènements culturels
-------------------------------------------------------- */
dl#calendrier{
	width: 76%;
	margin: 2em 0;
	padding: 0;
}
#calendrier dt{
	position: relative;
	left: 1.5em;
	top: 1.5em;
	width: 11em;
	font-size: .8em;
	font-weight: bold;
}
#calendrier dd{
	border-left: 1px solid #B4B061;
	margin: 0 0 0 10em;
	padding: 0 0 .5em .5em;
}
.p-img{
	float: left;
	margin-right: 1em;
	width: 56%;
}
#calendrier dd img{
	width : 36.5%;
	height: 36.5%;
} 
/* --- 
 STYLE POUR RANDO
--- */
#documents{
	margin-top: 2.5em;
}
#main ol{
	list-style-type: upper-roman;
}
#circuit-rando.main{min-width: 670px;}
#circuit-rando div.img-column{width: 485px; margin: -1em;}
#circuit-rando div.img-column p.en_plus{font-size: 80%;}
#circuit-rando div.relat-pos span{position: absolute;
	display: block; padding: 0 .5em; line-height: 1.5em;
	opacity: .8; background: #f7f0d9; color: #4f443b;
	text-align: center; font-variant: small-caps; 
	font-weight: bold; font-size: 80%;}
#circuit-rando div.relat-pos span#rougon{top: 479px; left: 301px;}
#circuit-rando div.relat-pos span#chauvets{top: 419px; left: 104px;}
#circuit-rando div.relat-pos span#chiran{top: 204px; left:34px ;}
#circuit-rando div.relat-pos span#blieux{top: 165px; left: 218px;}
#circuit-rando div.relat-pos span#chasteuil{top: 337px; left: 400px;}
#circuit-rando div.relat-pos a{position: absolute; display: block; text-decoration: none;}
#circuit-rando div.relat-pos p a{position: static;}
#circuit-rando div.relat-pos a span{display: none; font-weight: normal; font-variant: normal;font-size: 82%;}	
/* */ #circuit-rando div.img-column a span b{display: block;}
#circuit-rando div.relat-pos a:hover span{display: block; width: 13em; background: #f7f6f0; padding: 5px; position: absolute;}

#circuit-rando div.relat-pos a#rougon-chauvets{
	width:174px; height:63px;
	top:430px; left: 138px;}

#circuit-rando div.relat-pos a#chauvets-chiran{
	width: 79px; height:181px;
	top: 213px;left: 44px; }

#circuit-rando div.relat-pos a#chiran-blieux{
	width: 164px; height:73px;
	top: 134px; left: 49px;}
	
#circuit-rando div.relat-pos a#majastres-lepoil{
	width: ; height:;
	top: ;left; }
#circuit-rando div.relat-pos a#blieux-chasteuil{
	width: 212px; height:143px;
	top: 175px;left: 228px; }
	
#circuit-rando div.relat-pos a#chasteuil-rougon{
	width: 121px; height:117px;
	top: 345px;left: 308px; }	
	
#circuit-rando div.relat-pos a#{
	width: ; height:;
	top: ;left; }	
	

	
#circuit-rando div.narrow-column.content{width: 40%; margin-top: 0;}
#circuit-rando div.narrow-column dl{min-width: 297px;}
dl.hebergement dt{font-weight: bold; margin: 1em 0 .5em;color: #968270;}
dl.hebergement dt img{display: block; float: right; margin-top: -1em;}
dl.hebergement dt.m-t-img img{margin-top: 1em;}
dl.hebergement dd {margin-bottom: .5em;}
dl.hebergement dd.fn {font-weight: bold;}
dl.hebergement dd.fn span, dl.hebergement dd span.tel{padding-left: 2em;white-space: nowrap;}
dl.hebergement dd.fn span{font-size: 80%;}
/* --- 
 STYLE POUR EDITION
--- */
#bestiaire p, #imprimerie p, #edition p, #print p{
	font-size: 80.5%;
}
#bestiaire .right, #print .right  {
	width: 25%;
	padding-top: 10em;
	font-size: .952em;
	font-weight: bold;
	font-family: Georgia;
	text-align: justify;
}

#imprimerie div.content{
	position: relative;
}
#stage-papier div.index-column{margin-left: 5%;}
#stage-papier div.img-column ul{width: 240px; }
#stage-papier div#inscription dl{margin-top: .75em;}

/* --- 
 STYLE POUR FORMULAIRE
--- */

#contact div.left{margin-right: 0;}
#contact dl.table-tarif{margin: 2em auto;}

input,textarea{
	border: 1px solid #B4B061;
}

textarea{
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

fieldset{
	border: 1px solid #B4B061;
	margin: 1em auto;
}
legend {
	font-family: MS Georgia, Times New Roman, serif;
	color: #968270;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 2em;
}

#resa p {
	/*height: 2.56em;*/
	margin: 0;
	padding: .5em 0 .5em;
	clear: both;
}

#coordonnees label, #resa label {
	width: 45%;
	float: left;
	text-align: right;
}
#message textarea {
	width: 100%;
}
#valid input{
	width: 10em;
	font: normal small-caps bold .92em tahoma;
}
p.thanks {font-weight: bold; color:#968270;}
/* Le pied de page
-------------------------------------------------------- */
#footer{
	clear: both;
	margin: 0;
	padding: 0;
	color: #666;
}
#footer p{
	background: #F2F0F2;
	font-size: .8em;
	padding: 0;
}
#footer a{
	color: #999;
}
#footer ul{
	font-size: .9em;
	text-align: center;
	margin: 0 0 -.5em;
}
#footer li{
	padding: 0 1em;
}