/* spencerlearning.com 05/10 */

/* -------------------------------------------------------------- 
  
	BROWSER RESET - adapted from BlueprintCSS reset.css
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Added from CLICSS */
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* End reset
-----------------------------------------------------------------*/


/* -------------------------------------------------------------- 
   
	BASIC LAYOUT 
   
-------------------------------------------------------------- */

body { 
	font-size: 87.5%;	/* 1em = 14px */
	text-align: center; 
	background: #7ea0aa;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	width: 66.429em;	/* 930px */
	background: transparent;
}

#header {
	overflow: hidden;
	width: 100%;
	background: #f4f6df; /* originally fbfcf4 */
}

#content { 
	overflow: hidden;
	width: 100%;
	background: #fff; 
}

#maincontent, #header #ultimatephonics {
	float: left; 
	display: inline; 
	width: 60%;			/* 558px */
	margin-left: 3.2%;	/* 30px */
}

#sidebar, #header #spencerlearning {
	float: right; 
	display: inline; 
	width: 30%;			/* 279px */
	margin-right: 3.2%;	/* 30px */
}

#maincontent, #sidebar {
	margin-top: 2.142857em; /* 30px */
	margin-bottom: 2em; 
}

#footer {
	overflow: hidden;
	clear: both;
	width: 100%;
}

/* End basic layout
-----------------------------------------------------------------*/


/* -------------------------------------------------------------- 
   
	BASIC TYPOGRAPHY
   
-------------------------------------------------------------- */

body {
	/* Base font-size 1em = 14px */
	font-family: verdana,arial,helvetica,sans-serif;
	line-height: 1.5;	/* Base line-height = 21px */
	color: #222; 
}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {
	font-family: arial,helvetica,sans-serif;
	font-weight: bold;
	color: #3f3f3f;
}

h1 { font-size: 2em; line-height: 1.2; margin-bottom: 0.55em; }		/* font 28px, bottom 21px */
h2 { font-size: 1.714em; line-height: 1.2; margin-bottom: .55em; }	/* font 24px, bottom 18px */
h3 { font-size: 1.5em; line-height: 1.2; margin-bottom: .8em; } 	/* font 21px, bottom 21px */
h4 { font-size: 1.286em; line-height: 1.2; margin-bottom: .96em; padding-top: .167em; } /* font 18px, bottom 21px, top 3px */

	h2.number, h3.number, h4.number {
		font-weight: normal;
	}

	h2.check {
		font-weight: normal;
		padding-left: 38px;
		background: transparent url(/_images/check.gif) 0 35% no-repeat;
	}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em 0; }
p.center	{ text-align: center; }
p img.left  { float: left; margin: .5em 2.142857em 1.5em 0; padding: 0; }
p img.right { float: right; margin: .5em 0 1.5em 1.5em; padding: 0; }

img.center	{ display: block; margin: 0 auto; padding-top: .5em; margin-bottom: 1.5em; }

a,
a:visited	{ color: #2361A1; text-decoration: underline; }
a:hover,
a:active,
a:focus 	{ text-decoration: none; }

blockquote {
	background: url(/_images/blockquote.gif) top left no-repeat;
	border: none;
	margin: 0;
	padding: 0 2em 0 4.5em;
	font-style: normal;
	color: #555;
}

cite {
	display: block; 
	text-align: left;
	padding: .857143em 0 0 1.5em; 
	font-weight: bold;
	font-style: italic;
	color: #577B85; 
}

/* ---- Pullquotes ---- */
blockquote.right, blockquote.left {
	width: 35%; 
	background: none; 
	border: 3px double #ddd; 
	border-width: 3px 0;
	padding: 0.611em;
	text-align: left;
	font-size: 1.286em;
	line-height: 1.3;
	font-style: normal;
	color: #555;
}
blockquote.right p, blockquote.left p { margin: 0; } /* !important */
blockquote.right { float: right; }
blockquote.left { float: left; }

strong      { font-weight: bold; }
em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }
sup, sub    { line-height: 0; }

abbr, 
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre 		{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Lists
-------------------------------------------------------------- */

li ul, 
li ol       { margin: 0 1.5em; }
ul	      	{ margin: 0 1.5em 1.5em 1.5em; }
ol	      	{ margin: 0 1.5em 1.5em 2em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

	ul.checklist li {
		line-height: 1.77;
		list-style: none;
		background: url(/_images/check-15.gif) no-repeat 0 50%;
		padding-left: 1.8em;
	}

	ul.checklist-long li {
		line-height: 1.5;
		list-style: none;
		background: url(/_images/check-15.gif) no-repeat 0 10%;
		padding-left: 2em;
		padding-bottom: 1em;
		margin-left: 0em;
	}

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em; }

/* Tables
-------------------------------------------------------------- */

table       { margin-bottom: 1.4em; width: 100%; }
th          { font-weight: bold; }
thead th 	{ background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }

/* End basic typography
-----------------------------------------------------------------*/


/* -------------------------------------------------------------- 
   
	SECTION STYLES 
   
-------------------------------------------------------------- */

/* #header #ultimatephonics
-------------------------------------------------------------- */

#header #ultimatephonics img#up-header {
	display: block;
	margin: 2.4em 0 2em 2em; 
}

#header #ultimatephonics img#up-logo {
	display: block;
	margin: 2.928571em 0 0 0; 
}

#header #ultimatephonics img#up-tagline {
	display: block;
	margin: 1.428571em 0 1.928571em 7.5%;
}

/* #header #spencerlearning
-------------------------------------------------------------- */

#header #spencerlearning img {
	float: right;
	display: inline;
	margin: 1.285714em 2.071429em 0 0; 
}

#header #spencerlearning ul {
	clear: right;
	text-align: right;
	margin: 0;
	padding: .642857em 1.3em 0 0; /* 9px on top */
}

#header #spencerlearning li {
	display: inline;
	list-style: none;
	font-family: arial,helvetica,sans-serif;
	font-size: 1em; /* 14px */
	margin: 0 0 0 1.5em;
	}

	#spencerlearning li a, #spencerlearning li a:visited {
		color: #00425c;
		text-decoration: none;
	}

	#spencerlearning li a:hover, #spencerlearning li a:active {
		text-decoration: underline;
	}

	#spencerlearning li#selected a {
		font-weight: bold;
	}

/* #header #navmenu
-------------------------------------------------------------- */

#header #navmenu {
	float: left;
	width: 100%;
	font-size: 1.143em; /* 16px - this is base em for #navmenu */
	background: url(/_images/navmenu-bottom.gif) repeat-x bottom;
}

	#navmenu ul {
		float: left;
		display:inline;
		margin: 0 0 0 1.875em; /* 30px */
		list-style: none;
	}

	#navmenu li {
		float: left;
		display: inline;
		margin: 0 1px 0 0;
		font-family: arial,helvetica,sans-serif;
		text-align: center;
		border-bottom: 1px solid #7fa1ab;
	}

	#navmenu a {
		display: block;
		width: 7.7em;
		color: #004358;
		text-decoration: none;
		background: url(/_images/navmenu-tab-both-right.gif) no-repeat top right;
	}

	#navmenu a span {
		display: block;
		padding: 7px 0 5px 0;
		background: url(/_images/navmenu-tab-both-left.gif) no-repeat top left;
	}

	#navmenu a:hover {
	  background-position: 100% -130px;
	  }
	
	#navmenu a:hover span {
	  background-position: 0% -130px;
	  }
	
	#navmenu li#selected {
		border-width: 0;
		margin: 0 2px 0 1px;
	}

		/* Remove 1px left margin for left-most tab (home) when selected */
		#home #navmenu li#selected {
			margin: 0 2px 0 0;
		}

	#navmenu li#selected a {
		background: url(/_images/navmenu-tab-selected-right.gif) no-repeat top right;
	}

	#navmenu li#selected a span {
		background: url(/_images/navmenu-tab-selected-left.gif) no-repeat top left;
		padding-bottom: 6px; /* add 1px to #on tab bottom to cover navmenu line */
	}

/* #home
-------------------------------------------------------------- */

#home p.student-types { margin-bottom: 1em; }

#home ul.student-types { font-weight: bold; color: #3f3f3f; margin: 0; padding: 0 0 2.461538em 1.5em; /* 32px top */ }

	#home ul.student-types li { 
			list-style: none;
			background: url(/_images/check-15.gif) no-repeat 0 50%;
			padding-left: 1.8em;
	}

#home img.screenshot { float: right; display: inline; margin: .5em 1.8em 0 0; padding: 0; }

#home img.chart { display: block; margin: 0 auto; padding-top: 1.15em; }

#home #sidebar #try-it-now { margin-bottom: 2.769231em;	/* 36px */ }

/* #demo
-------------------------------------------------------------- */

#demo #video { margin: 0 auto; padding-top: .7em; }

#demo img.word { padding-bottom: .5em; }

#demo table { width: 100%; margin: 0; }

#demo td { padding-bottom: 1.5em; }

	#demo td p { padding-right: .75em; }

	#demo td img { padding-left: .75em; }
	
/* #free-trial
-------------------------------------------------------------- */

#free-trial #sidebar #arrow-box .box-tr-arrow { padding-bottom: .7em; }

#free-trial #sidebar #arrow-box h2 { margin-bottom: .3em; }

#free-trial #sidebar #arrow-box .buttonContainer { padding-top: 1.4em; }

#free-trial #sidebar #discount p { margin: 0 3em 1em 3em; }

#free-trial-thank-you #sidebar #blockquotes { padding-top: 3em; }

/* #download
-------------------------------------------------------------- */

#download #sidebar #blockquotes { padding-top: 3em; }

/* #downloads - used in #download, #resources .upgrade
-------------------------------------------------------------- */

#downloads table { width: 95%; margin-top: .7em; border: 1px solid #ccc; }

#downloads th { padding: .8em; background-color: #f8f8f8; border-bottom: 1px solid #ccc; }

	#downloads th h3 { margin: 0; padding: 0; }
	
#downloads th, #downloads td.windows, #downloads td.macintosh { padding-left: 2em; }

	#downloads td.macintosh { border-left: 1px solid #ccc; }
	
#downloads td.link { padding-top: .6em; }
	
#downloads td.requirements { font-size: .857em; padding: 0 0 2.1em 2.33em; }

#downloads td.icon { padding: 1em 1.2em 0 0; }

/* #testimonials, #questions - full-width #maincontent, 30/60 columns
-------------------------------------------------------------- */

#maincontent.fullwidth, #maincontent.fullwidth .headline, 
#maincontent.fullwidth .contentbox, #maincontent.fullwidth .contentbox-line {
	float: left; 
	display: inline; 
	width: 100%;
	margin-left: 0;
}

	#maincontent.fullwidth h1,
	#maincontent.fullwidth .headline ul,
	#maincontent.fullwidth .headline p { margin-left: 3.2%; }

	#maincontent.fullwidth .headline li { display: inline; list-style: none; margin: 0; padding: 0 .5em;}
	
		#maincontent.fullwidth .headline li.label { font-weight: bold; color: #3f3f3f; padding: 0; }
	
		#maincontent.fullwidth .headline li.borderleft { border-left: 1px solid #3f3f3f; }

#maincontent.fullwidth .contentbox .col30left, 
#maincontent.fullwidth .contentbox-line .col30left {
	float: left; 
	display: inline; 
	width: 30%;			/* 558px */
	margin-left: 3.2%;	/* 30px */
}
	
#maincontent.fullwidth .contentbox .col60right, 
#maincontent.fullwidth .contentbox-line .col60right {
	float: right; 
	display: inline; 
	width: 60%;			/* 279px */
	margin-right: 3.2%;	/* 30px */
}

#maincontent.fullwidth .contentbox h2, 
#maincontent.fullwidth .contentbox-line h2 { color: #777; }

	#schools #maincontent.fullwidth .contentbox h2, 
	#schools #maincontent.fullwidth .contentbox-line h2 { text-align: right; padding: 0 1em 0 0; }

#maincontent.fullwidth .contentbox h2.check, 
#maincontent.fullwidth .contentbox-line h2.check { color: #3f3f3f; }
	
#maincontent.fullwidth .contentbox blockquote, 
#maincontent.fullwidth .contentbox-line blockquote { margin-left: 1em; color: #444; }

/* #resources
-------------------------------------------------------------- */

#resources img.resource { margin-bottom: 0; padding: .2em 0 0 .5em; }

#resources li.resource, #resources li.resource-top {
	font-size: 1.285714em;
	line-height: 1.3em;
	margin-bottom: .5em;
	color: #3f3f3f;
	list-style: none;
	padding-left: 1.666667em;
	background: transparent url(/_images/check-18.gif) 0 50% no-repeat;
}

	#resources li.resource-top { background: transparent url(/_images/check-18.gif) 0 15% no-repeat; }
	
#resources .scribd { margin: 2.142857em 0; /* 30px */ }

#resources #sidebar #resource-menu { width: 86%; margin: 0 auto; margin-top: 2em; margin-bottom: 2.769231em; }

	#resources #sidebar #resource-menu .box-tr { padding: 1.692308em 1.3em 2.5em 1.3em; }

	#resources #sidebar #resource-menu h4 { border-bottom: 1px solid #ccc; padding: 0 0 .5em .7em; margin-bottom: .5em; }

		#resources #sidebar #resource-menu h4 a { color: #3f3f3f; }

	#resources #sidebar #resource-menu ul { margin: 0 0 0 .8em; }

	#resources #sidebar #resource-menu li {
		list-style: none;
		background: url(/_images/resources-menu-list.gif) no-repeat 0 50%;
		padding-left: 1.5em;
	}

	#resources #sidebar #resource-menu a, #resources #sidebar #resource-menu a:visited { 
		text-decoration: none; 
	}

	#resources #sidebar #resource-menu a:hover, #resources #sidebar #resource-menu a:active { 
		text-decoration: underline; 
	}

/* #solutions
-------------------------------------------------------------- */

#solutions .solutions-list li {
		line-height: 1.77;
		list-style: none;
		background: url(/_images/check-15.gif) no-repeat 0 50%;
		padding-left: 1.8em;
}

/* #order
-------------------------------------------------------------- */

#order #maincontent .col30right { width: 45%; }

#order img.price, #order input.buy-now, #order img.buy-now, #order img.paypal {
	display: block;
	margin: 0 auto;
	padding-top: 2em;
}

	#order img.price { padding-left: 2em; }

	#order p.buy-now { margin: 0; padding: 0; }
	
	#order p.paypal { margin: 1.5em 2em 0 2em; font-size: .857em; font-style: italic; }
	
	td#tdPmtOptions { text-align: right; }

#order #sidebar #trust { margin-top: 2.153846em; /* 28px */ }

	#order #sidebar #trust img { display: block; margin: 0 auto; padding: 0 0 1.615385em 0; /* 21px */ }

#order #sidebar #blockquotes { margin-top: .846154em;	/* 11px */ }

/* #contact-info - used in #order, #contact
-------------------------------------------------------------- */

#contact-info ul { margin-left: 4.285714em; /* 60px, base em is 14px */ }

	#contact #contact-info ul { padding-top: 1em; }
	
#contact-info li { list-style: none; padding-left: 2.5em; margin-bottom: .5em; }

	#contact-info li#address { background: transparent url(/_images/contact-address.gif) 0 5% no-repeat; }
	#contact-info li#phone { background: transparent url(/_images/contact-phone.gif) 0 50% no-repeat; }
	#contact-info li#fax { background: transparent url(/_images/contact-fax.gif) 0 50% no-repeat; }
	#contact-info li#email { background: transparent url(/_images/contact-email.gif) 0 50% no-repeat; }
	
/* #support
-------------------------------------------------------------- */

#support ul#linklist { margin-left: 1.714em; /* 60px */ }

#support ul.replacement { list-style: none; margin-left: 2.214857em; /* 30px */ }

/* #sitemap
-------------------------------------------------------------- */

#sitemap #maincontent.fullwidth ul { color: #3f3f3f; margin-left: 6.4%; /* 60px */ }
	
#sitemap #maincontent.fullwidth h3 { margin-left: 6.4%; /* 60px */ }
	
#sitemap #maincontent.fullwidth h4, #sitemap #maincontent.fullwidth ul.subcat1 { margin-left: 9.6%; /* 90px */ }
	
#sitemap #maincontent.fullwidth ul.subcat2 { margin-left: 12.8%; /* 90px */ }

/* #sidebar
-------------------------------------------------------------- */

#sidebar {
	font-size: .928571em; 		/* 13px = base em in sidebar */
	line-height: 1.615385em;	/* 21px */
	margin-top: 2.461538em; 	/* 32px */
}

#sidebar .action-buttons {
	width: 85%;
	margin: 0 auto;
	margin-top: 2.154em;
	margin-bottom: 1.538em; /*20px */
}

	#sidebar .action-buttons img { display: block; margin: 0 auto; padding-bottom: 1.231em; }

#sidebar .solutions-list {
	width: 95%;
	margin: 1.769em 0 2.846em auto; /* 23px 37px */
	color: #555; 
}

	#sidebar .solutions-list .box-tr { padding: 1.692em 0 1.154em 1.538em /* 22px 0 13px 20px */; }

	#sidebar .solutions-list h3 { margin-bottom: .615em /* 8px */; color: #555; }

	#sidebar .solutions-list ul { margin: 0 0 1.462em .31em /* 19px 4px */; }

	#sidebar .solutions-list li {
		line-height: 1.615; /* 21px */
		list-style: none;
		background: url(/_images/check-15.gif) no-repeat 0 50%;
		padding-left: 1.8em;	
	}

	#sidebar .solutions-list a, #sidebar .solutions-list a:visited { text-decoration: none; }
	
	#sidebar .solutions-list a:hover, #sidebar .solutions-list a:active, 
	#sidebar .solutions-list a:focus { text-decoration: underline; }

	#sidebar .solutions-list img { display: block; margin: 0 auto 1em 2.1em; }

#sidebar #try-it-now {
	width: 85%;
	margin: 0 auto;
	margin-top: 2em;
	margin-bottom: 3em; /* 39px */
	color: #555; 
}

	#sidebar #try-it-now .box-tr { padding: 1.384615em 1.538462em /* 18px 20px */; padding-bottom: 1em; }

	#sidebar #try-it-now h3 { margin-bottom: .384615em /* 5px */; color: #555; }

	#sidebar #try-it-now ul { margin: 0 0 1.230769em .31em /* 16px 4px */; }

	#sidebar #try-it-now li {
		line-height: 1.538462; /* 20px */
		list-style: none;
		background: url(/_images/list-arrow-gray.gif) no-repeat 0 60%;
		padding-left: 1.5em;	
	}

	#sidebar #try-it-now img { display: block; margin: 0 auto; padding-bottom: 1em; }
	
#sidebar #arrow-box {
	width: 95%;
	margin: 0 auto;
	margin-top: 0em;
	margin-bottom: 2em; 
}

	#sidebar #arrow-box .box-tr-arrow { padding: 4em 0 1.8em 0;	}

	#sidebar #arrow-box h2 { margin: 0 0 1.2em 1.5em; }

	#sidebar #arrow-box img { 
		display: block; 
		margin: 0 auto;
		padding-bottom: 1em; 
		}
		
#sidebar #blockquotes blockquote {
	font-style: italic;
	background: url(/_images/blockquote-sidebar.gif) top left no-repeat;
	margin: 0 0 1.615385em .5em; /* 21px bottom */
	padding: 0 0 0 3em;
}

#sidebar #blockquotes cite { padding-top: 0; }

/* #footer
-------------------------------------------------------------- */

#footer {
	font-size: .928571em; /* 13px */
	font-family: arial,helvetica,sans-serif;
	font-weight: bold;
	background: #e5f1c1;
	color: #768b37;
	padding-top: 2em;
	padding-bottom: 1em;
	border-top: 1px solid #abc266;
}

#footer #copyright { float: right; display: inline; margin-right: 2.5em; }

#footer ul { float: left; display: inline; margin-left: 1.307692em; /* 17px */ }

#footer li { display: inline; list-style: none; margin: 0; padding: 0 1em; border-left: 1px solid #768b37; }

	#footer li.noborder { border-left: none; }

	#footer li a, #footer li a:visited { color: #768b37; text-decoration: none; }

	#footer li a:hover, #footer li a:active { text-decoration: underline; }

/* -------------------------------------------------------------- 
   
	OTHER STYLES 
   
-------------------------------------------------------------- */

.bold		{ font-weight: bold; }
.normal		{ font-weight: normal; }
.highlight  { background:#ff0; }

.floatright	{ float: right; display: inline; }
.floatleft	{ float: left; display: inline; }
.clear		{ clear: both; }		

/* ---- #maincontent content boxes 60% of page width ---- */

#maincontent .contentbox, #maincontent .contentbox-line {
	clear: both;
	float: left; 
	display: inline; 
	width: 100%;  /* 100% of #maincontent = 60% of page width */
	padding-top: 1.5em;
}

	#maincontent .contentbox-line {
		border-top: 1px solid #aaa;
		padding-top: 1.428571em; /* 20px */
		margin-top: 1.5em;
	}

/* ---- #maincontent floated divs 30% of page width ---- */

#maincontent .col30left, #maincontent .col30right {
	display: inline; 
	width: 49%; /* 49% of #maincontent width is around 30% of full page width */
	/* border: 1px solid #000; */
	overflow: hidden;
	}

	#maincontent .col30left { float: left; }
	
	#maincontent .col30right { float: right }

/* ---- Boxes ---- */

.note, .box { padding: 1.43em; margin: 0 0 1.5em 0; }

	.note { background: #e5f1c1; border: 1px solid #adc1c8; }

	.box { background: #fafce7; border: 1px solid #e5f1c1; }

.box-ml, .box-mr, .box-bl, .box-br, .box-tl, .box-tr, .box-tl-arrow, .box-tr-arrow { zoom: 1; } 
	.box-ml { background: url(/_images/box-ml.gif) repeat-y left top; }
	.box-mr { background: url(/_images/box-mr.gif) repeat-y right top; }
	.box-bl { background: url(/_images/box-bl.gif) no-repeat left bottom; }
	.box-br { background: url(/_images/box-br.gif) no-repeat right bottom; }
	.box-tl { background: url(/_images/box-tl.gif) no-repeat left top; }
	.box-tr { background: url(/_images/box-tr.gif) no-repeat right top; }
	.box-tl-arrow { background: url(/_images/box-tl-arrow.gif) no-repeat left top; }
	.box-tr-arrow { background: url(/_images/box-tr-arrow.gif) no-repeat right top; }

/* End other styles
-----------------------------------------------------------------*/