2013-06-30 15:41:53 -04:00
article , aside , details , figcaption , figure , footer , header , hgroup , main , nav , section , summary { display : block ; }
audio , canvas , video { display : inline-block ; }
audio : not ( [ controls ] ) { display : none ; height : 0 ; }
[ hidden ] { display : none ; }
html { font-family : sans-serif ; -webkit- text-size-adjust : 100 % ; -ms- text-size-adjust : 100 % ; }
body { margin : 0 ; }
a : focus { outline : thin dotted ; }
a : active , a : hover { outline : 0 ; }
h1 { font-size : 2 em ; margin : 0.67 em 0 ; }
abbr [ title ] { border-bottom : 1 px dotted ; }
b , strong { font-weight : bold ; }
dfn { font-style : italic ; }
hr { -moz- box-sizing : content-box ; box-sizing : content-box ; height : 0 ; }
mark { background : #ff0 ; color : #000 ; }
code , kbd , pre , samp { font-family : monospace , serif ; font-size : 1 em ; }
pre { white-space : pre-wrap ; }
q { quotes : "\201C" "\201D" "\2018" "\2019" ; }
small { font-size : 80 % ; }
sub , sup { font-size : 75 % ; line-height : 0 ; position : relative ; vertical-align : baseline ; }
sup { top : -0.5 em ; }
sub { bottom : -0.25 em ; }
img { border : 0 ; }
svg : not ( : root ) { overflow : hidden ; }
figure { margin : 0 ; }
fieldset { border : 1 px solid #c0c0c0 ; margin : 0 2 px ; padding : 0.35 em 0.625 em 0.75 em ; }
legend { border : 0 ; padding : 0 ; }
button , input , select , textarea { font-family : inherit ; font-size : 100 % ; margin : 0 ; }
button , input { line-height : normal ; }
button , select { text-transform : none ; }
button , html input [ type = "button" ] , input [ type = "reset" ] , input [ type = "submit" ] { -webkit- appearance : button ; cursor : pointer ; }
button [ disabled ] , html input [ disabled ] { cursor : default ; }
input [ type = "checkbox" ] , input [ type = "radio" ] { box-sizing : border-box ; padding : 0 ; }
input [ type = "search" ] { -webkit- appearance : textfield ; -moz- box-sizing : content-box ; -webkit- box-sizing : content-box ; box-sizing : content-box ; }
input [ type = "search" ] :: -webkit-search-cancel-button , input [ type = "search" ] :: -webkit-search-decoration { -webkit- appearance : none ; }
button :: -moz-focus-inner , input :: -moz-focus-inner { border : 0 ; padding : 0 ; }
textarea { overflow : auto ; vertical-align : top ; }
table { border-collapse : collapse ; border-spacing : 0 ; margin-bottom : 1.5 em ; }
:: -moz-selection { background-color : #dadada ; color : #343434 ; text-shadow : none ; }
:: selection { background-color : #dadada ; color : #343434 ; text-shadow : none ; }
. 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 ; }
@ 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 ; }
. drop-cap : first-letter { float : left ; margin : inherit ; padding : inherit ; font-size : 4 em ; 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 : 117 px ; font-size : 6.5 rem ; margin-bottom : 0.25384615384615383 rem ; }
. giga { font-size : 90 px ; font-size : 5 rem ; margin-bottom : 0.33 rem ; }
. mega { font-size : 72 px ; font-size : 4 rem ; margin-bottom : 0.4125 rem ; }
. alpha { font-size : 60 px ; font-size : 3.3333333333333335 rem ; margin-bottom : 0.495 rem ; }
. beta { font-size : 48 px ; font-size : 2.6666666666666665 rem ; margin-bottom : 0.61875 rem ; }
. gamma { font-size : 36 px ; font-size : 2 rem ; margin-bottom : 0.825 rem ; }
. delta { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; }
. epsilon { font-size : 21 px ; font-size : 1.1666666666666667 rem ; margin-bottom : 1.4142857142857141 rem ; }
. zeta { font-size : 18 px ; font-size : 1 rem ; margin-bottom : 1.65 rem ; }
h1 { font-size : 60 px ; font-size : 3.3333333333333335 rem ; margin-bottom : 0.495 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
h2 { font-size : 48 px ; font-size : 2.6666666666666665 rem ; margin-bottom : 0.61875 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
h3 { font-size : 36 px ; font-size : 2 rem ; margin-bottom : 0.825 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
h4 { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
h5 { font-size : 21 px ; font-size : 1.1666666666666667 rem ; margin-bottom : 1.4142857142857141 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
h6 { font-size : 18 px ; font-size : 1 rem ; margin-bottom : 1.65 rem ; text-rendering : optimizeLegibility ; line-height : 1 ; margin-top : 0 ; }
p { margin : 0 0 1.5 em ; } p + p { text-indent : 1.5 em ; margin-top : -1.5 em ; }
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 ; }
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 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.2 rem ; }
. dictionary-style dt { display : inline ; counter-reset : definitions ; } . dictionary-style dt + dt : before { content : ", " ; margin-left : -0.2 rem ; }
. dictionary-style dd { display : block ; counter-increment : definitions ; } . dictionary-style dd : before { content : counter ( definitions , decimal ) ". " ; }
. stats-tabs { padding : 0 ; } . stats-tabs li { display : inline-block ; margin : 0 0.625 rem 0 0 ; padding : 0 0.625 rem 0 0 ; border-right : 0.125 rem solid #cccccc ; } . stats-tabs li : last-child { margin : 0 ; padding : 0 ; border : none ; }
. stats-tabs li a { display : inline-block ; font-size : 1.5 rem ; font-weight : bold ; } . stats-tabs li a b { display : block ; margin : 0.125 rem 0 0 0 ; font-size : 0.875 rem ; font-weight : normal ; }
. cite { display : block ; font-size : 0.875 em ; text-align : right ; }
. pull-quote { position : relative ; padding : 1 em ; } . pull-quote : before , . pull-quote : after { height : 1 em ; opacity : 0.15 ; position : absolute ; font-size : 4 em ; }
. pull-quote : before { content : '“' ; top : 0 em ; left : 0 em ; }
. pull-quote : after { content : '”' ; bottom : 0 em ; right : 0 em ; }
h1 , h2 , h3 , h4 , h5 , h6 { font-family : 'PT Sans Narrow' , sans-serif ; font-weight : 700 ; }
h6 { font-weight : 400 ; }
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 ; }
ul li { list-style-type : square ; }
ol li { list-style-type : upper-roman ; }
p > a , li > a , em > a , a > em , footer a { text-decoration : none ; border-bottom : 1 px dotted #b3b3b1 ; }
p > a : hover , li > a : hover , em > a : hover , footer a : hover { text-decoration : none ; border-bottom : 1 px solid #b3b3b1 ; }
figcaption { margin-top : 0.75 em ; line-height : 1.25 ; font-size : 18 px ; font-size : 1 rem ; margin-bottom : 1.65 rem ; font-family : 'PT Sans Narrow' , sans-serif ; counter-increment : captions ; } figcaption : before { font-weight : 700 ; text-transform : uppercase ; content : "Figure " counter ( captions ) ": " ; }
. notice { margin-top : 1.5 em ; padding : .5 em 1 em ; text-indent : 0 ; font-size : 90 % ; background-color : #ddd ; border-left : 10 px solid #ccc ; }
blockquote { font-style : italic ; margin-left : 0 ; padding-left : 1 em ; border-left : 10 px solid #ccc ; } blockquote p + p { text-indent : 0 ; margin-top : 0 ; }
. footnotes { font-size : 90 % ; }
tt , code , kbd , samp , pre { font-family : Monaco , "Courier New" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , monospace ; }
p code { font-size : 80 % ; white-space : nowrap ; margin : 0 2 px ; padding : 0 5 px ; border : 1 px solid #e6e6e6 ; background-color : #f2f2f2 ; -webkit- border-radius : 3 px ; -moz- border-radius : 3 px ; border-radius : 3 px ; }
. highlight { background-color : #efefef ; font-family : Monaco , "Courier New" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , monospace ; font-size : 80 % ; color : #333332 ; margin-bottom : 1.5 em ; }
. highlight pre { margin : 0 px ; padding : 1 em ; }
. hll { background-color : #ffffcc ; }
. c { color : #999988 ; font-style : italic ; }
. err { color : #a61717 ; background-color : #e3d2d2 ; }
. k { color : #000000 ; font-weight : bold ; }
. o { color : #000000 ; font-weight : bold ; }
. cm { color : #999988 ; font-style : italic ; }
. cp { color : #999999 ; font-weight : bold ; font-style : italic ; }
. c1 { color : #999988 ; font-style : italic ; }
. cs { color : #999999 ; font-weight : bold ; font-style : italic ; }
. gd { color : #000000 ; background-color : #ffdddd ; }
. ge { color : #000000 ; font-style : italic ; }
. gr { color : #aa0000 ; }
. gh { color : #999999 ; }
. gi { color : #000000 ; background-color : #ddffdd ; }
. go { color : #888888 ; }
. gp { color : #555555 ; }
. gs { font-weight : bold ; }
. gu { color : #aaaaaa ; }
. gt { color : #aa0000 ; }
. kc { color : #000000 ; font-weight : bold ; }
. kd { color : #000000 ; font-weight : bold ; }
. kn { color : #000000 ; font-weight : bold ; }
. kp { color : #000000 ; font-weight : bold ; }
. kr { color : #000000 ; font-weight : bold ; }
. kt { color : #445588 ; font-weight : bold ; }
. m { color : #009999 ; }
. s { color : #d01040 ; }
. na { color : #008080 ; }
. nb { color : #0086b3 ; }
. nc { color : #445588 ; font-weight : bold ; }
. no { color : #008080 ; }
. nd { color : #3c5d5d ; font-weight : bold ; }
. ni { color : #800080 ; }
. ne { color : #990000 ; font-weight : bold ; }
. nf { color : #990000 ; font-weight : bold ; }
. nl { color : #990000 ; font-weight : bold ; }
. nn { color : #555555 ; }
. nt { color : #000080 ; }
. nv { color : #008080 ; }
. ow { color : #000000 ; font-weight : bold ; }
. w { color : #bbbbbb ; }
. mf { color : #009999 ; }
. mh { color : #009999 ; }
. mi { color : #009999 ; }
. mo { color : #009999 ; }
. sb { color : #d01040 ; }
. sc { color : #d01040 ; }
. sd { color : #d01040 ; }
. s2 { color : #d01040 ; }
. se { color : #d01040 ; }
. sh { color : #d01040 ; }
. si { color : #d01040 ; }
. sx { color : #d01040 ; }
. sr { color : #009926 ; }
. s1 { color : #d01040 ; }
. ss { color : #990073 ; }
. bp { color : #999999 ; }
. vc { color : #008080 ; }
. vg { color : #008080 ; }
. vi { color : #008080 ; }
. il { color : #009999 ; }
. hidden { display : none ; visibility : hidden ; }
. visuallyhidden . focusable : active , . visuallyhidden . focusable : focus { position : static ; clip : auto ; height : auto ; width : auto ; margin : 0 ; overflow : visible ; }
. visible-phone { display : none !important ; }
. visible-tablet { display : none !important ; }
. hidden-desktop { display : none !important ; }
@ media ( max-width : 767px ) { . visible-phone { display : inherit !important ; } . hidden-phone { display : none !important ; } . hidden-desktop { display : inherit !important ; } . visible-desktop { display : none !important ; } } @ 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 ; } } hr { display : block ; margin : 1 em 0 ; padding : 0 ; height : 1 px ; border : 0 ; border-top : 1 px solid #ccc ; border-bottom : 1 px solid #fff ; }
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 % ; }
. btn { display : inline-block ; * display : inline ; * zoom : 1 ; padding : 12 px 24 px ; margin-bottom : 2 em ; line-height : 1 ; text-align : center ; text-transform : uppercase ; vertical-align : middle ; border : 4 px double #333332 ; -webkit- border-radius : 50 px ; -moz- border-radius : 50 px ; border-radius : 50 px ; cursor : pointer ; * margin-left : .3 em ; -webkit- transition : 0.4 s linear ; -moz- transition : 0.4 s linear ; -ms- transition : 0.4 s linear ; -o- transition : 0.4 s linear ; transition : 0.4 s linear ; } . btn : visited { border : 4 px double #4e4e4e ; }
. btn : hover { border : 4 px double #1a1a1a ; }
. btn : first-child { * margin-left : 0 ; }
. btn-inverse { border : 4 px double #ffffff ; color : #ffffff ; background-color : #000000 ; } . btn-inverse : visited { color : #ffffff ; border-color : #ffffff ; }
. btn-inverse : hover { color : #ffffff ; border-color : #ffffff ; }
. btn-small { font-size : 60 % ; padding : 6 px 12 px ; }
. well { min-height : 20 px ; padding : 19 px ; margin-bottom : 20 px ; background-color : #f5f5f5 ; border : 1 px solid #e3e3e3 ; -webkit- border-radius : 4 px ; -moz- border-radius : 4 px ; border-radius : 4 px ; -webkit- box-shadow : inset 0 1 px 1 px rgba ( 0 , 0 , 0 , 0.05 ) ; -moz- box-shadow : inset 0 1 px 1 px rgba ( 0 , 0 , 0 , 0.05 ) ; box-shadow : inset 0 1 px 1 px rgba ( 0 , 0 , 0 , 0.05 ) ; }
@ 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 ; } [ 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 ; }
. icon-instagram , . icon-facebook , . icon-twitter , . icon-google-plus , . icon-feed , . icon-feed-2 , . icon-linkedin , . icon-tumblr , . icon-lastfm , . icon-mail , . 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-instagram : before { content : "\e004" ; }
. icon-facebook : before { content : "\e003" ; }
. icon-twitter : before { content : "\e007" ; }
. icon-google-plus : before { content : "\e00a" ; }
. icon-feed : before { content : "\e00b" ; }
. icon-feed-2 : before { content : "\e00c" ; }
. icon-linkedin : before { content : "\e001" ; }
. icon-tumblr : before { content : "\e002" ; }
. icon-lastfm : before { content : "\e005" ; }
. icon-mail : before { content : "\e006" ; }
. icon-github : before { content : "\e000" ; }
form { margin : 0 0 5 px 0 ; } form fieldset { margin-bottom : 5 px ; padding : 0 ; border-width : 0 ; }
form legend { display : block ; width : 100 % ; margin-bottom : 10 px ; * margin-left : -7 px ; padding : 0 ; color : #333332 ; border : 0 ; border-bottom : 1 px solid #cccccc ; white-space : normal ; }
form p { margin-bottom : 2.5 px ; }
form ul { list-style-type : none ; margin : 0 0 5 px 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.25 px ; font-weight : bold ; color : #333332 ; cursor : pointer ; } label input , label textarea , label select { display : block ; }
input , textarea , select { display : inline-block ; width : 100 % ; padding : 4 px ; margin-bottom : 1.25 px ; background-color : #ffffff ; border : 1 px solid #cccccc ; color : #333332 ; } input : hover , textarea : hover , select : hover { border-color : #808080 ; }
. input-mini { width : 60 px ; }
. input-small { width : 90 px ; }
input [ type = "image" ] , input [ type = "checkbox" ] , input [ type = "radio" ] { width : auto ; height : auto ; padding : 0 ; margin : 3 px 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 : 13 px ; * height : 13 px ; }
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 : 4 px ; }
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 : 18 px ; font-weight : normal ; }
. radio input [ type = "radio" ] , . checkbox input [ type = "checkbox" ] { float : left ; margin-left : -18 px ; }
. radio . inline , . checkbox . inline { display : inline-block ; padding-top : 5 px ; margin-bottom : 0 ; vertical-align : middle ; }
. radio . inline + . radio . inline , . checkbox . inline + . checkbox . inline { margin-left : 10 px ; }
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 ; }
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-block , . help-inline { color : #808080 ; }
. help-block { display : block ; margin-bottom : 1 em ; line-height : 1 em ; }
. help-inline { display : inline-block ; vertical-align : middle ; padding-left : 5 px ; }
. 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 : 3 px ; }
. form-search input , . form-search textarea , . form-search select { display : inline-block ; margin-bottom : 0 ; }
. form-search . search-query { padding-left : 14 px ; padding-right : 14 px ; margin-bottom : 0 ; -webkit- border-radius : 14 px ; -moz- border-radius : 14 px ; border-radius : 14 px ; }
. 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 : 3 px ; }
html { background-color : #ffffff ; font-family : 'PT Serif' , serif ; font-color : #333332 ; font-size : 90 % ; }
. navigation-wrapper { margin : 0 auto ; width : 100 % ; padding : 2 em 0 3 em ; 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 : 1 em ; }
. top-navigation { margin : 0 auto ; width : 100 % ; display : inline ; float : left ; width : 83.33333333333334 % ; margin-left : 8.333333333333334 % ; margin-right : 8.333333333333334 % ; margin-bottom : 1 em ; }
. top-navigation ul { list-style : none ; margin : 0 ; padding : 0 ; }
. top-navigation li { list-style-type : none ; display : inline ; margin-right : 25 px ; } . top-navigation li a { decoration : none ; border-bottom : 0 solid transparent ; -webkit- transition : all 0.2 s ; -moz- transition : all 0.2 s ; -ms- transition : all 0.2 s ; -o- transition : all 0.2 s ; transition : all 0.2 s ; }
# main { counter-reset : captions ; margin : 0 auto ; width : 100 % ; * zoom : 1 ; clear : both ; margin-top : 1 em ; } # 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 : 2 em ; }
# index { margin : 0 auto ; width : 100 % ; display : inline ; float : left ; width : 83.33333333333334 % ; margin-left : 8.333333333333334 % ; margin-right : 8.333333333333334 % ; margin-bottom : 2 em ; } # index article h2 { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; margin-bottom : 0 ; }
# index article p + p { text-indent : 0 ; }
. image-wrap { position : relative ; margin-bottom : 2 em ; } . image-wrap : after { content : " " ; display : block ; position : absolute ; bottom : -1 px ; left : 8 % ; width : 0 ; height : 0 ; border : 20 px solid transparent ; border-bottom-color : #ffffff ; }
. image-wrap img { width : 100 % ; height : auto ; -ms- interpolation-mode : bicubic ; }
. image-wrap . headline-wrap { position : absolute ; bottom : 25 px ; margin-left : 8.333333333333334 % ; } . image-wrap . headline-wrap h1 , . image-wrap . headline-wrap h2 { color : #ffffff ; text-shadow : 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.25 ) ; }
. headline-wrap h1 { font-size : 48 px ; font-size : 2.6666666666666665 rem ; margin-bottom : 0.61875 rem ; }
. headline-wrap h2 { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; text-transform : uppercase ; }
. article-wrap h2 { font-size : 36 px ; font-size : 2 rem ; margin-bottom : 0.825 rem ; }
. article-wrap h3 { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; }
. byline { clear : both ; font-size : 80 % ; }
. article-author-top h4 , . article-author-bottom h4 { margin-bottom : 0.5 em ; }
. 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 : 100 px ; -moz- border-radius : 100 px ; border-radius : 100 px ; }
. article-author-top { display : none ; }
. article-author-bottom . bio-photo { float : left ; margin-right : 25 px ; }
. toc { display : none ; font-size : 95 % ; -webkit- opacity : 0.7 ; -moz- opacity : 0.7 ; opacity : 0.7 ; -webkit- transition : opacity 0.2 s ease-in-out ; -moz- transition : opacity 0.2 s ease-in-out ; -ms- transition : opacity 0.2 s ease-in-out ; -o- transition : opacity 0.2 s ease-in-out ; transition : opacity 0.2 s ease-in-out ; } . toc : hover { -webkit- opacity : 1 ; -moz- opacity : 1 ; opacity : 1 ; }
. toc header { background : #1a1a1a ; }
. toc h3 { margin : 0 ; padding : 5 px 10 px ; color : #ffffff ; } . toc h3 : hover { cursor : pointer ; }
. toc ul { margin : 2 px 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 : 1 px 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 : 10 px ; display : block ; }
. toc li ul { margin : 0 ; border-top : 1 px solid #808080 ; }
. image-grid { * zoom : 1 ; list-style : none ; margin : 0 0 1 em ; 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 : 1 em 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 5 px ; }
. holder a . jp-previous { margin-left : 0 ; margin-right : 15 px ; }
. holder a . jp-next { margin-left : 15 px ; 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 5 px ; }
. footer-wrap { margin : 0 auto ; width : 100 % ; * zoom : 1 ; clear : both ; margin-top : 1 em ; padding-top : 2 em ; padding-bottom : 3 em ; background-color : #000000 ; } . 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 : 21 px ; font-size : 1.1666666666666667 rem ; margin-bottom : 1.4142857142857141 rem ; text-transform : uppercase ; margin-bottom : 0 ; }
. related-articles li { margin-bottom : 0 ; color : #ffffff ; }
. footer-icons li { display : inline-block ; padding-right : 5 px ; } . footer-icons li a { font-size : 24 px ; font-size : 1.3333333333333333 rem ; margin-bottom : 1.2375 rem ; color : #9a9a9a ; -webkit- transition : 0.4 s linear ; -moz- transition : 0.4 s linear ; -ms- transition : 0.4 s linear ; -o- transition : 0.4 s linear ; transition : 0.4 s 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 2 em 0 ; padding : 10 px ; text-align : center ; color : #ffffff ; } . chrome-frame a { color : #ffffff ; border-bottom : 1 px dotted #ffffff ; text-decoration : none ; } . chrome-frame a : hover { border-bottom : 1 px solid #ffffff ; }
. 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 8 px ; -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 ; } . 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 8 px rgba ( 0 , 0 , 0 , 0.6 ) ; }
. 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.8 em ; left : 8 px ; right : 8 px ; 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 ; }
button . mfp-close { background : transparent ; }
button :: -moz-focus-inner { padding : 0 ; border : 0 ; }
. mfp-close { width : 44 px ; height : 44 px ; line-height : 44 px ; position : absolute ; right : 0 ; top : 0 ; text-decoration : none ; text-align : center ; opacity : 0.65 ; padding : 0 0 18 px 10 px ; color : white ; font-style : normal ; font-size : 28 px ; font-family : Arial , Baskerville , monospace ; }
. mfp-close : hover , . mfp-close : focus { opacity : 1 ; }
. mfp-close : active { top : 1 px ; }
. mfp-close-btn-in . mfp-close { color : #333333 ; }
. mfp-image-holder . mfp-close , . mfp-iframe-holder . mfp-close { color : white ; right : -6 px ; text-align : right ; padding-right : 6 px ; width : 100 % ; }
. mfp-counter { position : absolute ; top : 0 ; right : 0 ; color : #cccccc ; font-size : 12 px ; line-height : 18 px ; }
. mfp-arrow { text-indent : 100 % ; white-space : nowrap ; overflow : hidden ; position : absolute ; top : 0 ; opacity : 0.65 ; margin : 0 ; top : 50 % ; margin-top : -55 px ; padding : 0 ; width : 90 px ; height : 110 px ; background-color : #000000 ; -webkit- transition : opacity 0.2 s ease-in-out ; -moz- transition : opacity 0.2 s ease-in-out ; -ms- transition : opacity 0.2 s ease-in-out ; -o- transition : opacity 0.2 s ease-in-out ; transition : opacity 0.2 s ease-in-out ; -webkit- tap-highlight-color : rgba ( 0 , 0 , 0 , 0 ) ; }
. mfp-arrow : active { margin-top : -54 px ; }
. 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 : 35 px ; margin-left : 35 px ; border : solid transparent ; }
. mfp-arrow : after , . mfp-arrow . mfp-a { opacity : 0.8 ; border-top-width : 12 px ; border-bottom-width : 12 px ; top : 8 px ; }
. mfp-arrow : before , . mfp-arrow . mfp-b { border-top-width : 20 px ; border-bottom-width : 20 px ; }
. mfp-arrow-left { left : 0 ; -webkit- border-top-right-radius : 5 px ; -webkit- border-bottom-right-radius : 5 px ; -webkit- border-bottom-left-radius : 0 ; -webkit- border-top-left-radius : 0 ; -moz- border-radius-topright : 5 px ; -moz- border-radius-bottomright : 5 px ; -moz- border-radius-bottomleft : 0 ; -moz- border-radius-topleft : 0 ; border-top-right-radius : 5 px ; border-bottom-right-radius : 5 px ; 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 { border-right : 12 px solid #fff ; left : 5 px ; }
. mfp-arrow-left : before , . mfp-arrow-left . mfp-b { border-right : 20 px solid #fff ; }
. mfp-arrow-right { right : 0 ; -webkit- border-top-right-radius : 0 ; -webkit- border-bottom-right-radius : 0 ; -webkit- border-bottom-left-radius : 5 px ; -webkit- border-top-left-radius : 5 px ; -moz- border-radius-topright : 0 ; -moz- border-radius-bottomright : 0 ; -moz- border-radius-bottomleft : 5 px ; -moz- border-radius-topleft : 5 px ; border-top-right-radius : 0 ; border-bottom-right-radius : 0 ; border-bottom-left-radius : 5 px ; border-top-left-radius : 5 px ; -webkit- background-clip : padding-box ; -moz- background-clip : padding ; background-clip : padding-box ; }
. mfp-arrow-right : after , . mfp-arrow-right . mfp-a { border-left : 12 px solid #fff ; left : 3 px ; }
. mfp-arrow-right : before , . mfp-arrow-right . mfp-b { border-left : 20 px solid #fff ; }
. mfp-iframe-holder { padding-top : 40 px ; padding-bottom : 40 px ; }
. mfp-iframe-holder . mfp-content { line-height : 0 ; width : 100 % ; max-width : 900 px ; }
. mfp-iframe-scaler { width : 100 % ; height : 0 ; overflow : hidden ; padding-top : 56.25 % ; }
. mfp-iframe-scaler iframe { position : absolute ; display : block ; top : 0 ; left : 0 ; width : 100 % ; height : 100 % ; box-shadow : 0 0 8 px rgba ( 0 , 0 , 0 , 0.6 ) ; background : black ; }
. mfp-iframe-holder . mfp-close { top : -40 px ; }
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 : 40 px 0 40 px ; margin : 0 auto ; }
. mfp-figure : after { content : '' ; position : absolute ; left : 0 ; top : 40 px ; bottom : 40 px ; display : block ; right : 0 ; width : auto ; height : auto ; z-index : -1 ; box-shadow : 0 0 8 px rgba ( 0 , 0 , 0 , 0.6 ) ; }
. mfp-figure { line-height : 0 ; }
. mfp-bottom-bar { margin-top : -36 px ; position : absolute ; top : 100 % ; left : 0 ; width : 100 % ; cursor : auto ; }
. mfp-title { text-align : left ; line-height : 18 px ; color : #f3f3f3 ; }
. mfp-figure small { color : #bdbdbd ; display : block ; font-size : 12 px ; line-height : 14 px ; }
. 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 ) { . mfp-img-mobile . mfp-image-holder { padding-left : 0 ; padding-right : 0 ; } . mfp-img-mobile img . mfp-img { padding : 0 ; } . 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 : 3 px 5 px ; 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 : 5 px ; top : 3 px ; } . mfp-img-mobile . mfp-close { top : 0 ; right : 0 ; width : 35 px ; height : 35 px ; line-height : 35 px ; background : rgba ( 0 , 0 , 0 , 0.6 ) ; position : fixed ; text-align : center ; padding : 0 ; } . mfp-img-mobile . mfp-figure small { display : inline ; margin-left : 5 px ; } } @ 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 : 6 px ; padding-right : 6 px ; } } . mfp-ie7 . mfp-img { padding : 0 ; }
. mfp-ie7 . mfp-bottom-bar { width : 600 px ; left : 50 % ; margin-left : -300 px ; margin-top : 5 px ; padding-bottom : 5 px ; }
. mfp-ie7 . mfp-container { padding : 0 ; }
. mfp-ie7 . mfp-content { padding-top : 44 px ; }
. mfp-ie7 . mfp-close { top : 0 ; right : 0 ; padding-top : 0 ; }
. mfp-fade . zoom-anim-dialog { opacity : 0 ; -webkit- transition : all 0.2 s ease-in-out ; -moz- transition : all 0.2 s ease-in-out ; -ms- transition : all 0.2 s ease-in-out ; -o- transition : all 0.2 s ease-in-out ; transition : all 0.2 s 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 ) ; }
. 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 ) ; }
. 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 ; }
. mfp-fade . mfp-bg { opacity : 0 ; -webkit- transition : opacity 0.3 s ease-out ; -moz- transition : opacity 0.3 s ease-out ; -ms- transition : opacity 0.3 s ease-out ; -o- transition : opacity 0.3 s ease-out ; transition : opacity 0.3 s ease-out ; }
. mfp-fade . mfp-ready . mfp-bg { opacity : 0.8 ; }
. mfp-fade . mfp-removing . mfp-bg { opacity : 0 ; }
@ 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 : 1 px solid #333 ; page-break-inside : avoid ; padding : 1 em ; } 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 ; } } @ media only screen and ( min-width : 30em ) { . image-grid li { width : 33.333333 % ; } } @ 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 , . image-wrap : after { left : 25 % ; } . image-wrap . headline-wrap { margin-left : 0 ; } # 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 ; top : 120 px ; right : 0 ; -webkit- box-shadow : 0 0 5 px rgba ( 0 , 0 , 0 , 0.5 ) ; -moz- box-shadow : 0 0 5 px rgba ( 0 , 0 , 0 , 0.5 ) ; box-shadow : 0 0 5 px 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 % ; } } @ media only screen and ( min-width : 48em ) { html { font-size : 100 % ; } . image-grid li { width : 20 % ; } } @ media only screen and ( min-width : 62em ) { html { font-size : 112.5 % ; } . image-grid li { width : 16.666666666 % ; } } @ 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 : after { left : 33.333333333 % ; } . image-wrap . headline-wrap { margin-left : 8.333333333333334 % ; } # 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 % ; } } @ media ( -webkit-min-device-pixel-ratio : 2 ) , ( min-resolution : 192dpi ) { }