/* Font and colors --------------------------------------------------------- */

body {
	font: 12pt 'Ubuntu', Tahoma, Geneva, sans-serif;
}
input, button, select { font: inherit; }


/* Colors:			hex			hsb					use
	dark blue		#34803F		215°, 60%, 50%		page background top
	base blue		#3675bf		215°, 60%, 75%		page background
	med blue		#58b2ff		215°, 60%, 100%		loginBox head background
	light blue		#bbff96		215°, 30%, 100%		loginBox background
	almost white	#E1F5FF		215°, 10%, 100%		h1 helpdesk input background
*/


/* Common ------------------------------------------------------------------ */
html, body, p, div, h1, h2, h3, img, table, tbody, thead, tr, td, th, li, pre {
	margin: 0; padding: 0; border: 0;
}
ul, ol {
	margin: 0; border: 0;
	padding: 0 0 0 1.5em;
}
li { list-style-position: outside; }

input, button, select { margin: 0; }

html, body {
	height: 100%;
}

body {
	background: #3675bf url('../images/gradient.png') repeat-x center top;
	text-align: justify;
	max-width: 90%;
	min-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
}

#pageBody {
	background: #fff;
	margin: 0 auto;
	padding: 0 20px 20px 20px;
	border-radius: 0 0 20px 40px;
	box-shadow: 0 5px 30px 0 black;
	overflow: hidden;
}


/* h1 {
	text-align: center;
	border-bottom: 4px solid #3675bf;
	border-left: 4px solid #3675bf;
	padding: 10px 0 10px 10px;
	margin-bottom: 20px;
	margin-right: -20px;
	border-radius: 0 0 0 50px;
	background: #E1F5FF;
	box-shadow: 0 2px 8px 0 #999;
	line-height: 50px;
}
h1 img {
	float: right;
	margin: 0 20px;
}*/

h1 {
	background: #3675bf url('../images/banner.png') no-repeat right top;
	text-align: left;
	padding: 10px 10px 10px 20px;
	margin-bottom: 20px;
	margin-right: -20px;
	border-radius: 0 0 0 30px;
	box-shadow: 0 2px 8px 0 #999;
    color: #fff;
}
h1 img {
	vertical-align: middle;
}

p, li, ul, ol, pre {
	margin-bottom: .5em;
}

a {
	color: #3675bf;
	text-decoration: none;
}
a:hover {
	color: #1955bf;
	text-decoration: underline;
}

input[type=text], input[type=password], select {
	background-color: #c3e7ff;
	padding: 2px;
	border-radius: 5px;
	border: 2px solid #3675bf;
}
input[type=text]:focus, input[type=password]:focus, select:focus {
	background-color: white;
}

.center { text-align: center; }
.right { text-align: right; }
.fleft { float: left; }
.fright { float: right; }
.clear { clear: both; }
.halfWidth { width: 50%; }
.hidden { display: none; }

.big { font-size: 120%; }
.small { font-size: 75%; }
.red { color: red; }
.bold { font-weight: bold; }
.note {
	border-top: 1px solid #ddd;
	margin: 12pt 0 0 0;
	padding-top: 6pt;
	font-size: 75%;
	color: #666666;
}
.unavailable { color: #999999; }
.light{ opacity: .25; }

.upper { text-transform: uppercase; }

.spaceAbove20px { margin-top: 20px; }
.spaceBelow10px { margin-bottom: 10px; }

p.yes {
	background: #c3e7ff url('../images/yes.png') no-repeat 6px center;
}
p.no {
	background: #ffcccc url('../images/no.png') no-repeat 6px center;
}
p.yes, p.no{
	border-radius: 10px;
	padding: 12px 12px 12px 44px;
}

hr {
	border: 0;
	border-top: 1px solid #58b2ff;
	width: 80%;
}
hr.bigSpace {
	margin: 20px auto;
}
.recoverForm {
	width: 350px;
	margin: 20px auto 30px auto;

	background: #E1F5FF;
	border: 3px solid #3675bf;
	border-radius: 10px 20px;
	padding: 10px 10px 0 10px;
	box-shadow: 0 3px 15px 0 #999;
}
/* Menu -------------------------------------------------------------------- */
#menu, .inermediateBlueRow {
	font-size: 20px;
	line-height: 44px;
	height: 44px;
	border: 2px solid #3675bf;
	margin-bottom: 20px;
	text-align: right;
	box-shadow: 0 2px 8px 0 #999, 0 0 8px 0 #3675bf inset;
	border-radius: 5px 15px 5px 15px;
	background: #E1F5FF url('../images/menuBg.png') repeat-x center bottom;
}
.inermediateBlueRow {
	text-align: left;
	margin-top: 20px;
}
h2 {
	font-size: 20px;
	line-height: 26px;
	max-height: 1em;
	max-width: 70%;
	overflow: hidden;
	text-align: left;
	padding: 10px;
	font-weight: normal;
}
.menuBtnSep {
	line-height: 44px;
	padding: 10px 0 10px 2px;
	background: transparent url('../images/menuBtnSep.png') repeat-x center center;
}
.menuBtn {
	line-height: 30px;
	padding: 12px 4px 12px 4px;
	margin: 0 0;
}
.menuBtn:hover {
	background: transparent url('../images/menuBtnSepT.png') repeat-x center center;
}
.menuBtn img {
	vertical-align: bottom;
}
.menuBtn:hover img {
}
.menuBtn span {
	color: white;
	display: inline-block;
	text-align: left;
	width: 0;
	overflow: hidden;

		-webkit-transition: width .5s;
		-moz-transition: width .5s;
		-o-transition: width .5s;
		-ms-transition: width .5s;
	transition: width .5s;
}
.menuBtn:hover span {
	width: 70px;
}
.menuTitleSep {
	background: transparent url('../images/menuTitleSep.png') no-repeat center center;
	width: 10px;
	padding: 8px 4px;
}

/* Bottom bar -------------------------------------------------------------- */
#footer {
	width: 600px;
	margin: 0 auto;
	padding: 20px 0;
}

#helpDesk {
	background: #E1F5FF;
	font-size: 80%;
	padding: 8px 20px;
	border-radius: 5px 10px;
	box-shadow: 0 5px 30px 0 black;
}

#helpDesk p {
	margin: 0;
}

#footer a.mbnet {
	color: black;
	text-decoration: none;
}

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

#footer .green {
	color: #134191;
}



.videoBox {
	padding: 6px 15px;
	white-space: pre-wrap;
}

/* error, warning, debug --------------------------------------------------- */
.errorBox {
	color:red;
	background: #fcc;
	border: 1px solid red;
	padding: .5em;
	border-radius: 10px;
	box-shadow: 0 2px 10px 0 red;
	white-space: pre-wrap;
}
.warningBox {
	color:red;
	background: #fcc;
	border: 1px solid red;
	padding: .2em;
	padding-top: .5em;
	padding-left: .5em;
	list-style-type: none;
	border-radius: 10px;
	box-shadow: 0 2px 10px 0 red;
}
.debugBox {
	color: blue;
	background: #ddd;
	border: 1px solid blue;
	padding: 6px 10px;
	white-space: pre-wrap;
}

/* other boxes */
.inListBox {
	background-color: #eee;
	padding: .5em 1em;
	border-radius: 5px 15px 5px 15px;
	box-shadow: 0 2px 8px 0 #999;
	margin: 20px 0;
}

.inListBox:last-child, .inListBox.noMarginBottom {
	margin-bottom: 0;
}

.inListBox div {
	background: transparent url('../images/certificate.png') no-repeat left 5px;
	padding-top: 5px;
	padding-left: 80px;
	min-height: 52px;
}

.inListBox p.spaceAbove {
	margin-top: .9em;
}

.inListBox.col1 {
	width: 44%;
	float: left;
}
.inListBox.col2 {
	width: 44%;
	float: right;
}

#paymentBox { background-color: #efd; }
#paymentBox div { background-image: url('../images/pay.png'); }

.ppCardsBG {
	background: #efd url('../images/ppCards.png') no-repeat right bottom;
	min-height: 45px;
}

#emailBox div { background-image: url('../images/email.png'); 	padding-left: 60px; }
#phoneBox div { background-image: url('../images/phone.png'); }

.payNowBtn {
	margin: 25px;
	border-radius: 20px;
}
.payNowBtn:hover {
	box-shadow: 0 0 40px 0 #f93;
}


.lessonsList {
	margin: 15px 0;
	border-spacing: 0;
	border: 2px solid #58b2ff;
	border-radius: 5px 15px 5px 15px;
	box-shadow: 0 3px 15px 0 #ccc;
	margin: 35px 0 20px 0;
	padding: 25px 10px 0 10px;
}

.lessonsList ul {
	list-style: none;
	padding: 0;
}

.lessonsList li {
	background: transparent url('../images/doneLesson.png') no-repeat left center;
	padding-left: 24px;
	margin: 8px 0;
	color: #333;
}

#locked {
	margin-top: 45px;
}
#locked li {
	background-image: url('../images/lockedLesson.png');
	color: #999;
}

#locked li#activeLesson {
	background-image: url('../images/activeLesson.png');
	font-size: 120%;
	color: #000;
	cursor: pointer;
	border-radius: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 4px;
	box-shadow: 0 0 10px 0 #3675bf;

		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-o-transition: all .2s;
		-ms-transition: all .2s;
	transition: all .2s;
}
#locked li#activeLesson:hover {
	background-position: 6px center;
	background-color: #34803F;
	color: white;
	box-shadow: 0 0 20px 0 #3675bf;
}

.lessonsList h3 {
	background: #e1f5ff url('../images/menuBg.png') repeat-x center bottom;
	background-size: 100% 75%;

	border-spacing: 0;
	border: 2px solid #58b2ff;
	border-radius: 5px 15px 5px 15px;
	box-shadow: 0 2px 8px 0 #999, 0 0 8px 0 #58b2ff inset;

	font-size: 20px;
	float: left;
	position: relative;
	padding: 4px 10px 4px 10px;
	margin: -43px 0 0 5px;
	width: 50%;
}