#coming-soon{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 240px;
	width: 480px;
	text-align: center;
}

#coming-soon p{
	font-family: "Yanone Kaffeesatz", Helvetica, Arial;
	font-size: 24px;
	line-height: 1.2em;
	color: #38664e;
	text-align: center;
	margin-top: 18px;
}

header{
	position: absolute;
	width: 1200px;
	left: 0;
	right: 0;
	background: url("../images/header-bg.png") top left no-repeat;
	background-size: 1200px;
	z-index: 10;
}

#main-logo{
	position: relative;
	top: 10px;
	left: 10px;
	width: 110px;
	height: auto;
}

#main-menu {
	position: absolute;
	margin: 0px;
	padding: 0px;
	left: 245px; /* Should be 400px, when menu complete, or even less */
	top: 50px;
}

#main-menu li{
	
	float: left;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: 24px;
	margin-left: 20px;
	
}

#main-menu a{
	color: #264535;
}

#main-menu a:hover{
	color: #38664e;
}

#main-login{
	position: absolute;
	right: 10px;
	top: 10px;
}

#main-login img{
	width: 50px;
	height: auto;
}

#main-login h4{
	margin-top: 0px;
	text-align: center;
}

#user-menu{
	position: absolute;
	display: none;
	top: 80px;
	left: -4px;
	margin: 0;
	padding: 0;
	border: 1px solid #bdbdbd;
	border-radius: 3px;
	background: white;
	width: 60px;
}

#user-menu li{
	text-align: center;
	font-family: "Yanone Kaffeesatz", Arial;
	font-size: 16px;
	color: #264535;
	margin-top: 2px;
	margin-bottom: 4px;
}


#main{
	width: 1200px;
}

#hero{
	position: relative;
}

#hero>img{
	width: 1200px;
	height: auto;
}

#hero .text{	
	position: absolute;
	top: 150px;
	right: 50px;
	
}

#hero h1{
	font-size: 48px;
	color: white;
	text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
	text-align: right;
}

#hero p{
	float: right;
	width: 590px;
	color: white;
	text-align: right;
	font-size: 14px;
	text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

#how-it-works{
	position: relative;
	padding-top: 36px;
	margin-bottom: 36px;
}

#how-it-works .column{
	text-align: center; 
}

#how-it-works .icon{
	width: 148px;
	height: auto;
}

#how-it-works h1{
	font-size: 48px;
	text-align: center;
	margin-bottom: 90px;
}

#how-it-works h2{
	top: 0px;
	text-align: center;
	font-size: 24px;
	margin-bottom: 0px;
}

#how-it-works p{
	top: 0px;
	font-size: 12px;
	color: #797979;
	text-align: center;
}

#arrow-1{
	position: absolute;
	left: 233px;
	top: 210px;
}

#arrow-2{
	position: absolute;
	left: 530px;
	top: 210px;
}

#arrow-3{
	position: absolute;
	left: 830px;
	top: 210px;
}

#arrow-large{
	position: absolute;
	left: 480px;
	top: 110px;
}

#instructors{
	padding: 0px 10px 36px;
}

#instructors h1{
	font-size: 48px;
	text-align: center; 
}

#instructors ul{
	margin: 0px;
	padding: 0px;
}

#instructors li{
	position: relative;
	float: left;
	width: 235px;
	border-right: 1px solid #ccc;
}

#instructors li.last{
	border: none;
}

#instructors li>a>img{
	width: 235px;
	height: auto;
}

#instructors h4{
	margin-top: 10px;
	margin-bottom: 16px;
	font-size: 24px;
	text-align: center;
}

#instructors p{
	line-height: 16px;
	padding: 0px 10px;
	font-size: 12px;
	color: #797979;
	text-align: justify
}

#instructors li .overlay{
	position: absolute;
	top: 132px;
	height: 160px;
	width: 100%;
	background: rgba(255,255,255,0.8);
	text-align: center;
	display: none;
}

#instructors li .overlay>img{
	margin-top: 72px;
	width: 44px;
}

#instructors li .overlay h5{
	text-align: center;
	font-size: 18px;
	color: #ec4a2a;
}

#instructors li:hover{
	cursor: pointer;
}

#instructors li:hover .overlay{
	/*display: block;*/
}

#learn-from-pros{
	margin-top: 36px;
}

#learn-from-pros p, #pre-requisites p{
	font-family: Arial;
	font-size: 16px;
	color: #797979;
}

#pre-requisites{
	margin-top: 54px;
}

#magic-icons{
	position: relative;
	top: 54px;
}

#magic-icons img{
	width: 148px;
	height: auto;
}

#magic-icons img:hover{
	cursor: pointer;
}

#magic-icons h1{
	display: inline;
	top: -45px;
	font-size: 108px;
	margin: 0px 20px;
	color: #73ce9f;
}

#homepage-registration{
	position: relative;
	width: 470px;
	margin: 108px auto 0px;
	border-top: 1px solid #797979;
}

#homepage-registration h1{
	top: 18px;
	text-align: center;
	font-size: 46px;
}

#homepage-registration h5{
	top: 18px;
	font-size: 18px;
	text-align: center;
}

.button{
	background: #59bd89;
	width: 254px;
	font-family: "Yanone Kaffeesatz", Arial;
	font-size: 24px;
	color: white;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	line-height: 50px;
	text-align: center;
	
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.button.register{
	width: 254px;
	height: 54px;
	font-size: 30px;
}

.button:hover{
	cursor: pointer;
	background: #7dcba3;
	
}

#homepage-registration .button{
	margin: 36px auto;
	position: relative;
}

#hero .button{
	position: absolute;
	bottom: 25px;
	right: 50px;
}

#instructor-details{
	position: relative;
}

#instructors-description p{
	font-size: 16px;
	color: #797979;
}

#instructor-details #instructor-clip{
	margin-top: 8px;
}

#instructor-details #details{
	position: relative;
	height: 418px;
}

#instructor-details h1{
	margin-bottom: 8px;
	font-size: 48px;
}

#instructor-details h5{
	margin-bottom: 36px;
	font-size: 24px;
	color: #797979;
	letter-spacing: -10%;
}

#instructor-details p{
	font-size: 12px;
	line-height: 18px;
	color: #797979;
}


#instructor-details #details .button{
	position: absolute;
	bottom: 4px;
	left: 0px;
}

.latest-lessons{
	padding: 0px;
	margin: 36px 0px 0px;
}

.latest-lessons h1{
	margin-left: 10px;
}

.latest-lessons li{
	float: left;
	margin: 0px 10px;
	width: 280px;
	height: 400px;
}

.latest-lessons li img{
	width: 280px;
	height: auto;
}

.latest-lessons h4{
	font-size: 24px;
	margin-bottom: 6px;
}

.latest-lessons p{
	color: #797979;
}

#instructor-list{
	margin: 36px 0px 0px;
	padding: 0px;
}

#instructor-list li{
	float: left;
	width: 380px;
	margin: 0px 10px 36px;
}

#instructor-list .portrait{
	position: relative;
	width: 380px;
	overflow: hidden;
}

#instructor-list .portrait:hover{
	cursor: pointer;
}

#instructor-list .social-media{
	height: 253px;
	width: 80px;
	position: absolute;
	right: -80px;
	top: 0px;
	background: white;
	text-align: center;
}

#instructor-list .social-media img{
	width: 40px;
	height: auto;
	margin: 10px 0px;
}

#instructor-list .portrait .main-image{
	width: 380px;
	height: auto;
}

#instructor-list h4{
	font-size: 36px;
	margin-bottom: 18px;
}
#register{
	position: relative;
	margin: 144px auto;
	width: 354px;
	z-index: 99;
}

#register h2, #contact h2{
	margin-bottom: 9px;
	text-align: center;
}

#register p, #contact p{
	font-size: 12px;
	color: #797979;
	text-align: center;
}


#contact{
	position: relative;
	margin: 126px auto 0px;
	top: 0; right: 0; left: 0; bottom: 0;
	height: 620px;
	width: 340px;
}

#contact textarea{
	width: 350px;
	padding: 10px;
	height: 240px;
	resize: vertical;
	border: 1px solid #bdbdbd;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;

}

#contact #message{
	height: 240px;
}

input[type="submit"]{
	background: #59bd89;
	width: 258px;
	height: 42px;
	margin-top: 18px;
	
	font-family: "Yanone Kaffeesatz", Arial;
	font-size: 24px;
	color: white;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
	line-height: 40px;
	text-align: center;
	
	border: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;

}

input[type="submit"]:hover{
	background: #7dcba3;
}

.checkbox{

	margin-bottom: 9px;

}

.checkbox label{
	display: inline !important;
	font-family: Arial !important;
	font-size: 16px !important;
}

#form-message{
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 360px;
	height: 120px;
}

#form-message h2{
	text-align: center;
}

#form-message p{
	text-align: center;
	color: #797979;
}

.form-element{
	position: relative;
	height: 32px;
	margin-bottom: 18px;
}

.form-element img{
	position: absolute;
	right: -54px;
	top: 4px;
	height: 29px;
	width: auto;
	display: none;
}

#register #instructors{
	padding: 9px 0px;
	height: 154px;
}

#register #instructors>label{
	display: block;
	position: relative;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: 18px;
	color:  #38664e;
	margin-bottom: 9px;

}

#instructor-group{
	position: relative;
}

.form-element.input label{
	position: absolute;
	top: 0px;
	left: 10px;
	pointer-events: none;
	background: #FFF;
	padding-left: 2px;
	padding-right: 2px;
	
	font-family: Arial;
	font-size: 12px;
	color: #009cff;
	opacity: 0;
}

.form-element.input input[type='text'], .form-element.input input[type='password']{
	background: white;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 1px solid #bdbdbd;
	width: 350px;
	height: 32px;
	padding: 4px 10px 0px;
	
	color: #575757;
	font-size: 16px;	
}


/* LOGIN SECTION */

#login{
	width: 280px;
	height: 480px;
	position: absolute;
	margin: auto;
	top: 0; right: 0; bottom: 0; left: 0;
	text-align: center;
	padding: 20px;
}

#login h1, #login p{
	text-align: center;
	margin-bottom: 18px;
}

#login input[type='text'], #login input[type='password']{
	width: 260px;
}

#login input[name='submit']{
	width: 280px;
}

#login #logo, #login #logo-reset{
	width: 180px;
	height: auto;
}

#login #account-register{
	margin-bottom: 36px;
}

#login h4{
	margin-bottom: 18px;
	text-align: center;
	color: #c00;
}

#logo-reset{
	margin-bottom: 36px;
}


/* LESSON PAGE STYLING */

#lesson-actual h1{
	margin-bottom: 0px;
}

#lesson-actual h4{
	margin-top: 4px;
	margin-bottom: 18px;
	color: #38664e;
}

#lesson-actual a, #lesson-actual a:visited{
	color: #38664e;
}

#lesson-materials{
	float: right;
	padding-top: 56px;
}

#lesson-materials ul{
	padding: 0px;
	margin: 27px 0px 0px;
}

#lesson-materials li{
	height: 32px;
}

#lesson-materials li:hover{
	cursor: pointer;
}

#lesson-materials li:hover h3{
	color: #264535;
}

#lesson-materials li img{
	float: left;
	margin-right: 10px;
	height: 32px;
	width: auto;
}

#lesson-materials h3{
	color: #797979;
	line-height: 32px;
}

#lesson-description{
	position: relative;
}

#lesson-description ul{
	list-style-type: disc;
}

#lesson-menu{
	margin-bottom: 18px;
	padding-bottom: 9px;
	border-bottom: 1px solid #bdbdbd;
}

#lesson-menu h2{
	display: inline;
	margin-right: 20px;
	color: #797979;
}

#lesson-menu h2:hover{
	cursor: pointer;
	color: #264535;
}

#lesson-menu h2.selected{
	color: #264535;
	border-bottom: 4px solid #264535;
}

#lesson-stats{
	position: absolute;
	right: 0px;
	top: 14px;
	width: 120px;
}

#lesson-stats #views-icon{
	position: relative;
	top: 8px;
	height: 12px;
	float: left;
	margin-right: 6px;
}

#lesson-stats p{
	font-size: 14px;
	color: #9b9b9b;
}

.lesson-details{
	display: none;
	width: 730px;
	float: left;
}

.lesson-details.selected{
	display: block;
}

#lesson-comments h2{
	border-bottom: 1px solid #bdbdbd;
}

#lesson-comments ul{
	margin: 0px;
	padding: 0px;
}

#lesson-comments li{
	margin-bottom: 18px;
}

#lesson-comments .avatar{
	width: 50px;
	float: left;
}

#lesson-comments .comment-actual{
	float: left;
	width: 660px;
	margin-left: 20px;
}

#lesson-comments .comment-actual p{
	color: #797979;
	margin-top: 6px;
}

#new-comment{
	margin-left: 68px;
	width: 640px;
	height: 70px;
	padding: 10px;
	resize: vertical;
	color: #575757;
	border-radius: 3px;
	border: 1px solid #bdbdbd;
}

#submit-comment{
	float: right;
	margin-top: 18px;
	height: 42px;
	width: 180px;
	line-height: 42px;
}

.video-response{
	margin-top: 36px;
}

.video-response h4{
	margin-bottom: 18px;
}

/* START FAQ STYLING */

#questions{
	list-style-type: decimal-leading-zero;
	margin-bottom: 54px;
}

#questions li{
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: 24px;
	margin-bottom: 9px;
}

.answer ul{
	list-style-type: disc;
}

.answer p, .answer li{
	font-size: 16px;
	color: #797979;
}

/* START CURRICULUM STYLING */

#curriculum-description{
	width: 980px;
	margin: 0 auto 54px;
}

#curriculum-description h1{
	text-align: center;
}

#curriculum-description p{
	font-family: "Open Sans", Arial;
	font-size: 14px;
	color: #797979;
	text-align: center;
}

#instrument-selector{
	width: 880px;
	height: 200px;
	margin: 0 auto;
}

.instrument-selector{
	position: relative;
	width: 280px;
	float: left;
	text-align: center;
	margin-top: 56px;
}

.instrument-selector img{
	position: relative;
	height: 103px;
	width: 103px;
	margin: 0px 20px 18px;
}

.instrument-selector:hover{
	cursor: pointer;
}

.instrument-selector h3{
	text-align: center;
	margin-top: 0px;
}

.actual-curriculum-info{
	display: none;
	position: absolute;
	top: 0px;
	left: 86px;
}

.curriculum-menu{
	position: relative;
	margin-top: 36px;
	padding-top: 18px;
}

.curriculum-menu .menu-back{
	height: 18px;
	margin-right: 12px;
}

.curriculum-menu .menu-back:hover{
	cursor: pointer;
}

.curriculum-menu h3{
	display: inline;
	font-size: 30px;
	color: #41b77a;
}

.curriculum-menu h3:hover{
	cursor: pointer;
}

.curriculum-menu .instructor-selector-info{
	position: absolute;
	top: 0px;
	left: 600px;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: 16px;
	color: #74d0a0;
}

.curriculum-menu .instructor-selector-arrow{
	height: 33px;
	position: absolute;
	left: 380px;
	top: 8px;
}

.instructors{
	margin: 0px 0px 0px 22px;
	padding: 0px;
}

.instructors p{
	float: left;
	top: 0px;
	font-family: "Yanone Kaffeesatz", Arial;
	color: #74d0a0;
	font-size: 18px;
}

.instructors li{
	float: left;
	margin-left: 10px;
	font-family: "Yanone Kaffeesatz", Arial;
	font-size: 18px;
}

.instructors li:hover, .instructors li.selected{
	color: #74d0a0;
	cursor: pointer;
}

.module{
	text-align: left;
	position: relative;
	width: 980px;
	margin: 18px 0px 54px 22px;
	min-height: 320px;
}

.module.right{
	text-align: right;
}

.module-description:before{
	content: '';
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
	margin-right: -0.25em;
}

.module-description{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 355px;
}


.module-description h4{
	font-size: 24px;
	color: #264535;
	margin-bottom: 9px;
}

.module-description p{
	color: #797979;
	font-family: "Open Sans", Arial;
	font-size: 16px;
}

.module.right .module-description h4{
	text-align: right;
}

.module.right .module-description p{
	text-align: right;
}

.module-points{
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	margin-left: 18px;
	padding: 14px 0px 10px 42px;
	background: url("../images/accolade.png") no-repeat;
	background-size: contain;
}

.module.right .module-points{
	margin-right: 18px;
	padding: 14px 48px 10px 0px;
	background: url("../images/accolade-right.png") no-repeat right center;
	background-size: contain;
}

.module-points li{
	font-family: "Open Sans", Arial;
	font-size: 18px;
	color: #264535;
	margin-bottom: 8px;
}

.module-points li.disabled{
	color: #bdbdbd;
}

.module.right .module-points li{
	text-align: right;
}

.next-module-arrow{
	height: 280px;
	position: absolute;
	top: -250px;
	right: 36px;
}

.next-module-arrow.left{
	left: 36px;
}

.accolade-left{
	float: left;
	margin-top: 18px;
	margin-left: 18px;
	height: 207px;
}

.accolade-right{
	float: right;
	margin-top: 18px;
	margin-right: 18px;
	height: 207px;
}

/* SUBSCRIPTIONS */

.subscription-info{
	
	width: 720px;
	margin: 0 auto 36px;
	
}

.subscription-info h1{
	text-align: center;
}

.subscription-info p{
	color: #797979;
	text-align: center;
}

#subscriptions, #double-subs{
	width: 810px;
	padding: 0;
	margin: 0 auto 108px;
}

#subscriptions li, #double-subs li{
	position: relative;
	float: left;
	background: #74d0a0;
	width: 250px;
	height: 200px;
	margin-left: 10px;
	margin-right: 10px;
	border-radius: 3px;
}

#double-subs li{
	height: 250px;
}

#subscriptions h4, #double-subs h4{
	color: white;
	text-align: center;
	margin-top: 18px;
	margin-bottom: 18px;
	font-size: 30px;
}

#subscriptions p, #double-subs p{
	color: white;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

#subscriptions h2, #double-subs h2{
	text-align: center;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: auto;
	background: #b3e5cb;
	margin-bottom: 0px;
	padding-top: 4px;
	padding-bottom: 10px;
	
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;

}