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 % ;
}
2013-05-28 15:00:43 +02:00
/* Pygments Syntax highlighting ============================= */
. highlight {
2013-05-24 16:25:31 +02:00
background-color : # efefef ;
font-family : Monaco , "Courier New" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , monospace ;
font-size : 80 % ;
color : # 333332 ;
margin-bottom : 1 . 5em ;
}
2013-05-28 15:00:43 +02:00
. highlight pre {
2013-05-24 16:25:31 +02:00
margin : 0px ;
padding : 1em ;
}
2013-05-28 15:00:43 +02:00
. hll {
background-color : # ffffcc ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
. c {
color : # 999988 ;
font-style : italic ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Comment */
. err {
color : # a61717 ;
background-color : # e3d2d2 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Error */
. k {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Keyword */
. o {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Operator */
. cm {
color : # 999988 ;
2013-05-24 16:25:31 +02:00
font-style : italic ;
}
2013-05-28 15:00:43 +02:00
/* Comment.Multiline */
. cp {
color : # 999999 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
2013-05-28 15:00:43 +02:00
font-style : italic ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Comment.Preproc */
. c1 {
color : # 999988 ;
font-style : italic ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Comment.Single */
. cs {
color : # 999999 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
2013-05-28 15:00:43 +02:00
font-style : italic ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Comment.Special */
. gd {
2013-05-24 16:25:31 +02:00
color : # 000000 ;
2013-05-28 15:00:43 +02:00
background-color : # ffdddd ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Deleted */
. ge {
color : # 000000 ;
font-style : italic ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Emph */
. gr {
color : # aa0000 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Error */
. gh {
color : # 999999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Heading */
. gi {
color : # 000000 ;
background-color : # ddffdd ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Inserted */
. go {
color : # 888888 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Output */
. gp {
color : # 555555 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Prompt */
. gs {
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Generic.Strong */
. gu {
color : # aaaaaa ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Subheading */
. gt {
color : # aa0000 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Generic.Traceback */
. kc {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Keyword.Constant */
. kd {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Keyword.Declaration */
. kn {
color : # 000000 ;
font-weight : bold ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Keyword.Namespace */
. kp {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Keyword.Pseudo */
. kr {
2013-05-24 16:25:31 +02:00
color : # 000000 ;
2013-05-28 15:00:43 +02:00
font-weight : bold ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Keyword.Reserved */
. kt {
color : # 445588 ;
font-weight : bold ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Keyword.Type */
. m {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number */
. s {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String */
. na {
color : # 008080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Attribute */
. nb {
color : # 0086b3 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Builtin */
. nc {
color : # 445588 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Name.Class */
. no {
2013-05-24 16:25:31 +02:00
color : # 008080 ;
}
2013-05-28 15:00:43 +02:00
/* Name.Constant */
. nd {
color : # 3c5d5d ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Name.Decorator */
. ni {
color : # 800080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Entity */
. ne {
color : # 990000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Name.Exception */
. nf {
color : # 990000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Name.Function */
. nl {
color : # 990000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Name.Label */
. nn {
color : # 555555 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Namespace */
. nt {
color : # 000080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Tag */
. nv {
color : # 008080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Variable */
. ow {
color : # 000000 ;
2013-05-24 16:25:31 +02:00
font-weight : bold ;
}
2013-05-28 15:00:43 +02:00
/* Operator.Word */
. w {
color : # bbbbbb ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Text.Whitespace */
. mf {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number.Float */
. mh {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number.Hex */
. mi {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number.Integer */
. mo {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number.Oct */
. sb {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Backtick */
. sc {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Char */
. sd {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Doc */
. s2 {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Double */
. se {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Escape */
. sh {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Heredoc */
. si {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Interpol */
. sx {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Other */
. sr {
color : # 009926 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Regex */
. s1 {
color : # d01040 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Single */
. ss {
2013-05-24 16:25:31 +02:00
color : # 990073 ;
}
2013-05-28 15:00:43 +02:00
/* Literal.String.Symbol */
. bp {
color : # 999999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Builtin.Pseudo */
. vc {
color : # 008080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Variable.Class */
. vg {
color : # 008080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Variable.Global */
. vi {
color : # 008080 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Name.Variable.Instance */
. il {
color : # 009999 ;
2013-05-24 16:25:31 +02:00
}
2013-05-28 15:00:43 +02:00
/* Literal.Number.Integer.Long */ /* Gradients ============================================= */
2013-05-24 16:25:31 +02:00
/* .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 ;
2013-05-31 17:52:02 +02:00
padding : 12px 24px ;
2013-05-24 16:25:31 +02:00
margin-bottom : 2em ;
line-height : 1 ;
text-align : center ;
text-transform : uppercase ;
vertical-align : middle ;
border : 4px double # 333332 ;
2013-05-31 17:52:02 +02:00
-webkit-border-radius : 50px ;
-moz-border-radius : 50px ;
border-radius : 50px ;
2013-05-24 16:25:31 +02:00
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 ;
}
2013-05-31 17:52:02 +02:00
. btn-small {
font-size : 60 % ;
padding : 6px 12px ;
}
/* Well ================================================= */
. well {
min-height : 20px ;
padding : 19px ;
margin-bottom : 20px ;
background-color : # f5f5f5 ;
border : 1px solid # e3e3e3 ;
-webkit-border-radius : 4px ;
-moz-border-radius : 4px ;
border-radius : 4px ;
-webkit-box-shadow : inset 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 05 ) ;
-moz-box-shadow : inset 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 05 ) ;
box-shadow : inset 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
2013-05-24 20:21:06 +02:00
/* Custom set of Icomoon webfont icons ===================== */
@ font-face {
font-family : 'icomoon' ;
src : url ( '../fonts/icomoon.eot' ) ;
src : url ( '../fonts/icomoon.eot?#iefix' ) format ( 'embedded-opentype' ) , url ( '../fonts/icomoon.woff' ) format ( 'woff' ) , url ( '../fonts/icomoon.ttf' ) format ( 'truetype' ) , url ( '../fonts/icomoon.svg#icomoon' ) format ( 'svg' ) ;
font-weight : normal ;
font-style : normal ;
}
@ media screen and ( -webkit-min-device-pixel-ratio : 0 ) {
@ font-face {
font-family : 'icomoon' ;
src : url ( '../fonts/icomoon.svg#icomoon' ) format ( 'svg' ) ;
}
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[ data-icon ] : before {
font-family : 'icomoon' ;
content : attr ( data-icon ) ;
speak : none ;
font-weight : normal ;
font-variant : normal ;
text-transform : none ;
line-height : 1 ;
-webkit-font-smoothing : antialiased ;
}
/* Use the following CSS code if you want to have a class per icon */
/ *
Instead of a list of all class selectors ,
you can use the generic selector below , but it ' s slower :
[ class * = "icon-" ] {
* /
. icon-twitter ,
. icon-feed ,
. icon-instagram ,
. icon-facebook ,
. icon-google-plus ,
. icon-github {
font-family : 'icomoon' ;
speak : none ;
font-style : normal ;
font-weight : normal ;
font-variant : normal ;
text-transform : none ;
line-height : 1 ;
-webkit-font-smoothing : antialiased ;
}
. icon-twitter : before {
content : "\e000" ;
}
. icon-feed : before {
content : "\e003" ;
}
. icon-instagram : before {
content : "\e004" ;
}
. icon-facebook : before {
content : "\e001" ;
}
. icon-google-plus : before {
content : "\e002" ;
}
. icon-github : before {
content : "\e005" ;
}
2013-05-24 16:25:31 +02:00
/* 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 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 ;
}
/* jQuery Magnific-Popup =================================== */
/* Magnific Popup CSS */
. mfp-bg {
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
z-index : 502 ;
overflow : hidden ;
position : fixed ;
background : # 0b0b0b ;
opacity : 0 . 8 ;
filter : alpha ( opacity = 80 ) ;
}
. mfp-wrap {
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
z-index : 503 ;
position : fixed ;
outline : none ! important ;
-webkit-backface-visibility : hidden ;
}
. mfp-container {
text-align : center ;
position : absolute ;
width : 100 % ;
height : 100 % ;
left : 0 ;
top : 0 ;
padding : 0 8px ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}
. mfp-container : before {
content : '' ;
display : inline-block ;
height : 100 % ;
vertical-align : middle ;
}
. mfp-align-top . mfp-container : before {
display : none ;
}
. mfp-content {
position : relative ;
display : inline-block ;
vertical-align : middle ;
margin : 0 auto ;
text-align : left ;
z-index : 505 ;
}
. mfp-inline-holder . mfp-content ,
. mfp-ajax-holder . mfp-content {
width : 100 % ;
cursor : auto ;
}
2013-06-04 17:19:59 +02:00
. mfp-inline-holder . mfp-content : after ,
. mfp-ajax-holder . mfp-content : after {
content : '' ;
display : block ;
width : auto ;
height : auto ;
position : absolute ;
left : 0 ;
top : 0 ;
bottom : 0 ;
right : 0 ;
z-index : -1 ;
box-shadow : 0 0 8px rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
2013-05-24 16:25:31 +02:00
. mfp-ajax-cur {
cursor : progress ;
}
. mfp-zoom-out-cur ,
. mfp-zoom-out-cur . mfp-image-holder . mfp-close {
cursor : -moz-zoom-out ;
cursor : -webkit-zoom-out ;
cursor : zoom-out ;
}
. mfp-zoom ,
. image-popup {
cursor : pointer ;
cursor : -webkit-zoom-in ;
cursor : -moz-zoom-in ;
cursor : zoom-in ;
}
. mfp-auto-cursor . mfp-content {
cursor : auto ;
}
. mfp-close ,
. mfp-arrow ,
. mfp-preloader ,
. mfp-counter {
-webkit-user-select : none ;
-moz-user-select : none ;
user-select : none ;
}
. mfp-loading . mfp-figure {
display : none ;
}
. mfp-hide {
display : none ! important ;
}
. mfp-preloader {
color : # cccccc ;
position : absolute ;
top : 50 % ;
width : auto ;
text-align : center ;
margin-top : -0 . 8em ;
left : 8px ;
right : 8px ;
z-index : 504 ;
}
. mfp-preloader a {
color : # cccccc ;
}
. mfp-preloader a : hover {
color : white ;
}
. mfp-s-ready . mfp-preloader {
display : none ;
}
. mfp-s-error . mfp-content {
display : none ;
}
button . mfp-close ,
button . mfp-arrow {
overflow : visible ;
cursor : pointer ;
border : 0 ;
-webkit-appearance : none ;
display : block ;
padding : 0 ;
z-index : 506 ;
}
2013-05-28 20:30:28 +02:00
button . mfp-close {
background : transparent ;
}
2013-05-24 16:25:31 +02:00
button :: -moz-focus-inner {
padding : 0 ;
border : 0 ;
}
. mfp-close {
width : 44px ;
height : 44px ;
line-height : 44px ;
position : absolute ;
right : 0 ;
top : 0 ;
text-decoration : none ;
text-align : center ;
opacity : 0 . 65 ;
padding : 0 0 18px 10px ;
color : white ;
font-style : normal ;
font-size : 28px ;
font-family : Arial , Baskerville , monospace ;
}
. mfp-close : hover ,
. mfp-close : focus {
opacity : 1 ;
}
. mfp-close : active {
top : 1px ;
}
. mfp-close-btn-in . mfp-close {
color : # 333333 ;
}
. mfp-image-holder . mfp-close ,
. mfp-iframe-holder . mfp-close {
color : white ;
right : -6px ;
text-align : right ;
padding-right : 6px ;
width : 100 % ;
}
. mfp-counter {
position : absolute ;
top : 0 ;
right : 0 ;
color : # cccccc ;
font-size : 12px ;
line-height : 18px ;
}
. mfp-arrow {
text-indent : 100 % ;
white-space : nowrap ;
overflow : hidden ;
position : absolute ;
top : 0 ;
opacity : 0 . 65 ;
margin : 0 ;
top : 50 % ;
margin-top : -55px ;
padding : 0 ;
width : 90px ;
height : 110px ;
background-color : # 000000 ;
-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 ;
-webkit-tap-highlight-color : rgba ( 0 , 0 , 0 , 0 ) ;
}
. mfp-arrow : active {
margin-top : -54px ;
}
. mfp-arrow : hover ,
. mfp-arrow : focus {
opacity : 1 ;
}
. mfp-arrow : before ,
. mfp-arrow : after ,
. mfp-arrow . mfp-b ,
. mfp-arrow . mfp-a {
content : '' ;
display : block ;
width : 0 ;
height : 0 ;
position : absolute ;
left : 0 ;
top : 0 ;
margin-top : 35px ;
margin-left : 35px ;
border : solid transparent ;
}
. mfp-arrow : after ,
. mfp-arrow . mfp-a {
opacity : 0 . 8 ;
border-top-width : 12px ;
border-bottom-width : 12px ;
top : 8px ;
}
. mfp-arrow : before ,
. mfp-arrow . mfp-b {
border-top-width : 20px ;
border-bottom-width : 20px ;
}
. mfp-arrow-left {
left : 0 ;
-webkit-border-top-right-radius : 5px ;
-webkit-border-bottom-right-radius : 5px ;
-webkit-border-bottom-left-radius : 0 ;
-webkit-border-top-left-radius : 0 ;
-moz-border-radius-topright : 5px ;
-moz-border-radius-bottomright : 5px ;
-moz-border-radius-bottomleft : 0 ;
-moz-border-radius-topleft : 0 ;
border-top-right-radius : 5px ;
border-bottom-right-radius : 5px ;
border-bottom-left-radius : 0 ;
border-top-left-radius : 0 ;
-webkit-background-clip : padding-box ;
-moz-background-clip : padding ;
background-clip : padding-box ;
}
. mfp-arrow-left : after ,
. mfp-arrow-left . mfp-a {
2013-06-04 17:19:59 +02:00
border-right : 12px solid # fff ;
2013-05-24 16:25:31 +02:00
left : 5px ;
}
. mfp-arrow-left : before ,
. mfp-arrow-left . mfp-b {
2013-06-04 17:19:59 +02:00
border-right : 20px solid # fff ;
2013-05-24 16:25:31 +02:00
}
. mfp-arrow-right {
right : 0 ;
-webkit-border-top-right-radius : 0 ;
-webkit-border-bottom-right-radius : 0 ;
-webkit-border-bottom-left-radius : 5px ;
-webkit-border-top-left-radius : 5px ;
-moz-border-radius-topright : 0 ;
-moz-border-radius-bottomright : 0 ;
-moz-border-radius-bottomleft : 5px ;
-moz-border-radius-topleft : 5px ;
border-top-right-radius : 0 ;
border-bottom-right-radius : 0 ;
border-bottom-left-radius : 5px ;
border-top-left-radius : 5px ;
-webkit-background-clip : padding-box ;
-moz-background-clip : padding ;
background-clip : padding-box ;
}
. mfp-arrow-right : after ,
. mfp-arrow-right . mfp-a {
2013-06-04 17:19:59 +02:00
border-left : 12px solid # fff ;
2013-05-24 16:25:31 +02:00
left : 3px ;
}
. mfp-arrow-right : before ,
. mfp-arrow-right . mfp-b {
2013-06-04 17:19:59 +02:00
border-left : 20px solid # fff ;
2013-05-24 16:25:31 +02:00
}
. mfp-iframe-holder {
padding-top : 40px ;
padding-bottom : 40px ;
}
. mfp-iframe-holder . mfp-content {
line-height : 0 ;
width : 100 % ;
max-width : 900px ;
}
. mfp-iframe-scaler {
width : 100 % ;
height : 0 ;
overflow : hidden ;
padding-top : 56 . 25 % ;
}
. mfp-iframe-scaler iframe {
position : absolute ;
2013-06-04 17:19:59 +02:00
display : block ;
top : 0 ;
2013-05-24 16:25:31 +02:00
left : 0 ;
width : 100 % ;
height : 100 % ;
box-shadow : 0 0 8px rgba ( 0 , 0 , 0 , 0 . 6 ) ;
background : black ;
}
. mfp-iframe-holder . mfp-close {
2013-06-04 17:19:59 +02:00
top : -40px ;
2013-05-24 16:25:31 +02:00
}
/* Main image in popup */
img . mfp-img {
width : auto ;
max-width : 100 % ;
height : auto ;
display : block ;
line-height : 0 ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
padding : 40px 0 40px ;
margin : 0 auto ;
}
/* The shadow behind the image */
. mfp-figure : after {
content : '' ;
position : absolute ;
left : 0 ;
top : 40px ;
bottom : 40px ;
display : block ;
right : 0 ;
width : auto ;
height : auto ;
z-index : -1 ;
box-shadow : 0 0 8px rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. mfp-figure {
line-height : 0 ;
}
. mfp-bottom-bar {
margin-top : -36px ;
position : absolute ;
top : 100 % ;
left : 0 ;
width : 100 % ;
cursor : auto ;
}
. mfp-title {
text-align : left ;
line-height : 18px ;
color : # f3f3f3 ;
}
. mfp-figure small {
color : # bdbdbd ;
display : block ;
font-size : 12px ;
line-height : 14px ;
}
. mfp-image-holder . mfp-content {
max-width : 100 % ;
}
. mfp-gallery . mfp-image-holder . mfp-figure {
cursor : pointer ;
}
@ media screen and ( max-width : 800px ) and ( orientation : landscape ) , screen and ( max-height : 300px ) {
/ * *
* Remove all paddings around the image on small screen
* /
. mfp-img-mobile . mfp-image-holder {
padding-left : 0 ;
padding-right : 0 ;
}
. mfp-img-mobile img . mfp-img {
padding : 0 ;
}
/* The shadow behind the image */
. mfp-img-mobile . mfp-figure : after {
top : 0 ;
bottom : 0 ;
}
. mfp-img-mobile . mfp-bottom-bar {
background : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
bottom : 0 ;
margin : 0 ;
top : auto ;
padding : 3px 5px ;
position : fixed ;
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
}
. mfp-img-mobile . mfp-bottom-bar : empty {
padding : 0 ;
}
. mfp-img-mobile . mfp-counter {
right : 5px ;
top : 3px ;
}
. mfp-img-mobile . mfp-close {
top : 0 ;
right : 0 ;
width : 35px ;
height : 35px ;
line-height : 35px ;
background : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
position : fixed ;
text-align : center ;
padding : 0 ;
}
. mfp-img-mobile . mfp-figure small {
display : inline ;
margin-left : 5px ;
}
}
@ media all and ( max-width : 800px ) {
. mfp-arrow {
-webkit-transform : scale ( 0 . 75 ) ;
transform : scale ( 0 . 75 ) ;
}
. mfp-arrow-left {
-webkit-transform-origin : 0 ;
transform-origin : 0 ;
}
. mfp-arrow-right {
-webkit-transform-origin : 100 % ;
transform-origin : 100 % ;
}
. mfp-container {
padding-left : 6px ;
padding-right : 6px ;
}
}
. mfp-ie7 . mfp-img {
padding : 0 ;
}
. mfp-ie7 . mfp-bottom-bar {
width : 600px ;
left : 50 % ;
margin-left : -300px ;
margin-top : 5px ;
padding-bottom : 5px ;
}
. mfp-ie7 . mfp-container {
padding : 0 ;
}
. mfp-ie7 . mfp-content {
padding-top : 44px ;
}
. mfp-ie7 . mfp-close {
top : 0 ;
right : 0 ;
padding-top : 0 ;
}
/ * *
* Fade-zoom animation for first dialog
* /
/* start state */
. mfp-fade . zoom-anim-dialog {
opacity : 0 ;
-webkit-transition : all 0 . 2s ease-in-out ;
-moz-transition : all 0 . 2s ease-in-out ;
-ms-transition : all 0 . 2s ease-in-out ;
-o-transition : all 0 . 2s ease-in-out ;
transition : all 0 . 2s ease-in-out ;
-webkit-transform : scale ( 0 . 8 ) ;
-moz-transform : scale ( 0 . 8 ) ;
-ms-transform : scale ( 0 . 8 ) ;
-o-transform : scale ( 0 . 8 ) ;
transform : scale ( 0 . 8 ) ;
}
/* animate in */
. mfp-fade . mfp-ready . zoom-anim-dialog {
opacity : 1 ;
-webkit-transform : scale ( 1 ) ;
-moz-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
-o-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
/* animate out */
. mfp-fade . mfp-removing . zoom-anim-dialog {
-webkit-transform : scale ( 0 . 8 ) ;
-moz-transform : scale ( 0 . 8 ) ;
-ms-transform : scale ( 0 . 8 ) ;
-o-transform : scale ( 0 . 8 ) ;
transform : scale ( 0 . 8 ) ;
opacity : 0 ;
}
/* Dark overlay, start state */
. mfp-fade . mfp-bg {
opacity : 0 ;
-webkit-transition : opacity 0 . 3s ease-out ;
-moz-transition : opacity 0 . 3s ease-out ;
-ms-transition : opacity 0 . 3s ease-out ;
-o-transition : opacity 0 . 3s ease-out ;
transition : opacity 0 . 3s ease-out ;
}
/* animate in */
. mfp-fade . mfp-ready . mfp-bg {
opacity : 0 . 8 ;
}
/* animate out */
. mfp-fade . mfp-removing . mfp-bg {
opacity : 0 ;
}
/* Print =================================================== */
@ media print {
* {
background : transparent ! important ;
color : black ! important ;
box-shadow : none ! important ;
text-shadow : none ! important ;
filter : none ! important ;
-ms-filter : none ! important ;
position : static ! important ;
}
@ page {
margin : 0 . 5cm ;
}
h2 ,
h3 {
orphans : 3 ;
widows : 3 ;
page-break-after : avoid ;
}
p {
orphans : 3 ;
widows : 3 ;
}
pre ,
blockquote {
border : 1px solid # 333 ;
page-break-inside : avoid ;
padding : 1em ;
}
abbr [ title ] : after {
content : " (" attr ( title ) ")" ;
}
a ,
a : visited {
text-decoration : underline ;
}
a [ href ] : after {
content : " (" attr ( href ) ")" ;
}
a [ href ^ = "javascript:" ] : after ,
a [ href ^ = "#" ] : after {
content : "" ;
}
img {
max-width : 100 % ! important ;
page-break-inside : avoid ;
}
thead {
display : table-header-group ;
}
tr {
page-break-inside : avoid ;
}
}
/* 480px wide ============================================== */
@ media only screen and ( min-width : 30em ) {
. image-grid li {
width : 33 . 333333 % ;
}
}
/* 600px wide ============================================== */
@ media only screen and ( min-width : 37 . 5em ) {
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 ============================================== */
@ media only screen and ( min-width : 48em ) {
html {
font-size : 100 % ;
}
/* Image Grid ============================================== */
. image-grid li {
width : 20 % ;
}
}
/* 992px wide ============================================== */
@ media only screen and ( min-width : 62em ) {
html {
font-size : 112 . 5 % ;
}
/* Image Grid ============================================== */
. image-grid li {
width : 16 . 666666666 % ;
}
}
/* 1382px wide ============================================= */
@ media only screen and ( min-width : 86 . 375em ) {
. 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 % ;
}
}
/* 2x for retina displays ================================== */
@ media ( -webkit-min-device-pixel-ratio : 2 ) , ( min-resolution : 192dpi ) {
}
