/*---------------------------------------------------------------------
            FDG FORENSICS WEBSITE CSS STYLE FILE
---------------------------------------------------------------------*/

/*---------------------------------------------------------------------
                        WEBSITE COLOUR SCHEME
---------------------------------------------------------------------*/

/*First colour: rgba(0,53, 93, 0.8); - header
Secondary colour: rgba(37, 105, 166, 0.8);  - setting
Third colour: rgba(43, 95, 143, 0.8); - buttons
Fourth colour: rgba(219, 232, 243, 0.8) - question

Welcome title: rgba(221,228, 214, 1)
text: rgba(225, 225, 225, 1)
*/


/*---------------------------------------------------------------------
                        MOBILE DEFAULT STYLES - GLOBAL STYLES
---------------------------------------------------------------------*/

/* Prevents adjustments of font size after orientation change in IE on Windows phone and in IOS */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Apply a natural box model layout to all elements */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* clearfix: Force an element not to collapse */
.clearfix: after {
    content: "";
    display: table;
    clear: both;
}

/* All images and video set to 100% width of their parent container */

img, video {
    width: 100%;
}

.welcomeBig, .mainSettings, .settings, .questionResultDiv, .questionDiv, .resultDiv, .hideChart {
    display: none;
}

.navBtn, .welcomeSmall {
    display: block;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: rgba(225, 225, 225, 1);
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: rgba(219, 232, 243, 1);
/*
    background-image: url("../images/home-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
*/
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.header {
    background-color: rgba(0,53, 93, 0.8);
    clear: both;
}


.logo {
    margin-left: 10px;
    width: 100px;
    height: 100px;
}

.welcome {
    text-align: center;
    height: 80px;
    margin: 15px auto 5px;
}

.welcome > h1 {
    font-family: 'Petit Formal Script', cursive;
    font-weight: bolder;
    font-size: 1.6em;
    color: rgba(221,228, 214, 1);
}

.settingBtn {
    position: absolute;
    /*background-color: rgba(128, 255, 0, 0.7);*/
    top: 30px;
    right: 5px;
    width: 50px;
    margin: 0 auto;
    text-align: center;
}

.navBtn {
    font-size: 1.5em;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

.quizContent {
    height: 500px;
    clear: both;
}

div.mainSettings {
    background: rgba(37, 105, 166, 0.8);
    background: -webkit-linear-gradient(top, rgba(37, 105, 166, 0.8), rgba(56, 160, 255, 0.8)); /* For Safari*/
    background: -o-linear-gradient(bottom, rgba(37, 105, 166, 0.8), rgba(56, 160, 255, 0.8)); /* For Opera*/
    background: -moz-linear-gradient(bottom, rgba(37, 105, 166, 0.8), rgba(56, 160, 255, 0.8)); /* For Firefox*/
    background: linear-gradient(to bottom, rgba(37, 105, 166, 0.8), rgba(56, 160, 255, 0.8)); /* Standard syntax */
    height: 100%;
    padding: 20px;
}

.settings {
    height: 100%;
    padding: 0px;
    color: rgba(96, 96, 96, 1);
}

.label {
    margin: 0;
    padding: 0;
    color: rgba(225, 225, 225, 1);
}

.inputNum {
/*    width: 150px;*/
    width: 94%;
    color: rgba(128, 128, 128, 1);
    border: 1px solid rgba(192, 192, 192, 1);
}

.questions {
    float: none;
    background: rgba(128, 165, 32, 0.8); /*goldenrod*/
    background: -webkit-linear-gradient(top, rgba(128, 165, 32, 0.8), rgba(56, 160, 225, 0.8)); /* For Safari*/
    background: -o-linear-gradient(bottom, rgba(128, 165, 32, 0.8), rgba(56, 160, 225, 0.8)); /* For Opera*/
    background: -moz-linear-gradient(bottom, rgba(128, 165, 32, 0.8), rgba(56, 160, 225, 0.8)); /* For Firefox*/
    background: linear-gradient(to bottom, rgba(128, 165, 32, 0.8), rgba(56, 160, 225, 0.8)); /* Standard syntax */
    /*background-image: url(../images/maze-1560302_640.png);*/
    opacity: 0.8;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-left: 0;
    padding-right: 0;
    height: 100%;
}

.startGameDiv {
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    width: 100%;
}
        
.pHeader {
    padding-top: 10px;
    font-family: 'Boogaloo', cursive;
    font-size: 1.3em;
    color: rgba(64, 0, 64, 1);
}

.pContent {
    padding: 10px 25px;
    font-family: 'Boogaloo', cursive;
    font-size: 1em;
    color: rgba(64, 0, 64, 1);
}

.startGame {    
    vertical-align: middle;
    display: block;
    width: 30%;
    height: 100px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: rgba(170, 93, 0, 1);
    color: rgba(128, 0, 128, 1);
    font-family: 'Ruslan Display', cursive;
    font-weight: bold;
    font-size: 1.2em;
}

.questionResultDiv {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.questionState {
    background-color: rgba(37, 105, 166, 0.8);
    height: 50px;
}

.warning > p {
    font-family: 'Shrikhand', cursive;
    font-size: 2em;
    color: rgba(225, 0, 0, 1);
    text-align: center;
}

.didIt > p {
    font-family: 'Shrikhand', cursive;
    font-size: 1.2em;
    color: rgba(225, 0, 0, 1);
    text-align: right;
    margin: 0;
}

.didIt > p .didItLabel {
    font-family: 'Shrikhand', cursive;
    font-size: 0.8em;
    color: rgba(225, 225, 225, 1);    
}

.questionDesc {
    margin-top: 5px;
    background-color: rgba(37, 105, 166, 0.8);
    height: 140px;
}

p.question {
    margin: 0 10px 0 15px;
    padding: 0 10px 0 5px;
    height: 140px;
    text-align: center;
    font-family: 'Boogaloo', cursive;
    font-size: 1.5em;
    color: rgb(225, 225, 225);
}

.questionAnswers {
    border-bottom: solid 2px rgba(219, 232, 128, 1);
    background-color: rgba(37, 105, 166, 0.8);
    margin-top: 5px;
    margin-left: 0;
    height: 234px;
    text-align: center;
    width: 100%;
}

.answers {
    font-family: 'Boogaloo', cursive;
    font-size: 1.2em;
    margin: 0;
}

.answers::after {
    clear: none;
}

.answerBorder {
    cursor: pointer;
    user-select: none;
    margin: 0 -2px -2px 0;
}

.borderBottomYellow {
    border-bottom: solid 2px rgba(219, 232, 128, 1);
}

.borderRightYellow {
    border-right: solid 2px rgba(219, 232, 128, 1);
}

.twoAvailAnswers {
    height: 234px;
}

.fourAvailAnswers {
    height: 118px;
}

.sizeForTooManyWords {
    font-size: 1.2em;
}

.resultDiv {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    text-align: center;
    display: block;
    width: 100%;
}

.resultCommentDiv {
    background-color: rgba(37, 105, 166, 0.8);
    height: 40px;
}

.resultComment {
    font-family: 'Shrikhand', cursive;
    font-size: 1.8em;
    color: rgba(225, 0, 225, 1);
    margin-bottom: 0;
}

.resultComment span {
    padding-left: 13px;
    padding-right: 13px;
}

.resultChartRow {
    width: 100%;
    background-color: rgba(37, 105, 166, 0.8); 
}

.resultChart {
/*    background-color: rgba(37, 105, 166, 0.8); */
    margin: 0 auto 0 auto;
    height: 390px;
    padding-left: 13px;
    padding-right: 13px;
    display: block;
}

.resultChart .chartHolder .canvasjs-chart-container {
    text-align: center;
}

.floatBtn {
    position: relative;
    float: right;
    top: 3px;
    right: 5px;
    padding: 0;
    margin-right: 3px;
    z-index: 9;
}

a.btn {
    color: rgba(225, 225, 225, 1);
}

.chartHolder {
    margin: 0 auto 0 auto;
    color: white;
    width: 100%;
}

.data {
    font-size: 1.2em;
    /*margin-left: 5%;*/
}

.newGameBtnDiv {
    margin-left: auto;
    text-align: center;
    width: 100%; /*50px;*/
    display: block;
}

.newGame {
    width: 140px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(170, 93, 0, 1);
    color: rgba(128, 0, 128, 1);
    font-family: 'Ruslan Display', cursive;
    font-weight: bold;
    font-size: 1.2em;
}
        
.modal-content {
    background-color: rgba(37, 105, 166, 0.8);
}

/*---------------------------------------------------------------------
                 GALAXY S5 OR ALIKE DEVICES STYLES - 360 SCREEN RESOLUTION
---------------------------------------------------------------------*/


@media screen and (min-width: 360px) {
    .welcome {
        margin: 10px auto;
    }
    .welcome > h1 {
        font-size: 2em;
    }
    .questionAnswers {
        height: 262px;
    }
    .twoAvailAnswers {
        height: 262px;
    }

    .fourAvailAnswers {
        height: 132px;
    }
    .resultChart {
        height: 420px;
    }
    
}

/*---------------------------------------------------------------------
                 BIGGER SCREEN DEVICES STYLES - 568 SCREEN RESOLUTION
---------------------------------------------------------------------*/


@media screen and (min-width: 568px) {
    .startGame {
        font-size: 2em;
    }
    
    .question {
        font-size: 1.3em;

    }

    .answers {
        font-size: 1.3em;
    }

}

/*---------------------------------------------------------------------
                 IPAD STYLES - 768 SCREEN RESOLUTION
---------------------------------------------------------------------*/


@media screen and (min-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .welcomeBig, .mainSettings, .settings {
        display: block;
    }
    .navBtn, .welcomeSmall {
        display: none;
    }

    .questions {
        padding-left: 3px;
    }
    
    .question {
        font-size: 1.6em;

    }

    .answers {
        font-size: 1.6em;
    }
    
    .newGameBtnDiv {
        padding-top: 0;
    }
}

/*---------------------------------------------------------------------
                 DESKTOP STYLES - 1024 SCREEN RESOLUTION
---------------------------------------------------------------------*/


@media screen and (min-width: 1024px) {
    .question {
        font-size: 2em;

    }
}