@import url(slimbox.css);
@import url(moodalbox.css);

*{
	margin	: 0;
	padding	: 0;
}

body{
	font		: 70% verdana,arial,sans-serif;
	text-align	: center;
	background	: #514638 url('../img/charte/bg.gif') top left repeat-x;
}

img {
	border		: 0;
}

input, select, textarea {
	font		: 100% Verdana,Arial,Sans-serif;
}

.clear {
	clear		: both;
	visibility	: hidden;
}

.hide {
	display		: none;
}

.visible {
	display		: block;
}

a {
	color: #97d228;
	outline: none;
}

a:hover {
	text-decoration: none;
}

/* =================================== */
/* ============ STRUCTURE ============ */
/* =================================== */

div#top {
	text-align	: left;
	width		: 770px;
	margin		: 0 auto;
	height		: 150px;
	background : transparent url('../img/charte/top.jpg') top left no-repeat;
}

div#container {
	background	: #3d3121;
}

div#contenu{
	padding-top	: 10px;
	text-align	: left;
	width		: 770px;
	margin		: 0 auto;
	min-height	: 300px;
}

div#wrapper{
	width	: 770px;
}

div#footer-wrap{
	clear		: left;
	width		: 100%;
	border-top	: 1px solid #586223;
}

div#footer{
	text-align	: left;
	width		: 770px;
	margin		: 0 auto;
	padding: 10px 0;
	color: #867e74;
}


/* =================================== */
/* ============= HEADER ============== */
/* =================================== */

#top {
	position: relative;
}

#top h1 a {
	position:absolute;
	display		: block;
	width		: 250px;
	height		: 140px;
	text-indent	: -3000px;
}

#top h2 a.plagne {
	position:absolute;
	top: 8px;
	left: 672px;
	display		: block;
	width		: 65px;
	height		: 75px;
	text-indent	: -3000px;
}

#top h2 a.paradiski {
	position:absolute;
	top: 90px;
	left: 642px;
	display		: block;
	width		: 125px;
	height		: 45px;
	text-indent	: -3000px;
}

#top h1 img {
	display		: none;
}


/* =================================== */
/* ============== MENU =============== */
/* =================================== */

div#menu {
	position: relative;
	text-align: left;
	margin		: 0 auto;
	width			: 770px;	
	height		: 43px;
}

ul#nav {
	height	: 31px;
	width		: 770px;
	background: transparent url('../img/charte/menu.jpg') top left no-repeat;
}

ul#nav li {
	float		: left;
	list-style	: none;
}

ul#nav li a {
	position	: absolute;
	text-indent	: -3000px;
	text-decoration: none;
/*
	border		: none !important;
	margin		: 0 !important;
*/
}

ul#nav li#nav-appartement a { 
	left: 73px; top: 3px;
	width: 159px; height: 25px;
	background: transparent url('../img/charte/menu.jpg') -73px -3px no-repeat;
}

ul#nav li#nav-reservation a { 
	left: 279px; top: 3px;
	width: 129px; height: 25px;
	background: transparent url('../img/charte/menu.jpg') -279px -3px no-repeat;
}

ul#nav li#nav-laplagne a { 
	left: 455px; top: 3px;
	width: 103px; height: 25px;
	background: transparent url('../img/charte/menu.jpg') -455px -3px no-repeat;
}

ul#nav li#nav-contact a { 
	left: 603px; top: 3px;
	width: 89px; height: 25px;
	background: transparent url('../img/charte/menu.jpg') -603px -3px no-repeat;
}

ul#nav li#nav-appartement a:hover	{ background-position: -73px -34px; }
ul#nav li#nav-reservation a:hover	{ background-position: -279px -34px; }
ul#nav li#nav-laplagne a:hover	{ background-position: -455px -34px; }
ul#nav li#nav-contact a:hover	{ background-position: -603px -34px; }

ul#nav li#nav-appartement a.active		{ background-position: -73px -34px; }
ul#nav li#nav-reservation a.active		{ background-position: -279px -34px; }
ul#nav li#nav-laplagne a.active		{ background-position: -455px -34px; }
ul#nav li#nav-contact a.active		{ background-position: -603px -34px; }




/* =================================== */
/* ============ CONTENT ============== */
/* =================================== */

#content {
	line-height	: 1.5em;
	color			: #fff;
}

#content p {
	margin-top: 5px;
}

#content ul {
	margin		: 0 0 0 20px;
	list-style	: none;
}

#content li {
	padding		: 0 0 0 12px;
	background	: transparent url('../img/charte/li.gif') 0 5px no-repeat;
}

#content h1 {
	width		: 186px;
	height	: 41px;
	text-indent: -3000px;
}

#content h1.appartement {background	: transparent url('../img/charte/h1_appartement.gif') top left no-repeat;}
#content h1.reservation {background	: transparent url('../img/charte/h1_reservation.gif') top left no-repeat;}
#content h1.laplagne{background	: transparent url('../img/charte/h1_laplagne.gif') top left no-repeat;}
#content h1.contact {background	: transparent url('../img/charte/h1_contact.gif') top left no-repeat;}

#content h2 {
	margin-top	: 10px;
	color		: #867e74;
	font-size: 140%;
	font-family: Arial;
}



/* =================================== */
/* ============ PHOTOBOX ============= */
/* =================================== */

#content .portfolio {
	margin	: 20px 1px 0 1px;
}

#content .photoBox {
  float		: right;
  display : inline ;
  text-align	: center ;
  color 		: #3d3121;
  width 		: 192px;
  height    : 160px;
}

#content .portfolio .photoBox {
  float		: left ;
}

#content .photoBox  a{
	text-decoration:none;
	color				: #867e74 ;
}

#content .photoBox img {
	padding	: 1px;
	background: #3d3121;
	border	: 4px solid #fff;
}


/* =================================== */
/* =========== FORMULAIRE ============ */
/* =================================== */

#content #form_box {
	margin-top: 10px;
	width		: 770px;
	float		: left;
}

#content #form_box div {
	height	: 26px;
	padding	: 2px 0 2px 0;
}

#content #form_box div p {
	width		: 120px;
	float		: left;
	margin	: 3px 0;
}

#content #form_box div p.requis {
	padding-left: 5px;
	color		: #97d228;
}

#content #form_box #submitter {
	background: transparent url('../img/charte/btn_envoyer.gif') top left no-repeat;
	width:	171px;
	height: 30px;
	text-indent: -3000px;
	border: 0;
	cursor: pointer;
	margin: 10px 0 10px 120px;
}

input, textarea {
	float		: left;
	color		: #3d3121;
	padding	: 3px;
	border	: 1px solid #867e74;
}

input:focus, textarea:focus, input:hover, textarea:hover {
	border-color: #97d228;
}



/* =================================== */
/* ============ TABLEAUX ============= */
/* =================================== */

#content table {
	margin-top	: 10px;
	border		: 1px solid #97d228;
}

#content table th {
	color		: #3d3121;
	padding		: 4px 3px;
	font-weight	: normal;
	background	: #97d228;
}

#content table td {
	padding-left: 3px;
}

#content table td.mois{
	background	: #514638;
	color			: #fff;
}

#content table td.na {
	font-style: italic;
	color		: #867e74;
}



/* =================================== */
/* ============= CONTACT ============= */
/* =================================== */

div#mb_response {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -120px;
	margin-top: -70px;
	width: 240px;
	height: 110px;
	/*overflow: auto;*/
	background: transparent url('../img/charte/mb_response.gif') top left no-repeat;
	visibility: visible;
	color: #3d3121;
	text-align:center;
	padding-top: 10px;
}


/* =================================== */
/* ============== FOOTER ============= */
/* =================================== */

#footer .box {
	float		: left;
	width		: 192px;
}

#footer .last {
	margin-right: 0;
}

#footer h1 {
	font		: bold 100% verdana,arial,sans-serif;
	margin-bottom : 5px;
}

#footer .box span {
	display: none;
}

#footer a {
	color: #867e74;
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}