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

/**
 * Primary Drupal Styles
 * Author: g-u-i.net
 */

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

@import "gui.scss";

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

#root{
  // background: #fff url('../img/beta-2.png') no-repeat 0px 0px;
}

@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; @include bgc(#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 &{
    @include opacity(1);
    @include transition-simply-prefix(opacity 0.3s ease-out);
  }
}
.op-hidden{
  visibility:hidden;
  >*{
      margin-top:-100000px;
    }
  .csstransition &{
    @include 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 &{
    @include opacity(1);
    @include transition-simply-prefix(opacity 0.3s ease-out);
  }
} // change this

@mixin op-hidden(){
  visibility:hidden;
  >*{
      margin-top:-100000px;
    }
  .csstransition &{
    @include 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; @include bgc(#ccc); color:#4D4D4D; // blanc/bleu
  @include shadowTextBtnWhite();
  text-align: center; text-decoration: none;

}

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

@mixin bouton-vert(){
  @include bouton();
  @include shadowTextBtnBlack();
  border-color:#E6DE1C; @include bgc(#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(){
  @include bgca(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(){
  @include bgca(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(){
//   @include bgca(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 */
#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.beta{
      line-height:1; letter-spacing: 0.1em;
      color:rgb(0,0,122); 
      @include fs12;
      position:absolute; left:0; @include pl(0); @include ml(0);
    }
    span.slogan{
      @include fs14;
      margin-top:-3px;
      margin-left:-0.5em;
      @include fs900;
      @media #{$medium-only} {display:none;} //change this
     .ie8 &{position: absolute; margin-top:22px;}
    }
  }

  #header-blocks{
    //position:absolute; right:0; bottom:0;
    @include pt(17px);
    float:right;
    text-align:right;
    text-transform: capitalize;

    >.region{
      @include inlineblock();vertical-align:middle;
      @include pr(1em); @include mr(1em);
      @media #{$small-only}{ @include pr(0.3em); @include mr(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){
        @include pr(0.8em); 
        @media #{$xlarge-only}{ @include pr(0.3em); } //change this
      }
    }

    #block-user-login{
      @include fs12;
      text-align:left; position:relative;
      h2{
        @include pr(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; @include pb(5px);}
        label,input{
          margin: 0;
          @include fs10;
        }
        // label{width:30%;}
        input.form-text{width:150px;}

        #edit-actions{
          margin: 5px 0; padding: 0; @include bgc(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; @include bgca(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{@include pr(5px);}

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

        }
      }

      &:hover{
        section.mylists{
          @include pb(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 #{$medium-only}{ span.menu-title{display:none;} } //change this
      }
    }

    #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; @include ml(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{
      @include ml(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; @include pt(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;
  }
}

#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{@include mr(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%; }
      .field-name-title-field{@include fs20; cursor:pointer; }

      .node-didactique:not(:first-child){
        .field-name-title-field{ font-weight:normal; &:before{content:"- ";}}
      }

      html.js & .node-didactique{
        height:auto;
        height:25px; 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; 
      @include bgc(#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 register */
#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; @include bgc(#fff); @include inlineblock(); min-width:50%;}
  h2{@include fs24;} h3{@include fs16;}

  form{margin: 0; @include bgca(255, 255, 255, 0.7); @include pb(5px); @include inlineblock(); }

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

  #edit-account{@include mr(5px);}

  input.form-text{ @include fs12; @include rounded(5px); @include mb(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); @include mb(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; @include bgc(#69CDCF); color:#FF7400; // orange/bleu
    @include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
    font-weight:bold;
    @include mb(4px);
  }

  .form-item-termsofservices, #edit-field-newsletter{
    @include mb(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; @include bgc(#69CDCF); color:#fff; // blanc/bleu
      @include shadowTextBtnBlack();
      &[disabled]{
        @include bgc(#ddd); border: 2px solid #ddd;
      }
    }

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

  #edit-simplenews{
    @include pt(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; @include bgc(#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;}
  }

  @media #{$small-only}{
    min-height:60px; padding: 15px 0;
    #user-login, >h3:first-child, >h3 span{ display:none; }
  }

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

  .modal-content &{
    padding: 0.5em 0.5em 5em 0.5em;

    width:400px;
    background-color: #fff;
    padding:5px;
    @include rounded(5px);

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

      .description{
        @include fs12;
      }
    }

  }
}

/** content-top */
#content-top{
  // padding-left:50px;

  /** flag-list */
  #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;
        @include opacity(0); @include transition-simply-prefix(opacity 0.1s ease-out);
      }
    }

    &:hover{
      a.open-list, i.fi-x{
        @include 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 &{@include bgc(#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 ; @include mr(5px);}
    i.icon-materio-folder{@include mb(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 #{$medium-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 #{$medium-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; @include bgc(#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(20px);
      padding: 4px 5px; height:25px;
      @include fs12; line-height:1;
      background-position: 100% 5px;
      &.throbbing { background-position: 100% -15px; }
    }

    #edit-searchfield-autocomplete-aria-live{
      .oldie &{
        @include bgc(#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 &{ @include bgc(#fff); }
  .ie8 &{height:100%; margin-top:20px;}

}

#content{
  // background-color: #f3f3f3;
  // @include rounded(5px);
  @include transition-simply-prefix(height 0.3s ease-out);
  &.faded{
    @include 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 &{
    // @include pl(15px);
  }
}

/** #content-bottom */
#content-bottom{
  @include pt(10px);
}

/** CARDS */

$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;

  //z-index:10; // pourquoi ce z-index ?
  @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{ @include 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; @include pl(0); @include pr(0); @include mr(0); @include ml(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
    // @include bgca(10, 10, 10, 0.9); color:#fff;
    // a{color:#fff;}
    //ul{@include bgca(10, 10, 10, 0.9);}
    @include bgca(255, 255, 255, 0.9); color:#000;

    a{color:#000;}
    ul{@include bgca(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; @include mr(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%; @include pl(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%;
            >*{ @include mt(1px); @include pt(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;
    @include bgca(255, 255, 255, 0.9); color:#000;
    span{padding: 3px 0 0 4px; @include inlineblock();}
  }

  .field-name-field-description .upgrade{
    @include fs12;
    @include pt(4em);@include mt(-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; @include bgc(#69CDCF); color:#fff; // blanc/bleu
      @include shadowTextBtnBlack();
      text-align: center; text-decoration: none;
    }
  }
}// .card()

/** card search performance */
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; @include bgc(#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;
  }
}

/** CARD BOOKMARKS */
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;}
}

/** CARD SMALL */
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 SMALL CARD */
#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; }
  }
}

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

  .side{
    @include layer(); @include bgc(#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>*{@include pr(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}}
}

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

  .side{
    @include layer(); @include bgc(#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; @include bgc(#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; @include bgc(#69CDCF);
    }
  }
}

/** CARD FULL */
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; @include pr(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{@include mt(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; @include bgc(#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; @include bgc(#69CDCF);
    }
  }
}

@import "misc.scss";


/** AUTOCOMPLETE */
#autocomplete{
  border: 0; @include rounded(3px);
  @include bgca(0,0,0,0.6);
  text-align: left;
  margin-left: 2px;
  .oldie &{@include bgc(#545454);}
  li{
    color:#FFF; background-color: transparent;
    &.selected{@include bgca(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; @include bgc(transparent);}
  @include fs12;
  form{
    @include bgc(transparent); color:#fff; border: 0px;

    .form-actions{
      @include bgc(transparent); margin: 0; padding: 0; border: 0;
    }
    input.form-text, textarea, div.grippie{@include bgc(#fff); color:#000; border: 0;}

    .form-actions{ text-align: right ;}
    input.form-submit{
      @include button; 
      //@include btn-mini; color:#000; //change this btn bootstrap -> foundation 
      &[name="create"]{
       // @include btn-info; change this
      }
    }
  }
}

#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%;
      @include 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;
    }
}

/** MODALCONTENT */
// deprecated ??
// #modalContent{
//   @include mat_modal();
//   .ctools-modal-content{
//     border: 0; @include bgc(transparent); color:#fff;
//     .modal-header{
//       @include bgc(transparent); border: 0;
//       #modal-title{
//         padding: 5px, 0;
//       }
//       a.close{
//         width:10px;height:10px;
//         // TODO:  setup the sprite
//         background-image: url('../img/close.png');
//         img{display:none}
//       }
//     }
//     .modal-content{
//       .form-item{
//         label, input{
//           @include inlineblock(); vertical-align: middle;
//         }
//         label{width:35%;}
//         input.form-text{width:60%;}
//         div.description{text-align: right ;}
//       }

//       // .form-actions{
//       //   @include bgc(transparent); margin: 0; padding: 0; border: 0;
//       // }
//     }

//     .ajax-register-links-wrapper{
//       .ajax-register-links{
//         .btn-group;
//         li a{.b(0); @include fs10; .btn; .btn-mini; .btn-inverse;}
//       }
//     }
//   }
// }



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

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

/** TOOLTIP */
#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 
  }
}

/** FEEDBACK */
#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); @include bgc(#ff7600); color:#fff;
    line-height:2; @include fs900;
  }
  .content{
    @include mat_modal();
    .ie8 &{background:#000;}
  }

  #feedback-status-message{@include bgc(#fff); padding: 5px;}
}

/** TASK / TABS **/
@mixin tabs-primary(){
  a{
    @include fs12;
    padding: 5px 10px;
    @include bgc(#e6e6e6);
    &.active, &:hover{@include bgc(#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();
    }
  }
}


/** STATICS */

/** user */
.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; @include pt(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; @include mr(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

/** SIMPLENEWS */
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 CONTACT */
.page-node-11175{
  #main{
    // @include bgc(#fff);
    background: #fff url('../img/bg-contact.gif') no-repeat bottom right;

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

/** PRICING */
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{
          @include inlineblock;  margin: 10px;
        }
        div.column{
          width:22.4%;
          ul.list-text{ 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;
    }
  }

  @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; }
        .subtitle{
          padding: 0 0 0 1em;
          @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;
          }
        }
        .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; }
        }
        &.gratos{ .get-link{background-color: #4BA13D; } }
        &.flocon{ .get-link{ background-color: #69CDCF; } }
        &.etoile { .get-link{ background-color: #D476AE; } }
        &.cinqetoiles { .get-link{ background-color: #E6DE1C; } }
        // &.ecole-de-neige { .list-neige{min-height:80px;} }
      } // 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; @include bgc(#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.flocon{.get-link{
        cursor:auto!important;
        a{display:none!important;}
      }}
    }
  }
} // princing

/** ADHESION FORM */
.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;
      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; @include mr(1em); border-bottom: 1px solid #cccccc; }
    .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; @include ml(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; @include mr(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{ @include mt(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; @include bgc(#69CDCF); color:#fff;
      @include fs18; padding: 0.2em 1em 0.3em; @include rounded(0.3em);
      font-weight:bold;
      @include mb(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{
    @include mb(0.5em);
    input, label{margin: 0 0.3em 0 0;}
    label{ width:auto; }
  }
} // adhesion

/** UC CART VIEW FORM */
#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; }
      }
    }
  }

  .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();
      @include ml(1em);
      &#edit-checkout--2{
        @include bouton-bleu();
      }
    }
  }
}

/** UC CHECKOUT FORM */
#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.form-row{
    //    @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
    @include pb(20px); @include mb(20px);
    // fieldset{ border: 0 solid #ddd; padding: 0;}
  }

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

  fieldset.form-column-left{}

  fieldset.form-column-right{
     border-left:1px solid #ccc;
    @include ml(2em); @include pl(2em);
    // @include bgc(#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; @include ml(1em); color:#7f7f7f;}

  #cart-pane{
    >.fieldset-wrapper{
      @include inlineblock();
      @include rounded(5px);
      padding: 10px;
      @include bgc(#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; @include mr(1em); border-bottom: 1px solid #cccccc; }
    input.form-text{width:13em;}
  }

  #coupon_automatic-pane{}

  #coupon-pane{}

  #payment-pane{
    float:right;

    .fieldset-wrapper{
      @include bgc(#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;
    }
  }

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

    }
  }
}

/* UC CART && UC CHECKOUT VALIDATION */
//.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();
    @include ml(1em);
    &#edit-submit{
      @include bouton-bleu();
    }
  }
}


/** WHO WE ARE */
#didactique-page{

    .node-didactique{
      @include rounded(5px); background-color: #FFF;
      @include drop-shadow(0, 0, 5px, 0.2);
      max-width:850px;
      @include fs14; @include bgc(#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
} // who-we-are

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

/** maintenance */
.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;}
}

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

#content .faq-content{

  .faq-description{
    @include fs12; @include pb(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{
    @include pb(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; @include mb(2em);
      @include fs12;
    }
  }

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