/* 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; }
#flashcontainer {
	width:704px;
	margin:0 auto;}
.hide {
	display: none; }
.small {
	font-size: 80%; }
.success {
	background: #E3F0DB;
	border: 1px solid #356430; }
.error {
	background: #FADED3;
	border: 1px solid #F69567; }
#wrap {
	position: relative;
	width: 780px;
	margin: 0 auto;
	padding: 45px 27px 0 27px;
	background: #fff url(../images/layout/wrap-bg.png) repeat-y; }
.button {
	display: inline-block;
	line-height: 1;
	padding: 2px 7px 3px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	/*margin-top: 5px;*/
	background-color: #fcc62f;
	border: 2px solid #fff;
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	border-radius: 7px;
	cursor: pointer; }
.button:hover {
	background-color: #e1a718; }
input.button {
	padding: 2px 8px 2px; }
@-moz-document url-prefix() { /* Firefox hack for bottom padding on inputs that are impossibly dumb */
	.button {
		padding: 4px 8px 3px; }
    input.button {
        padding: 1px 8px 1px; } }

/* 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: 55px;
	right: 0px;
	width: 240px;
	/*margin-left: 528px;*/
	padding: 10px 0 0 0;
	background: url(../images/layout/online-extras-icon.png) no-repeat transparent 100px 0px;
	/*background: transparent url(../images/layout/nav-bg-dots.png) repeat-y;*/ }
#banner #nav li {
	height:28px;
	margin: 0; }
#banner #nav li a {
	font-size: 130%;
	font-weight: normal;
	color: #fff;
	text-decoration: none; }
#banner #nav li a:hover {
	text-decoration: underline; }
#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, #enotes #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. */
div#slideshow {
	height: 315px; 
	position:relative;
	width:100%; }
ul#tabs  {
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	bottom:0;
	left:190px;
	z-index:101;}
ul#tabs li {
	float:left;
	height:21px;}
ul#tabs li a {
	background:#e7dbc5;
	border-top:solid 1px #b9ac9f;
	border-right:solid 1px #b9ac9f;
	border-left:solid 1px #b9ac9f;
	color:#000;
	margin:0 8px 0 0;
	padding:6px 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px; 
	text-decoration:none;
	-webkit-box-shadow: 1px -1px 1px 0px #999;
	-moz-box-shadow: 1px -1px 1px 0px #999;
	box-shadow: 1px -1px 1px 0px #999;  }
ul#tabs li a:hover {
	font-weight:bold;
	padding-top:10px;}
div.tanBar {
	background-color:#f7f3ec;
	border-top:solid 1px #b9ac9f;
	border-bottom:solid 1px #b9ac9f;
	height:23px;
	opacity:.8;
	position:absolute;
	bottom:0;
	z-index:100;
	width:100%;}
div.tanBar p {
	padding:3px 0 0 10px;
	font-style:italic;}
.jshowoff-controls{
	bottom:3px;
	height:18px;
	width:79px;
	right:70px;
	position:absolute;
	z-index:101;}
a.jshowoff-play  {
	color: #666; 
	text-decoration:none;}
a.jshowoff-prev {
	background:url(/images/layout/homepage/arrows.png) no-repeat transparent;
	float:left;
	height:18px;
	margin-right:10px;
	width:10px;
	text-indent:-9000px;}
a.jshowoff-next {
	background:url(/images/layout/homepage/arrows.png) no-repeat top right transparent;
	float:right;
	height:18px;
	margin-left:10px;
	width:10px;
	text-indent:-9000px;}
#home #flasharea {
	background-color: #eee;
	margin-bottom: 6px;
	height: 315px; }
#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 {
	color:#ff6600;
	font-size: 20px;
	line-height:20px;
	margin: 0 0 12px 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; }
div#slideshow {
	height:315px;
	margin-bottom:8px;
	width:780px;}
	
	
/* 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 125px; }
#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 a {
	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 #enotes-box { }
#home #enotes-box .box-contents {
	background: #eaedea url(../images/layout/homepage/enotes-ipad.png) no-repeat left;
	padding:5px 5px 0 130px; }
#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 a {
	margin: 5px 0 0 40px; }
#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;
	margin: 12px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #ccc; }
#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; }
div.archiveYear {
	border: solid 1px #ccc;
	margin-bottom:8px;
	position:relative;}
div.archiveYear h3 {
	font-size:28px !important;
	font-weight:normal !important;
	line-height:30px;
	margin:0 !important;
	padding:0;
	position:absolute;
	top:10px;
	left:20px;}
div.archiveYear ul {
	list-style:none !important;
	padding-left:395px;
	margin:0 !important;}
div.archiveYear ul li {
	margin-bottom:8px;
	padding:0 0 0 25px;}
div.archiveYear ul li.pdf {
	background:url(/images/layout/extras/icon_pdf.png) no-repeat transparent;}
div.archiveYear ul li.slideshow {
	background:url(/images/layout/extras/icon_slideshow.png) no-repeat transparent;}
div.archiveYear ul li.video {
	background:url(/images/layout/extras/icon_video.png) no-repeat transparent;}
div.archiveIssue {
	padding:10px 0;
	position:relative;}
div.archiveIssue h4 {
	font-size:18px;
	position:absolute;
	top:10px;
	left:200px;}
.greenbg {
	background-color:#f1f8e7;}

/* 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 #flasharea {
	background-color: #eee;
	margin-bottom: 6px;
	/*height: 384px;*/ }
#about #right-image { float: right; margin:0; }
#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; }
	
/* eNotes Page Styling */

#enotes #flasharea {
	margin-bottom: 6px;
	/*height: 384px;*/ }
#enotes #right-image {
	background: url(/images/layout/enotes/sidebar-bg.jpg) no-repeat;
	float: right;
	margin: 0;
	width: 196px;
	height: 294px;
	padding: 10px; }
#enotes #right-image ul {
	list-style-image: url(/images/layout/enotes/bullet-check.png);
	color: #666;
	font-size: 16px; }
#enotes #right-image li {
	margin-bottom: 10px; }
#enotes #contact-section, #headboard #contact-section {
	margin: 40px 0 0 -10px;
	border-left: 1px solid #ccc;
	padding-left: 5px; }
#enotes #contact-section dt, #headboard #contact-section dt {
	margin-top: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: #583021; }
#enotes #contact-section dd, #headboard #contact-section dd {
	margin-left: 10px; }
#enotes #content {
	position: relative;}
#enotes #subscribe {
	width: 290px;
	position: absolute;
	left: -10px;
	top: 80px; }
#enotes #subscribe form {
	margin-top: 50px;
	padding-left: 10px; }
#enotes #subscribe label {
	font-weight: bold; }
#enotes #tips {
	width: 500px;
	float: right; }
#enotes h2 {
	color: #666; }
#enotes label {
	line-height: 30px}
#enotes .button {
	margin-left: 50px; }
#enotes .subscribe-message {
	position: absolute;
	width: 210px;
	z-index: 5;
	display: hidden; }
#enotes .tip {
	background: url(../images/layout/enotes/tip-shadow.png) transparent no-repeat top left;
	width: 244px;
	float: left;
	padding: 1px;
	margin-bottom: 20px; }
#enotes .tip a img {
	margin-bottom: 8px; }
#enotes .tip .details img {
	float: left;}
#enotes .tip .details h3 {
	display: inline;
	padding: 0;
	margin-left: 5px;
	line-height: 22px;}
#enotes .tip .details p {
	margin: 0;}
#enotes .tip .details a {
	float: right;
	margin-right: 10px;}
#enotes .TB_overlayBG {
	-moz-opacity: 0.6;
	opacity: 0.6; }

	
/* 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;
	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: right;
	margin: 0 25px 0 0;
	text-align: right; }
/* -------------------------------------------------- */