materio-base-d7/sites/all/themes/gui/materiobasetheme/less/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";



#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; }
  }
}

.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);
    >*{
      @include transition-simply-prefix(margin-top 0s 0.3s);
    }
  }
}

@mixin bouton(){
  // .16; change this
  font-weight:bold;
  @include p(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){
  @include p($padding);
  &.columnized{
    @include p(0);
    .column>*{@include p($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;
      // .700; .22; change this
      @include p(0.05em 0.15em 0.2em 0.2em); line-height:0.5; 
      // .regular;change this
      &.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);
}
@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);
}

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

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

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

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

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

  .logo{
    //width:210px; //padding-left:5px; //margin-left:50px;
    // .inlineblock; change this
    h1{
      margin:0; 
      //.36; change this 
      @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); 
      //.12; change this
      position:absolute; left:0; @include pl(0); @include ml(0);
    }
    span.slogan{
      // .14; change this
      margin-top:-3px;
      margin-left:-0.5em;
      // .900; change this
      //@media $max-980{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 $max-768{ .pr(0.3em); .mr(0.3em); } change this 
      border-right: 1px solid #707070;
      &:last-child{border:none; @include p(0); @include m(0);}
    }

    .block{
      @include inlineblock(); vertical-align:middle;
      h2{
        //.12; change this  
        @include m(0); line-height: 1.2; font-weight: normal; }
      &:not(:last-child){
        @include pr(0.8em); 
        // @media $max-1200{ .pr(0.3em); } change this
      }
    }

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

        #edit-actions{
          @include m(5px 0); @include p(0); @include bgc(transparent); text-align: right;
          input.form-submit{
            //.12; change this  
            @include p(10px);
          }
        }
        div.newpass a{
          //.12; change this 
          color:#686868;
        }

        // div.register a{
        //   display:block; .p(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 $max-480{
      //   span.login{display:none;}
      // } change this
    }

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

          a, span.preview{white-space:nowrap; cursor:pointer;}
          a.open-list{max-width:150px;}
          span.count{
            //.300; change this 
            @include p(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; @include p(3px 10px); }
        }
      }

      h2{
        i{ vertical-align: text-bottom; @include m(0 2px 2px 0);}
        // @media $min-980{ i{display: none;} }
        // @media $max-980{ span.menu-title{display:none;} } change this
      }
    }

    #block-ajax-register-ajax-register-block{
      // .12; change this 
      text-transform: lowercase;
    }

    #block-logintoboggan-logintoboggan-logged-in{
      // .12; change this
      i{
        vertical-align: text-bottom;
        @include m(0 2px 1px 0);
      }
      a span.account{text-transform: lowercase;}
      a span.logout{display:none; @include ml(5px); }
      .icon-off{@include m(0 0.5em 0 0.5em);}
      // @media $min-768{ .icon-off{display: none;} }
      // @media $max-768{ a span.logout{display:none;} }
      
      // @media $max-768{a span.account{display:none;}} change this
    }

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

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

    // #block-menu-menu-about{
    //   position:relative;
    //   ul.menu{
    //     position:absolute; .p(0 5px 5px 5px); .m(0); width:100px; display:none; right:0; text-align: right;
    //     background-color: #e6e6e6; .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; @include m(0 0 2px 0);}
      }

      ul.menu, li{
        // .12; change this  
        list-style: none;
        .ie8 &{display: inline;}
      }
      // menu en ligne
      // @media $min-768{
      //   h2{display:none;}
      //   ul.menu, li{
      //     .inlineblock; vertical-align: middle;
      //     .p(0); .m(0);
      //   }
      //   a{.p(0 0.5em 0 0);}
      // } change this

      //menu deroulant
      // @media $max-768{
      //   position:relative;
      //   h2 .menu-title{display: none;}
      //   .menu-wrapper{
      //     position:absolute; width:150px; display:none; right:0; .pt(5px);
      //     ul.menu{
      //       background-color: #e6e6e6; .rounded(5px); .p(0 5px 5px 5px); .m(0); text-align: right;
      //       li{
      //         height:0;
      //         overflow:hidden;
      //         .transition-simply-prefix(height 0.3s ease-out");
      //         a{
      //           display:block; width:100%; padding:2px 5px; .12;
      //         }
      //       }
      //     }
      //   }
      //   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{
        // .12 change this
      ;}
    }

    #block-materio-user-front-link{
      a{
        // .12; change this
      }
      i{ vertical-align: text-bottom; @include m(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);
  @include p(0.5em);
  position:relative;

  // @media $min-768{
  //   .m(20px 0 6px);

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

  //     .field-name-title-field{.24;}
  //     // .field-name-field-visuel{}

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

  //   }
  //   #block-materio-user-user-register{
  //     width:30%;.p(5px); height:290px;
  //   }
  // }

  // @media $min-480{
  //   .block-materio-didactique{
  //     .side{.inlineblock(); vertical-align: top;}
  //   }
  // }

  // @media $max-768{
  //   .m(10px 0 6px);
  //   .block-materio-didactique{
  //     .group-sideleft, .group-sideright{ width:100%; }
  //     .field-name-title-field{ .20; 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 @480-768{
  //   .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{
      // .14; change this 
      @include bgc(#fff); //.p(5px);
      @include m(0 auto);
      // .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}

      .side{position:relative;}

      .field-name-title-field{ 
        // .900; 
        // .italic; change this 
        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; @include m(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 $max-480 { $w:290px; width:$w; height:$w*$r; }
            @media @480-768 { $w:216px; width:$w; height:$w*$r; }
            @media @768-980 { $w:216px; width:$w; height:$w*$r; }
            @media @980-1200 { $w:280px; width:$w; height:$w*$r; }
            @media $min-1200 { $w:340px; width:$w; height:$w*$r; }
            *{height:100%; width:100%;}
          }
        }
      }
      .tabs{
        height:30px; .m(0); text-align:left;
        >*{
          .inlineblock(); vertical-align: top ; padding:5px 10px; .12; cursor:pointer; color:#bfbfbf;
          &:hover, &:focus, &.active{color:#3f3f3f;}
        }
      }
    }
  }
}

/** block register */
#block-materio-user-user-register, #block-materio-user-user-createaccount{
  min-height:120px; .p(5px);
  background: transparent url('../img/register-block.png') no-repeat 100% 90%;
  .ie8 &{max-width:250px; float:right; background-image:none;}


  h2, h3{.900; .italic; padding:5px 0; .m(0); line-height: 1; .bgc(#fff); .inlineblock(); min-width:50%;}
  h2{.24;} h3{.16;}

  form{.m(0); .bgca(255, 255, 255, 0.7); .pb(5px); .inlineblock(); }

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

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

  input.form-text{ .12; .rounded(5px); .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%;
    .p(5px); .rounded(5px); .mb(10px);
    .11;  background-color: #fff;
    .drop-shadow(0, 0, 5px, 0.6);
    .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; .bgc(#69CDCF); color:#FF7400; // orange/bleu
    .16; .p(0.1em 0.6em 0.2em); .rounded(0.3em);
    font-weight:bold;
    .mb(4px);
  }

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

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

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

  #edit-simplenews{
    .pt(0.5em);
    .fieldset-description{
      .12;
    }
    .form-checkboxes{
      .form-item{
        display:block;
        label{.12;}
      }
    }
  }

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

  @media $max-480{
    background-position: 160% 50%;
    .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
  }

  @media $max-768{
    min-height:60px; .p(15px 0);
    #user-login, >h3:first-child, >h3 span{ display:none; }
  }

  .message-error{
    color:#b94a48; .12;
  }

  .modal-content &{
    .p(0.5em 0.5em 5em 0.5em);

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

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

      .description{
        .12;
      }
    }

  }
}

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

  /** flag-list */
  #block-materio-flag-materio-flag-mybookmarks, #block-materio-flag-materio-flag-mylists{
    // padding:5px 0;
    .10; color:#666666; .300;
    .ie8 &{margin-top:40px;}

    h2{
      .12; .700; .m(0);  line-height:1.2; color:#000;
      a.open-list, i.icon-remove{
        .inlineblock(); cursor:pointer;  color:#000;
        .opacity(0); .transition-simply-prefix(opacity 0.1s ease-out");
      }
    }

    &:hover{
      a.open-list, i.icon-remove{
        .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;
    &>*{
      .inlineblock();
      vertical-align: middle ;
      // height:35px;
      //  margin: 5px;
    }
    @media $max-480{
      .p(0); h1{line-height:0.5;}
    }
  }
  // text-align:right;
  // >*{ text-align: left ;}

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

  .oldie &{.bgc(#B1ADAD); .p(0 10px);}

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

  #block-materio-page-title-materio-page-title{
    // .ie8 &{margin-top:40px;}
    .m(0 10px 0 0);
    h1{ .m(0); .24; text-transform: capitalize; .300; line-height:1;}
    i{ vertical-align: middle ; .mr(5px);}
    i.icon-materio-folder{.mb(2px);}
    a.edit-list{
      .op-hidden;
      i{ .m(0 0 0 5px);}
    }
    &:hover{
      a.edit-list{ .op-visible; }
    }

    @media $max-980{
      display:block;
    }
  }

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

    }
    @media @480-768{
      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{
    // .inlineblock(); vertical-align: middle ;
    // position:absolute; top:10px; right:0;
    float:right;
    >.inner{
      .inlineblock(); margin:0 0 0 10px; .p(3px 10px); .bgc(#fff); .rounded(3px); .shadowBtn(); text-align: right;
    }
  }

  #materio-search-api-search-form{
    text-align: right;
    .inlineblock(); .m(0);

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

    .form-checkboxes{
      .p(3px); .12;
      .form-item{
        margin:0 5px;
        label{.10;}
      }
    }

    input#edit-searchfield{
      .b(1px, #ccc); .rounded(20px);
      .p(4px, 5px); height:15px;
      .12; line-height:1;
      background-position: 100% 5px;
      &.throbbing { background-position: 100% -15px; }
    }

    #edit-searchfield-autocomplete-aria-live{
      .oldie &{
        .bgc(#1a1a1a);
      }
    };

    input#edit-create{ .p(3px); }

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

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

}

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

}

#content{
  // background-color: #f3f3f3;
  // .rounded(5px);
  .transition-simply-prefix(height 0.3s ease-out");
  &.faded{
    .opacity(0.5);
    .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{.12; .500; .m(0); padding:10px 0 5px 15px;}
    // p.search-performance{.role-7 & {.12;}}

    .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; .inlineblock(); vertical-align: middle;}

    .pager-current, a{color:#000;.12; }
    .pager-current{.900; .14;.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{ .24; .300; } }

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

  .node-type-page &{
    // .pl(15px);
  }
}

/** #content-bottom */
#content-bottom{
  .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;

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

  //z-index:10; // pourquoi ce z-index ?
  .rounded(5px); background-color: #FFF;
  .drop-shadow(0, 0, 5px, 0.2);
  .transition-simply-prefix(box-shadow 0.3s ease-out, opacity 0.3s ease-out");
}

.card($w, $h){
  .card-box($w, $h);

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

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

  &.just-added{ .opacity(0); }

  &.associated{
    .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{
    .transition-simply-prefix(width 0.3s ease-out");
    width:0; .pl(0); .pr(0); .mr(0); .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); .m(3px);
    // .drop-shadow(0, 0, 3px, 0.6);
  // }

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

    // colors
    // .bgca(10, 10, 10, 0.9); color:#fff;
    // a{color:#fff;}
    //ul{.bgca(10, 10, 10, 0.9);}
    .bgca(255, 255, 255, 0.9); color:#000;

    a{color:#000;}
    ul{.bgca(255, 255, 255, 0.9);}
    span.op{.900; .14;}

    ul{.p(0); .m(0);}

    section{
      position:relative;

      &>i{.m(0 5px); &:hover{cursor:pointer;}}
    }

    ul{
      position:absolute; right:0; top:0; .mr(22px); min-width:80px; .p(0); display:block;
      .rounded(3px); .drop-shadow(-2px, 2px, 5px, 0.2);
       // .p(5px 10px);
      li{
        .p(0); .m(0); line-height:1; display:block;
        height:0; overflow:hidden;  .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{
          .inlineblock(); min-width:48%; max-width:98%; .pl(2px);
          a{
            color:#a6a6a6; .transition-simply-prefix(color 0.2s ease-out");
            &:hover, &.unflag-action{
              color:#000; text-decoration: none;
            }
          }
          &.flag-lists-create{
            display:block; width:100%;
            >*{ .mt(1px); .pt(1px); .bt(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{
        .p(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;
    .p(5px);
    .border-radius(5px, 0, 3px, 0);
    .11; vertical-align: top;
    .bgca(255, 255, 255, 0.9); color:#000;
    span{.p(3px 0 0 4px); .inlineblock();}
  }

  .field-name-field-description .upgrade{
    .12;
    .pt(4em);.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{
    .p(10px); .12;
    a{
      display:block; .m(10px 0);
      .18; .p(0.1em 0.6em 0.2em); .rounded(0.3em);
      font-weight:bold;
      border: 2px solid #69CDCF; .bgc(#69CDCF); color:#fff; // blanc/bleu
      .shadowTextBtnBlack();
      text-align: center; text-decoration: none;
    }
  }
}// .card()

/** card search performance */
article.search-performance{
  .inner{
    .p(1em);
  }

  p{.14;}

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

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

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

/** CARD SMALL */
article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall{
  .card($cardsmall_w, $cardsmall_h); //width:100px; height:140px;
  .group-header{
    display:none; position:absolute;
    .14; .500;
    .field-name-title-field{.700;}
    .field-name-field-reference-materio, .field-name-field-localisation{ .inlineblock(); .12; }
    .field-name-field-localisation{ float:right; }
  }
  .group-images{ .horihoverswitch(); .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{.op-hidden;}

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

/** TOOLTIP SMALL CARD */
#tooltip{
  .group-header.smallcard{
    .14; .500;
    .field-name-title-field{.700;}
    .field-name-field-reference-materio, .field-name-field-localisation{ .inlineblock(); .12; }
    .field-name-field-localisation{ float:right; }
  }
}

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

  .side{
    .layer(); .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;
    .20; .300; line-height:1;
    .field-name-title-field{.700;}
    .field-name-field-nature-titre{.14;}
    .bgcWhite();

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

    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ .inlineblock(); .12; 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{
    // .20; .300; line-height:1.1;
    color:#fff; .bgcBlack();
    .field-name-field-authored-on{ .12; .500; }
    .ie8 &{background:#000; font-size:15px; line-height: 1.2em;}
  }

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

  .group-images{ .horihoverswitch(); }

  // side 2
  .field-name-field-description, .field-name-body{
    .12; .300; overflow: hidden; z-index:-1; .columnized(5px); .column>*{.pr(25px);}
  }

  // side 3
  .column-wrapper{
    .columnized(5px);
  }
  .field-name-field-company-fab, .field-name-field-company-distrib{
    .12; padding:5px; .300;
    .field-label{ .10; text-transform: lowercase; margin:0;}
    .field-name-field-tode-company{.14;}
    // span.print-link{display:none;}
  }

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

    .12; .p(5px); .300; a{color:#000;}
  }
  .field-label{.900; .m(1em 0 0.5em);}
  // nav
  .no-touch &:not(.focused) nav.nav{.op-hidden;}

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

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

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

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

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

  .group-header{
    position:absolute; bottom:0; z-index:2;
    width:405px; padding:10px;
    .20; .300; line-height: 1.1;
    .field-name-title-field{.700;}
    .field-name-field-nature-titre{.14;}
    .bgcWhite();
    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on { .inlineblock(); .12; 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; .bgcBlack();
    .field-name-field-authored-on{ .12; .500; }
    .ie8 &{background:#000; font-color:#fff; line-height: 1em; padding: 20px;}
  }

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

  // side 2
  .field-name-field-description, .field-name-body{
    .12; .300; .columnized(10px);
  }
  // side 3
  .column-wrapper{
    .columnized(10px);
  }
  // side 4
  .field-name-field-company-fab, .field-name-field-company-distrib{
    .12; padding:10px; .300;
    .field-label{ .10; text-transform: lowercase; float: none; }
    .field-name-field-tode-company{.14;}
  }


  .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
    .12; .p(10px); .300; a{color:#000;}
  }
  .field-label{.900; .m(0 0 0.5em);}

  // nav
  // nav.nav{ .m(5px); }
    .ie8 &{nav.nav{background: #FFF}}

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

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


  font-size:0px;
  >*{.16;}

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

  }

  .group-images{ .horihoverswitch(); }

  .group-header{
    .20; .300; padding:10px;
    .field-name-title-field{.700;}
    .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ .inlineblock(); .12; .pr(15px);}
    // .field-name-field-localisation{ float:right; }
  }

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


  .field-name-field-description, .field-name-body{
    .12; .300; .p(10px);
  }

  .field-name-field-attachments{
    .p(10px);
    .12;
  }

  // side 4
  .field-name-field-company-fab, .field-name-field-company-distrib{
    .12; padding:10px; .300;
    .inlineblock(); width:40%;
    .field-item{.mt(1em);}
    .field-label{ .10; text-transform: lowercase; float: none; }
    .field-name-field-tode-company{.14;}
  }

  .field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
    .12; .p(10px); .300; a{color:#000;}
  }
  .field-label{.900; .m(0 0 0.5em);}

  // nav
  nav.nav{ .m(5px); }

  div.workflow{ .m(5px); }

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

@import "misc.less";


/** AUTOCOMPLETE */
#autocomplete{
  .b(0); .rounded(3px);
  .bgca(0,0,0,0.6);
  text-align: left;
  margin-left: 2px;
  .oldie &{.bgc(#545454);}
  li{
    color:#FFF; background-color: transparent;
    &.selected{.bgca(0,0,0,0.8);}
    div{padding:0.1em 5px;} .12;
  }

}

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

    .form-actions{
      .bgc(transparent); .m(0); .p(0); .b(0);
    }
    input.form-text, textarea, div.grippie{.bgc(#fff); color:#000; .b(0);}

    .form-actions{ text-align: right ;}
    input.form-submit{
      .btn; .btn-mini; color:#000;
      &[name="create"]{
        .btn-info;
      }
    }
  }
}

#modal{
  .mat_modal();
  >*{.p(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;
    }
}

/** MODALCONTENT */
// deprecated ??
// #modalContent{
//   .mat_modal();
//   .ctools-modal-content{
//     .b(0); .bgc(transparent); color:#fff;
//     .modal-header{
//       .bgc(transparent); .b(0);
//       #modal-title{
//         .p(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{
//           .inlineblock(); vertical-align: middle;
//         }
//         label{width:35%;}
//         input.form-text{width:60%;}
//         div.description{text-align: right ;}
//       }

//       // .form-actions{
//       //   .bgc(transparent); .m(0); .p(0); .b(0);
//       // }
//     }

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



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

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

/** TOOLTIP */
#tooltip{
  position:absolute; z-index:999; max-width:180px; background-color: rgba(255, 255, 255, 1); .p(5px); .rounded(3px);
  .12; .500;
  .drop-shadow(0, 0, 5px, 0.4);
  &.op-visible{
    .transition-simply-prefix(opacity 0.1s ease-out, top 0.1s linear"); // left 0.1s linear,
  }
}

/** FEEDBACK */
#block-feedback-form{

  @media $max-768{ bottom:5px; left:5px; right:auto; }

  h2{
    line-height:1.2; .14; .m(0);
    .title{display:none;}
  }

  #feedback-form-toggle{
    .p(2px 3px); .rounded(3px); .bgc(#ff7600); color:#fff;
    line-height:2; .900;
  }
  .content{
    .mat_modal();
    .ie8 &{background:#000;}
  }

  #feedback-status-message{.bgc(#fff); .p(5px);}
}

/** TASK / TABS **/
.tabs-primary(){
  a{
    .12;
    .p(5px 10px);
    .bgc(#e6e6e6);
    &.active, &:hover{.bgc(#e6e6e6);}
    .rounded(3px);
  }
}
.tabs-secondary(){
  .10;
  .p(0.5em 1em);
}
#tasks{
  ul.tabs{
    .inlineblock();
    border:0 solid #fff;
    .p(0); .m(0);
    li{.p(0); .m(2px 5px); border:0 solid #fff;}
    a{
      border:0; color:#7f7f7f;
      &.active, &:hover{font-weight: 900; color:#000;}
    }

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

    &.secondary{
      .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{.tabs-primary();}

  #content .inner-content >*{
    width:800px; margin:0 auto; .pt(1em); .14;

    fieldset{
      margin-bottom:1em;
    }

    legend{
      .16; 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{
        .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{.14; margin:0;}
    }

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

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

    div.description{
      .11;
    }
    div.form-actions{
      .m(0); text-align:right; .p(1em 0.5em);
    }

    input#edit-submit{.btn; .btn-success;}

    /* #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{
      .inlineblock(); vertical-align:middle; width:auto; .m(0 1em 0.5em 0);
      div{width:auto; .m(0); .p(0);}
      // label{.m(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{ .m(2em 0 0 0); input{width:35em;} }
    #edit-profile-adherent-field-employee{
      input{width:4em;}
    }

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

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

    #edit-profile-adherent-field-user-website{
      .m(2em 0 0 0);
      .form-item>*{.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{
      .inlineblock();
      max-width:600px;
      padding:1em 0;
      tbody{
        border-top:0px;
      }
    }
  }
}

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

    .field-name-body p{
      .inlineblock; .m(15px);
      strong{.18;}
    }
  }
} // contact

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

  @media $min-480{
    .node-11187{
      .field-name-body{
        div.column, div.column-demi, div.column-full, div.column-auto{
          .inlineblock;  .m(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; .m(0 auto);
    // }
  }

  @media $max-480{
    // #block-materio-user-user-register{  .p(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;
        .rounded(5px); .drop-shadow(0, 0, 6px, 0.5);
        .ie8 &{max-width:500px; margin:auto; margin-bottom:15px; border:1px solid #C6C6C6;}
        overflow:hidden;

        &>*{ .p(0 10px);}
        img{float:left; .p(0); }
        h2{ text-align: left; .m(5px 0 0); }
        .subtitle{
          .p(0 0 0 1em);
          .18; .italic; .bold; line-height:1;
        }
        ul{.m(0); .p(0 15px);}
        li{
          list-style: none; .12;
          &:before{
            content:"+ ";
            .900;
          }
        }
        .get-link{
          .m(0); .border-radius(0 0 5px 5px); border: 1px solid #fff; min-height: 92px;
          a{ display:block; width:100%; .p(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; .24; }
        .subtitle{ min-height:3em; }
        .get-link{
          .p(0);
          .28; text-align: center;
          .italic; .900;
          span{ .20; }
          .shadowTextBtnWhite();
        }
      }
      div.column-demi{
        h2{ padding:10px 0 0; .24; top:0; }
        .subtitle{ min-height:2em; }
        ul{ .14; min-height:120px;}
        .get-link{ .14; text-align: left; .p(0 1em); .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;}
      }}
    }
  }
} // pricing

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

#webform-client-form-11186{
  @media $min-768{
    .p(10px 30px);
    #webform-component-column-left--membership-options{
      .m(10px 0);
      label{width:auto;}
    }
    fieldset{
      .rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; .p(10px);
      fieldset{ border: 0 solid #ddd; .p(0);}
    }
    legend{.m(0); .18; .700;}
    .form-item{ .m(0 20px 0 0); }
    label{ .12; width:10em; .inlineblock; vertical-align:middle; .mr(1em); border-bottom: 1px solid #cccccc; }
    .description{ .11; width:25em; .inlineblock; vertical-align:bottom; .ml(1em); color:#7f7f7f;}
    input.form-text{width:13em;}
  }

  @media $max-768{
    .p(10px);
    #webform-component-column-left--membership-options{
      .m(0 0 10px 0);
      .form-item{width:100%;}
      label{ width:75%; }
    }
    legend{.m(0); .16; .700;}
    .form-item{ .m(0); float:none;}
    label{ .12; width:30%; .inlineblock; vertical-align:middle; .mr(0.5em); }
    input.form-text, select.form-select{width:60%;}
    #webform-component-infos{.14;}
  }

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

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

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

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

    .form-type-radio{
      border:1px solid #ddd; .rounded(5px); .p(10px 5px); .m(5px 0);
      input{ .inlineblock;  vertical-align: middle; .m(0 5px)}
      label{.20; .700; .inlineblock;  vertical-align: middle; .m(0);}
      background-color: #fff;
      &:hover{.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; .18; .700; }
    label{ border: 0; }
  }

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

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

  #addressfield-wrapper{ .mt(1em); }
  .street-block .form-item{ .inlineblock; }

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

  #webform-component-infos{.m(20px 0);}

  .form-actions{
    .p(0); .m(0);
    border: 0px;
    background-color: transparent;
    text-align: left;
    .form-submit{
      border: 2px solid #69CDCF; .bgc(#69CDCF); color:#fff;
      .18; .p(0.2em 1em 0.3em); .rounded(0.3em);
      font-weight:bold;
      .mb(9px);
      .shadowTextBtnBlack();
    }
  }

  #webform-component-column-right--news-letters{
    >label{.m(0); .18; .700; border:none; line-height:40px}
    .form-item{
      .inlineblock();
      label{width:auto}
      input, label{.m(0);}
    }
  }

  #edit-submitted-terms-of-services{
    .mb(0.5em);
    input, label{.m(0 0.3em 0 0);}
    label{ width:auto; }
  }
} // adhesion

/** UC CART VIEW FORM */
#uc-cart-view-form{
  background-color: #e6e6e6;
  // .rounded(10px);
  .p(10px, 30px);
//  max-width:$cardfull_w;
  display:inline-block;
  table{
    width:auto; display:table;
    background-color:#fff;

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

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

  .form-actions{
    .p(0); .m(0);
    border: 0px;
    background-color: transparent;
    text-align: right;
    display:block; width:100%;

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

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

  .price-table(){
    .14;
    min-width:20em;
    td.price{width:4em;};
  }

  background-color: #e6e6e6;
  // .rounded(10px);
  .p(10px, 30px);

  fieldset.form-row{
//    .rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
    .pb(20px); .mb(20px);
    // fieldset{ border: 0 solid #ddd; .p(0);}
  }

  fieldset.form-column{
    .inlineblock; max-width:39%;
    .m(15px 1em);
    > .fieldset-wrapper > .form-wrapper{
      .m(10px 0);
    }
  }

  fieldset.form-column-left{}

  fieldset.form-column-right{
     border-left:1px solid #ccc;
    .ml(2em); .pl(2em);
    // .bgc(#fff); .rounded(5px);
  }

  legend{.m(0); .18; .700; border:none; line-height:2;}
  .fieldset-description{.12;}
  .fieldset-wrapper{.12;}
  .form-item{ .m(0 20px 0 0); }

  .description{ .11; width:25em; .inlineblock; vertical-align:bottom; .ml(1em); color:#7f7f7f;}

  #cart-pane{
    >.fieldset-wrapper{
      .inlineblock();
      .rounded(5px);
      .p(10px);
      .bgc(#fff);
    }

    table{
      .price-table();
    }

    tbody{border:none; }
    tr{background-color: transparent; border:none; }
    td{
      .p(0 5px);
      vertical-align: bottom;
      &.products{
        a{color:inherit; .700;}
        width:auto;
        ul.product-description{.m(0); .12;}
        li{list-style: none;}
      }
    }
    tr.subtotal{
      td{.16; .700;}
    }
  }

  #customer-pane{width:35em;}

  #billing-pane{
    label{ .12; width:8em; .inlineblock; vertical-align:middle; .mr(1em); border-bottom: 1px solid #cccccc; }
    input.form-text{width:13em;}
  }

  #coupon_automatic-pane{}

  #coupon-pane{}

  #payment-pane{
    float:right;

    .fieldset-wrapper{
      .bgc(#fff);
      .rounded(5px);
      .p(10px);
    }

    #line-items-div{
      float:none; border:none;
      .inlineblock(); .m(10px 0 20px);
      table{.price-table();}
      tbody{border:none;}
      td{
        .p(0 5px);
      }
      tr{
        td{.500;}

        &.line-item-total td{
          .16; .700; 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;
        .m(0.5em); .p(0.5em);
        label{font-weight:bold;}
      }
    }

    #payment-details{
      width:25em;
      border-top:none; .p(0); .m(0);
    }
  }

  .form-actions{
    .p(0); .m(0);
    border: 0px;
    background-color: transparent;
    text-align: right;
    .form-submit{
      .bouton();
      .ml(1em);
      &#edit-continue{
        .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;
      .p(1em);
    }
  }

  #edit-actions{
    .m(0); .p(0);
    &:before, &:after{display:block;}
  }


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

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

      &>td{
        .p(3em 0 0 0);
      }

      form{
        .m(0 0.5em 0 0); .inlineblock();

      }
    }
  }

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


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

    .node-didactique{
      .rounded(5px); background-color: #FFF;
      .drop-shadow(0, 0, 5px, 0.2);
      max-width:850px;
      .14; .bgc(#fff); //.p(5px);
      .m(1em auto); .p(1em);

      .field-name-field-emvideo{
        .m(1em 0);
      }

      .field-name-title-field{
        .24; .900; .italic; padding:5px 0;
      }
      .field-name-field-visuel{
        figure, img{max-width:100%;}
      }
    }

    @media $min-480{
      .side{ .inlineblock(); vertical-align: top; }
      .group-sideleft{ width:60%; }
      .group-sideright{ width:39%; }
    }

    @media $max-480{

    }
} // who-we-are

/** DIDACTIQUE */
.page-whoweare{
  #tool-bar{
    @media $max-480{
      #block-materio-page-title-materio-page-title{display:none;}
    }
  }
} // didactique

/** maintenance */
.maintenance-page{
  #container, #header{ text-align: center; .p(0); position:relative;}
  #main{background-color: transparent; }
  #header h1.site-name{font-size:36px; .m(0); padding-left:0;}
  h2.site-slogan{font-size:16px; .300; .m(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{
    .12; .pb(2em);
  }

  ul.faq-ul-questions-top{
    .m(0);
    li{
      list-style: none;
      a{
        .18; .500;
      }
    }
  }

  h3.faq-header{
    .20; .700; line-height:1.2;
    .m(0);
    a{color:#000;}
  }

  .faq-dl-hide-answer{
    .p(0);
  }
  .faq-category-group{
    .pb(1em);
  }
  .faq-question-answer{
    .p(0.3em 0 0 0.8em);
    .faq-question{
      .16; .p(0); .500;
      a{color:#000;}
    }
    .faq-answer{
      .p(0); .mb(2em);
      .12;
    }
  }

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