/**
 * Template Sedaf Villas du Croise
 * 
 * @author		Nikos - Neoweb www.neoweb.fr
 * @copyright 	08.2009
**/


/* *** COMMONS HTML TAGS */

html, body { 
	width: 100%;
	height: 100%; 
	margin: 0;
	padding: 0;
}
body {
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #3c3a3f;
}
table {	font-size: 1em; }
h1, h2, h3, h4, h5, h6, ol, ul, li, form, fieldset { padding: 0; margin: 0; }

p { margin: 0.5em 0; padding: 0; }

ul li { list-style-type: none; }

a { 		color: #666; font-weight: bold; text-decoration:underline; outline: none; }
a:hover { 	color: #333; text-decoration: none; }

img { border:none; }
hr {  clear: both; height: 1px; border: none; background-color: #CCC; margin: 0.5em 0; padding: 0; }


input, select, textarea, button {
	font: normal 11px Arial, Helvetica, sans-serif;
	padding: 1px;
	border-width: 1px;
}
input[type=checkbox] { vertical-align: baseline; margin:0.1em 0.5em 0 0.2em; }
input[type=radio] { vertical-align: baseline; margin:0.1em 0.5em 0 0.2em; }



/* **** Global styles **** */

#global-content {
	width: 980px;
	margin: 0 auto;
}

.clear, .clr { clear: both; }

.small { font-size:0.95em; }

.bold { font-weight: bold; font-size: 1.1em; }

.red { color: #EA1C30; }
.green { color: #72AD05; }

.border { border: 2px solid #F0EEE8; padding: 1px; }

.message { padding: 0 0 1em 0; font-size:0.95em; font-weight:bold; color: #97BF2A; }

.validate { font-size:1.4em; }



/* **** Tooltip *** */

.tooltip { 
	position: absolute;
	width: 375px;
	left: 0;
	top: 0;
	font-size:0.95em; 
	z-index: 2222;
} 
.tooltip-top { 		height:20px; overflow:hidden; background:url(../images/tooltip.png) no-repeat 0 0; } 
.tooltip-middle {	padding: 0px 5px 5px 45px; background:url(../images/tooltip.png) no-repeat 0 50%; } 
.tooltip-bottom {	height:25px; overflow:hidden; background:url(../images/tooltip.png) no-repeat 0 100%; }



/* **** Standalone page **** */

#standalone .content { padding: 1em 1em 0 1em; overflow: hidden; }
#standalone .content h4 { color: #97BF2A; }
#standalone .app-content #main { background-color:transparent;  }


/* **** Header **** */

#header {
	float: left;
	width: 100%;
	margin: 2em 0 1.5em 0;
}
#header h1 {
	float:left;
	width: 335px;
	height: 35px;
	margin: 0 0 0 0.5em;
	text-indent:-2000px;
	background: url(../images/heading-villas-croise.png) no-repeat 0 0; 
}



/* **** Top menu **** */

#topmenu {
	float: right;
	height: 31px;
	margin: 0 0.8em 0 0;
	line-height: 31px;
	background: url(../images/menu-bkg-left.png) no-repeat 0 0;
}
#topmenu .topmenu-right { 
	float: left;
	height:31px;
	padding:0 1.5em 0 0.5em; 	
	background:url(../images/menu-bkg-right.png) no-repeat 100% 0; 
}
#topmenu ul li { display: inline; }
#topmenu ul li a { 
	display: block;
	float: left;
	padding: 0 0.6em;
	font-weight: bold;
	font-size: 0.95em;
	text-decoration: none;
	color: #FFF;
	background: url(../images/menu-separator.png) no-repeat 100% 50%;
}
#topmenu ul li.last a { padding-right:0; background:none; }
#topmenu ul li a:hover { text-decoration:none; color:#3c3a3f; }



/* **** Main **** */

#main {
	float: left;
	width: 100%;
}

.shadow-l { 	background: url(../images/main-shadow-l.png) repeat-y 0 0; }
.shadow-r {		background: url(../images/main-shadow-r.png) repeat-y 100% 0; }
.shadow-tl { 	background: url(../images/main-shadow-tl.png) no-repeat 0 0; }
.shadow-tr { 	background: url(../images/main-shadow-tr.png) no-repeat 100% 0; }
.shadow-bl { 	background: url(../images/main-shadow-bl.png) no-repeat 0 100%;  }
.shadow-br { 	padding: 4px 10px 18px 10px; background: url(../images/main-shadow-br.png) no-repeat 100% 100%; }



/* *** Bottom **** */

#bottom {
	float: left;
	width: 100%;
	padding: 1em 0;
	margin: 0 0 1em 0;
}


.col-left { 	float:left;	 width: 250px; }
.col-middle { 	float:left;  width: 500px; }
.col-right { 	float:right; width: 200px; }

.app-homepage .col-right { padding: 2em 0 0 0; }
.app-othersprograms .col-middle { width: 650px; }
.app-locationplan .col-right, .app-floorplan .col-right, .app-overview .col-right, .app-content .col-right { width: 540px; padding: 2em 0 0 0; }

a#logo {
	display: block;
	float: left;
	width: 165px;
	height: 70px;
	margin: 1.5em 0 0 1.5em;
	text-indent: -2000px;
	text-decoration: none;
	background: url(../images/logo-sedaf.png) no-repeat 0 0;	
}
a#logo:hover { text-decoration: none; }


h2.cphrase {
	width: 440px;
	height: 75px;	
	text-indent: -2000px;
	background: url(../images/cphrase-modernite-confort.png) no-repeat 0 0;
}



/* **** Content **** */

.content { padding: 1em; }
.content p {}
.content ul { padding: 0.8em 0 0 1em; }
.content ul li { padding: 0.2em 0 0.2em 2em; background: url(../images/icon-bullet.png) no-repeat 0 3px; font-weight: bold; }
.content ul li p { margin: 0; }

h2.heading { font-size:2.5em; font-weight:bold; margin:0 0 0.5em 0; color: #97BF2A; }

.content .col-left { width: 38%; }
.content .col-right { width: 60%; }


h3.head-villascroise {
	width: 150px;
	height: 25px;
	margin: 0 0 1em 0;
	text-indent:-2000px;
	background: url(../images/heading-villas-croise-small.png) no-repeat 0 0; 
}

.gmap { margin: 1em 0 0 0; border:1px solid #D8D8D8; }

.app-overview #main, .app-locationplan #main, .app-othersprograms #main { background-color:#F0EEE8;  }

 

/* **** Espace de vente **** */

.content .thumbs img.border { margin: 1em 0 0 0;  }
.content .address {  padding-bottom: 2em; }
.content .address p.bold { margin-top: 3em;  }




/* **** Others programs **** */

#othersprograms h2.heading { font-size:1.5em; font-weight:bold; margin:0 0 1em 0; color: #97BF2A; }

#othersprograms .col-left { 	width:260px; height:380px; padding: 20px; position:relative; z-index:100; }
#othersprograms .col-middle { 	width:515px; position:relative; z-index:90; }
#othersprograms .col-right { 	width:136px; height: 420px; }

#othersprograms .col-middle .box-br { 	height:399px; }

#othersprograms .box-tl { background: #FFF url(../images/box-white-tl.gif) no-repeat 0 0; }
#othersprograms .box-tr { background: url(../images/box-white-tr.gif) no-repeat 100% 0; }
#othersprograms .box-bl { background: url(../images/box-white-bl.gif) no-repeat 0 100%; }
#othersprograms .box-br { padding: 10px; background: url(../images/box-white-br.gif) no-repeat 100% 100%; }

#othersprograms ul { }
#othersprograms ul li { position: relative; margin: 0 0 8px 0; }
#othersprograms ul li span.letterbox {
	display: block;
	position: absolute;
	left: -17px;
	top: 8px;
	width: 25px;
	height: 27px;
	margin: 0 0 1em 0;
	text-align: center;
	line-height: 22px;
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	background: url(../images/box-white-letterbox.gif) no-repeat 0 0;
	
}
#othersprograms ul li .thumb { float: left; clear:left; margin: 0 1em 0 0; }
#othersprograms ul li .thumb img { border:2px solid #F0EEE8; }

#othersprograms ul li .text { float: left; }
#othersprograms ul li h4 { color: #333; font-size:1.1em; font-weight: bold; margin:0; }
#othersprograms ul li span.accroche { color:#72AD05; font-weight: bold; font-size:0.95em;  }

#othersprograms ul li .details { visibility: hidden; height:0; }
#othersprograms ul li:hover .details { visibility:visible; height:auto; }

#othersprograms a.link {
	display: block;
	color: #3c3a3f;
	font-weight: normal;
	font-size: 0.95em;
	text-decoration: none;
}
#othersprograms a.link:hover { text-decoration: none; color:#000; }

#othersprograms .details h4 { color:#72AD05; margin-bottom:0.5em; }
#othersprograms .details ul { margin:0.5em 0 0 1.5em; padding:0; }
#othersprograms .details ul li { margin:0; padding:0; list-style-type:disc; list-style-position:inside; }
#othersprograms .details img { float: none !important; border:2px solid #F0EEE8;  }

#othersprograms .details { top: -65px; left: 225px; }




/* **** Locations list **** */

#locationslist { padding: 1em; }
#locationslist h4 { 
	height: 26px;
	line-height: 26px;
	padding: 0 0 0 2.5em;
	font-size: 1em;
	background: url(../images/button-toggle.gif) no-repeat 0 0;
	cursor: pointer;
}
#locationslist h4.open { 
	background-position: 0 -26px;
}
#locationslist #list { height: 120px; padding: 0 0 0 4em; }
#locationslist ul { margin: 0.4em 0; padding: 0; float: left; width: 885px; }
#locationslist li { display: inline; float:left; padding: 0 0.5em; margin: 0; font-size: 0.85em; border-left: 1px solid #9C9A9F;  }
#locationslist li.title { 
	display: block; 
	float: left; 
	width: 110px;
	margin-right: 2em;
	padding: 0; 
	font-weight: bold; 
	font-size: 1em; 	 
	color: #58AB25; 
	border: none;
	text-align: right;
}
#locationslist li a { clear: left; text-decoration: none; color: #3C3A3F; }
#locationslist li a:hover { text-decoration: none; color: #000; }




/* **** Forms **** */

.forms { width: 65%; margin: 0 auto; }
.forms .form-spacer { clear:both; height: 10px; margin: 0; }


.inputfield-l, .inputfield-r { float: left; height: 25px; }
.inputfield-l { 	clear: both; position: relative; background: url(../images/form-input-left.png) no-repeat 0 0; }
.inputfield-r { 	padding: 0 0 0 10px; width:312px; background: url(../images/form-input-right.png) no-repeat 100% 0;  }


div.required { background: url(../images/form-input-require.png) no-repeat 0 0; }
input.red {}
span.errorMessage { 
	position: absolute;
	width: 160px;
	right: -170px;
	top: 0;
	padding: 5px;
	color: #EA1C30;
	font-weight: normal;
	font-size: 9px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.inputfield-tl, .inputfield-tr, .inputfield-bl, .inputfield-br { float:left; }
.inputfield-tl { 	clear: both; background: url(../images/form-textarea-tl.png) no-repeat 0 0; }
.inputfield-tr { 	background: url(../images/form-textarea-tr.png) no-repeat 100% 0; }
.inputfield-bl { 	background: url(../images/form-textarea-bl.png) no-repeat 0 100%; }
.inputfield-br { 	padding: 0.8em; background: url(../images/form-textarea-br.png) no-repeat 100% 100%; }

label.input-label { display: block; width:100%; font-weight: bold; color: #3c3a3f; }
input.input-field, select.input-field, textarea.input-field { color:#666; border:none; background:none; }


.inputfield-l label { 
	float: left;
	width: 100px;
	height: 25px;
	line-height: 23px;
	background: url(../images/form-input-separator.png) no-repeat 100% 4px; 
}
.inputfield-l select.input-field { margin:2px 0 0 5px; }
.inputfield-l input.input-field { margin:3px 0 0 5px; }



#booking .forms { width:60%; }
#booking select#biens { width: 190px; }

#fieldstatus .inputfield-r { width: 160px; }
#fieldphone .inputfield-r, #fieldemail .inputfield-r { width: 215px; }

input#sendrequest {
	float: right;
	width: 183px;
	height: 25px;
	margin: 1.5em 0;
	border: none;
	overflow: hidden;
	line-height: 100px;
	text-indent: -2000px;
	cursor: pointer;
	background: url(../images/button-send-request.png) no-repeat 0 0;	
}
input#sendbooking {
	width: 95px;
	height: 25px;
	margin: 1.5em 0;
	border: none;
	overflow: hidden;
	line-height: 100px;
	text-indent: -2000px;
	cursor: pointer;
	background: url(../images/button-validate.png) no-repeat 0 0;	
}


/* **** Shortcuts **** */

#shortcuts { float: left; width: 100%; margin: 1.5em 0 0 0; }
#shortcuts ul li, #shortcuts ul li a, #shortcuts ul li a span { 
	display: block;
	float: left;
	height: 66px; 
}
#shortcuts ul li { background: url(../images/button-home-left.png) no-repeat 0 0; }
#shortcuts ul li a {
	font-size: 0.95em; 
	font-weight: bold;
	color: #3c3a3f;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	outline: none;
}
#shortcuts ul li a:hover { text-decoration: none; color: #97BF2A;  }

#shortcuts ul li.button-video a { 	background: url(../images/button-home-video.png) no-repeat 50% 0;   }
#shortcuts ul li.button-apparts a { background: url(../images/button-home-apparts.png) no-repeat 50% 0;   }
#shortcuts ul li.button-present a { background: url(../images/button-home-present.png) no-repeat 50% 0;   }

#shortcuts ul li a span {
	height: 10px;
	padding: 45px 15px 15px 15px;
	background: url(../images/button-home-right.png) no-repeat 100% 0;
}



/* **** Big Buttons **** */

a.button-contact,a.button-espacevente, a.button-interest {
	display: block;
	float: left;
	height: 45px;
	margin: 0.5em;
	text-decoration: none;
	text-indent: -2000px;
	outline: none;
}
a.button-contact { 		width:173px; background:url(../images/button-contact.png) no-repeat 0 0; }
a.button-espacevente { 	width:173px; background:url(../images/button-espace-vente.png) no-repeat 0 0; }
a.button-interest { 	width:153px; background:url(../images/button-interest.png) no-repeat 0 0; }




.separator {
	clear: both;
	height: 20px;
	margin: 0 0 1em 0;
	overflow: hidden;
	background: url(../images/footer-shadow.png) no-repeat 50% 0;
}



#footer {
	color: #BEBDBF;
	font-size: 0.95em;
	text-align: center;
}
#footer a { color: #BEBDBF; text-decoration: none; }
#footer a:hover { color: #999; text-decoration: underline; }


.flashplayer { text-align: center; padding: 2em 0; }
.flashplayer a {
	padding: 3px 0 5px 28px;
	text-decoration: none;
	color: #BEBDBF;
	font-size: 11px;
	font-weight: normal;
	background: url(../images/button-get-flashplayer.png) no-repeat 0 0;	
}
.flashplayer a:hover { color: #666; background-position: 0 -22px; }