/*
 * Project style sheet.
 *
 * @package    vanilla
 * @subpackage css
 * @author     Loops <evrard at h2a dot lu>
 * @version    SVN: $Id: styles.css 38 2014-08-22 15:38:29Z loops $
 */

 /*** LAYOUT -------------------- ***/

/** container **/
.container { position: relative; width: 1200px; margin: 0 auto; padding-top: 40px;}


    
    /** 01 - header **/
    #mainheader { }

      /* logo */
      .logo {}
        .logo > img {}

      /* coordonnes */
      #coordonnees_tb { clear: left; }

          #coordonnees { display: table; width: 100%; }
            #coordonnees > div:first-child { padding-top: 35px;  }
            #coordonnees > div + div { padding-top: 40px;  }
            #coordonnees > div { display: table; width: 100%;  }

              #coordonnees h3,
              #coordonnees p { display: table-cell; }

              #coordonnees h3 { width: 40%; text-align: right; color: #fff; font-weight: 300; text-transform: uppercase; padding-right: 24px; }
              #coordonnees p {  border-left: 1px solid #b6afa1; padding-left: 24px; }
                #coordonnees p span {  font-size: 18px; }


    /* 02 - content */
    main {} 

      /* propriétés idnentiques */
      #mainContent,
      #services { padding: 60px 80px 0 80px; width: 100%; vertical-align: middle; }

      #mainContent * { color: #666; } 
      #services {} 
        #services h2 { color: #fff; }


    /** footer **/
    #mainfooter { margin-bottom: 40px; text-align: right; }
            
      /* signature */
      #mainfootersignature { padding-right: 24px; }
      


/* CLASS */
/*-------------------------------------*/

  /* color */
  .clBrown1 { background-color: #796d55; }
  .clBrown2 { background-color: #978c78; }
  .clBrown3 { background-color: #a49987; }
  .clBrown4 { background-color: #b0a796; }
  .clBrown5 { background-color: #beb6a9; }
  .clBrown6 { background-color: #ccc6ba; }
  .clWhite { background-color: #ffffff; }

  /* radius */
  .borderRadius{ border-radius: 8px; }

  .marginBottom { margin-bottom: 20px; }

  /* height */
  .height_130 { height: 130px; overflow: hidden; }
  .height_280 { height: 280px; overflow: hidden; }
  .height_430 { height: 430px; overflow: hidden; }
  .height_580 { height: 580px; overflow: hidden; }

  /* float */
  .floatRight { float: right; }

  /* box */
  .box { box-sizing: border-box; }

  /* display */
  .block { display: block; }
  .table { display: table; width: 100%; }
  .tableCell { display: table-cell; }

  /*  align */
  .vAlign { vertical-align: middle; }

  /* padding inside box */
  .padding10px { padding: 10px; }

  /* check list */
  .checkList { padding: 0; }
    .checkList li { position: relative; padding: 8px 0 8px 24px; list-style: none; line-height: 16px; }
    .checkList li::before { content: ''; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; background: url('../images/icon-checklist.png') no-repeat; }
    .checkList.first { padding-right: 40px; }

  /* thisLink */
  .thisLink { transition: all 0.3s ease; position: relative; padding-left: 70px; font-size: 14px; font-weight: 400; line-height: 19px; text-transform: uppercase; }
  .thisLink:link, .thisLink:visited { text-decoration:  none; }
  .thisLink:hover, .thisLink:active, .thisLink:focus { background-color: #978C78; }
    .thisLink::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 100%; }

    .linkPrice            { background: #796D55 url('../images/icon-price.png') 10% center no-repeat; }  
    .linkLift             { background: #796D55 url('../images/icon-lift.png') 10% center no-repeat; }  
    .linFacebook          { background: #ffffff url('../images/icon-facebook.png') 10% 42px no-repeat; color: #796d55; }  
    .linFacebook:hover    { background-color: #e6e3dd; }  



/*** MEDIA QUERIES ------------- ***/

/* these media queries are just samples */
/* use appropriate queries to fit the design */
/* !!! DO NOT FORGOT TO APPLY DEFAULT STYLES FOR 960px SCREEN (IE8) !!! */
   

@media (min-width: 320px) and (max-width: 640px) {
    
    .container { width: 300px; }
    header .height_280 { height: 140px; }

    #coordonnees > div:first-child { padding-top: 20px; }
    #coordonnees > div + div { padding-top: 10px;  }
    #coordonnees {}
        #coordonnees h3,
        #coordonnees p { display: block;  text-align: center; padding: 0; width: auto; }



    #mainContent,
    #services { padding: 20px 20px 0 20px; width: 100%; vertical-align: middle; }


    /* height */
    .height_280 { height: auto; }
    .height_430 { height: auto; }
    .height_580 { height: auto; }

    .hide_mb { display: none; }
} 

@media (min-width: 640px) and (max-width: 960px) {
    
    .container { width: 600px; }
    
    .height_580 { height: auto; }

} 

@media (min-width: 960px) and (max-width: 1200px) {

    .container { width: 960px; }

    .logo {}
        .logo > img { margin-left: -30px; }

    .thisLink { padding-left: 55px; } 

    #mainContent,
    #services { padding: 40px 50px 0 50px; width: 100%; vertical-align: middle; }

} 



    

/*** CSS HACKS ----------------- ***/
/* last update 2014-06-03 */

/* Firefox 2+ */
x:-moz-any-link, .selector { property: value; }
/* Opera 14+, Safari, Chrome, Android */
.selector:not(*:root) { property: value; }
/* Chrome 29+, Opera 16+ */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector { property: value; } }
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { property: value; } }
/* Safari 5+/6-, Chrome 24- */
::x, .selector { property: value; }
/* Opera 9.5+/14- */
x:-o-prefocus, .selector { property: value; }
/* IE 11/10 */
@media all and (-ms-high-contrast:none) { .selector { property: value; } }
/* IE 11 */
*::-ms-backdrop, .selector { property: value; }
/* IE 9 (html specific) */
html.ie9 .selector { property: value; }
/* IE 6-10 */
.selector { property: value\9; } 
/* more hacks at http://browserhacks.com