@font-face
{
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?utxan5');
    src: url('fonts/icomoon.eot?#iefixutxan5') format('embedded-opentype'), url('fonts/icomoon.woff?utxan5') format('woff'), url('fonts/icomoon.ttf?utxan5') format('truetype'), url('fonts/icomoon.svg?utxan5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"], .oet-accordion-container input:checked + label:before, .oet-accordion-container label:before, .oet-accordion-container input:checked + label:before, .timerbar .hasCountdown:before
{
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
ul.skill-set
{
    display: block;
    margin: 15px auto;
    width: 96%;
    padding: 10px;
    overflow: hidden;
    list-style: none;
}
ul.skill-set li
{
    display: inline;
    float: left;
    margin-right: 20px;
}
ul.skill-set li a
{
    display: block;
    text-decoration: none;
    outline: none;
}
ul.skill-set span
{
    display: block;
    text-align: center;
    margin: 40px auto;
    font-size: 1em;
    color: #1B3647;
}
ul.skill-set [class^="icon-"]:before
{
    content: "\e60a";
    font-size: 7em;
    background-color: #1B3647;
    color: #FFFFFF;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 20px;
}
ul.skill-set a:hover [class^="icon-"]:before
{
    background-color: #AAD03C;
    color: #1B3647;
}
ul.skill-set .icon-reading:before
{
    content: "\e602";
}
ul.skill-set .icon-writing:before
{
    content: "\e600";
}
ul.skill-set .icon-listening:before
{
    content: "\e603";
}
ul.skill-set .icon-speaking:before
{
    content: "\e601";
}

/* Stars */
.star-table
{
    border-collapse: collapse;
    border: none;
}
.star-table td
{
    padding: 20px;
    text-align: left;
    border: 1px solid #EAEAEA;
}
.star-table tr td:first-child
{
    background-color: #F6F6F6;
}
.star-table2 td
{
    padding: 15px;
    text-align: left;
    border: 1px solid #EAEAEA;
}
.star-table2 tr td:first-child
{
    background-color: #F6F6F6;
}
.star-table2 p
{
     margin-top:.1em;
	 margin-bottom:.1em;
	 
}
a.stars
{
    text-decoration: none;
    outline: none;
}
.star-text
{
    display: none;
}
.icon-star:before
{
    background-color: #1B3647;
    color: #FFFFFF;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 1em;
    padding: 5px;
    content: "\e606";
}
a.stars:hover .icon-star:before
{
    background-color: #AAD03C;
    color: #1B3647;
}

/* Audio & Recording */
.icon-record:before, .icon-play:before, .icon-answer:before
{
    color: #E64D3B;
    -webkit-border-radius: 50%;
    border: 2px solid #999999;
    border-radius: 50%;
    font-size: 1.3em;
    padding: 5px;
    margin-right: -30px;
    margin-left: 15px;
    -webkit-box-shadow: 0px 0px 2px 2px #DEDEDE;
    box-shadow: 0px 0px 2px 2px #DEDEDE;
}
.icon-record:before
{
    content: "\e609";
    color: #F5524B;
}
.icon-play:before
{
    content: "\e607";
    color: #3FC6D9;
}
.icon-answer:before
{
    content: "\e614";
    color: #D5891B;
}
.icon-record:hover:before, .icon-answer:hover:before, .icon-play:hover:before
{
    color: #FFFFFD;
    background-color: #F5524B;
}
.icon-answer:hover:before
{
    background-color: #D5891B;
}
.icon-play:hover:before
{
    background-color: #3EC5D8;
}
[class^="icon-"] input.play, [class^="icon-"] input.record, [class^="icon-"] input.listen, [class^="icon-"] input.stop
{
    text-indent: -99999px;
    border: medium none;
    color: #000000;
    cursor: pointer;
    font-size: 0;
    height: 30px;
    line-height: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    width: 30px;
    opacity: 0;
}

/* Karaoke */
.karaoke input.play, .karaoke input.record, .karaoke input.listen, .karaoke input.stop
{
    border: none;
    -moz-border-radius: 0;
    padding: 0;
    margin: 0;
    width: 35px;
    height: 35px;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    background: transparent url('../images/play.png') no-repeat top center;
    color: #000;
    vertical-align: middle;
}
.karaoke input.play:hover
{
    background-image: url('../images/play-hover.png');
}
.karaoke input.play.stop, .karaoke input.play.stop:hover
{
    background-image: url('../images/play-stop.png');
}
.karaoke input.record
{
    background-image: url('../images/record.png');
    color: #E20019;
}
.karaoke input.record.stop, .karaoke input.record.stop:hover
{
    background-image: url('../images/record-stop.png');
}
.karaoke input.record:hover
{
    background-image: url('../images/record-hover.png');
}
.karaoke input.listen
{
    background-image: url('../images/listen.png');
    color: #E6EDF0;
}
.karaoke input.listen:hover
{
    background-image: url('../images/listen-hover.png');
}
.karaoke input.listen.stop, .karaoke input.listen.stop:hover
{
    background-image: url('../images/listen-stop.png');
}
.karaoke input.part.play
{
    background-image: url('../images/play-all.png');
    color: #000;
}
.karaoke input.stop, .karaoke input.part.stop
{
    background-image: url('../images/stop.png');
    color: #000;
}
.karaoke input.stop:hover, .karaoke input.part.stop:hover
{
    background-image: url('../images/stop.png');
    color: #000;
}
.karaoke .karaoke-box
{
    border: solid 2px #fed16e;
}
.karaoke div.karaoke-box
{
    padding: 3px 6px;
}
.karaoke table.karaoke-box
{
    width: 100%;
}
.karaoke table.karaoke-box td
{
    padding: 3px;
}
.karaoke .karaoke-box .sentence-list, .karaoke .karaoke-box .sentence-list li
{
    margin: 0;
}
.karaoke .part-recording-playback
{
    margin-left: 580px;
    margin-top: 14px;
    width: 120px;
    position: absolute;
}
.karaoke .part-recording-playback .panel
{
    border: 2px solid #FED16E;
    margin-bottom: 1em;
    padding: 5px;
    text-align: center;
    background-color: #fff;
}
.karaoke .part-recording-playback .panel h4, .karaoke .part-recording-playback .panel p
{
    margin: 0;
    padding: 0;
}
.karaoke .part-recording-playback .panel h4
{
    margin-bottom: .3em;
}

/* Audio Embed */
.nekoEmbeddedAudio
{
    /*background-image: url("../images/listen.png");*/
}
.nekoEmbeddedAudio:hover, .nekoEmbeddedAudio-wrap:hover
{
    /*background: transparent url("..images/listen-hover.png");*/
}

/* Timerbar */
.timerbar
{
    border: 1px solid #D4D4D4;
    background-color: #FFFFFF;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    z-index: 999999;
}
.timerbar .menu, .timerbar .timerbar-action
{
    background-color: #E9E9E9;
    height: 40px;
    padding: 15px 10px 5px;
    border: 0;
    position: relative;
    margin: 0 auto;
}
.timerbar > .main > .menu .nav
{
    position: relative;
    margin: 0 auto;
    width: 40%;
    max-width: 300px;
    min-width: 250px;
}
.timerbar > .main > .menu .nav .navbtn-prev
{
    border-right: 14px solid #000000;
    float: left;
}
.timerbar > .main > .menu .nav .navbtn-nxt
{
    border-left: 14px solid #000000;
    float: right;
}
.timerbar > .main > .menu .nav .navbtn-prev, .timerbar > .main > .menu .nav .navbtn-nxt, .timerbar > .main > .menu .nav input
{
    padding: 0;
    content: "";
    width: 0;
    height: 0;
    margin-top: 1px;
    border-top: 10px solid rgba(255, 255, 255, 0);
    border-bottom: 10px solid rgba(255, 255, 255, 0);
    -moz-transform: scale(.9999);
    -webkit-transform: rotate(360deg);
}
.timerbar > .main > .menu .nav input
{
    background: none;
    width: 41px;
    height: 30px;
    position: relative;
}
.timerbar .timerbar-action input[type="button"], .timerbar .timerbar-action input[type="button"]:active, .timerbar .timerbar-action input[type="button"]:focus
{
    padding: 10px;
    color: #E54E39;
    border: 2px solid #E54E39;
    background-color: #EFEFEF;
    cursor: pointer;
    font-weight: bold;
    width: 20%;
    margin-left: 40%;
    outline: 0;
}
.timerbar .timerbar-action input[type="button"]:hover
{
    background-color: #E54E39;
    color: #FFFFFF;
}
.timerbar .timerbar-action input[type="button"].save[rel="reset"]
{
    border: 2px solid #555555;
    color: #555555;
}
.timerbar .timerbar-action input[type="button"].save[rel="reset"]:hover
{
    background-color: #555555;
    color: #FFFFFF;
}
.timerbar > .main > .timer
{
    color: #E64D3B;
    z-index: 999999;
    width: 200px;
}
.timerbar .hasCountdown:before
{
    content: "\e615";
    padding: 8px;
    font-size: 2.5em;
    color: #E64D3B;
}
.timerbar .hasCountdown
{
    position: relative;
}
.timerbar .menu, .timerbar .nav-bottom
{
    background-color: #E9E9E9;
    height: 30px;
    padding: 15px 10px 5px;
    border: 0;
    position: relative;
    margin: 0 auto;
}
.timerbar .countdown_show2 .countdown_section
{
    width: 50px;
}
.timerbar .hasCountdown .countdown_section
{
    float: none;
    display: inline-block;
}
.timerbar .moduletest
{
    background-color: #EFEFEF;
}
.timerbar .pageContent
{
    margin: 0;
}

.timerbar .score-message-image
{
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid #EAEAEA;
    float: right;
    margin: 5px 20px;
}
.timerbar .score-message-text h3, .timerbar .test-report h3
{
    color: #1691BB;
    font-weight: bold;
}
.timerbar .score-message-text h4, .timerbar .test-report h4
{
    color: #A6A495;
    font-weight: bold;
}

.timerbar .score-message-text table
{
    border-collapse: collapse;
    border: none;
}
.timerbar .score-message-text table td, .timerbar .score-message-text table th
{
    padding: 20px;
    text-align: left;
    border: 1px solid #EAEAEA;
}
.timerbar .score-message-text table tr td:first-child, .timerbar .score-message-text table tr th:first-child
{
    background-color: #F6F6F6;
}
.timerbar .score-breakdown .info-box-body
{
    margin: 0 auto;
}
.timerbar .score-breakdown .info-box-body p
{
    text-align: left;
    font-size: 1.5em;
    line-height: 1.8em;
    color: #FFB43D;
}
.timerbar .info-box, table.test-report
{
    width: 100%;
    display: block;
    min-width: 300px;
}

.timerbar .score-message-note
{
    background-color: #AAD03C;
    color: #333333;
    font-size: 1.1em;
    line-height: 1.3em;
    padding: 10px;
}
.timerbar .score-message-note ul
{
    list-style-image: none;
}

.timerbar table.test-report
{
    border-collapse: collapse;
    background: #FFFFFF;
    font-size: 1.1em;
}
.timerbar table.test-report tbody tr
{
    background-color: #f1f2f2;
}
.timerbar table.test-report tbody tr:nth-child(2n-1) {
    background-color: #f5f5f5;
    -webkit-transition: all .125s ease-in-out;
    -moz-transition: all .125s ease-in-out;
    -ms-transition: all .125s ease-in-out;
    -o-transition: all .125s ease-in-out;
    transition: all .125s ease-in-out;
}
.timerbar table.test-report tbody tr:hover {
    background-color: #A2C5E3;
}
.timerbar table.test-report td, .timerbar table.test-report th
{
    text-align: left;
    padding: 1em 1.5em;
    box-sizing: border-box;
}
.timerbar table.test-report th
{
    font-weight: bold;
    color: #FFFFFF;
    background-color: #06A8C8;
}
.timerbar table.test-report td.title
{
    color: #333333;
    width: 60%;
}
.timerbar table.test-report td.result
{
    color: #000000;
    font-weight: bold;
    width: 20%;
    text-align: right;
}
.timerbar table.test-report td.instruction
{
    display: none;
}

.timerbar .score-breakdown .info-box-body:before {
    content: '!'; 
    font-weight: normal;
    opacity: 0.7;
    font-size: 136px;
    position: absolute;
    top: -20px;
    left: 5px;
    color: #FFB43D;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.timerbar .score-breakdown .info-box-body {
    padding-left: 50px;
}
.timerbar .score-breakdown .info-box
{
    background-color: #15557E;
    vertical-align: top;
    position: relative;
}
.timerbar .score-breakdown .info-box .sign
{
    background-image: none;
}
.timerbar .score-breakdown .info-box .info-box-content
{
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    border: none;
    color: #FFB43D;
}
.timerbar .score-breakdown .info-box-content .inner-wrapper
{
    background-color: #15557E;
}
/* Mediabar */
.mediabar
{
    border: 1px solid #D4D4D4;
    background-color: #FFFFFF;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.mediabar .dictionary
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 2px solid #CCCCCC;
    padding: 5px 8px 5px;
    background-color: #F5F5F5;
}
.mediabar .dictionary .search-word
{
    border: 2px solid #bdc3c7;
    color: #34495e;
    line-height: 1.467;
    padding: 5px 12px;
    height: 1em;
    -webkit-appearance: none;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
    transition: border .25s linear, color .25s linear, background-color .25s linear;
}
.mediabar .dictionary .search-submit
{
    background: url("../images/dictionary.png");
    background-repeat: no-repeat;
    background-size: 25px 25px;
}
.mediabar .dictionary .search-word:focus
{
    border-color: #E64D3B;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.mediabar .nav-bottom, .mediabar .menu, .mediabar .justnav
{
    background-color: #E9E9E9;
    height: 30px;
    padding: 15px 10px 5px;
    border: 0;
    position: relative;
    margin: 0 auto;
}
.mediabar .navbtn-prev, .mediabar .navbtn-nxt
{
    background: none;
    width: 41px;
    height: 30px;
    position: relative;
}
.mediabar .menu
{
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.mediabar .nav-bottom
{
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
.mediabar .navbtn-prev
{
    border-right: 14px solid #000000;
    margin-right: 20px;
}
.mediabar .navbtn-nxt
{
    border-left: 14px solid #000000;
    margin-left: 20px;
}
.mediabar .navbtn-prev, .mediabar .navbtn-nxt
{
    padding: 0;
    content: "";
    width: 0;
    height: 0;
    margin-top: 1px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    -moz-transform: scale(.9999);
    -webkit-transform: rotate(360deg);
}
.mediabar .popups input
{
    width: 40px;
    height: 40px;
}
.mediabar .popups input:hover
{
    border: none;
    outline: none;
}
.mediabar .popups .possibleanswer, .mediabar .popups .hint, .mediabar .popups .tip
{
    background-size: 30px 30px;
    background-repeat: no-repeat;
}
.mediabar .popups .possibleanswer
{
    background-image: url("../images/file.png");
}
.mediabar .popups .tip
{
    background-image: url("../images/lightbulb.png");
}
.mediabar .popups .hint
{
    background-image: url("../images/card.png");
}
.mediabar .nav
{
    padding-top: 0px;
}
.mediabar .pageContent
{
    margin: 0;
}

/* Mediapopup */
.mediapopup
{
    border: 2px solid #542C8D;
    width: 500px;
    background-color: #FFFFFF;
}
.mediapopup ul
{
    list-style-image: none;
}
.mediapopup .drag
{
    background-color: #542C8D;
    height: 30px;
}
.mediapopup input[type="button"]
{
    background-color: #542C8D;
    padding: 5px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
}
.mediapopup .content
{
    padding: 5px;
    background-color: #FFFFFF;
}
.mediapopup .content table td
{
    padding: 10px;
    vertical-align: top;
}
.mediapopup .content .mediapopup-heading
{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
}
.mediapopup table
{
    width: 100%;
}
.mediapopup .mediapopup-content table td:nth-child(1)
{
    width: 20%;
    font-weight: bold;
    color: #333333;
}
.mediapopup .mediapopup-content table td:nth-child(2)
{
    width: 80%;
}
.mediapopup .mediapopup-heading table td:nth-child(1)
{
    color: #FFFFFF;
    width: 50%;
}
.mediapopup .mediapopup-heading table td:nth-child(2)
{
    text-align: right;
    width: 50%;
}
.mediapopup .content .mediapopup-content td
{
    padding: 20px;
}

/* Check Answer */
input[type="button"].checkanswer, input[type="button"].reset, input[type="button"].answerkey, input[type="button"].check, input[type="button"].undo, #crui-karaoke-speed-adjustment input[type="button"]
{
    background-color: #1B3647;
    padding: 10px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
}
input[type="button"].checkanswer:hover, input[type="button"].reset:hover, input[type="button"].answerkey:hover, input[type="button"].check:hover, input[type="button"].undo:hover, #crui-karaoke-speed-adjustment input[type="button"]:hover
{
    background-color: #1285BB;
}
input[type="button"].checkanswer:disabled, input[type="button"].reset:disabled, input[type="button"].answerkey:disabled, input[type="button"].check:disabled, input[type="button"].undo:disabled, #crui-karaoke-speed-adjustment input[type="button"]:disabled
{
    background-color: #909090;
    cursor: not-allowed;
}
.checkpoint-interaction .feedback.fail
{
    background-color: #542C8D;
}
.checkpoint-interaction .feedback.success
{
    background-color: #AAD03C;
}

/* DropDown */
.dropdown-interaction .fail
{
    background-color: #542C8D;
}
.dropdown-interaction .success
{
    background-color: #AAD03C;
}

/* Accordion */
.oet-accordion-container
{
    width: 600px;
    margin: 10px 0px 30px;
    text-align: left;
}
.oet-accordion-container div
{
    margin-bottom: 20px;
}
.oet-accordion-container label
{
    padding: 5px 35px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #000000;
    border-bottom: 2px solid #D4D4D4;
    border-left: 2px solid #15547D;
    line-height: 33px;
    font-size: 1.1em;
    font-weight: bold;
    background: #F6F6F6;
}
.oet-accordion-container label:hover
{
    background: #666666;
    color: #EFEFEF;
    border-bottom: 2px solid #666666;
}
.oet-accordion-container label:before, .oet-accordion-container input:checked + label:before
{
    content: "\e60c";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 7px;
    top: 14px;
    color: #000000;
    font-size: 0.8em;
    font-weight: normal;
}
.oet-accordion-container label:hover:before, .oet-accordion-container input:checked + label:hover:before
{
    color: #EFEFEF;
}
.oet-accordion-container input:checked + label:before
{
    content: "\e60b";
}
.oet-accordion-container input:checked + label
{
    border-left: 2px solid #AAD03C;
    border-bottom: 0;
}
.oet-accordion-container input
{
    display: none;
}
.oet-accordion-container div.article
{
    background: #F6F6F6;
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.oet-accordion-container div.article p
{
    color: #000000;
    line-height: 1.1em;
    font-size: 1em;
    padding: 10px 40px;
}
.oet-accordion-container input:checked ~
div.article
{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    border-left: 2px solid #AAD03C;
}
.oet-accordion-container input:checked ~
div.article.ac-140
{
    height: 140px;
}
.oet-accordion-container input:checked ~
div.article.ac-180
{
    height: 180px;
}
.oet-accordion-container input:checked ~
div.article.ac-230
{
    height: 230px;
}

/* Info Box */
.info-box .info-box-content
{
    margin: 0 10px;
    border: solid 2px #D6D4D5;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.info-box-content .inner-wrapper
{
    margin: 4px;
    padding: 10px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
}
.info-box-sign
{
    margin: -4px 0 0 -26px;
    position: absolute;
}
.info-box .sign
{
    display: block;
    width: 60px;
    height: 45px;
    line-height: 45px;
    background: transparent url("../images/info.png") no-repeat 0 0;
}
.info-box-body
{
    margin-left: 45px;
}
.info-box-body p
{
    margin: 0;
}

/* Audio player with slider */
.extracontrols
{
    float: left;
    width: 300px;
}
.extracontrols .extracontrols-fix
{
    clear: both;
}
.extracontrols input
{
    background: url("../images/play.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    border: medium none;
    float: left;
    height: 35px;
    line-height: 0;
    margin-right: 2px;
    padding: 1px 0;
    text-indent: -99999px;
    width: 35px;
    cursor: pointer;
}
.extracontrols input[type="button"].play:hover
{
    background-image: url("../images/play-hover.png");
}
.extracontrols .rewind
{
    background-image: url("../images/rewind.png");
}
.extracontrols .rewind:hover
{
    background-image: url("../images/rewind-hover.png");
}
.extracontrols .fastforward
{
    background-image: url("../images/forward.png");
}
.extracontrols .fastforward:hover
{
    background-image: url("../images/forward-hover.png");
}
.extracontrols input.paused
{
    background-image: url("../images/pause.png");
}
.extracontrols .slider-wrap
{
    background: url("../images/audio-control-bg.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
    float: left;
    height: 25px;
    padding: 3px 4px;
}
.extracontrols .slider
{
    background: url("../images/audio-control-bg.gif") no-repeat scroll center center rgba(0, 0, 0, 0);
    height: 25px;
    width: 140px;
}
.extracontrols .loaded-indicator
{
    background-color: rgba(0, 0, 0, 0);
    height: 25px;
    width: 0;
}
.extracontrols .loaded-indicator-bg
{
    background-color: rgba(0, 0, 0, 0);
    height: 25px;
    width: 0;
}
.extracontrols .slidercontrol
{
    background: url("../images/audio-control-handle.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 22px;
    position: absolute;
    top: 1px;
    width: 22px;
}

/* Popup */
a.oet-popup-image:hover img, a.oet-popup-image img
{
    outline: none;
    border: 0;
}
.oet-pop-content
{
    display: none;
    border: 2px solid #542C8D;
    left: 150px;
    position: fixed;
    top: 20px;
    width: 500px;
    height: 400px;
    overflow-y: hidden;
    background: #ffffff;
    border-top: 30px solid #542C8D;
    z-index: 9999998;
}
.oet-pop-content > .mediapopup-heading
{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 100%;
    padding: 5px;
}
.oet-pop-content > .mediapopup-content
{
    position: relative;
    overflow-y: auto;
    height: 310px;
    padding: 10px;
}
.oet-pop-content > input[type="button"].close
{
    width: 100px;
    height: 30px;
    text-align: center;
    left: 200px;
    display: block;
    background: #542C8D;
    position: absolute;
    bottom: 0;
    background-color: #542C8D;
    padding: 5px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
    z-index: 9999999;
}
.oet-pop-content ul
{
    list-style-image: none;
}
.mediapopup .content .mediapopup-heading
{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
}
.oet-pop-content table
{
    width: 100%;
}
.oet-pop-content .mediapopup-content table td
{
    vertical-align: top;
}
.oet-pop-content .mediapopup-content table td:nth-child(1)
{
    width: 20%;
    font-weight: bold;
    color: #333333;
}
.oet-pop-content .mediapopup-content table td:nth-child(2)
{
    width: 80%;
}
.oet-pop-content .mediapopup-heading table td:nth-child(1)
{
    color: #FFFFFF;
    width: 50%;
}
.oet-pop-content .mediapopup-heading table td:nth-child(2)
{
    text-align: right;
    width: 50%;
}
.oet-pop-content .mediapopup-content td
{
    padding: 8px;
}

/* Checkpoint */
.checkpoint-interaction > div > ul > li
{
    margin-right: 0px;
}
.checkpoint-interaction > div > ul
{
    margin-top: -15px;
}

/* WYSIWYG */
.wysiwyg-editor .possible-answer
{
    display: none;
}
.wysiwyg-editor .compare
{
    background-color: #542C8D;
    padding: 5px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
    margin: 5px;
}

/* Slideshow */

.slideshow
{
    overflow: hidden;
    width: 627px;
    margin: 10px auto;
}
.slideshow img
{
    -o-box-shadow: none;
    -ms-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.slideshow .slideshow-content
{
    margin: 0 10px;
    border: solid 2px #A9CF3C;
    background-color: #F3EEF2;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.slideshow-content .inner-wrapper
{
    border: dashed 2px #a8a8a8;
    margin: 4px;
    padding-bottom: 70px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: transparent url("../images/slideshow-background.gif") repeat-y 3.1% 0;
}
.slideshow-content .slide
{
    display: none;
    overflow: hidden;
}
.slideshow-content .current-slide
{
    display: block;
}
.slideshow-content .media, .slideshow-content .note
{
    float: left;
    padding: 10px 2.5%;
}
.slideshow-content .media
{
    width: 65%;
}
.slideshow-content .note
{
    width: 25%;
}
.slideshow-content .note li
{
    margin-left: -15px;
}
.slideshow-control
{
    margin-top: -70px;
    margin-bottom: 21px;
}
.slideshow > .slideshow-control
{
    position: relative;
}
.slideshow-control .inner-wrapper
{
    background-color: #9EC238;
}
.slideshow-control .inner-wrapper:before, .slideshow-control .inner-wrapper:after
{
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #A9CF3C transparent transparent transparent;
    bottom: -10px;
}
.slideshow-control .inner-wrapper:before
{
    left: 0;
    border-width: 10px 0 0 10px;
}
.slideshow-control .inner-wrapper:after
{
    right: 0;
    border-width: 10px 10px 0 0;
}
.slideshow-control .control-list
{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.slideshow-control .control-list li
{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 8px;
    vertical-align: middle;
}
.slideshow-control .control
{
    width: 33px;
    height: 33px;
    line-height: 33px;
    display: block;
    background: transparent url("../images/slide-show-control-sprite.png") no-repeat 0 0;
}
.slideshow-control .play
{
    background-position: 0 0;
}
.slideshow-control .pause
{
    background-position: -33px 0;
}
.slideshow-control .previous
{
    background-position: -66px 0;
}
.slideshow-control .next
{
    background-position: -99px 0;
}
.slideshow-control .disabled
{
    background-position: -132px 0;
    cursor: default;
}
.slideshow-control .play-pause-control
{
    display: none;
}
.slideshow-control .play:hover, .slideshow-control .play:active
{
    background-position: 0 -33px;
}
.slideshow-control .pause:hover, .slideshow-control .pause:active
{
    background-position: -33px -33px;
}
.slideshow-control .previous:hover, .slideshow-control .previous:active
{
    background-position: -66px -33px;
}
.slideshow-control .next:hover, .slideshow-control .next:active
{
    background-position: -99px -33px;
}

/* Video */

.video .mejs-container
{
    height: 315px;
    width: 550px;
}
.video .mejs-overlay-play
{
    position: relative;
}

/* Fancy Popup */
.md-perspective, .md-perspective body
{
    height: 100%;
    overflow: hidden;
}
.md-perspective body
{
    background: #222;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}
.md-modal
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.md-show
{
    visibility: visible;
}
.md-overlay
{
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(36, 44, 44, 0.4); /* rgba(143,27,15,0.8);*/
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.md-show ~ .md-overlay
{
    opacity: 1;
    visibility: visible;
}
.md-content
{
    color: #fff;
    background: #A9CF3C;
    position: relative;
    border-radius: 3px;
    margin: 0 auto;
}
.md-content h3
{
    margin: 0;
    padding: 0.4em;
    text-align: center;
    font-size: 2.4em;
    font-weight: 300;
    opacity: 0.8;
    background: rgba(0,0,0,0.1);
    border-radius: 3px 3px 0 0;
}
.md-content > div
{
    margin: 0;
    padding-top: 10px;
    font-weight: 300;
    font-size: 1.15em;
}
.md-content > div p
{
    margin: 0;
    padding: 10px 0;
}
.md-content > div ul
{
    margin: 0;
    padding: 0 0 30px 20px;
}
.md-content > div ul li
{
    padding: 5px 0;
}
.md-content button
{
    display: block;
    margin: 5px auto;
    background-color: #1B3647;
    padding: 10px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
}
.md-content input[type="button"].md-close
{
    background-color: #1B3647;
    padding: 10px;
    color: #EFEFEF;
    border: 0;
    cursor: pointer;
}
.md-effect-1 .md-content
{
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.md-show.md-effect-1 .md-content
{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


#crui-karaoke-speed-adjustment
{
    margin: 1em 0;
}
#crui-karaoke-speed-adjustment h3
{
    padding-bottom: 0;
    margin-bottom: .4em;
}
#crui-karaoke-speed-adjustment .header
{
    background: transparent url('../images/speed-arrow.png') no-repeat center center;
    width: 314px;
    height: 36px;
}
#crui-karaoke-speed-adjustment .body span
{
    width: 70px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
#crui-karaoke-speed-adjustment .radio
{
    text-indent: -9000px;
    display: inline-block;
    display: -moz-inline-box;
    width: 16px;
    height: 16px;
    background: transparent url(../images/radio.gif) no-repeat center center;
    margin-right: 4px;
}
#crui-karaoke-speed-adjustment .action
{
    clear: both;
    text-align: left;
    padding-top: .6em;
}
#crui-karaoke-speed-adjustment .radio-disabled
{
    background-image: url(../images/radio-disabled.gif);
}
#crui-karaoke-speed-adjustment .radio-selected
{
    background-image: url(../images/radio-selected.gif);
}

/* timerbarv2 interaction override some styles for timberbar*/
.timerbarv2 .score-breakdown .info-box
{
    background-color: transparent !important;
    font-size: .8em !important;
}

.timerbarv2 .score-breakdown .info-box .cefr-box
{
    padding-left : 10px;
}

/* hide message if timerbarv2 interaction*/
.timerbarv2 .score-message 
{
    display:none !important; 
}
.timerbarv2 .nav
{
    display:none;
}

@media only screen and (max-width: 1024px)
{
    .timerbar .score-message, .timerbar .score-breakdown
    {
        margin: 5px;
        padding: 10px;
    }
  .timerbar .score-message, .timerbarv2 .score-breakdown
    {
       margin: 5px auto 5px auto;
       padding : 10px 20px 40px 20px !important;
   }
}