/* SCREEN 1 - Selection */

.oym-intro, .oym-select {
float: left;
width: 93.5%;
padding: 2% 3% 0 3%;
background: #F2F6F6;
border: 1px solid #ECEFEF;
}

.oym-intro { margin-bottom: 3%; }

.oym-select { margin-bottom: 2% ; }

.oym-intro img {
float: right;
margin: 0 0 0 4%;
}

.oym-select .onethird {
width: 32% !important;
margin-right:2%;
}

.oym-select .lastthird {
width: 32% !important;
margin-right:0;
}


.oym-instrument {
display: block;
float: left;
width: 100%;
margin: 0 2% 2% 0;
border: 1px solid #F2F2F2;
}

.oym-instrument a {
display: block;
float: left;
padding: 3%;
position: relative;
width: 94%;
height: 100%;
min-height: 130px;
background: white;
text-align: center;
}

.oym-instrument span.label {
font-family: "Din Text Pro Regular", 'DINPro', Verdana, sans-serif;
font-size-adjust: 0.5;
font-style: normal;
color: #333;
font-size: 1.25em;
line-height: 1.2em;
}

.oym-instrument a .icon {
display: block;
position: absolute;
bottom: 5%;
left: 0;
width: 80%;
padding: 0 10%;
height: auto;
}

.oym-instrument a .icon img {
margin: auto;
}

.oym-instrument a:hover  {
		background: #E8E8E8 !important;
		text-decoration: none;
	}
	
	
.oym-select .instrument a	{ cursor: default;}
.oym-select .instrument a:hover	{ background: #FFF !important;}
	
.oym-select .instrument {
margin: 0 2.7% 0 0 !important;	
}



.oym-exam-grades li.select-none a, .oym-exam-grades li.select-none a:hover { 
cursor: default;
color: #c9cdcd;
background: #ebefef none;
border: 1px solid #ebefef;
border-color:#ebefef;
}



.oym-exam-grades {
	float: left;
	min-height: 0;
	width: 45.5%;
	margin-bottom: 2% !important;
	margin-right: 2%;
	background: #F2F6F6;
    border: 1px solid #ECEFEF;
	padding: 1%;
}

.oym-exam-grades li a {
	color: #333;
}

.oym-exam-grades.single {
	width: 97.5%;
}

.oym-exam-grades ul {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 55%;
}

.oym-exam-grades.single ul {
	width: 70%;
}

	.oym-exam-grades li {
		margin: 0;
		padding: 0px 14px 12px 0;
		float: left;
	}

	.oym-exam-grades li a {
		display: block;
		float: left;
		background: #fff url('../images/button-bg.png') bottom repeat-x;
		padding: 8px 14px;
		border: 1px solid #e1e1e1;
		border-radius: 4px;
		text-decoration: none;
	}
	
.oym-exam-grades li a {
font-family: "Din Text Pro Bold", 'DINPro', Verdana, sans-serif;
font-size-adjust: 0.5;
font-weight: bold;
font-style: normal;
text-decoration: none;
font-size: 1.25em;
font-weight: 700;
}	

.oym-exam-grades li a:hover {
		background: #ed3325 url('../images/button-bg-hover.png') bottom repeat-x;
		border-color: #8e1f16;
}
	
.oym-exam-grades li a:hover {
color: #fff; }	

	.oym-exam-grades li h1 {
		clear: none;
		float: left;
		margin: 0;
		padding: 4px 0;
	}





.oym-headerimage {
bottom: 0;
position: absolute;
}	
	
	
	
.oym-intro-text { float:left; }

.oym-title-bar {
	float: left;
	width: 100%;
	margin-bottom: 1%;
}

.oym-title-bar h1 {
	float: left;
	border: 0;
}

.oym-progress {
	float: right;
	width: 50%;
	margin-top: 8px;
}

.oym-title-bar h5 {
	float: right;
	margin: 9.5px 10px 0 0;
}

.oym-progress span {
	display: block;
	float: left;
	background: #73AFB6;
	width: 16.1%;
	padding: 1% 0;
	text-align: center;
	font-family: "Din Text Pro Bold", 'DINPro', Verdana, sans-serif;
	font-size-adjust: 0.5;
	font-weight: bold;
	color: #fff;
	border: 1px solid #fff;
}

.oym-progress span.one {
	opacity: 0.9;
}

.oym-progress span.two {
	opacity: 0.8;
}

.oym-progress span.three {
	opacity: 0.7;
}

.oym-progress span.four {
	opacity: 0.6;
}

.oym-progress span.five {
	opacity: 0.5;
}

.oym-progress span.six {
	opacity: 0.4;
}

.oym-progress span.active {
	opacity: 1;
	background: #ee3325;
}

.oym-progress span.complete {
	background: #ccc;
	opacity: 1;
	text-align: center;
}

	.oym-progress span.complete img {
		display: inline;
		width: 16px;
		height: auto;
		margin-bottom: -3px;
	}


/* SCREEN 2 - Welcome */


.oym-welcome, .oym-boxed {
position: relative;
float: left;
width: 93.5%;
overflow: hidden;
margin: 0 0 2.5% 0;
z-index: 1000;
padding: 2% 3%;
background: #E6F0F0;
border: 1px solid #ECEFEF;
}

.oym-boxed {
	padding: 3% 3% 2%;
}

.oym-welcome p, .oym-welcome h2 {
	color:#333; 
}

.centered {text-align: center;}

.button-vpadding { margin: 10% 0 !important; }

.cta.button a {padding: 10px 30px !important; }

.oym-welcome-elements span.label {
font-family: "Din Text Pro Regular", 'DINPro', Verdana, sans-serif;
font-size-adjust: 0.5;
font-style: normal;
color: #333;
font-size: 1.1em;
line-height: 1em;
}

.oym-welcome-elements ul li .icon img {
margin: 0 auto 5px auto;
}


/* SCREEN 3 - Elements */

.oym-elements { overflow:hidden; position: relative;}

.oym-element { color:#FFF;
background: #73afb6;
float:left;
width:47%;
min-height:200px;
margin: 0 2% 2% 0; 
padding: 1%;
text-align:center;
position:relative;
}

.element-active { cursor:pointer;}
.completed { cursor: default;}

.completed-icon { position:absolute; top:30%; left:40%; }

.oym-elements .completed {	
	 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	   	 filter: alpha(opacity=30);
   -moz-opacity: 0.3;
 -khtml-opacity: 0.3;
        opacity: 0.3;			
	}
	
.completed h3 { background: none !important;}	

h2.oym-header, h2.oym-header-completed { 
font-size: 2em;
font-family: "Din Text Pro Regular", 'DINPro', Verdana, sans-serif;
font-weight: normal;
font-style: normal;
margin: 0 0 10px;}

h2.oym-header { color:#666;}
h2.oym-header-completed { color:#CCC;}

.oym-element h3 { background: #73afb6;}

.sight-reading { background: #e9e9e9 url(../images/element-piano-sight.jpg) no-repeat center center; }
.pieces { background: #e9e9e9 url(../images/element-piano-pieces.jpg) no-repeat center center; }
.aural-tests { background: #e9e9e9 url(../images/element-piano-aural.jpg) no-repeat center center; }
.scales-and-arpeggios { background: #e9e9e9 url(../images/element-piano-scales.jpg) no-repeat center center; }

.pieces-violin { background: #e9e9e9 url(../images/element-violin-pieces.jpg) no-repeat center center; }
.scales-and-arpeggios-violin { background: #e9e9e9 url(../images/element-violin-scales.jpg) no-repeat center center; }

.oym-element p,
.oym-mark-button { visibility:hidden; }

.element-rollover p,
.element-rollover .oym-mark-button { visibility: visible !important; }

.element-rollover { background: none #73afb6 !important; }


.clear-right { margin: 0 0 2% 0; }

.oym-element h3 { color:#FFF; font-size: 1.7em; line-height: 1.7em; float: left; padding: 0 8px; }
.oym-element-header {width:100%; overflow: hidden;}
.oym-element p {padding: 0 2%; text-align:left !important;}


.oym-mark-button {
background: #666;
padding: 7px 12px;
margin: 10px auto 10px auto;
border: 1px solid #666;
border-radius: 4px;
color: #FFF;
font-weight: 700;
font-size: 0.9em;
text-transform: uppercase;
font-family: "Din Text Pro Bold", 'DINPro', Verdana, sans-serif;
font-size-adjust: 0.5;
font-weight: bold;
font-style: normal;
text-decoration: none;
white-space: nowrap;
display: inline-block;
}

.oym-boxed .oym-mark-button:hover {
background: #73afb6;
border: 1px solid #73afb6;
color: #fff;
cursor: pointer;
text-decoration: none;
}

span.icon-scales-and-arpeggios { background: url(../images/icons/oym-scales-and-arpeggios-white.png) no-repeat 0px 0px; }
span.icon-pieces { background: url(../images/icons/oym-pieces-white.png) no-repeat 0px 0px; }
span.icon-sight-reading { background: url(../images/icons/oym-sight-reading-white.png) no-repeat 0px 0px; }
span.icon-aural-tests { background: url(../images/icons/oym-aural-tests-white.png) no-repeat 0px 0px; }

span.icon-scales-and-arpeggios, span.icon-pieces, span.icon-sight-reading, span.icon-aural-tests {
float: left;
width: 28px;
height: 28px;
margin: 4px 8px 0 0;
}


/* SCREEN 4 - Element */


.oym-marking {
float: left;
padding: 10px;
background: #fff url('../images/promo-background.jpg') repeat-x;
border: 1px solid #eee;
margin-bottom:20px;
width: 97%;
min-height: 64px;
}

.oym-marking-icon {
float: left;
width: 48px;
height: 48px;
margin:5px;
}

.oym-marking-text { margin-left: 68px; }

.oym-marking-text ol {
	margin-bottom: 0;
}

.oym-marking-text h2 { 
font-size: 1.7em;
font-weight: normal;
font-style: normal;
margin: 0 0 0.3em;
color:#009AC2;
}

.oym-marking-text h2 span { 
color:#666;
}

.oym-marking-text p { margin: 0; }


.oym-video-container { width:60%; float:left; margin-bottom: 2%; }

.oym-video {
position: relative;
padding-bottom: 56.25%;
/*padding-top: 30px;*/
height: 0;
overflow: hidden;
}


.oym-video iframe,
.oym-video object,
.oym-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.oym-criteria-container { width:38%; float:right; margin-bottom: 2%; }

.oym-criteria-header {width:100%; overflow: hidden; margin-bottom:6px;}

.oym-criteria-container h3 {
float:left; 
font-size: 1.4em;
margin: 0;
color: #666;
line-height: 1em;
}

.column p img.oym-pdf {float:left !important; display:inline; margin:0 4px 0 0 !important;}

.oym-criteria-container p { float:right;}

.oym-criteria  {
	 margin: 0;
	 border: 1px solid #eee;
	 overflow: hidden;
	 background: #c6dee1;
}
	
.criteria-tabs { width:30%; float:left; font-family: "Din Text Pro Regular", 'DINPro', Verdana, sans-serif; cursor:pointer;}
.criteria-tab, .criteria-tab-current { text-align:center; padding: 19px 0; border-bottom: 4px solid #E6F0F0; }
.criteria-tab .last, .criteria-tab-current .last { border-bottom: none !important; }
.criteria-content { margin-left: 30%; padding: 10px;}



.criteria-tab {
	color: #777;	
    background-color: #f4f6f6;
}


.criteria-tab:hover {
	color: #444;
    background-color: #c6dee1;
}


.criteria-tab-current, .criteria-tab-current:hover {
	color: #444;
    background-color: #c6dee1;
}

.criteria-content li { padding: 2% 0; }

.oym-boxed .oym-mark-button { visibility: visible !important; }

.oym-answer {
width:100%; 
float:left;
overflow: hidden;
}

.oym-answer h3, .oym-answer p {
margin: 1em 0 0;
}

.oym-answer h3 {
font-size: 1.5em;
}

.oym-btn-answer, .oym-btn-replay {
display: inline-block;
line-height: 1.2em;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
  padding: 10px 3%;
  margin: 0 1% 1% 0;
  width: 17%;
  color: #666;
  
  border: #c6c6c6 solid 1px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;  
	
font-size: 1em;	  
text-transform: uppercase;
font-family: "Din Text Pro Bold", 'DINPro', Verdana, sans-serif;
font-weight: bold;
font-style: normal;	

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #d9dadb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d9dadb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#d9dadb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#d9dadb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#d9dadb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#d9dadb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9dadb',GradientType=0 ); /* IE6-9 */	   
}


.oym-btn-answer:hover, .oym-btn-replay:hover {
color: #fff;
text-decoration: none;

  border: #99b53f solid 1px;

background: #93ad3c; /* Old browsers */
background: -moz-linear-gradient(top, #abc946 0%, #7b9132 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abc946), color-stop(100%,#7b9132)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #abc946 0%,#7b9132 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #abc946 0%,#7b9132 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #abc946 0%,#7b9132 100%); /* IE10+ */
background: linear-gradient(to bottom, #abc946 0%,#7b9132 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abc946', endColorstr='#7b9132',GradientType=0 ); /* IE6-9 */
}





 


/* SCREEN 5 - All elements completed*/

.oym-final-mark {
position: absolute;
top: 40%;
width: 100%;
z-index: 1000;
text-align:center;
}

.oym-btn-large {
display: inline-block;
line-height: 1.2em;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-decoration: none;
  padding: 19px 24px;
  color: #fff;
  border: #FFF solid 8px;
  -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
          border-radius: 12px;
	
font-size: 1.7em;	  
text-transform: uppercase;
font-family: "Din Text Pro Bold", 'DINPro', Verdana, sans-serif;
font-weight: bold;
font-style: normal;	

background: #abc946; /* Old browsers */
background: -moz-linear-gradient(top, #abc946 0%, #7b9132 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abc946), color-stop(100%,#7b9132)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #abc946 0%,#7b9132 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #abc946 0%,#7b9132 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #abc946 0%,#7b9132 100%); /* IE10+ */
background: linear-gradient(to bottom, #abc946 0%,#7b9132 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abc946', endColorstr='#7b9132',GradientType=0 ); /* IE6-9 */	   
}


.oym-btn-large:hover {
color: #fff;
text-decoration: none;

background: #eb3224; /* Old browsers */
background: -moz-linear-gradient(top, #eb3224 0%, #a9241a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eb3224), color-stop(100%,#a9241a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eb3224 0%,#a9241a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eb3224 0%,#a9241a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eb3224 0%,#a9241a 100%); /* IE10+ */
background: linear-gradient(to bottom, #eb3224 0%,#a9241a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb3224', endColorstr='#a9241a',GradientType=0 ); /* IE6-9 */
}



/* SCREEN 6 - Result */

.oym-result h2 {
font-size: 1.7em;
font-weight: normal;
font-style: normal;
margin: 0 0 0.5em;
color: #666;
}

.oym-result h2 span { 
color:#009AC2;Facebook social plugin
}


.oym-breakdown {
background: #C6DEE1;
float:right;
width:38%;
}

.breakdown-row {
padding: 4% 5%;
border-bottom: 1px solid #E6F0F0;
overflow: hidden;
}

.breakdown-row h3 { float:left; color: #666; }
.breakdown-row h3 span { color:#009AC2; }

.breakdown-row .icon { float:left; margin-right: 5%;}



.oym-replay-container {
margin:15px 0;
background: #F2F6F6;
border: 1px solid #ECEFEF;
float:right;
width:38%;
 }

.oym-replay {
padding: 1%;
overflow: hidden;
text-align:center;
}


.oym-btn-replay {
line-height: 1.2em;
padding: 15px 2%;
margin:4% 1%;
width:40%;
font-size: 1em !important;	  
}


.oym-btn-sheetmusic {
width:96% !important;
padding: 10px 2% !important;
margin: 5% 0% !important;  
}

.oym-replay p {margin: 0 0 1em 0;}



.oym-share-container {
margin-top: 3%;
width: 92%;
float: left;
background: #F2F6F6;
border: 1px solid #ECEFEF;
padding: 4%;
}





/* SHARE STYLES */

.oym-share {
float: left;
width: 99.5%;
padding: 0;
}

.fb-like {float:right;}	
.tweet {float:right; margin-top:3px;}

.fb-comments { margin-top:15px; }

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}



/* RESPONISVE STYLES */


@media screen and (max-width: 1200px) {

#oym-welcome-message { width:75%;}
.oym-intro-buttons { display:none;}
.oym-intro-text { width: auto; }
.oym-welcome p {line-height: 1.4em;}
}


@media screen and (max-width: 1024px) {

.oym-exam-grades ul { width: 40%; }


}



@media screen and (max-width: 1000px) {
	
.oym-intro-text { width:100%; }
.oym-intro-buttons { display:none;}			

.oym-welcomeimage {display:none;}

.oym-title-bar {
    margin-bottom: 3%;
}

.oym-progress {
	width: 85%;
	margin-top: 8px;
}

.oym-progress span {
	width: 15.9%;
}


#oym-welcome-message {
position: static;
z-index: 1500;
top: 0;
right: 0;
width: auto;
height: 100%;
margin: 0;
padding: 2%;

background: #F2F6F6;
border: 1px solid #ECEFEF;
}



.oym-element {
float: left;
width: 96%;
margin: 0 2% 2% 0;
padding: 1% 2%;
min-height:0; 
}	

.oym-final-mark { top: 8%; }

.oym-video-container { width:100%; }

.oym-criteria-container { width:100%; float:left; }

.oym-criteria-header { margin-top: 10px; }

.oym-answer-container { width:100%; }

.oym-replay-container { width:100%; float:left; }



.oym-breakdown { float: left; width: 100%; }


.oym-btn-answer, .oym-btn-replay {
font-size: 1.2em;
}


}

@media screen and (max-width: 980px) {
	


.oym-exam-grades ul {
	width: 100%;
}

	.oym-exam-grades li {
		margin: 0;
		padding: 6px 14px 6px 0;
		float: left;
	}
	
.oym-mark-button { margin: 10px auto; padding: 4px 12px; }

.oym-element p { margin: 0 !important; }



@media screen and (max-width: 600px) {


.oym-title-bar h5 {
    margin-top: 4.5px;
}

.oym-progress {
	width: 75%;
	margin-top: 4px;
}


.oym-progress span {
	width: 15.1%;
}

	

.oym-exam-grades {
	width: 100%;
}

.oym-btn-answer, .oym-btn-replay {
font-size: 1em;
}



/*
.oym-marking-text p, .oym-criteria-container {
display: none;
}
*/





}