/* --------------------------------------------------------
    Main stylesheet
    Site: wee-wee
    Created by: Stephanie Leveille- stephanie.leveille@leonarddg.com
    Filename: screen.css
   -------------------------------------------------------- */

/* --------------------------------------------------------
    COLORS
	
	Orange: 		#ee5e05
	Bleu fonce:		#272c33
	Beige:			#918473
   -------------------------------------------------------- */

@import url(reset.css);


/********** commun *********/

html { font-size: 62.5%; height: 100%; }

body {
	background: #272c33 url(../img/background.gif) repeat-x;
	color: #272c33 ;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 120%;
	height: 100%;
	line-height: 1.8em;
	position: relative;
}

#container {  background: transparent url(../img/skyline.gif) 0 370px repeat-x; height: 100%; margin: 0 auto;}

p,ul,ol,table { margin-bottom: 1em; }
sup { font-size: 65%; line-height: 1; vertical-align: super; }
small, .small{ font-size: 90%; line-height:1.4em;}

ul { margin-left: 20px; }
a { cursor: pointer; color: #ee5e05; }
a:focus {  }
a:visited { }
a:hover, a:focus { color: #f6a800; }
a *, button * { cursor: pointer; }
hr { display: none; }

input, select, textarea, option { font-family: "Trebuchet MS", Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;}
/* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */



/* --------------------------------------------------------
    TEXTE
   -------------------------------------------------------- */
	
	h1 { color: #272c33; font-size: 200%; }
	h2 { color: #272c33; font-size: 110%; }
	.pageAccueil h2 { color: #918473; }


/* --------------------------------------------------------
    BOUTONS
   -------------------------------------------------------- */
.btn {
	background-color: #fff;
	border: 1px solid #bdbcbd;
	color: #ee5e05;
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 110%;
	font-weight: bold;
	margin:0;
	padding: 3px 5px;
	position: relative;
	text-align: left;
	text-decoration: none;
	z-index: 29;
	
}

button.btn { width: 100px !important; }

.btn:hover { color: #f6a800; }

.btnReserve { background: url(../img/img-plus.gif) 5px center no-repeat; padding-left: 25px; }
.btnReserveDes { background: url(../img/img-plus-des.gif) 5px center no-repeat; color: #c6c5c5; padding-left: 25px; }
.btnReserveDes:hover, .btnReserveDes:focus { color: #c6c5c5; cursor: default; }
.btnInscrire { background: url(../img/img-mail.gif) 5px center no-repeat; padding-left: 25px; }
.btnAmi { background: url(../img/btnAmi.gif) 5px center no-repeat; padding-left: 25px; }


/* --------------------------------------------------------
    HEADER
   -------------------------------------------------------- */

#header {
	background: #fff;
	height: 131px;
	margin: 36px auto 20px;
	position: relative;
	width: 800px;
}

#header h1 { 
	display: inline;
	float: left;
	margin: 0 12px 0 14px; 
}

#header .pub {
	display: inline;
	float: left;
	height: 118px;
	margin-top: 7px;
	overflow: hidden;
	width: 676px;
}

#header a.btn { 
	background: #fff url(../img/img-go.gif) 155px center no-repeat;
	border: 1px solid #bdbcbd;
	color: #272c33;
	display: block;
	font-size: 115%;
	font-weight: bold;
	height: 41px;
	line-height: 1.4em; 
	padding: 5px;
	position: absolute;
	right: 16px;
	text-decoration: none;
	top: 38px;
	width: 157px;
}

#header a.btn span {
	color: #ee5e05;
	display: block;
	font-size: 117%;
}

/* --------------------------------------------------------
    CAROUSEL
   -------------------------------------------------------- */
#mycarousel { overflow: hidden; height: 111px;}
#mycarousel a.inactive { cursor: pointer; }
#mycarousel a.inactive img {
	opacity: 0.5;
	-moz-opacity: 0.5; 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}


/* --------------------------------------------------------
    CONTENT
   -------------------------------------------------------- */

#mainContent {
	background: #fff;
	border: 1px solid #ccc;
	margin: 0 auto;
	width: 800px;
}

.col100 {
	margin: 0 40px 20px;
	padding: 20px 10px 10px;
}

.col50 {
	display: inline;
	float: left;
	margin: 0 20px 0 40px;
	width: 349px;
}

.col70 {
	display: inline;
	float: left;
	margin: 0 20px 0 40px;
	width: 500px;
}

.col30 {
	display: inline;
	float: left;
	margin: 0 20px 0 40px;
	width: 199px;
}

.right { margin: 0 40px 0 0; }

.box {
	border: 1px solid #918473;
  	position: relative;
  	margin-bottom: 20px;
  	padding: 10px;
}

.reservationContent { position: relative; }

/* --------------------------------------------------------
    MENU
   -------------------------------------------------------- */
ul.nav { border-bottom: 3px solid #000; height: 27px;margin:0; padding: 0 0 0 10px; }

ul.nav li {
	display: inline;
	float: left; 
}

ul.nav li a {
	color: #272c33;
	display: block;
	font-size: 110%;
	font-weight: bold;
	float: left;
	height: 27px;
	line-height: 27px;
	padding: 0 13px;
	text-decoration: none;
}

ul.nav li a:hover, 
.pageAccueil ul.nav li.mAccueil a, 
.pageDestinations ul.nav li.mDestinations a,
.pageInfoVoyage ul.nav li.mInfo a,
.pageFaq ul.nav li.mFaq a,
.pageQui ul.nav li.mQui a,
.pageContact ul.nav li.mContact a {
	background: #ee5e05;
	color: #fff;
}

/* --------------------------------------------------------
    BREADCRUMB
   -------------------------------------------------------- */
#breadcrumb {
	color: #272c33;
	font-size: 92%;
	margin: -10px 40px 20px;
}
#breadcrumb a { color: #272c33; }
#breadcrumb a:hover { color: #f6a800; }


/* --------------------------------------------------------
    DESTINATIONS
   -------------------------------------------------------- */

.destinationsBox a.complet {
	position: relative;
	float: left;
	display: block;
	height: 87px;
	margin-right: 10px;
	width: 113px;
}

.destinationsBox a.complet span {
	background: url(../img/complet.gif) no-repeat;
	display: block;
	height: 19px;
	left: 1px;
	position: absolute;
	top: 60px;
	width: 111px;
	z-index: 10;
}

.destinationsBox img { 
	border: 1px solid #fff; 
	display:inline; 
	float: left; 
	margin-right: 10px; 
}

.destinationsBox a:hover img { border: 1px solid #f6a800; }

.destinationsBox div { display: inline; float: left;}
.destinationsBox h3 { width: 240px; }
.destinationsBox h3 a { color: #272c33; font-size: 115%;}
.destinationsBox h3 a:hover { color: #f6a800;}

.destinationsBox p.date { font-size: 95%; line-height: 1.2em; width: 120px; }
.destinationsBox p.prix { 
	color: #272c33;
	font-size : 95%;
	/*line-height: 1.6em;*/
	position: absolute;
	top:20px;
	right: 10px;
}

.destinationsBox p.prix span { 
	color: #ee5e05;
	display: block; 
	font-size: 250%;
	font-weight: bold;

}

p.bouton { position: absolute; bottom: 0px; right: 10px; margin-bottom:0; padding: 10px 0; text-align: right; }

/* --------------------------------------------------------
    INFOLETTRE
   -------------------------------------------------------- */

.infolettreBox p { font-size: 95%; line-height: 1.4em; }
.infolettreBox input { margin-right: 10px; padding: 3px; width: 200px;}

/* --------------------------------------------------------
    BOX RESERVATION
   -------------------------------------------------------- */
   
.reservationBox{
	background: #272c33;
	position: absolute;
	right: 10px;
	width: 125px;
}

* html .reservationBox { right: 50px; }

.reservationBox h3 { color: #fff; font-size: 115%; margin-bottom: 10px; }
.reservationBox p.prix { 
	color: #fff;
	font-size : 95%;
	line-height: 1.6em;
	text-align: right;
}

.reservationBox p.prix span { 
	color: #ee5e05;
	display: block; 
	font-size: 225%;
	font-weight: bold;
}



/* --------------------------------------------------------
    FOOTER
   -------------------------------------------------------- */
#footer {
	background: #fff;
	margin: 20px auto;
	position: relative;
	width: 800px;
}

#footer p {
	font-size: 95%;
	display: inline;
	float: left;
	margin: 0;
	padding: 5px 10px;
}

#footer p.copyrights { float: right; }

/* --------------------------------------------------------
    FORMULAIRES
   -------------------------------------------------------- */

input, textarea { border: 1px solid #ccc; width: 200px; }
input.petit { width: 40px; }
input.moyen { width: 70px; }
input:focus, textarea:focus { border: 1px solid #272c33; }

label.error { 
  color: #ee5e05;
  padding-left: .5em; 
}

form dl { margin-top: 20px; }	

form dl dd {
	border-top: 0;
	padding: 10px 10px 10px 180px;
}

form#formContact dl dd {padding: 10px 10px 10px 145px;}

form dl dt {
	float: left;
	font-weight: normal;
	width: 175px;
	padding: 10px 10px 10px 10px;
	color: #000;
	clear: both;
}

form#formContact dl dt { width: 120px;}

form dl dd textarea { height: 100px; }

form fieldset { 
  border: 1px solid #999;
  margin-bottom:  10px;
  padding: 1em .5em;
  width: 500px; 
}

form fieldset legend {
  color: #ee5e05;
  font-weight: bold;
  padding:  0 5px; 
}

/* --------------------------------------------------------
    AUTRES
   -------------------------------------------------------- */   
.autreHeader { position: relative; margin: 0 40px; }   

.autreHeader h1 {
	color: #272c33;
	font-size: 240%;
}

.subNav { margin: 20px 0 0 50px; }

.subNav li {
	border-top: 1px solid #918473;
	display: inline;
	float: left;
	position: relative;	margin-bottom: 1px;
}

.subNav li.first a { border-left: 1px solid #918473; }

.subNav li a {
	background: url(../img/backDegrade.gif) repeat-x;
	border-top: 1px solid #918473;
	border-right: 1px solid #918473;
	color: #272c33;
	height: 24px;
	padding: 4px 5px;
	overflow: hidden;
	text-decoration: none;
}

.subNav li a:hover, .subNav li.active a {
	background: #ee5e05;
	color: #fff;
}

.autreContent h2 { color: #272c33; }

.filet { background: #fff url(../img/filet.gif) center no-repeat; height: 1px; margin: 20px 0 30px;}
.filet hr { display: none;}

.autreContent {
	border: 1px solid #918473;
	margin: 0 40px 20px;
	padding: 20px 10px 10px;
}

.autreContent2 {
	margin: 0 40px 20px;
	padding: 20px 0 10px;
}

.autreContent2 div div.personne {
  float:left;
  height: 250px;
  margin-right: 10px;
  width: 200px;
}