/*------------------------------
/   Design by Crucifix Arnaud	
/   for la Petite Maison (2010)
/	
/   contact@crucifixarnaud.com
/   crucifixarnaud.com
-------------------------------*/

/*------------------------------
/   CSS 3.0 - W3C Valid
-------------------------------*/

/*------------------------------
/   Color Memento
/
/   #efe6d9 : Border White Cream
/   #c3b7a5 : Border Bronze
/   #f3ede5 : Content Cream Background
/   #e0d7c9 : Padding Cream Background
/   #4a4742 : Text Bronze
-------------------------------*/

@import "http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css";

/* Layout
-------------------------------*/

/* Global */

html{
    position:relative;
    background-color:#c8c0b0;
}

img.backgroundImages{
 	width: 100%;
	position:absolute;
	top: 0;
	left: 0;
 	z-index:-10;
}

div#global{
    width:700px;
    margin:100px auto;
}


/* Content */

div#content{
    background-color:#e0d7c9;
    width:inherit;
    min-height:450px;
    padding:10px;
    border:1px solid #efe6d9;
    overflow:auto;
    -webkit-box-shadow: 0 2px 10px 2px rgba(135, 116, 83, 0.2);
    -moz-box-shadow: 0 2px 10px 2px rgba(135, 116, 83, 0.2);
    -o-box-shadow: 0 2px 10px 2px rgba(135, 116, 83, 0.2);
    box-shadow: 0 2px 10px 2px rgba(135, 116, 83, 0.2);
}

div#colA, div#colB{
    background-color:#f3ede5;
}

/* Col A */

div#colA{
    float:left;
    border:1px solid #c3b7a5;
	width:450px;
	height:450px;
    overflow:hidden;
    position:relative;
}


div#colA div{
		display:block;
		float:left;
}

h2{
		padding-bottom:5px;
		border-bottom:1px dotted #4a4742;
}

div#colA img{
    display:block;
}

div#gite, div#tarifs, div#situation, div#region, div#contact, div#apropos{
		padding:20px;
		width:410px;
		height:410px;
		overflow:auto;
}

div#gite p, div#tarifs p, div#situation p, div#apropos p{
		margin-bottom:5px;
}


h3,h2,div#contact ul li ul{
		margin-bottom:15px;
}

/* Le gîte */

div#gite{
		position:relative;
}

div#gite h3{
		margin-top:20px;
}

div#gite ul#galeryGite li, div#situation a img{
	display:block;
	float:left;
	width:80px;
	height:80px;
	margin-right:20px;
	margin-bottom:20px;
	position:relative;
	border:1px solid #c3b7a4;
	z-index:5;
}

div#gite ul#galeryGite li+li+li+li,div#gite ul#galeryGite li+li+li+li+li+li+li+li{
	margin-right:0;
}

div#gite ul#galeryGite li+li+li+li+li{
	margin-right:20px;
}

div#situation a img{
		-moz-transition:border 0.5s;
		-webkit-transition:border 0.5s;
		-o-transition:border 0.5s;
		transition:border 0.5s;
}

div#situation a:hover img{
		border:1px solid #4a4742;
}

div#gite ul#galeryGite li a+img{
	visibility:hidden;
}

div#gite ul#galeryGite li a:hover+img,div#gite ul#galeryGite li a:focus+img{
	visibility:visible;
}

div#gite ul#galeryGite li a img{
	-moz-transition:opacity 1s;
	-webkit-transition:opacity 1s;
	-o-transition:opacity 1s;
	-moz-opacity:0.5;
	-webkit-opacity:0.5;
	-o-opacity:0.5;
	opacity:1;
	position:relative;
		
}

div#gite ul#galeryGite li a:hover img, div#gite ul#galeryGite li a:focus img{
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	opacity:1;
}

div#gite ul#galeryGite li a+img{
	position:absolute;
	bottom:85px;
	left:50%;
	margin-left:-54px;
	opacity:0;
	-webkit-transition-property:bottom, opacity;
	-webkit-transition-duration:.5s;
	-webkit-transition-timing-function:ease-out;
	-moz-transition-property:bottom, opacity;
	-moz-transition-duration:.5s;
	-moz-transition-timing-function:ease-out;
	-o-transition-property:bottom, opacity;
	-o-transition-duration:.5s;
	-o-transition-timing-function:ease-out;
	transition-property:bottom, opacity;
	transition-duration:.5s;
	transition-timing-function:ease-out;
}

div#gite ul#galeryGite li a:hover+img, div#gite ul#galeryGite li a:focus+img{
	bottom:80px;
	opacity:1;
}

div#galeryContent{
	position:absolute;
	z-index:10;
}

ul.descriptifGite{
	margin-left:20px;
}

/* Tarifs */

div#tarifs{
	background-image:url("../pictures/background-tarif.jpg");
}

div#tarifs p{
	margin-bottom:15px;
}

div#tarifs ul p{
	margin-bottom:0;
}

div#tarifs ul{
	margin-bottom:15px;
}

div#tarifs ul li{
	margin-bottom:5px;
}

/* Situation*/

div#situation a img{
	width:410px;		
}

/* Régions */

div#region{
	background-image:url("../pictures/background-regions.jpg");
}

div#region p{
	margin-bottom:10px;
}

div#region ul{
	margin:20px 0;
}

div#region ul li{
	list-style-type:circle;
	list-style-position:inside;
	margin-bottom:5px;
}

/* Contact */

div#contact ul li, div#address p{
	margin-bottom:5px;
}

div#contact li#byPhone,div#contact li#byPostmail{
	display:inline-block;
}

div#contact li#byPhone{
	float:right;
}

div#infoBoxMail{
	position:absolute;
	z-index:-10;
	top:100px;
	left:50%;
	margin-left:-100px;
	width:200px;
	padding:20px;
    border:1px solid #efe6d9;
	background-color:#f3ede5;
	cursor:pointer;
}

div#infoBoxMail p{
	text-align:center;
	font-size:0.8em;
	font-style:italic;
}

/* Col B */

div#colB{
    overflow:auto;
    min-height:350px;
	width:217px;
    border-top:1px solid #c3b7a5;
    border-bottom:1px solid #c3b7a5;
    border-right:1px solid #c3b7a5;
    padding:50px 15px;
	float:right;
}

/* Menu */

ul#menu{
    width:150px;
    margin:auto;
    vertical-align:middle;
    margin-top:50px;
}

ul#menu li{
    padding:5px 0 5px 10px;
    border-bottom:1px dotted #4a4742;    
    border-top:1px dotted #4a4742;    
}

ul#menu li+li{
    border-top:none;
}

/* Footer */

div#footer{
    margin-top:5px;
    width:720px;
}

div#footer p{
	display:inline;
}

ul#languageSelection{
	text-align:right;
	display:inline;
	float:right;
}

ul#languageSelection li{
	display:inline;
}

ul#languageSelection li:after{
	content:" -";
}

ul#languageSelection li+li+li:after{
	content:" ";
}

/* Formulaire */

input, textarea, div#colA div:focus{
	outline:none;
}

form#mailForm ul li{
	margin-bottom:15px;
}

div#contact input[type=text], textarea{
	width:65%;
	float:right;
	-webkit-opacity:0.7;
	-moz-opacity:0.7;
	-o-opacity:0.7;
	opacity:0.7;
}

div#contact input[type=text]:hover, textarea:hover,div#contact input[type=text]:focus, textarea:focus{
	opacity:1;
}

div#contact input[type=submit]{
	clear:both;
	display:block;
	margin:0 auto;
}

div#contact input{
	height:1.5em;
}

div#contact textarea{
	min-height:100px;
	margin-bottom:5px;
}

/* Table */

table{
	width:100%;
	margin-bottom:15px;
}

table tr, td, th{
	border:1px solid #c3b7a5;
	padding:10px;
}

table td{
	text-align:center;
}

/* Typography
-------------------------------*/

html{
    font-size:16px;
    font-family:FreeSerif, Palatino, serif;
}

html, a, input, textarea{
    color:#4a4742;
}

p,a{
	text-shadow:0 1px 0 #eae5de;
}

div#footer p,ul#languageSelection li a{
	font-size:0.8em;
}

div#gite p, div#region p, div#contact,div#tarifs p, div#situation p, div#apropos{
	font-size:0.9em;
	line-height:1.3;
}

div#contact{
	line-height:1;
}

h3{
	font-size:1.2em;
	margin-top:20px;
}

h2{
	font-size:1.8em;
}

a{
    text-decoration:none;
}

a:hover, a:focus, ul#menu li:hover a,ul#menu li:focus a, ul#menu li.selected a{
    outline:none;
    color:black;
}

p strong{
	font-weight:600;
}

ul#menu li:hover, ul#menu li:focus, ul#menu li.selected,ul.descriptifGite li{
	list-style-type:circle;
}

ul#menu li:hover, ul#menu li:focus, div#galeryContent:hover, div#galeryContent:focus{
    cursor:pointer;
}

ul#menu li.selected a:hover, ul#menu li.selected:hover{
	cursor:default;
}

div#apropos a{
	padding-bottom:1px;
	border-bottom:1px dotted #c3b7a5;
}

div#apropos a:hover{
	border-bottom:1px dotted black;
}

div#apropos p{
	margin-bottom:10px;
}

p>abbr:hover{
	cursor:help;
}