/* Woodsmith Shop CSS file. */

/*	Section 1: Resets
	Section 2: Globals and grid classes
	Section 3: Banner and top navigation
	Section 4: Main content area
	Section 5: Footer

*/

/* 1: Resets. Based on Eric Meyer's Resets Reloaded. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline; }
:focus {
	outline: 0; }
body {
	line-height: 1;
	color: black;
	background: white; }
ol, ul {
	list-style: none; }
table {
	border-collapse: separate;
	border-spacing: 0; }
caption, th, td {
	text-align: left;
	font-weight: normal; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: ""; }
blockquote, q {
	quotes: "" ""; }
/* -------------------------------------------------- */
	
/* 2: Globals and Grids. 
   2.1: Globals and nearly-sos. */
body {
	font-size: 62.5%;
	font-family: "Arial", "Helvetica", sans-serif;
	background-color: #fff; }
em {
	font-style: italic; }
strong {
	font-weight: bold; }
h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #583021; }
h2 a {
	display: block;
	color: #583021;
	text-decoration: none; }
h3 {
	font-size: 1.1em; 
	font-weight: bold;
	color: #583021; }
.small {
	font-size: 80%; }
.hide {
	display: none; }
#wrap {
	width: 780px;
	padding: 0 31px;
	margin: 0 auto;
	background: transparent url(../img/shadow.jpg) repeat-y }

/* 2.2: Grid/column classes. Each column is 120px wide with a 12px gutter. */
.col {
	float: left; }
.colright {
	float: right; }
.gutter {
	margin-right: 12px; }
.span1 {
	width: 120px; }
.span2 {
	width: 252px; }
.span3 {
	width: 384px; }
.span4 {
	width: 516px; }
.span5 {
	width: 648px; }
.span6 {
	width: 780px; }
.clear {
	clear: left; }
/* -------------------------------------------------- */
	
/* 3: Banner and top navigation. */
#banner {
	padding: 5px 0 10px 0; }
#banner h1 {
	width: 420px;
	height: 58px; 
	margin-bottom: 10px; }
#banner h1 a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -10000px;
	background: transparent url(../img/woodsmithshop.jpg) no-repeat; }
#topnav {
	width: 767px;
	float: left;
	font-size: 1.2em;
	background-color: #e1e5e1;
	border: 1px solid #8b8b8b;
	padding-left: 11px; }
#topnav li {
	float: left; }
#topnav li a {
	display: block;
	text-decoration: none;
	color: #50281d;
	padding-right: 9px;
	margin: 3px 5px 3px 9px;
	line-height: 1.2;
	border-right: 1px solid #50281d; }
#topnav li a:hover {
	text-decoration: underline; }
#topnav li a.active {
	font-weight: bold; }
/* -------------------------------------------------- */
	
/* 4: Main content area. The bulk of the site goes here.
   4.1: Nearly global styles specific to the content area. */
#content {
	margin-top: 20px; }
#content .col {
	font-size: 1.2em;
	line-height: 1.5; }

/* 4.2: Homepage. */
.home #flash {
	height: 320px;
	padding-bottom: 6px;
	border-bottom: 1px solid #8b8b8b;
	margin-bottom: 5px; }
.home #flash p {
	font-size: 2em;
	color: #555;
	font-weight: bold;
	margin-top: 20px; }
.home #show h2, .home #mag h2 {
	margin: 3px;
	padding: 5px 10px;
	background-color: #fbf9f0;
	border: 1px solid #a2afa3;
	font-size: 1em;
 	font-weight: bold;
	color: #50281d;
	text-transform: uppercase; }
.home #show h2 {
	background-color: #fbf9f0; }
.home #show #epguide h2 {
	background: #fbf9f0 url(../img/home/icon-vid.gif) no-repeat 210px center; }
.home #show #epguide {
	margin-bottom: 5px; }
.home #show div, .home #mag div{
	background-color: #f5efd9;
	border: 1px solid #a2afa3; }
.home #show p {
	color: #50281d;
	margin: .5em 14px; }
.home #show ul {
	padding: 5px 14px; }
.home #show ul li {
	margin-bottom: .5em; }
.home #show ul li a {
	font-weight: bold;
	color: #fff; }
.home #mag div {
	background: #f5efd9 url(../img/home/mags.jpg) no-repeat 5px 50px; }	
.home #mag p {
	padding: 10px 10px 20px 160px; }
.home #etips div {
	background: #a2afa3 url(../img/home/etips-monitor.jpg) no-repeat bottom right;
	border: 1px solid #a2afa3; }
.home #etips h2 {
	margin: 3px;
	padding: 5px 10px;
	background-color: #e1e5e1;
	border: 1px solid #6e9095;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase; }
.home #etips h2 strong {
	color: #db5716; }
.home #etips p {
	padding: 10px 130px 10px 14px; }
.home #etips p strong {
	font-weight: bold;
	color: #db5716; }
.home #etips img {
	padding: 0 0 10px 10px; }
.home #when h2, .home #feedback h2 {
	color: #50281d;
	font-size: 1.2em;
	font-weight: bold; }
.home #when	{
	background: transparent url(../img/home/when-bg.jpg) no-repeat; }
.home #when form {
	margin: 20px 0 10px 105px; 
	border-right: 1px solid #8b8b8b; }
.home #when p {
	margin: 1em 0; }
.home #when #when-submit {
	position: absolute; }
.home #feedback h2 {
	padding: 20px 0 1em 15px; }
.home #feedback p {
	padding: 0 30px 30px 15px; }
.home #sponsors {
	padding-top: 6px;
	border-top: 1px solid #8b8b8b;
	margin-top: 5px; }
.home #station img {
	margin: 1em 0 1em 50px; }
.home #underwriters {
	width: 515px;
	border-left: 1px solid #8b8b8b; }
.home #underwriters h2 a, .home #station h2 {
	text-transform: uppercase;
	text-decoration: none;
	color: #999;
	font-size: .8em;
	font-weight: bold; }
.home #underwriters h2 {
	font-size: 1em;
	text-align: center; }
.home #underwriters p {
	margin: 0 0 1em 0;
	text-align: center; }
.home #underwriters p img {
	margin: 0 .5em; }

/* 4.3: Magazine page styles. */
.magazine #flash {
	height: 315px; }
.magazine #flash p {
	font-size: 2em;
	color: #555;
	font-weight: bold;
	margin-top: 20px; }
.magazine #about {
	margin-top: -12px; }
.magazine h2 {
	font-weight: bold;
	color: #f60;
	margin: 0 0 1em 0;  }
.magazine #about p {
	margin: 1em 80px 1em 0; }
.magazine #contact img {
	margin-left: -5px; }
.magazine #contact dt {
	margin-top: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #583021; }
.magazine label {
	display: block;
	height: 20px;
	margin-bottom: 8px; }
.magazine input {
	display: block;
	height: 14px;
	margin-bottom: 8px; }
.magazine input.long {
	width: 90%; }
.magazine input#continue {
	height: auto; }
	
/* 4.4: Woodsmith E-tips page. */
.etips h2 {
	color: #ff5a09; }
.etips #etipvid {
	font-size: 1.2em; }
.etips p#privacy {
	color: #666;
	margin-top: .3em;
	text-align: right; }
.etips #privacy a {
	color: #666; }
.etips p {
	margin: 1em 0; }
.etips #signup {
	margin-top: 10px; }
.etips #signup ul {
	font-size: 1.3em;
	font-weight: bold;
	margin: 1em 4em 1em 3em;
	list-style: disc; }
.etips #signup ul li {
	margin-bottom: .75em; }
.etips #signup img {
	margin: 1em 35px; }
.etips .span2 img {
	float: right;
	margin-top: 10px; }


/* 4.5: Feedback page. */
.feedback p {
	margin: 1em 0; }
.feedback label {
	display: block;
	font-weight: bold; }
.feedback input, .feedback textarea {
	width: 384px; }
.feedback p#thankyou {
	font-weight: bold; }

/* 4.6: Episode pages. */
.episode h3 {
	font-weight: bold;
	font-size: 1.3em;
	margin-top: .3em; }
.episode h4 {
	color: #aaa; }
.episode h4 a {
	font-size: 90%;
	margin-left: 5px; }
.episode h5 {
	font-weight: bold;
	font-size: 110%; }
.episode p {
	margin: 1em 0; }
.episode #epinfo ul {
	margin: .5em 0 0 0;
	padding: 0 0 0 40px;
	min-height: 24px; }
.episode ul#downloads {
	background: transparent url(../img/episodes/icon-doc.gif) no-repeat 8px 0px; }
.episode ul#videos {
	padding-top: 5px;
	background: transparent url(../img/episodes/icon-vid.gif) no-repeat 8px 0px; }
.episode #season-nav {
	margin-top: 12px;}
.episode #season-current, .episode #season-previous, .episode #ad-etips, .episode #ad-woodsmith {
	margin-top: 5px; }
.episode #season-current a, .episode #season-previous a { /* This is replicated in the ad box section below! */
	display: block;
	min-height: 145px;
	text-indent: -10000px;
	border: 1px solid #8b8b8b; }
.episode #season-current a {
	background: transparent url(../img/ads/season-current.jpg) no-repeat center center; }
.episode #season-previous a {
	background: transparent url(../img/ads/season-previous.jpg) no-repeat center center; }

/* 4.7 Download page. */
#freebies {
	margin: 1em 0; }
#freebies li ul li {
	line-height: 1.5;
	padding-left: 10px; }
#freebies h3, #freebies h4 {
	cursor: pointer; }
#freebies h3 {
	margin-top: 1em; 
	font-size: 1.2em;
	font-weight: bold;
	padding-left: 15px;
	background: #e1e5e1 url(../img/episodes/arr-right.png) no-repeat 5px center;
	border: 1px solid #8b8b8b; }
#freebies h4 {
	margin-top: .5em;
	font-size: 1.1em;
	color: #333;
	padding-left: 15px;
	background: #fff url(../img/episodes/arr-right.png) no-repeat 3px center;
	font-weight: bold; }
#freebies h3.open {
	background: #e1e5e1 url(../img/episodes/arr-down.png) no-repeat 2px center; }
#freebies h4.open {
	background: #fff url(../img/episodes/arr-down.png) no-repeat left center; }

.download .span5 p {
	margin: 1em 0; }
.download ul.downloads, .download ul.videos {
	padding: 5px 0 5px 32px;
	margin-left: 5px;
	border-left: 1px solid #eee; }
.download ul.downloads {
	background: transparent url(../img/episodes/icon-doc.gif) no-repeat 8px 2px; }
.download ul.videos {
	padding-top: 5px;
	background: transparent url(../img/episodes/icon-vid.gif) no-repeat 8px 2px; }

.download #info img, .search #info img {
	margin-top: 18px; }
	
/* 4.8: Sign-in page. */
.signin {
	padding: 2em 0;
	font-size: 1.2em; }
.signin p, .signin li {
	line-height: 1.4;
	margin: 1em auto; }
.signin p.error {
	font-weight: bold;
	color: #c00; }
.signin input {
	margin-left: 10px; }
.signin #signin-submit {
	position: absolute; }
.signin ul {
	margin: 1em 0 1em 3em;
	list-style: disc; }	
.signin ul li {
	margin: .5em 0; }
	
/* 4.9: Schedule page. */
.schedule img {
	margin: 1em 0; }
.schedule p {
	margin: .3em 0 1em 0; }
.schedule h3 {
	color: #ff5a09;}
.schedule #showtime-info h3 {
	font-size: 1.6em;
	font-weight: normal;
	margin: 1em 0 0 0;}
.schedule #form {
	margin-top: 10px; }
.schedule form fieldset {
	position: relative;
	padding: 12px;
	border: 1px solid #8b8b8b; }
.schedule form fieldset legend {
	padding: 0 2px;
	font-weight: bold;
	color: #8b8b8b; }
.schedule form fieldset a {
	font-size: 90%; 
	margin-left: 5px; }
.schedule table {
	border: 1px solid #8b8b8b;
	margin-bottom: 1em; }
.schedule table td {
	padding: 2px 5px; }
.schedule table th {
	padding: 2px 3px;
	font-weight: bold;
	background-color: #c9d7ca;
	border-bottom: 1px solid #fff; }
.schedule #canadian {
	padding: 12px;
	background-color: #f2f2f2;
	border: 1px solid #8b8b8b;	
	border-top: none;
	display: none; }
.schedule .newstation td {
	border-top: 1px solid #ccc; }
.schedule .even td {
	background-color: #e1e5e1; }
.schedule span.help{
	display: inline-block;
	margin-left: 5px; 
	width: 11px;
	height: 11px; }
.schedule table tr th span.help {
	background: transparent url(../img/schedule/help.png) no-repeat; }
.schedule p span.help {
	background: transparent url(../img/schedule/help-white.png) no-repeat; }
.schedule .hover {
	width: 160px;
	font-weight: normal; 
	position: absolute;
	background-color: #e1e5e1;
	border: 1px solid #8b8b8b;
	padding: 5px; }
.schedule #sidebar img {
	border: 1px solid #8b8b8b; }

/* 4.10: Legal pages. */
.legal ol, .legal ul, .legal p {
	margin: 1em 0; }
.legal ol, .legal ul {
	margin-left: 3em;
	list-style-position: inside; }
.legal ol {
	list-style: disc; }
.legal ul {
	list-style: decimal; }
.legal h3 {
	margin-top: 1em; }
.legal address {
	margin: .5em 3em; }
	
/* 4.11: Underwriters page. */
.underwriters .more {
	display: none; }
.underwriters h2 {
	margin: 1em 0; }
.underwriters .span5 p {
	margin-bottom: 1em; }
	
/* 4.12: Ad and product boxes (may span several pages) */
#ad-etips, #ad-woodsmith {
	margin-top: 14px; }
#ad-etips a, #ad-woodsmith a {
	display: block;
	min-height: 145px;
	text-indent: -10000px;
	border: 1px solid #8b8b8b; }
.span2#ad-etips a {
	background: #ff8500 url(../img/ads/etips-2col.gif) no-repeat center center; }
.span2#ad-woodsmith a {
	background: #fff url(../img/ads/woodsmith-2col.jpg) no-repeat center center; }
.span4#ad-woodsmith a {
	background: #fff url(../img/ads/woodsmith-4col.jpg) no-repeat center bottom; }
#products h3 { 
	text-transform: uppercase;
	font-size: 1.1em;
	line-height: 14px; }
#products #product-list {
	float: left;
	border: 1px solid #8b8b8b;
	height: auto !important;
	height: 145px;
	min-height: 145px; }
#products #product-list .product {
	float: left;
	width: 100px;
	text-align: center;
	padding: 12px; }
#products #product-list .product p {
	line-height: 1.2;
	padding: .2em 0 0 0;
	margin: 0; }

/* 4.13: Search page. */
.search .span5 p {
	margin: 1em 0; }
.search .span5 h3 {
	margin-top: 1em; 
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px 0 5px 32px; }
.search h3.downloads {
	background: #fff url(../img/episodes/icon-doc.gif) no-repeat left center; }
.search h3.videos {
	background: #fff url(../img/episodes/icon-vid.gif) no-repeat left center; }
.search ul {
	margin: .3em 0 1em 3em; }
.search ul li {
	margin: .5em 0; }

	
/* 4.14: One-off pages. */
.extra #flash {
	margin: 0 auto;
	text-align: center; }
	
/* -------------------------------------------------- */
	
/* 5: Footer. */
#footer {
	position: relative;
	clear: both;
	text-align: center;
	padding: 12px 0 32px 0;
	width: 842px;
	margin-left: -31px;
	background: transparent url(../img/shadow_bot.jpg) no-repeat center bottom; }
#footer ul {
	width: 767px;
	margin: 0 auto;
	padding: 3px 0;
	font-size: 1.2em;
	background-color: #e1e5e1;
	border: 1px solid #8b8b8b;
	padding-left: 11px; }
#footer ul li {
	color: #50281d;
	display: inline; }
#footer ul li a {
	text-decoration: none;
	color: #50281d;
	padding-right: 6px;
	margin: 3px 5px 3px 0;
	line-height: 1.2;
	border-right: 1px solid #50281d; }
#footer ul li a:hover {
	text-decoration: underline; }