/* An example of reasonable styles at the application level which go well with the
  provided sample page templates. Copy this to main.css if you wish. */

/*
**  @author : wimake
*/

/****
* CSS RESET
****/

html,body,span, applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp,strike,strong,sub,sup,tt,var, dd,dl,dt,li,ol,ul, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;line-height:1.3em;font-family:inherit;}

a img,:link img,:visited img{border:0;}
/*table{border-collapse:collapse;border-spacing:0;}*/
ul{list-style:none; }
ol{list-style: decimal inside; }
q:before,q:after, blockquote:before,blockquote:after{content:"";}
strong,h1,h2,h3,h4,h5,h6 {font-weight:bold;}
p {clear: both;}
em{font-style:italic;}
input, textarea, select  {font-size:99%}
* {outline:none;margin: 0; padding: 0}

html, body {
    font: 11px 'Lucida Grande', arial, 'Bitstream Vera Sans', sans-serif; 
    background: #ffff;
    margin: 0;
    padding: 0;
    color: #333;
}

/* LINKS */
a {text-decoration:none; color: #428BC7;}
a:hover {text-decoration:none; color: #000;}
a.active {text-decoration:none; color: #000;}
a.revert {color :#000;}
a.revert:hover {color: #428BC7;}
a.r-underlined {text-decoration: underline; color: #689e08; }
a.r-underlined:hover {text-decoration: none;}
a.black:hover {color:#000;}
a.arrow  {background: url(skin/icon_arrow.png) no-repeat; display: block; padding: 0 0 0 16px; font-size: 11px; font-weight: bold}

/* TEXT ALIGN */
.txtL{text-align:left !important;}
.txtC{text-align:center !important;}
.txtR{text-align:right !important;}
.txtT{vertical-align:top !important;}
.txtM{vertical-align:middle !important;}
.txtB{vertical-align:bottom !important;}

.fix-height { height: 350px; }

/* FLOATS */
.floatL, .float_l {float:left;}
.floatR, .float_r {float:right;}
.clearfl {clear: both;}

/* FIX SIZES AND HEIGHT */
.size1on3 { width:31.2% !important; margin-right: 2%; }

.height-200 { min-height: 200px; }

.spacer20 { clear: both; height: 20px; }
.spacer10 { clear: both; height: 10px; }

/* STRUCTURE */
#container {clear: both; margin: 0 auto; width: 1005px; }

#header { float: left; width: 1000px; margin: 0 auto; border: 1px solid #ccc; padding: 1px; background: #fff }
#header .logo {width: auto; }
#header .baseline { float: left; color: #7d8662; font-size: 12px; padding: 55px 15px 0 15px; }

#visu1 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu2 { background: url(skin/visu_4.jpg) no-repeat; float: left; }
#visu3 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu4 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu5 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu6 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu7 { background: url(skin/visu_3.jpg) no-repeat; float: left; }
#visu8 { background: url(skin/visu_2.jpg) no-repeat; float: left; }
#visu9 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu10 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu11 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu12 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu13 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu14 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu15 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu16 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu17 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu18 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu19 { background: url(skin/visu_1.jpg) no-repeat; float: left; }
#visu20 { background: url(skin/visu_1.jpg) no-repeat; float: left; }


.visu-content { padding: 248px 0 0 15px; width: 780px; height: 46px; white-space: nowrap; overflow: hidden; text-align: right; }
.visu-content h1 { font-size: 16px !important; color: #1c3951 !important; font-weight: bold; text-align: right !important; padding-right: 10px } 

#nav-container { float: left; }

#nav { width: auto; float: left;}
#nav ul { }
#nav ul li { clear: both; background: url(skin/menu_off.png) no-repeat; list-style: none; height: 30px; width: 202px; display: block; font-size: 11px; font-weight: bold; color: #6699cc; margin-top: 3px; }
#nav ul li:hover { background: url(skin/menu_over.png) repeat-x; }
#nav ul li.first { background: url(skin/menu_over.png) repeat-x;}
#nav ul li a { display: block; color: #6699cc; height: 20px; width: 185px; padding: 10px 0 0 20px; }
#nav ul li.current { background: url(skin/menu_over.png) no-repeat;}

#subnav { width:730px; border: 1px solid #eee; background: #FBFCFC; margin-bottom: 10px; }
#subnav a { font-size: 12px; font-weight: bold; color: #428bc7; padding: 5px 15px; display: block; border-right: 1px solid #eee; }
#subnav a:hover { color: #fff; background: #1C3951; }
#subnav .current a { color: #fff; background: #428bc7; }
#subnav ul { float: left; clear: left;}
#subnav ul li {float: left; }

#railway { margin: 5px 0 10px 0; font-weight: bold; font-size: 12px; }
#railway ul { float: left; clear: left; height: 20px;}
#railway ul li {float: left; padding: 0 3px 0 3px; }
#railway ul li a {float: left; font-size: 12px; font-weight: bold; }

#main { width: 100%; min-height: 200px; margin-top: 20px; background: #f8f9fa; }
#main .page { width: auto; margin: 20px 0;}
#main .content {padding: 0 10px ; }

#main ul{clear:both;}
#main ol{clear:both;}

#banner-home { clear: both; border-style: inset; border: 1px solid #ccc; background: url(skin/banner_bg.png); width: 1003px !important; height: 145px; }
#banner-home .media { float:left; margin-left: 0px; width: 265px;}
#banner-home .content { float:right; margin-left: 0px; padding: 15px 20px; width: 650px !important; }
#banner-home h1 { color: #63a4d8; font-size: 22px; }
#banner-home .desc { color: #63a4d8; font-size: 12px; }

#banner { clear: both; border-style: inset; border: 1px solid #ccc; background: url(skin/banner_bg.png);  width: 1003px !important; height: 145px; }
#banner .media { float:left; margin-left: 0px; width: 265px;}
#banner .content { float:left; padding: 10px 20px; width: 650px !important; }
#banner h1 { color: #63a4d8; font-size: 22px; }
#banner .desc { color: #63a4d8; font-size: 12px; }

#banner { color: #63a4d8; font-size: 12px; }

.spacer {width: auto; height: 10px; clear: both;}

#col-left { float: left; width: 725px; margin-right: 10px; }
#col-left .media { margin-top: 20px; }

#col-right { float: left; width: 238px; }
#col-right h2 { padding-bottom: 32px; }  

/* FOOTER */
#footer {clear: both; background: #fbfcfc; width: 980px; margin: 0 auto; border: 1px solid #eee; }
/*
#footer ul {display:block; border-left: 1px solid #333; padding-left: 10px;}
*/
#footer a {color:#666; font-size: 11px !important }
#footer a:hover { color:#000; }
#footer .content { padding: 15px 20px 10px 20px; }
#footer table { }
#footer td { width: 25% }
#footer ul li { list-style: none; }

.copy { text-align: center; padding: 10px 0; color: #666; }

/* BOX */
.box { background: #f8f9fa; float: left; width: 238px; margin-right: 5px; padding: 1px; border: 1px solid #eee; margin-bottom: 10px;  }
.box-last { margin-right: 0; }

.btn { margin: 5px 0 3px 10px; }
.btn a { font-size: 14px; }
.btn1 { background: url(skin/btn2.jpg) no-repeat; width: 197px; height: 28px; text-align: center; padding: 18px 10px; }
.btn2 { background: url(skin/btn2.jpg) no-repeat; width: 197px; height: 43px; text-align: center; padding: 10px 10px; }
.btn3 { background: url(skin/btn3.jpg) no-repeat; width: 197px; height: 65px; text-align: center; padding: 10px 10px; }


/* NEWSLETTER */
#newsletter { width: 170px; height: 40px; margin: 0 0 10px 15px; padding: 5px;}
#newsletter label { float: left; font-weight: bold; }
#newsletter .form { clear: both; }
#newsletter #email_email { width: 120px; }
.ok-btn { float: right; }
.email-btn { background: #428BC7; border:0 none; color:#FFFFFF; height:20px; line-height:1; padding:2px; margin: 5px}
.email-btn:hover { background: #888; }


/* MEA */
.meas { clear: both; margin: 10px 0 }
.meas .last { margin: 0 }
.meas .conseil { background: url(skin/mea_conseil.png) no-repeat ; width: 326px; height: 138px; }
.meas .formation { background: url(skin/mea_formation.png) no-repeat ; width: 326px; height: 138px; }
.meas .contact { background: url(skin/mea_contact.png) no-repeat ; width: 326px; height: 138px; }
.mea { float: left; margin: 0 13px 0 0 }
.mea .title { margin: 15px 15px 0 15px; font-size: 20px; color: #fff; width: 160px; overflow: hidden;}
.mea .title a { color: #fff; }
.mea .title a:hover { color: #fff; }
.mea .text { margin: 0 15px 0 15px; display: block; color: #97aebe; font-size: 9px; width: 160px; overflow: hidden}

/* NEWS */
.news-container { background: #fff; padding: 10px; }
.news h2 { font-size: 12px !important; margin: 20px 0 10px 0; color: #333; }
.news h3 { font-size: 12px !important; margin: 20px 0 10px 0; color: #990000; }
h3.title { font-size: 12px !important; margin: 3px 0 10px 0; color: #990000; }
.news { clear: both; margin: 10px 0; }
.news .date { color: #428bc7; line-height: 20px; }
.news .desc { float: left; color: #333; }
.news .desc-warp { float: left; width: 650px; }
.news .home-media { margin-right: 10px; }
.news .media { margin-left: 10px; float: right;}
.news .more {  line-height: 20px;}
#news ul { list-style:disc; padding: 10px 20px; width: auto;}

/* FORM */
.submit-btn { background: #428BC7; border:0 none; color:#FFFFFF; float:left; height:20px; line-height:1; padding:2px; margin: 5px}
.submit-btn:hover { background: #888; }
.login-btn { margin: 10px 0 0 255px; }
/*textarea {border: 1px solid #999;font: 12px Arial, Helvetica;}
select {border: 1px solid #999;font: 12px Arial, Helvetica;}
*/ 

#form-container .form-row {padding: 5px; text-align: left; border-bottom: 1px solid #eee; }
#form-container label {display: block; padding: 0 1em 3px 0; float: left; text-align: left; width: 12em; color: #333;}
#form-container .error_list { margin-left: 13em; margin-bottom: 0.3em; color: #cc0000;}
#form-container .form_helper { margin-left: 16em; color: #666; font-size: 9px; }

#form-container-login .form-row {padding: 5px 0 0 0; text-align: left}
#form-container-login label {display: block; padding: 0 1em 2px 0; float: left; text-align: left; width: 8em; color: #333;}
#form-container-login .login-input { width: 120px; }
#form-container-login .error_list { margin-left: 9em; margin-bottom: 0.3em; color: #cc0000;}

#form-container .form-row-small {float:left; padding-right: 5px; text-align: left}

#form-container .form-row-small input[type=text] { background: #f1f1f1; border: 1px solid #999;font-size: 12px; color: #507403; padding: 3px; margin-top: 1px;}
#form-container .form-row-small input[type=text]:hover { background: #fafafa; }

.login-input { width: 150px; }

.captcha {width: 100px; padding-left: 13em;}

.error_list span { } 

/* PAGER */
#pager {float: left; margin: 20px 5px 0 0; width: 100%; height: 20px; }
#pager.bottom {margin-top: 8px;}
#pager p {float: right; margin: 0 0 0 5px; padding:0;}
#pager strong {background: #507403; margin-right: 1px; padding: 1px 8px; color: #fff;}
#pager a {background: #fff; margin-right: 1px; padding: 1px 8px; }
#pager a:hover {background: #507403; color: #fff}
#pager span {float: left; margin-right: 10px;font-weight: bold;}

/* BUTTONS */
.buttons { clear: both; margin-top: 10px; margin-bottom: 10px; }
.margin-10 { margin-top: -10px; }
.buttons a:hover { color: #000; }
.button { padding:0.4em 1em 0.4em 20px; position:relative; text-decoration:none; margin: 0 10px 0 0;}
.button-default { padding:0.4em ; position:relative; text-decoration:none; margin: 10px 0 10px 0;}
.buttons span.ui-icon { left:0.2em; margin:-8px 5px 0 0; position:absolute; top:50%; }

.button-submit { padding:0.3em 0.6em 0.3em 20px; position:relative; text-decoration:none; margin: 0 10px 0 0;}
.button-submit span.ui-icon { left:0.2em; margin:-8px 5px 0 -22px; position:absolute; top:50%; }
.button-submit a:hover { color: #000; }


/* ROUNDED IMAGE */
.rounded { display:block; background-color:#fff; overflow:hidden; position:relative }
.rounded_corners { position:absolute }
.rounded_white .rounded_corners { top:0 }
.rounded_large { width:100px; height:100px }
.rounded_large .rounded_image { width:100px; height:100px }
.rounded_large .rounded_corners { left:0 }


#cms { font-size: 12px; color: #333; }
#cms h2 { font-size: 12px !important; margin: 20px 0 10px 0; color: #333; }
#cms h3 { font-size: 12px !important; margin: 20px 0 10px 0; color: #990000; }
#cms a { color: #428BC7; }
#cms a:hover { color: #333; }
#cms ul, #cms ol { clear: none !important; }
#cms ul li { list-style: disc; margin-left: 20px; }


.block-content { padding: 10px !important;}
.ext { background: #fff; padding: 10px; }
.ext ul li { background: url(skin/arrow_small.jpg) left center no-repeat; list-style: none; padding-left: 20px; height: 16px; }