/*
  Magister-France.com Main CSS
  ® 2011 MAGISTER
*/

@import url(./reset.css);
@import url(./assistance.css);
@import url(./coolbuttons.css);

body{
  background-color: #AFBFCE;
  color: black;
  width: 100%;
  font-family: Arial;
}

h1 {
  width: auto;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding-top: 36px;
  color: #999;
}
h2 {
  font-size: 28px;
  font-weight: bold;
  color: #535353;
  margin-top: 20px;
}
h3{
  color: #2A5A2A;
  font-weight: bold;
  font-size: 16px;
}

big{
  font-size: 14px;
  font-weight: bold;
  color: #444444;
}

img{
  vertical-align: middle;
  
}

/* ------------------------------------------------------------ */
/* ----                 HEADER : Entete                    ---- */
/* ------------------------------------------------------------ */


#header{
  margin: 0 auto;
  width:954px;
  height:150px;
  background: url(../images/bg_top.jpg) top no-repeat;  
}

#magister_logo{
  margin-top: 0px;
  margin-left: 55px;
  width:150px;
  height:98px;
  background: url(../images/magister_logo2.png) top no-repeat;
}

#header_left{
  float:left;
  margin-left: 35px;
  padding-top: 0px;
  width: 200px;
}

#magister_book{
  background: url(../images/livre.jpg) right no-repeat;
  width: 181px;
  height: 120px;
  position: absolute;
  right: 102px;
  top: 42px;
}

#header_right{ 
  font-size: 12px;
  color: #666;
  text-align: center;
  float:right;
  margin-top: 45px;
  margin-right: 35px;
}

#header_right span {
  display: block;
  padding-top: 12px;
  font-size: 24px;
}

/* ------------------------------------------------------------ */
/* ----              FOOTER : Pied de Page                 ---- */
/* ------------------------------------------------------------ */

#footer{
  font-size: 12px;
  margin: 0 auto;
  width:954px;
  height:200px;
  background: url(../images/bg_bottom2.gif) top no-repeat;
  color: white;
}

#footer a:hover { color: #AEE863; }
.footer-bloc a { font-size: 12px; color: white; }

.footer-bloc {
  padding: 10px;
  float: left;
  width: 253px;
  margin-left: 27px;
  height: 137px;
}

.footer-copy {
  color: white;
  font-size: 12px;
  width: 954px;
  text-align: center;
  clear: both;
}

.footer-copy a { color: #AAAAAA; }

.footer-bloc-title { margin-bottom: 6px; }

.footer-bloc-title.contact { color: #DE8832; }
.footer-bloc-title.links { color: #AEE863; }
.footer-bloc-title.services { color: #63CAE8; }

.footer-service { margin-bottom: 6px; }
.footer-link { color: #AAAAAA !important; }
.footer-link:hover { color: #AEE863 !important; }

/* ------------------------------------------------------------ */
/* ----                MAIN : Principal                    ---- */
/* ------------------------------------------------------------ */

#main_content{
  margin: 0 auto;
  width:954px;
  background: url(../images/bg_content.gif) top repeat-y;
}

#main_text {
  font-size: 12px;
  margin: 15px auto auto 50px;
  width:855px;
}

.text_magister {
  font-weight: bold;
  color: #666;
}

/* ------------------------------------------------------------ */
/* ----                MENU DE NAVIGATION                  ---- */
/* ------------------------------------------------------------ */

#nav_ul{
  position: relative;
  top:6px;
  left:27px;
  height:38px;
  width:901px;
  background: url(../images/bg_menu.gif) no-repeat;
}

.deco {
  background: url(../images/bg_menu_connexion.gif) no-repeat !important;
}

#nav_ul li{
  padding: 5px 30px 0 30px;
  float:left;
  height: 18px;
}

#nav_ul li a{
  font-size: 14px;
  color: white;
  text-decoration: none;
  color:#FFFFFF;
  font-variant:small-caps;
  font-weight:bold;
  text-decoration:none;  
}

#nav_ul li a:hover{
  text-decoration: none;
  border-bottom:5px solid #67B869;
}

#nav_deconnexion{
  padding: 0px 20px 0 !important;
  left: 690px;
  position: absolute;
  display: block;
}

#nav_deconnexion span.etab {
  color: #fff !important;
  font-weight: bold;
  font-size: 10px;
  color: #fff;
}
#nav_deconnexion a {
  color: #F0F0F0 !important;
  font-variant: normal !important;
  font-weight: normal !important;
  font-size: 10px !important;
  display: block;
}

#nav_deconnexion a:hover {
  color: #67B869 !important;
  border: none !important;
}
/* ------------------------------------------------------------ */
/* ----                     BANNIERE                       ---- */
/* ------------------------------------------------------------ */

#bannerContainerCover { cursor: pointer; }

#banner{
  margin-top: 10px;
  margin-left: 27px;
  /*border-top: solid 1px #bbb;*/
  border-bottom: solid 1px #444;
  width: 901px;
}

#banner a{
  padding: 15px 0;
  margin: 0;
  border: 0;
  display: block;
}

#shadow-menu,
#shadow-banner {
  width: 901px;
  height: 14px;
  background: url('../images/bg_shadow.png') no-repeat;
  position: absolute;  
  margin-left: 27px;
  z-index: 10;
}

#shadow-menu { top: 188px; }
#shadow-banner { top: 398px; }


.titre_page{  
  font-size: 28px;
  font-weight: bold;
  color: #535353;
  margin-top: 20px;
}

.titre_page img{
  margin-right: 5px;
  vertical-align: middle;
}

.titre_page .gris{
  font-size: 16px;
  color: #888888;
}

.titre_page.vert{
  color: #2A5A2A;
}

.slogan{
  font-size: 18px;
  color: #888888;
}

/* ------------------------------------------------------------ */
/* ----                     ACCUEIL 1                      ---- */
/* ------------------------------------------------------------ */
div#accueil_gamme {
  position: relative;
  background: url(../images/gamme.jpg) no-repeat;
  width: 561px;
  height: 282px;
  padding: 30px 0 0 20px;
}

a#accueil_lien_gc { position: absolute; left: 350px; top: 30px; }
a#accueil_lien_vs { position: absolute; left: 317px; top: 97px; }
a#accueil_lien_ga { position: absolute; left: 290px; top: 60px; }

/* ------------------------------------------------------------ */
/* ----                     ACCUEIL 2                      ---- */
/* ------------------------------------------------------------ */
.panneau {
  float: left;
  background: url('../images/bg_panneau.png');
  width: 262px;
  height: 396px;
  margin-right: 22px;
}
.panneau .texte {
  padding: 20px 10px 0 10px;
  height: 200px;
}

.panneau .titre {
  font-weight: bold;
  color: #333;
  margin: 3px 0 0 10px;
  text-shadow: white 1px 1px 1px;
}

a{
  text-decoration: none;
  color: #2A5A2A;
}

a:hover{
  text-decoration: underline;
  color: black;
}

a.infolog {
  font-size: 12px;
  margin-right: 40px;
  float: right;
}

a.infolog span {
  float: right;
  margin-top: 5px;
}

a.lexique{
  font-weight: bold;
  border-bottom: 1px dashed #469446;
}

a.lexique:hover{
  text-decoration: none;
  cursor: help;
}

a.home_link:link{
color: #FFFFFF;
font-size: 14px;
font-weight:bold;
text-decoration: none;
}

a.home_link:visited{
color: #FFFFFF;
font-size: 14px;
font-weight:bold;
text-decoration: none;
}

a.home_link:hover{
color: #74BF3D;
font-size: 14px;
font-weight:bold;
text-decoration: none;
}

a.home_link:active{
color: #FFFFFF;
font-size: 14px;
font-weight:bold;
text-decoration: none;
}

.header_date {
  color: #888888;
  font-size: 14px;
  font-family: Arial;
}

ul.mag li {
 display : list-item;
 list-style-image : url(../images/puce.gif);
 margin-bottom: 10px;
}

ul.prod {
  margin-top: 20px;
}
ul.prod li {
 display : list-item;
 list-style-image : url(../images/puce.gif);
 padding-bottom: 14px;
 font-size: 14px
}

.imgproduit{
  float: left;
  width: 330px;
  margin-top: 20px; 
}

.iconesproduit{
  margin-top: 20px;
}

/* ------------------------------------------------------------ */
/* ----              FORMULAIRE DE CONTACT                 ---- */
/* ------------------------------------------------------------ */
  
  form#myform {
    margin-left: 10px;
    padding: 5px;
    width: 855px;
  }
  
  form#myform div {
    clear: both;
    padding: 0;
  }
  
  fieldset {
    font-family:"Helvetica",Sans-Serif;
    line-height:1.0em;
  }
  fieldset#gauche { float: left; border:0; width: 50%; }
  fieldset#droit { float: left; border:0; width: 50%; }
  fieldset#bas { clear: both; border:0; width: 100%; }
  
  legend {
    border-bottom:4px solid #469446;
    padding-bottom: 5px;
    font-size:100%;
    margin-bottom:0.5em;
    color: #666;
  }
  
  label {
    float: left; 
    font-weight:normal;
    padding-top: 3px;
    padding-right:5px;
    text-align:left;
    width: 28%;   
  }
  
  fieldset#gauche label {
    color:#469446;
  }
  fieldset#droit label {
    color: black;
  }
  
  fieldset#gauche input { float: left;  text-align: left; border: 1px solid #CFCFCF; margin-bottom: 4px;}
  fieldset#gauche input.oblig { border: 2px solid #CFAFAF}
  fieldset#droit input  { float: left; width: 30px; text-align: left; border-width: 0px }

  .form_submit {
    margin: 0 auto 0 auto;
    width: 100px;
    padding-top: 15px;
  }
  
  textarea { float: left;  text-align: left; border: 1px solid #CFCFCF; height: 8em;   }
  
  div.GA {
    height: 100px;
    background: url(../images/bg_contact_orange.png) no-repeat;
    padding: 11px !important;
   }
  div.VS {
    height: 100px;
    background: url(../images/bg_contact_rouge.png) no-repeat;
    padding: 11px !important;
  }
  div.GC {
    height: 100px;
    background: url(../images/bg_contact_bleu.png) no-repeat;
    padding: 11px !important;
  }
  #mySubmit { float: none; margin: 0 36%; width: 20%; text-align: center; }

  
/* ------------------------------------------------------------ */
/* ----                       LOGIN                        ---- */
/* ------------------------------------------------------------ */

form#frm_login {
  background: url(../images/login.png) no-repeat;
  width: 320px;
  height: 203px;
  position: relative;
} 

form#frm_login fieldset legend {
  padding: 20px 0 0 20px;
  border-bottom: none;
}

#btn_login{
  position: absolute;
  top: 72px;
  left: 250px;
}

input#password_password {
  position: absolute;
  top: 73px;
  left: 70px;
  padding: 0;
  border-color: white;
  border: none;
  color: #aaa;
  font-size: 14px;
}


/* ------------------------------------------------------------ */
/* ----                     ROUND BOX                      ---- */
/* ------------------------------------------------------------ */

.box div.topleft {
  display: block;
  background: url("../images/box-bg.png") top left no-repeat white;
  padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
  display: block;
  background: url("../images/box-bg.png") top right no-repeat white;
  padding: 2.0em 4.0em 2.0em 2.0em;
  margin: -2.0em 0 0 0;
}

.box div.bottomleft {
  display: block;
  height: 45px;
  margin-top: -2.0em;
  background: url("../images/box-bg.png") bottom left no-repeat white;
}

.box div.bottomright {
  display: block;
  background: url("../images/box-bg.png") bottom right no-repeat white;
  height: 45px;
  margin-left: 3.0em;
}

/* ------------------------------------------------------------ */
/* ----                       BOUTON                       ---- */
/* ------------------------------------------------------------ */

.clear { /* generic container (i.e. div) for floating buttons */
  overflow: hidden;
  width: 100%;
}

a.roundbtn {
  background: transparent url('../images/buttons/bg_button_a.gif') no-repeat scroll top right;
  color: #444;
  display: block;
  float: left;
  font: normal 12px arial, sans-serif;
  height: 24px;
  margin-right: 6px;
  padding-right: 18px; /* sliding doors padding */
  text-decoration: none;
}

a.roundbtn span {
  background: transparent url('../images/buttons/bg_button_span.gif') no-repeat;
  display: block;
  line-height: 14px;
  padding: 5px 0 5px 18px;
}

a.roundbtn:active {
  background-position: bottom right;
  color: #000;
  outline: none; /* hide dotted outline in Firefox */
}

a.roundbtn:active span {
  background-position: bottom left;
  padding: 6px 0 4px 18px; /* push text down 1px */
}