body {
	padding: 0px;
	margin: 0px;
	top: 0px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
h1 {
	font-size: 60pt;
	color: #0099cc;
	text-align: center;
	text-transform: uppercase;
	font-weight: 400;
}
h2 {
	font-size: 20pt;
	text-align: left;
	text-transform: uppercase;
	font-weight: 400;
	background-color: #0099cc;
	padding: 10px 22px;
	margin: 20px;
	border-radius: 5px;
}
h2 a {
	color: #000000;
}
h2 .topicon a {
	color: #000000;
}
h2 span, .l-9 span, .l-10 span {
	color: #ffffff;
	text-transform: lowercase;
}
.level-header {
	padding: 10px;
    border-radius: 5px;
}
a:link {
    text-decoration: none;
}
span {
	color: #D12022;
}
.breadcrumb {
	color: #646464;
	font-size: 8pt;
	margin: 20px;
}
.wrap {
	width: 1195px;
	margin: 0 auto;
	position: relative;
}
.intro {
	color:#0200FF;
	font-weight: bold;
	/*font-style: italic;*/
} 
.text_border {
	border-radius: 5px;
	padding: 10px 20px;
	margin: 0 20px;
}
li img {
	width: 100%;
	vertical-align: top;
}
.exercise_bg {
    /*background-color: #f8f8f8;
	border-radius: 5px;*/
    padding: 20px;
    margin: 0 20px;
    border-bottom: 20px solid #DBDBDB;
}
.main_content div:last-child {
    border-bottom: none;
    text-align: center;
}
.exercise_bg li {
	margin-left: -20px;
	padding: 10px;
	border-bottom: 1px dotted #6D6D6D;
	list-style-position: outside;
}
.exercise_bg li, .exercise_bg li .ans {
	text-align: left;
}
.exercise_bg li p {
	display: inline-table;
	width: 90%;
	margin: 0;
}
.exercise_bg li a img {
	padding-left: 10px;
	float: right;
	cursor: pointer;
}
.all-level {
	margin: 15px;
	position: relative;
	display: inline-block;
}
.level-btn {
	padding: 20px;
	margin: 5px;
	border-radius: 5px;
	text-transform: uppercase;
	opacity: 1;
	font-weight: 600;
	width: 238px;
	text-align: center;
	color: #FFFFFF;
	float: left;
}
.level-btn:hover, .print-btn:hover, .as-btn:hover, .qs-btn:hover, .exercise_bg li a img:hover, .audbtn:hover, .ansbtn:hover, .beatbtn:hover, h2 a:hover {
	opacity: .6;
}
.Overview {
	color: #000000;
	background-color: #CCCCCC;
	border: solid 1px #333333;
}
.l-i {
	color: #000000;
	background-color: #0099CC;
	border: solid 1px #003B4F;
}
.l-1 {
	color: #000000;
	background-color: #f8f7ce;
	border: solid 1px #d4d3b0;
}
.l-2 {
	color: #000000;
	background-color: #edf8ce;
	border: 1px solid #d0dab4;
}
.l-3 {
	color: #000000;
	background-color: #cef8ce;
	border: 1px solid #b9deb9;
}
.l-4 {
	color: #000000;
	background-color: #cef8ea;
	border: 1px solid #afd4c8;
}
.l-5 {
	color: #000000;
	background-color: #a4ede9;
	border: 1px solid #8accc8;
}
.l-6 {
	color: #000000;
	background-color: #a4deed;
	border: 1px solid #8dbfcb;
}
.l-7 {
	color: #000000;
	background-color: #a4c8ed;
	border: 1px solid #7e99b4;
}
.l-8 {
	color: #000000;
	background-color: #b0b7e8;
	border: 1px solid #9499c3;
}
.l-9 {
	color: #FFFFFF;
	background-color: #8F0B36;
	border: 1px solid #5E0622;
}
.l-10 {
	color: #FFFFFF;
	background-color: #9e0b0f;
	border: 1px solid #2F0304;
}
.l-9 a, .l-10 a {
	color: #FFFFFF;
}
.progress {
	width: 100%;
	text-align: center;
	border-radius: 5px;
}
.progress-border {
	padding: 27px;
	border: 1px solid #333333;
	border-radius: 5px;
}
#courseoverview p span, #courseoverview li span {
	color: #223BF0;
}
.col {
	display: table;
	margin: 0px auto;
	top: 10px;
}
.topicon {
	color: #000000;
	font-size: 12pt;
	height: 21px;
	padding-left: 25px; 
	margin-top: 5px;
	float: right;
	background-repeat: no-repeat;
	cursor: pointer;
}
.print-btn {
	background-image: url(../images/print-icon.png);
}
.print-btn a {
	color: #000000;
}
/*.l-9 .as-btn, .l-10 .as-btn {
	background-image: url(../images/answersheet-icon-w.png);
	margin-left: 10px;
}
.l-9 .qs-btn, .l-10 .qs-btn {
	background-image: url(../images/questionsheet-icon-w.png);
}*/
.as-btn, .qs-btn {
    font-size: 8pt;
    text-transform: lowercase;
    line-height: 2em;
}
.as-btn {
    background-image: url(../images/answersheet-icon.png);
    margin-left: 10px;
}
.qs-btn {
	background-image: url(../images/questionsheet-icon.png);
}
.audbtn {
	background-image: url(../images/play-icon.png);
}
.ansbtn {
	background-image: url(../images/answer-icon.png);
	margin-left: 10px;
}
.beatbtn {
	background-image: url(../images/beat-icon.png);
	margin-right: 10px;
}
.audbtn, .ansbtn, .beatbtn {
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	float: right;
	cursor: pointer;
}
.l-i_bgcolor audio, .l-i_bgcolor .ans {
	display: none;
	padding: 10px;
	background-color: #A1C8D7;
	margin-top: 10px;
	position: relative;
	width: 100%;
	right: 10px;
	animation: animatetop 0.2s;
}
audio, .ans {
	padding: 10px;
	text-transform: lowercase;
	display: none;
	background-color: #B1B1B1;
	margin-top: 10px;
	position: relative;
	width: 100%;
	right: 10px;
	animation: animatetop 0.2s;
}
.ans span {
	color: #000000;
	text-transform: uppercase;
}
.ans a {
	text-transform: none;
	font-weight: bold;
	color: #FFFFFF;
	font-size: 10pt;
	float: right;
}
@keyframes animatetop {
	from{top:-10px;opacity:0} to{top:0;opacity:1}
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
	audio {
		height: 100px;
	}
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
	audio {
		height: 55px;
	}
}
audio::-internal-media-controls-download-button { 
	display: none !important; 
} 
audio::-webkit-media-controls-enclosure { 
	overflow: hidden !important; 
} 
audio::-webkit-media-controls-panel { 
	width: calc(100% + 35px) !important;
}

#hide li, #hide .ansbtn, #hide .audbtn, #hide .beatbtn, #hide-exercise, #hide_l-9 div {
	opacity: .3;
	cursor: default;
}