2013-05-24 16:25:31 +02:00
/* CSS Normalize =========================================== */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
HTML5 display definitions
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Correct ` block ` display not defined in IE 8 / 9 .
* /
article ,
aside ,
details ,
figcaption ,
figure ,
footer ,
header ,
hgroup ,
main ,
nav ,
section ,
summary {
display : block ;
}
/ * *
* Correct ` inline-block ` display not defined in IE 8 / 9 .
* /
audio ,
canvas ,
video {
display : inline-block ;
}
/ * *
* Prevent modern browsers from displaying ` audio ` without controls .
* Remove excess height in iOS 5 devices .
* /
audio : not ( [ controls ] ) {
display : none ;
height : 0 ;
}
/ * *
* Address styling not present in IE 8 / 9 .
* /
[ hidden ] {
display : none ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Base
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* 1 . Set default font family to sans-serif .
* 2 . Prevent iOS text size adjust after orientation change , without disabling
* user zoom .
* /
html {
font-family : sans-serif ;
/* 1 */
-webkit-text-size-adjust : 100 % ;
-ms-text-size-adjust : 100 % ;
/* 2 */
}
/ * *
* Remove default margin .
* /
body {
margin : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Links
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Address ` outline ` inconsistency between Chrome and other browsers .
* /
a : focus {
outline : thin dotted ;
}
/ * *
* Improve readability when focused and also mouse hovered in all browsers .
* /
a : active ,
a : hover {
outline : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Typography
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Address variable ` h1 ` font-size and margin within ` section ` and ` article `
* contexts in Firefox 4 + , Safari 5 , and Chrome .
* /
h1 {
font-size : 2em ;
margin : 0 . 67em 0 ;
}
/ * *
* Address styling not present in IE 8 / 9 , Safari 5 , and Chrome .
* /
abbr [ title ] {
border-bottom : 1px dotted ;
}
/ * *
* Address style set to ` bolder ` in Firefox 4 + , Safari 5 , and Chrome .
* /
b ,
strong {
font-weight : bold ;
}
/ * *
* Address styling not present in Safari 5 and Chrome .
* /
dfn {
font-style : italic ;
}
/ * *
* Address differences between Firefox and other browsers .
* /
hr {
-moz-box-sizing : content-box ;
box-sizing : content-box ;
height : 0 ;
}
/ * *
* Address styling not present in IE 8 / 9 .
* /
mark {
background : # ff0 ;
color : # 000 ;
}
/ * *
* Correct font family set oddly in Safari 5 and Chrome .
* /
code ,
kbd ,
pre ,
samp {
font-family : monospace , serif ;
font-size : 1em ;
}
/ * *
* Improve readability of pre-formatted text in all browsers .
* /
pre {
white-space : pre-wrap ;
}
/ * *
* Set consistent quote types .
* /
q {
quotes : "\201C" "\201D" "\2018" "\2019" ;
}
/ * *
* Address inconsistent and variable font size in all browsers .
* /
small {
font-size : 80 % ;
}
/ * *
* Prevent ` sub ` and ` sup ` affecting ` line-height ` in all browsers .
* /
sub ,
sup {
font-size : 75 % ;
line-height : 0 ;
position : relative ;
vertical-align : baseline ;
}
sup {
top : -0 . 5em ;
}
sub {
bottom : -0 . 25em ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Embedded content
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Remove border when inside ` a ` element in IE 8 / 9 .
* /
img {
border : 0 ;
}
/ * *
* Correct overflow displayed oddly in IE 9 .
* /
svg : not ( : root ) {
overflow : hidden ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Figures
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Address margin not present in IE 8 / 9 and Safari 5 .
* /
figure {
margin : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Forms
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Define consistent border , margin , and padding .
* /
fieldset {
border : 1px solid # c0c0c0 ;
margin : 0 2px ;
padding : 0 . 35em 0 . 625em 0 . 75em ;
}
/ * *
* 1 . Correct ` color ` not being inherited in IE 8 / 9 .
* 2 . Remove padding so people aren ' t caught out if they zero out fieldsets .
* /
legend {
border : 0 ;
/* 1 */
padding : 0 ;
/* 2 */
}
/ * *
* 1 . Correct font family not being inherited in all browsers .
* 2 . Correct font size not being inherited in all browsers .
* 3 . Address margins set differently in Firefox 4 + , Safari 5 , and Chrome .
* /
button ,
input ,
select ,
textarea {
font-family : inherit ;
/* 1 */
font-size : 100 % ;
/* 2 */
margin : 0 ;
/* 3 */
}
/ * *
* Address Firefox 4 + setting ` line-height ` on ` input ` using ` ! important ` in
* the UA stylesheet .
* /
button ,
input {
line-height : normal ;
}
/ * *
* Address inconsistent ` text-transform ` inheritance for ` button ` and ` select ` .
* All other form control elements do not inherit ` text-transform ` values .
* Correct ` button ` style inheritance in Chrome , Safari 5 + , and IE 8 + .
* Correct ` select ` style inheritance in Firefox 4 + and Opera .
* /
button ,
select {
text-transform : none ;
}
/ * *
* 1 . Avoid the WebKit bug in Android 4 . 0 . * where ( 2 ) destroys native ` audio `
* and ` video ` controls .
* 2 . Correct inability to style clickable ` input ` types in iOS .
* 3 . Improve usability and consistency of cursor style between image-type
* ` input ` and others .
* /
button ,
html input [ type = "button" ] ,
input [ type = "reset" ] ,
input [ type = "submit" ] {
-webkit-appearance : button ;
/* 2 */
cursor : pointer ;
/* 3 */
}
/ * *
* Re-set default cursor for disabled elements .
* /
button [ disabled ] ,
html input [ disabled ] {
cursor : default ;
}
/ * *
* 1 . Address box sizing set to ` content-box ` in IE 8 / 9 .
* 2 . Remove excess padding in IE 8 / 9 .
* /
input [ type = "checkbox" ] ,
input [ type = "radio" ] {
box-sizing : border-box ;
/* 1 */
padding : 0 ;
/* 2 */
}
/ * *
* 1 . Address ` appearance ` set to ` searchfield ` in Safari 5 and Chrome .
* 2 . Address ` box-sizing ` set to ` border-box ` in Safari 5 and Chrome
* ( include ` -moz ` to future-proof ) .
* /
input [ type = "search" ] {
-webkit-appearance : textfield ;
/* 1 */
-moz-box-sizing : content-box ;
-webkit-box-sizing : content-box ;
/* 2 */
box-sizing : content-box ;
}
/ * *
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X .
* /
input [ type = "search" ] :: -webkit-search-cancel-button ,
input [ type = "search" ] :: -webkit-search-decoration {
-webkit-appearance : none ;
}
/ * *
* Remove inner padding and border in Firefox 4 + .
* /
button :: -moz-focus-inner ,
input :: -moz-focus-inner {
border : 0 ;
padding : 0 ;
}
/ * *
* 1 . Remove default vertical scrollbar in IE 8 / 9 .
* 2 . Improve readability and alignment in all browsers .
* /
textarea {
overflow : auto ;
/* 1 */
vertical-align : top ;
/* 2 */
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Tables
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Remove most spacing between table cells .
* /
table {
border-collapse : collapse ;
border-spacing : 0 ;
margin-bottom : 1 . 5em ;
}
/* Variables and mixins ==================================== */
/* Links ================================================= */
/* Site wide styles (html, body, global classes) =========== */
/* Selection ============================================= */
:: -moz-selection {
background-color : # dadada ;
color : # 343434 ;
text-shadow : none ;
}
:: selection {
background-color : # dadada ;
color : # 343434 ;
text-shadow : none ;
}
/* Global Classes ======================================== */
. all-caps {
text-transform : uppercase ;
}
. pull-left {
float : left ;
}
. pull-right {
float : right ;
}
. clearfix {
* zoom : 1 ;
}
. clearfix : before ,
. clearfix : after {
display : table ;
content : "" ;
}
. clearfix : after {
clear : both ;
}
. unstyled-list {
list-style : none ;
margin-left : 0 ;
padding-left : 0 ;
}
. unstyled-list li {
list-style-type : none ;
}
/* Typeplate.com typographic starter pack ================== */
/ * !
+ --------------------------------------------------------------------- +
| _ _ _ |
| | | _ _ _ _ __ ___ _ __ | | __ _ | | _ ___ |
| | __ | | | | | | '_ \ / _ \| ' _ \ | | / _ ` | | __ | / _ \ |
| | | _ | | _ | | | | _ ) | | __ / | | _ ) | | | | ( _ | | | | _ | __ / |
| \ __ | \ __ , | | . __ / \ ___ | | . __ / | _ | \ __ , _ | \ __ | \ ___ | |
| | ___ / | _ | | _ | |
| |
| |
| URL : http : / / typeplate . com |
| VERSION : 1 . 0 . 1 |
| Github : https : / / github . com / typePlate / typeplate . github . com |
| AUTHORS : Zachary Kain ( @ zakkain ) & Dennis Gaebel ( @ gryghostvisuals ) |
| LICENSE : Creative Commmons |
| http : / / creativecommons . org / licenses / by / 3 . 0 |
| |
+ --------------------------------------------------------------------- +
* /
@ font-face {
font-family : "Ampersand" ;
src : local ( "Georgia" ) , local ( "Garamond" ) , local ( "Palatino" ) , local ( "Book Antiqua" ) ;
unicode-range : U + 270C ;
}
@ font-face {
font-family : "Ampersand" ;
src : local ( "Georgia" ) ;
unicode-range : U + 270C ;
}
. ampersand-placeholder {
font-family : Verdana , sans-serif ;
}
. breakword {
word-wrap : break-word ;
}
. normal-wrap {
word-wrap : normal ;
}
. inherit-wrap {
word-wrap : auto ;
}
/ * *
* Dropcap Sass @ include
* Use the following Sass @ include with any selector you feel necessary .
*
@ include dropcap ( @ float : left , @ font-size : 4em , @ font-family : inherit , @ text-indent : 0 , @ margin : inherit , @ padding : inherit , @ color : inherit , @ lineHeight : 1 , @ bg : transparent ) ;
*
* Extend this object into your custom stylesheet .
*
* /
. drop-cap : first-letter {
float : left ;
margin : inherit ;
padding : inherit ;
font-size : 4em ;
font-family : inherit ;
line-height : 1 ;
text-indent : 0 ;
background : transparent ;
color : inherit ;
}
html {
font : normal 112 . 5 % / 1 . 65 serif ;
}
body {
word-wrap : normal ;
color : # 333332 ;
}
. tera {
font-size : 117px ;
font-size : 6 . 5rem ;
margin-bottom : 0 . 25384615384615383rem ;
}
. giga {
font-size : 90px ;
font-size : 5rem ;
margin-bottom : 0 . 33rem ;
}
. mega {
font-size : 72px ;
font-size : 4rem ;
margin-bottom : 0 . 4125rem ;
}
. alpha {
font-size : 60px ;
font-size : 3 . 3333333333333335rem ;
margin-bottom : 0 . 495rem ;
}
. beta {
font-size : 48px ;
font-size : 2 . 6666666666666665rem ;
margin-bottom : 0 . 61875rem ;
}
. gamma {
font-size : 36px ;
font-size : 2rem ;
margin-bottom : 0 . 825rem ;
}
. delta {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
}
. epsilon {
font-size : 21px ;
font-size : 1 . 1666666666666667rem ;
margin-bottom : 1 . 4142857142857141rem ;
}
. zeta {
font-size : 18px ;
font-size : 1rem ;
margin-bottom : 1 . 65rem ;
}
h1 {
font-size : 60px ;
font-size : 3 . 3333333333333335rem ;
margin-bottom : 0 . 495rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
h2 {
font-size : 48px ;
font-size : 2 . 6666666666666665rem ;
margin-bottom : 0 . 61875rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
h3 {
font-size : 36px ;
font-size : 2rem ;
margin-bottom : 0 . 825rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
h4 {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
h5 {
font-size : 21px ;
font-size : 1 . 1666666666666667rem ;
margin-bottom : 1 . 4142857142857141rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
h6 {
font-size : 18px ;
font-size : 1rem ;
margin-bottom : 1 . 65rem ;
text-rendering : optimizeLegibility ;
line-height : 1 ;
margin-top : 0 ;
}
p {
margin : 0 0 1 . 5em ;
}
p + p {
text-indent : 1 . 5em ;
margin-top : -1 . 5em ;
}
abbr ,
acronym ,
blockquote ,
code ,
dir ,
kbd ,
listing ,
plaintext ,
q ,
samp ,
tt ,
var ,
xmp {
-webkit-hyphens : none ;
-moz-hyphens : none ;
-ms-hyphens : none ;
-o-hyphens : none ;
hyphens : none ;
}
pre code {
word-wrap : normal ;
white-space : -moz-pre-wrap ;
white-space : pre-wrap ;
}
pre {
white-space : pre ;
}
code {
white-space : pre ;
font-family : monospace ;
}
/ * *
* Abbreviations Markup
*
< abbr title = "hyper text markup language" > HMTL < / abbr >
*
* Extend this object into your markup .
*
* /
abbr {
font-variant : small-caps ;
font-weight : 400 ;
text-transform : lowercase ;
color : # 333332 ;
}
abbr : hover {
cursor : help ;
}
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
color : # 333332 ;
}
/ * *
* Lining Definition Style Markup
*
< dl class = "lining" >
< dt > < b > < / b > < / dt >
< dd > < / dd >
< / dl >
*
* Extend this object into your markup .
*
* /
. lining dt ,
. lining dd {
display : inline ;
margin : 0 ;
}
. lining dt + dt : before ,
. lining dd + dt : before {
content : "\A" ;
white-space : pre ;
}
. lining dd + dd : before {
content : ", " ;
}
. lining dd : before {
content : ": " ;
margin-left : -0 . 2rem ;
}
/ * *
* Dictionary Definition Style Markup
*
< dl class = "dictionary-style" >
< dt > < b > < / b > < / dt >
< dd > < / dd >
< / dl >
*
* Extend this object into your markup .
*
* /
. dictionary-style dt {
display : inline ;
counter-reset : definitions ;
}
. dictionary-style dt + dt : before {
content : ", " ;
margin-left : -0 . 2rem ;
}
. dictionary-style dd {
display : block ;
counter-increment : definitions ;
}
. dictionary-style dd : before {
content : counter ( definitions , decimal ) ". " ;
}
/ * *
* Stats Tab Markup
*
< ul class = "stats-tabs" >
< li > < a href = "#" > [ value ] < b > [ name ] < / b > < / a > < / li >
< / ul >
*
* Extend this object into your markup .
*
* /
. stats-tabs {
padding : 0 ;
}
. stats-tabs li {
display : inline-block ;
margin : 0 0 . 625rem 0 0 ;
padding : 0 0 . 625rem 0 0 ;
border-right : 0 . 125rem solid # cccccc ;
}
. stats-tabs li : last-child {
margin : 0 ;
padding : 0 ;
border : none ;
}
. stats-tabs li a {
display : inline-block ;
font-size : 1 . 5rem ;
font-weight : bold ;
}
. stats-tabs li a b {
display : block ;
margin : 0 . 125rem 0 0 0 ;
font-size : 0 . 875rem ;
font-weight : normal ;
}
/ * *
* Blockquote Markup
*
< blockquote cite = "" >
< p > & Prime ; & Prime ; < / p >
< cite >
< small > < a href = "" > < / a > < / small >
< / cite >
< / blockquote >
*
* Extend this object into your markup .
*
* /
. cite {
display : block ;
font-size : 0 . 875em ;
text-align : right ;
}
/ * *
* Pull Quotes Markup
*
< aside class = "pull-quote" >
< blockquote >
< p > < / p >
< / blockquote >
< / aside >
*
* Extend this object into your custom stylesheet .
*
* /
. pull-quote {
position : relative ;
padding : 1em ;
}
. pull-quote : before ,
. pull-quote : after {
height : 1em ;
opacity : 0 . 15 ;
position : absolute ;
font-size : 4em ;
}
. pull-quote : before {
content : '“' ;
top : 0em ;
left : 0em ;
}
. pull-quote : after {
content : '”' ;
bottom : 0em ;
right : 0em ;
}
/ * *
* Figures Markup
*
< figure >
< figcaption >
< strong > Fig . 4 . 2 | < / strong > Type Anatomy , an excerpt from Mark Boulton ' s book < cite title = "http://designingfortheweb.co.uk/book/part3/part3_chapter11.php" > "Designing for the Web" < / cite >
< / figcaption >
< / figure >
*
* Extend this object into your markup .
*
* /
/ * *
* Footnote Markup : Replace 'X' with your unique number for each footnote
*
< article >
< p > < sup > < a href = "#fn-itemX" id = "fn-returnX" > < / a > < / sup > < / p >
< footer >
< ol class = "foot-notes" >
< li id = "fn-itemX" > < a href = "#fn-returnX" > ↩ < / a > < / li >
< / ol >
< / footer >
< / article >
*
* Extend this object into your markup .
*
* /
/* Headings ============================================== */
h1 ,
h2 ,
h3 ,
h4 ,
h5 ,
h6 {
font-family : 'PT Sans Narrow' , sans-serif ;
font-weight : 700 ;
}
h6 {
font-weight : 400 ;
}
/* Links ================================================= */
a {
text-decoration : none ;
color : # 343434 ;
}
a : visited {
color : # 4e4e4e ;
}
a : hover {
color : # 1a1a1a ;
}
a : focus {
outline : thin dotted ;
color : # 343434 ;
}
a : hover ,
a : active {
outline : 0 ;
}
b ,
strong {
font-weight : 700 ;
}
/* Lists ============================================== */
ul li {
list-style-type : square ;
}
ol li {
list-style-type : upper-roman ;
}
/* Add underline for main links ======================= */
p > a ,
li > a ,
em > a ,
a > em ,
footer a {
text-decoration : none ;
border-bottom : 1px dotted # b3b3b1 ;
}
p > a : hover ,
li > a : hover ,
em > a : hover ,
footer a : hover {
text-decoration : none ;
border-bottom : 1px solid # b3b3b1 ;
}
/* Figure caption ===================================== */
figcaption {
margin-top : 0 . 75em ;
line-height : 1 . 25 ;
font-size : 18px ;
font-size : 1rem ;
margin-bottom : 1 . 65rem ;
font-family : 'PT Sans Narrow' , sans-serif ;
counter-increment : captions ;
}
figcaption : before {
font-weight : 700 ;
text-transform : uppercase ;
content : "Figure " counter ( captions ) ": " ;
}
/* Notice ============================================== */
. notice {
margin-top : 1 . 5em ;
padding : . 5em 1em ;
text-indent : 0 ;
font-size : 90 % ;
background-color : # ddd ;
border-left : 10px solid # ccc ;
}
/* Blockquote =========================================== */
blockquote {
font-style : italic ;
margin-left : 0 ;
padding-left : 1em ;
border-left : 10px solid # ccc ;
}
blockquote p + p {
text-indent : 0 ;
margin-top : 0 ;
}
/* Footnotes ============================================= */
. footnotes {
font-size : 90 % ;
}
/* Gradients ============================================= */
/* .bordered(COLOR, COLOR, COLOR, COLOR); ================ */
/* .rounded(VALUE); ====================================== */
/* .border-radius(VALUE,VALUE,VALUE,VALUE); ============== */
/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) =========== */
/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); ======= */
/* .text-shadow(); ======================================== */
/* .opacity(VALUE); ======================================= */
/* .rotate(VALUEdeg); ===================================== */
/* .scale(VALUE); ========================================= */
/* .skew(VALUE, VALUE); =================================== */
/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */
/* .translate(VALUE, VALUE) =============================== */
/* .background-alpha(VALUE VALUE); ======================== */
/* .background-size(VALUE VALUE); ========================= */
/* .background-clip(VALUE); (border-box, padding-box, content-box) */
/* .box-sizing(VALUE); (border-box, padding-box, content-box) */
/* Contain floats ========================================= */
/* For image replacement ================================== */
/* Hide from visual and speaking browsers ================= */
. hidden {
display : none ;
visibility : hidden ;
}
/* Hide but maintain layout =============================== */
/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */
/* .userselect(VALUE) (all, element, none, text) ========== */
/* Hidden but available to speaking browsers ============== */
/* Make visuallyhidden focusable with a keyboard ========== */
. visuallyhidden . focusable : active ,
. visuallyhidden . focusable : focus {
position : static ;
clip : auto ;
height : auto ;
width : auto ;
margin : 0 ;
overflow : visible ;
}
/* Responsive visibility utilities =================================== */
/* For desktops =========================================== */
. visible-phone {
display : none ! important ;
}
. visible-tablet {
display : none ! important ;
}
. hidden-desktop {
display : none ! important ;
}
/* Mobile phones only =====================================*/
@ media ( max-width : 767px ) {
. visible-phone {
display : inherit ! important ;
}
. hidden-phone {
display : none ! important ;
}
. hidden-desktop {
display : inherit ! important ;
}
. visible-desktop {
display : none ! important ;
}
}
/* Tablets & small desktops only ========================== */
@ media ( min-width : 768px ) and ( max-width : 979px ) {
. visible-tablet {
display : inherit ! important ;
}
. hidden-tablet {
display : none ! important ;
}
. hidden-desktop {
display : inherit ! important ;
}
. visible-desktop {
display : none ! important ;
}
}
/* .columns(250px, 0, 24px, COLOR, solid, 1px) ============ */
/* Figures, images, social media, other elements =========== */
hr {
display : block ;
margin : 1em 0 ;
padding : 0 ;
height : 1px ;
border : 0 ;
border-top : 1px solid # ccc ;
border-bottom : 1px solid # fff ;
}
/* Figures and images ==================================== */
article img {
max-width : 100 % ;
height : auto ;
border-width : 0 ;
vertical-align : middle ;
-ms-interpolation-mode : bicubic ;
}
svg : not ( : root ) {
overflow : hidden ;
}
. half {
margin : 0 auto ;
width : 100 % ;
* zoom : 1 ;
}
. half : before ,
. half : after {
display : table ;
content : "" ;
}
. half : after {
clear : both ;
}
. half : before ,
. half : after {
content : "" ;
display : table ;
}
. half : after {
clear : both ;
}
. half img {
display : inline ;
float : left ;
width : 50 % ;
}
. half figcaption {
display : inline ;
float : left ;
width : 100 % ;
}
. third {
margin : 0 auto ;
width : 100 % ;
* zoom : 1 ;
}
. third : before ,
. third : after {
display : table ;
content : "" ;
}
. third : after {
clear : both ;
}
. third : before ,
. third : after {
content : "" ;
display : table ;
}
. third : after {
clear : both ;
}
. third img {
display : inline ;
float : left ;
width : 33 . 333333333333336 % ;
}
. third figcaption {
display : inline ;
float : left ;
width : 100 % ;
}
/* Buttons =============================================== */
. btn {
display : inline-block ;
* display : inline ;
/* IE7 inline-block hack */
* zoom : 1 ;
padding : 12px ;
margin-bottom : 2em ;
line-height : 1 ;
text-align : center ;
text-transform : uppercase ;
vertical-align : middle ;
border : 4px double # 333332 ;
cursor : pointer ;
* margin-left : . 3em ;
-webkit-transition : 0 . 4s linear ;
-moz-transition : 0 . 4s linear ;
-ms-transition : 0 . 4s linear ;
-o-transition : 0 . 4s linear ;
transition : 0 . 4s linear ;
}
. btn : visited {
border : 4px double # 4e4e4e ;
}
. btn : hover {
border : 4px double # 1a1a1a ;
}
. btn : first-child {
* margin-left : 0 ;
}
. btn-inverse {
border : 4px double # ffffff ;
color : # ffffff ;
background-color : # 000000 ;
}
. btn-inverse : visited {
color : # ffffff ;
border-color : # ffffff ;
}
. btn-inverse : hover {
color : # ffffff ;
border-color : # ffffff ;
}
/* Standard form controls ================================== */
form {
margin : 0 0 5px 0 ;
}
form fieldset {
margin-bottom : 5px ;
padding : 0 ;
border-width : 0 ;
}
form legend {
display : block ;
width : 100 % ;
margin-bottom : 10px ;
* margin-left : -7px ;
padding : 0 ;
color : # 333332 ;
border : 0 ;
border-bottom : 1px solid # cccccc ;
white-space : normal ;
}
form p {
margin-bottom : 2 . 5px ;
}
form ul {
list-style-type : none ;
margin : 0 0 5px 0 ;
padding : 0 ;
}
form br {
display : none ;
}
label ,
input ,
button ,
select ,
textarea {
vertical-align : baseline ;
* vertical-align : middle ;
}
input ,
button ,
select ,
textarea {
font-family : 'PT Serif' , serif ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
}
label {
display : block ;
margin-bottom : 1 . 25px ;
font-weight : bold ;
color : # 333332 ;
cursor : pointer ;
}
label input ,
label textarea ,
label select {
display : block ;
}
input ,
textarea ,
select {
display : inline-block ;
width : 100 % ;
padding : 4px ;
margin-bottom : 1 . 25px ;
background-color : # ffffff ;
border : 1px solid # cccccc ;
color : # 333332 ;
}
input : hover ,
textarea : hover ,
select : hover {
border-color : # 808080 ;
}
. input-mini {
width : 60px ;
}
. input-small {
width : 90px ;
}
input [ type = "image" ] ,
input [ type = "checkbox" ] ,
input [ type = "radio" ] {
width : auto ;
height : auto ;
padding : 0 ;
margin : 3px 0 ;
* margin-top : 0 ;
line-height : normal ;
cursor : pointer ;
-webkit-border-radius : 0 ;
-moz-border-radius : 0 ;
border-radius : 0 ;
border : 0 \ 9 ;
}
input [ type = "checkbox" ] ,
input [ type = "radio" ] {
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
-ms-box-sizing : border-box ;
box-sizing : border-box ;
padding : 0 ;
* width : 13px ;
* height : 13px ;
}
input [ type = "image" ] {
border : 0 ;
-webkit-box-shadow : none ;
-moz-box-shadow : none ;
box-shadow : none ;
}
input [ type = "file" ] {
width : auto ;
padding : initial ;
line-height : initial ;
border : initial ;
background-color : transparent ;
background-color : initial ;
-webkit-box-shadow : none ;
-moz-box-shadow : none ;
box-shadow : none ;
}
input [ type = "button" ] ,
input [ type = "reset" ] ,
input [ type = "submit" ] {
width : auto ;
height : auto ;
cursor : pointer ;
* overflow : visible ;
}
select ,
input [ type = "file" ] {
* margin-top : 4px ;
}
select {
width : auto ;
background-color : # ffffff ;
}
select [ multiple ] ,
select [ size ] {
height : auto ;
}
textarea {
resize : vertical ;
height : auto ;
overflow : auto ;
vertical-align : top ;
}
input [ type = "hidden" ] {
display : none ;
}
. radio ,
. checkbox {
padding-left : 18px ;
font-weight : normal ;
}
. radio input [ type = "radio" ] ,
. checkbox input [ type = "checkbox" ] {
float : left ;
margin-left : -18px ;
}
. radio . inline ,
. checkbox . inline {
display : inline-block ;
padding-top : 5px ;
margin-bottom : 0 ;
vertical-align : middle ;
}
. radio . inline + . radio . inline ,
. checkbox . inline + . checkbox . inline {
margin-left : 10px ;
}
/* disabled ==================================== */
input [ disabled ] ,
select [ disabled ] ,
textarea [ disabled ] ,
input [ readonly ] ,
select [ readonly ] ,
textarea [ readonly ] {
-webkit-opacity : 0 . 5 ;
-moz-opacity : 0 . 5 ;
opacity : 0 . 5 ;
cursor : not-allowed ;
}
/* focus and active ============================ */
input : focus ,
textarea : focus {
border-color : # 000000 ;
outline : 0 ;
outline : thin dotted \ 9 ;
}
input [ type = "file" ] : focus ,
input [ type = "radio" ] : focus ,
input [ type = "checkbox" ] : focus ,
select : focus {
-webkit-box-shadow : none ;
-moz-box-shadow : none ;
box-shadow : none ;
}
/* help text ==================================== */
. help-block ,
. help-inline {
color : # 808080 ;
}
. help-block {
display : block ;
margin-bottom : 1em ;
line-height : 1em ;
}
. help-inline {
display : inline-block ;
vertical-align : middle ;
padding-left : 5px ;
}
/* .form-inline ================================= */
. form-inline input ,
. form-inline textarea ,
. form-inline select {
display : inline-block ;
margin-bottom : 0 ;
}
. form-inline label {
display : inline-block ;
}
. form-inline . radio ,
. form-inline . checkbox ,
. form-inline . radio {
padding-left : 0 ;
margin-bottom : 0 ;
vertical-align : middle ;
}
. form-inline . radio input [ type = "radio" ] ,
. form-inline . checkbox input [ type = "checkbox" ] {
float : left ;
margin-left : 0 ;
margin-right : 3px ;
}
/* .form-search ================================= */
. form-search input ,
. form-search textarea ,
. form-search select {
display : inline-block ;
margin-bottom : 0 ;
}
. form-search . search-query {
padding-left : 14px ;
padding-right : 14px ;
margin-bottom : 0 ;
-webkit-border-radius : 14px ;
-moz-border-radius : 14px ;
border-radius : 14px ;
}
. form-search label {
display : inline-block ;
}
. form-search . radio ,
. form-search . checkbox ,
. form-inline . radio {
padding-left : 0 ;
margin-bottom : 0 ;
vertical-align : middle ;
}
. form-search . radio input [ type = "radio" ] ,
. form-search . checkbox input [ type = "checkbox" ] {
float : left ;
margin-left : 0 ;
margin-right : 3px ;
}
/* Page level layout styles */
html {
background : # ebebeb url ( . . / img / background-light . jpg ) ;
font-family : 'PT Serif' , serif ;
font-color : # 333332 ;
font-size : 90 % ;
}
. navigation-wrapper {
margin : 0 auto ;
width : 100 % ;
padding : 2em 0 3em ;
font-family : 'PT Sans Narrow' , sans-serif ;
font-weight : 700 ;
text-transform : uppercase ;
}
. site-name {
margin : 0 auto ;
width : 100 % ;
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
margin-bottom : 1em ;
}
. top-navigation {
margin : 0 auto ;
width : 100 % ;
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
margin-bottom : 1em ;
}
. top-navigation ul {
list-style : none ;
margin : 0 ;
padding : 0 ;
}
. top-navigation li {
list-style-type : none ;
display : inline ;
margin-right : 25px ;
}
. top-navigation li : after {
content : "." ;
}
. top-navigation li a {
decoration : none ;
border-bottom : 0 solid transparent ;
}
# main {
counter-reset : captions ;
margin : 0 auto ;
width : 100 % ;
* zoom : 1 ;
clear : both ;
margin-top : 1em ;
}
# main : before ,
# main : after {
display : table ;
content : "" ;
}
# main : after {
clear : both ;
}
# main : before ,
# main : after {
content : "" ;
display : table ;
}
# main : after {
clear : both ;
}
# main article {
margin : 0 auto ;
width : 100 % ;
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
margin-bottom : 2em ;
}
# index {
margin : 0 auto ;
width : 100 % ;
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
margin-bottom : 2em ;
}
# index article h2 {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
margin-bottom : 0 ;
}
# index article p + p {
text-indent : 0 ;
}
. image-wrap {
position : relative ;
margin-bottom : 2em ;
}
. image-wrap : after {
content : " " ;
display : block ;
position : absolute ;
bottom : -1px ;
left : 8 % ;
width : 0 ;
height : 0 ;
border : 20px solid transparent ;
border-bottom-color : # ebebeb ;
}
. image-wrap img {
width : 100 % ;
height : auto ;
-ms-interpolation-mode : bicubic ;
}
. image-wrap . headline-wrap {
position : absolute ;
bottom : 25px ;
margin-left : 8 . 333333333333334 % ;
}
. image-wrap . headline-wrap h1 ,
. image-wrap . headline-wrap h2 {
color : # ffffff ;
text-shadow : 0 1px 2px rgba ( 0 , 0 , 0 , 0 . 25 ) ;
}
. headline-wrap h1 {
font-size : 48px ;
font-size : 2 . 6666666666666665rem ;
margin-bottom : 0 . 61875rem ;
}
. headline-wrap h2 {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
text-transform : uppercase ;
}
. article-wrap h2 {
font-size : 36px ;
font-size : 2rem ;
margin-bottom : 0 . 825rem ;
}
. article-wrap h3 {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
}
. byline {
clear : both ;
font-size : 80 % ;
}
. article-author-top h4 ,
. article-author-bottom h4 {
margin-bottom : 0 . 5em ;
}
. article-author-top p ,
. article-author-bottom p {
font-size : 80 % ;
font-style : italic ;
}
. article-author-top a ,
. article-author-bottom a ,
. article-author-top a : hover ,
. article-author-bottom a : hover {
border-bottom : 0 solid transparent ;
}
. article-author-top img . bio-photo ,
. article-author-bottom img . bio-photo {
-webkit-border-radius : 100px ;
-moz-border-radius : 100px ;
border-radius : 100px ;
}
. article-author-top {
display : none ;
}
. article-author-bottom . bio-photo {
float : left ;
margin-right : 25px ;
}
. toc {
display : none ;
font-size : 95 % ;
-webkit-opacity : 0 . 7 ;
-moz-opacity : 0 . 7 ;
opacity : 0 . 7 ;
-webkit-transition : opacity 0 . 2s ease-in-out ;
-moz-transition : opacity 0 . 2s ease-in-out ;
-ms-transition : opacity 0 . 2s ease-in-out ;
-o-transition : opacity 0 . 2s ease-in-out ;
transition : opacity 0 . 2s ease-in-out ;
}
. toc : hover {
-webkit-opacity : 1 ;
-moz-opacity : 1 ;
opacity : 1 ;
}
. toc header {
background : # 1a1a1a ;
}
. toc h3 {
margin : 0 ;
padding : 5px 10px ;
color : # ffffff ;
}
. toc h3 : hover {
cursor : pointer ;
}
. toc ul {
margin : 2px 0 0 ;
padding : 0 ;
background : # 4d4d4d ;
line-height : 1 ;
}
. toc li {
display : block ;
margin : 0 ;
padding : 0 ;
font-family : 'PT Sans Narrow' , sans-serif ;
border-bottom : 1px solid # 808080 ;
}
. toc li : last-child {
border-bottom : 0 solid transparent ;
}
. toc li a ,
. toc li a : hover {
color : # ffffff ;
border-bottom : 0 solid transparent ;
}
. toc li a {
padding : 10px ;
display : block ;
}
. toc li ul {
margin : 0 ;
border-top : 1px solid # 808080 ;
}
. image-grid {
* zoom : 1 ;
list-style : none ;
margin : 0 0 1em ;
padding : 0 ;
}
. image-grid : before ,
. image-grid : after {
display : table ;
content : "" ;
}
. image-grid : after {
clear : both ;
}
. image-grid : before ,
. image-grid : after {
content : "" ;
display : table ;
}
. image-grid : after {
clear : both ;
}
. image-grid li {
display : inline ;
float : left ;
width : 50 % ;
}
. recent-grid {
* zoom : 1 ;
list-style : none ;
margin : 1em 0 ;
}
. recent-grid : before ,
. recent-grid : after {
display : table ;
content : "" ;
}
. recent-grid : after {
clear : both ;
}
. recent-grid : before ,
. recent-grid : after {
content : "" ;
display : table ;
}
. recent-grid : after {
clear : both ;
}
. recent-grid li {
display : inline ;
}
. recent-grid li a {
border-bottom : 0 solid transparent ;
}
. recent-grid li a : hover {
border-bottom : 0 solid transparent ;
}
. recent-grid img {
width : 19 % ;
margin-bottom : 1 % ;
}
. holder {
font-family : 'PT Sans Narrow' , sans-serif ;
}
. holder a {
cursor : pointer ;
margin : 0 5px ;
}
. holder a . jp-previous {
margin-left : 0 ;
margin-right : 15px ;
}
. holder a . jp-next {
margin-left : 15px ;
margin-right : 0 ;
}
. holder a . jp-current {
font-weight : bold ;
}
. holder a . jp-current ,
. holder a . jp-current : hover ,
. holder a . jp-disabled ,
. holder a . jp-disabled : hover {
cursor : default ;
background : none ;
}
. holder span {
margin : 0 5px ;
}
. footer-wrap {
margin : 0 auto ;
width : 100 % ;
* zoom : 1 ;
clear : both ;
margin-top : 1em ;
padding-top : 2em ;
padding-bottom : 3em ;
background : # 000000 url ( . . / img / background-dark . png ) ;
}
. footer-wrap : before ,
. footer-wrap : after {
display : table ;
content : "" ;
}
. footer-wrap : after {
clear : both ;
}
. footer-wrap : before ,
. footer-wrap : after {
content : "" ;
display : table ;
}
. footer-wrap : after {
clear : both ;
}
. footer-wrap a ,
. footer-wrap a : active ,
. footer-wrap a : visited ,
. footer-wrap p ,
. footer-wrap h4 ,
. footer-wrap h5 ,
. footer-wrap h6 {
color : # bfbfbf ;
}
. footer-wrap a {
border-bottom : 0 solid transparent ;
}
. footer-wrap a : hover {
color : # ffffff ;
border-bottom : 0 solid transparent ;
}
. footer-wrap footer {
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
}
. related-articles {
display : inline ;
float : left ;
width : 83 . 33333333333334 % ;
margin-left : 8 . 333333333333334 % ;
margin-right : 8 . 333333333333334 % ;
}
. related-articles h4 {
font-size : 21px ;
font-size : 1 . 1666666666666667rem ;
margin-bottom : 1 . 4142857142857141rem ;
text-transform : uppercase ;
margin-bottom : 0 ;
}
. related-articles li {
margin-bottom : 0 ;
color : # ffffff ;
}
. footer-icons li {
display : inline-block ;
padding-right : 5px ;
}
. footer-icons li a {
font-size : 24px ;
font-size : 1 . 3333333333333332rem ;
margin-bottom : 1 . 2375rem ;
color : # 9a9a9a ;
-webkit-transition : 0 . 4s linear ;
-moz-transition : 0 . 4s linear ;
-ms-transition : 0 . 4s linear ;
-o-transition : 0 . 4s linear ;
transition : 0 . 4s linear ;
}
. footer-icons li a : hover {
text-decoration : none ;
border-bottom : none ;
}
. footer-icons li a : hover . icon-twitter ,
. footer-icons li a : hover . icon-twitter-sign {
color : # 2aa9df ;
}
. footer-icons li a : hover . icon-facebook ,
. footer-icons li a : hover . icon-facebook-sign {
color : # 3a5a98 ;
}
. footer-icons li a : hover . icon-instagram ,
. footer-icons li a : hover . icon-instagram-sign {
color : # 306088 ;
}
. footer-icons li a : hover . icon-google-plus ,
. footer-icons li a : hover . icon-google-plus-sign {
color : # b63324 ;
}
. footer-icons li a : hover . icon-lastfm ,
. footer-icons li a : hover . icon-lastfm-sign {
color : # d80049 ;
}
. footer-icons li a : hover . icon-github {
color : # 4183c4 ;
}
. chrome-frame {
background : # 000 ;
margin : 0 0 2em 0 ;
padding : 10px ;
text-align : center ;
color : # ffffff ;
}
. chrome-frame a {
color : # ffffff ;
border-bottom : 1px dotted # ffffff ;
text-decoration : none ;
}
. chrome-frame a : hover {
border-bottom : 1px solid # ffffff ;
}
/* 480px wide ============================================== */
. image-grid li {
width : 33 . 333333 % ;
}
/* 600px wide ============================================== */
html {
font-size : 95 % ;
}
. site-name {
display : inline ;
float : left ;
width : 16 . 666666666666668 % ;
margin-left : 4 . 166666666666667 % ;
margin-right : 4 . 166666666666667 % ;
}
. top-navigation {
display : inline ;
float : left ;
width : 75 % ;
margin-left : 0 % ;
margin-right : 0 % ;
}
. image-wrap . headline-wrap {
margin-left : 25 % ;
}
. image-wrap : after {
left : 25 % ;
}
# main article {
display : inline ;
float : left ;
width : 50 % ;
margin-left : 0 % ;
margin-right : 0 % ;
}
# index {
display : inline ;
float : left ;
width : 50 % ;
margin-left : 0 % ;
margin-right : 0 % ;
}
. footer-wrap footer {
display : inline ;
float : left ;
width : 50 % ;
margin-left : 25 % ;
margin-right : 25 % ;
}
. article-author-top {
display : block ;
display : inline ;
float : left ;
width : 16 . 666666666666668 % ;
margin-left : 4 . 166666666666667 % ;
margin-right : 4 . 166666666666667 % ;
}
. article-author-bottom {
display : none ;
}
. toc {
display : block ;
display : inline ;
float : left ;
width : 16 . 666666666666668 % ;
margin-left : 4 . 166666666666667 % ;
margin-right : 4 . 166666666666667 % ;
position : fixed ;
2013-05-24 21:06:54 +02:00
top : 120px ;
2013-05-24 16:25:31 +02:00
right : 0 ;
-webkit-box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
-moz-box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
box-shadow : 0 0 5px rgba ( 0 , 0 , 0 , 0 . 5 ) ;
}
. image-grid li {
width : 25 % ;
}
. related-articles {
display : inline ;
float : left ;
width : 50 % ;
margin-left : 25 % ;
margin-right : 25 % ;
}
/* 768px wide ============================================== */
html {
font-size : 100 % ;
}
/* Image Grid ============================================== */
. image-grid li {
width : 20 % ;
}
/* 992px wide ============================================== */
html {
font-size : 112 . 5 % ;
}
/* Image Grid ============================================== */
. image-grid li {
width : 16 . 666666666 % ;
}
/* 1382px wide ============================================= */
. site-name {
display : inline ;
float : left ;
width : 12 . 5 % ;
margin-left : 16 . 666666666666668 % ;
}
. top-navigation {
display : inline ;
float : left ;
width : 66 . 66666666666667 % ;
}
. image-wrap img {
display : inline ;
float : left ;
width : 66 . 66666666666667 % ;
margin-left : 16 . 666666666666668 % ;
margin-right : 16 . 666666666666668 % ;
margin-top : 1em ;
margin-bottom : 2em ;
}
. image-wrap : after {
left : 33 . 333333333 % ;
}
. image-wrap . headline-wrap {
margin-left : 33 . 333333333333336 % ;
}
# main article {
display : inline ;
float : left ;
width : 37 . 5 % ;
}
# index {
display : inline ;
float : left ;
width : 37 . 5 % ;
}
. related-articles {
display : inline ;
float : left ;
width : 37 . 5 % ;
margin-left : 33 . 333333333333336 % ;
margin-right : 29 . 166666666666668 % ;
}
. footer-wrap footer {
display : inline ;
float : left ;
width : 37 . 5 % ;
margin-left : 33 . 333333333333336 % ;
margin-right : 29 . 166666666666668 % ;
}
. article-author-top {
display : inline ;
float : left ;
width : 12 . 5 % ;
margin-left : 16 . 666666666666668 % ;
}
