.hidden { display: none; visibility: hidden; } @media (max-width: 480px) { .page-header h1 small { display: block; line-height: 18px; } input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { display: block; width: 100%; height: 28px; /* Make inputs at least the height of their button counterpart */ /* Makes inputs behave like true block-level elements */ -webkit-box-sizing: border-box; /* Older Webkit */ -moz-box-sizing: border-box; /* Older FF */ -ms-box-sizing: border-box; /* IE8 */ box-sizing: border-box; /* CSS3 spec*/ } .input-prepend input[class*="span"], .input-append input[class*="span"] { width: auto; } input[type="checkbox"], input[type="radio"] { border: 1px solid #ccc; } .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: 10px; padding-right: 10px; } .modal { position: absolute; top: 10px; left: 10px; right: 10px; width: auto; margin: 0; } .modal.fade.in { top: auto; } .modal-header .close { padding: 10px; margin: -10px; } .carousel-caption { position: static; } } @media (max-width: 768px) { .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; padding-left: 10px; padding-right: 10px; } .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 (max-width: 940px) { body { padding-top: 0; } .navbar-fixed-top { position: static; margin-bottom: 36px; } .navbar-inner { padding: 10px; background-image: none; } .navbar .container { padding: 0; } .navbar .brand { float: none; display: block; padding-left: 15px; padding-right: 15px; margin: 0; } .navbar .nav { float: none; margin: 9px 0; } .navbar .nav > li { float: none; } .navbar .nav > li > a { margin-bottom: 2px; } .navbar .nav > .vertical-divider { display: none; } .navbar .nav > li > a, .navbar .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: #999999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .navbar .dropdown-menu li + li a { margin-bottom: 2px; } .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover { background-color: #222222; } .navbar .dropdown-menu { position: static; display: block; float: none; max-width: none; margin: 0 15px; padding: 0; background-color: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .navbar .dropdown-menu:before, .navbar .dropdown-menu:after { display: none; } .navbar .dropdown-menu .divider { display: none; } .navbar-form, .navbar-search { float: none; padding: 9px 15px; margin: 9px 0; border-top: 1px solid #222222; border-bottom: 1px solid #222222; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar .nav.pull-right { float: none; margin-left: 0; } .navbar-static .navbar-inner { padding-left: 10px; padding-right: 10px; } } /* @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); } } */