/* Theme Name: Bockenhauer.com Theme URI: http://bockenhauer.com Description: Bockenhauer.com Author: Peter Bockenhauer Author URI: http://bockenhauer.com Version: 1.0 */ @media screen { /* Layout */ html { overflow-y: scroll; } body { background: #000; color: #FFF; font: 16px Tahoma, Geneva, sans-serif; } #wrapper { margin: 0 auto; width: 1184px; } #content { float: left; padding: 25px 0 25px 123px; width: 1062px; } body.portfolio #content, body.tech #content { float: left; padding-left: 0; } .photo { padding: 4px; border: 1px solid #333; } .portfolioitem { margin: 0 0 2px 0; } .portfolioitem:hover { box-sizing: border-box; width: 261px; height: 162px; border: 3px solid #333; } .left { float: left; } .right { float: right; } .alignleft { float: left; margin: 0 20px 20px 0; } .alignright { float: right; margin: 0 0 20px 20px; } /* Header */ #header { position: relative; height: 108px; } #logo { padding: 0 25px 0 0; float: left; } .site-title { padding: 46px 0 0 0; margin-left: -3px; float: left; } /* Nav */ #nav { position: absolute; bottom: 16px; right: 3px; } #subnav { float: left; padding: 25px 25px 0 0; width: 97px; } /* Sidebar */ #sidebar { float: right; padding: 10px 0 0 0; } body.contact #sidebar { float: left; } /* Footer */ #footer { border-top: 1px solid #333; margin: 330px 0 50px 0; padding: 10px 0 0 0; clear: both; text-align: left; } /* Icons */ .icon_email { background: url('img/icon_email.png') no-repeat; padding: 0 0 5px 20px; } .icon_facebook { background: url('img/icon_facebook.png') no-repeat; padding: 0 0 5px 20px; } .icon_tumblr { background: url('img/icon_tumblr.png') no-repeat; padding: 0 0 5px 20px; } .icon_linkedin { background: url('img/icon_linkedin.png') no-repeat; padding: 0 0 5px 20px; } .icon_twitter { background: url('img/icon_twitter.png') no-repeat; padding: 0 0 5px 20px; } /* Typography */ .altcolor, body.home .altcolor, body.home a { color: #7AA314; } body.home li.home { background: #7AA314; } body.about .altcolor, body.about a { color: #0B8FCD; } body.about li.about { background: #0B8FCD; } body.tech .altcolor, body.tech a { color: #9B64AB; } body.tech li.tech { background: #9B64AB; } body.portfolio .altcolor, body.portfolio a { color: #F6921F; } body.portfolio li.portfolio, body.web li.web, body.design li.design, body.print li.print, body.photos li.photos { background: #F6921F; } body.photostream li.photostream, body.sublimetext li.sublimetext { background: #9B64AB; } body.contact .altcolor, body.contact a { color: #C2172A; } body.contact li.contact { background: #C2172A; } p { padding: 0 0 10px 0; color: #FFF; } em { font-style: italic; } a { color: #7AA314; } p a:hover { background-color: #333; color: #FFF; text-decoration: none; } .virtualpage a:hover { background: none; } .item-name { float: left; color: #FFF; text-transform: uppercase; font-weight: bold; font-size: 24px; line-height: 16px; } .site-link { float: right; color: #FFF; font-size: 14px; text-transform: uppercase; } .site-link a { padding: 5px 10px; } .site-link a:hover { background: #333; } .site-name { padding: 0 25px 0 0; } h2 { font-size: 20px; font-weight: bold; } strong { font-weight: bold; } #nav ul, #subnav ul { list-style-type: none; } #nav ul li { float: left; color: #FFF; font-size: 18px; text-transform: uppercase; } #nav ul li a { display: block; padding: 5px 10px; color: #FFF; text-decoration: none; } #subnav ul li a { display: block; padding: 5px; color: #FFF; text-decoration: none; } #subnav ul li { color: #FFF; text-transform: uppercase; text-align: right; } #nav ul li:hover, #subnav ul li:hover { background: #333; } blockquote { background: #333; padding: 10px; margin-bottom: 10px; } blockquote.highlight { background: #7AA314; } blockquote p { padding-bottom: 0; } blockquote.highlight p { color: #000; } .site-title { font-family: 'Ubuntu', sans-serif; font-weight: bold; text-transform: none; font-size: 40px; letter-spacing: -2px; color: #FFF } hr { margin-bottom: 15px; border: 1px solid gray;} pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } } /* END screen media */ @media only screen and (max-device-width: 667px) { #wrapper { width: 100%; } #header { height: 140px; } #logo { width: 75px; } .site-title { padding-top: 44px; font-size: 23px; } #nav { top: 105px; } #nav ul li { font-size: 14px; } #nav ul li:first-child { display: none; } #content { padding: 10px; width: auto; } .photo { width: 100px; } #footer .left, #footer .right { text-align: center; float: none; } #subnav { float: none; padding: 0; width: auto; text-align: center; } #subnav ul li { font-size: 14px; text-align: center; display: inline-block; } body.portfolio #content { width: 100%; padding: 10px; text-align: center; } body.tech #content { float: none; padding: 10px; } body.tech #content .item-name { margin-bottom: 10px; line-height: 22px; } body.tech #content .fullimage { width: 100%; } #footer { margin: 0; } } @media only screen and (max-device-width: 667px) and (orientation: landscape) { .site-title { padding-top: 42px; } } @media print { .do-not-print { display: none; } #comments { page-break-before: always; } body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; } h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 19pt; } h2 { font-size:17pt; } h3 { font-size:15pt; } h4,h5,h6 { font-size:12pt; } code { font: 10pt Courier, monospace; } blockquote { margin: 1.3em; padding: 1em; } img { display: block; margin: 1em 0; } a img { border: none; } table { margin: 1px; text-align:left; } th { border-bottom: 1px solid #333; font-weight: bold; } td { border-bottom: 1px solid #333; } th, td { padding: 4px 10px 4px 0; } caption { background: #fff; margin-bottom: 2em; text-align: left; } thead { display: table-header-group; } tr { page-break-inside: avoid; } a { text-decoration: none; color: black; } } /* END print media */