@font-face {
    font-family: lucida_grande;
    src: url(fonts/lucida_grande-webfont.woff) format('woff')
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/open_sans/OpenSans-Light.eot");
    src: url("fonts/open_sans/OpenSans-Light.eot?#iefix")format("embedded-opentype"), url("fonts/open_sans/OpenSans-Light.woff") format("woff"), url("fonts/open_sans/OpenSans-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/open_sans/OpenSans-Regular.eot");
    src: url("fonts/open_sans/OpenSans-Regular.eot?#iefix")format("embedded-opentype"), url("fonts/open_sans/OpenSans-Regular.woff") format("woff"), url("fonts/open_sans/OpenSans-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/open_sans/OpenSans-Semibold.eot");
    src: url("fonts/open_sans/OpenSans-Semibold.eot?#iefix")format("embedded-opentype"), url("fonts/open_sans/OpenSans-Semibold.woff") format("woff"), url("fonts/open_sans/OpenSans-Semibold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}

/* FONT: Raleway */

@font-face {
    font-family: "Raleway";
    src: url("fonts/raleway/Raleway-Regular.eot");
    src: url("fonts/raleway/Raleway-Regular.eot?#iefix")format("embedded-opentype"), url("fonts/raleway/Raleway-Regular.woff") format("woff"), url("fonts/raleway/Raleway-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

body {
    font-family: "Open Sans"
}

#learningObjectiveTitle {
    padding-left: 2%
}

#titleWrapper {
    text-shadow: none
}

#glossaryButtonWrapper #glossaryListPanel #glossaryPanelTitleBar {
    background: url(images/glossary_heading_bg.png) repeat-x
}

#glossaryButtonWrapper #glossaryListPanel #btnCloseGlossaryPanel {
    border: 0;
    background: transparent url(images/closeGlossaryUp.png) center center no-repeat
}

#glossaryButtonWrapper #glossaryListPanel #btnCloseGlossaryPanel:hover {
    background: transparent url(images/closeGlossaryOver.png) center center no-repeat
}

#playerContainer {
    background: #fff
}

#toolBarWrapper {
    background: #dfe9ea;
    border-top: 1px dotted #92aba7;
    height: 55px
}

#btnPageList .ui-button-text {
    background-image: url(images/icon_menu-select.png)
}

#btnPageList.selected .ui-button-text {
    background-image: url(images/icon_menu.png)
}

#btnPrintPage .ui-button-text {
    background-image: url(images/icon_print_selected.png)
}

#btnPrintPage.selected .ui-button-text {
    background-image: url(images/icon_print.png)
}

#btnPrintPage.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_print_disabled.png)
}

#btnGlossary .ui-button-text {
    background-image: url(images/icon_glossary-select.png)
}

#btnGlossary.selected .ui-button-text {
    background-image: url(images/icon_glossary.png)
}

#btnGlossary.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_glossary_disabled.png)
}

#btnTranscript {
    border-left: solid 1px #000
}

#btnTranscript .ui-button-text {
    background-image: url(images/icon_transcript-select.png)
}

#btnTranscript.selected .ui-button-text {
    background-image: url(images/icon_transcript.png)
}

#btnTranscript.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_transcript_disabled.png)
}

#btnNotes .ui-button-text {
    background-image: url(images/icon_notes_selected.png)
}

#btnNotes.selected .ui-button-text {
    background-image: url(images/icon_notes.png)
}

#btnNotes.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_notes_disabled.png)
}

#btnHelp .ui-button-text {
    background-image: url(images/icon_help_selectd.png)
}

#btnHelp.selected .ui-button-text {
    background-image: url(images/icon_help.png)
}

#pageNavigationWrapper {
    background: url(images/bottom_pagination_bg.png) no-repeat;
    background: 0 0
}

#btnPreviousPage .ui-button-text {
    background-image: url(images/icon_back.png)
}

#btnPreviousPage .ui-button-text:active {
    background-image: url(images/icon_back-select.png)
}

#btnPreviousPage.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_back-disable.png)
}

#btnNextPage .ui-button-text {
    background-image: url(images/icon_next.png)
}

#btnNextPage .ui-button-text:active {
    background-image: url(images/icon_next-select.png)
}

#btnNextPage.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_next-disable.png)
}

#btnVolume .ui-button-text {
    background-image: url(images/icon_volume-select.png)
}

#btnVolume.selected .ui-button-text {
    background-image: url(images/icon_volume.png)
}

#btnVolume.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_volume_disabled.png)
}

#btnVolume.muted .ui-button-text {
    background-image: url(images/icon_mute.png)
}

#btnVolume.muted.selected .ui-button-text {
    background-image: url(images/icon_mute-select.png)
}

#btnVolume.muted.ui-state-disabled .ui-button-text {
    background-image: url(images/icon_mute_disabled.png)
}

#summaryAudioContainer .jp-play.ui-state-disabled span {
    background-image: url(images/icon_play_disabled.png)
}

.treeview .hitarea {
    background: url(images/treeview-default.png) -64px -25px no-repeat
}

.treeview li.lastCollapsable,
.treeview li.lastExpandable {
    background-image: url(images/treeview-default.png/treeview-default.png)
}

.jp-seek-bar {
    background: url(images/icon_seekbar_back.png) left center repeat-x
}

.jp-play-bar {
    background: url(images/icon_seekbar_value.png) left center repeat-x
}

.jp-play-bar-thumb {
    background: url(images/icon_slider_thumb.png) center center no-repeat;
    width: 19px;
    height: 19px;
    top: -3.5px;
    right: -10px
}

div.jp-type-single .jp-play span {
    background-image: url(images/icon_play.png)
}

div.jp-type-single .jp-pause span {
    background-image: url(images/icon_pause.png)
}

#pageListPanel {
    opacity: .9
}

#pageList .pageListItem a {
    background: #000d12;
    border: none
}

#pageList .pageListItem.isCurrent a {
    color: #f5f5f5;
    font-weight: 700;
    background: #79c46a!important
}

#playerWrapper #pageListWrapper #pageList .pageListItem a:hover,
.no-touch #playerWrapper #pageListWrapper #pageList .pageListItem a:focus {
    background: #79c46a!important
}

.toolBarButtontip>p {
    color: #000;
    background: #faf4c9!important;
    font-size: 11px;
    padding: 5px;
    margin-bottom: 0;
    -webkit-box-shadow: 0 0 rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 rgba(0, 0, 0, .8);
    box-shadow: 0 0 rgba(0, 0, 0, .8);
    position: relative!important;
    top: 10px!important
}

.toolBarButtontip {
    background: none!important
}

#titleWrapper .toolBarButtontip>p {
    font-size: 15px!important;
    position: relative!important;
    top: 0!important;
    padding: 10px
}

.toolBarButtontip p {
    margin-bottom: 0
}

#titleWrapper {
    color: red
}

.toolBarOperationsWrapper {
    display: none!important
}

#toolBarContainer {
    border: 1px solid #d3dddb;
    background: #fff;
    height: 55px
}

#pageNavigationWrapper {
    float: right;
    margin-right: 2%
}

#pageTrackingStatus {
    color: #506162
}

#globaloperationsContainer {
    float: left
}

#globaloperationsContainer button,
#globaloperationsContainer button:hover,
.globaloperationsContainer button,
.globaloperationsContainer button:hover {
    background: #37a9ad;
    color: #FFF;
    font-weight: 700;
    box-shadow: 0 0 0 #404f54 inset;
    -webkit-box-shadow: 0 0 0 #404f54 inset;
    -moz-box-shadow: 0 0 0 #404f54 inset;
    -ms-box-shadow: 0 0 0 #404f54 inset;
    border: none;
    width: 150px;
    padding: 5px;
    border-radius: 4px
}

#globaloperationsContainer #btnSubmit {
    background: #98c625;
    color: #FFF;
    font-weight: 700;
    box-shadow: 0 0 0 #404f54 inset;
    -webkit-box-shadow: 0 0 0 #404f54 inset;
    -moz-box-shadow: 0 0 0 #404f54 inset;
    -ms-box-shadow: 0 0 0 #404f54 inset;
    border: none;
    width: 150px;
    padding: 5px;
    border-radius: 4px
}

#globaloperationsContainer,
.globaloperationsContainer {
    margin-left: 2%;
    line-height: 55px
}

#playerWrapper #titleContainer {
    background: #fff;
    border-bottom: 1px solid #fff
}

@media all and (max-width:800px) {
    #pageNavigationWrapper {
        margin-right: 20px
    }
}

#titleContainer {
    display: none;
}

#currentPageContainer {
    top: 0 !important;
    background: none;
}

#toolBarWrapper {
    background: none;
    border: none;
}

#toolBarContainer {
    border: none;
}


#toolBarContainer {
    background: transparent;
}

#currentPageWrapper {
    background: none;
}

#playerContainer {
    background-image: url('images/background.svg');
    background-size: 1920px 1080px;
    background-position: top right;
}



/* BUTTONS STYLE */

#globaloperationsContainer button,
#globaloperationsContainer button:hover,
.globaloperationsContainer button,
.globaloperationsContainer button:hover {
    background: #336699;
    color: #FFF;
    font-weight: 500;
    box-shadow: 0 0 0 #404f54 inset;
    -webkit-box-shadow: 0 0 0 #404f54 inset;
    -moz-box-shadow: 0 0 0 #404f54 inset;
    -ms-box-shadow: 0 0 0 #404f54 inset;
    border: none;
    border-radius: 50%;
    font-family: "Open Sans";
    width: 90px;
    height: 90px;
    font-size: 15px;
    padding-top: 34px;
    font-weight: normal;
}

#globaloperationsContainer button#resetBtn,
#globaloperationsContainer button#resetBtn:hover,
.globaloperationsContainer button#resetBtn,
.globaloperationsContainer button#resetBtn:hover {
    background: #3399cc;
    color: #FFF;
    box-shadow: 0 0 0 #404f54 inset;
    -webkit-box-shadow: 0 0 0 #404f54 inset;
    -moz-box-shadow: 0 0 0 #404f54 inset;
    -ms-box-shadow: 0 0 0 #404f54 inset;
    border: none;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    font-size: 15px;
    padding-top: 34px;
    font-weight: normal;
}

#globaloperationsContainer #btnSubmit {
    background: #cc9236;
    color: #FFF;
    box-shadow: 0 0 0 #404f54 inset;
    -webkit-box-shadow: 0 0 0 #404f54 inset;
    -moz-box-shadow: 0 0 0 #404f54 inset;
    -ms-box-shadow: 0 0 0 #404f54 inset;
    border: none;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    font-size: 15px;
    padding-top: 34px;
    font-weight: normal;
}

#ShowMe, #resetBtn, #btnSubmit {
    position: relative;
    margin-right: 60px;
}

#globaloperationsWrapper {
    padding-left: 0;
}

.buttonicon {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: -4px;
}

#btnSubmit .buttonicon svg {
    display: inline-block;
    transition: all 0.7s ease-in-out;
}

.buttonicon svg {
    display: inline-block;
    margin-top: 11px;
    margin-left: 0;
    height: 39px;
    width: 39px;
    transition: all 0.7s ease-in-out;
}

#resetBtn:hover .buttonicon svg {
    transform: rotate(360deg);
}

#resetBtn:disabled:hover .buttonicon svg {
    transform: none;
}

#ShowMe:hover .buttonicon svg {
    transform: scale(1.1);
}

#btnSubmit:disabled:hover .buttonicon svg {
    transform: none;
}


#btnSubmit:hover .buttonicon svg {
    transform: scale(0.9);
}

#ShowMe:disabled:hover .buttonicon svg {
    transform: none;
}


#currentPageContainer {
    bottom: 100px;
}

#toolBarContainer {
    height: 100px;
}

#toolBarWrapper {
    height: 100px;
}

#toolBarContainer {
    max-width: 1300px;
    margin-left: auto;
}

#pageNavigationWrapper {
    margin-top: 20px;
}

.contentWrapper {
    display: block;
}

#toolBarContainer.carousel.canHide,
#toolBarContainer.accordion.canHide,
#toolBarContainer.tab.canHide,
#toolBarContainer.clicktoreveal.canHide,
#toolBarContainer.flashcards.canHide{
    display: none;
}

#currentPageContainer.carousel.canHide,
#currentPageContainer.accordion.canHide,
#currentPageContainer.flashcards.canHide,
#currentPageContainer.clicktoreveal.canHide,
#currentPageContainer.tab.canHide {
    height: 100% !important;
}

.tabData ul li {
    list-style-position: outside !important;
}

/* mid-big */

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

}

/* mid display */

@media all and (max-width:900px) {

    #currentPageContainer {
        bottom: 55px;
    }

    #toolBarContainer {
        height: 55px;
    }

    #toolBarWrapper {
        height: 55px;
    }

    #globaloperationsContainer button,
    #globaloperationsContainer button:hover,
    .globaloperationsContainer button,
    .globaloperationsContainer button:hover {
        background: #3399cc;
        color: #FFF;
        font-weight: 500;
        box-shadow: 0 0 0 #404f54 inset;
        -webkit-box-shadow: 0 0 0 #404f54 inset;
        -moz-box-shadow: 0 0 0 #404f54 inset;
        -ms-box-shadow: 0 0 0 #404f54 inset;
        border: none;
        padding: 4px 0 4px 14px;
        border-radius: 4px;
        font-family: "Open Sans";
        height: 32px;
        width: 110px;
        font-weight: normal;
    }

    #globaloperationsContainer button#resetBtn,
    #globaloperationsContainer button#resetBtn:hover,
    .globaloperationsContainer button#resetBtn,
    .globaloperationsContainer button#resetBtn:hover {
        background: #3399cc;
        color: #FFF;
        box-shadow: 0 0 0 #404f54 inset;
        -webkit-box-shadow: 0 0 0 #404f54 inset;
        -moz-box-shadow: 0 0 0 #404f54 inset;
        -ms-box-shadow: 0 0 0 #404f54 inset;
        border: none;
        padding: 4px 0 4px 14px;
        border-radius: 4px;
        height: 32px;
        width: 110px;
        font-weight: normal;
    }

    #globaloperationsContainer #btnSubmit {
        background: #3399cc;
        color: #FFF;
        box-shadow: 0 0 0 #404f54 inset;
        -webkit-box-shadow: 0 0 0 #404f54 inset;
        -moz-box-shadow: 0 0 0 #404f54 inset;
        -ms-box-shadow: 0 0 0 #404f54 inset;
        border: none;
        padding: 4px 0 4px 14px;
        border-radius: 4px;
        height: 32px;
        width: 110px;
        font-weight: normal;
    }

    #globaloperationsWrapper {
        padding-left: 20px;
    }

    #ShowMe, #resetBtn, #btnSubmit {
        position: relative;
        margin-right: 30px;
    }

    .buttonicon {
        width: 39px;
        height: 32px;
        position: absolute;
        left: -20px;
        top: 0;
        background: #66ccff;
        background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%0A%09%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aa%3D%22http%3A%2F%2Fns.adobe.com%2FAdobeSVGViewerExtensions%2F3.0%2F%22%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2239.3px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2039.3%2032%22%20style%3D%22overflow%3Ascroll%3Benable-background%3Anew%200%200%2039.3%2032%3B%22%0A%09%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bopacity%3A0.35%3Bfill%3A%23FF9933%3B%7D%0A%3C%2Fstyle%3E%0A%3Cdefs%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M37.2%2C32H4.4C2%2C32%2C0%2C30%2C0%2C27.5V4.2C0%2C1.7%2C2%2C0%2C4.4%2C0h33.2C40.1%2C0%2C39.7%2C32%2C37.2%2C32z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
        background-repeat: no-repeat;
        background-position: center right;
    }

    #btnSubmit .buttonicon svg {
        display: inline-block;
        margin-top: 4px;
        margin-left: 0;
        width: 24px;
        height: 24px;
        transition: all 0.7s ease-in-out;
    }

    .buttonicon svg {
        display: inline-block;
        margin-top: 4px;
        margin-left: 0;
        width: 24px;
        height: 24px;
        transition: all 0.7s ease-in-out;
    }

    #resetBtn:hover .buttonicon svg {
        transform: rotate(360deg);
    }

    #resetBtn:disabled:hover .buttonicon svg {
        transform: none;
    }

    #ShowMe:hover .buttonicon svg {
        transform: scale(1.1);
    }

    #btnSubmit:disabled:hover .buttonicon svg {
        transform: none;
    }


    #btnSubmit:hover .buttonicon svg {
        transform: scale(0.9);
    }

    #ShowMe:disabled:hover .buttonicon svg {
        transform: none;
    }

    #pageNavigationWrapper {
        margin-top: 0;
    }
}

/* small display */

@media all and (max-width:650px) {

    #globaloperationsContainer button,
    #globaloperationsContainer button:hover,
    .globaloperationsContainer button,
    .globaloperationsContainer button:hover {
        height: auto;
        padding-left: 0;
    }

    #globaloperationsContainer button#resetBtn,
    #globaloperationsContainer button#resetBtn:hover,
    .globaloperationsContainer button#resetBtn,
    .globaloperationsContainer button#resetBtn:hover {
        height: auto;
        padding-left: 0;
    }

    #globaloperationsContainer #btnSubmit {
        height: auto;
        padding-left: 0;
    }

    #ShowMe, #resetBtn, #btnSubmit {
        position: relative;
        margin-right: 20px;
    }

    #currentPageContainer {
        bottom: 30px;
    }

    #toolBarContainer {
        height: 30px;
    }

    #toolBarWrapper {
        height: 30px;
    }

    #globaloperationsContainer {
        line-height: 30px;
    }

    #summaryAudioContainer {
        padding-top: 5px;
    }

    #globaloperationsContainer button,
    #globaloperationsContainer button:hover,
    .globaloperationsContainer button,
    .globaloperationsContainer button:hover {
        font-size: 14px;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 100px;
    }

    #globaloperationsContainer #btnSubmit {
        font-size: 14px;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 100px;
    }

    #globaloperationsContainer button#resetBtn, #globaloperationsContainer button#resetBtn:hover, .globaloperationsContainer button#resetBtn, .globaloperationsContainer button#resetBtn:hover {
        font-size: 14px;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 100px;
    }

    .buttonicon {
        width: 25px;
        height: 25px;
    }

    #btnSubmit .buttonicon svg {
        display: inline-block;
        margin-top: 5px;
        margin-left: 0;
        height: 16px;
        width: 16px;
        transition: all 0.7s ease-in-out;
    }

    .buttonicon svg {
        display: inline-block;
        margin-top: 6px;
        margin-left: 0;
        height: 12px;
        width: 12px;
        transition: all 0.7s ease-in-out;
    }

    #pageNavigationWrapper {
        margin-top: -12px;
        margin-right: 5px;
    }

    #btnNextPage .ui-button-text,
    #btnPreviousPage .ui-button-text{
        background-size: 70% 30%;
    }
}

@media all and (max-width:505px) {
    #pageNavigationWrapper {
        position: absolute;
        right: 0;
    }

    #globaloperationsContainer button {
        width: 0 !important;
        height: 0 !important;
        margin-right: 35px;
    }
}