/* My Home My Style 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: top; }
: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; }
img { behavior: url(/scripts/iepngfix.htc) } // Hack for IE6 PNG support.
.clear {
	clear: both; }
.clearleft {
	clear: left; }
.hide {
	display: none; }
.small {
	font-size: 80%; }
#wrap {
	position: relative;
	width: 780px;
	margin: 0 auto;
	padding: 45px 27px 0 27px;
	background: #fff url(../images/layout/wrap-bg.png) repeat-y; }

/* 2.2: Grid/column classes. 
   6 columns total. Each column is 120px wide with a 12px gutter. */
.col {
	float: left; }
.gutter {
	margin-right: 12px; }
.span1 {
	width: 120px; }
.span2 {
	width: 252px; }
.span3 {
	width: 384px; }
.span4 {
	width: 516px; }
.span5 {
	width: 648px; }
.span6 {
	width: 780px; }
.gap {
	margin-top: 8px; }
/* -------------------------------------------------- */
	
/* 3: Banner, global nav positioning and top nav layout. 
   3.1 General banner styles. */
#global-nav {
	position: absolute;
	top: 24px;
	left: 27px; }
#banner {
	width: 780px;
	height: 110px;
	background: #a0c36f url(../images/layout/banner-bg.png) repeat-x; }
#banner h1 a {
	text-indent: -100000px;
	display: block;
	width: 365px;
	height: 105px;
	margin-left: 20px;
	background: transparent url(../images/layout/banner-logo.png) no-repeat; }
#banner #nav {
	position: absolute;
	top: 45px;
	right: 0px;
	width: 252px;
	margin-left: 528px;
	padding: 20px 0 0 0;
	background: transparent url(../images/layout/nav-bg-dots.png) repeat-y; }
#banner #nav li {
	margin: 0 0 .5em 20px; }
#banner #nav li a {
	font-size: 130%;
	font-weight: bold;
	color: #fff;
	text-decoration: none; }
#banner #nav li a:hover {
	color: #ddd; }
#banner #nav li a.active {
	color: #972681; }
#banner a#customer-service {
	position: absolute;
	width: 200px;
	text-align: right;
	top: 27px;
	left: 607px; 
	font-size: 130%;
	color: #999;
	font-weight: bold;
	text-decoration: none; }
#banner a#customer-service:hover {
	text-decoration: underline; }

/* 3.2 Homepage-specific banner styles. */
#home #banner, #about #banner, #headboard #banner, #videos #banner {
	height: 105px; }	
	
/* -------------------------------------------------- */
	
/* 4: Main Content Area. 
   4.1: General main styles. */
#main {
	font-size: 120%;
	line-height: 1.4em; }
#main h2 {
	font-size: 140%;
	color: #f60;
	margin: 1em 0;
	font-weight: bold; }
#main h3 {
	font-size: 120%;
	margin: 1em 0;
	font-weight: bold; }
#main p {
	margin: 1em 0; }
#main cite {
	font-weight: bold;
	font-style: italic; }
#main ol {
	margin: 1em 0 1em 3em;
	list-style: decimal; }
#main ul {
	margin: 1em 0 1em 3em;
	list-style: disc; }
#main blockquote {
	margin: 1em 0 1em 1em;
	border-left: 1px solid #999;
	padding-left: 1em; }
#main img.cover {
	padding: 0 5px 5px 0;
	background: transparent url(../images/layout/shadow.png) no-repeat bottom right; }	

/* 4.2 Homepage-specific main area styles. */
#home #flasharea {
	background-color: #eee;
	margin-bottom: 6px;
	height: 315px; }
#about #flasharea {
	background-color: #eee;
	margin-bottom: 6px;
	height: 384px; }
#headboard #flasharea {
	background-color: #eee;
	margin-bottom: 6px;
	height: 421px; }
#home h2 {
	font-size: 100%;
	color: #000;
	margin: 0;
	height: 20px;
	text-align: center;
	font-weight: bold;
	line-height: 20px;
	background: #b7d69f url(../images/layout/homepage/box-header-bg.png) repeat-x top; }
#home h3 {
	font-size: inherit;
	margin: 0; }
#home p {
	margin: 0; }
#home ul {
	list-style: none; }
#home .span3 {
	height: 192px;
	overflow: visible; }
#home .box-contents {
	height: 167px;
	padding: 5px 5px 0 5px; }
#home .box-contents ul {
	margin: .75em 0 0 170px;
	padding: 0; }
#home .box-contents li {
	margin: 0 0 .5em 0; }
	
	
/* Homepage Boxes Stuff */	

#home #sub-box {
	background-color: #eaedea; }
#home #sub-box h3 {
	text-indent: -100000px;
	height: 65px;
	margin-left: 105px;
	background: transparent url(../images/layout/homepage/free-preview.png) no-repeat 0 5px; }
#home #sub-box ul {
	margin: 15px 0 0 105px; }
#home #sub-box ul li {
	margin-bottom: 0px;
	position:relative;
	z-index:100; }
#home #sub-box .box-contents {
	position: relative; }
#home #sub-box img#cover-sib {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index:5; }
#home #sub-box img#cover-magazine {
	position: absolute;
	top: 33px;
	left: 15px;
	z-index:10; }
#home #extras-box {
	background-color: #ebe2d1; }
#home #extras-box img {
	margin: 5px 0 0 45px; }
#home #extras-box h3 {
	padding: 12px 0;
	text-indent: -100000px;
	height: 40px;
	margin-left: 15px;
	background: transparent url(../images/layout/homepage/extras.png) no-repeat 0 2px; }
#home #extras-box p {
	margin-left: 10px; }
#home .cover {
	float: left;
	margin: 0 20px 12px 0;  }
#home #service-box {
	background: #ebe2d1 url(../images/layout/homepage/service.gif) no-repeat bottom right; }
#home #video-box {
	background: transparent url(../images/layout/homepage/videos.png) no-repeat bottom left; }
#home #video-box a {
	display:block;
	height: 160px;
	width: 240px; }
#home #advisory-box {
	background-color: #eaedea; }
#home #advisory-box h3 {
	text-indent: -100000px;
	height: 60px;
	margin-left: 10px;
	background: transparent url(../images/layout/homepage/advisory.png) no-repeat 0 5px; }
#home #advisory-box p {
	margin: 5px 20px 0 40px; }
#home #advisory-box img {
	margin: 10px 0 0 45px; }
#home .juice p {
	margin-bottom: 10px;
	padding-right: 40px; }
#home #juiceSidebar h4 {
	font-size: 18px;
	margin-top: 20px; }
#home #juiceSidebar ul li {
	margin-bottom: 10px;
	list-style-image: url(/images/layout/homepage/dot.gif);
	font-size: 14px; }
	
/* 4.3 Extras page styling. */

#extras h2 {
	height: 18px;
	text-indent: -100000px;
	margin: 12px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #ccc;
	background: transparent url(../images/layout/extras/online-extras.png) no-repeat; }
#extras .extralist h3 {
	font-size: 110%;
	font-weight: bold; }	
#extras .extralist img {
	float: left;
	margin: 0 12px 1em 0; }
#extras .extralist ul {
	color: #00c;
	margin: .5em 0 .5em 130px; }
#extras .extralist ul.headboard {
	margin: -10px 0 .5em 40px; !important }
#extras .extralist ul li {
	margin: .4em 0; }
#extras #sidebar p {
	line-height: 1.2;
	font-weight: bold;
	margin: 0 0 0 12px; }
#extras #sidebar img.cover {
	margin: 1em 0 0 12px; }


/* 4.3 Customer Service form styling. */

#service label {
	margin-top: 1em;
	font-weight: bold;
	text-align: right; }
#service input, #service textarea {
	margin-top: 1em; }
#service textarea {
	height: 100px; }
#service form p {
	clear: left; 
	margin-left: 132px; }


/* 4.4 "About" and "Headboard" page styling. */

#about #contact-section, #headboard #contact-section {
	margin: 40px 0 0 -10px;
	border-left: 1px solid #ccc;
	padding-left: 5px; }
#about #contact-section dt, #headboard #contact-section dt {
	margin-top: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #583021; }
#about #contact-section dd, #headboard #contact-section dd {
	margin-left: 10px; }
#about label, #headboard label, #advisory-board label {
	display: block;
	height: 20px;
	line-height: 2.5em;
	margin-bottom: 8px; }
#about input, #headboard input, #advisory-board input {
	display: block;
	height: 1.25em;
	margin-bottom: 8px; }
#about input.long, #headboard input.long, #advisory-board input.long {
	width: 95%; }
#about input#continue, #headboard input#continue, #advisory-board input#signup {
	height: auto; }
	
/* Videos Page Styling */
#videos #recentVideos {
	background: #cbc5b2 url(/images/layout/videos/recentbg.png) repeat-x top;
	margin: 0 0 10px;
	padding: 10px 0; }
#videos #recentVideos h2 {
	color: #000;
	font-size: 15px;
	margin: 0 0 5px 10px;
	text-transform:uppercase; }
#videos #recent {
	float:left;
	margin-left: 8px; }
#videos #recent img {
	border: 1px solid #fff; }
#videos #recent h3 {
	margin:2px 0 0; }
#videos #videoThumb {
	position:relative;
	margin-top: 10px; }
#videos #videoThumb img.thumb {
	float:left;
	margin-right: 20px; }
#videos #videoThumb .date {
	font-size: 15px;
	margin:0; }
#videos #videoThumb h3 {
	margin: 2px 0 5px;
	font-size: 15px;
	width: 290px;  }
#videos #videoThumb p {
	width: 290px; }
#videos #videoThumb #caption {
	float: left; }
	


/* -------------------------------------------------- */
	
/* 5: Footer.  */

#footer {
	padding: 2em 0 40px 0;
	font-size: 120%;
	clear: both;
	width: 834px;
	margin: 0 0 0 -27px;
	background: transparent url(../images/layout/wrap-bottom.png) no-repeat bottom; }
#footer a {
	color: #666;
	text-decoration: none; }
#footer a:hover {
	text-decoration: underline; }
#footer ul {
	float: left;
	width: 357px;
	margin-left: 27px;
	margin-right: 12px; }
#footer ul li {
	float: left; 
	margin-right: 6px;
	border-right: 1px solid #999; }
#footer ul li#terms {
	border-right: 0px none; }
#footer ul li a {
	padding: 0 6px 0 0; }
#footer p {
	float: left;
	width: 384px;
	margin: 0;
	text-align: right; }
/* -------------------------------------------------- */