/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		EM styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
---------------------- */
html {
	padding: 0;
	margin: 0;
	font-size: 100%; /* ensures font consistency across browsers */
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* correct value for IE6 */
	line-height: 1.5;
	background-color: #FFFFFF;
	color: #221E1F;
	text-align: center;/* fix IE5 bug that doesn't honor margin auto */
	font-family: Verdana, Tahoma, sans-serif;
	height: 100%;
}
html > body {
	font-size: 10px; /* correct value for non-IE6 browsers */
}
	.body-home {
		/*background: url("../images/bg/background_tile_home.jpg") 0 124px repeat-x;*/
		background: url("../images/bg/background_tile_home_alt.jpg") 0 124px repeat-x;
	}
	.body-generic {
		background: #282828 url("../images/bg/background_tile_generic.jpg") 0 0 repeat-x;
	}
	.body-products, .body-casestudy {
		background: url("../images/bg/background_tile_products.jpg") 0 124px repeat-x;
	}
	.body-childproducts {
		background: url("../images/bg/background_tile_products_onaroo.jpg") 0 124px repeat-x;
	}
p {
	padding: 0;
	margin: 0 0 1em 0;
	line-height: 1.8em;
	color: #221E1F;
}

INPUT, SELECT, TH, TD {font-size: 1em}
H1 {font-size: 2.4em}  /* displayed at 24px */
H2 {font-size: 1.8em}  /* displayed at 18px */
H3 {
	font-size: 1.5em;
	margin: 0;
	margin: 0 0 0.5em 0;
}
H4 {
	font-size: 1.25em;
	color: #FFFFFF;
	margin: 0 0 0 0;
}
H5 {
	font-size: 1.2em;
	margin: 0;
	margin: 0 0 0.5em 0;
}

img, a img {
	border: none;
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	/*position: relative;*/
	margin: 0px auto;
	padding: 0 0 0em 0;
	width: 770px;
	text-align: left; /* unfix all other browsers from the IE fix in the body tag above */
	height: auto !important; /* for footer-stick */
	height: 100%; /* for footer-stick */
	min-height: 100%; /* for footer-stick */
}

	/* Skip link(s) */
	#skiplink a {
		position : absolute;
		top : -1000px;
		left : -2000px;
	}
	
	#skiplink a:focus, #skiplink a:active {
		position : absolute;
		margin : 0;
		top : 0;
		left: 0;
		display : block;
		padding : 0;
		background: #000;
		color : #fff;
		font-weight: bold;
	}
	
	#skiplink a:hover { 
	}
		
/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	clear: both;
	width: 100%;
	height: 124px;
}
	#branding-logo {
		cursor: pointer;
		width: 129px;
		height: 85px;
		float: right;
		margin: 16px 17px 0 0;
		padding: 0;
	}
		#branding-logo h1 {
			margin: 0;
			text-indent: -5000px;
			overflow: hidden;
			background: url("../images/branding/logo_whitebg.jpg") left top no-repeat;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0; /* Neutralize h1's default behavior */
		}
			#branding-logo h1 a {
				display: block;
				width: 100%;
				height: 100%;
			}
	
	#branding-tagline {
		display: block;
		width: 125px;
		height: 8px;
		float: right;
		clear: right;
		margin: 5px 0 0 0;
		padding: 0;
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			background: url("../images/branding/tagline_whitebg.jpg") left top no-repeat;
			width: 100%;
			height: 100%;
			margin: 0;
		}
	#branding-product {
		display: block;
		width: 207px;
		height: 64px;
		float: left;
		clear: left;
		margin: 30px 0 0 0;
		padding: 0;
	}
		#branding-product h2 {
			text-indent: -5000px;
			overflow: hidden;
			background: url("../images/branding/logo_onaroo.gif") left top no-repeat;
			width: 100%;
			height: 100%;
			margin: 0;
		}
	#branding-info {
	}

/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
		If we're using a dropdown navigation, all the nav styles are in nav_dropdown.css
---------------------- */
#nav {
}
	#nav-main {
	}
	#nav-section {
	}
	#nav-external {
	}

/* =Content
----------------------
	Main Content styles
	Notes:
		font-size: 1em makes the text inherit size from #container, and expandable in IE
		Remember: The font is inherited, so some math will be necessary to size children up or down correctly
---------------------- */
#content {
}
	#content-main {
	}
	#content-news {
	}

/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		This is ONLY for content text. Navigation that goes on the left as a "column" is part of #nav-section
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
#content div.twoColumnLayout {
	width: 47%;
	float: left;
	display: inline; /* Fix IE double-margin bug, Fx ignores it */
	clear: none;
}
	#content div.twoColumnLeft {
		margin-right: 5% !important;
		margin-right: 3%;
	}

#content div.twoColumnLayoutLeft {
	margin: 0 30px 0 20px;
	float: left;
	clear: none;
	display: inline;
	width: 350px;
	padding: 0;
}
#content div.twoColumnLayoutRight {
	float: left;
	clear: none;
	display: inline;
	width: 350px;
	margin: 0;
	margin-bottom:20px;
	padding: 0;
}

/* Homepage background fader thingamajig */
#content .home_featured_product {
	width: 770px;
	padding-top: 23px;
	/*background: url("../images/bg/home_bg_darkfade.jpg") left top no-repeat;*/
}
#content .home_featured_product .inside_headline_bar {
	height: auto !important;
	height: 222px;
	min-height: 222px;
	margin-bottom: 12px;
}
#content .home_featured_product div.homeTwoColumnLayoutLeft .inside_headline_bar p {
	color: #C8C6C6;
}
#content .home_featured_product .inside_headline_bar  .capital-headline {
	color:#7B7B7B;
}

/* homepage headlinebar yellow text :: 4-task multitimer */
#content div.homeTwoColumnLayoutLeft H4 {
	color: #FFE733;
	font-size: 1.6em;
}
#content div.homeTwoColumnLayoutLeft .product-bio {
	height: auto !important;
	min-height: 10.5em;
	height: 10.5em;
	font-size: 1.2em;
}
#content div.homeTwoColumnLayoutLeft a, #content div.homeTwoColumnLayoutRight a {
	text-decoration: underline;
}
#content div.homeTwoColumnLayoutLeft a.button {
	text-decoration: none;
}

/* homepage more products div :: currently the neverlate */
#content div.more-products {
	margin: 0em 1em 0 0;
}
#content div.more-products h4 {
	margin-bottom: 0.8em;
	font-size: 1.35em;
	color: #696969;
}

#content div.more-products .bio {
	float: left;
	width: 165px;
	font-size: 1.1em;
	color: #666666;
	line-height: 1.4em;
	margin-top: 0.5em;
	padding: 0 5px 0 0;
}
#content div.more-products .image {
	float: left;
	width: 170px;
}

#content div.news-section {
	margin-top: 1.5em;
	padding-top: 15px;
	border-top: 1px solid #DDD;
}
#content div.news-section p {
/*
	margin: 0;
	padding: 0;
	line-height: inherit;
*/
}
#content div.news-section form {
	width: 100%;
	margin: 0;
}
/* END HOMEPAGE SECTION */

/* Products page background fader part */
#content .products_view {
	width: 770px;
	display: block;
	background: url("../images/bg/products_view_helper.gif") left top repeat-y;
}
#content .products_view .products_view_helper {
	display: block;
	width: 100%;
	background-position: left top;
	background-repeat: no-repeat;	
	background-image: url("../images/bg/products_bg_darkfade.jpg");
	position: inherit;
}
#content .products_view .inside_headline_bar {
	height: 80px;
	padding-top: 23px;
	margin-left: 20px;
	margin-right: 0;
}
#content .products_view .inside_headline_bar h3 {
	margin-top: 1em;
}
#content .products_view .inside_headline_bar .capital-headline {
	color: #7B7B7B;
}
.body-childproducts #content .products_view .inside_headline_bar .capital-headline {
	color: #FFFFFF;
}
#content .products_view .twoColumnLayoutLeft {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	width: 350px;
}
#content .products_view .twoColumnLayoutRight {
	margin-left: 40px !important;
	margin-left: 20px;
	padding-left: 0px;
	width: 380px;
}
#content .products_view .twoColumnLayoutLeft .textbox {
	margin: 0;
	padding: 1.4em 0 0.8em 20px;
	width: 100%;
	clear: both;
}
#content .products_view .twoColumnLayoutLeft .graybackground {
	background-color: #DBDBDB;
}
#content .products_view .twoColumnLayoutLeft .lightgraybackground {
	background: #E5E5E5 url("../images/bg/lightgraybox_border.gif") left top repeat-x;
}
#content .products_view .twoColumnLayoutLeft .lightgraybackground_noborder {
	background: #E5E5E5;
}
#content .products_view .twoColumnLayoutLeft .lineinmiddle {
	background-image: url("../images/bg/lineinmiddle.gif");
	background-position: top center;
	background-repeat: repeat-y;
}

#content .products_view .twoColumnLayoutLeft .textbox p {
	margin: 0;
	padding: 0.5em 10px 0.5em 0;
}
#content .products_view .twoColumnLayoutLeft .largetext p {
	font-size: 1.2em;
	color: #000000;
}
#content .products_view .twoColumnLayoutLeft ul.bulleted li {
	width: 320px;
}
#content h4.producth4 {
	font-size: 1.6em;
}
#content .product_shot {
	padding: 10px 0 30px 0;
}
#content .product_shot .product_shot_image {
	height: 420px;
	display: block;
	width: 100%;
}
#content .product_shot .product_shot_caption {
}

#content .product_more_views {
	padding: 0 0 2.5em 0px;
	margin: 0 0 2.5em 0;
}
#content .product_more_views .capital-headline {
	color: #7B7B7B;
}
#content .product_more_views .seperator {
	background-color: #CECECE;
	display: block;
	float: left;
	width: 1px;
	margin: 30px 0px;
	height: 40px;
}
#content .product_more_views a img {
}
#content .product_more_views img {
	float: left;
	clear: none;
	border: none;
}

/* PRODUCTS TAB SECTION */
.tabcontainer {
	width: 100%;
}
	.tabcontainer .tabs {
		float: left;
		clear: left;
		width: 100%;
		height: 2.0em;
		border-bottom: 1px solid #DDDDDD;
	}
		.tabcontainer .tabs span {
			display: block;
			float: left;
			font-size: 0.9em;
			line-height: 0.9em;
			color: #999999;
			padding: 0.6em 0.7em;
			background-color: #E5E5E5;
			border: 1px solid #DDDDDD;
			text-transform: uppercase;
			margin-right: 0.2em;
			cursor: pointer;
		}
		.tabcontainer .tabs span.current {
			border-bottom-color: #FFFFFF;
			background-color: #FFFFFF;
		}
	.tabcontainer .tabcontents {
		width: 100%;
	}
		.tabcontainer .tabcontents div {
			width: 100%;
			float: left;
			clear: left;
			padding: 1.5em 0;
		}
		.tabcontainer .tabcontents div ul {
		}
		.tabcontainer .tabcontents div ul li {
			width: 95%;
		}
/* END THE PRODUCTS TAB SECTION */
/* END THE PRODUCTS PAGE SECTION */

/* Case Study page styles */
#content .casestudy_view {
	width: 770px;
	padding-top: 0;
	background: url("../images/bg/casestudy_bg_darkfade.jpg") left top no-repeat;
}
#content .casestudy_view .inside_headline_bar {
	height: 80px;
	padding-top: 23px;
	margin-left: 0px;
	margin-right: 0;
}
#content .casestudy_view .inside_headline_bar h3 {
	margin-top: 1em;
}
#content .casestudy_view .inside_headline_bar .capital-headline {
	color: #7B7B7B;
}

#content .casestudy_view .twoColumnLayoutLeft {
	width: 350px;
	margin-right:30px;
}
#content .casestudy_view .twoColumnLayoutRight {
	width: 370px;
	padding: 20px 0 0 0;
/*	background-color: #4C4C4C; */
	color: #CCCCCC;
}
#content .casestudy_view .casestudy_body {
	background: url("../images/bg/casestudy_bg_tile.jpg") 400px 0 repeat-y;
}
#content .casestudy_view .twoColumnLayoutRight .grayline_sep {
	background: url("../images/bg/casestudybox_border.gif") left top repeat-x;
	margin: 1.5em 0;
	display: block;
	float: left;
	width: 100%;
	padding: 0;
	height: 2px;
	clear: both;
}
#content .casestudy_view .casestudy_picture {
	margin-left: 20px;
}
#content .casestudy_view .casestudy_picture img {
}
#content .casestudy_view .casestudy_picture .caption {
	color: #7F7F7F;
}
#content .casestudy_view .twoColumnLayoutLeft .textbox {
	margin: 0.8em 0;
	padding: 0 0 0.8em 0;
	width: 100%;
	clear: both;
}
#content .casestudy_view .twoColumnLayoutLeft .textbox p {
	margin: 0;
	padding: 0.5em 1em 0.5em 0;
	font-size: 1.1em;
	color: #666666;
}
#content .casestudy_view .twoColumnLayoutLeft .textbox img {
	border: 0;
	margin: 1em 0;
}
#content .casestudy_view .twoColumnLayoutLeft .textbox .capital-headline {
	margin-top: 1.3em;
	color: #999999;
}
#content .casestudy_view .twoColumnLayoutLeft .largetext p {
	font-size: 1.2em;
	color: #000000;
}
#content .casestudy_view .twoColumnLayoutLeft .bottomgray {
	border-bottom: 1px solid #E0E0E0;
}

/* END case study page styles */

/* Generic page styles */
#content .generic_view {
	background: url("../images/bg/generic_rightcolumn_bg.jpg") 510px 1px no-repeat;
}
#content .generic_view a {
	color: #999999;
	text-decoration: underline;
}
#content .generic_view strong, #content .generic_view legend {
	color: #FFE733;
}
#content .generic_view .button {
	text-decoration: none;
}

#content .generic_view .twoColumnLayoutLeft {
	width: 455px;
	margin-right:35px;
}
#content .generic_view .twoColumnLayoutRight {
	width: 258px;
	margin-top: 1px;
	padding: 0;
	color: #CCCCCC;
}
#content .generic_view .darkgrayborder {
	background: url("../images/bg/darkgraybox_border.gif") left top repeat-x;
	padding-top: 2em;
}
#content .generic_view .twoColumnLayoutLeft p {
	font-size: 1.1em;
}
#content .generic_view .twoColumnLayoutLeft .largetext p {
	font-size: 1.2em;
	margin-bottom: 1.7em;
}
#content .generic_view .inside_headline_bar {
	height: auto !important;
	padding-top: 22px;
	height: 45px;
	min-height: 45px;
	margin-bottom: 15px;
}
#content .lighttext, #content .lighttext p {
	color: #E4E4E4;
}
#content .generic_view .twoColumnLayoutRight p {
	margin: 0;
	padding: 0 25px 0.8em 25px;
	color: #CCCCCC;
	line-height: 1.5em;
}
#content .generic_view .twoColumnLayoutRight .capital-headline {
	margin-top: 0;
	margin-bottom: 0.6em;
	color: #FFE733;
	
}
#content .generic_view .twoColumnLayoutRight .grayline_sep {
	background: url("../images/bg/generic_darkgraybox_border.gif") left top repeat-x;
	margin: 1.5em 0;
	display: block;
	float: left;
	width: 100%;
	padding: 0;
	height: 2px;
	clear: both;
}
#content .generic_view .twoColumnLayoutRight .button {
	margin-left: 15px;
	display: inline; /* fix the IE double margin bug */
}
#content .generic_view .twoColumnLayoutRight form { 
	margin: 0;
	display: block;
	padding: 0 25px;
	color: #CCCCCC;
	line-height: 1.5em;
}
#content .generic_view .twoColumnLayoutRight form input {
	float: left;
	clear: none;
	display: inline; /* fix the IE double margin bug */
	color: #666666;
	margin-right: 5px;
	margin-left: 0px;
	height: 12px;
	padding: 3px 5px;
	width: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#content .generic_view .twoColumnLayoutRight form .button {
	margin-left: 0;
	margin-right: 0;
}
#content table tr {
	margin:0;
	padding:0;
}
#content table td {
	padding-bottom:1em;
}
#content table td.date {
	padding-right:15px;
}
#content table td.headline a, #content table td.headline a:visited {
	text-decoration:none;
	color:#E4E4E4;
}
#content table td.headline a:hover, #content table td.headline a:active {
	text-decoration:underline;
	color:#FFFFFF;
}
/* END the generic page styles */


/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#footer-container {
	width: 100%;
	clear: both;
	position: relative; /* for footer-stick */
	background-color: #ACADB2;
	margin: -2em 0 0 0; /* negative margin makes footer-stick work */
	height: 2em;
	padding: 0;
}
#siteinfo {
	width: 770px;
	margin: 0 auto;
	font-size: 1.1em;
	color: #6a6a6a;
}
	#siteinfo-legal {
		float: left;
		display: inline;
		padding: 0.5em 5px 0 20px;
		font-size: 0.8em;
		color: #FFFFFF;
	}
	#siteinfo-links {
		float: right;
		display: inline;
		padding: 0.5em 20px 0 5px;
		font-size: 0.8em;
		color: #45494D;
	}
	#siteinfo-links a {
		color: #45494D;
	}
	/*
	#siteinfo-terms {
		float: right;
		clear: both;
		display: inline;
		padding: 7px 20px 0 5px;
		width: 50%;
		text-align: right;
	}
	*/

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
a {
	color: #666666;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a.arrowed {
	background: url("../images/inline/doublearrow.gif") right 0.4em no-repeat;
	padding-right: 11px;
}
.clear {
	clear: left;
	/* Try adding any/all of these if clear divs aren't working right:
	height: 1%;
	width: 100%;
	font-size: 1%;
	line-height: 1;
	*/
}
.yellow {
	color: #FFE733;
}
.white {
	color: #FFFFFF;
}
.darkgray {
	color: #333333;
}
.mediumgray {
	color: #626262;
}
.black {
	color: #000000;
}
.buybutton {
	padding: 4px 0 0 33px;
	margin: 0.5em 0 1em 0;
	height: 22px;
	display: block;
	background: url("../images/buttons/large_cart_button.gif") left center no-repeat;
	font-size: 1.2em;
	font-weight: bold;
	color: #333333;
}
.bold {
	font-weight: bold;
}
.em {
	font-style: italic;
}
.capital-headline {
	font-size: 1em;
	text-transform: uppercase;
	color: #7B7B7B;
	color: #221E1F;
	display: block;
	margin: 0 0 0.4em 0;
}
.capital-headline-light {
	font-size: 1em;
	text-transform: uppercase;
	color:#BFBDBD;
	display: block;
	margin: 0 0 0.4em 0;
}
.replaceh3 {
	text-indent: -5000px;
	overflow: hidden;
	width: 100%;
	height: 40px;
}
.replace_home_header_image {
	text-indent: -5000px;
	overflow: hidden;
	background: url("../images/headers/homepage_teach_me_time.gif") left top no-repeat;
	width: 100%;
	height: 19px;
}
ul.bulleted {
	margin: 0;
	padding: 0;
}
ul.bulleted li {
	display: block;
	float: left;
	clear: left;
	padding: 0.5em 0 0.5em 12px;
	color: #666666;
	background: url("../images/inline/yellow_bullet.gif") left 0.8em no-repeat;
}
ul.iconlist {
	margin: 0 0 0 0.5em;
	padding: 0;
}
ul.halficonlist {
	width: 48%;
	float: left;
}
ul.iconlist li {
	display: block;
	float: left;
	clear: left;
	padding: 0.4em 0;
	width: 100%;
}
ul.iconlist li a {
	font-weight: bold;
	padding: 0.5em 0 0.5em 25px;
	background-position: left 0.2em;
	background-repeat: no-repeat;
	color: #333333;
}
ul.iconlist li a .nobold {
	font-weight: normal;
}
ul.iconlist li a.icon_pdf {
	background-image: url("../images/icons/icon_pdf.gif");
}
ul.iconlist li a.icon_play {
	background-image: url("../images/icons/icon_play.gif");
}
ul.iconlist li a.icon_play_yellow{
	background-image: url("../images/icons/icon_play_yellow.gif");
}
ul.iconlist li a.icon_buy {
	background-image: url("../images/icons/icon_buy.gif");
}
ul.iconlist li a.icon_question {
	background-image: url("../images/icons/icon_question.gif");
}
ul.iconlist li a .nobold {
	font-weight: none;
}
a.icon_zip, a.icon_buy_direct, a.icon_pdf_casestudy {
	margin: 5px 0 0 0;
	padding: 0px 0 0 20px;
	height: 18px;
	display: block;
}
a.icon_buy_direct {
	color: #FFE733;
	background: url("../images/icons/icon_buy_direct.gif") left center no-repeat;
}
a.icon_pdf_casestudy {
	color: #FFFFFF;
	background: url("../images/icons/icon_pdf_casestudy.gif") left center no-repeat;
}
a.icon_zip {
	color: #FFFFFF;
	background: url("../images/icons/icon_zip.gif") left center no-repeat;
}
dl.faq {
	margin: 0.5em 0;
	font-size: 1em;
}
dl.faq dt {
	font-size: 1.2em;
	margin: 0 0 0 20px;
	text-indent: -20px;
	color: #FFE733;
}
dl.faq dd {
	font-size: 1em;
	margin: 0 0 0 2.0em;
}
dl.faq dd p {
	font-size: inherit;
}
/* AI Direct DL styles */
dl.aidirect {
	margin: 0;
	font-size: 1em;
}
dl.aidirect dt {
	float: left;
	clear: left;
	width: 90px;
	height: 100px;
	margin: 1em 15px 1em 0;
}
dl.aidirect dt img {
	border: 1px solid #999999;
}
dl.aidirect dd {
	margin: 1em 0;
	float: left;
	clear: none;
	width: 350px;
}
dl.aidirect dd p {
}