materio-base-d7/sites/all/themes/gui/materiobasetheme/scss/styles.scss

/**
 * Primary Drupal Styles
 * Author: g-u-i.net
 */
//@charset "UTF-8";

@import "../bower_components/foundation/scss/normalize.scss";

@import "../bower_components/foundation/scss/foundation/functions";

// $row-width: rem-calc(1250);
// $total-columns: 12;
// $column-gutter: rem-calc(20);

//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
@import "../bower_components/foundation/scss/foundation/components/global";
@import "../bower_components/foundation/scss/foundation/components/type";
@import "../bower_components/foundation/scss/foundation/components/clearing";
@import "../bower_components/foundation/scss/foundation/components/inline-lists";
@import "../bower_components/foundation/scss/foundation/components/buttons";
@import "../bower_components/foundation/scss/foundation/components/button-groups";
@import "../bower_components/foundation/scss/foundation/components/grid";
// @import "../bower_components/foundation/scss/foundation/components/top-bar";
// @import "../bower_components/foundation/scss/foundation/components/block-grid";


@import "gui.scss";

@import "colors.scss";
@import "fonts.scss";
@import "layout.scss";
@import "../fonts/icon/foundation-icons.css";


@mixin shadowBtn(){
  @include drop-shadow(0, 0, 5px, 0.4);
  @include transition-simply-prefix(box-shadow 0.3s ease-out);
  &:hover, &:focus{
    @include drop-shadow(0, 0, 5px, 0.7);
  }
  &:active{
    @include transition-simply-prefix(box-shadow 0s ease-out);
    @include drop-shadow(0, 0, 5px, 0.4);
  }
}

@mixin shadowTextBtnWhite(){
  cursor:pointer;
  text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
  @include transition-simply-prefix(text-shadow 0.3s ease-out);
  &:hover, &:focus{
    text-shadow:0 0 3px rgba(255, 255, 255, 1);
  }
  &:active{
    @include transition-simply-prefix(text-shadow 0s ease-out);
    text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
  }
}

@mixin shadowTextBtnBlack(){
  cursor:pointer;
  text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
  @include transition-simply-prefix(text-shadow 0.2s ease-out);
  &:hover, &:focus{
    text-shadow:0 0 2px rgba(0, 0, 0, 0.8);
  }
  &:active{
    @include transition-simply-prefix(text-shadow 0s ease-out);
    text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
  }
}

@mixin horihoverswitch(){
  position:relative; z-index:1; background-color:#fff;
  figure{
    position: absolute; top:0; left:0;
    &:first-child{ position:relative; z-index:1; }
  }
}

@mixin layer(){
  position:absolute; width:100%; height:100%; top:0; left:0;
}

.op-visible{
  visibility:visible;
  .csstransitions &{
    opacity:1;
    @include transition-simply-prefix(opacity 0.3s ease-out);
  }
}
.op-hidden{
  visibility:hidden;
  >*{
      margin-top:-100000px;
    }
  .csstransition &{
    opacity:0;
    @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
    >*{
      @include transition-simply-prefix(margin-top 0s 0.3s);
    }
  }
}

@mixin op-visible(){
  visibility:visible;
  .csstransitions &{
    opacity:1;
    @include transition-simply-prefix(opacity 0.3s ease-out);
  }
} // change this

@mixin op-hidden(){
  visibility:hidden;
  >*{
      margin-top:-100000px;
    }
  .csstransition &{
    opacity:0;
    @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
    >*{
      @include transition-simply-prefix(margin-top 0s 0.3s);
    }
  }
} // change this

@mixin bouton(){
  @include fs16();
  font-weight:bold;
  padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
  border: 2px solid #ccc; background-color:#ccc; color:#4D4D4D; // blanc/bleu
  @include shadowTextBtnWhite();
  text-align: center; text-decoration: none;
}

@mixin bouton-bleu(){
  @include bouton();
  @include shadowTextBtnBlack();
  border-color:#69CDCF; background-color:#69CDCF; color:#fff;
}

@mixin bouton-vert(){
  @include bouton();
  @include shadowTextBtnBlack();
  border-color:#E6DE1C; background-color:#E6DE1C; color:#fff;
}

/** colomnized() */
@mixin columnized($padding){
  padding : $padding;
  &.columnized{
    padding: 0;
    .column>*{padding:$padding;}
    @include transition-simply-prefix(margin-left 0.3s ease-out);
    .column-switcher{
      display:inline-block; @include rounded(3px); color:#fff; background-color: #3e3e3e; vertical-align:middle;
      @include fs700(); @include fs22;
      padding: 0.05em 0.15em 0.2em 0.2em; line-height:0.5;
      @include regular;
      &.prev-column{cursor: w-resize;}
      &.next-column{cursor: e-resize;}
    }
  }
}

@mixin bgcWhite(){
  background-color: rgba(255, 255, 255, 0.8);
  text-shadow:0 0 4px rgba(255, 255, 255, 0.4);
  @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
}

@mixin bgcBlack(){
  background-color: rgba(0, 0, 0, 0.7);
  text-shadow:0 0 4px rgba(0, 0, 0, 0.4);
  @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
}

// .bgcWhiteParentHover(){
//   background-color: rgba(255, 255, 255, 0.2);
//   text-shadow:0 0 4px rgba(255, 255, 255, 0.9);
//   &:hover{
//     @include bgcWhite();
//   }
// }

$headerheight:45px;
$headerpaddingtop:5px;
$headerpaddingbottom:10px;
$headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;

/*
    __  ___________    ____  __________
   / / / / ____/   |  / __ \/ ____/ __ \
  / /_/ / __/ / /| | / / / / __/ / /_/ /
 / __  / /___/ ___ |/ /_/ / /___/ _, _/
/_/ /_/_____/_/  |_/_____/_____/_/ |_|

*/
#header{
  padding-top:$headerpaddingtop;
  padding-bottom:$headerpaddingbottom;
  height:$headerheight;
  // position:relative;
  // @include drop-shadow(0, 3px, 2px, 0.4); margin-bottom:5px;

  a{&, &:active, &:visited{color:#000;}}

  // .logo, #header-blocks{@include inlineblock(); vertical-align:middle;}

  .logo{
    //width:210px; //padding-left:5px; //margin-left:50px;
    @include inlineblock();
    h1{
      margin:0;
      @include fs36;
      @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
      a:hover{text-decoration: none ;}
    }
    span.slogan{
      @include fs14;
      margin-top:-3px;
      margin-left:-0.5em;
      @include fs900;
      @media #{$small-only} {display:none;}
     .ie8 &{position: absolute; margin-top:22px;}
    }
  }

  #header-blocks{
    //position:absolute; right:0; bottom:0;
    padding-top:17px;
    float:right;
    text-align:right;
    text-transform: capitalize;

    >.region{
      @include inlineblock();vertical-align:middle;
      padding-right:1em; margin-right:1em;
      @media #{$small-only}{ padding-right:0.3em; margin-right:0.3em; }//change this
      border-right: 1px solid #707070;
      &:last-child{border:none; padding: 0; margin: 0;}
    }

    .block{
      @include inlineblock(); vertical-align:middle;
      h2{
        @include fs12;
        margin: 0; line-height: 1.2; font-weight: normal; }
      &:not(:last-child){
        padding-right:0.8em;
        @media #{$xlarge-only}{ padding-right:0.3em; } //change this
      }
    }

    #block-user-login{
      @include fs12;
      text-align:left; position:relative;
      h2{
        padding-right:5px;
        // .icon-user;
        i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
      }
      form#user-login-form{
        position:absolute; overflow:hidden; right:0; margin: 0;
        height:0;
        @include transition-simply-prefix(height 0.3s ease-out);
        &>div{
          padding: 5px; margin: 5px;
          background-color: #e6e6e6; @include rounded(5px); @include drop-shadow(0, 0, 5px, 0.2);
        }
        .form-item{margin: 0; padding-bottom:5px;}
        label,input{
          margin: 0;
          @include fs10;
        }
        // label{width:30%;}
        input.form-text{width:150px;}

        #edit-actions{
          margin: 5px 0; padding: 0; background-color:transparent; text-align: right;
          input.form-submit{
            @include fs12;
            padding: 10px;
          }
        }
        div.newpass a{
          @include fs12;
          color:#686868;
        }

        // div.register a{
        //   display:block; padding: 10px 5px; background-color: #ccf718; font-weight:bold; text-align: center; .14;
        // }
      }

      html.no-touch &:hover, &.hovered{
        form#user-login-form{
          height:300px;
          &>div{
          }
          z-index:$header-z-index;
        }
      }

      @media #{$small-only}{
        span.login{display:none;}
      } //change this
    }

    #block-materio-flag-materio-flag-mylists-nav{
      position:relative;
      h2{
        margin: 0;
        @include fs12;
        line-height:1.1;}// @include fs700;
      // h2, section.mylists{@include inlineblock();}
      section.mylists{
        position:absolute; z-index:20; background-color: rgba(255, 255, 255, 0.9); min-width:100%; margin: 0 0 0 -5px;
        @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
        .ie8 &{background:#FFF;}
        ul{margin: 0;}
        li{
          list-style: none;
          @include fs12; @include fs700;
          padding: 0 10px; text-align: left; width:200px;
          height:0; overflow:hidden; @include transition-simply-prefix(height 0.3s ease-out);
          // height:15px; padding: 3px 10px;

          a, span.preview{white-space:nowrap; cursor:pointer;}
          a.open-list{max-width:150px;}
          span.count{
            @include fs300;
            padding: 0 5px;}
          span.preview, a.edit-list{padding-right:5px;}

          .no-touch &:not(:hover) {
            span.preview, a.edit-list{@include op-hidden;}
          }

        }
      }

      &:hover{
        section.mylists{
          padding-bottom:5px;
          li{height:15px; padding: 3px 10px; }
        }
      }

      h2{
        i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
        // @media #{$xlarge-up}{ i{display: none;} }
        @media #{$small-only}{ span.menu-title{display:none;} }
      }
    }

    #block-ajax-register-ajax-register-block{
      @include fs12;
      text-transform: lowercase;
    }

    #block-logintoboggan-logintoboggan-logged-in{
      @include fs12;
      i{
        vertical-align: text-bottom;
        margin: 0 5px 1px 0;
      }
      a span.account{text-transform: lowercase;}
      a span.logout{display:none; margin-left:5px; }
      .fi-power{margin: 0 0.5em 0 0.5em;}
      @media #{$large-only}{ .fi-power{display: none;} }
      @media #{$medium-up}{ a span.logout{display:none;} }

      @media #{$small-only}{a span.account{display:none;}} //change this
    }

    #headerblock-right{
      .block{
        @include inlineblock; vertical-align: middle; padding:0;
        &:first-child{padding: 0;}
      }
    }

    #block-locale-language{
      margin-left:1em;
      // border-left: 1px solid #707070;
      ul,li{
        margin:0;padding:0;list-style-type: none;
        @include fs12;
        line-height: 1;
        &.active{display:none;}
      }
      .ie8 &{padding-top:5px;}
    }

    // #block-menu-menu-about{
    //   position:relative;
    //   ul.menu{
    //     position:absolute; padding: 0 5px 5px 5px; margin: 0; width:100px; display:none; right:0; text-align: right;
    //     background-color: #e6e6e6; @include rounded(5px);
    //     li{
    //       height:0;
    //       overflow:hidden; list-style-type: none;
    //       .transition-simply-prefix(height 0.3s ease-out");
    //       a{
    //         display:block; width:100%; padding:2px 5px; .12;
    //       }
    //     }
    //   }

    //   &:hover{
    //     ul.menu{
    //       display:block;
    //       li{height:25px;}
    //     }
    //   }
    // }

    #block-menu-menu-top-menu{
      h2{
        .ie8 &{display:none;}
        i{ vertical-align: text-bottom; margin: 0 0 2px 0;}
      }

      ul.menu, li{
        @include fs12;
        list-style: none;
        .ie8 &{display: inline;}
      }
      // menu en ligne
      @media #{$medium-up}{
        h2{display:none;}
        ul.menu, li{
          @include inlineblock; vertical-align: middle;
          padding: 0; margin: 0;
        }
        a{padding: 0 0.5em 0 0;}
      } //change this

      //menu deroulant
      @media #{$small-only}{
        position:relative;
        h2 .menu-title{display: none;}
        .menu-wrapper{
          position:absolute; width:150px; display:none; right:0; padding-top:5px;
          ul.menu{
            background-color: #e6e6e6;
            @include rounded(5px); padding: 0 5px 5px 5px; margin: 0; text-align: right;
            li{
              height:0;
              overflow:hidden;
              @include transition-simply-prefix(height 0.3s ease-out);
              a{
                display:block; width:100%; padding:2px 5px; @include fs12;
              }
            }
          }
        }
        html.no-touch &:hover, &.hovered{
          z-index:$header-z-index;
          .menu-wrapper{
            display:block;
            ul.menu{li{height:25px;}}
          }
        }
      } //change this
    }

    #block-materio-user-old-database-link{
      a{
        @include fs12;
      ;}
    }

    #block-materio-user-front-link{
      a{
        @include fs12;
      }
      i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
      span.text{ display:none; }
    }
  }
}
/*
         __  _ ___ __  _
  __  __/ /_(_) (_) /_(_)__  _____
 / / / / __/ / / / __/ / _ \/ ___/
/ /_/ / /_/ / / / /_/ /  __(__  )
\__,_/\__/_/_/_/\__/_/\___/____/

*/
#utilities{
  margin-top:$headerouterheight;
  .not-logged-in &{ overflow:hidden; }

  &.closed{
    .tabs, .node-didactique{display:none;} height:0;
  }
  @media #{$small-only}{
    margin-top:0;
  }
}
/*
                    _
   ____ ___  ____ _(_)___
  / __ `__ \/ __ `/ / __ \
 / / / / / / /_/ / / / / /
/_/ /_/ /_/\__,_/_/_/ /_/
*/
#main{
  body.home-v2 &{
    padding-top:$headerouterheight;
  }
}

/*
    __    _       __    ___       __    __           __
   / /_  (_)___ _/ /_  / (_)___ _/ /_  / /____  ____/ /
  / __ \/ / __ `/ __ \/ / / __ `/ __ \/ __/ _ \/ __  /
 / / / / / /_/ / / / / / / /_/ / / / / /_/  __/ /_/ /
/_/ /_/_/\__, /_/ /_/_/_/\__, /_/ /_/\__/\___/\__,_/
        /____/          /____/
*/
#highlighted{

  @include rounded(5px);
  @include drop-shadow(0, 0, 6px, 0.6);
  padding: 0.5em;
  position:relative;

  @media #{$medium-up}{
    margin: 20px 0 6px;

    .block{ @include inlineblock; vertical-align: top; }
    .block-materio-didactique{
      width:65%;
      .side{
        @include inlineblock(); vertical-align: top;
        position:relative; //height:100%;
      }
      .group-sideleft{ width:65%; }
      .group-sideright{ width:30%; }

      .field-name-title-field{@include fs24;}
      // .field-name-field-visuel{}

      .node.emvideo{
        .group-sideleft, .group-sideright{ width:47%; }
        .group-sideleft{margin-right:2%;}
        // .field-name-field-visuel{display:none;}
      }

    }
    #block-materio-user-user-register{
      width:30%; padding:5px; height:290px;
    }
  }

  @media #{$small-up}{
    .block-materio-didactique{
      .side{@include inlineblock(); vertical-align: top;}
    }
  }

  @media #{$small-only}{
    margin:10px 0 6px;
    .block-materio-didactique{
      .group-sideleft, .group-sideright{ width:100%; }

      .node-didactique{
        .field-name-title-field{
          @include fs20;
          font-weight:normal!important;
          // &:before{content:"- ";}
          &:after{
            content:"\a0\f10b";
            font-family: "foundation-icons";
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            text-decoration: inherit;
            font-size: 16px;
          }
        }
      }

      html.js & .node-didactique{
        height:auto;
        height:30px; overflow: hidden;
        &.opened{height:auto;}
      }
    }
  }

  // @media #{$small-only}{
  //   .block-materio-didactique{
  //     // .pt(150px);
  //     .group-sideleft{ width:50%; }
  //     .group-sideright{ width:50%; }
  //   }
  // } //change this

  .oldie &{
    .block{@include inlineblock;}
  }

  .block-materio-didactique{
    // .ie8 &{max-width:850px; border: 1px solid #C6C6C6;}
    .node-didactique{
      @include fs14;
      background-color:#fff; //padding: 5px;
      margin: 0 auto;
      // .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}

      .side{position:relative;}

      .field-name-title-field{
        @include fs900;
        @include italic;
        padding:5px 0;
      }
      .field-name-field-visuel{
        text-align: center;
        figure, img{display:inline;}
      }
      &.emvideo{
        .field-name-field-visuel{display:none;}
      }
      // .field-name-field-emvideo{
      //   a{
      //     display:block; width:100%; height:100%;
      //     background: transparent url(../img/vimeo-play-btn.png) no-repeat center center;
      //     &:hover{background-image: url(../img/vimeo-play-btn-hover.png);}
      //     img{max-width:100%;}
            .ie8 &{.player{display:none;}}
      //   }
      // }

    }

    html.js &{
      position:relative;
      overflow: hidden;
      .slides{
        height:270px; margin: 0; position:relative; width:100%; overflow:hidden;
        .node-didactique{ @include layer(); }
        .field-name-title-field{ height:30px;}
        .group-column-wrapper{
          height:240px;
          .side{ height:100%; }
          .field-name-field-emvideo{
            $r:0.5625;
            @media #{$small-only} { $w:290px; width:$w; height:$w*$r; }
            @media #{$medium-only} { $w:216px; width:$w; height:$w*$r; }
            @media #{$large-only} { $w:216px; width:$w; height:$w*$r; }
            @media #{$xlarge-only} { $w:280px; width:$w; height:$w*$r; }
            @media #{$xxlarge-only} { $w:340px; width:$w; height:$w*$r; }//change this
            *{height:100%; width:100%;}
          }
        }
      }
      .tabs{
        height:30px; margin: 0; text-align:left;
        >*{
          @include inlineblock(); vertical-align: top ; padding:5px 10px; @include fs12; cursor:pointer; color:#bfbfbf;
          &:hover, &:focus, &.active{color:#3f3f3f;}
        }
      }
    }
  }
}

/*
    __    __           __                      _      __
   / /_  / /___  _____/ /__   ________  ____ _(_)____/ /____  _____
  / __ \/ / __ \/ ___/ //_/  / ___/ _ \/ __ `/ / ___/ __/ _ \/ ___/
 / /_/ / / /_/ / /__/ ,<    / /  /  __/ /_/ / (__  ) /_/  __/ /
/_.___/_/\____/\___/_/|_|  /_/   \___/\__, /_/____/\__/\___/_/
                                     /____/
*/
#block-materio-user-user-register, #block-materio-user-user-createaccount{
  min-height:120px; padding: 5px;
  background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  .ie8 &{max-width:250px; float:right; background-image:none;}


  h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; background-color:#fff; @include inlineblock(); min-width:50%;}
  h2{@include fs24;} h3{@include fs16;}

  form{margin: 0; background-color: rgba(255, 255, 255, 0.7); padding-bottom:5px; @include inlineblock(); }

  .form-item, .form-wrapper{
    margin: 0; @include inlineblock; vertical-align: middle; position:relative;
  }

  #edit-account{margin-right:5px;}

  input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
  .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
  .form-item-pass input.form-text{ width:7em;}

  #edit-mail-check{
    position:absolute; bottom:100%; z-index:9999; background-image: none;
    height:auto; //width:90%;
    padding: 5px; @include rounded(5px); margin-bottom:10px;
    @include fs11;  background-color: #fff;
    @include drop-shadow(0, 0, 5px, 0.6);
    @include transition-simply-prefix(bottom 0.1s ease-out);

    &.error{
      background-color: #f3968d;
      // border: 2px solid #f30002;
      color:#fff;
    }

    &.ok{ display:none; }
  }

  .form-submit{
    //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
    @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
    font-weight:bold;
    margin-bottom:4px;
  }

  .form-item-termsofservices, #edit-field-newsletter{
    margin-bottom:0; display:block; line-height: 1;
    &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
    label{ @include fs10; background-color: #fff; @include rounded(3px); }
  }

  #user-register-form{
    .form-submit{
      border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
      @include shadowTextBtnBlack();
      &[disabled]{
        background-color:#ddd; border: 2px solid #ddd;
      }
    }

  }
  #user-login{
    .form-submit{
      border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
      @include shadowTextBtnBlack();
    }
  }

  #edit-simplenews{
    padding-top:0.5em;
    .fieldset-description{
      @include fs12;
    }
    .form-checkboxes{
      .form-item{
        display:block;
        label{@include fs12;}
      }
    }
  }

  a.join{
    // @include inlineblock();
    display:block;
    // margin: 10px 0;
    width:5em;
    @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
    font-weight:bold;
    border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
    @include shadowTextBtnBlack();
    text-align: center; text-decoration: none;
  }

  @media #{$small-only}{
    background-position: 160% 50%;
    .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
    min-height:60px; padding: 15px 0;
    // #user-login, >h3:first-child, >h3 span{ display:none; }
  }

  .message-error{
    color:#b94a48; @include fs12;
  }

  .modal-content &{
    padding: 2em;

    width:400px;
    background-color: #fff;
    padding:5px;
    @include rounded(5px);
    @include drop-shadow(0, 0, 7px, 0.4);

    #user-register-form{
      // hide honeypot field, because drupal.attachbehavior() doesn't work
      div.homepage-textfield{display:none;}

      .description{
        @include fs12;
      }
    }

  }
}

/*
                    __             __        __
  _________  ____  / /____  ____  / /_      / /_____  ____
 / ___/ __ \/ __ \/ __/ _ \/ __ \/ __/_____/ __/ __ \/ __ \
/ /__/ /_/ / / / / /_/  __/ / / / /_/_____/ /_/ /_/ / /_/ /
\___/\____/_/ /_/\__/\___/_/ /_/\__/      \__/\____/ .___/
                                                  /_/
*/
#content-top{
  // padding-left:50px;

  /*

   ___ _             _ _     _
  |  _| |___ ___ ___| |_|___| |_
  |  _| | .'| . |___| | |_ -|  _|
  |_| |_|__,|_  |   |_|_|___|_|
            |___|
  */
  #block-materio-flag-materio-flag-mybookmarks, #block-materio-flag-materio-flag-mylists{
    // padding:5px 0;
    @include fs10; color:#666666; @include fs300;
    .ie8 &{margin-top:40px;}

    h2{
      @include fs12; @include fs700; margin: 0;  line-height:1.2; color:#000;
      a.open-list, i.fi-xicon-remove{
        @include inlineblock(); cursor:pointer;  color:#000;
        opacity:0; @include transition-simply-prefix(opacity 0.1s ease-out);
      }
    }

    &:hover{
      a.open-list, i.fi-x{
        opacity:1;
      }
    }

    span.listname[name=bookmarks]{
      cursor:pointer;
    }

    section.bookmarks{
      height:0; overflow:hidden;
      &.active{
        height:auto;
      }
      article.node.vm-bookmark{
        overflow:hidden;
      }
    }

    .mylists{
       // .transition-simply-prefix(height 0.3s ease-out);
      section{
        h2, .flaged{
          height:0; overflow: hidden;
        }
        &.active{
          h2, .flaged{
            height:auto;
          }
        }
      }
    }

    // .js & .mybookmarks{display:none;}

  }
}

#tool-bar{
  // margin-left:50px;
  position:relative;
  .inner-content{
    padding-top:10px; padding-bottom:10px;
    &>*{
      @include inlineblock();
      vertical-align: middle ;
      // height:35px;
      //  margin: 5px;
    }
    @media #{$small-only}{
      padding:0; h1{line-height:0.5;}
    }
  }
  // text-align:right;
  // >*{ text-align: left ;}

  // .block{
  //   .inlineblock();
  //   margin:0 0 0 20px;
  // }

  .oldie &{background-color:#B1ADAD; padding:0 10px;}

  .btn-group{
    padding: 0; @include  rounded(3px); @include  bgc(#fff); margin:4px;
    @include shadowBtn();
  }

  #block-materio-page-title-materio-page-title{
    // .ie8 &{margin-top:40px;}
    margin: 0 10px 0 0;
    h1{ margin: 0;
      @include fs24; text-transform: capitalize; @include fs300; line-height:1;}
    i{ vertical-align: middle ; margin-right:5px;}
    i.icon-materio-folder{margin-bottom:2px;}
    a.edit-list{
      @include op-hidden;
      i{ margin: 0 0 0 5px;}
    }
    &:hover{
      a.edit-list{ @include op-visible; }
    }

    @media #{$medium-only}{
      display:block;
    }
  }

  #block-materio-search-api-materio-search-api-viewmode{
    .viewmode-link{
      @include inlineblock(); margin:0 2px;
      &.active{cursor:normal;}
       .inner{display:none;@include fs10; }
    }
    @media #{$small-only}{
      .viewmode-link{ display:block; &:not(.active){display:none;} }
    }
    @media #{$small-only}{
      html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium{display:block;} }

    }
    @media #{$small-only}{
      html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium, .viewmode-link.viewmode-cardbig{display:block;} }
    }
  }

  #block-materio-search-api-materio-search-api-search{
    // @include inlineblock(); vertical-align: middle ;
    // position:absolute; top:10px; right:0;
    float:right;
    >.inner{
      @include inlineblock(); margin:0 0 0 10px;
      padding: 3px 10px; background-color:#fff; @include rounded(3px);
      @include shadowBtn(); text-align: right;
    }
  }

  #materio-search-api-search-form{
    text-align: right;
    @include inlineblock(); margin: 0;

    .form-item, input, .form-checkboxes{@include inlineblock(); margin:0; vertical-align:middle; padding:0;}

    .form-checkboxes{
      padding: 3px; @include fs12;
      .form-item{
        margin:0 5px;
        label{@include fs10;}
      }
    }

    input#edit-searchfield{
      border: 1px solid #ccc; @include rounded(15px);
      margin:3px 0 3px 3px; padding: 4px 5px; height:20px;
      @include fs12; line-height:1;
      background-position: 100% 7px;
      // width:100%;
      &.throbbing { background-position: 100% -15px; }
    }

    #edit-searchfield-autocomplete-aria-live{
      .oldie &{
        background-color:#1a1a1a;
      }
    };

    input#edit-create{ padding: 3px; }

    &.loading{
      background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
      input#edit-create{ visibility: hidden; }
    }

    @media #{$small-only}{
      input#edit-searchfield{width:16em;}
      #edit-bundles-filter{display:none;}
    }
  }
}

#center{
  background-color: #e6e6e6; @include rounded(10px);
  .node-type-page &{ background-color:#fff; }
  .ie8 &{height:100%; margin-top:20px;}
}

#content{
  // background-color: #f3f3f3;
  // @include rounded(5px);
  @include transition-simply-prefix(height 0.3s ease-out);
  &.faded{
    opacity:0.5;
    @include transition-simply-prefix(opacity 0.3s ease-out);
  }

  .materiobase-results, .materiobase-actuality, .materio-flags-list{
    padding:0 0 30px 0; margin:0 0 20px 0;

    &.loading{
      background-image: url('../img/ajax-loader.gif');
      background-position: center bottom;
      background-repeat: no-repeat;
    }

    p.search-performance, p.flaglist-infos, p.actualities-infos{
      @include fs12; @include fs500; margin: 0;
      padding:10px 0 5px 15px;
    }
    // p.search-performance{.role-7 & {@include fs12;}}

    .search-results, .actuality-items, .flaglist-items{
      font-size:0;
      >*{font-size:16px;}
      text-align:center;
      >*{text-align:left;}

    }

  }

  ul.pager{
    padding: 1em 0; text-align: left;
    .ie8 &{position:absolute; left:37px; bottom: 35px;}

    li{margin:0; @include inlineblock(); vertical-align: middle;}

    .pager-current, a{color:#000;@include fs12; }
    .pager-current{@include fs900; @include fs14;.ie8 &{background:#fff; padding:0.3em 1em 0.3em 1em; margin-top:0.05em; border: 1px solid #333333;}}
    .pager-first, .pager-previous, .pager-next, .pager-last{ a{ @include fs24; @include fs300; } }

      // html.js & {display:none;}
  }

  .node-type-page &{
    // padding-left:15px;
  }
}

/** #content-bottom */
#content-bottom{
  padding-top:10px;
}

/*
   _________    ____  ____  _____
  / ____/   |  / __ \/ __ \/ ___/
 / /   / /| | / /_/ / / / /\__ \
/ /___/ ___ |/ _, _/ /_/ /___/ /
\____/_/  |_/_/ |_/_____//____/

*/

$cardbookmark_w:50px;
$cardbookmark_h:70px;

$cardsmall_w:100px;
$cardsmall_h:140px;

$cardmedium_w:210px;
$cardmedium_h:295px;

$cardbig_w:425px;
$cardbig_h:610px;

$cardfull_w:850px;
$cardfull_h:610px;

@mixin card-box($w, $h){
  width:$w; height:$h;
  @include inlineblock(); position:relative; margin:7px;

  @include rounded(5px); background-color: #FFF;
  @include drop-shadow(0, 0, 5px, 0.2);
  @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
}

@mixin card($w, $h){
  @include card-box($w, $h);

  >div.side{
    @include rounded(5px); overflow: hidden;
  }

  // .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
  &.focused{ @include drop-shadow(0, 0, 7px, 0.9); }

  &.just-added{ opacity:0; }

  &.associated{
    @include transition-simply-prefix(margin 0.3s ease-out);
    &.just-added{margin-left:-$w;margin-right:$w;}

    .modal-content &{
      position:absolute;
      top:0; left:0;
      z-index:999;
    }

  }

  &.removed{
    @include transition-simply-prefix(width 0.3s ease-out);
    width:0; padding-left:0; padding-right:0; margin-right:0; margin-left:0; overflow:hidden;
  }
  // TODO:  how to show that a card was flaged ?
  // .search-results &.flaged, .actuality-items &.flaged{
    // border: 2px solid rgba(0,0,0, 0.3); margin: 3px;
    // @include drop-shadow(0, 0, 3px, 0.6);
  // }

  nav.nav{
    position:absolute; top:0; right:0; z-index:11;
    padding: 5px 0;
    @include border-radius(0, 5px, 0, 3px);
    @include fs11;

    // colors
    // background-color: rgba(10, 10, 10, 0.9); color:#fff;
    // a{color:#fff;}
    //ul{background-color: rgba(10, 10, 10, 0.9);}
    background-color: rgba(255, 255, 255, 0.9); color:#000;

    a{color:#000;}
    ul{background-color: rgba(255, 255, 255, 0.9);}
    span.op{@include fs900; @include fs14;}

    ul{padding: 0; margin: 0;}

    section{
      position:relative;

      &>i{margin: 0 5px; &:hover{cursor:pointer;}}
    }

    ul{
      position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
      @include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
       // padding: 5px 10px;
      li{
        padding: 0; margin: 0; line-height:1; display:block;
        height:0; overflow:hidden;  @include transition-simply-prefix(height 0.2s ease-out);
        // height:15px; overflow:hidden;
        a{ display:block;}
      }

      &.flag-lists-entity-links{
        width:160px;
        font-size:0;
        >*{font-size:11px;}
        // &.loading{
        //   a{visibility: hidden;}
        //   background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
        // }
        li{
          @include inlineblock(); min-width:48%; max-width:98%; padding-left:2px;
          a{
            color:#a6a6a6; @include transition-simply-prefix(color 0.2s ease-out);
            &:hover, &.unflag-action{
              color:#000; text-decoration: none;
            }
          }
          &.flag-lists-create{
            display:block; width:100%;
            >*{ margin-top:1px; padding-top:1px; border-top:1px solid #e6e6e6;}
            a{color:#000;}
          }
          &.loading{
            a{visibility: hidden;}
            background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
          }
        }
      }
      .ie8 &{background:#FFF;}
    }


    section:hover{
      ul{
        padding: 5px 5px;
        li{height:17px;}

        &.flag-lists-entity-links{
          // width:160px;
        }
      }

    }

    // display:none;
  }
  // &:hover{nav.nav{display:block;}}

  div.workflow{
    position:absolute; top:0; left:0; z-index:11;
    padding: 5px;
    @include border-radius(5px, 0, 3px, 0);
    @include fs11; vertical-align: top;
    background-color: rgba(255, 255, 255, 0.9); color:#000;
    span{padding: 3px 0 0 4px; @include inlineblock();}
  }

  .field-name-field-description .upgrade{
    @include fs12;
    padding-top:4em;margin-top:-4.5em;
    // .bgc(rgba(255,255,255,0.6));
    background : linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 4em);
    position:relative;
  }

  .side.oops p, .side .upgrade p{
    padding: 10px; @include fs12;
    a{
      display:block; margin: 10px 0;
      @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
      font-weight:bold;
      border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
      @include shadowTextBtnBlack();
      text-align: center; text-decoration: none;
    }
  }
}// .card()

/*
               _                        _                  ___
 ___ ___ ___ _| |   ___ ___ ___ ___ ___| |_    ___ ___ ___|  _|___ ___ _____ ___ ___ ___ ___
|  _| .'|  _| . |  |_ -| -_| .'|  _|  _|   |  | . | -_|  _|  _| . |  _|     | .'|   |  _| -_|
|___|__,|_| |___|  |___|___|__,|_| |___|_|_|  |  _|___|_| |_| |___|_| |_|_|_|__,|_|_|___|___|
                                              |_|
*/
article.search-performance{
  .inner{
    padding: 1em;
  }

  p{@include fs14;}

  a.button{
    display:block; margin: 10px auto; max-width:10em;
    @include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
    font-weight:bold;
    border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
    @include shadowTextBtnBlack();
    text-align: center; text-decoration: none;
  }
  &.view-mode-cardsmall{
    @include card-box(327px, 140px);
  }
  &.view-mode-cardmedium{
    @include card-box(210px, 295px);
    .inner{
      padding: 4em 1em 0;
    }
  }
  &.view-mode-cardbig{
    @include card-box(425px, 115px);
    display:block; margin:0 auto;
  }
  &.view-mode-cardfull{
    @include card-box(850px, 115px);
    .inner{
      padding: 1em 212px;
    }
    display:block; margin:0 auto;
  }
}

/*

 _____ _____ _____ ____     _____ _____ _____ _____ _____ _____ _____ _____ _____
|     |  _  | __  |    \   | __  |     |     |  |  |     |  _  | __  |  |  |   __|
|   --|     |    -|  |  |  | __ -|  |  |  |  |    -| | | |     |    -|    -|__   |
|_____|__|__|__|__|____/   |_____|_____|_____|__|__|_|_|_|__|__|__|__|__|__|_____|

*/
article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark{
  @include card($cardbookmark_w, $cardbookmark_h);
  margin:3px;
  .group-header{
    display:none;
  }

  .group-images{ @include horihoverswitch(); }
  // nav.nav{top:0;}
  div.workflow{display:none;}
}

/*

 _____ _____ _____ ____     _____ _____ _____ __    __
|     |  _  | __  |    \   |   __|     |  _  |  |  |  |
|   --|     |    -|  |  |  |__   | | | |     |  |__|  |__
|_____|__|__|__|__|____/   |_____|_|_|_|__|__|_____|_____|

*/
article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall{
  @include card($cardsmall_w, $cardsmall_h); //width:100px; height:140px;
  .group-header{
    display:none; position:absolute;
    @include fs14; @include fs500;
    .field-name-title-field{@include fs700;}
    .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
    .field-name-field-localisation{ float:right; }
  }
  .group-images{ @include horihoverswitch(); @include rounded(5px); overflow:hidden; }

  nav.nav{
    ul.flag-lists-entity-links{
      width:75px; min-width:75px;
      li{width:98%;}
    }
    .ie8 &{background: #FFF}
  }
  .no-touch &:not(.focused) nav.nav{@include op-hidden;}

  .no-touch &:not(.focused) div.workflow{@include op-hidden;}
}

/*

 _____ _____ _____ __  _____ _____ _____    _____ _____ _____ __    __       _____ _____ _____ ____
|_   _|     |     |  ||_   _|     |  _  |  |   __|     |  _  |  |  |  |     |     |  _  | __  |    \
  | | |  |  |  |  |  |__| | |-   -|   __|  |__   | | | |     |  |__|  |__   |   --|     |    -|  |  |
  |_| |_____|_____|_____|_| |_____|__|     |_____|_|_|_|__|__|_____|_____|  |_____|__|__|__|__|____/

*/
#tooltip{
  .group-header.smallcard{
    @include fs14; @include fs500;
    .field-name-title-field{@include fs700;}
    .field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
    .field-name-field-localisation{ float:right; }
  }
}

/*

 _____ _____ _____ ____     _____ _____ ____  _____ _____ _____
|     |  _  | __  |    \   |     |   __|    \|     |  |  |     |
|   --|     |    -|  |  |  | | | |   __|  |  |-   -|  |  | | | |
|_____|__|__|__|__|____/   |_|_|_|_____|____/|_____|_____|_|_|_|

*/
article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
  @include card($cardmedium_w, $cardmedium_h); //width:210px; height:295px;

  .side{
    @include layer(); background-color:#fff; cursor:pointer;
    &:nth-child(2){z-index:1;}
  }

  .group-header{
    position:absolute; bottom:0; z-index:2;
    width:190px; padding:5px 15px 5px 5px; min-height:55px;
    @include fs20; @include fs300; line-height:1;
    .field-name-title-field{@include fs700;}
    .field-name-field-nature-titre{@include fs14;}
    @include bgcWhite();

    @include border-radius(0, 0, 4px, 4px); overflow: hidden;

    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
    .field-name-field-localisation{ text-align: right; }
    .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 10px;}

  }

  &.node-breve .group-header{
    // @include fs20; @include fs300; line-height:1.1;
    color:#fff; @include bgcBlack();
    .field-name-field-authored-on{ @include fs12; @include fs500; }
    .ie8 &{background:#000; font-size:15px; line-height: 1.2em;}
  }

  // &:hover .group-header{
  //   .bgcWhiteParentHover();
  // }

  .group-images{ @include horihoverswitch(); }

  // side 2
  .field-name-field-description, .field-name-body{
    @include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px);
    .column>*{padding-right:25px;}
  }

  // side 3
  .column-wrapper{
    @include columnized(5px);
  }
  .field-name-field-company-fab, .field-name-field-company-distrib{
    @include fs12; padding:5px; @include fs300;
    .field-label{ @include fs10; text-transform: lowercase; margin:0;}
    .field-name-field-tode-company{@include fs14;}
    // span.print-link{display:none;}
  }

  .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{

    @include fs12; padding: 5px; @include fs300; a{color:#000;}
  }
  .field-label{@include fs900; margin: 1em 0 0.5em;}
  // nav
  .no-touch &:not(.focused) nav.nav{@include op-hidden;}

  .no-touch &:not(.focused) div.workflow{@include op-hidden;}

  .ie8 &{nav.nav{background: #FFF}}
}

/*
 _____ _____ _____ ____     _____ _____ _____
|     |  _  | __  |    \   | __  |     |   __|
|   --|     |    -|  |  |  | __ -|-   -|  |  |
|_____|__|__|__|__|____/   |_____|_____|_____|

*/
article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
  @include card($cardbig_w, $cardbig_h); //width:425px; height:610px;

  .side{
    @include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
    &:nth-child(2){z-index:1;}
  }

  .group-side1{position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;}

  .group-header{
    position:absolute; bottom:0; z-index:2;
    width:405px; padding:10px;
    @include fs20; @include fs300; line-height: 1.1;
    .field-name-title-field{@include fs700;}
    .field-name-field-nature-titre{@include fs14;}
    @include bgcWhite();
    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on { @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
    .field-name-field-localisation{ text-align: right; }
    .ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 20px; border-bottom: 1px solid #C6C6C6;}
  }
  // &:hover .group-header{ .bgcWhiteParentHover(); }

  &.node-breve .group-header{
    color:#fff; @include bgcBlack();
    .field-name-field-authored-on{ @include fs12; @include fs500; }
    .ie8 &{background:#000; font-color:#fff; line-height: 1em; padding: 20px;}
  }

  .group-images{ @include horihoverswitch(); height:auto;}

  // side 2
  .field-name-field-description, .field-name-body{
    @include fs12; @include fs300; @include columnized(10px);
  }
  // side 3
  .column-wrapper{
    @include columnized(10px);
  }
  // side 4
  .field-name-field-company-fab, .field-name-field-company-distrib{
    @include fs12; padding:10px; @include fs300;
    .field-label{ @include fs10; text-transform: lowercase; float: none; }
    .field-name-field-tode-company{@include fs14;}
  }


  .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
    @include fs12; padding: 10px; @include fs300; a{color:#000;}
  }
  .field-label{@include fs900; margin: 0 0 0.5em;}

  // nav
  // nav.nav{ margin: 5px; }
    .ie8 &{nav.nav{background: #FFF}}

  // upgarde and full
  .side.oops p, .side .upgrade p{
    padding: 3em;
    a{
      border: 2px solid #eee; background-color:#eee; color:#fff;
      @include transition-simply-prefix(border 0.3s ease-out);
      @include transition-simply-prefix(background-color 0.3s ease-out);
    }
  }
  &:hover .side.oops p, &:hover .side .upgrade p{
    a{
      border: 2px solid #69CDCF; background-color:#69CDCF;
    }
  }
}

/*
 _____ _____ _____ ____     _____ _____ __    __
|     |  _  | __  |    \   |   __|  |  |  |  |  |
|   --|     |    -|  |  |  |   __|  |  |  |__|  |__
|_____|__|__|__|__|____/   |__|  |_____|_____|_____|

*/
article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
  @include card($cardfull_w, $cardfull_h); //width:875px; height:610px;
  nav.nav{top:0;}


  font-size:0px;
  >*{@include fs16;}

  >.side{@include inlineblock(); width:50%;
    &.group-side-left{
      @include border-radius(5px, 0, 0, 5px);
    }
    &.group-side-right{
      @include border-radius(0, 5px, 5px, 0);
    }

  }

  .group-images{ @include horihoverswitch(); }

  .group-header{
    @include fs20; @include fs300; padding:10px;
    .field-name-title-field{@include fs700;}
    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}
    // .field-name-field-localisation{ float:right; }
  }

  &.node-breve .group-header{
    color:#fff; @include bgcBlack();
    .field-name-field-authored-on{ @include fs500; }
  }


  .field-name-field-description, .field-name-body{
    @include fs12; @include fs300; padding: 10px;
  }

  .field-name-field-attachments{
    padding: 10px;
    @include fs12;
  }

  // side 4
  .field-name-field-company-fab, .field-name-field-company-distrib{
    @include fs12; padding:10px; @include fs300;
    @include inlineblock(); width:40%;
    .field-item{margin-top:1em;}
    .field-label{ @include fs10; text-transform: lowercase; float: none; }
    .field-name-field-tode-company{@include fs14;}
  }

  .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
    @include fs12; padding: 10px; @include fs300; a{color:#000;}
  }
  .field-label{@include fs900; margin: 0 0 0.5em;}

  // nav
  nav.nav{ margin: 5px; }

  div.workflow{ margin: 5px; }

  // upgarde and full
  .side.oops p, .side .upgrade p{
    padding: 3em;
    a{
      border: 2px solid #eee; background-color:#eee; color:#fff;
      @include transition-simply-prefix(border 0.3s ease-out);
      @include transition-simply-prefix(background-color 0.3s ease-out);
    }
  }
  &:hover .side.oops p, &:hover .side .upgrade p{
    a{
      border: 2px solid #69CDCF; background-color:#69CDCF;
    }
  }
}

/*
               _            _     _
 ___ ___ ___ _| |   ___ ___|_|___| |_
|  _| .'|  _| . |  | . |  _| |   |  _|
|___|__,|_| |___|  |  _|_| |_|_|_|_|
                   |_|
*/
body.print-node-materiau{
  margin:2em;
}

.print-content .node-materiau{
  @include card($cardfull_w, auto);
  padding:1em; margin:0;

  .field-name-title-field{@include fs500;@include fs36;}
  // .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}

  .field-name-field-nature-titre{
    @include fs500;@include fs24; margin-bottom: 0.5em;
  }

  .group-head-right{
    position:absolute;
    top:0; right:0;
    padding:1em;
    text-align: right;
  }

  .side{@include inlineblock(); width:50%;
    &.group-side-left{
      // @include border-radius(5px, 0, 0, 5px);
    }
    &.group-side-right{
      @include border-radius(5px, 5px, 5px, 5px);
      .field-name-field-materiau-image{
        // padding-left:1em;
        float:right;
      }
      // , .field-items, .field-item{
      //   @include inlineblock();

      // }
    }

  }

  .field-name-field-description,
  .field-name-field-company-fab,
  .field-name-field-reference-distrib
  {
    padding-bottom: 1em;
  }
}

/*
    ____  ____  _____   ________
   / __ \/ __ \/  _/ | / /_  __/
  / /_/ / /_/ // //  |/ / / /
 / ____/ _, _// // /|  / / /
/_/   /_/ |_/___/_/ |_/ /_/

*/


.print-site_name{
  width:100%;
  vertical-align: bottom;
  margin-bottom:1em;
  h1{
    margin:0;
    @include fs36;
    @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
    a{
      color:inherit;
      &:hover{text-decoration: none ;}
    }
  }
  span.slogan{
    @include fs14;
    margin-top:-3px;
    margin-left:-0.5em;
    @include fs900;
    .ie8 &{position: absolute; margin-top:22px;}
  }
}

.print-content{
  margin-bottom: 1em;
}

.print-footer{
  margin-bottom: 2em;
}

/*
    ___   __  ____________  __________  __  _______  __    __________________
   /   | / / / /_  __/ __ \/ ____/ __ \/  |/  / __ \/ /   / ____/_  __/ ____/
  / /| |/ / / / / / / / / / /   / / / / /|_/ / /_/ / /   / __/   / / / __/
 / ___ / /_/ / / / / /_/ / /___/ /_/ / /  / / ____/ /___/ /___  / / / /___
/_/  |_\____/ /_/  \____/\____/\____/_/  /_/_/   /_____/_____/ /_/ /_____/

*/
#autocomplete{
  border: 0; @include rounded(3px);
  background-color: rgba(0,0,0,0.6);
  text-align: left;
  margin-left: 2px;
  .oldie &{background-color:#545454;}
  li{
    color:#FFF; background-color: transparent;
    &.selected{background-color: rgba(0,0,0,0.8);}
    div{padding:0.1em 5px;} @include fs12;
  }
}

/**
* the old modal api (balck bg) for contextual forms (create new flag list)
*/
@mixin mat_modal(){
  background-color: rgba(0,0,0,0.7);
  @include rounded(5px); border: 0;
  *{color:#fff; background-color:transparent;}
  @include fs12;
  form{
    background-color:transparent; color:#fff; border: 0px;

    .form-actions{
      background-color:transparent; margin: 0; padding: 0; border: 0;
    }
    input.form-text, textarea, div.grippie{background-color:#fff; color:#000; border: 0;}

    .form-actions{ text-align: right ;}
    input.form-submit{
      @include button($button-tny);
      //@include btn-mini; color:#000; //change this btn bootstrap -> foundation
      &[name="create"]{
        @include button($button-tny, $success-color);
      }
      &[name="save"]{
        @include button($button-tny, $success-color);
      }
      &[name="delete"]{
        @include button($button-tny, $alert-color);
      }
      &[name="cancel"]{
        @include button($button-tny, $secondary-color);
      }
    }
  }
}

#modal{
  @include mat_modal();
  >*{padding: 10px;}
  .form-item-flag-lists-name{
    // label, input{.inlineblock();}
    // label{width:38%;}
    input{width:95%;}

  }
  .actions{
    text-align: right;
  }
}

/**
* the new modal api used for preview and register modal
*/
.modal-wrapper {
    &:before {
        content: "";
        display: inline-block;
        height: 100%;
        margin-right: -0.25em;
        vertical-align: middle;
    }
    &:after, &:before {
        -moz-box-sizing: border-box;
    }

    // background-color: rgba(0, 0, 0, 0.4);
    bottom: 0;
    // display: none;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    white-space: nowrap;
    z-index: 99998;

    .modal-bg{
      background-color: #000;
      position:absolute;
      top:0; left:0;
      width:100%; height:100%;
      opacity:0.5;
    }

    .modal-content{
      position:relative;
      display: inline-block;
      margin: 0 auto;
      text-align: left;
      vertical-align: middle;
      white-space: normal;
      // width: 400px;
      min-height:200px;
      // background-color: #fff;
    }
}

/*
       _______ __________  ____  __    __    ____  ___    _   __
      / / ___// ____/ __ \/ __ \/ /   / /   / __ \/   |  / | / /
 __  / /\__ \/ /   / /_/ / / / / /   / /   / /_/ / /| | /  |/ /
/ /_/ /___/ / /___/ _, _/ /_/ / /___/ /___/ ____/ ___ |/ /|  /
\____//____/\____/_/ |_|\____/_____/_____/_/   /_/  |_/_/ |_/

*/
.jspContainer{
  .jspVerticalBar{
    background-color: transparent;
    width:5px; //margin-right:-5px;

    .jspTrack{
      background-color: transparent;
      .jspDrag{
        background-color: #ccc;
        @include rounded(3px);
      }
    }
  }
}

/*
  __________  ____  __  ______________
 /_  __/ __ \/ __ \/ / /_  __/  _/ __ \
  / / / / / / / / / /   / /  / // /_/ /
 / / / /_/ / /_/ / /___/ / _/ // ____/
/_/  \____/\____/_____/_/ /___/_/

*/
#tooltip{
  position:absolute; z-index:999; max-width:180px; background-color: rgba(255, 255, 255, 1); padding: 5px; @include rounded(3px);
  @include fs12; @include fs500;
  @include drop-shadow(0, 0, 5px, 0.4);
  &.op-visible{
    @include transition-simply-prefix(opacity 0.1s ease-out); // top 0.1s linear); // left 0.1s linear,
    // change this transition foundation
  }
}

/*
    ______________________  ____  ___   ________ __
   / ____/ ____/ ____/ __ \/ __ )/   | / ____/ //_/
  / /_  / __/ / __/ / / / / __  / /| |/ /   / ,<
 / __/ / /___/ /___/ /_/ / /_/ / ___ / /___/ /| |
/_/   /_____/_____/_____/_____/_/  |_\____/_/ |_|

*/
#block-feedback-form{

  @media #{$medium-only}{ bottom:5px; left:5px; right:auto; }

  h2{
    line-height:1.2; @include fs14; margin: 0;
    .title{display:none;}
  }

  #feedback-form-toggle{
    padding: 2px 3px; @include rounded(3px); background-color:#ff7600; color:#fff;
    line-height:2; @include fs900;
  }
  .content{
    @include mat_modal();
    .ie8 &{background:#000;}
  }

  #feedback-status-message{background-color:#fff; padding: 5px;}
}

/*
  _________   _____ __ __       __   _________    ____ _____
 /_  __/   | / ___// //_/     _/_/  /_  __/   |  / __ ) ___/
  / / / /| | \__ \/ ,<      _/_/     / / / /| | / __  \__ \
 / / / ___ |___/ / /| |   _/_/      / / / ___ |/ /_/ /__/ /
/_/ /_/  |_/____/_/ |_|  /_/       /_/ /_/  |_/_____/____/

*/
@mixin tabs-primary(){
  a{
    @include fs12;
    padding: 5px 10px;
    background-color:#e6e6e6;
    &.active, &:hover{background-color:#e6e6e6;}
    @include rounded(3px);
  }
}

@mixin tabs-secondary(){
  @include fs10;
  padding: 0.5em 1em;
}

#tasks{
  ul.tabs{
    @include inlineblock();
    border:0 solid #fff;
    padding: 0; margin: 0;
    li{padding: 0; margin: 2px 5px; border:0 solid #fff;}
    a{
      border:0; color:#7f7f7f;
      &.active, &:hover{font-weight: 900; color:#000;}
    }

    &.primary{
     @include tabs-primary();
    }

    &.secondary{
      @include tabs-secondary();
    }
  }
}

/*
   ______________  _____________________
  / ___/_  __/   |/_  __/  _/ ____/ ___/
  \__ \ / / / /| | / /  / // /    \__ \
 ___/ // / / ___ |/ / _/ // /___ ___/ /
/____//_/ /_/  |_/_/ /___/\____//____/

*/

/*
 _ _ ___ ___ ___
| | |_ -| -_|  _|
|___|___|___|_|

*/
.page-user, .page-user-edit, .page-user-password, .page-user-reset, .page-toboggan{
  #main{ background: #fff url('../img/user-page-bg.gif') no-repeat bottom right; }

  .messages{ width:800px; margin:0 auto; }

  &.role-6 #tasks .tabs.primary{display:none;}
  &.role-6 #tasks .tabs.secondary{@include tabs-primary();}

  #content .inner-content >*{
    width:800px; margin:0 auto; padding-top:1em; @include fs14;

    fieldset{
      margin-bottom:1em;
    }

    legend{
      @include fs16; margin:0; padding:10px 0 5px 0; line-height:1; border:0 solid #fff;
      a{color:#000;}
    }

    .form-item{
      margin:0 0 0.5em 0; width:100%;
      label, input.form-text{
        @include inlineblock(); vertical-align:middle;
      }
      label{margin-right:1em; min-width:6em;}
      input.form-text{
        padding:2px 4px;
      }
    }
    .form-wrapper{
      &>.form-item{margin:0 0 2em 0;}
    }

    .form-type-password-confirm, .form-type-new-password-confirm{
      label{width:9em;}
      .password-parent{width:auto;}
      .password-strength, .password-confirm{
        width:15em; margin-top:0;
      }
    }

    .form-type-checkbox{
      input{margin:0;}
      label{@include fs14; margin:0;}
    }

    #edit-language{
      .form-item{
        @include inlineblock(); width:auto; margin-right:1em;
        input, label{margin:0;}
      }
    }

    select.form-select{
      width:auto; padding:2px 4px; height:auto;
    }

    div.description{
      @include fs11;
    }
    div.form-actions{
      margin: 0; text-align:right; padding: 1em 0.5em;
    }

    // input#edit-submit{@include btn; @include btn-success;} //change this btn foundation

    /* #user-profile-form */
    #edit-profile-adherent-field-first-name, #edit-profile-adherent-field-name,
    #edit-profile-adherent-field-private-quality, #edit-profile-adherent-field-service, #edit-profile-adherent-field-employee,
    #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret{
      @include inlineblock(); vertical-align:middle; width:auto; margin: 0 1em 0.5em 0;
      div{width:auto; margin: 0; padding: 0;}
      // label{margin: 0 0.5em 0 0;}
    }

    #edit-profile-adherent-field-name, #edit-profile-adherent-field-service,
    #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret, .form-item-profile-adherent-field-adresse-und-0-locality{
      label{min-width:auto;}
    }

    #edit-profile-adherent-field-siret{input{width:8em;}}
    #edit-profile-adherent-field-naf{input{width:13em;}}

    #edit-profile-adherent-field-organization{ margin: 2em 0 0 0; input{width:35em;} }
    #edit-profile-adherent-field-employee{
      input{width:4em;}
    }

    #edit-profile-adherent-field-private-phone{
      .form-phone-number{
        @include inlineblock(); vertical-align:middle;
      }
    }

    #edit-profile-adherent-field-adresse{
      .street-block{
        input{ width:35em;}
      }
      .locality-block{
        .form-item{width:auto; margin-right:1em;}
      }
    }

    #edit-profile-adherent-field-user-website{
      margin: 2em 0 0 0;
      .form-item>*{@include inlineblock(); vertical-align: middle; }
      input{width:35em}
    }

    &.profile{
      h3{border:0 solid transparent;}
      .field-label{display:inline;}
    }
  }
} // user

/*
 _____ _____ _____ _____ __    _____ _____ _____ _ _ _ _____
|   __|     |     |  _  |  |  |   __|   | |   __| | | |   __|
|__   |-   -| | | |   __|  |__|   __| | | |   __| | | |__   |
|_____|_____|_|_|_|__|  |_____|_____|_|___|_____|_____|_____|

*/
body.node-type-simplenews{
  #content{
    .inner-content{
      text-align:center;
    }
    article.node.node-simplenews{
      @include inlineblock();
      max-width:600px;
      padding:1em 0;
      tbody{
        border-top:0px;
      }
    }
  }
}

/*
 _____ _____ _____ _____    _____ _____ _____ _____ _____ _____ _____
|  _  |  _  |   __|   __|  |     |     |   | |_   _|  _  |     |_   _|
|   __|     |  |  |   __|  |   --|  |  | | | | | | |     |   --| | |
|__|  |__|__|_____|_____|  |_____|_____|_|___| |_| |__|__|_____| |_|

*/
.page-node-11175{
  #main{
    // background-color:#fff;
    background: #fff url('../img/bg-contact.gif') no-repeat bottom right;

    .field-name-body p{
      @include inlineblock; margin: 15px;
      strong{@include fs18;}
    }
  }
} // contact

/*
 _____ _____ _____ _____ _____ _____ _____
|  _  | __  |     |     |     |   | |   __|
|   __|    -|-   -|   --|-   -| | | |  |  |
|__|  |__|__|_____|_____|_____|_|___|_____|

*/
body.page-node-11187{
  // #center{ background-color: #fff; }

  @media #{$medium-up}{
    .node-11187{
      .field-name-body{
        div.column, div.column-demi, div.column-full, div.column-auto{
          &, &:last-child{
            @include inlineblock;  margin: 10px; float:none;
          }
        }
        div.column{
          width:22.4%;
          ul.list-text, p.description{ min-height:170px;}

        }
        div.column-demi{
          width:46%;
          ul.list-text{ min-height:110px;}
        }
        div.column-full{
          width:92%;
          // ul.list-text{ min-height:110px;}
        }
        div.column-auto{
          width:auto; max-width: 98%;
        }
      }
    }

    #block-materio-user-user-register{
      width:600px; margin: 0 auto; padding:2em;
    }
  }

  @media #{$small-only}{
    // #block-materio-user-user-register{  padding: 25px 0 0 0; #user-login, >h3:first-child, h3 >span{display:block;}}
     #block-system-help{text-align: center;}
  }

  .node-11187{
    .field-name-body{
      text-align:center;
      >*{text-align:left;}
      div.column, div.column-demi, div.column-full, div.column-auto{
        position:relative;
        @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.5);
        .ie8 &{max-width:500px; margin:auto; margin-bottom:15px; border:1px solid #C6C6C6;}
        overflow:hidden;

        &>*{ padding: 0 10px;}
        // img{float:left; padding: 0; }
        h2{ text-align: left; margin: 5px 0 0 15px;}
        .subtitle{
          padding: 0 0 0 15px;
          @include fs18; @include italic; @include bold; line-height:1;
        }

        ul{margin: 0; padding: 0 15px;}
        li{
          list-style: none; @include fs12;
          &:before{
            content:"+ ";
            @include fs900;
          }
        }
        .description{
           @include fs12;
           margin: 0; padding: 0 15px;
        }
        .get-link{
          margin: 0; @include border-radius(0 0 5px 5px); border: 1px solid #fff; min-height: 92px;
          a{ display:block; width:100%; padding: 15px 0; color:#1A1A1A; text-decoration: none; }
        }
        .get-link{background-color: #C8C8C8; }
        &.web{ .get-link{ background-color: #69CDCF; } }
        &.webshowroom { .get-link{ background-color: #D476AE; } }
        &.pack4 { .get-link{ background-color: #E6DE1C; } }
        &.etudiants{ .get-link{background-color: #4BA13D; } };
        // &.ecole-de-neige { .list-neige{min-height:80px;} }
        &.neutral .get-link{
          min-height: 62px;
          padding:15px 0;
        }
      } // end div.column div.column-demi


      div.column{
        h2{ padding:10px 0 0; @include fs24; }
        // .subtitle{ min-height:3em; }
        .get-link{
          padding: 0;
          @include fs28; text-align: center;
          @include italic; @include fs900;
          span{ @include fs20; }
          @include shadowTextBtnWhite();
        }
      }
      div.column-demi{
        h2{ padding:10px 0 0; @include fs24; top:0; }
        .subtitle{ min-height:2em; }
        ul{ @include fs14; min-height:120px;}
        .get-link{ @include fs14; text-align: left; padding: 0 1em; background-color:#ddd; }
      }
    }

  } // end .node-11187

  // hide get free account for user already logged-in
  // hide get flocon for user already flocon (role-6)
  &.logged-in{
    // .column.gratos{.get-link{
    //   cursor:auto!important;
    //   a{display:none!important;}
    // }}
    // &.role-6{
    //   .column.etudiants{.get-link{
    //     cursor:auto!important;
    //     a{display:none!important;}
    //   }}
    // }
  }
} // princing

/*
 _____ ____  _____ _____ _____ _____ _____ _____    _____ _____ _____ _____
|  _  |    \|  |  |   __|   __|     |     |   | |  |   __|     | __  |     |
|     |  |  |     |   __|__   |-   -|  |  | | | |  |   __|  |  |    -| | | |
|__|__|____/|__|__|_____|_____|_____|_____|_|___|  |__|  |_____|__|__|_|_|_|

*/
.node-11186{
  nav ul.links a.language-link { display:none; }
}

#webform-client-form-11186{
  @media #{$medium-up}{
    padding: 10px 30px;
    #webform-component-column-left--membership-options{
      margin: 10px 0;
      label{width:auto;}
    }
    fieldset{
      @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 10px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0;
      fieldset{ border: 0 solid #ddd; padding: 0;}
    }
    legend{margin: 0; @include fs18; @include fs700;}
    .form-item{ margin: 0 20px 0 0; }
    label{ @include fs12; width:10em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
    .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
    input.form-text{width:13em;}
  }

  @media #{$medium-only}{
    padding: 10px;
    #webform-component-column-left--membership-options{
      margin: 0 0 10px 0;
      .form-item{width:100%;}
      label{ width:75%; }
    }
    legend{margin: 0; @include fs16; @include fs700;}
    .form-item{ margin: 0; float:none;}
    label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; margin-right:0.5em; }
    input.form-text, select.form-select{width:60%;}
    #webform-component-infos{@include fs14;}
  } //change this

  background-color: #e6e6e6; @include rounded(10px);

  .fieldset-wrapper>.form-item{ @include inlineblock;  }

  #webform-component-column-left{@include inlineblock; width:25%; border:none;}
  #webform-component-column-right{ @include inlineblock; min-width:70%;}

  #webform-component-column-left--membership-options{

    .form-type-radio{
      border:1px solid #ddd; @include rounded(5px); padding: 10px 5px; margin: 5px 0;
      input{ @include inlineblock;  vertical-align: middle; margin:0px 5px;}
      label{@include fs20; @include fs700; @include inlineblock;  vertical-align: middle; margin: 0;}
      background-color: #fff;
      &:hover{@include drop-shadow(0, 0, 5px, 0.2); }
      &.form-item-submitted-column-left-membership-options:nth-child(1){background-color: #69CDCF;}
      &.form-item-submitted-column-left-membership-options:nth-child(2){background-color: #D476AE;}
      &.form-item-submitted-column-left-membership-options:nth-child(3){background-color: #E6DE1C;}

      &.form-item-submitted-column-left-membership-options:not(.selected){opacity:0.4;}

    }
    &>label{width:200px; @include fs18; @include fs700; }
    label{ border: 0; }
  }

  #webform-component-column-right--me--my-account-email{
      display:block;
    }

  #webform-component-column-right--company--administrative-e-mail{
    .description{@include inlineblock;}
  }

  #addressfield-wrapper{ margin-top:1em; }
  .street-block .form-item{ @include inlineblock; }

  #webform-component-column-right--collaborators{
    margin: 20px 0; overflow:hidden;
    fieldset{@include inlineblock; width:33%;}
    .form-item{display:block;}
    label{width:6em;}
    input{width:11em;}
  }

  #webform-component-infos{margin: 20px 0;}

  .form-actions{
    padding: 0; margin: 0;
    border: 0px;
    background-color: transparent;
    text-align: left;
    .form-submit{
      border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff;
      @include fs18; padding: 0.2em 1em 0.3em; @include rounded(0.3em);
      font-weight:bold;
      margin-bottom:9px;
      @include shadowTextBtnBlack();
    }
  }

  #webform-component-column-right--news-letters{
    >label{margin: 0; @include fs18; @include fs700; border:none; line-height:40px}
    .form-item{
      @include inlineblock();
      label{width:auto}
      input, label{margin: 0;}
    }
  }

  #edit-submitted-terms-of-services{
    margin-bottom:0.5em;
    input, label{margin: 0 0.3em 0 0;}
    label{ width:auto; }
  }
} // adhesion

/*
 _____ _____    _____ _____ _____ _____    _____ _____ _____ _ _ _    _____ _____ _____ _____
|  |  |     |  |     |  _  | __  |_   _|  |  |  |     |   __| | | |  |   __|     | __  |     |
|  |  |   --|  |   --|     |    -| | |    |  |  |-   -|   __| | | |  |   __|  |  |    -| | | |
|_____|_____|  |_____|__|__|__|__| |_|     \___/|_____|_____|_____|  |__|  |_____|__|__|_|_|_|

*/
#uc-cart-view-form{
  background-color: #e6e6e6;
  // @include rounded(10px);
  padding: 10px, 30px;
  //  max-width:$cardfull_w;
  display:inline-block;
  table{
    width:auto; display:table;
    background-color:#fff;

    thead th{border-bottom:none;padding: 1em;}
    tbody{
      border-top:none;
      tr.even, tr.odd{
        background-color:#fff;
        border-bottom:none;
      }
      td{
        padding: 1em;
        // &.price{ padding: 0.5em 1em; }
      }
    }
  }

  fieldset{ border: none!important;}

  .form-type-uc-quantity input{
    width:2em;
  }

  .form-actions{
    padding: 0; margin: 0;
    border: 0px;
    background-color: transparent;
    text-align: right;
    display:block; width:100%;

    &:before, &:after{
      display:block;
    }
    .form-submit{
      @include bouton();
      margin-left:1em;
      &#edit-checkout--2{
        @include bouton-bleu();
      }
    }
  }
}

/*
 _____ _____    _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ _____ _____
|  |  |     |  |     |  |  |   __|     |  |  |     |  |  |_   _|  |   __|     | __  |     |
|  |  |   --|  |   --|     |   __|   --|    -|  |  |  |  | | |    |   __|  |  |    -| | | |
|_____|_____|  |_____|__|__|_____|_____|__|__|_____|_____| |_|    |__|  |_____|__|__|_|_|_|

*/
#uc-cart-checkout-form{
  // display:inline-block;

  @mixin price-table(){
    @include fs14;
    min-width:20em;
    td.price{width:4em;};
  }

  background-color: #e6e6e6;
  // @include rounded(10px);
  padding: 10px, 30px;

  fieldset{ border: none!important;}

  fieldset.form-row{
    //    @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
    padding-bottom:20px; margin-bottom:20px;
    // fieldset{ border: 0 solid #ddd; padding: 0;}
  }

  fieldset.form-column{
    @include inlineblock; max-width:39%; clear:both; float:none;
    margin: 15px 1em;
    > .fieldset-wrapper > .form-wrapper{
      margin: 10px 0;
    }
  }

  fieldset.form-column-left{}

  fieldset.form-column-right{
    border-left:1px solid #ccc;
    margin-left:2em; padding-left:2em;
    // background-color:#fff; @include rounded(5px);
  }

  legend{margin: 0; @include fs18; @include fs700; border:none; line-height:2;}
  .fieldset-description{@include fs12;}
  .fieldset-wrapper{@include fs12;}
  .form-item{ margin: 0 20px 0 0; }

  .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}

  #cart-pane{
    >.fieldset-wrapper{
      @include inlineblock();
      @include rounded(5px);
      padding: 10px;
      background-color:#fff;
    }

    table{
      @include price-table();
    }

    tbody{border:none; }
    tr{background-color: transparent; border:none; }
    td{
      padding: 0 5px;
      vertical-align: bottom;
      &.products{
        a{color:inherit; @include fs700;}
        width:auto;
        ul.product-description{margin: 0; @include fs12;}
        li{list-style: none;}
      }
    }
    tr.subtotal{
      td{@include fs16; @include fs700;}
    }
  }

  #customer-pane{width:35em;}

  #billing-pane{
    label{ @include fs12; width:8em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
    input.form-text{width:13em;}
  }

  #coupon_automatic-pane{}

  #coupon-pane{}

  #payment-pane{
    // float:right;

    .fieldset-wrapper{
      background-color:#fff;
      @include rounded(5px);
      padding: 10px;
    }

    #line-items-div{
      float:none; border:none;
      @include inlineblock(); margin: 10px 0 20px;
      table{@include price-table();}
      tbody{border:none;}
      td{
        padding: 0 5px;
      }
      tr{
        td{@include fs500;}

        &.line-item-total td{
          @include fs16; @include fs700; text-align: right;
        }
      }
    }

    #edit-panes-payment-payment-method{
      label{width:auto; border-bottom:none;}
      .form-item-panes-payment-payment-method{
        border:1px solid #ddd;
        border-radius:5px;
        margin: 0.5em; padding: 0.5em;
        label{font-weight:bold;}
      }
    }

    #payment-details{
      width:25em;
      border-top:none; padding: 0; margin: 0;
    }
  }

  #edit-actions{
    width:100%;
    padding:1em 0; margin: 0;
    border: 0px;
    background-color: transparent;
    text-align: center;
    .form-submit{
      @include bouton();
      margin-left:1em;
      &#edit-continue{
        @include bouton-bleu();
      }

    }
  }
}

/*

 _____ _____    _____ _____ _____ _____
|  |  |     |  |     |  _  | __  |_   _|
|  |  |   --|  |   --|     |    -| | |
|_____|_____|  |_____|__|__|__|__| |_|

&&

 _____ _____    _____ _____ _____ _____ _____ _____ _____ _____    _____ _____ __    _____ ____  _____ _____ _____ _____ _____
|  |  |     |  |     |  |  |   __|     |  |  |     |  |  |_   _|  |  |  |  _  |  |  |     |    \|  _  |_   _|     |     |   | |
|  |  |   --|  |   --|     |   __|   --|    -|  |  |  |  | | |    |  |  |     |  |__|-   -|  |  |     | | | |-   -|  |  | | | |
|_____|_____|  |_____|__|__|_____|_____|__|__|_____|_____| |_|     \___/|__|__|_____|_____|____/|__|__| |_| |_____|_____|_|___|

*/
//.page-cart,
.page-cart-checkout-review{
  #content{
    //text-align:center;
    &> .inner-content{
      //.card-box($cardfull_w, $cardfull_h);
      //text-align:left;
      display:inline-block;
      padding: 1em;
    }
  }

  #edit-actions{
    margin: 0; padding: 0;
    &:before, &:after{display:block;}
  }


  #review-instructions{
    width:30em;
    padding: 1em 0;
    // .info;
  }

  table.order-review-table{
    border:none;
    .pane-title-row{
      border:none;
      background-color:transparent;
      text-align:left;
      @include fs18;
      td{ padding: 1em 0 0 0; }
    }
    table.cart-review{
      tr.odd{
        background-color:transparent;
        border:none;
      }
    }
    td.title-col{
      padding: 0;
      text-align:left;
    }
    td.data-col{
      padding: 0;
      width:75%;
    }
    .review-button-row{
      border:none;
      background-color:transparent;

      &>td{
        padding: 3em 0 0 0;
      }

      form{
        margin: 0 0.5em 0 0; @include inlineblock();

      }
    }
  }

  #edit-actions{
    border: 0px;
    background-color: transparent;
    text-align: right;
  }
  input.form-submit{
    @include bouton();
    margin-left:1em;
    &#edit-submit{
      @include bouton-bleu();
    }
  }
}


/*
 ____  _____ ____  _____ _____ _____ _____ _____ _____ _____
|    \|     |    \|  _  |     |_   _|     |     |  |  |   __|
|  |  |-   -|  |  |     |   --| | | |-   -|  |  |  |  |   __|
|____/|_____|____/|__|__|_____| |_| |_____|__  _|_____|_____|
                                             |__|
*/
#didactique-page{

    .node-didactique{
      @include rounded(5px); background-color: #FFF;
      @include drop-shadow(0, 0, 5px, 0.2);
      max-width:850px;
      @include fs14; background-color:#fff; //padding: 5px;
      margin: 1em auto; padding: 1em;

      .field-name-field-emvideo{
        margin: 1em 0;
      }

      .field-name-title-field{
        @include fs24; @include fs900; @include italic; padding:5px 0;
      }
      .field-name-field-visuel{
        figure, img{max-width:100%;}
      }
    }

    @media #{$medium-up}{
      .side{ @include inlineblock(); vertical-align: top; }
      .group-sideleft{ width:60%; }
      .group-sideright{ width:39%; }
    }

    // @media #{$small-up}{

    // } // change this
}

/*
 _ _ _ _____ _____    _ _ _ _____    _____ _____ _____
| | | |  |  |     |  | | | |   __|  |  _  | __  |   __|
| | | |     |  |  |  | | | |   __|  |     |    -|   __|
|_____|__|__|_____|  |_____|_____|  |__|__|__|__|_____|

*/
.page-whoweare{
  #tool-bar{
    @media #{$small-only}{
      #block-materio-page-title-materio-page-title{display:none;}
    } // chanhe this
  }
}

/*

           _     _
 _____ ___|_|___| |_ ___ ___ ___ ___ ___ ___
|     | .'| |   |  _| -_|   | .'|   |  _| -_|
|_|_|_|__,|_|_|_|_| |___|_|_|__,|_|_|___|___|

*/
.maintenance-page{
  #container, #header{ text-align: center; padding: 0; position:relative;}
  #main{background-color: transparent; }
  #header h1.site-name{font-size:36px; margin: 0; padding-left:0;}
  h2.site-slogan{font-size:16px; @include fs300; margin: 0; line-height:1.1;}
}

/*
 _____ _____ _____
|   __|  _  |     |
|   __|     |  |  |
|__|  |__|__|__  _|
               |__|
*/
.page-faq-page #main{
  background: #fff url('../img/bg-faq.png') no-repeat bottom right;
}

#content .faq-content{

  .faq-description{
    @include fs12; padding-bottom:2em;
  }

  ul.faq-ul-questions-top{
    margin: 0;
    li{
      list-style: none;
      a{
        @include fs18; @include fs500;
      }
    }
  }

  h3.faq-header{
    @include fs20; @include fs700; line-height:1.2;
    margin: 0;
    a{color:#000;}
  }

  .faq-dl-hide-answer{
    padding: 0;
  }
  .faq-category-group{
    padding-bottom:1em;
  }
  .faq-question-answer{
    padding: 0.3em 0 0 0.8em;
    .faq-question{
      @include fs16; padding: 0; @include fs500;
      a{color:#000;}
    }
    .faq-answer{
      padding: 0; margin-bottom:2em;
      @include fs12;
    }
  }

  .field-name-body img{
    max-width:50%;
    height:auto;
  }
}

/*
    __  __                        _    _____
   / / / /___  ____ ___  ___     | |  / /__ \
  / /_/ / __ \/ __ `__ \/ _ \    | | / /__/ /
 / __  / /_/ / / / / / /  __/    | |/ // __/
/_/ /_/\____/_/ /_/ /_/\___/     |___//____/
*/

body.home-v2{
  background-color: $creme;

  #center{
    background-color: transparent;
    padding:0;
  }
}

@mixin shaddowed(){
  @include drop-shadow(0, 0, 5px, 0.2);
  @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
  &:hover{@include drop-shadow(0, 0, 5px, 0.4);}
}

#home-v2{
  // padding: 40px 40px;
  h2{font-size: 2.1em; font-weight: 300;}
  a{color: #000};


  .field-name-field-liens{
    margin-top:1em;
    .field-item{@include inlineblock(); margin:0 0.5em 0.5em 0; }
    a{
      font-weight: 700; @include inlineblock();
      padding:0.5em 1em 0.7em;
      @include rounded(5px);
      background-color: rgba(255,255,255, 0.8);
    }
  }

  .panel-separator{clear:both;}
  >.panel-panel>div>.panel-pane {
    // padding: 10px 15px;
    overflow:hidden;
    &.pane-node{
      @include rounded(5px);
      overflow:hidden;
      .pane-content, .node{
        position:relative; width:100%; height:100%; overflow:hidden;
      }

      .links a{
        background-color: rgba(255,255,255, 0.7);
        @include rounded(5px);
        padding: 15px;
      }
    }
    &.intro-video{
      height:auto;
      background-color: $creme;
      margin-top:2em;margin-bottom:2em; padding-top:0;
      .field-name-field-emvideo{
        .embedded-video{
          margin:0 auto;
          @media #{$small-only}{
            width:320px; height:180px;
          }
          @media #{$medium-only}{
            width:640px; height:360px;
          }
          @media #{$large-only}{
            width:800px; height:450px;
          }
          @media #{$xlarge-up}{
            width:1024px; height:576px;
          }
          .player, iframe{
            width:100%; height:100%;
          }

        }
      }
      .field-name-title-field{
        display:none;
      }

      .field-name-body{
        display:none;
        margin-top:1em;
        text-align: center;
        p{
          // @include grid-column(6);
          text-align: left;
          @include inlineblock();
          width:35%; margin-left:2%;
          font-size:0.756em;

          @media #{$small-only}{
            width:48%;
          }
        }
      }
    }
    &.pane-menu-menu-home-v2{
      margin:2em 0;
      ul.menu{
        margin: 0px; text-align: center;
      }
      li{
        margin:0 1em 0 0; padding:0px; list-style: none; height:2.5em;
        @include inlineblock();
        a{
          background-color: #4d4d4d;
          @include rounded(5px);
          padding: 5px 12px 7px;
          color: $creme;
          font-size: 18px;
          font-weight: 500;
          transition:opacity,background-color 0.2s ease-out;
        }

        &:nth-child(1){
         // a{color:$orange;}
         &:hover a{background-color: $orange; color:#4d4d4d;}
        }
        &:nth-child(2){
         // a{color:$vertclair;}
         &:hover a{background-color: $vertclair; color:#4d4d4d;}
        }
        &:nth-child(3){
         // a{color:$bleuclair;}
         &:hover a{background-color: $bleuclair; color:#4d4d4d;}
        }
        &:nth-child(4){
         // a{color:$jaune;}
         &:hover a{background-color: $jaune; color:#4d4d4d;}
        }
        &:nth-child(5){
         // a{color:$rose;}
         &:hover a{background-color: $rose; color:#4d4d4d;}
        }
        &:nth-child(6){
         // a{color:$violet;}
         &:hover a{background-color: $violet; color:#4d4d4d;}
        }
        &:nth-child(7){
         // a{color:$rouge;}
         &:hover a{background-color: $rouge; color:#4d4d4d;}
       }
      }

      @media #{$small-only}{
        display:none;
      }
    }

    &.pane-materio-user-user-register{
      padding: 2em 0;
      background: transparent url('../img/register-block.png') no-repeat 100% 90%;
      text-align: center;
      .pane-content{
        @include inlineblock(); text-align: left;
      }

      h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; @include inlineblock(); vertical-align: middle;}
      h2{@include fs24;} h3{@include fs16;}

      form{margin: 0 1em; padding:0px; @include inlineblock(); vertical-align: middle;}

      .form-item, .form-wrapper{
        margin: 0; position:relative; @include inlineblock();vertical-align: middle;
      }

      #edit-account{margin-right:5px;}

      input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
      .form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
      .form-item-pass input.form-text{ width:7em;}

      #edit-mail-check{
        position:absolute; bottom:100%; z-index:9999; background-image: none;
        height:auto; //width:90%;
        padding: 5px; @include rounded(5px); margin-bottom:10px;
        @include fs11;  background-color: #fff;
        @include drop-shadow(0, 0, 5px, 0.6);
        @include transition-simply-prefix(bottom 0.1s ease-out);

        &.error{
          background-color: #f3968d;
          // border: 2px solid #f30002;
          color:#fff;
        }

        &.ok{ display:none; }
      }

      .form-submit{
        //border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
        @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
        font-weight:bold;
        margin-bottom:4px;
      }

      .form-item-termsofservices, #edit-field-newsletter{
        margin-bottom:0; display:block; line-height: 1;
        &>*{ @include inlineblock; vertical-align: middle; margin: 0; }
        label{ @include fs10; background-color: #fff; @include rounded(3px); }
      }

      #user-register-form{
        .form-submit{
          border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
          @include shadowTextBtnBlack();
          &[disabled]{
            background-color:#ddd; border: 2px solid #ddd;
          }
        }

      }
      #user-login{
        .form-submit{
          border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
          @include shadowTextBtnBlack();
        }
      }

      #edit-simplenews{display:none;}

      a.join{
        @include inlineblock(); vertical-align: middle;
        // display:block;
        margin: 0 1em;
        // width:5em;
        @include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
        font-weight:bold;
        border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
        @include shadowTextBtnBlack();
        text-align: center; text-decoration: none;
      }

      @media #{$small-only}{
        background-position: 160% 50%;
        .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
        min-height:60px; padding: 15px 0;
        // #user-login, >h3:first-child, >h3 span{ display:none; }
      }

      .message-error{
        color:#b94a48; @include fs12;
      }
    }

    &.showroom{
      @include shaddowed();
      height:450px;
      margin-top: 15px;
      background-color: #fff;
      // background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
      // background-size: cover;
      position: relative;
      .pane-content{
        width:100%; height:100%; position:relative;
        .node{position:absolute;height:100%;width:100%;}
        .field-name-field-bandeau{
          position:absolute; width:100%; height:100%; overflow:hidden;
          img{width:100%; margin-top:-10%;}
        }
        .group-content-wrapper{
          position:relative;
          z-index:2;
          width:30%;
          margin:3em 2em;

          .group-content{
            background-color: rgba(255,255,255, 0.8);
            padding:1em;
            @include rounded(5px);
            .field-name-title-field{
              font-size: 2.1em; font-weight: 300;
            }
            .field-name-body{
              margin-top: 0.5em;
            }
          }
        }
      }
      @media #{$small-only}{
        height:210px;
        margin-top: 10px;
        .pane-content{
          .field-name-field-bandeau{
            position:absolute; width:100%; height:100%; overflow:hidden;
            img{margin-top:0;}
          }
          .group-content-wrapper{
            width:auto;
            padding:2%;
            margin:2%;
            .field-name-body{
              font-size:0.756em;
              margin-top:0.5em;
            }
          }
        }
      }


      &:after{
        content:url("../img/bulle.png");
        transform: scale(0.8);
        position: absolute;
        bottom:-120px;
        right: -20px;
        z-index:10;
      }
    }
    &.bdd{
      @include shaddowed();
      height:450px;
      margin-top: 30px;
      background-color: #FFF;
      position: relative;
      .links a{background-color: #e6e6e6;}

      .field-name-field-bandeau{
        @include inlineblock(); width:60%; height:100%; overflow:hidden;
        img{max-width:2000px;}
      }

      .group-content-wrapper{
        @include inlineblock(); width:35%;
        background-color: rgba(255,255,255, 0.7);
        padding:1em;
        @include rounded(5px);
        .field-name-title-field{
          font-size: 2.1em; font-weight: 300;
        }
        .field-name-body{
          margin-top: 1em;
        }
        .field-name-field-liens{
          a{
            background-color: rgba(230,230,230, 0.8);
          }
        }

      }

      &:after{
        content:url("../img/boule.png");
        transform: scale(0.8);
        position: absolute;
        bottom:-50px;
        left:   -50px;
      }
    }

    &.formations{
      @include shaddowed();
      position: relative;
      height:300px;
      margin-top: 30px;
      background-color: #000;
      color: #FFF;
      a{color: #FFF;}

      .node{
        padding:0 0 0 30%; width:70%;

        &:before{
          content:" ";
          background: transparent url("../img/formations.png") no-repeat center center;
          background-clip: padding-box;
          background-size: contain;
          position: absolute; left:0;
          // border: 1px solid red;
          z-index: 2;
          width:30%; height:100%;
          // padding:0.5em;
        }
      }

      .group-content-wrapper{
        padding:1em; position:relative;
        .field-name-title-field{
          font-size: 2.1em; font-weight: 300;
        }
        .field-name-body{
          margin-top: 1em;
        }
      }
    }
    &.services{
      @include shaddowed();
      background-color: #FFF;
      height:300px;
      margin-top: 30px;

      .node{
        padding:0 30% 0 0; width:70%;

        &:before{
          content:" ";
          background: transparent url("../img/services.png") no-repeat center center;
          background-clip: padding-box;
          background-size: contain;
          position: absolute; right:0;
          // border: 1px solid red;
          z-index: 2;
          width:30%; height:100%;
          // padding:0.5em;
        }
      }

      .group-content-wrapper{
        padding:1em; position:relative;
        .field-name-title-field{
          font-size: 2.1em; font-weight: 300;
        }
        .field-name-body{
          margin-top: 1em;
        }
      }
    }

    &.publication{
      @include shaddowed();
      position: relative;
      // height:300px;
      margin-top: 30px;
      padding:1em;
      background-color: #000;
      &, a, h1, h2{color: #fff;}
      @include rounded(10px);
      .view-publication-home-v2{

        .views-row{
          @include inlineblock();
          width:30%;
          h1{display:none;}
        }
      }
    }
  }
  //mini panneau news
  >.panel-panel>div>.pane-news-home-v2{
    background-color: #e6e6e6; @include rounded(10px);
    margin-top: 30px; padding-top: 1em; padding-bottom: 1em;
    // padding:0;
    position: relative;
    // .panel-col-first{width:70%;}
    // .panel-col-last{width:29.9%;}
    h2{font-size: 30px;}

    #mini-panel-news_home_v2 .center-wrapper{
      @include grid-row();
      .panel-panel{
        overflow:hidden;
        @include grid-column(4);
        // width:32.8%;
        padding:0em; margin-left:1em;
        &.panel-col-first{width:auto;}
        &:not(.panel-col-first){width:31%;}
        .inside{margin:0;}
        article.node,  article.node-breve.vm-cardbig{margin:0; height:610px;}
      }
    }
    #mini-panel-news_home_v2 .panel-col-bottom{
      @include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
      >.inside{
        @include grid-column(12);
      }

      p{display:none;}
      .form-checkboxes{
        margin:0 0 0.5em 0;
        .form-item{
          @include inlineblock(); margin-right: 1em;
          label, input{vertical-align: middle;}
        }
      }

      .form-item-mail{
        @include inlineblock(); margin:0;
        label, input{@include inlineblock(); margin-right: 1em;}
      }

      #edit-subscribe, #edit-unsubscribe{@include inlineblock();}
    }



    // .view-news-home-v2{
    //   .views-row{@include inlineblock();}
    // }
    .node-simplenews{
      @include rounded(5px); background-color: #FFF;
      @include drop-shadow(0, 0, 5px, 0.2);
      @include transition-simply-prefix(box-shadow 0.3s ease-out);
      overflow:hidden;
      position:relative;
      margin:7px;
      >a{
        position:absolute;
        bottom:0; width:100%;
        background-color: #FFF;
        text-align: center;
        h1{
          padding: 10px; margin:0;
          font-size:1em;
        }
      }

    }

    //deco
    &:after{
      content:url("../img/point.png");
      //transform: scale(1);
      position: absolute;
      bottom:20px;
      right: 10px;
    }
  }



}





@import "misc.scss";
// end