@font-face {
    font-family: opensans-bold-webfont;
    src: url('../fonts/opensans-bold-webfont.eot'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.woff');
}

@font-face {
    font-family: opensans-regular-webfont;
    src: url('../fonts/opensans-regular-webfont.eot'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.woff');
}

@font-face {
    font-family: opensans-regular-webfont;
    src: url('../fonts/opensans-regular-webfont.eot'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.woff');
}

@font-face {
    font-family: opensans-light-webfont;
    src: url('../fonts/opensans-light-webfont.eot'), url('../fonts/opensans-light-webfont.ttf') format('truetype'), url('../fonts/opensans-light-webfont.woff');
}

@font-face {
    font-family: opensans-light-webfont;
    src: url('../fonts/opensans-light-webfont.eot'), url('../fonts/opensans-light-webfont.ttf') format('truetype'), url('../fonts/opensans-light-webfont.woff');
}

@font-face {
    font-family: opensans-regular-webfont;
    src: url('../fonts/opensans-regular-webfont.eot'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.woff');
}

@font-face {
    font-family: opensans-bold-webfont;
    src: url('../fonts/opensans-bold-webfont.eot'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.woff');
}

body {
    margin: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none; /* IE10+ */
    background-color: #fff;
}

#container {
    position: relative;
    width: 896px;
    height: 504px;
    background-color: #333;
    overflow: hidden;
    font-family: opensans-regular-webfont;
    color: #fff;
    font-size: 18px;
}
#intro {
    position: relative;
    width: 896px;
    height: 504px;
    background-color: #333;
    overflow: hidden;
    z-index:700;
}
#titleIntro{
    width: 896px;
    background-color: #2278af;
    font-size:36px;
    font-family: opensans-bold-webfont;
    padding-left:60px;
    padding-top:30px;
    padding-bottom:30px;
}
#introInfo{
    width: 896px;
    font-size:18px;
    font-family: opensans-regular-webfont;
    padding-left:60px;
    padding-top:30px;
}
#nextBtn{
    position:absolute;
    background-image:url(../images/ContinueArrow2.png);
    width:72px;
    height:50px;
    cursor:pointer;
    top:370px;
    left:760px;
   }
#beginBtn{
    font-size: 2em;
    font-weight:bold;
    font-family:opensans-regular-webfont;
    width: 85%;
    height: 55px;
    background-color: #333;
    border-color: #2278af;
    border-style: solid;
    border-radius: 15px;
    text-align: center;
    cursor:pointer;
    color:#fff;
    line-height: 47px;
    margin-left:10%;
    margin-right:20%;
    margin-top:100px;
    float:left;
}
#sideHolder {
    position: absolute;
    width: 210px;
    height: 504px;
    top: 504px;
    z-index: 5;
    left: -10px;
}

.sideBtnClass {
    width: 192px;
    height: 40px;
    background-color: #444545;
    margin-bottom: 8px;
    float: left;
    border-radius: 8px;
    font-size: 18px;
    font-family: opensans-bold-webfont;
    text-align: center;
    line-height: 40px;
    border: 3px solid #444545;
}

.active {
    border-color: #23a659;
}


#answerHolder {
    position: absolute;
    width: 778px;
    left: 195px;
    top: 160px;
}

.answersBtns {
    width: 313px;
    height: 66px;
    background-color: #333;
    margin-bottom: 8px;
    margin-left: 18px;
    float: left;
    border-radius: 20px;
    border: 3px solid #2278af;
    cursor: pointer;
    font-size: 29px;
    text-align: center;
    line-height: 60px;
}

#questions {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    position: absolute;
    width: 876px;
    height: 117px;
    z-index: 20;
	font-size: 48px;
    line-height: 42px;
    background-image: url('../images/TextBox.png');
}

#bottomBar {
    position: absolute;
    width: 896px;
    height: 75px;
    background-color: #808080;
    z-index: 20;
    top: 429px;
}

#score {
    position: absolute;
    height: 70px;
    font-size: 40px;
    line-height: 70px;
    color: #fff;
    top: 433px;
    left: 40px;
    z-index: 200;
}

#infoText {
    height: 70px;
    float: right;
    font-size: 35px;
    line-height: 70px;
    padding-right: 20px;
}

#feedbackBar {
    position: absolute;
    width: 896px;
    height: 74px;
    background-color: #39a12e;
    z-index: 120;
    top: 504px;
}

#feedbackText {
    width: 600px;
    height: 70px;
    float: right;
    z-index: 130;
    line-height: 70px;
    font-size: 28px;
    text-align: right;
    padding-right: 70px;
}

#reviewtitle {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    position: absolute;
    width: 876px;
    height: 107px;
    z-index: 20;
    background-image: url('../images/reviewTitle.png');
}

#restertbtn {
    position: absolute;
    top: 160px;
    width: 178px;
    height: 182px;
    background-color: #333;
    margin-bottom: 8px;
    margin-left: 18px;
    float: left;
    border-radius: 20px;
    border: 3px solid #2278af;
    cursor: pointer;
    font-size: 38px;
    text-align: center;
    line-height: 170px;
}

#popUpWindow {
    position: absolute;
    width: 852px;
    height: 429px;
    margin-left: 18px;
    background-image: url('../images/popBox1.png');
    z-index: 700;
}

.answerText {
    padding-top: 20px;
    margin-top: 83px;
    font-size: 26px;
    height: 320px;
    overflow: scroll;
    overflow-x: hidden;
    width: 825px;
    padding-left: 20px;
}

    .answerText::-webkit-scrollbar {
        width: 54px;
    }

    .answerText::-webkit-scrollbar-track {
        background-color: #474847;
        border-radius: 12px;
    }

    .answerText::-webkit-scrollbar-thumb {
        background-color: #fff;
        border: 16px solid #1874cc;
        border-radius: 12px;
        height: 45px;
        cursor: pointer;
    }

        .answerText::-webkit-scrollbar-thumb:hover {
            background-color: #ff6a00;
        }

    .answerText::-webkit-scrollbar-button:vertical:increment {
        
        height: 60px;
    }

/* Place The scroll up button at the up */
/*.answerText::-webkit-scrollbar-button:vertical:decrement {
    background-color: purple;
    border: 1px solid blue;
    height: 40px;
}*/

#closeBtn {
    position: absolute;
    width: 60px;
    height: 60px;
    background-image: url('../images/close.png');
    top: 363px;
    left: 790px;
    z-index: 720;
    cursor: pointer;
}

#topPopTitle {
    position: absolute;
    font-family: opensans-bold-webfont;
    font-size: 36px;
    width: 752px;
    height: 60px;
    left: 15px;
    top: 15px;
}