/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
@font-face {
        font-family: 'Trajan Pro';
        src: url('../fonts/160034180-TrajanPro-Regular.eot');
        src: url('../fonts/160034180-TrajanPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/160034180-TrajanPro-Regular.svg#Trajan Pro') format('svg'),
        url('../fonts/160034180-TrajanPro-Regular.woff') format('woff'),
        url('../fonts/160034180-TrajanPro-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
body {
	font-family: Helvetica, Arial, sans-serif;
	background: #000;
	margin: 0;
	padding: 0;
	color: #000;
	display:block;
}
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	font-family:Helvetica, Arial, sans-serif;
	margin-top: 0; margin-bottom:0;
	color:#FFF;
}
h1, h2 { 
	font-size:40px; 
}
h3, h4 { 
	font-size:20px; 
}
a img {
	border: none;
}
a:link {
	font-family:Helvetica, Arial, sans-serif; 
	color:#FFF; 
	text-decoration: none;
}
a:visited {
	color: #FFF;	
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
p{
	color:#FFF;
	line-height:25px;
	margin-top:20px;
	font-size:16px;
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/*For the small texts*/
.small{
	font-size:14px;
	line-height:20px;
	margin-bottom:20px;
}
.wrapper {
	background: #000;
	margin: 0 auto;
	max-width:1024px;
	min-width:640px;
}
.header{
	background: #FFF;
	width:100%;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
		-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
		-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
	position:relative;
	z-index:1000;
}
.inner-header{
	background: #FFF;
}
#logo{
	margin-left:30px;
}
#navigation{
	width:300px;
	margin-top:-30px;
	margin-right:70px;
	z-index:1100;
	float:right;
	position:relative;
}
#nav-links li {display:block; float:right; margin:2px; color:#000; font-size:14px;}
#nav-links li a {text-decoration:none; color:#000;}
#nav-links li a:hover {text-decoration:underline;}
.page-title-banner { 
	background-color:#EA0000; 
	padding-left:8px; 
	padding-bottom:8px; 
	padding-right:8px;
	background: -moz-linear-gradient(left, #990000 0%, #EA0000 50%, #990000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#990000), color-stop(50%,#EA0000), color-stop(100%,#990000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* IE10+ */
	background: linear-gradient(to right, #990000 0%,#EA0000 50%,#990000 100%); /* W3C */
    position: relative;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
	z-index:900;
}
.page-title {
	border-left-style:double; 
	border-left-color:#FFFF00; 
	border-left-width:8px; 
	border-bottom-style:double; 
	border-bottom-color:#FFFF00; 
	border-bottom-width:8px; 
	border-right-style:double; 
	border-right-color:#FFFF00; 
	border-right-width:8px;  
	text-align:center; padding:25px 8px 25px 8px;
}
.headline-banner { 
	background-color:#EA0000; 
	padding:8px; 
	position: relative;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.80);
	background: -moz-linear-gradient(left, #990000 0%, #EA0000 50%, #990000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#990000), color-stop(50%,#EA0000), color-stop(100%,#990000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #990000 0%,#EA0000 50%,#990000 100%); /* IE10+ */
	background: linear-gradient(to right, #990000 0%,#EA0000 50%,#990000 100%); /* W3C */
	z-index:900;
}
.headline {
	border-style:double; 
	border-color:#FFFF00; 
	border-width:8px; 
	text-align:center; 
	padding:25px 8px 25px 8px;
}
/*Renders the left red triangle for the page titles and headlines*/
.triangle-left{
	width: 0;
	height: 0;
	border-top: 30px solid #660000;
	border-left: 40px solid transparent;
	float:left;
	position:relative;
	z-index:100;
}
/*Renders the right red triangle for the page titles and headlines*/
.triangle-right{
	width: 0;
	height: 0;
	border-top: 30px solid #660000;
	border-right: 40px solid transparent;
	float:right;
	position:relative;
	z-index:100;
}
/*Renders the top white triangle for the video pane and right side pane*/
.triangle-topleft{
	width: 0;
	height: 0;
	border-bottom: 20px solid white;
	border-right: 17px solid transparent;
	float:right;
	z-index:200;
	position:absolute;
	top: -20px;
	right: 0;
}
/*Renders the bottom white triangle for the video pane and right side pane*/
.triangle-bottomright{
	width: 0;
	height: 0;
	border-bottom: 20px solid white;
	border-left: 17px solid transparent;
	float:left;
	position:relative;
	z-index:200;
}
/*Renders the top white triangle for the left side pane*/
.triangle-topright{
	width: 0;
	height: 0;
	border-top: 20px solid white;
	border-left: 17px solid transparent;
	float:left;
	position:relative;
	z-index:200;
}
/*Renders the bottom white triangle for the left side pane*/
.triangle-bottomleft{
	width: 0;
	height: 0;
	border-top: 20px solid white;
	border-right: 17px solid transparent;
	float:right;
	position:absolute;
	z-index:200;
	right: 0;
	bottom: -20px;
}
/*Triangle Positionings*/
#triangle-bottom-right-1{
	margin-top:-20px;
	float:left;
	margin-left:-117px;
}
#triangle-top-right-1{
	margin-top:350px;
	float:left;
	margin-left:-315px;
}
#triangle-top-2{
	margin-top:-20px;
	margin-right:-117px;
}
#triangle-bottom-1{
	margin-top:0px;
}
#triangle-bottom-2{
	margin-top:310px;
	margin-right:-500px;
}

/*Wraps up content*/
.content { 
	width:88%; margin:0 auto;
}
.content-pane { 
	margin-left:40px; 
	margin-right:40px; 
	padding: 20px 40px;
	background:url(../images/background.png) repeat;
	z-index:200;
  min-height:380px;
}
.content-pane div{
	display:inline-block;
	vertical-align:top;
}
.content ul, .content ol { 
	padding: 0 15px 15px 40px;
}
.body-text{
	margin:20px;
}
.footer {
	padding: 10px 10px; 
	background: #000;
	max-width:1024px;
	margin-bottom:20px;
}
.inner-footer{
	width:80%;
	margin:0 auto;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

#value-prop { }
#intro { display:block; margin:0 auto; }
#
/*For the Chinese Objectives section*/
.chinese-objectives{
	
}
#objectives-title{
	width:70%;
	margin-left:110px;
	padding-bottom:20px;
}
.objectives{ 
	font-family:Helvetica;
	font-size:30px;
	text-align:center; 
	color:#FFFF00; 
	margin-top:20px;
}
.list {
	counter-reset: yellow-counter;
}
.list dt {
	position: relative;
	font: 17px Helvetica;
	line-height:25px;
	padding: 4px 0 20px 0;
	color:white;
}
.list dt:before {
	content: counter(yellow-counter);
	counter-increment: yellow-counter;
	position: absolute;
	left: 0;
	top: 20%;
	font: bold 30px/1 Sans-Serif;
	color: yellow;
}
.list dt{
	padding-left: 50px;
}

.caption { 
	text-align:center; 
	color:#FFFF00; 
	width:90%; 
	margin:0 auto; 
	padding-top:10px;
}
.caption-left{
  text-align:left;
  margin:20px 0px;
}
.underline{
  text-decoration:underline;
}
.side-copy {
	width:40%;
}
.top-white{
	text-align:left; 
	color:#FFF; 
	margin-bottom:20px;
}
.gallery ul{
	padding:0px;
}
#first{
		list-style-type:none;
}
.none{
	display:none;
}
#video{
	margin:15px;
	margin-bottom:5px;
	margin-right:15px;
	max-width:90%;
}
#homepg{
	margin-left:10px;
}
#example-caption{
	margin-top:0px;
	margin-left:15px;
	max-width:460px;
}
#side-copy-chinese-etymology{
	color:#FFF;
	line-height:30px;
}
.inner-pane{
	width:100%;
}
.video-pane {
	float: right;
	margin-right:-57px;
	margin-top: 25px;
	margin-bottom: 25px;
	max-width: 65%;
	height: auto;
	position: relative;
}
.video-bg { 
	background-color:#FFF;
	display:inline-block;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
	position:relative;
	z-index:800;
	max-width: 100%;
}
/*Renders the Left Side pane*/
.side-pane-left { 
	max-width: 315px;
	height: auto;
	float: left;
	margin-left: -57px;
	margin-right: 20px;
}
.side-pane-bg { 
	display:inline-block;
	background-color:#FFF; 
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
	position:relative;
	z-index:800;
}
#example{
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
.example-img{
	margin: 15px;
	border:1px solid black;
	max-width:93%;
}
.side-caption{
	color: #000;
	margin-top:0px;
	margin-left:15px;
	margin-bottom:10px;
	font-size:18px;
}
.letter div{
	display:inline-block;
	vertical-align:top;
}

/*For the Call of Action Section*/
.bold{
  font-weight:bold;
}
.call-of-action{
	font-family:'Trajan Pro', Sans-Serif;
	color: #000;
	direction: ltr;
}
.call-of-action-pane { 
	margin-left:40px; 
	margin-right:40px; 
	padding: 20px 40px;
	background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 50%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(50%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cccccc 0%,#ffffff 50%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cccccc 0%,#ffffff 50%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cccccc 0%,#ffffff 50%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(to bottom, #cccccc 0%,#ffffff 50%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */
	background-color:white;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
	-moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
	-webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
}
.call-of-action-chinese{
	width:500px;
	margin-top:50px;
	position:relative;
	float:left;
}
.workbook{
	width:237px;
	margin-top:50px;
	float:right;
}
.call-of-action-header{
	font-size:44px; 
	text-align:center;
}
.call-of-action-caption{
	font-size:25px; 
	text-align:center;
}
.call-of-action-chead{
	font-size:33px; 
	text-align:left;
}
.call-of-action-cbody{
	font-size:20px; 
	text-align:left;
}
.call-of-action-whead{
	font-size:25px; 
	text-align:left;
	margin-top:20px;
}
.call-of-action-wbody{
	font-size:18px; 
	text-align:left;
}
ul.checkmark li{
	list-style-type:none;
	padding-top:10px;
	padding-bottom:10px;
}
.bigcheck{
	background-image:url(../images/check-big.png);
	width:24px;
	height:24px;
	float:left;
	margin-top:25px;
	margin-left:-35px;
}
.smallcheck{
	background-image:url(../images/check-small.png);
	width:18px;
	height:18px;
	float:left;
	margin-top:11px;
	margin-left:-35px;
}
.button {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #CB0000), color-stop(1, #9A0000) );
	background:-moz-linear-gradient( center top, #CB0000 5%, #9A0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#CB0000', endColorstr='#9A0000');
	background-color:#9A0000;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-topleft:15px;
	border-top-left-radius:15px;
	-webkit-border-top-right-radius:15px;
	-moz-border-radius-topright:15px;
	border-top-right-radius:15px;
	-webkit-border-bottom-right-radius:15px;
	-moz-border-radius-bottomright:15px;
	border-bottom-right-radius:15px;
	-webkit-border-bottom-left-radius:15px;
	-moz-border-radius-bottomleft:15px;
	border-bottom-left-radius:15px;
	text-indent:0;
	border:1px solid #d02718;
	display:inline-block;
	color:#ffffff;
	font-family:Helvetica;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #810e05;
	line-height:50px;
}
.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff1100), color-stop(1, #800b00) );
	background:-moz-linear-gradient( center top, #ff1100 5%, #800b00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1100', endColorstr='#800b00');
	background-color:#ff1100;
}.button:active {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #800b00), color-stop(1, #ff1100) );
	background:-moz-linear-gradient( center top, #800b00 5%, #ff1100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#800b00', endColorstr='#ff1100');
	background-color:#800b00;
	position:relative;
	top:1px;
}
.button-shadow{
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.80);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.80);
    -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.80);
}
.order{
	font-size:26px;
	position:relative;
	width:200px;
	left:50%;
	margin-left:-100px;
}
.bundle{
	font-size:30px;
	position:relative;
	width:300px;
	left:50%;
	margin-left:-150px;
}

/*For the Testimonials Section*/
.testimonials {font-style:italic; margin-top:40px;font-size:14px;line-height:20px;}
.face-left{float:left;margin-top:20px;margin-right:10px;}
.face-right{float:right;margin-top:20px;margin-left:10px;}
.quote-left {text-align:right;margin-top:0px;}
.quote-right {margin-top:80px;}
.author-left{text-align:right;color:#ffff00;margin-top:50px;}
.author-right{float:left;color:#ffff00;margin-top:50px;}

.students{
	border:1px solid transparent;
	height:190px;
	display:block;
}
#brian{
	margin-bottom:30px;
}

/*For the Reasons Section*/
.reasons{
	color:#FFFF00;
	font-size:18px;
	font-family:Helvetica;
	margin-top:20px;
	font-weight:bold;
}

/* === Form List Styles === */
.contact-form{
	float:left;
}
.contact-form ul {
    list-style-type:none;
	list-style-position:outside;
	margin:0px;
	padding:0px;
}
.contact-form li{
	padding:12px; 
	position:relative;
} 
/* === Form Elements === */
.contact-form label {
	width:90px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
	color:#FFF;
}
.contact-form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}
.contact-form textarea {padding:8px;width:220px;}
.contact-form button {margin-left:100px;width:100px;font-size:18px;height:40px;}

/* form element visual styles */
.contact-form input, .contact-form textarea { 
	border:1px solid #aaa;
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:5px;
}
textarea
{
   resize: none;
}
#submit-button{
	border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		-webkit-border-top-left-radius: 10px;
	border-top-right-radius: 10px;
		-moz-border-radius-topright: 10px;
		-webkit-border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
		-moz-border-radius-bottomleft: 10px;
		-webkit-border-bottom-left-radius: 10px;
	line-height: 2px;
}
#body-copy{
	float:right;
	width:47%;
}
#contact{
	width:49%;
}
#address{
  margin-top:25px;
}
#product{width:100%;margin-top:20px;}
#product-copy{margin-top:20px;}
.product-header{font-size: 1.5em;font-weight: bold;}
.up-sell:hover{text-decoration:underline;}
#product-header-hr {float:right; width:62%; margin-top:62px;}

#product-img-container{float:left;width:35%;}
#product-basic-img-container {float:left; width:30%;}
#product-copy-container {float:right;width:60%;}
#product-basic-copy-container {float:right; width:60%;}
#product-basic-header {padding-top:20px;}

#product-premium-img-container {float:left; width:30%;}
#upsale {color:#F00; font-weight:bold; float:right;margin-top:10px;}
#product-premium-copy-container {float:right; width:60%;}
#product-premium-header {padding-top:10px;}
#product-premium-copy,#product-basic-copy{
	margin-top:20px;
}

#price-table {float:right; text-align:right; width:200px; margin-right:8px; color: #FFF;line-height:30px;}
#price-table-bundle {float:right; text-align:right; width:428px; margin-right:8px; color: #FFF;line-height:30px;}
#checkout-btn {float:right; margin-top: 15px; width: 240px;}

#copyright {color:#FFF; font-size:12px;margin:2px;float:left;}
#footer-links {display:block; float:right; margin:0; padding:0; font-size:12px;}
#footer-links li {display:block; float:right; margin:2px; color:#FFF;}
#footer-links li a {text-decoration:none; color:#FFF;}
#footer-links li a:hover {text-decoration:underline;}

/*MEDIA QUERIES / for responsive web
-------------------------------------------------------------*/
@media screen and (max-width: 819px) {
	#in-record-time .side-copy {
		width: 100%;
	}
	.face{
		float:none;
		margin-bottom:-20px;
		position:relative;
		left:50%;
		margin-left:-95px;
	}
	.students{
		border:1px solid transparent;
		height:auto;
		display:block;
	}
	.quote-left, .quote-right, .author-left, .author-right{
		display:block;
		width:100%;
		text-align:center;
	}
}


/*IPod/IOS4/IOS5 width*/
@media screen and (max-width: 640px) {
    /* #test{
        width:50px;
        height:50px;
        background-color:red;
    } */
	#in-record-time .side-copy {
		width: 100%;
	}
	.face{
		float:none;
		margin-bottom:-20px;
		position:relative;
		left:50%;
		margin-left:-95px;
	}
	.students{
		border:1px solid transparent;
		height:auto;
		display:block;
	}
	.quote-left, .quote-right, .author-left, .author-right{
		display:block;
		width:100%;
		text-align:center;
	}
	.workbook{
		width:200px;
		margin-right:100px;
	}
}
@media screen and (max-width: 980px) {	
	.call-of-action-chinese{
		/*width:400px;*/
		margin-top:50px;
		position:relative;
	}
	.workbook{
		width:240px;
	}
	/*.order{
		font-size:20px;
	}
	.bundle{
		font-size:25px;
		width:380px;
		margin-left:15px;
	}
	.example-img{
		margin:10px;
		border:1px solid black;
		max-width:80%;
	}
	.side-caption{
		margin-top:0px;
		margin-left:10px;
		margin-bottom:5px;
	}*/
	#objectives-title{
		width:70%;
		margin-left:75px;
		padding-bottom:20px;
	}
	#body-copy{
		width:100%;
		margin-bottom:20px;
		font-size:10px;
	}
	#body-copy p{
		margin-top:10px;
	}
	.contact-form label {
		width:120px;
	}
	.contact-form input, .contact-form textarea {
		width:200px; 
	}
	.contact-form button {
		margin-left:125px;
	}

}