/*  -------------------------------------------------------------
    * Filename:         style.css
    * Version:          1.6
-------------------------------------------------------------- */

/*  -------------------------------------------------------------
    1. Main layout
-------------------------------------------------------------- */
#container{width: 996px; min-height: 100%; height: auto !important; height: 100%;}
    #header{height: 325px;}
    #content{width: 996px; padding: 0 0 27px 0; }
        #left-outer{float: left; width: 350px;}
        #left-inner{float: left; width: 280px; padding: 0 20px 0 50px;}
        #right-outer{float: left; width: 646px;}
        #right-inner{float: left; width: 596px; padding: 0 50px 0 0; text-align: justify;}
#footer{width: 996px;}

/*  -------------------------------------------------------------
    2. Modules
-------------------------------------------------------------- */
    /*  MDM
    -------------------------------------------------------------- */
#mdm{ clear: both; float: left; width: 280px; height: 222px; background: url(../images/charte/mdm-bg.jpg) no-repeat left top; padding: 45px 0 0 0; margin: 0 0 20px 0; border-bottom: 1px solid #78487E; position: relative; }

ul#mdm-menu{ float: left; width: 280px; height: 40px; background: url(../images/charte/mdm-menu-bg.jpg) no-repeat left top; }
ul.mdm-menu1{ background-image: url(../images/charte/mdm-menu1-bg.jpg) !important; }
ul.mdm-menu2{ background-image: url(../images/charte/mdm-menu2-bg.jpg) !important; }
ul.mdm-menu3{ background-image: url(../images/charte/mdm-menu3-bg.jpg) !important; }
ul.mdm-menu4{ background-image: url(../images/charte/mdm-menu4-bg.jpg) !important; }
ul.mdm-menu5{ background-image: url(../images/charte/mdm-menu5-bg.jpg) !important; }

ul#mdm-menu li{ display: inline; }
ul#mdm-menu li a{ float: left; height: 40px; display: block; text-indent: -9999px; }
ul#mdm-menu li a:hover, ul#mdm-menu li a.active{ background-position: left bottom !important; }
ul#mdm-menu li a.btn1{ background: url(../images/charte/mdm-menu-btn1.jpg) no-repeat left top; width: 38px; margin-right: 14px; }
ul#mdm-menu li a.btn2{ background: url(../images/charte/mdm-menu-btn2.jpg) no-repeat left top; width: 46px; margin-right: 12px; }
ul#mdm-menu li a.btn3{ background: url(../images/charte/mdm-menu-btn3.jpg) no-repeat left top; width: 51px; margin-right: 10px; }
ul#mdm-menu li a.btn4{ background: url(../images/charte/mdm-menu-btn4.jpg) no-repeat left top; width: 55px; margin-right: 10px; }
ul#mdm-menu li a.btn5{ background: url(../images/charte/mdm-menu-btn5.jpg) no-repeat left top; width: 44px; }

.mdm-box{ float: left; width: 280px; height: 165px; padding: 17px 0 0 0; font-size: 11px; line-height: 17px; text-align: justify; }
.mdm-box .thumb{ float: left; margin: 5px 10px 0 0; }

.mdm-details-btn{ /*background: url(../images/charte/mdm-details-btn-bg.jpg) no-repeat left top; width: 110px; height: 65px; display: block; */ position: absolute; bottom: 0; right: 0; }
.mdm-details-btn:hover{ background-position: left bottom; }

/*  Coordonnees
-------------------------------------------------------------- */
#coordonnees{ clear: both; float: left; width: 280px; height: 259px; background: url(../images/charte/coordonnees-bg.jpg) no-repeat left top; padding: 0 0 20px 0; margin: 0 0 18px 0; border-bottom: 1px solid #78487E; position: relative; }
#coordonnees .inner{ padding: 80px 0 0 20px; line-height: 17px; }

.plan-details-btn{ background: url(../images/charte/plan-details-btn-bg.jpg) no-repeat left top; width: 112px; height: 70px; position: absolute; right: 1px; bottom: 25px; }
.plan-details-btn:hover{ background-position: left bottom; }

/*  Newsletter
-------------------------------------------------------------- */
#newsletter{ clear: both; float: left; width: 280px; height: 37px; background: url(../images/charte/newsletter-bg.jpg) no-repeat left top; padding: 37px 0 0 0; position: relative; }
#newsletter #newsletter-email{ width: 235px; font-size: 11px; }
#newsletter #newsletter-ok-btn-container{ float: left; overflow: hidden; width: 66px; height: 40px; display: block; position: absolute; right: 0; bottom: 0px;}
#newsletter #newsletter-ok-btn{ position: relative; width: 66px; height: 80px; display: block; background: url(../images/charte/newsletter-btn-bg.png) no-repeat left top; }

/*  -------------------------------------------------------------
    3. Header elements
-------------------------------------------------------------- */

/*  -------------------------------------------------------------
    4. Content elements
-------------------------------------------------------------- */
img             { vertical-align: bottom; }

/*  Titles
-------------------------------------------------------------- */
#page-title     { float: left; width: 596px; border-bottom: 1px solid #634666; margin: 0 0 20px 0; padding: 0 0 15px 0; }

/*  Separators
-------------------------------------------------------------- */
.separator      { clear: both; overflow: hidden; display: block; line-height: 0; font-size: 0; }
.hr1            { background: #634666; margin: 16px 0; height: 1px; }

/*  Lists
-------------------------------------------------------------- */
.list1, .list2  { float: left; padding: 9px 0 0 12px; text-align: left; }
.list1 li       { padding: 0 0 0 18px; background: url(../images/charte/bullet1.gif) no-repeat 0px 7px; }
.list2 li       { padding: 0 0 0 18px; background: url(../images/charte/bullet2.gif) no-repeat 0px 7px; color: #1a051c; }
ul.inline li    { float: left; display: inline; }

/*  Thumbnails
-------------------------------------------------------------- */
.thumb1         { display: block; padding: 2px; border: 1px solid #FFFFFF; background: #1E3853; }
a.thumb1:hover  { border: 1px solid #FFFFFF; background: #FFFFFF; }
.image-right    { float: right; margin: 5px 0 0 20px; }
.image-left     { float: left; margin: 4px 19px 0 0; }

/*  Pannels
-------------------------------------------------------------- */
.pannel1        { float: left; width: 556px; height: 153px; padding: 16px 20px; margin: 3px 0 0 0; background: url(../images/charte/pannel1-bg.jpg) no-repeat left top; color: #FFFFFF; }
.pannel2        { float: left; width: 357px; height: 55px; padding: 16px 20px; background: url(../images/charte/pannel2-bg.jpg) no-repeat left top; color: #1a051c; }

/*  -------------------------------------------------------------
    5. Footer elements
-------------------------------------------------------------- */
#footer{text-align: left; height: 100px; font-size: 11px; line-height: 16px;}
#footer #footer-left{float: left; width: 200px; padding: 40px 0 0 51px;}
#footer #footer-right{float: left; width: 528px; padding: 40px 217px 0 0; text-align: right;}
#footer .copyright{clear: both; line-height: 18px;}
#footer .client{color: #e59feb;}
#footer .client a:link, #footer .client a:visited{color: #e59feb; text-decoration: none;}
#footer .client a:hover, #footer .client a:active{color: #e59feb; text-decoration: underline;}
#footer .mentions{}
#footer .mentions a:link, #footer .mentions a:visited{color: #e59feb; text-decoration: none;}
#footer .mentions a:hover, #footer .mentions a:active{color: #e59feb; text-decoration: underline;}

/*  -------------------------------------------------------------
    6. Menus
-------------------------------------------------------------- */
#menu2 ul{float: right;}
#menu2 ul li{float: left; display: inline; color: #f7a7fe;}
#menu2 ul li a:link, #menu2 ul li a:visited{color: #f7a7fe; text-decoration: none;}
#menu2 ul li a:hover, #menu2 ul li a:active{color: #ffffff; text-decoration: underline;}

/*  -------------------------------------------------------------
    7. Pages
-------------------------------------------------------------- */
/*  Contact
-------------------------------------------------------------- */
#frmContact                 { width: 596px; }
#frmContact .grid-1         { float: left; width: 288px; padding: 0 20px 0 0; }
#frmContact .grid-last      { padding-right: 0; }
#frmContact .grid-1 label   { float: left; width: 90px; padding: 0 10px 0 0; }
#frmContact .grid-1 input   { width: 174px; }
#frmContact .grid-1 textarea{ width: 174px; height: 44px; }

#frmContact .grid-2         { float: left; width: 596px; }
#frmContact .grid-2 label   { float: left; width: 90px; padding: 0 10px 0 0; }
#frmContact .grid-2 textarea{ width: 482px; height: 60px; }