/*
Theme Name: Starkers
Theme URI: http://elliotjaystocks.com
Description: The totally nude Wordpress theme. Phwoar! (Based on the famous Kubrick by Michael Heilemann)
Version: 2 (WP2.6.2)
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
Tags: starkers, naked, clean, basic
*/
@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
/* RESET */
/* ----------------------------------------- */
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
/* LAYOUT */
/* ----------------------------------------- */
/* Utility */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
a img { border: none; }
.image-center { image-align: center; }
/* 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 }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { text-align: left; font-size: 8px; }
.pushleft { margin-left: -5px; margin-bottom: 10px; }
.pushright { margin-right: -5px; margin-bottom: 10px; }
.spaced { margin-bottom: 10px; border: 1px solid #D9D9D9; }
.pushtop {margin-top: -15px; }
.love { float: left; margin: 0 10px 10px 0; }
/* You might find the following useful */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
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 */
/* Structure
*/
#page-wrap { width: 960px; margin: 0px auto -100px;
min-height: 100%; height: auto !important; height: 100%;}
#push { height: 100px; }
#slideshow-ad { width: 960px; margin-bottom: 20px; }
#social { width: 200px; float: left; margin: 0 20px 0px 0; border-top: 1px solid black; }
#mainblog { width: 500px; margin: 0 15px 0px 0px ; float: left; overflow: hidden; }
#linksidebar { float: right; width: 200px; margin-bottom: 0px; }
#singlepage { width: 730px; float: left; }
body { }
/*
Header
*/
#header { margin-top: 50px; margin-bottom: 20px; }
#logo { float: left; width: 192px; height: 28px; background-image: url(/images/logo.gif); }
#logo span { /* Hide the "Logo Text" from view... */ display: block; width: 0; height: 0; overflow: hidden; }
form#searchform { margin: 13px 0px 10px 30px; float: right; width: 200; }
input#s { width: 135px; }
#ruler { width: 730px; border-bottom: 1px solid black; }
/*
Menu
*/
#menu-bar { float: right; margin: 5px 0 5px 0; }
ul#main-nav { float: right; margin: 13px 0px 0 0;}
ul#main-nav li { display: inline; }
ul#main-nav li a { text-transform: uppercase; color: black; text-decoration: none; padding: 0px 0px 0px 15px; }
ul#main-nav li a:hover { color: black; text-decoration: underline; }
/*
Sidebar (200px)
*/
#sidebarad1 {
float: left;
text-align: center;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 10px;
}
#sidebarad1 img { margin-bottom: 5px; }
.sidebarad2 { border-top: 1px solid black; border-bottom: 1px solid #D9D9D9; margin-bottom: 10px; }
#sidebarcontent { float: right; text-align: left; width: 200px; }
#horizontalad { float: left: }
ul#sidebar h2 { padding: 10px 0 0 0; border-bottom: 1px solid #D9D9D9; margin-bottom: 7px; }
#sidebarcontent h2 { padding: 10px 0 0 0; border-bottom: 1px solid #D9D9D9; margin-bottom: 7px; }
/*
Lookbook
*/
#lookbook { float: right; margin: 20px 0 20px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 200px; background: #F3F3F4; padding: 25px 0 25px 0; text-align: center; }
#lookbook h3 { margin-bottom: 15px; }
.label { -moz-border-radius: 3px; -webkit-border-radius: 3px; background: black; margin: 25px 25px 0 25px; padding: 10px; }
.label h3 { color: white; }
.label img { margin-top: 0px; }
#lookslide {margin-left: 52px; }
/*
Slideshow (730px)
*/
#slideshow { float: left; position: relative; padding: 0px 0 0px; width: 730px; height: 300px; margin-right: 30px; }
#slideshow #menu, #slideshow #pictures, #slideshow #loading { position: absolute; }
#slideshow #loading { background: url('slidetestimages/spinner.gif'); display: block; top: 158px; left: 205px; text-indent: -5000px; width: 24px; height: 24px; visibility: hidden; z-index: 5; }
#slideshow #pictures { width: 500px; height: 300px; left: 0; overflow: hidden; }
#slideshow #pictures li a { display: block; position: absolute; top: 0; width: 500px; border: none; }
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }
#slideshow #menu { list-style-type: none; width: 220px; height: 300px; right: 0; }
#slideshow #menu li { display: block; z-index: 1000; position: relative; height: 73px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; }
#slideshow #menu li a { display: block; text-decoration: none; z-index: 1000; vertical-align: middle; text-align: center; padding: 10px 10px 0px 10px; }
#slideshow #menu li a:focus { outline: 0; }
#slideshow #menu li a:hover { color: black; }
#slideshow #menu li.current a { color: black; }
#slideshow #menu li.background { background: url('/images/arrow.gif') no-repeat left center; position: absolute; font-size: 1px; height: 7px; width: 10px; z-index: 5; }
/*
Social Sidebar
*/
.socialelement { background: #F3F3F4; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 10px 0 20px 0; padding: 10px; }
.socialelementh3 { float: right; width: 130px; height: 30px; text-align: center; padding-top: 12px; }
.icon { float: left; }
#tweets { font-size: 10px; margin: 10px 0 10px 0; }
ul#twitter-post {}
ul#twitter-post li { background: white; padding: 5px 10px 5px 10px; margin: 10px 0 10px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
ul#twitter-post li a { text-decoration: underline; }
.created_at { }
#loveus { padding: 10px 0px 10px 0px; text-align: center; }
.loveusimg { text-align: center; background: white; padding: 10px 20px 10px 20px; margin: 10px 0 10px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.lovethumb { margin: 10px 0 0 25px; }
/*
Blog formatting
*/
.post { margin-bottom: 10px;}
.post h2 { padding-top: 15px; font-size: 20px; }
#posttitle { width: 100%; border-top: 1px solid black; border-bottom: 1px solid #D9D9D9; margin-bottom: 7px; padding-top: 10px; }
#comment { width: 490px; }
#content { margin-bottom: 20px; }
#commentform { margin-top: 20px; }
.blogtext { margin: 10px 5px 10px 5px; }
.blogtext li { display: inline; }
.avatar {
width: 35px;
float: left;
}
.comment {
background: #F3F3F4;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 10px;
margin-top: 10px;
margin-right: 0;
margin-bottom: 20px;
margin-left: 50px;
}
/*
Footer
*/
#footer { float: left; height: 100px; margin-bottom: 30px; }
#footer-inside { text-align: center; width: 730; margin: 0 auto; }
ul#footer-nav { margin-top: 40px; }
ul#footer-nav li { display: inline; }
ul#footer-nav li a {text-transform: uppercase; color: black; text-decoration: none; padding: 3px 6px; }
}
ul#footer-nav li a:hover { color: #FF0000; }
/*
form
*/
.tbmain{
/* Changes on the form */
background: white !important;
}
.left{
/* Changes on the form */
color: 333333 !important;
font-family: "Helvetica Neue" !important;
font-size: 12px !important;
}
.head{
color:#333333;
font-size:20px;;
text-decoration:underline;
font-family:"Helvetica Neue" ;
}
td.left {
font-family:"Helvetica Neue" ;
font-size:12px;
color:black;
width: 60px;
padding-top: 5px;
}
td.right {
font-family:"Helvetica Neue" ;
font-size:12px;
color:black;
padding-top: 5px;
}
.pagebreak{
font-family:"Helvetica Neue" ;
font-size:12px;
color:black;
}
.tbmain{
height:100%;
background:white;
}
span.required{
font-size: 12px !important;
color: red !important;
}
div.backButton{
background: transparent url("http://jotform.com//images/btn_back.gif") no-repeat scroll 0 0;
height:16px;
width:53px;
float:left;
margin-bottom:15px;
padding-right:5px;
}
div.backButton:hover{
background: transparent url("http://jotform.com//images/btn_back_over.gif") no-repeat scroll 0 0;
}
div.backButton:active{
background: transparent url("http://jotform.com//images/btn_back_down.gif") no-repeat scroll 0 0;
}
div.nextButton{
background: transparent url("http://jotform.com//images/btn_next.gif") no-repeat scroll 0 0;
height:16px;
width:53px;
float: left;
margin-bottom:15px;
padding-right:5px;
}
div.nextButton:hover{
background: transparent url("http://jotform.com//images/btn_next_over.gif") no-repeat scroll 0 0;
}
div.nextButton:active{
background: transparent url("http://jotform.com//images/btn_next_down.gif") no-repeat scroll 0 0;
}
.pageinfo{
padding-right:5px;
margin-bottom:15px;
float: right;
}
/* TYPOGRAPHY */
/* ----------------------------------------- */
/* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */
h2, h3, h5, h5, h6 { font-weight: normal; }
a { color: #231f20; text-decoration: none; outline: none; }
a:hover { color: #231f20; text-decoration: underline; }
body {font-family: "Helvetica Neue", helvetica, arial; font-size: 12px;}
p { font-family:"Helvetica Neue", helvetica, arial; font-size: 12px; color: #231f20; margin-bottom: 12px; }
.time {font-size: 10px; padding-bottom: 7px; padding-left: 5px; }
.tags {font-size: 10px; padding-top: 5px; padding-left: 5px; }
.tweet {font-size: 10px; margin: 10px 0 10px 0; }
.tweet a {text-decoration: underline; }
.slidetext { font-size: 10px; }
.post p { padding: 0 5px 0 5px; }
.post h2 { padding: 0 5px 0 5px; }
.click { z-index: 1; }
h1 { font-size: 30px;
font-style: normal;
font-weight: normal;
font-family: Times;
}
h2 { font-size: 15px;
font-style: normal;
font-weight: normal;
font-family: Times;
text-transform: uppercase;
}
h3 { font-size: 12px;
font-style: normal;
font-weight: normal;
font-family: Times;
display: inline;
}
.socialtitle { font-size: 12px; font-style: normal;
font-weight: normal;
font-family: Times;
display: inline;
float: right; width: 130px; height: 30px; text-align: center; padding-top: 12px; margin-bottom: 0; }
.moretext { text-transform: uppercase; line-height: 30px; }
/* 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
*/