/* 
Title:		Master styles for screen media
Author: 	dan@simplebits.com
*/

body {
	padding: 0px;
	font-family: Arial, sans-serif;
	color: #444;
	font-size: 12px;
    background: #000009;
    background-image: url('../images/bg09.png');
    background-repeat: repeat;
	}

/* links */



/* page structures 
--------------------------------------------- */

#wrap {
	width: 940px;
	margin: 0 auto;
	}
div.full {
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px solid #d9d9d9;
	}
div.main {
	float: left;
	width: 737px;
	padding: 10px 15px 10px 5px;
	}
div.secondary {
	float: right;
	width: 160px;
	padding: 10px 5px 10px 15px;
	}
div.top { /* less top padding */
	padding-top: 5px;
	}
#footer {
	margin: 20px 0;
	padding: 5px 0;
	color: #888;
	background: #000 url(http://www.thememagazine.com/includes/img/footer-bg.gif) repeat-y top left;
	}

/* index page structure */

div.index {
	background: url(http://www.thememagazine.com/includes/img/faux-index.gif) repeat-y top left;
	}
div.index div.main {
	width: 354px;
	}
div.index div.main-2 {
	margin-left: 10px;
	}
div.index div.middle {
	margin-bottom: 20px;
	background: url(http://www.thememagazine.com/includes/img/middle-bg.gif) repeat-y top left;
	}
div.index div.middle-1 {
	float: left;
	width: 160px;
	padding: 0 5px 10px 0;
	}
div.index div.middle-2 {
	float: right;
	width: 160px;
	padding: 0 2px 10px 0;
	}
#footer.index div.middle {
	background: none;
	}

/* article structure */

div.article {
	background: url(http://www.thememagazine.com/includes/img/article-bg.gif) repeat-y top left;
	}
div.article div.content {
	float: right;
	width: 540px;
	margin-right: 3px;
	}
div.article div.sidebar {
	float: left;
	width: 167px;
	}
	
/* landing structure */

div.landing {
	background: url(http://www.thememagazine.com/includes/img/article-bg.gif) repeat-y top left;
	}
div.landing div.content {
	float: right;
	width: 540px;
	margin-right: 3px;
	}
div.landing div.sidebar {
	float: left;
	width: 167px;
	}

/* gallery structure */

div.gallery {
	background: url(http://www.thememagazine.com/includes/img/gallery-bg.gif) repeat-y top left;
	}
div.gallery div.main {
	width: 925px;
	padding: 10px 10px 10px 5px;
	}
div.gallery div.content {
	float: right;
	width: 730px;
	}
div.gallery div.sidebar {
	float: left;
	width: 167px;
	}

/* header 
--------------------------------------------- */

#header {
	margin: 0 0 10px 0;
	}

#logo {
	float: left;
	border-bottom: 10px solid #000;
	}
#logo a img {
	height: 0;
	}
#logo a {
	display: block;
	width: 181px;
	height: 50px;
	background: #000 url(http://www.thememagazine.com/includes/img/theme-logo.png) no-repeat top left;
	}
	
/* nav */

#nav {
	float: left;
	
	}
#nav li {
	float: left;
	}
#nav li a {
	display: block;
	float: left;
	background: #000;
	}

/* search */

#search {
	float: left;
	width: 172px;
	height: 40px;
	padding: 20px 0 0 10px;
	background: url(http://www.thememagazine.com/includes/img/search-bg.gif) no-repeat bottom left;
	}
#search input {
	vertical-align: middle;
	}
#search input#search-text {
	width: 138px;
	margin-right: 2px;
	}

/* main styles 
--------------------------------------------- */

h3.sub,
h2.sub {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #333;
	border-bottom: 1px solid #ccc;
	}
h3.alt,
h2.alt {
	padding-bottom: 0;
	border-bottom: none;
	}

/* pagination list */

ol.page {
	margin: 2px 2px 10px 0;
	text-align: right;
	}
ol.page li {
	display: inline;
	margin: 0 0 0 1px;
	font-size: 1.2em;
	}
ol.page li a:link,
ol.page li a:visited {
	padding: 2px 5px;
	color: #666;
	background: #f0f0f0;
	}
ol.page li a:hover {
	background: #ddd;
	}
ol.page li a.selected:link,
ol.page li a.selected:visited {
	color: #fff;
	background: #666;
	}
	
/* pagination list (EE) */

div.page-ee {
	margin: 2px 2px 10px 0;
	text-align: right;
	font-size: 1.2em;
	}
div.page-ee a:link,
div.page-ee a:visited {
	padding: 2px 5px;
	color: #666;
	background: #f0f0f0;
	}
div.page-ee a:hover {
	background: #ddd;
	}
div.page-ee b,
div.page-ee b {
	padding: 2px 5px;
	color: #fff;
	background: #666;
	}

/* main feature */

div.feature {
	width: 340px;
	margin: 5px 0 0 387px;
	padding: 5px;
	border-top: 1px solid #ccc;
	}
div.feature img {
	position: absolute;
	top: 5px;
	left: 0;
	margin: 0 15px 0 0;
	}
div.feature a img {
	border: 2px solid #e0e0e0;
	}
div.feature a:hover img {
	border-color: #333;
	}
div.feature h2 {
	font-size: 1.3em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #666;
	}
div.feature h1 {
	font-family: Georgia, serif;
	font-size: 4em;
	font-weight: normal;
	}
div.feature h1 a {
	text-decoration: none;
	}
div.feature p {	
	margin: 0 0 10px 0;
	font-family: Georgia, serif;
	font-size: 2em;
	line-height: 1.4em;
	color: #333;
	}
div.feature p.more {
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.4em;
	}

/* lst style */

ol.lst {
	margin: 15px 0 0 0;
	}
ol.lst li {
	margin: 0 0 20px 0;
	}
ol.lst li.top {
	margin-bottom: 15px;
	}
ol.lst li h4 {
	margin: 0 0 3px 2px;
	font-family: Georgia, serif;
	font-size: 1.6em;
	line-height: 1.3em;
	font-weight: normal;
	}
ol.lst li.top h4 {
	font-size: 2em;
	line-height: 1em;
	}
ol.lst li h4 img {
	float: left;
	margin: 0 10px 8px -2px;
	border: 2px solid #ccc;
	}
div.middle-2 ol.lst li h4 img {
	margin-right: 0;
	}
ol.lst li h4 a:hover img {
	border-color: #333;
	}
ol.lst li h4 strong.sub {
	display: block;
	margin: 2px 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .7em;
	line-height: 1.5em;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .1em;
	color: #666;
	}
ol.lst li.top h4 strong.sub {
	font-size: .5em;
	line-height: 1.3em;
	}
ol.lst li h5 {
	margin: 2px;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #666;
	}
ol.lst li h5 span.comments {
	padding-left: 17px;
	background: url(http://www.thememagazine.com/includes/img/icon-comment.gif) no-repeat 0 1px;
	}
ol.lst li p {
	margin-left: 2px;
	font-size: 1.2em;
	line-height: 1.5em;
	}
ol.lst li a.more {
	text-transform: uppercase;
	letter-spacing: .1em;
	}

/* when small two-col */

ol.double li {
	float: right;
	width: 172px;
	}
ol.double li.alt {
	float: left;
	}
ol.double li h4 {
	font-size: 1.4em;
	}
ol.double li h4 img {
	margin-right: 6px;
	}
ol.double li h5 {
	font-size: .9em;
	letter-spacing: .2em;
	}

/* vertical sidebar style */

ol.vert li h4 {
	font-size: 1.3em;
	}
ol.lst li h4 em.date {
	display: block;
	margin: 2px 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #666;
	}

/* on landing page */

ol.landing {
	margin-bottom: 15px;
	border-bottom: 1px solid #ccc;
	}
ol.landing alt {
	margin-bottom: 15px;
	border-bottom: none;
	}
div.article div.main ol.landing li a {
	text-decoration: none;
	}
ol.landing li h4 img {
	width: 112px;
	}
ol.lg li h4 img {
	width: 156px;
	}

/* pull quote */

blockquote.pull {
	padding: 0 0 0 20px;
	font-family: Georgia, serif;
	font-size: 1.6em;
	font-style: italic;
	line-height: 1.3em;
	background: url(http://www.thememagazine.com/includes/img/bq-l.gif) no-repeat top left;
	}
blockquote.pull p.q {
	display: inline;
	padding-right: 20px;
	background: url(http://www.thememagazine.com/includes/img/bq-r.gif) no-repeat 100% 2px;
	}
blockquote.pull p.attr {
	margin: 10px 0 0 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .7em;
	font-style: normal;
	}
blockquote.pull p.attr cite {
	font-style: normal;
	}
blockquote.pull p.attr cite a {
	font-weight: bold;
	}
blockquote.pull p.attr cite span {
	text-transform: uppercase;
	letter-spacing: .1em;
	}

/* ad block */

div.adv {
	margin: 0 0 25px 0;
	padding: 10px;
	text-align: center;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	background: #f0f0f0;
	}
h3.adv,
h4.adv {
	margin: 0 0 10px 0;
	font-family: Arial, sans-serif;
	font-size: 9px;
	line-height: 1em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .2em;
	text-align: center;
	color: #666;
	}

/* action button */

div.action a:link,
div.action a:visited {
	padding: 3px 5px;
	font-size: 1.1em;
	text-transform: uppercase;
	color: #fff;
	background: #666;
	}
div.action a:hover {
	background: #444;
	}
.sidebar .action {
	padding-top: 20px;
	}
div.buy {
	margin-top: 10px;
	}


/* article styles 
--------------------------------------------- */

ul.tools {
	float: right;
	width: 81px;
	margin: 0 0 0 10px;
	}
ul.tools li {
	border-bottom: 1px solid #ccc;
	}
ul.tools li a {
	display: block;
	padding: 5px 0 5px 22px;
	}
ul.tools li.email a {
	color: #666;
	background: url(http://www.thememagazine.com/includes/img/icon-email.gif) no-repeat 0 50%;
	}
ul.tools li.print a {
	color: #666;
	background: url(http://www.thememagazine.com/includes/img/icon-print.gif) no-repeat 0 50%;
	}
ul.tools li.comments a {
	background: url(http://www.thememagazine.com/includes/img/icon-comment.gif) no-repeat 0 50%;
	}
ul.tools li a:hover {
	color: #333;
	}

/* title */

div.article div.content a {
	text-decoration: underline;
	}
#title h1 {
	margin: 0 0 10px 0;
	font-family: Georgia, serif;
	font-size: 2.7em;
	line-height: 1.1em;
	font-weight: normal;
	color: #111;
	}
#title h1 a {
	text-decoration: none;
	}
#title h2.sub {
	margin: 0 0 5px 0;
	}
#title h2.callout,
h2.deck {
	margin: 20px 0 20px 0;
	font-family: Georgia, serif;
	font-size: 1.8em;
	font-weight: normal;
	line-height: 1.4em;
	color: #000;
	}
h2.deck {
	margin-top: 0;
	}
#title p.by {
	margin: 0 0 15px 0;
	font-size: 1.2em;
	line-height: 1.4em;
	}

/* article body */

div.article-body {
	font-family: Georgia, serif;
	font-size: 1.4em;
	line-height: 1.5em;
	}
div.article-body h2 {
	margin: 0 0 5px 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.4em;
	font-weight: normal;
	color: #000;
	}
div.article-body h2.alt {
	margin: 15px 0 5px 0;
	padding: 10px 0 0 0;
	border-top: 1px solid #ccc;
	}
div.article-body h3 {
	margin: 0 0 5px 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .8em;
	font-style: normal;
	line-height: 1.4em;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #000;
	}
div.article-body p {
	margin: 0 0 20px 0;
	}
div.article-body ul {
	margin: 0 0 25px 0;
	}
div.article-body ul li {
	margin: 0 0 5px 10px;
	padding: 0 0 0 9px;
	line-height: 1.4em;
	background: url(http://www.thememagazine.com/includes/img/icon-bullet.gif) no-repeat 0 7px;
	}
div.article-body ol {
	margin: 0 0 25px 10px;
	padding: 0 0 0 10px;
	}
div.article-body ol li {
	margin: 0 0 5px 10px;
	line-height: 1.4em;
	list-style: decimal;
	}

/* tags */

p.tags {
	margin: 0 0 15px 0;
	padding: 6px 8px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f0f0f0;
	}
p.tags strong {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .1em;
	}
p.tags a {
	color: #333;
	}
p.tags a:hover {
	color: #666;
	}
	
/* photo figures */

div.fig {
	margin: 0 0 15px 0;
	}
div.half { /* 260px wide images */
	float: left;
	width: 260px;
	margin: 4px 12px 5px 0
	}
div.half img {
	width: 260px;
	}
div.third { /* 160px wide images */
	float: left;
	width: 160px;
	margin: 4px 12px 10px 0
	}
div.third img {
	width: 160px;
	}
div.fig p {
	margin: 7px 0 0 0;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .7em;
	line-height: 1.1em;
	font-style: italic;
	color: #666;
	}
div.fig p a {
	color: #666;
	}
div.fig p a:hover {
	color: #333;
	}

/* blockquotes */

blockquote {
	margin: 0 0 20px 0;
	font-family: Georgia, serif;
	font-size: 1.3em;
	line-height: 1.4em;
	color: #000;
	}
blockquote.half {
	float: left;
	width: 250px;
	margin: 0 12px 5px 0;
	padding: 8px 5px;
	font-family: Georgia, serif;
	font-size: 1.3em;
	line-height: 1.4em;
	color: #000;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	}
div.article-body blockquote.half p {
	margin: 0;
	}

/* comments */

#comments {
	padding: 20px 0 0 0;
	border-top: 1px solid #ccc;
	}
#comments dl {
	margin: 15px 0 20px 0;
	border-bottom: 1px solid #ccc;
	}
#comments dl dt {
	margin: 0 0 5px 0;
	padding-left: 18px;
	font-size: 1.1em;
	background: url(http://www.thememagazine.com/includes/img/icon-comment.gif) no-repeat 0 2px;
	}
	}
#comments dl dt strong {
	font-size: 1.1em;
	}
#comments dl dt span.date {
	text-transform: uppercase;
	letter-spacing: .1em;
	}
#comments dl dd {
	margin: 0 0 25px 0;
	font-family: Georgia, serif;
	font-size: 1.2em;
	line-height: 1.5em;
	}
#comment_form, #tellafriend_form,
form.form {
	margin: 20px 0;
	}
#comment_form fieldset, #tellafriend_form fieldset,
form.form fieldset {
	margin: 0 0 15px 0;
	}
#comment_form fieldset label, #tellafriend_form fieldset label, form.form fieldset label {
	float: left;
	width: 175px;
	font-size: 1.1em;
	line-height: 1.6em;
	font-weight: bold;
	}
#comment_form fieldset div.alt, #tellafriend_form fieldset div.alt, form.form fieldset div.alt {
	margin-left: 175px;
	}
#comment_form fieldset div.alt label, #tellafriend_form fieldset div.alt label, form.form fieldset div.alt label {
	float: none;
	margin-left: 4px;
	font-weight: normal;
	}
#comment_form fieldset div.alt input, #tellafriend_form fieldset div.alt input, form.form fieldset div.alt input {
	margin-right: 3px;
	}
#comment_form fieldset input.input-text, #tellafriend_form fieldset input.input-text, form.form fieldset input.input-text {
	font-size: 1.2em;
	width: 350px;
	}
#comment_form fieldset textarea, #tellafriend_form fieldset textarea, form.form fieldset textarea {
	font-size: 1.2em !important;
	width: 350px;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif !important;
	}
h3.comm-message {
	background: #c33 !important;
	color: #fff !important;
	padding: 10px !important;
	margin-bottom: 20px;
	}

/* blog styles 
--------------------------------------------- */

div.post {
	border-bottom: 1px solid #ccc;
	margin: 0 0 15px 0;
	}
div.post-title h2 {
	margin: 0 0 10px 0;
	font-family: Georgia, serif;
	font-size: 2.2em;
	line-height: 1.1em;
	font-weight: normal;
	color: #111;
	}
div.post-title h2 a {
	text-decoration: none;
	}
div.post-title p.by {
	margin: 0 0 15px 0;
	font-size: 1.2em;
	line-height: 1.4em;
	}
div.post-title p.by a {
	text-decoration: underline;
	}
div.post-title p.by a.comments {
	padding-left: 16px;
	background: url(http://www.thememagazine.com/includes/img/icon-comment.gif) no-repeat 0 2px;
	}
div.post p.tags {
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, sans-serif;
	font-size: .8em;
	}
div.post p.tags a {
	text-decoration: underline;
	color: #333;
	}
div.post p.tags a:hover {
	color: #666;
	}

/* gallery styles 
--------------------------------------------- */

div.gallery div.content a {
	text-decoration: underline;
	}
#slideshow {
	margin: 0 0 15px 0;
	}

/* banner ad */

div.ad-760 {
	margin: 0 0 10px 0
	}
div.ad-760 h3.adv {
	margin-bottom: 5px;
	text-align: left;
	}

/* comments */

div.gallery #comments dl dd { /* set max-width on wider gallery page */
	width: 540px;
	}

/* issue block 
--------------------------------------------- */

div.issue {
	margin: 0 0 25px 0;
	padding: 0 0 0 0;
	}
div.issue div.fig {
	float: left;
	margin-right: 20px;
	}

/* secondary styles 
--------------------------------------------- */

/* current issue */

#current-issue a img {
	border: 2px solid #ccc;
	}
#current-issue a:hover img {
	border-color: #333;
	}
#current-issue h4 {
	margin: 0 0 10px 0;
	padding: 10px 0;
	font-family: Georgia, serif;
	font-size: 2em;
	font-weight: normal;
	border-bottom: 1px dashed #999;
	}
#current-issue p {
	font-size: 1.1em;
	font-weight: bold;
	}

/* sidebar styles 
--------------------------------------------- */

div.sidebar ul.subnav {
	margin: 0 0 25px 0;
	border-bottom: 1px solid #ccc;
	}
div.sidebar ul.subnav li {
	font-size: 1.3em;
	border-top: 1px solid #ccc;
	}
div.sidebar ul.subnav li a {
	display: block;
	padding: 5px;
	}
div.sidebar ul.subnav li.selected a {
	color: #111;
	background: #f0f0f0;
	}

/* RSS feeds */

ul.feeds li {
	margin: 0 0 10px 5px;
	font-size: 1.1em;
	}
ul.feeds li a {
	padding: 2px 0 2px 16px;
	text-decoration: underline;
	background: url(http://www.thememagazine.com/includes/img/icon-rss.gif) no-repeat 0 4px;
	}
	
/* common questions */

dl.questions {
	margin: 0 0 25px 0;
	font-size: 1.1em;
	line-height: 1.4em;
	}
dl.questions dt {
	margin: 0 0 4px 0;
	font-weight: bold;
	}
dl.questions dd {
	margin: 0 0 20px 0;
	}
dl.questions dd a {
	text-decoration: underline;
	}

/* most commented */

ol.commented {
	margin: 0 0 25px 0;
	}
ol.commented li {
	margin: 0 0 10px 5px;
	padding: 0 0 0 9px;
	font-size: 1.1em;
	line-height: 1.4em;
	color: #999;
	background: url(http://www.thememagazine.com/includes/img/icon-bullet.gif) no-repeat 0 6px;
	}
ol.commented li a {
	text-decoration: underline;
	}
ol.commented li span.comments {
	padding-left: 16px;
	font-weight: bold;
	color: #666;
	background: url(http://www.thememagazine.com/includes/img/icon-comment.gif) no-repeat 0 2px;
	}

/* footer 
--------------------------------------------- */

#footer a {	
	text-decoration: underline;
	color: #fff;
	}
#footer a:hover {
	color: #ccc;
	}
#footer p {
	font-size: 1.1em;
	line-height: 1.5em;
	}
#footer h3.sub {
	padding: 0;
	color: #fff;
	border: none;
	}
#footer div.main p {
	margin: 0 0 0 10px;
	}
#footer div.main-2 p {
	margin: 0;
	}
#footer ul li {
	margin: 0 0 5px 0;
	padding-left: 10px;
	font-size: 1.1em;
	background: url(http://www.thememagazine.com/includes/img/bullet-footer.gif) no-repeat 0 4px;
	}
	
/* updates form */

#updates {
	margin: 10px 0 0 0;
	}
#updates input {
	vertical-align: middle;
	}
#updates input#updates-text {
	width: 125px;
	margin-right: 2px;
	}

/* current issue */

#footer img#cover-sm {
	float: left;
	margin: 0 10px 0 0;
	}
#footer div.secondary h4 a {
	text-decoration: none;
	color: #888;
	}
#footer div.secondary h4 {
	margin: 0 0 10px 0;
	font-size: 1.1em;
	font-weight: normal;
	}
#footer div.secondary h4 a strong {
	display: block;
	margin: 2px 0 0 0;
	font-size: 1.2em;
	text-decoration: underline;
	color: #fff;
	}
#footer div.secondary h4 a:hover strong {
	color: #ccc;
	}

/* misc. 
--------------------------------------------- */

hr, .hide {
	display: none;
	}
a img {
	border: none;
	}

/* self-clear floats */

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }