/*  =============================================================
    # Style v1.3 (22 may 2009)
============================================================== */

/*  -------------------------------------------------------------
    1. Main layout
-------------------------------------------------------------- */
#intro{ background: url(images/intro/intro-bg.jpg) no-repeat center top; width: 700px; height: 468px; padding: 0 130px; margin: 43px 0 0 0; position: relative; float: left; }
#intro ul{ position: absolute; top: 274px; left: 318px; width: 340px; }
#intro ul li{ text-align: justify; color: #F6B2D9; padding: 0 0 9px 0; font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-weight: normal; font-size: 11px; }

.jaccepte-btn{ background: url(images/intro/jaccepte-btn-bg.jpg) no-repeat left top; float: left; width: 108px; height: 22px; position: absolute; left: 354px; top: 417px; }
.jaccepte-btn:hover{ background-position: left bottom; }

.jequite-btn{ background: url(images/intro/jequite-btn-bg.jpg) no-repeat left top; float: left; width: 149px; height: 22px; position: absolute; left: 500px; top: 417px; }
.jequite-btn:hover{ background-position: left bottom; }


#container{min-height: 100%; height: auto !important; height: 100%; /* +autoHeight */}
#container, #footer{width: 960px;}
#content{margin: 0 auto; width: 960px;}
/*  -------------------------------------------------------------
    2. Header elements
-------------------------------------------------------------- */
#site-header{float: right; width: 770px; height: 325px;}
#diapo1{float: right; width: 190px; height: 452px;}
/*  -------------------------------------------------------------
    3. Content elements
-------------------------------------------------------------- */
#left-outer {float: left; overflow: hidden; width: 190px; min-height: 672px; height: auto !important; height: 675px;}
#left-inner {float: left; width: 190px;}
#right-outer{float: left; overflow: hidden; width: 770px;}
#right-inner{float: left; text-align: justify; width: 770px;}
#middle-outer{float: left; text-align: justify; width: 528px; min-height: 300px; height: auto !important; height: 300px;}
#middle-inner{float: left; text-align: justify; width: 488px; padding: 13px 20px;}
/*  -------------------------------------------------------------
    4. Footer elements
-------------------------------------------------------------- */
#footer .inner{text-align: left;  padding: 43px 0 20px 0;}
#footer, #footer p{ font-size: 10px; line-height: 13px; color: #BA799E; }

#footer .box1 {float: left; width: 200px;}
#footer .box2 {float: left; width: 760px; text-align: right;}
#footer .copyright{text-align: center;}
#footer .client {color: #EC87C1 !important;}
#footer .client a:link, #footer .client a:visited {color: #EC87C1;}
#footer .client a:hover, #footer .client a:active {color: #FFFFFF;}
#footer .mentions {}
#footer .mentions a:link, #footer .mentions a:visited {color: #EC87C1; text-decoration: underline;}
#footer .mentions a:hover, #footer .mentions a:active {color: #FFFFFF; text-decoration: underline;}
#footer .ref {color: #BA799E;}

#footer .intro{text-align: center;}
#footer .intro .box1 {float: left; width: 960px;}
#footer .intro .box1 p{font-size: 10px; color: #BA799E;}
/*  -------------------------------------------------------------
    5. Basic elements
-------------------------------------------------------------- */
.bullet1{ background: url(images/charte/bullet1.jpg) no-repeat left center; padding: 0 0 0 10px; }
#page-title{float: left; width: 528px; height: 55px; padding: 30px 0 0 0;}
#middle-inner p{ margin-bottom: 9px; }
.txt1{ clear: both; background: url(images/charte/txt1-bg.jpg) repeat-y left top; padding: 4px 17px; margin: 3px 0; float: left; }
ul.list1{float: left;}
ul.list1 li{padding: 0 0 0 10px; background: url(images/bullet1.jpg) no-repeat 0 5px;}

.thumb1, a.thumb1:hover{ background-image: url(images/thumb-bg.jpg); background-repeat: no-repeat; width: 92px; height: 92px; }
.thumb1{display: block; padding: 12px 14px 14px 12px; margin: 0 5px 5px 0; background-position: left top;}
a.thumb1:hover{background-position: left bottom;}
.separator1{clear: both; display: block; font-size: 1px; line-height: 1px; overflow: hidden; width: 100%; height: 1px; margin: 10px 0; background-color: #2C5C83;}
.col1{ float: left; width: 239px; padding: 0 10px 0 0; }
.col2{ float: left; width: 239px; }
/*  -------------------------------------------------------------
    Extra
-------------------------------------------------------------- */

#info.outer{float: left; width: 242px; height: 194px;  padding: 30px 0 0 0; background: url(images/charte/coordonnees-outer-bg.jpg) no-repeat left top;}
#info .inner{float: left; width: 242px; height: 194px; background: url(images/charte/coordonnees-bg.jpg) no-repeat left top;}
#info .inner a:link, #info .inner a:visited{color: #FFFFFF;}
#info .inner a:active, #info .inner a:hover{color: #CDE2FF;}

/* ------------------------------------------------------------ */

#newsletter.outer{float: left; width: 242px; padding: 20px 0 0 0; }
#newsletter .inner{float: left; width: 242px;}
#news-form{float: left; width: 242px; }

/* ------------------------------------------------------------ */

#frmContact{ width: 488px; }
#frmContact fieldset span{ float: left; width: 95px; }
#frmContact input.inputText, #frmContact input.inputText-over{ width: 122px; padding: 1px 5px; }
#frmContact .textarea, #frmContact .textarea-over{ width: 122px; height: 62px; padding: 1px 5px; }

#merci-contact{  width: 488px; padding: 20px 0; }
#merci-contact .email{ background: url(images/charte/mail.jpg) no-repeat left top; padding: 0 0 0 50px; }
#merci-contact .back{ background: url(images/charte/back.jpg) no-repeat left top; padding: 13px 0 0 50px; height: 42px; }