/* ------------------------------- */
/*      VERSION HISTORY
/* ------------------------------- */
/*
/*  main_new.css - Version 1.0
/*    - intended for reuse of CSS stylings
/*
/*  v1.0 - initial version 12/17/10 - bnb
/*
/* ------------------------------- */

/*----------------------*/
/* 	Debugging
/*----------------------*/

/* USED TO DEFINE THE DIV LEVELS */
/*
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
*/

/*----------------------*/
/*  Color Library       */
/*----------------------*/
/*
    Black:      #000
    Dark Grey:  #333
    Grey:       #C0C0C0
    Mid Grey:   #666
    Lite Grey:  #999
    Dark Blue:  #006
    Blue:       #00F
    Mid Blue:   #339
    Lite Blue:  #CCF
    Dark Red:   #800000
    Red:        #F00
    Orange:     #F90
    Yellow:     #FF0
    Lite Yellow:#FF9
    Dark Green: #060
    Green:      #008000
    Lite Green  #0F0
    Pink:       #F0F
    Manilla:    #FFC
    White:      #FFF
/*-----------------------*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Lora');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Nunito+Sans|Rubik|Varela+Round|Work+Sans');

body {    
    margin: 0 !important;
    padding: 0 !important;
    background: #EEE;  /* COLOR */
    /*   font-family: "Open Sans", "Trebuchet MS", "Arial Rounded MT Bold", Helvetica, Arial, sans-serif;  */
    /*font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    /*font-family: 'Nunito Sans', sans-serif;*/
    font-family: 'Varela Round', sans-serif;
    font-size: 150%;
}

h1 { font-size: 1.2em; display: block; padding-bottom: 0.3em; font-weight: bold; line-height: 1.4;}
h2 { font-size: 1.1em; display: block; padding-bottom: 0.2em; font-weight: bold; line-height: 1.3;}
h3 { font-size: 1.0em; display: block; padding-bottom: 0.1em; font-weight: bold; line-height: 1.2;}
h4 { font-size: 0.9em; display: block; padding-bottom: 0.0em; font-weight: bold; line-height: 1.1;}
h5 { font-size: 0.8em; display: block; padding-bottom: 0.0em; font-weight: bold; line-height: 1.0;}
h6 { font-size: 0.7em; display: block; padding-bottom: 0.0em; font-weight: bold; line-height: 0.9;}

p { font-size: 1.0em; line-height: 1.2; }

ul {
    margin: 3% 0;
    list-style-type: none;
    padding: 2%;
    display: block;

}
li {
    padding-bottom: 1em;
}
li:first-child {
    margin-top: 20px;
}

li:last-child {
    padding-bottom: 0;
}

hr {
    margin: 5px 0px;
}

.divider-line {
    border-top: 2px solid #871160;
}

small {
    font-size: 0.8em;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    font-size: .8em;
    height: 5%;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #fff;  /* COLOR */
    border: 1px solid #1E5D9F;  /* COLOR */
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 2% 0;
}
select:focus {
    font-size: .8em;
    border: 1px solid #33C3F0;  /* COLOR */
    outline: 0; 
}

.clear {clear: both;}

.wrapper {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box; 
    /* border: 1px solid #4169E1; /* COLOR */
    background: #FFF;  /* COLOR */
}

.container {
    padding: 1% 4%;
    margin: 0%;
}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header, .sub-header {
    /*background: #1E5D9F;*/
    background: #871160;  /* COLOR */
    color: white;  /* COLOR */
    text-align: center;
}

.header-dev {
    /*background: #1E5D9F;*/
    background: black !important;  /* COLOR */
    color: white;  /* COLOR */
    text-align: center;
}


header a {
    color: white;  /* COLOR */
    text-decoration: none; 
}
.sub-header {
    margin-top: -10px;
}

.sub-header p {
    font-size: 75%;
    margin: 0 0 3% 0;

}
#top {
    margin: 0px; /* This removes the gap from the top of the wrapper */
}

/* Main
–––––––––––––––––––––––––––––––––––––––––––––––––– */
main {
    min-height: 400px;
}

.outage-banner h1, .outage-banner h2{
    background: yellow;
    border: 2px dashed red;
    padding: 1em;
}

.game, .schools {
    border-radius: 10px;
    text-align: center;
}

.game {
    background: #DBF0FA;
}

.schools {
    background: #F0FADB;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
    /*background: #3A6FA7;*/  /* COLOR */
    background: #8F266C; /* COLOR */
    color: white;  /* COLOR */
    margin: 7% 0 0 0;
}
footer ul {
    margin: 0;
    padding: 0;
}
footer li {
    padding-bottom: 4%;
}
footer a {
    color: white;  /* COLOR */
    text-decoration: none;
}
.copyright {
    font-size: 60%;
    color: #FFDE74;  /* COLOR */
    margin: 10px 0 10px 0;
}


/* For devices larger than 400px */
/*@media (min-width: 400px) {
    .container {
        width: 85%;
    }
}*/
/* For devices larger than 550px */
@media (min-width: 550px) {
    button, .button {
        padding: 1% 5%;
    }
}

button, .button {
    /*    background-color: #073666;    COLOR */
    background-color: #279D14; 
    border: none;
    border-radius: 34px;
    box-shadow: 3px 6px 0px #2a6d20;
    -webkit-box-shadow: 3px 6px 0px #2a6d20;
    -moz-box-shadow: 3px 6px 0px #2a6d20;
    box-sizing: border-box;
    color: white;  /* COLOR */
    cursor: pointer;
    display: inline-block;
    font-size: .91em;
    /* margin: 1.5% auto; */
    margin: 1.5% 2%;
    -webkit-transition-duration: 0.4s; /* Safari */
    min-width: 120px;
    padding: 1.5% 4%;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
}

.white {
    background-color: white;   /* COLOR */
    /*border: 2px solid #073666;*/  /* COLOR */
    border: 2px solid #279D14; /* COLOR */
    color: #073666;   /* COLOR */

}

.center {
    text-align: center;
    margin: 0 auto;
}

.msg-error {
    background: #ffc0cb url(../img/error-red.gif) 0px 2px no-repeat;  /* COLOR */
    color: red;  /* COLOR */
    text-indent: 25px;
    margin: 5px;
    padding: 3px;
}

.msg-success {
    background: url(../img/accept-16x16.png) 0px 2px no-repeat;
    color: green;  /* COLOR */
    font-weight: bold;
    text-indent: 25px;
    margin: 5px;
}

.msg-welcome {
    font-weight: bold;
    margin: 5px;
}

.game-pin {
    font-size: 300%;
    font-weight: bold;
    letter-spacing: 5px;
    font-family: Arial; 
    margin: 2%;
}

.phonetic {
    color: grey; /* COLOR */
    font-family: Arial;
    font-size: 90%;
    font-style: italic;
    margin-bottom: 10px;
}

.instructions {
    color: blue;
    font-weight: bold;
}

/* used to show progress */
.circle-open {
    border-radius: 50%;
    width: 10px;
    height: 10px; 
    /*border: 1px solid #073666;*/  /* COLOR */
    border: 1px solid #871160; /* COLOR */
    background-color: white;  /* COLOR */
    float: left;
    margin: 10px;

}
.circle-solid {
    border-radius: 50%;
    width: 10px;
    height: 10px; 
    /*border: 1px solid #073666;*/  /* COLOR */
    border: 1px solid #871160; /* COLOR */
    /*background-color: #073666;*/  /* COLOR */
    background-color: #871160; /* COLOR */
    float: left;
    margin: 10px;
}

/* used for indicating which players are ready */
.circle-ready {
    background: blueviolet;
    border-radius: 50%;
    color: white;
    font-size: 1.5em;
    line-height: 60px;
    height: 60px;
    width: 60px;
    text-align: center; 
}

.circle-waiting {
    border: 2px solid blueviolet;
    color: darkviolet;
    border-radius: 50%;
    font-size: 1.5em;
    line-height: 60px;
    height: 60px;
    width: 60px;
    text-align: center;
}

.box{
    clear: both;
    border: 1px solid lightgray;  /* COLOR */
    margin: 10px auto;
    padding: 5%;
    width: 90%;
}

.shadow {
    -webkit-box-shadow: 5px 5px 5px 6px #082D82;   /* COLOR */ /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    5px 5px 5px 6px #082D82;   /* COLOR */ /* Firefox 3.5 - 3.6 */
    box-shadow:         8px 8px 4px 1px #082D82;   /* COLOR */ /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.inner-shadow {
    -moz-box-shadow:    inset 0 0 40px #4169E1;  /* COLOR */
    -webkit-box-shadow: inset 0 0 40px #4169E1;  /* COLOR */
    box-shadow:         inset 0 0 40px #4169E1;  /* COLOR */
}

.left-bar {
    margin-top: 5px;
    /*    border: 1px solid #4169E1; */  /* COLOR */
    /*    border-left: 7px solid #4169E1; */  /* COLOR */
    border: 1px solid #871160; /* COLOR */
    border-left: 7px solid #871160; /* COLOR */
}

.stitched {
    background: blue;  /* COLOR */
    color: #fff;  /* COLOR */
    border: 2px dashed #fff;  /* COLOR */
    border-radius: 10px;
    box-shadow: 0 0 0 5px blue;  /* COLOR */
}

.open-quotes {
    font-size: 3em;
    font-family: "Fairplay Display";
    margin-right: 10px;
}

/*  Player Names Waiting Room 
------------------------------------------ */
.waiting-list {
    background: #FFD44B;  /* COLOR */
    color: #9D3900;  /* COLOR */
    font-weight: bold;
    margin-bottom: 3%;
    padding: 2%;
    text-align: center;
}

.waiting-list h3:last-child {
    padding-bottom: 0;
}

/*  Questions
------------------------------------------ */
.question-warning {
    font-weight: bold; 
    text-align: center;
    animation:blinkingText 1.0s 4;
}

@keyframes blinkingText{
    0%{     color: red;    }
    49%{    color: red; }
    60%{    color: transparent; }
    99%{    color: transparent;  }
    100%{   color: red;    }
}


.question-box {
    /*    background: #FFDE74;
        color: #073666;*/
    background: #16388E; /* COLOR */
    color: white; /* COLOR */
    margin: 2% 0;
    padding: 4% 1% 0;
}

.question {
    line-height: 1.2em;
    text-align: center; 
}
.question:first-child {
    padding-bottom: 2%;
}

.question:last-child {
    padding-bottom: 2%;
}

.guess-text {
    line-height: 1.2em;
    padding-bottom: 1px;
}

/*  Questions Waiting Room
------------------------------------------ */

.progress-box-1 {
    /*background: greenyellow;*/ /* COLOR */
    background: #279D14; /* COLOR */
    height: 30px;  
    float: left;
    border-top: 1px solid black;  /* COLOR */
    border-left: 1px solid black;  /* COLOR */
    border-bottom: 1px solid black;  /* COLOR */
    margin-bottom: 60px;
}
.progress-box-2 {
    height: 30px;  
    float: left;
    border-top: 1px solid black;  /* COLOR */
    border-right: 1px solid black;  /* COLOR */
    border-bottom: 1px solid black;  /* COLOR */
    margin-bottom: 60px;
}

/*  Answer Results 
------------------------------------------ */
.results {
    background: lightgrey;  /* COLOR */
    border-radius: 15px;
    border-bottom: 1px solid black;  /* COLOR */
    border-right: 1px solid black;  /* COLOR */
    float: left;
    font-family: Arial;
    min-height: 100px;
    min-width: 48%;
    margin: 1% 0 1% 1%;
    text-align: center;
}
.results-2 {
    background: lightgrey;  /* COLOR */
    clear: both;
    border-radius: 15px;
    border: 1px solid black;  /* COLOR */
    font-family: Arial;
    min-height: 100px;
    min-width: 48%;
    margin: 4% auto;
    padding-top: 4px;
    text-align: center;
}

.results-box {
    background: lightgrey;  /* COLOR */
    border-radius: 15px;
    border: 1px solid black;  /* COLOR */
    font-family: Arial;
    min-height: 100px;
    min-width: 48%;
    margin: 2% auto;
    text-align: center;
}

.results-number {
    color: blue;
    font-size: 1.2em;
    margin: 2% auto;
    text-align: center;
}
.results-question {
    color: black;
    margin: 2% auto;
    text-align: center;
}

.answer-line-1 {  /* title */
    color: #1E5D9F;  /* COLOR */
    font-size: .70em;
    margin: 10px 0 0 0;
}
.answer-line-2 {   /* your guess and actual */
    color: black;  /* COLOR */
    font-size: 1.8em;
    font-weight: bold;
    margin: 0;
}
.answer-line-2a {   /* points */
    color: black;  /* COLOR */
    font-size: 1.6em;
    font-weight: bold;
    margin: 15px 0 0 0;
}

.answer-line-3 {   /* would say true */
    font-size: .7em;
    margin: 0;
}

.similarity-note {
    color: grey; /* COLOR */
    font-size: 90%;
    font-style: italic;
}

/*  Interesting Fact / Follow-up Question
------------------------------------------ */
.interesting-fact {
    /*background: #FFA674;*/  /* COLOR */
    background: #426AC6; /* COLOR */
    color: white; /* COLOR */
    padding: 3%;
    text-align: center;
    margin: 4% 0%;
}

.follow-up {
    background: #FFA674;
    color: black; /* COLOR */
    padding: 3%;
    text-align: center;
    margin: 4% 0%;
}


/*  Scoreboard 
------------------------------------------ */
.scoreboard-table {
    /*    color: white; */  /* COLOR */
    /*    background-color: #1E5D9F; */  /* COLOR */
    color: black;  /* COLOR */
    background-color: #FFE305;  /* COLOR */  
    border-radius: 5px;        
    border-spacing: 5px; /* cellspacing:poor IE support for  this */
    border-bottom: 2px solid black;  /* COLOR */
    border-right: 2px solid black;  /* COLOR */
    display: table;
    font-size: 90%;
    margin: 3% 0;
    width: 100%;
}
.div-table-row {
    display: table-row;
    width: 98%;
    clear: both;
}

.highlight {
    /*    color: #1E5D9F; */  /* COLOR */
    /*    background: white;*/  /* COLOR */
    color: black; /* COLOR */
    background: white; /* COLOR */
    border: 1px solid #B9B000; /* COLOR */
    font-weight: bold;
}
.rank, .name, .points {
    float: left; /* fix for  buggy browsers */
    display: table-column; 
    /*	border: 1px dashed black; */  /* COLOR */
    padding: 3px;
}

.title {
    width:100%;
    font-size: 1.4em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 2%;
}
.rank {
    width: 13%;
}
.name {
    width: 60%; 
}
.points {
    width: 16%; 
    text-align: right;
}
#myProgress {
    width: 100%;
    background-color: #ddd;
    display: block;
    clear: both;
}

#myBar {
    width: 100%;
    height: 10px;
    background-color: blue;
}
/*  Rate Questions
----------------------------------------- */

#rate-question button {
    width: 35%; 
    padding: 10px 0;
}

.thumbs-up {
    background: #01DF01;
}

.thumbs-down {
    background: #F33B45;
}


/*  FAQs Page
----------------------------------------- */
.faqs a, .faqs a:visited{
    color:  blue;
    text-decoration: none;
}
.faq-question {
    font-weight: bold;
    font-style: oblique;
}
.faq-answer {
    margin: 3px 0px 3px 20px;
}
.faq-back {
    margin: 8px 0px 30px 0px;
}

/*  Stories Page
----------------------------------------- */
.stories p {
    color: #333333;
    margin: 10px;
    line-height: 1.5em;
}



/*  Test Pages
----------------------------------------- */

.test-page {
    color: red;
    font-weight: bold;
    font-size: 20px;
    background: yellow;
    border: 1px solid black;
    padding: 5px;
    display: block;
}