/** RESPONSIVE break points */ @max-480 : ~"screen and (max-width: 479px)"; @min-480 : ~"screen and (min-width: 480px)"; @480-768 : ~"screen and (min-width: 480px) and (max-width: 767px)"; @max-768 : ~"screen and (max-width: 767px)"; @min-768 : ~"screen and (min-width: 768px)"; @768-980 : ~"screen and (min-width: 768px) and (max-width: 979px)"; @max-980 : ~"screen and (max-width: 979px)"; @min-980 : ~"screen and (min-width: 980px)"; @980-1200 : ~"screen and (min-width: 980px) and (max-width: 1199px)"; @max-1200 : ~"screen and (max-width: 1199px)"; @min-1200 : ~"screen and (min-width: 1200px)"; html, body{ // position:relative; // overflow:hidden; // width:100%; // height:100%; } body{ overflow-y:scroll; top:0; } @rootminwidth : 320px; /** NIVEAU 0 */ #root{ min-width:@rootminwidth; .ie8 &{min-width:1024px;} } /** NIVEAU 1 */ #container{ margin:0 auto; position:relative; .transition(padding-top, 0.5s, ease-out);} /** NIVEAU 2 */ .padded(){ @p:2%; width:100%-2*@p; padding-left:@p; padding-right:@p; } @header-z-index:1000; #header{ @media @min-768{ position:fixed; top:0; margin:0 auto; .bgc(#fff); min-width:@rootminwidth*0.97; } z-index:@header-z-index; .padded; .editmenu-enabled &{ .mt(30px); } .admin-menu &{ .mt(35px); } } #utilities{ @media @min-768{ html.no-touch &{ position:fixed; top:0; margin:0 auto; min-width:@rootminwidth*0.97; .mt(60px); } html.no-touch .editmenu-enabled &{ .mt(80px); } html.no-touch .admin-menu &{ .mt(85px); } } @media @max-768{ >.region{.pt(5px); .pb(5px);} } z-index:999; .bgc(#fff); .padded; } #main{.padded; overflow-x:hidden;} #footer{.padded;} /** NIVEAU 3 */ .js #content-top{} // .js #content{ overflow-y:hidden; } // #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); } .footer-block .region, .header-block{ .inlineblock();} /** NIVEAU 4 */ #center{ padding:5px; } /** Z-INDEX */ #block-feedback-form{z-index:1001;} #admin-menu{z-index:1002;} #admin-toolbar{z-index:1003;}