Created
March 19, 2012 19:29
-
-
Save nissoh/2125310 to your computer and use it in GitHub Desktop.
CSS: Startup css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ============================================================================= | |
==== Reset / Preset ==== | |
========================================================================== */ | |
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} | |
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} | |
audio:not([controls]){display:none;} | |
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} | |
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} | |
a:hover,a:active{outline:0;} | |
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;} | |
sup{top:-0.5em;} | |
sub{bottom:-0.25em;} | |
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} | |
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle;} | |
button,input{*overflow:visible;line-height:normal;} | |
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;} | |
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} | |
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;color:#333333;background-color:#ffffff;} | |
a{color:#0088cc;text-decoration:none;} | |
a:hover{color:#005580;text-decoration:underline;} | |
:focus { outline : 0; } | |
::selection { color : #fff; background : #b8e4ea; } | |
::-moz-selection { color : #fff; background : #b8e4ea; } | |
::-webkit-selection { color : #fff; background : #b8e4ea; } | |
table { border-collapse: collapse; border-spacing: 0; width:100%; } | |
/* forms UI */ | |
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;} | |
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;} | |
textarea{overflow:auto;vertical-align:top;} | |
label { cursor: pointer; } | |
input:valid, textarea:valid { } | |
input:invalid, textarea:invalid { background-color: #f0dddd; } | |
textarea { overflow: auto; vertical-align: top; resize: vertical; } | |
button, input { line-height: normal; } | |
button, input, select, textarea { font-size: 100%; margin: 0; padding: 0; vertical-align: middle; *vertical-align: middle; } | |
button, .btn { | |
position:relative; | |
padding: 3px 8px; | |
cursor:pointer; | |
outline:0 none; | |
background-repeat:no-repeat; | |
text-decoration:none; | |
font-size:11px; | |
font-weight: bold; | |
text-align:center; | |
white-space: pre-line; | |
border:1px solid; | |
border-color:#c19d2f; | |
color: #a46b07; | |
background-color: #f8f8f0; | |
background-image: url("../images/btn.png"); | |
background-position:left center; | |
text-shadow: 0 1px 0 rgba(255,255,255,0.5); | |
-webkit-box-shadow: 0px 0px 0px 1px #fff inset; | |
-moz-box-shadow: 0px 0px 0px 1px #fff inset; | |
box-shadow: 0px 0px 0px 1px #fff inset; | |
-webkit-border-radius:4px; | |
-moz-border-radius:4px; | |
border-radius:4px; | |
} | |
button:active, .btn:active, button.active { | |
background-color:#f1f1f1; | |
border-color:#b2b2b2 #c7c7c7 #c7c7c7 #b2b2b2; | |
-webkit-box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1); | |
box-shadow:inset 0 2px 1px rgba(0, 0, 0, 0.1); | |
} | |
button:active, .btn:active, button.active { top:1px;} | |
/* ============================================================================= | |
extras | |
========================================================================== */ | |
/* Typography */ | |
h1, h2, h3, h4 {font-weight:normal;} | |
h1 {font-size:3em;line-height:1;} | |
h3 {font-size:1.5em;line-height:1;} | |
h4 {font-size:1.2em;line-height:1.25;} | |
h5 {font-size:1em;font-weight:bold;} | |
h6 {font-size:1em;font-weight:bold;} | |
.hugeF {font-size: 3em;} | |
.bigF {font-size: 2em;} | |
.medF {font-size: 1.5em;} | |
.normalF {font-size: 1.2em;} | |
.smallF {font-size: 1em;} | |
.greenColor { color:#547a2f;} | |
.blueColor { color: #036eb2;} | |
/* Icons */ | |
[class^="icon-"] { | |
display: inline-block; | |
width: 14px; | |
height: 14px; | |
*margin-right: .3em; | |
line-height: 14px; | |
vertical-align: text-top; | |
background-image: url("../css/img/glyphs.png"); | |
background-repeat: no-repeat; | |
} | |
[class^="icon-"]:last-child { | |
*margin-left: 0; | |
} | |
/* Center Align container */ | |
.cc {display:table;overflow:hidden;margin:0px auto; height: 100%; } | |
.ccc {display:table-cell;vertical-align: middle;} | |
*:first-child+html .cc {position:relative;}/*ie7*/ | |
*:first-child+html .ccc {position:absolute;top:50%;}/*ie7*/ | |
*:first-child+html .c_content {position:relative;top:-50%;}/*ie7*/ | |
/* | |
===== Primary Styles ======================================================== | |
Author: Nissan Hanina | |
========================================================================== | |
*/ | |
/* ============================================================================= | |
Customized Grid System | |
========================================================================== */ | |
.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";} | |
.row:after{clear:both;} | |
[class*="que"]{float:left;margin-left:20px;} | |
.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:940px;} | |
.gridMB { margin-bottom: 20px; margin-top: 10px; } | |
.que12{width:940px;} | |
.que11{width:860px;} | |
.que10{width:780px;} | |
.que9{width:700px;} | |
.que8{width:620px;} | |
.que7{width:540px;} | |
.que6{width:460px;} | |
.que5{width:380px;} | |
.que4{width:300px;} | |
.que3{width:220px;} | |
.que2{width:140px;} | |
.que1{width:60px;} | |
.offset12{margin-left:980px;} | |
.offset11{margin-left:900px;} | |
.offset10{margin-left:820px;} | |
.offset9{margin-left:740px;} | |
.offset8{margin-left:660px;} | |
.offset7{margin-left:580px;} | |
.offset6{margin-left:500px;} | |
.offset5{margin-left:420px;} | |
.offset4{margin-left:340px;} | |
.offset3{margin-left:260px;} | |
.offset2{margin-left:180px;} | |
.offset1{margin-left:100px;} | |
.row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} | |
.row-fluid:after{clear:both;} | |
.row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574%;*margin-left:2.0744680846382977%;} | |
.row-fluid [class*="que"]:first-child{margin-left:0;} | |
.row-fluid .que12{width:99.99999998999999%;*width:99.94680850063828%;} | |
.row-fluid .que11{width:91.489361693%;*width:91.4361702036383%;} | |
.row-fluid .que10{width:82.97872339599999%;*width:82.92553190663828%;} | |
.row-fluid .que9{width:74.468085099%;*width:74.4148936096383%;} | |
.row-fluid .que8{width:65.95744680199999%;*width:65.90425531263828%;} | |
.row-fluid .que7{width:57.446808505%;*width:57.3936170156383%;} | |
.row-fluid .que6{width:48.93617020799999%;*width:48.88297871863829%;} | |
.row-fluid .que5{width:40.425531911%;*width:40.3723404216383%;} | |
.row-fluid .que4{width:31.914893614%;*width:31.8617021246383%;} | |
.row-fluid .que3{width:23.404255317%;*width:23.3510638276383%;} | |
.row-fluid .que2{width:14.89361702%;*width:14.8404255306383%;} | |
.row-fluid .que1{width:6.382978723%;*width:6.329787233638298%;} | |
.container{margin-right:auto;margin-left:auto;*zoom:1;}.container:before,.container:after{display:table;content:"";} | |
.container:after{clear:both;} | |
.container-fluid{padding-right:20px;padding-left:20px;*zoom:1;}.container-fluid:before,.container-fluid:after{display:table;content:"";} | |
.container-fluid:after{clear:both;} | |
@media (max-width:480px) | |
{.nav-collapse{-webkit-transform:translate3d(0, 0, 0);} .page-header h1 small{display:block;line-height:18px;} 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:767px) | |
{body{padding-left:20px;padding-right:20px;} .navbar-fixed-top,.navbar-fixed-bottom{margin-left:-20px;margin-right:-20px;} .container-fluid{padding:0;} .dl-horizontal dt{float:none;clear:none;width:auto;text-align:left;} .dl-horizontal dd{margin-left:0;} .container{width:auto;} .row-fluid{width:100%;} .row,.thumbnails{margin-left:0;} [class*="que"],.row-fluid [class*="que"]{float:none;display:block;width:auto;margin-left:0;} .input-large,.input-xlarge,.input-xxlarge,input[class*="que"],select[class*="que"],textarea[class*="que"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;} .input-prepend input,.input-append input,.input-prepend input[class*="que"],.input-append input[class*="que"]{display:inline-block;width:auto;}} | |
@media (min-width:768px) and (max-width:979px) | |
{.row{margin-left:-20px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="que"]{float:left;margin-left:20px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px;} .que12{width:724px;} .que11{width:662px;} .que10{width:600px;} .que9{width:538px;} .que8{width:476px;} .que7{width:414px;} .que6{width:352px;} .que5{width:290px;} .que4{width:228px;} .que3{width:166px;} .que2{width:104px;} .que1{width:42px;} .offset12{margin-left:764px;} .offset11{margin-left:702px;} .offset10{margin-left:640px;} .offset9{margin-left:578px;} .offset8{margin-left:516px;} .offset7{margin-left:454px;} .offset6{margin-left:392px;} .offset5{margin-left:330px;} .offset4{margin-left:268px;} .offset3{margin-left:206px;} .offset2{margin-left:144px;} .offset1{margin-left:82px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.762430939%;*margin-left:2.709239449638298%;} .row-fluid [class*="que"]:first-child{margin-left:0;} .row-fluid .que12{width:99.999999993%;*width:99.9468085036383%;} .row-fluid .que11{width:91.436464082%;*width:91.38327259263829%;} .row-fluid .que10{width:82.87292817100001%;*width:82.8197366816383%;} .row-fluid .que9{width:74.30939226%;*width:74.25620077063829%;} .row-fluid .que8{width:65.74585634900001%;*width:65.6926648596383%;} .row-fluid .que7{width:57.182320438000005%;*width:57.129128948638304%;} .row-fluid .que6{width:48.618784527%;*width:48.5655930376383%;} .row-fluid .que5{width:40.055248616%;*width:40.0020571266383%;} .row-fluid .que4{width:31.491712705%;*width:31.4385212156383%;} .row-fluid .que3{width:22.928176794%;*width:22.874985304638297%;} .row-fluid .que2{width:14.364640883%;*width:14.311449393638298%;} .row-fluid .que1{width:5.801104972%;*width:5.747913482638298%;} input,textarea,.uneditable-input{margin-left:0;} input.que12, textarea.que12, .uneditable-input.que12{width:714px;} input.que11, textarea.que11, .uneditable-input.que11{width:652px;} input.que10, textarea.que10, .uneditable-input.que10{width:590px;} input.que9, textarea.que9, .uneditable-input.que9{width:528px;} input.que8, textarea.que8, .uneditable-input.que8{width:466px;} input.que7, textarea.que7, .uneditable-input.que7{width:404px;} input.que6, textarea.que6, .uneditable-input.que6{width:342px;} input.que5, textarea.que5, .uneditable-input.que5{width:280px;} input.que4, textarea.que4, .uneditable-input.que4{width:218px;} input.que3, textarea.que3, .uneditable-input.que3{width:156px;} input.que2, textarea.que2, .uneditable-input.que2{width:94px;} input.que1, textarea.que1, .uneditable-input.que1{width:32px;}} | |
@media (min-width:1200px) | |
{.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";} .row:after{clear:both;} [class*="que"]{float:left;margin-left:30px;} .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .que12{width:1170px;} .que11{width:1070px;} .que10{width:970px;} .que9{width:870px;} .que8{width:770px;} .que7{width:670px;} .que6{width:570px;} .que5{width:470px;} .que4{width:370px;} .que3{width:270px;} .que2{width:170px;} .que1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";} .row-fluid:after{clear:both;} .row-fluid [class*="que"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564%;*margin-left:2.510911074638298%;} .row-fluid [class*="que"]:first-child{margin-left:0;} .row-fluid .que12{width:100%;*width:99.94680851063829%;} .row-fluid .que11{width:91.45299145300001%;*width:91.3997999636383%;} .row-fluid .que10{width:82.905982906%;*width:82.8527914166383%;} .row-fluid .que9{width:74.358974359%;*width:74.30578286963829%;} .row-fluid .que8{width:65.81196581200001%;*width:65.7587743226383%;} .row-fluid .que7{width:57.264957265%;*width:57.2117657756383%;} .row-fluid .que6{width:48.717948718%;*width:48.6647572286383%;} .row-fluid .que5{width:40.170940171000005%;*width:40.117748681638304%;} .row-fluid .que4{width:31.623931624%;*width:31.5707401346383%;} .row-fluid .que3{width:23.076923077%;*width:23.0237315876383%;} .row-fluid .que2{width:14.529914530000001%;*width:14.4767230406383%;} .row-fluid .que1{width:5.982905983%;*width:5.929714493638298%;} input,textarea,.uneditable-input{margin-left:0;} input.que12, textarea.que12, .uneditable-input.que12{width:1160px;} input.que11, textarea.que11, .uneditable-input.que11{width:1060px;} input.que10, textarea.que10, .uneditable-input.que10{width:960px;} input.que9, textarea.que9, .uneditable-input.que9{width:860px;} input.que8, textarea.que8, .uneditable-input.que8{width:760px;} input.que7, textarea.que7, .uneditable-input.que7{width:660px;} input.que6, textarea.que6, .uneditable-input.que6{width:560px;} input.que5, textarea.que5, .uneditable-input.que5{width:460px;} input.que4, textarea.que4, .uneditable-input.que4{width:360px;} input.que3, textarea.que3, .uneditable-input.que3{width:260px;} input.que2, textarea.que2, .uneditable-input.que2{width:160px;} input.que1, textarea.que1, .uneditable-input.que1{width:60px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}} | |
@media only screen and (min-width: 35em) { | |
/* Style adjustments for viewports that meet the condition */ | |
} | |
/* ============================================================================= | |
Non-Semantic Helper Classes | |
========================================================================== */ | |
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } | |
.ir br { display: none; } | |
.hidden { display: none !important; visibility: hidden; } | |
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } | |
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } | |
.invisible { visibility: hidden; } | |
.clearfix:before, .clearfix:after { content: ""; display: table; } | |
.clearfix:after { clear: both; } | |
.clearfix { *zoom: 1; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment