/* Theme Name: the Steppe Theme Theme URI: http://steppe-magazine.com Description: Built on Boilerplate HTML5 Author: Duncan Brown Author URI: http://wiflufu.com/ This CSS file is a concatenation of style.css from HTML5 Boilerplate and style.css from Starkers. Comment blocks indicate where each begins and ends, like this, for example... */ /** START HTML5 Boilerplate CSS **/ /** * HTML5 ✰ Boilerplate * * style.css contains a reset, font normalization and some base styles. * * Credit is left where credit is due. * Much inspiration was taken from these projects: * - yui.yahooapis.com/2.8.1/build/base/base.css * - camendesign.com/design/ * - praegnanz.de/weblog/htmlcssjs-kickstart */ /** * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark * html5doctor.com/html-5-reset-stylesheet/ */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /** * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ */ body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ /* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp { font-family: monospace, sans-serif; } /** * Minimal base styles. */ /* 1) Always force a scrollbar in non-IE 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* j.mp/webkit-tap-highlight-color */ a:link { -webkit-tap-highlight-color: #FF5E99; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; } a, a:active, a:visited { color: #607890; } a:hover { color: #036; } ul, ol { margin-left: 2em; } ol { list-style-type: decimal; } /* Remove margins for navigation lists */ nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } td { vertical-align: top; } /* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } .ie6 legend, .ie7 legend { margin-left: -7px; } /* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ 2) WebKit browsers add a 2px margin outside the chrome of form elements. Firefox adds a 1px margin above and below textareas 3) Set font-size to match 's, and font-family to sans-serif 4) Align to baseline */ button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; } /* 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ 2) Align to text-top */ textarea { overflow: auto; vertical-align:text-top; } /* Hand cursor on clickable input elements */ label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } /* Remove extra padding and inner border in Firefox */ input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } /* Colors for form validity */ input:valid, textarea:valid { } input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } /* Bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ .ie7 img { -ms-interpolation-mode: bicubic; } /** * You might tweak these.. */ body, select, input, textarea { /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ color: #222; /* Set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ } /* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* These selection declarations have to be separate No text-shadow: twitter.com/miketaylr/status/12228805301 Also: hot pink! */ /*::-moz-selection { background: #fe57a1; color:#fff; text-shadow: none; } ::selection { background:#fe57a1; color:#fff; text-shadow: none; } */ /** * Primary styles * * Author: Duncan Brown */ .shadow, .issue-nav img, .grid-wrapper img, #issues-grid img { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; } hr { color: #fff; background-color: #fff; border: 1px dotted #e1e1e1; border-style: none none dotted; margin-top: 15px; margin-bottom: 30px; } .clear { clear:both; } .right { float:right; } .left { float:left; } .rightpos { right:0px; } .leftpos { left:0px; } .centered-box { display:block; margin:0 auto; margin-top:37px; } .centercol { font-family:sans-serif; width:700px; margin: 0 auto; } .accessible { display:block; position: absolute; left: -9999px; } .demicol { width:460px; } /* Single page */ .page-title { float:left; margin-left: -9999px; } #lead-pic-box { margin-bottom: 20px; } /* subs table */ table.sub-choices { width:100%; border: 1px dotted #e1e1e1; color: #444; margin-bottom: 20px; } table.sub-choices thead tr { text-align: center; height:100px; } table.sub-choices thead tr td { border:1px dotted #e1e1e1; } table.sub-choices thead h3 { text-align: left; color: #CC0000; font-size: 3em; } table.sub-choices tbody td { background-color: white; color:#444; } table.sub-choices tbody td { border: 1px dotted #e1e1e1; } table.sub-choices tbody td span.button { display:block; text-align:center; margin: 10px auto 0; width:250px; } table.sub-choices tbody td:hover { background-color: #e1e1e1; color:#444; } table.sub-choices tbody tr:hover td { background-color: white; color:#444; } table.sub-choices tbody td ul { list-style-type: square; } /*BASE STYLES */ h1,h2,h3,h4,h5,h6 { line-height: 44px; } .fullwidth { width:920px !important; } p { font-size: 1.5em; margin-bottom: 1em; } h1 { font-size: 3em; } h2 { font-size: 2.7em; } h3 { font-size: 2em; } h4 { font-size: 2em; } h5 { font-size: 1.6em; } h6 { font-size: 1.4em; } blockquote { background-color: #efefef; padding:12px; margin: 3px 0px 12px; } blockquote p {margin-bottom: 0px; } address { font-size: 1em; margin-bottom: 1em; } pre {margin-bottom: 1em; font-size:0.9em; } table { font-size: 12px; width: 480px; text-align: left; border-collapse: collapse; border: 1px solid #69c; } th { padding: 12px 17px 12px 17px; font-weight: normal; font-size: 14px; color: #039; border-bottom: 1px dashed #69c; } td { padding: 7px 17px 7px 17px; color: #669; } tbody tr:hover td { color: #339; background: #d0dafd; } a { color:#CC0000; } ul, ol{ font-size: 14px; } ol li{ margin-left: 14px; } ul { list-style-type:none; } ul li, ol li { margin: 3px 0px; } /* fix layout */ .entry-content { overflow: hidden; } ul.xoxo { margin-left:0px; } /* FONT FACE */ @font-face { font-family: sans-serif; src: url('./fonts/Medio-webfont.eot'); src: url('./fonts/Medio-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/Medio-webfont.woff') format('woff'), url('./fonts/Medio-webfont.ttf') format('truetype'), url('./fonts/Medio-webfont.svg#sans-serif') format('svg'); font-weight: normal; font-style: normal; } /* ARROWS */ /* thanks to the kindness of Otto at CSS-Tricks */ .left-arrow { float:left; border-color: transparent #e1e1e1; border-style: solid; border-width: 20px 20px 20px 0px; height: 0px; width: 0px; } .right-arrow { float: right; border-color: transparent #e1e1e1; border-style: solid; border-width: 20px 0px 20px 20px; height: 0px; width: 0px; } .left-arrow:hover, .right-arrow:hover { border-color: transparent #e5e5e5; } /* BASIC LAYOUT */ body { min-width: 560px; background-color: #efefef; font-size: 62.5%; } div#wrapper > header, body > footer, div#wrapper > div#primary, div#wrapper > nav { padding: 0px 20px; } body.home > footer { padding-top: 2em; } div#wrapper > div#primary { /*min-height:500px;*/ } div#primary { overflow: hidden; } #wrapper { width: 960px; margin: 0 auto; background-color: white; } #primary { padding-top: 20px; padding-bottom: 20px; } #main-column { margin-top:15px; width:100%; } #main-column.feature { margin-top:35px; width:920px; } body > footer, #main-footer { font-size:0.8em; width: 920px; background-color: white; } /* Buttons */ /* css-tricks button generator, thank you! */ .button { border-top: 1px solid #806e6e; background: #ad1a1a; background: -webkit-gradient(linear, left top, left bottom, from(#de3840), to(#ad1a1a)); background: -webkit-linear-gradient(top, #de3840, #ad1a1a); background: -moz-linear-gradient(top, #de3840, #ad1a1a); background: -ms-linear-gradient(top, #de3840, #ad1a1a); background: -o-linear-gradient(top, #de3840, #ad1a1a); padding: 7.5px 0px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #ffffff; font-size: 19px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .button a { color: white !important; display:block; width: 100%; height: 100%; text-align:center !important; } span.big-button { font-size: 2em; display:block; width:30%; } .button:hover { color: #ccc; } .sub-margin { margin-top: 29px !important; } /* MAIN SIDEBAR STYLES */ section#content > div#sidebar { width: 199px; /* RC width */ margin-right: -200px; /* RC width */ } #sidebar ul { list-style-type: none; text-align: center; } #sidebar .arrow { margin-top: 45px; } #sidebar ul li img { margin-bottom:5px; } #sidebar span.sidebar-heading { font-family:sans-serif; font-size: 3em; padding: 7px; } /* HEADER STYLES */ div#wrapper > header { height: 160px; padding-top: 40px; } a#skip { display: none; } #wrapper > header { height:130px; } header > div#genghis-branding { float:left; width:960px; height:134px; font-family: 'Helvetica Neue', 'Arial', sans-serif; font-weight:100; background-image: url('images/genghis_banner.png'); background-repeat:no-repeat; padding-bottom: 0.5em; padding-top: 3em; } header > div#branding { float:left; font-family: 'Helvetica Neue', 'Arial', sans-serif; font-weight:100; height:110px; width: 400px; background-image: url('images/steppelogo.png'); padding-bottom: 0.5em; padding-top: 3em; margin-top:1em; } header > #genghis-branding a, header > div#branding a { display:block; height:100%; width:100%; font-weight:100; text-decoration: none; color: #b60101; } header > #genghis-branding h1, header > div#branding h1 { margin-left: -7px; font-size: 6em; } header > #genghis-branding p, header > div#branding p { position:relative; top: 23px; text-transform: uppercase; font-size: 0.5em; } /* NAV STYLES */ div#wrapper > nav { position: relative; padding-top:2em; } #menu-steppe-main-menu { padding-left: 5px; } nav ul li { padding: 0px 27px; display: inline; float: left; text-transform: lowercase; font-size: 1.4em; } nav ul li.current-menu-item a { color:#CC0000 !important; } nav ul > :first-child { padding-left: 0px; border-left: none; } nav ul li a { text-decoration: none; font-weight: bold; color: #999 !important; } nav ul li a:hover { color:#CC0000 !important; } /* FRONT PAGE STYLES */ .announce { font-size: 1.3em; } .slide-content { font-size: 18px; bottom: 0px !important; top: auto !important; width: 100%; background-color: rgba(0,0,0,0.5); display: inline-block; height: auto !important; color: white; font-family: 'sans-serif'; } h3.block-head { text-align: right; color: #999; font-size: 2.5em; font-family: Georgia; font-weight: normal; border-bottom: 1px dotted #E1E1E1; margin-bottom: 10px; } a { color: #CC0000 !important; text-decoration: none; } #frontpage-lhc h3 { text-align: left; color: #CC0000; font-size: 3em; } #frontpage-lhc .button { width: 120px; } section#front-page { margin-top:1.5em; } section#front-page > div#main-column { padding-top: 16px; } section#front-page div#image-inside-steppe { position: relative; } section#front-page div#image-inside-steppe h2 { font-family: 'Helvetica Neue', 'Arial Light', sans-serif; position: absolute; top: 20px; right: 20px; width: 195px; font-size: 5em; color: white; text-align: right; } section#front-page div#image-inside-steppe h2 { } section#front-page .hovercaption { background-color: white; display: none; opacity: 0.8; position: absolute; z-index: 100000; text-align: left; bottom: 1px; } section#front-page .hovercaption { width: 918px; height: 60px; padding: 1px; } .twitter-logo img { width: 60px; height: 60px; } .twitter-logo { float: left; margin-top: 10px; margin-right: 12px; width: 60px; height: 60px; border: 1px solid #e1e1e1; } .fb-logo { margin-top: 10px; } /* caption text styles */ .caption { color: #8E8E8E; text-align: right; padding-right: 0; padding-top: 10px; font-size:13px; } .caption .image-caption { display: inline; position: absolute; right: 0px; width: 200px; } .caption .image-desc { width: 720px; text-align: left; padding-top: 0px; } section#front-page .hovercaption h2.shader-title { opacity: 1; font-family: sans-serif; display: block; padding: 5px; color: black; font-size:2.7em !important; } section#front-page .hovercaption h2.shader-type { opacity: 1; font-family: sans-serif; color: black; padding:10px; } section#front-page .hovercaption p { font-family: sans-serif; color: black; font-size:1.4em; padding:10px; } #frontpage-lhc { padding-bottom:50px; width: 450px; float:left; } #frontpage-lhc #featured-issue { /* background-color: yellow; */ text-align: center; } #frontpage-rhc { text-align: left; width: 470px; float: left; } #frontpage-rhc > div { } #frontpage-rhc #quote-box { padding: 20px; padding-right: 4px; } #frontpage-rhc #quote-box { font-family: Georgia, sans-serif; font-size:14px; text-indent: -0.4em; line-height:26px; } #frontpage-rhc #quote-box img { float:right; } #about { margin-left:0.5em; font-size: 1.3em; margin: 0 auto; width:900px; padding: 15px; } #frontpage-rhc #about p { font-family: sans-serif; font-size:2.2em; } /* MAIN CONTENT SECTION */ div.block-separator { width:100%; background:none; height: 48px; } div#primary > section#content { margin-top:2em; padding-right: 200px; } .page-template-onecolumn-page-php #primary > section#content { margin: 0 auto; width: 600px; padding-right: 0px; } section#content > article, section#content > div { float: left; position: relative; } section#content > article { width: 100%; } /* STEPPE ISSUE INDEX */ span.backissue-buy { float:right; padding-top:20px; font-size:1.1em; text-transform: uppercase; } span.backissue-buy a:hover { color:black !important; } div#issues-page { margin-top:15px; padding-bottom:10px; width: 920px; } section#current-issue { width:900px;height:240px;background-color:#efefef;margin: 0 auto 1em; } section#current-issue img, section#current-issue #banner { padding: 10px; float: left; } section#current-issue #banner h2 { font-weight: normal; } section#current-issue #banner h2.latest-issue { font-family:'Helvetica Neue', sans-serif; font-size: 2.5em; color:#999; line-height: 1.5em; } div#primary div#issues-grid ul { list-style-type: none; margin-left: 0px; } div#primary div#issues-grid ul li { height: 285px; padding: 0em 30px 0px 0px; width: 200px; float: left; } .issue-details { font-family:sans-serif; font-size: 1.3em; } .latest-issue-details { color: #444; font-size: 3.5em; font-family: Georgia; font-weight: normal; margin-bottom:15px; display:block; } .issue-details a { text-decoration:none; color: #444; } /*STOCKISTS */ .stockist-territory { margin-bottom:30px; } .stockist-header { clear:both; font-size: 2.5em; font-family: sans-serif; text-transform: uppercase; color: #CC0000; } .stockist-subhead { font-size: 1.6em; font-weight: lighter; text-transform: uppercase; } .stockist-box h3 { line-height: 28px; } .block-o-stockists { clear:both; } .stockist-box { width: 280px; float:left; height:170px; margin-right:15px; line-height:23px; } /*LATEST ISSUE PAGE*/ .issue-nav { position: absolute; width:132px; } .issue-nav.leftpos img { margin-left: 12px; } .issue-nav div.arrow { margin-top:35px; } .nav-caption { margin-top: 40px; font-family: sans-serif; font-size: 2em; } .latest-box { float:left; } .latest-box .large p { margin-bottom: 0px; } .borderbottom { clear:both; height:100%; border-bottom: 1px solid #e1e1e1; margin-bottom:10px; } .justify { text-align: justify; } .narrow { width:350px; height:408px; } .narrow .shadow { height: 410px !important; } .broad { width:525px; } .m-left { margin-left: 25px; } .large { font-family: Georgia, serif; font-size: 1em; } .latest-issue-editorial { float:left; margin-top: 20px; width: 540px; } .latest-articles { color: #444; font-size: 1em; font-family: Georgia; font-weight: normal; margin-bottom:15px; display:block; margin-top:20px; float: left; width:100%; } .latest-issue-editorial h2 { font-size: 2.5em; } /* STEPPE ISSUE PAGES */ .lateral-box { width:185px; float:right; } .lateral-box li { list-style-type:none; } .lateral-box img { margin-left:4px; } #sidebar .issue-details { float: left; width: 80%; } /* hover-caption & image */ /* caption fade effect */ div#primary ul#grid li { position: relative; /*caption needs this to be absolutely positioned */ } #primary ul#grid { margin-left:0px; } ul#grid .hovercaption { background-color:black; display: none; opacity: 0.8; position: absolute; z-index: 100000; text-align: left; } div#primary ul#grid li a img, ul#grid .hovercaption { width: 440px; height: 258px; } ul#grid .hovercaption { height:258px; } /* caption text styles */ ul#grid .hovercaption h2.shader-title { opacity: 1; font-family: sans-serif; display: block; padding: 5px; color: white; } ul#grid .hovercaption h2.shader-type { opacity: 1; font-family: sans-serif; color: black; padding:10px; } ul#grid .hovercaption p { font-family: sans-serif; color: black; padding:10px; } /* General text styles */ article.steppe_article h1, h1.entry-title { line-height:34px; font-size: 3.4em; width: 640px; } article.steppe_article h1, article.steppe_article p, article.steppe_article div { } li.article-trailer h2 { font-weight:normal !important; } li.issue-page-thumbnail { margin: 0; } li.issue-page-thumbnail p { text-decoration: none; color: #444; text-transform: uppercase; font-size:1.2em; line-height:9px; text-align: right; margin-right:23px; margin-top:-8px; } div#primary ul#grid li a { color: black; text-decoration:none; } div#primary ul#grid li h2{ font-size: 2em; } div#primary ul#grid li p.caption { font-size: 1.2em; font-color: #444; } div#primary h1.sample-articles-header { font-family: 'Helvetica', sans-serif; margin-right:18px; font-weight:100; display: inline; text-align: left; float: right; font-size: 3em; color: #999; padding: 7px 0px; } div#primary h2.issue-title { font-weight:normal !important; font-family:sans-serif; text-align: left; float: left; width: 40%; font-size: 3em; padding: 7px 0px; } #grid-wrapper { width: 740px; } ul#grid { padding: 0; list-style: none; width: 920px; } #grid li { float: left; padding: 0; margin: 0; margin-bottom:16px; width: 455px; } /* STEPPE ARTICLES PAGES */ #main-column.feature h1 { margin-top: 10px; font-family: Georgia; font-weight: normal; font-size: 4em; line-height: 1.2em; } .article-issue-trailer { width: 200px; position:absolute; right:15px; } .featured-image-credit { text-transform: uppercase; } .back-to-top { width: 640px; height: 38px; background-color: #f8f8f8; text-align: center; font-size: 2em; padding-top: 12px; } .shareinpost li.iconOnly img { margin-top: -5px !important; } .steppe-author { font-family: sans-serif; color: #444; font-size: 1.9em; width: 640px; line-height: 24px; margin-top: 5px; margin-bottom:25px; } .standfirst { font-family: sans-serif; font-size: 1.2em; color: #444; width: 640px; line-height: 32px; padding: 0px 5px; background-color: #f8f8f8; } #article-box { position:relative; padding-bottom: 1em; } article.steppe_article #lead-pic-box, article.steppe_article div.entry-content .wp-caption { } article.steppe_article div.entry-content .wp-caption { /*override existing caption */ position: relative; text-align: left; padding: 0px; margin: 0px; border: 0; background: none; margin-bottom: 12px; } .photospace .caption-holder { margin-top: 60px; } article.steppe_article div.entry-content .wp-caption .wp-caption-text{ width: 270px !important; font-family: sans-serif; color: #CC0000; position: absolute; left: 650px; bottom: 0px; border-bottom: 1px solid #e1e1e1; margin-bottom: 0px; font-size: 1.6em; } article.steppe_article #lead-pic-box { width:100%; clear:both; position: relative; } article.steppe_article div.entry-meta { padding: 0.5em 0em; } article.steppe_article div.entry-content { width: 920px; /*room for captions */ } article.steppe_article div.entry-content p { width: 640px; font-family: Georgia; font-size: 1.6em; line-height: 25px; } /*trailer box */ article.steppe_article section#trailer-box { width: 640px; height:120px; } article.steppe_article section#trailer-box .trailer-flash{ position: relative; bottom: 90px; height: 40px; background-color: #E1E1E1; z-index: 1; width: 490px; font-size: 2em; text-transform: uppercase; padding-left: 150px; line-height: 41px; } article.steppe_article section#trailer-box .trailer-flash .trailer-issue-details { display:inline; float:left; } article.steppe_article section#trailer-box .trailer-flash .button { position: relative; bottom: 3px; left: 110px; } article.steppe_article section#trailer-box .trailer-flash .button a { text-decoration: none; } article.steppe_article section#trailer-box img { position: relative; z-index: 10; left: 25px; } article.steppe_article section#trailer-box h2.trailer-heading { font-size: 3.2em; position: relative; bottom: 106px; left: 150px; display: inline; color:#CC0000; } article.steppe_article section#trailer-box h2.trailer-heading span.button { position: relative; left: 96px; } /*LITTLE GENGHIS*/ .genghis-box-1 { width: 400px; float: right; margin-top: -44px; } footer .genghis-box-2{ float:right; position:relative; bottom:63px; } header .genghis-box-3 { width: 400px; float: right; margin-top: -40px; } .genghis-2 { margin-top: -75px; margin-left: -182px; height: 152px; } header .genghis-2 { float: right; margin-top: 0px; margin-left: -182px; height: 152px; } .genghis-box-4{ float:right; width: 317px; } .genghis-4 { width:317px; height:160px; } /* STEPPE BLOG PAGE */ /* post styles */ .single-post #main-column { margin-top: 5px; } .type-post .entry-content { line-height: 22px; } .blog #main-column { margin-top:5px; } article.not-found { margin-top: 3em; } /*blog sidebar*/ div.page-link p { font-size: 1.5em; } div#sidebar.blog-sidebar h3 { font-family:'Helvetica Neue', sans-serif; } div#sidebar.blog-sidebar ul { text-align: left !important; margin-left: 0px; } div#sidebar.blog-sidebar ul h3 { color: #999; font-weight:normal; } div#sidebar.blog-sidebar li.widget-container { font-size: 0.7em; margin-left:0px; line-height:20px; } div#sidebar.blog-sidebar li.widget_categories a { font-size:0.9em; color: #bbb; text-decoration: none; text-transform: uppercase; } /* comments */ div#respond { font-size: 1.5em; width: 500px; } /* blog posts */ article.type-post.post { width:640px !important; padding-bottom: 2em; margin-bottom: 1.5em; border-bottom: 1px solid #e1e1e1 } article.type-post.post h1 { font-weight:normal; margin-bottom:5px; } article.type-post.post .entry-content h1 { font-family: sans-serif; font-size: 3em; } article.type-post.post h3 { font-size: 1em; } article.type-post.post .entry-content h2 { font-size: 1.7em; } article.type-post.post h2 a { font-size: 1.1em; font-weight:normal; color: #444 !important; text-decoration: none; } article.type-post.post div.entry-meta { font-size: 1em; text-transform: uppercase; color: #999; padding-bottom: 20px; } article.type-post.post div.entry-meta a { text-decoration: none; font-color: #999; } article.type-post.post div.entry-content { font-size: 1.5em; } article.type-post.post div.entry-content p { font-size: 1em; line-height: 1.5em; } /*article.type-post.post div.entry-content img { padding: 10px; }*/ article.type-post.post footer.entry-utility { display: none; } nav#nav-below { font-size: 1.5em; } /* footer */ body > footer, #main-footer {position: relative; height: 40px; margin-left: auto; padding-top:7em; margin-right: auto; clear:both;} body > footer p, #main-footer p { /* margin-top:5em; */ width:80%; float:left; line-height:17px; } /** CSS Sticky footer html, body {height: 100%;} #wrapper {min-height: 100%;} #primary {overflow:auto; padding-bottom: 50px;} /* must be same height as the footer */ /* body > footer {position: relative; padding-top: -50px; /* negative value of footer height */ /* height: 50px; margin-left: auto; margin-right: auto; clear:both;} /*Opera Fix body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } **/ /** * Non-semantic helper classes: please define your styles before this section. */ /* For image replacement */ .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */ .hidden { display: none; visibility: hidden; } .vis-hidden { visibility: hidden; } /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations. nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /** * Placeholder media queries for responsive design. Modify as design requires. * These follow after, and will override, the primary ('mobile first') styles * The closing /mediaquery comment is required by respond.js min/max-width Media Query polyfill */ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ }/*/mediaquery*/ @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ }/*/mediaquery*/ /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /** END HTML5 Boilerplate CSS **/ /** START Starkers CSS **/ /* LAYOUT */ /* ----------------------------------------- */ /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin:0 auto !important} .alignleft { float:left } .alignright { float:right } .wp-caption { border:1px solid #ddd; text-align:center; background:#efefef; padding:10px 0px; margin-bottom: 12px !important; } .wp-caption p { margin-bottom: 0px; } .wp-caption img { padding: 0px; } /* You might find the following useful */ /* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */ */ /* TYPOGRAPHY */ /* ----------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */ .alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes. /* Font stack options The following represents a list of font stacks, as recommended by Nathan Ford in http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ I've added inverted commas around the relevant family names to ensure compatibility. p = balanced for paragraphs or body copy t = balanced for headlines or titles - - - - Arial, "Helvetica Neue", Helvetica, sans-serif - p, t Baskerville, "Times New Roman", Times, serif - p Baskerville, "Times, Times New Roman", serif - t Cambria, Georgia, Times, "Times New Roman", serif - p, t "Century Gothic", "Apple Gothic", sans-serif - p, t Consolas, "Lucida Console", Monaco, monospace - p, t "Copperplate Light", "Copperplate Gothic Light", serif - p, t "Courier New", Courier, monospace - p, t "Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif - p, t Futura, "Century Gothic", "Apple Gothic", sans-serif - p, t Garamond, "Hoefler Text", "Times New Roman", Times, serif - p Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif - t Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif - p Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - t Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif - p Georgia, Times, "Times New Roman", serif - t GillSans, Calibri, Trebuchet, sans-serif - p GillSans, Trebuchet, Calibri, sans-serif - t "Helvetica Neue", Arial, Helvetica, sans-serif - p Helvetica, "Helvetica Neue", Arial, sans-serif - t Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif - p, t "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - p, t Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif - p Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif - t Tahoma, Geneva, Verdana - p Tahoma, Verdana, Geneva - t Times, "Times New Roman", Georgia, serif - p, t Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif - p Trebuchet, Tahoma, Arial, sans-serif - t Verdana, Geneva, Tahoma, sans-serif - p Verdana, Tahoma, Geneva, sans-serif - t */ /** END Starkers CSS **/ /** START WordPress-Defined CSS Classes **/ .wp-caption-text{} .gallery-caption{} .bypostauthor{} .sticky{} /** END WordPress-Defined CSS Classes **/ /* =Comments -------------------------------------------------------------- */ #comments { clear: both; } #comments .navigation { padding: 0 0 18px 0; } h3#comments-title, h3#reply-title { color: #000; font-size: 20px; font-weight: bold; margin-bottom: 0; } h3#comments-title { padding: 24px 0; } .commentlist { list-style: none; margin: 0; } .commentlist li.comment { border-bottom: 1px solid #e7e7e7; line-height: 24px; margin: 0 0 24px 0; padding: 0 0 0 56px; position: relative; } .commentlist li:last-child { border-bottom: none; margin-bottom: 0; } #comments .comment-body ul, #comments .comment-body ol { margin-bottom: 18px; } #comments .comment-body p:last-child { margin-bottom: 6px; } #comments .comment-body blockquote p:last-child { margin-bottom: 24px; } .commentlist ol { list-style: decimal; } .commentlist .avatar { position: absolute; top: 4px; left: 0; } .comment-author { } .comment-author cite { color: #000; font-style: normal; font-weight: bold; } .comment-author .says { font-style: italic; } .comment-meta { font-size: 12px; margin: 0 0 18px 0; } .comment-meta a:link, .comment-meta a:visited { color: #888; text-decoration: none; } .comment-meta a:active, .comment-meta a:hover { color: #ff4b33; } .commentlist .even { } .commentlist .bypostauthor { } .reply { font-size: 12px; padding: 0 0 24px 0; } .reply a, a.comment-edit-link { color: #888; } .reply a:hover, a.comment-edit-link:hover { color: #ff4b33; } .commentlist .children { list-style: none; margin: 0; } .commentlist .children li { border: none; margin: 0; } .nopassword, .nocomments { display: none; } #comments .pingback { border-bottom: 1px solid #e7e7e7; margin-bottom: 18px; padding-bottom: 18px; } .commentlist li.comment+li.pingback { margin-top: -6px; } #comments .pingback p { color: #888; display: block; font-size: 12px; line-height: 18px; margin: 0; } #comments .pingback .url { font-size: 13px; font-style: italic; } /* Comments form */ input[type=submit] { color: #333; } #respond { border-top: 1px solid #e7e7e7; margin: 24px 0; overflow: hidden; position: relative; } #respond p { margin: 0; } #respond .comment-notes { margin-bottom: 1em; } .form-allowed-tags { line-height: 1em; } .children #respond { margin: 0 48px 0 0; } h3#reply-title { margin: 18px 0; } #comments-list #respond { margin: 0 0 18px 0; } #comments-list ul #respond { margin: 0; } #cancel-comment-reply-link { font-size: 12px; font-weight: normal; line-height: 18px; } #respond .required { color: #ff4b33; font-weight: bold; } #respond label { color: #888; font-size: 12px; } #respond input { margin: 0 0 9px; width: 98%; } #respond textarea { width: 98%; } #respond .form-allowed-tags { color: #888; font-size: 12px; line-height: 18px; } #respond .form-allowed-tags code { font-size: 11px; } #respond .form-submit { margin: 12px 0; } #respond .form-submit input { font-size: 14px; width: auto; } #about { color: #b60101; font-size:1em; }