Created
May 22, 2011 16:43
-
-
Save anonymous/985660 to your computer and use it in GitHub Desktop.
Base Stylesheet
This file contains hidden or 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
| /* =============================================== | |
| Katrin Kerber | |
| 22/05/2011 | |
| With thanks to: | |
| -http://meyerweb.com/eric/tools/css/reset/index.html | |
| -http://html5boilerplate.com/ | |
| -http://960.gs/ | |
| -http://getskeleton.com | |
| ================================================== */ | |
| /* Contents | |
| ================================================== | |
| #Font-Face | |
| #Screen | |
| -Reset | |
| -Structure base | |
| -Typography | |
| -Links | |
| -Lists | |
| -Images | |
| -Forms | |
| -960 grid - DO NOT AMEND | |
| -Clearfix hack | |
| -Modular styles | |
| -Site styles | |
| -Section styles | |
| -CSS3 animations and transitions | |
| -No-JS fallbacks | |
| -IE specific styles | |
| #Mobile | |
| /* =============================================== | |
| #Font-Face | |
| ================================================== */ | |
| /* See http://www.fontsquirrel.com/fontface/generator */ | |
| /* =============================================== | |
| #Screen | |
| ================================================== */ | |
| @media screen { | |
| /* -Reset */ | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;} | |
| article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} | |
| body {line-height:1;} | |
| ol, ul {list-style:none;} | |
| blockquote, q {quotes:none;} | |
| blockquote:before, blockquote:after, | |
| q:before, q:after {content:''; content:none;} | |
| table {border-collapse:collapse; border-spacing:0; } | |
| /* -Structure base */ | |
| html,html body{height:100%;width:100%;} | |
| body {width:960px; margin:0 auto;} | |
| header, div#header, div#content, div#content div#main_content, footer, div#footer {position:relative;} | |
| /* -Typography */ | |
| body {font:14px/21px Helvetica, Arial, sans-serif; color:#444; | |
| -webkit-font-smoothing:antialiased; /* Fix for webkit rendering */ | |
| -webkit-text-size-adjust:none; | |
| } | |
| h1, h2, h3, h4, h5, h6 {color: #181818;font-family:"Georgia", "Times New Roman", serif; font-weight:normal;} | |
| h1 {font-size:46px; line-height:50px; margin-bottom:14px;} | |
| h2 {font-size:35px; line-height:40px; margin-bottom:10px;} | |
| h3 {font-size:28px; line-height:34px; margin-bottom:8px;} | |
| h4 {font-size:21px; line-height:30px; margin-bottom:4px;} | |
| h5 {font-size:17px; line-height:24px;} | |
| h6 {font-size:14px; line-height:21px;} | |
| p {margin:0 0 15px 0;} | |
| p img {margin:0;} | |
| em {font-style:italic;} | |
| strong {font-weight:bold; color:#333;} | |
| small {font-size:80%;} | |
| blockquote, blockquote p {font-size:17px; line-height:24px; color:#777; font-style:italic;} | |
| blockquote {margin:0 0 20px 0; padding:9px 20px 0 19px; border-left:1px solid #DDD;} | |
| blockquote cite {display:block; font-size:12px; color:#555;} | |
| blockquote cite:before {content: "\2014 \0020";} | |
| blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {color: #555;} | |
| hr {border:solid #ddd; border-width:1px 0 0 0; clear:both; margin:10px 0 30px; height:0;} | |
| /* -Links */ | |
| a:link{text-decoration:none; color:#3366FF;} | |
| a:visited{text-decoration:none; color:#3366FF;} | |
| a:link:hover, a:visited:hover{text-decoration:none;color:#FF0000; background-color:#FF0000;} | |
| a:link:active, a:visited:active{text-decoration:none; color:#FF0000;} | |
| a:focus,:focus {outline:1px dotted #000;} | |
| a:hover,a:active {outline:none;} | |
| a img{border:none;} | |
| a img:hover {opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);} | |
| /* -Lists */ | |
| ul, ol {margin:0 0 15px 25px;} | |
| ul li {list-style-type:disc;} | |
| ol li {list-style-type:decimal;} | |
| /* -Images */ | |
| img {max-width:100%; height:auto;} | |
| /* -Forms */ | |
| form {margin-bottom:20px;} | |
| fieldset {margin-bottom:20px;} | |
| label {display:block; font-weight:bold;} | |
| input, textarea {display:block; background:#FFF; border:1px solid #CCC; padding:6px 5px; outline:none; color:#777;} | |
| input:focus, textarea:focus {background:#CCC; border:1px solid #000; color:#000;} | |
| textarea {min-height:60px;} | |
| input[type="checkbox"] {display:inline; vertical-align:bottom; padding:0;} | |
| input[type="radio"] {display:inline; vertical-align:text-bottom;} | |
| input[type="button"], input[type="submit"] {cursor:pointer;} | |
| /* -960 grid - DO NOT AMEND */ | |
| .col {position:relative; float:left; display:inline; clear:none; margin-left:10px; margin-right:10px;} | |
| .vertsp, .row {margin-bottom:15px;} | |
| .col.first {margin-left:0;} | |
| .col.last {margin-right:0;} | |
| .one {width:40px;} | |
| .two {width:100px;} | |
| .three {width:160px;} | |
| .four {width:220px;} | |
| .five {width:280px;} | |
| .six {width:340px;} | |
| .seven {width:400px;} | |
| .eight {width:460px;} | |
| .nine {width:520px;} | |
| .ten {width:580px;} | |
| .eleven {width:640px;} | |
| .twelve {width:700px;} | |
| .thirteen {width:760px;} | |
| .fourteen {width:820px;} | |
| .fifteen {width:880px;} | |
| .sixteen {width:940px;} | |
| form fieldset .one input,form fieldset .one textarea {width:28px;} /* WIDTH - 12px (5px padding*2 + 1px border*2) */ | |
| form fieldset .two input,form fieldset .two textarea {width:88px;} | |
| form fieldset .three input,form fieldset .three textarea {width:148px;} | |
| form fieldset .four input,form fieldset .four textarea {width:208px;} | |
| form fieldset .five input,form fieldset .five textarea {width:268px;} | |
| form fieldset .six input,form fieldset .six textarea {width:328px;} | |
| form fieldset .seven input,form fieldset .seven textarea {width:388px;} | |
| form fieldset .eight input,form fieldset .eight textarea {width:448px;} | |
| form fieldset .nine input,form fieldset .nine textarea {width:508px;} | |
| form fieldset .ten input,form fieldset .ten textarea {width:568px;} | |
| form fieldset .eleven input,form fieldset .eleven textarea {width:628px;} | |
| form fieldset .twelve input,form fieldset .twelve textarea {width:688px;} | |
| form fieldset .thirteen input,form fieldset .thirteen textarea {width:748px;} | |
| form fieldset .fourteen input,form fieldset .fourteen textarea {width:808px;} | |
| form fieldset .fifteen input,form fieldset .fifteen textarea {width:868px;} | |
| form fieldset .sixteen input,form fieldset .sixteen textarea {width:928px;} | |
| /* -Clearfix hack */ | |
| .clearfix:before, .clearfix:after {content:"\0020"; display:block; height:0; overflow:hidden;} | |
| .clearfix:after {clear:both;} | |
| /* -Modular styles */ | |
| .clear {clear:both; display:block; overflow:hidden;} | |
| .inv {position:absolute; left:-900000px; z-index:-1; height:1px; float:left; clear:none; display:inline;} | |
| .replaced {display:block; text-indent:-90000px; text-align:left; line-height:0;} | |
| .floatright {float:right; display:inline; clear:none;} | |
| .rounded{-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;} | |
| .shadow { | |
| -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3), 10px 10px 15px rgba(0,0,0,0.1); | |
| -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3), 10px 10px 15px rgba(0,0,0,0.1); | |
| box-shadow: 5px 5px 10px rgba(0,0,0,0.3), 10px 10px 15px rgba(0,0,0,0.1);} | |
| /* -Site styles (i.e. header and footer styles) */ | |
| nav ul, nav li {margin:0; list-style:none; list-style-image:none; } | |
| /* -Section styles */ | |
| /* -CSS3 animations and transitions */ | |
| /* -No-JS fallbacks */ | |
| /* -IE specific styles */ | |
| } | |
| /* =============================================== | |
| #Mobile | |
| ================================================== */ | |
| /* Mobile/Browser */ | |
| @media only screen and (max-width: 767px) {} | |
| /* Mobile Landscape/Browser */ | |
| @media only screen and (min-width: 480px) and (max-width: 767px) {} | |
| /* iPad (portrait and landscape) */ | |
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {} | |
| /* iPad (landscape) */ | |
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {} | |
| /* iPads (portrait) */ | |
| @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {} | |
| /* =============================================== | |
| ================================================== */ | |
| @media print { | |
| * {background:transparent;color:#000;} | |
| .inv {display:none;} | |
| a[href]:after { content: " (" attr(href) ")"; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment