.hidden { display: none; visibility: hidden; } @media (max-width: 480px) { .navbar .nav { position: absolute; top: 0; left: 0; width: 180px; padding-top: 40px; list-style: none; } .navbar .nav, .navbar .nav > li:last-child a { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } .navbar .nav > li { float: none; display: none; } .navbar .nav > li > a { float: none; background-color: #222; } .navbar .nav > .active { display: block; position: absolute; top: 0; left: 0; } .navbar .nav > .active > a { background-color: transparent; } .navbar .nav > .active > a:hover { background-color: #333; } .navbar .nav > .active > a:after { display: inline-block; width: 0; height: 0; margin-top: 8px; margin-left: 6px; text-indent: -99999px; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; opacity: 1; filter: alpha(opacity=100); content: "↓"; } .navbar .nav:hover > li { display: block; } .navbar .nav:hover > li > a:hover { background-color: #333; } .form-horizontal .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } .form-horizontal .controls { margin-left: 0; } .form-horizontal .control-list { padding-top: 0; } .form-horizontal .form-actions { padding-left: 0; } .modal { position: absolute; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; } .modal.fade.in { top: auto; } .modal-header .close { padding: 10px; } } @media (max-width: 768px) { .navbar-fixed { position: absolute; } .navbar-fixed .nav { float: none; } .container { width: auto; padding: 0 20px; } .row { margin-left: 0; } .row > [class*="span"] { float: none; display: block; width: auto; margin: 0; } } @media (min-width: 768px) and (max-width: 940px) { .container { width: 748px; } .span1 { width: 44px; } .span2 { width: 108px; } .span3 { width: 172px; } .span4 { width: 236px; } .span5 { width: 300px; } .span6 { width: 364px; } .span7 { width: 428px; } .span8 { width: 492px; } .span9 { width: 556px; } .span10 { width: 620px; } .span11 { width: 684px; } .span12 { width: 748px; } .offset1 { margin-left: 84px; } .offset2 { margin-left: 148px; } .offset3 { margin-left: 212px; } .offset4 { margin-left: 276px; } .offset5 { margin-left: 340px; } .offset6 { margin-left: 404px; } .offset7 { margin-left: 468px; } .offset8 { margin-left: 532px; } .offset9 { margin-left: 596px; } .offset10 { margin-left: 660px; } .offset11 { margin-left: 724px; } .offset12 { margin-left: 788px; } } /* @media (min-width: 1210px) { // Reset grid variables @gridColumns: 12; @gridColumnWidth: 70px; @gridGutterWidth: 30px; @siteWidth: 1170px; // Bring grid mixins to recalculate widths .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } .container { width: @siteWidth; } .row { margin-left: @gridGutterWidth * -1; } [class*="span"] { margin-left: @gridGutterWidth; } // Default columns .span1 { .columns(1); } .span2 { .columns(2); } .span3 { .columns(3); } .span4 { .columns(4); } .span5 { .columns(5); } .span6 { .columns(6); } .span7 { .columns(7); } .span8 { .columns(8); } .span9 { .columns(9); } .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } // Offset column options .offset1 { .offset(1); } .offset2 { .offset(2); } .offset3 { .offset(3); } .offset4 { .offset(4); } .offset5 { .offset(5); } .offset6 { .offset(6); } .offset7 { .offset(7); } .offset8 { .offset(8); } .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } .offset12 { .offset(12); } } */