/*
Auteur: Jean-François Cossette
Courriel: jf.cossette@gmail.com
URL: http://www.jfcossette.com
Date: 11 novembre 2009
*/



/* Les Éléments Généraux
--------------------------------------------------------------------------------------- */

@import url("reset.css");

body {background: url(../images/bg.jpg); color: #fcfba6; font: 14px/18px "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;}
#shadow {background: url(../images/bg-shadow.png) repeat-x;}
.left {float: left;}
.right {float: right;}
.clear {clear: both; font-size: 0; height: 0; line-height: 0; margin: 0; padding: 0; visibility: hidden;}



/* Le Container
--------------------------------------------------------------------------------------- */

#page {background: url(../images/bg-page.png) repeat-y; margin: 0 auto; width: 996px;}



/* Les Sections
--------------------------------------------------------------------------------------- */

#header, #villa, #costarica, #info, #tarifs, #dispo, #joindre {padding: 0 0 16px;}
#header {background: url(../images/bg-header.jpg) no-repeat 52px 0; height: 637px; padding: 17px 0 0 0; position: relative;}
#header h3 {color: #fff; font-size: 16px; left: 86px; margin: 0; position: absolute; top: 542px;}
#header h4 {color: #fff; font-size: 16px; left: 86px; margin: 0; position: absolute; top: 560px;}
#header p.message-box {background: url(../images/bg-message.png); left: 86px; margin: 0 auto; padding: 12px; position: absolute; top: 96px;}
#villa img {margin: 0 86px 0;}
#villa p a:link, #villa p a:visited, #header h4 a:link, #header h4 a:visited {background: url(../images/link.png) no-repeat 0 2px; font-size: 16px; padding: 0 0 0 14px;}
#joindre {padding: 0 0 34px;}
#joindre p {float: left;}
#joindre p.clear {float: none;}

/* Menu
------------------------------------- */

.menu {background: url(../images/bg-menu.png) no-repeat; height: 54px; margin: 0 38px 12px; position: relative; width: 920px;}
.menu p, h1 {color: #635532; left: 40px; margin: 0; position: absolute; top: 12px; width: 160px;}
.menu ul {list-style: none; height: 38px; left: 280px; margin: 0; position: absolute; top: 0;}
.menu li {float: left;}
.menu li a {background: url(../images/bg-li.gif) no-repeat; color: #86ab85; display: block; font-style: normal; height: 18px; padding: 11px 10px 9px;}
.menu li a:hover, .menu li a.selected {border-bottom: 4px solid #fff; color: #76c1c7;}
.menu li a.last {cursor: text; padding: 11px 17px 9px;}
.menu li a.last:hover {border-bottom: none;}

/* Liens
------------------------------------- */

a:link, a:visited {color: #fff; font-style: italic;}
a:hover {color: #fcfba6;}
a:active {color: #f00;}

/* Typographie
------------------------------------- */

h2, h3 {color: #fff;}
h2 {font-size: 60px; margin: 0 86px 18px;}
h3 {font-size: 16px; margin: 0 86px 9px;}
h3.slogan {font-size: 22px; margin: 0 86px 12px;}
p {margin: 0 86px 18px;}

/* Listes
------------------------------------- */

ul {list-style: url(../images/bullet.png); margin: 0 0 18px 100px;}

/* Tableaux
------------------------------------- */

table {width: 482px; margin: 0 86px 18px;}
thead {color: #fff;}
tbody tr {border-bottom: 1px solid #fff;}
tbody th, tbody td {padding: 5px 0;}
.duree, .haute {width: 188px;}
.basse {width: 106px;}

/* Formulaires
------------------------------------- */

form {float: right; margin: 0 86px 0 0; width: 440px;}
form div {width: 210px;}
input, textarea {background: transparent; border: 1px solid #fff; color: #fff; font: 14px/14px "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif; padding: 3px;}
input {margin: 0 0 18px 0; width: 202px;}
textarea {height: 100px; margin: 0 0 9px 0; width: 432px;}
label {color: #fff;}
label span {color: #fcfba6;}
button {background: url(../images/link.png) no-repeat 0 4px; border: none; color: #fff; cursor: pointer; font-size: 16px; font-style: italic; padding: 0 0 0 14px;}
button:hover {color: #fcfba6;}

/* Images
------------------------------------- */

img {border: 5px solid #faf7dd;}

/* Iframe
------------------------------------- */

iframe {margin: 0 86px 18px;}



/* Le Footer
--------------------------------------------------------------------------------------- */

#footer {background: url(../images/bg-footer.png) repeat-y; clear: both; color: #413d3a; float: left; padding: 5px 0; width: 996px;}
#footer p {margin: 0;}
#footer .right {margin: 0 72px 0 0;}
#footer .left {margin: 0 0 0 72px;}
#footer a:link, #footer a:visited {color: #8f847c; font-style: normal; }
#footer a:hover {text-decoration: underline;}