/* Theme Name: Starkers Theme URI: http://viewportindustries.com/products/starkers Description: The totally nude Wordpress theme! Version: 4.0 Author: Elliot Jay Stocks & Keir Whitaker Author URI: http://viewportindustries.com Tags: starkers, naked, clean, basic */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { /* Don't forget to style your body to avoid user overrides */ background-color: #f0ebe6; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ background-repeat: repeat; background-image: url(images/bg_pattern3.png); font-family: sans-serif; text-align: center; } h1, h2, h3, h4, h5, h6 { color: #151E21; font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* 400 and up */ @media screen and (min-width:400px) { { /* Place your styles here for all widths greater than 400px */ } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } } /* ---------------------------------------------------------------------------------------------------------- STRUCTURE ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ #wrapper { border-right-width: 1px; border-left-width: 1px; border-color: #7a7875; border-style: solid; background-image: url(images/bg_pattern.jpg); text-align: left; width: 900px; margin: 0px auto -60px; min-height:100px; height: auto important; height: 100%; box-shadow: 0px 0px 30px 5px black;} #push {height: 60px} #home-wrap { padding-right: 35px; padding-left: 30px; padding-top: 25px; height: 100%; overflow:hidden; width: 801px} /* ---------------------------------------------------------------------------------------------------------- HEADER ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ element { } #logo-div { height: 400px; width: 900px; background-image: url(images/header_image.jpg); } #menu-bar { background-repeat: repeat-x; background-image: url(images/menu_bar_bg.jpg); height: 54px; width: 900px; } ul#main-nav { padding-top: 10px; float: left; margin-left: 13px; } ul#main-nav li a.home { background-image: url(images/home_btn.gif); display: block; height: 52px; width: 70px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.blog { background-image: url(images/blog_btn.gif); display: block; height: 52px; width: 47px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.bio { background-image: url(images/bio_btn.gif); display: block; height: 52px; width: 31px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.merch { background-image: url(images/merch_btn.gif); display: block; height: 52px; width: 67px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.bike-things { background-image: url(images/bike_things_btn.gif); display: block; height: 52px; width: 116px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.gigs { background-image: url(images/gigs_btn.gif); display: block; height: 52px; width: 42px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a.contact { background-image: url(images/contact_btn.gif); display: block; height: 52px; width: 75px; text-align: center; background-repeat: no-repeat; } ul#main-nav li a:hover { border-bottom-style: solid; border-bottom-width: 4px } ul#main-nav li { float: left; margin-right: 20px; margin-left: 20px; display: inline; } ul#main-nav li a {color: #151E21; margin-bottom: -5px; text-decoration: none; font-size: 22px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif;} /* ---------------------------------------------------------------------------------------------------------- HOME - BODY ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ @font-face { font-family: 'BebasRegular'; src: url('fonts/BEBAS___-webfont.eot'); src: url('fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BEBAS___-webfont.woff') format('woff'), url('fonts/BEBAS___-webfont.ttf') format('truetype'), url('fonts/BEBAS___-webfont.svg#BebasRegular') format('svg'); font-weight: normal; font-style: normal; } h2 {color: #151E21; margin-bottom: -5px; text-decoration: none; font-size: 22px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif;} h2#category { padding-top: 10px; float: left; padding-bottom: 10px; margin-left: 10px; background-color: #F0EBE6; padding-left: 10px; width: 470px; color: #151E21; margin-bottom: 10px; text-decoration: none; font-size: 28px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif;} li#text-2 .widgettitle {color: #F0EBE6; margin-bottom: -5px; text-decoration: none; font-size: 22px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif;} h2#no-posts {color: #F0EBE6; margin-bottom: -5px; text-decoration: none; font-size: 22px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif; width: 460px; } h2 a {color: #151E21; margin-bottom: -5px; text-decoration: none; font-size: 22px; word-spacing: 8px; font-family: 'BebasRegular', Fallback, sans-serif;} h3 a {color: #151E21; margin-bottom: -5px; text-decoration: none; font-size: 15px; word-spacing: 5px; font-family: 'BebasRegular', Fallback, sans-serif;} a { text-decoration: none; color: black; } .blog-post { margin-right: 10px; margin-left: 10px; margin-bottom: 20px; float: left; display: block; padding: 10px; height: 100%; width: 460px; background-color: #f0ebe6; } a:hover { text-decoration: underline; } .blog-post-date { color: #151E21; margin-bottom: 10px; margin-top: 7px; height: 10px; font-size: 12px; font-weight: bold; } p { color: #151E21; font-size: 12px; } .blog-post img { margin-right: 15px; margin-bottom: 10px; } .blog-post br.clear { width: 470px;display: block; } /* ---------------------------------------------------------------------------------------------------------- SIDEBAR ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ ul#sidebar { display: block; float: right; width:280px;} /* ---------------------------------------------------------------------------------------------------------- SIDEBAR - TWITTER ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ li#text-2 { font-size: 12px; color: #f0ebe6; height: 220px; padding-left: 10px; margin-top: 20px; width: 270px; margin-top: 30px; } li#reallysimpletwitterwidget-2 {color: #151E21; background-color: #F0EBE6; padding:0; width: 270px; padding: 10px} .really_simple_twitter_widget { margin-left: margin-bottom:5px; font-size: 12px; margin-top: 10px } .really_simple_twitter_widget li { margin-top: 10px padding-top:10px; padding-bottom:10px; margin-bottom:5px;} /* ---------------------------------------------------------------------------------------------------------- SIDEBAR - FOLLOW ME ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ ul.social-menu {height: 63px; width: 100%; margin-top: 10px;} ul.social-menu li a.twitter-btn { background-image: url(images/twitter_icon.png); display: block; height: 63px; width: 54px; text-align: center; background-repeat: no-repeat; } ul.social-menu li a.fb-btn { background-image: url(images/fb_icon.png); display: block; height: 63px; width: 30px; text-align: center; background-repeat: no-repeat; } ul.social-menu li a.yt-btn { background-image: url(images/yt_icon.png); display: block; height: 52px; width: 80px; text-align: center; background-repeat: no-repeat; } ul.social-menu li a:hover { background-position: 0px -70px; text-align: center; background-repeat: no-repeat; } /* ---------------------------------------------------------------------------------------------------------- SIDEBAR - LINKS ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ ul.social-menu li { float: left; display: inline; margin-right:5px; margin-left: 5px; } ul.basic-list {padding-top: 10px; list-style-type: none;} ul.basic-list li {font-size: 12px; padding-top: 7px;} li#links, li#reading-list { margin-bottom: 20px; margin-top: 20px; background-color: #f0ebe6; padding: 10px; width: 270px; } ul.basic-list li a:hover, { text-decoration: none; font-weight: bold; } #footer { margin-top: 50px; background-repeat: repeat-x; background-image: url(images/menu_bar_bg.jpg); width: 900px; height: 60px } ul.footer-nav {float: left; padding-top: 19px; margin-left: 40px;} ul.footer-nav li { font-size: 12px; font-weight: bold; display: inline; } ul.footer-nav li a:hover { text-decoration: none; text-shadow: 0px 0px 2px #737373;} #copyright { margin-bottom: 5px; margin-left: 10px; color: #f0ebe6; font-size: 10px; } #pagination { margin-bottom: 10px; text-align: center; width: 470px; } h2#merch-title { padding-bottom: 10px; } li#links ul li {font-size: 12px; padding-top: 7px; text-decoration: none} li#links ul li a:hover { text-decoration: none; font-weight: bold; } /* ---------------------------------------------------------------------------------------------------------- SIDEBAR - feeds ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ li#simplerssfeedswidget-2 { margin-bottom: 20px; margin-top: 20px; background-color: #f0ebe6; padding: 10px; width: 270px; } li#simplerssfeedswidget-2 ul {padding-top: 10px; list-style-type: none;} li#simplerssfeedswidget-2 ul li {font-size: 12px; padding-top: 7px; text-decoration: none} li#simplerssfeedswidget-2 ul li a:hover { text-decoration: none; font-weight: bold; } ul.footer-social-menu { margin-right: 53px; float: right; margin-top: 6px; width: 300px; height: 50px; display: inline;} ul.footer-social-menu li a.twitter-btn-small { margin-right: 5px; display: block; background-repeat: no-repeat; height: 39px; width: 51px; background-image: url(images/twitter_icon_footer.png); } ul.footer-social-menu li a.fb-btn-small { margin-right: 3px; background-repeat: no-repeat; height: 39px; display: block; width: 39px; background-image: url(images/facebook_icon_footer.png); } ul.footer-social-menu li a.yt-btn-small { display: block; height: 39px; width: 55px; background-repeat: no-repeat; background-image: url(images/youtube_icon_footer.png); } ul.footer-social-menu li { float: right; display: inline; } li#text-2 input { color: #151E21; background: #F0EBE6; border: 1px solid #151E21 } li#text-2 .submit input { margin-left: 10px; height: 18px; width: 60px; padding: 1px; display: inline; float: left; } li#text-2 .state { display: inline; float: left; } #mailing-list{ margin-top: 20px; } ul#main-nav u{ text-decoration: none; border-bottom: 4px solid black; } .more-link { height: 20px; display: block; margin-top: 5px; font-weight: bold; color: #151E21; } .header-link { height: 392px; width: 893px; }