/*----------------------------
		The Healthier Me
		© Copyright Mike Stickel
		
		Colours:
			link blue #359ad0
			nav bg yellow #f3efe3
			nav grey #918d8c
------------------------------*/
/* reset */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/*----- On with the styles -----*/
html		{ background: url(/images/bg-top.gif) repeat-x 0 0; min-height: 100%; }
body		{ background: url(/images/bg-body.jpg) no-repeat 40% 0; font: 12px/15px "Lucida Grande", Helvetica, sans-serif; margin-top: 7px; padding-top: 30px; }

#container	{ background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(#f0edde), to(#fff), color-stop(0.7, #fff)); min-height: 100%; margin: 0 auto; padding: 0 0 1em; position: relative; width: 1000px; }
#container:after, #main:after, #sidebar .ad_spot:after	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#main			{ float: left; padding: 0 20px 0 30px; width: 547px; }

/*----- Typography -----*/
h1, h2,		
h3, h4, h5, .nav	{ font-family: "Lucida Grande", Helvetica, Arial, sans-serif; }
h1, h3 		{ font-weight: 600; }
h1,
.header.main #logotype	{ line-height: 1.1; font-size: 2.0833em; margin: 0.72em 0 0; }
h2,
#main .header h1	{ color: #2895d6; line-height: 1.2; font-size: 1.666em; font-weight: 900; margin: 0 0 0.25em; }
h3			{ color: #2895d6; line-height: 1.2; font-size: 1.5em; margin: 0; padding: 0.75em 0 0.25em; }
h4			{ color: #000; line-height: 1.3; font-size: 1.333em; font-weight: bold; margin: 0 0; padding: 0.75em 0 0.25em; }
h5			{ color: #000; line-height: 1.5; font-size: 1em; font-weight: bold; font-style: italic; margin: 0 0; }
p			{ line-height: 1.5; margin: 0 0 1.5em; }

strong	{ font-weight: bold; }
em		{ font-style: italic; }
ul, ol	{ margin: 0 0 1.5em; }
ul li,
ol li 	{ line-height: 1.5; }
ol		{ list-style: decimal; }
li ul,
li ol	{ margin-bottom: 0; }
ul.disc { list-style: disc outside; margin: 0 2em 1.5em 0; }
ul.square	{ list-style: square outside; margin: 0 2em 1.5em 0; }

a			{ color: #d9800b; text-decoration: none; }
a:hover		{ border-bottom: 1px solid #d8970d; }
#main a			{ color: rgb(212,72,25); text-decoration: none; }
#main a:hover		{ border: none; color: rgb(0,121,194); text-decoration: underline; }

#main h1	{ border-bottom: 1px solid #d2d1cd; padding: 0 0 0.2em; }

blockquote	{ border-left: 2px solid rgb(210,210,210); color: rgb(100,100,100); font-style: italic; margin: 0 4em 1.5em 1.5em; padding-left: 0.5em; }

/*----- main header -----*/
.header.main	{ margin: 0 auto; width: 1000px; }
.header.main #logotype				{ margin: 0 0 13px; }
.header.main a#title-healthierme	{ background: url(/images/logo-healthierme.png) no-repeat 0 0; height: 48px; width: 420px; zoom: 1; }
.header.main a#title-healthierme:hover { border-bottom: none; }
.header.main .tagline	{ background: #2c8ecb; background: #2c8ecb -webkit-gradient(linear, left top, left bottom, from(#0b6ea5), to(#2b8dcc), color-stop(0.5, #1b7eb7)); border-top: 1px solid #bad4e5; color: #fff; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; line-height: 2.5; margin: 0; padding: 0 8px 0 1em; zoom:1; }

/*----- section header -----*/
#main .header.section p		{ color: #2895d6; border-bottom: 1px solid #d2d1cd; font: 900 1.666em/1.2 "Lucida Grande", Helvetica, Arial, sans-serif; margin: 0; padding: 0 0 0.2em; }

/*----- main footer -----*/
.footer.main					{ margin: 1.5em auto 0; text-align: center; width: 1000px; }
.footer.main .footer_nav:first-child	{ margin-bottom: 0.25em; }
.footer.main .item				{ border-left: 1px solid #d2d1cd; display: inline; padding: 0 0.5em; }
.footer.main .item:first-child	{ border: none; }
.footer.main .pages				{ margin-bottom: 0; }

/*----- misc classes -----*/
.right		{ float: right; }
.left		{ float: left; }
.clear-left	{ clear: left; }
.clear-right	{ clear: right; }
.clear 		{ clear: both; }
.shadow		{ box-shadow: rgba(0,0,0,0.4) 0 0 4px; -webkit-box-shadow: rgba(0,0,0,0.4) 0 0 4px; -moz-box-shadow: rgba(0,0,0,0.4) 0 0 4px; }
.rounded	{ border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -khtml-border-radius: 6px; -ms-border-radius: 6px; }
.block		{ display: block; }
.small		{ font-size: 70%; font-weight: normal; }
.last		{ margin-bottom: 0; }
.muted		{ color: #555; }

.replaced		{ display: block; height: 10px; overflow: hidden; outline: none; text-indent: -9999px; width: 10px; }
.double_space	{ line-height: 3; }
.byline		{ color: rgb(117,116,130); font-style: italic; }
.last		{ margin-bottom: 0; }

.box_half				{ float: left; width: 48%; }
.box_half + .box_half 	{ float: right; }
.box_thirds				{ float: left; margin-right: 3%; width: 31%; }
.box_thirds:last-child,
.box_thirds.last	{ float: right; margin-right: 0; }

.legal { color: #666; font-size: 80%; }
.legal,
#main .article ul.legal,
.product #main .article ul.legal { list-style: none; }

/*----- flashes -----*/
.notice, .error		{ display: block; margin: 0 0; padding: 1em; }
.notice		{ background: rgba(43,141,204,0.3); border: 1px solid rgb(11,110,65); }
.error		{ background: red; }

/*----- forms -----*/
legend				{ font-size: 150%; padding: 0.5em 0 1em; }
label.checkbox		{ display: inline; padding-left: 0.3em; }
form .help			{ color: #777; font-size: 80%; }
button,
.button			{ background: #fff -webkit-gradient(linear, left top, left bottom, from(rgba(180,180,180,0.2)), to(rgba(30,30,30,0.1)), color-stop(0.8,rgba(30,30,30,0.3))); border: 1px solid rgb(180,180,180); cursor: pointer; padding: 0.5em 1em; }
button:hover,
.button:hover	{ background: #fff -webkit-gradient(linear, left top, left bottom, from(rgba(30,30,30,0.1)), to(rgba(180,180,180,0.2)), color-stop(0.2,rgba(30,30,30,0.3))); }

#main form .add_one		{ color: #000; float: right; margin-right: 3%; padding: 0 0.4em; text-shadow: #fff 0 1px 0; }
#main form .remove_one	{ color: #000; float: right; padding: 0 0.5em; text-shadow: #fff 0 1px 0; }
#main form .add_one:hover,
#main form .remove_one:hover	{ border: 1px solid rgb(180,180,180); text-decoration: none; }

/*----- sidebar -----*/
#sidebar	{ background: #f3efe3 url(/images/bg-sidebar-border-top.gif) repeat-x 0 0; float: right; margin-right: 20px; padding: 12px 26px 18px; position: relative; top: -5em; width: 270px; }
#sidebar .nav	{ border-bottom: 1px solid #fff; margin: 0 -26px; width: 322px; }
#sidebar .nav .nav_item	{ border-bottom: 1px solid #c9caba; font-size: 1.333em; }
#sidebar .nav a						{ border-top: 1px solid #fff; color: #918d8c; display: block; padding: 0.5em 0; text-align: center; -webkit-transition: color 0.2s ease-in-out; }
#sidebar .nav .nav_item.with_sub	{ border-top: 1px solid #fff; color: rgba(145,141,140,0.6); display: block; padding: 0 0 0.5em; text-align: center; -webkit-transition: color 0.2s ease-in-out; }
#sidebar .nav a:hover { border-bottom: none; color: #359ad0; -webkit-transition: color 0.4s ease-in-out; }


/*-- sub nav --*/
/*----- nav selected states -----*/
#notebook .nav #sn-notebook a,
.about .nav #sn-about a,
.product .nav #sn-catalog a,
#sidebar .nav .nav_item.active a
 { color: #359ad0; font-weight: bold; }

#sidebar .nav .nav_item .sub_nav a { border: none; color: #918d82; font-size: 0.8333em; font-weight: normal; line-height: 1; margin: 0 2em; -webkit-transition: all 0.3s ease-in-out; }
#sidebar .nav .nav_item .sub_nav:first-child { margin-top: -0.5em; }
#sidebar .nav .nav_item .sub_nav a:hover { background: rgba(194,191,182,0.2); color: #000; -webkit-transition-property: color, background; -webkit-transition-duration: 0, 0.3s; -webkit-transition-delay: 0.3s 0; -webkit-transition-timing-function: ease-in-out, ease-in-out; }
#sidebar .nav .nav_item .sub_nav.active a  { background: rgba(194,191,182,0.8); color: #000; }

#sidebar h3			{ border-bottom: 1px solid #d2d1cd; border-width: 0 0 2px 0; -webkit-border-image: url(/images/divider-inset.gif) 0 0 5 0 stretch stretch; margin-bottom: 0.75em; }
#sidebar .twitter 	{ border: 1px solid #000; background: #fff; padding: 1.5em; }
#sidebar .twitter .tweet_time { display: block; margin-top: 1em; }

#sidebar #title-twitter		{ background: url(/images/title-twitter.png) no-repeat 0 0.75em; height: 20px; width: 100%; }
#sidebar #title-sponsors	{ background: url(/images/title-sponsors.png) no-repeat 0 0.75em; height: 20px; width: 100%; }

/* -- footer subnav -- */
.footer.main .item .subnav	{ display: inline; }
.footer.main .item .subnav .item a	{ border-left: 1px solid #d2d1cd; padding: 0 0.15em; }
.footer.main .item .subnav .item:first-child a	{ border-left: none; }

/*----- Sidebar ads -----*/
#sidebar .sponsors a									{ border: none; text-decoration: none; }
#sidebar .sponsors .ad_spot 					{ float: left; height: 93px; margin: 0 0 10px; position: relative; width: 129px; }
#sidebar .sponsors .ad_spot.right 		{ float: right; margin-right: 0; }
#sidebar .sponsors .ad_spot a 				{ background: #000; display: block; height: 100%; opacity: 0.5; overflow: hidden; position: absolute; top: 0; left: 0; width: 129px; z-index: 0;
																				-webkit-transition: all 0.4s ease;
																				-webkit-box-shadow: none;
																			}
#sidebar .sponsors .ad_spot .caption	{ color: #bbb; font-size: 80%; line-height: 1.3; padding: 0.8em; position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; }
#sidebar .sponsors .ad_spot img { position: relative; z-index: 1; }
#sidebar .sponsors .ad_spot a:hover 	{ opacity: 1; height: 152%; width: 163px; z-index: 2; -webkit-box-shadow: rgba(0,0,0,0.8) 1px 0 5px; -moz-box-shadow: rgba(0,0,0,0.8) 1px 0 5px; }

/*----- adsense -----*/
.sidebar_adsense		{ margin-right: 15px; position: absolute; top: 140px; left: -175px; }

/*----- excess -----*/
.excess				{ height: 286px; position: absolute; top: -36px; width: 7px; }
.excess.left-side	{ background: url(/images/shadow-left.png) no-repeat 0 0; left: -7px; }
.excess.right-side	{ background: url(/images/shadow-right.png) no-repeat 0 0; right: -7px; }
#sidebar .excess.left-side	{ background-image: url(/images/shadow-left-small.png); top: 0; }
#sidebar .excess.right-side	{ background-image: url(/images/shadow-right-small.png); top: 0; }