:root {
    font-family: 'Roboto', sans-serif;
    /*font-family: 'Arial';*/
    font-size: 1rem;
    line-height: 1.5;
    /*background-color: #ead2a6;*/
    color: black;
    color: #181818;
    background-color: #000000;
    margin: 0;
    padding: 0;    
}

html { 
    width: 100%;
    height: 100%;
}

body {
 min-height: 100%;
 background-image: url('/images/bkg.jpg');
 background-size: 100vw 100vh;
 background-position: top center;
 background-repeat: no-repeat;
 background-color: #070707;
 text-decoration: none;
 text-align: center;
 margin: auto;
 width: 100%;
}

.curved { border-radius: 1em; }
table { background-image: none; text-align: left; }

/* TABS */
#tabcontainer { width: 960px; margin: auto; overflow: hidden; }
#supertab { width:100%; background: none; font-size: 1.6rem; line-height:normal; margin: auto; clear: both; }
#supertab ul { display: flex; width:100%; margin:0; padding:10px 10px 0 0.5em; list-style:none; overflow: hidden; }
#supertab li { margin:0; padding:0; }
#supertab a {
     float:left;
     margin:0; 
     padding:0 0 0 10px; 
     text-decoration:none; 
     border: 2px solid #ccc;
     border-bottom: none;
     background-color:  #ddd;
     border-top-left-radius: 0.5em; border-top-right-radius: 0.5em;
    }
 #supertab #superburger {
    background-color: #99FF99 !important;
       }
.tabselected { background-color: #fbfbfb !important; }
#supertab a span { float:left; display:block; padding:10px 17px 10px 6px; color:#333; text-shadow: white -1px -1px 2px; }
	  
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#supertab a span {float:none;}
/* End IE5-Mac hack */
#supertab a:hover span {
 color:#FFF;
 text-shadow: black 1px 1px 2px;
 text-decoration: none;
 border: none;
}

#burger a { margin-right: 0.5em; }

.wrong { color: red; font-weight: bold; }

a { color: #000; font-weight: bold; text-decoration: none; }
a img { border: none; }
a:hover { text-decoration: underline; }
hr { width: 80%; margin-bottom: 20px; }

img.middle { vertical-align: middle; }

@font-face{ font-family: myheadingfont; src: url("/fonts/TektonPro-Bold.otf"); }

h1, h2, h3, #answerbutton { 
 font-family: myheadingfont;
 font-size: 2.5rem;
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #070707;
 color: #181818;
}
p { margin: 0; padding: 0; }
h2 { font-size: 1.2em; font-family: tahoma, Verdana, Arial; }
h3 { font-size: 1.2em; font-family: tahoma, Verdana, Arial; }
h4 { font-size: 1.2em; font-family: tahoma, Verdana, Arial; }

#userpanel, #leaderboard {
    font-size: 0.8em;
    margin-bottom: 1em;
}
#userpanel img { padding-left: 0.5em !important; max-width: 60px; }

#login table, #leaderboard table {
    width: 94% !important;
    margin: auto;
    padding-bottom: 0.5em;
}
#login input, #login button { 
    border: 1px solid #d7a12d;    
    color: #000; 
    border-radius: 3px;
}
#login button { 
    width: 5em;
    height: 3em;
    color: white;
    background-color: #ecbd58; 
}
#login td { padding: 0; margin: 0; }

lh { font-weight: bold; }

#container {    
 width: 960px;
 clear: both;
 text-align: left;
 vertical-align: top;
 margin: auto;
 background-color: #fbfbfb;
 overflow: auto;
 border-radius: 1em;
 min-height: 100vh;
}

#footer {
 width: 960px;
 clear: both;
 color: white;
 text-align: center;
 margin: auto;
 padding-top: 1em; 
}
#footer a { color: white; font-size: 1rem; }
#footer img { padding-bottom: 0.5em; } 

#header h1 { visibility: hidden; }

#left, #right { 
 width: 220px;
 margin: 0px;
}

#left { float: left; }
#right { float: right; padding-top: 8px; text-align: left; }
#right img { padding: 3px 0px 2px 0px; }
#right a { color: #FF0033; font-weight: normal; }
#right p { padding: 0.1em 0.5em; } /* font-size: 0.9rem; }*/

#spacer {
 height: 10px;
 width: 450px;
 float: left;
}

#left ul, #right ul, #trivia ul {
 padding-left: 0px;
 list-style: none;
}
#left ol, #right ol { padding-left: 14px; }

#left ul li a, #right ul li a, #trivia ul li a, #left ul li, #right ul li, #trivia ul li {
 margin: 2px 0px 2px 13px;
 font-weight: normal;
 text-align: left;
}

#content {
 margin-left: 10px;
 margin-right: 220px;
 padding: 20px;
 vertical-align: top;
}

.break {
 clear: left;
}

#options table {
    margin-left: auto;
    margin-right: auto;
}
#options table td {    
    text-align: center;
}

#trivia-block, #quiz-block { display: none; width: 94%; overflow: auto; }
#question, #trivia-question, #result { padding-top: 10px; color: black; margin-left: auto; margin-right: auto; }

#result, #points { text-align: center; height: 80px; margin: auto; border: 1px solid white; overflow: auto; }
#quiz-question p, #trivia-question p, #result p, #points p { font-size: 2em; padding: 0px 10px; }
#result p { font-size: 2em; margin: 0px; padding: 0px; }
#points { color: #33CC33; }
#question img, #trivia-question img { text-align: center; }

#quiz-header {   /* Header image above multiple choice quizzes */     
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 12vh;
    background-size: 100%;
     border-radius: 1em;
     padding: 0.5em 0em;
}

#picture-question { text-align: center; overflow-x: hidden;  }
#picture-question p { text-align: left;  }
#picture-question img, #ppptrivia-question img { height: 30vh; }
#question-icon { max-height: 2em; padding: 0em 1em; }

#pointsvalue { font-size: 1.4em; color: brown; text-align: right; margin-right: 4px; }

#userstats { font-size: 1em; margin: 0; padding: 10px; background-color: #006633; color: #fff; width: 100%; margin-top: 6px;  }
#userstats td { text-align: center; }

.answerbutton {
 width: 220px !important;
 min-height: 5em;
 font-size: 1.4em;
 color: white;
 padding: 20px;
 margin: 10px; 
 border: none;
 background-image: url('/images/button-bkg-v2.png');
 background-position: center;
 border-radius: 0.5em;
}
.answerbutton:hover {
    background-image: url('/images/button-bkg-hover-v2.png');
    cursor: pointer;
}

#nextquestion { text-align: center; }

#site, #site-header, #site-footer {
 text-align: left;
 margin: 5px;
 margin-bottom: 0px;
 margin-top: 0px;
 padding: 8px;
 background-image: url('/images/qotd-bkg-note.jpg');
 background-repeat: repeat-y;
 color: #333;
}

#quizzes { overflow: auto; width: 98%; }
#quizzes td { padding: 0.3rem; }
#quizzes img { border-radius: 0.5em; height: 4em; }
#quizzes a { color: #FF0033; }
#quizzes a { color: #FF0033; }

#startmultitrivia {
    font-size: 2em;
    padding: 0.5em;
    margin-right: 0.2em;
}

#trivia-categories { margin: 2rem 0rem; }
#trivia-categories td { padding: 0.3rem; }
#trivia-categories a { font-weight: normal; }
#trivia-categories a:hover { text-decoration: none; font-weight: bolder; border-bottom-width: 4px; }
#trivia h3 { text-align: center; }

#trivia-categories .general-knowledge {  border-bottom: 2px solid #CCC; }
#trivia-categories .geography {  border-bottom: 2px solid #40cb00; }
#trivia-categories .science {  border-bottom: 2px solid #3399FF; }
#trivia-categories .sport {  border-bottom: 2px solid orange; }
#trivia-categories .entertainment {  border-bottom: 2px solid  #FF66CC; }
#trivia-categories .history {  border-bottom: 2px solid brown; }
#trivia-categories .food {  border-bottom: 2px solid red; }
#trivia-categories .art {  border-bottom: 2px solid purple; }

/* WORD SEARCH  #wordsearch (game page) */
#wordsearch { margin-bottom: 10px; }
#wordsearch ul { padding-left: 4px; list-style: none; float: left; width: 200px; margin: 0px; padding: 0px; list-style: none; margin-left: 0px; }
#wordsearch li { display: inline; font-weight: bold; color: #006633; color: #D8114E; color: #FF0033; float: left; width: 100px; margin: 0px; padding: 0px; padding-bottom: 4px; }
#wordsearch p { text-align: center; }
#wordsearch img { margin-left: 6px; }
#howtoplay { display: none; margin-bottom: 20px; }

/* WORDSEARCH on front page */
/*#wordsearches ul { width: 360px; } */
#wordsearches img { border-radius: 1em; height: 8em; }
#wordsearches ul { padding-left: 4px; list-style: none; float: left; margin: 0px; padding: 0px; }
#wordsearches li { display: inline; font-weight: bold; color: #006633; color: #D8114E; color: black; margin: 4px; float: left; }
#wordsearches li { padding: 1em !important; }

#wordsearches li a { color: #FF0033; }
#wordsearches .done a, #wsindex .done a, .ws .done, #trivianiches .done {
     color: #999; 
     font-weight: normal; 
     text-decoration: line-through;
     text-decoration-color: green;
     text-decoration-thickness: 2px;
    }
#wordsearches .done img { 
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); 
    opacity: 0.5;
}

#trivianiches { overflow: auto; margin: auto; }
#trivianiches img { margin: 0; padding: 0; border-radius: 1em; height: 8em;  }
#trivianiches .generalknowledge { border: 4px solid #CCC; }
#trivianiches .geography { border: 4px solid #40cb00; }
#trivianiches .science { border: 4px solid #3399FF; }
#trivianiches .sport { border: 4px solid orange; }
#trivianiches .entertainment { border: 4px solid #FF66CC; }
#trivianiches .history { border: 4px solid #40cb00; }
#trivianiches .food { border: 4px solid red; }
#trivianiches .art { border: 4px solid purple; }

.today a, .niche a, .quiz a, .ws a { color: #FF0033; font-weight: bold; }
.niche, .quiz, .ws { 
    float: left; 
    text-align: center; 
    overflow: auto; 
    width: 31%; 
    margin: 0px 3px 20px 3px;
}
.quiz { width: 23%; }

.niche img, .quiz img, .ws img { margin-right: 4px; margin-bottom: 8px; }
.archive, .archive a { text-align: right; color: #FF0033; font-weight: normal; }

/* RIGHT BUBBLES (WW STYLEE!) */
#right .container { margin: auto; width: 180px; margin-bottom: 6px; margin-top: 5px; background: #D0E8C0; color: #D0E8C0; padding: 0px; }
#right .container dl {margin: 0px; padding-bottom: 10px; background: url('/images/bubble-bottom-180.png') no-repeat bottom;}
#right .container dt {margin: 0px; padding-top: 7px; background: url('/images/bubble-top-180.png') no-repeat top;}
#right .container dd {margin: 0px; padding: 0px 10px;}
#right .container a { text-decoration: none; font-weight: normal; }
#right .container a:hover { text-decoration: underline;}
#right .container h1, #right .container h3 { text-align: center; margin: 2px 0px 5px; padding-left: 0px; padding-top: 0px; line-height: 13px; text-transform: uppercase; border: none; }
#right .container p {margin: 2px 0px 5px; padding-left: 0px; padding-top: 0px; }

/* Change the colors for these KEY containers */
#right .top-players {background: #D0E8C0; color: #406866; }
#right .top-players hr { margin-bottom: 4px; color: #669900; }
#right .top-players img { padding-right: 1px; }
#right .moreinfo {background: #FEDDA6; color: #663333; }
#right .submit {background: #ECECEC; color: #333333; }
#right .register {background: #F9E9E9; color: black; }
#right .register h3 { color: #E71721; }
#right .register a, #right .submit a { color: #E71721; font-weight: bold; }
#right .feedback {background: #CDE3F2; color: #386390; }
#right .feedback textarea { width: 154px; height: 100px; border: 1px solid #003366; background-color: #e0f3f8; }
#right .feedback button { width: 154px; background-color: #386390; color: white; border: 1px solid #003366; }

#newpuzzle { text-align: center; }

/* LOGIN PAD IN HEADER */
#loginpad { width: 225px; height: 125px; background-image: url('/images/loginpad.png'); background-position: center; background-repeat: no-repeat; float: right; text-align: left; margin: 10px; color: #660033; }
#loginpad a { text-shadow: 0px 1px #660033; }
#loginpad #avatar { float: left; margin: 10px; max-width: 64px; max-height: 64px; }
#loginpad p { font-weight: bold; margin: 10px; }
#loginpad hr { border: 1px inset #663300; width: 120px; margin-bottom: 10px; }
#loginpad form { margin: 0px; padding: 0px; margin-left: 10px; margin-right: 10px; width: 200px; float: left; }
#loginpad input { width: 140px; }
#loginpad #loginbutton { width: 50px; color: white; background-color: #8d4e2b; border: 1px solid #663300; }

#loginpad ul { list-style: none; margin-left: 40px; }

/* JOIN FORM, BAD LOGIN FORM */
#regform, #whyjoin, #badlogin, #forgotpass, #rules {
     background-color: #D0E8C0; 
     width: 98%; 
     padding: 6px 10px;
     margin-bottom: 2em;
}

#badlogin p, #forgotpass p { padding-left: 10px; padding-right: 10px; }
#chooseavatar { width: 480px; background-color: white; margin: auto; }
#regform input { background-color: #FFFFCC; border: 1px solid #669966; }
#regform #submitbutton { padding: 10px; color: white; background-color: #8d4e2b; border: 1px solid #663300; }
#submitbutton { font-size: 1.5em; padding: 0.6em 2.4em !important; }
#whyjoin, #bubble { margin-top: 20px; color: white; background-color: #669966; }
#whyjoin h2, .bubble h2, #badlogin h1, #forgotpass h1 { padding: 8px; }
#forgotpass select { margin-left: 40px; }
#regform-foot, #whyjoin-foot, #badlogin-foot, #forgotpass-foot, .bubble-foot { width: 500px; height: 10px; background-color: #D0E8C0; }
#whyjoin-foot { background-color: #669966; }

.darkgreen { color: white; background-color: #669966; }
.darkgreen a { color: white; }
.bubble #stats { text-align: center; }

#badlogin, #badlogin-foot { background-color: #FFCCCC; }
#forgotpass-foot { background-color: #D0E8C0; }
#forgotpass { margin-top: 20px; }

/* SUBMIT YOUR OWN QUESTIONS */
#question, #trivia-question { width: 94%; }
.answerright, .answerwrong { border: 1px solid #999; margin: 2px; }
.answerright { background-color: #CCFFCC; }
.answerwrong { background-color: #FFCCCC; }
#submit {width: 120px; height: 70px; }
#lowerpanel { margin: 30px 10px; text-align: center; }
.box { float: left; text-align: left; margin: 20px; }
#picturequestion { margin-top: 20px; text-align: center; background-color: #fbf9a6; }
#uploadpic { background-color: #FFFFCC; display: none; }
#uploadpic p { margin: 0px; padding: 10px; }
#picurl { color: #999999; }
#statusupdate, #notification { display: none; border: 2px solid #CC3333; background-color: #FFCCCC; margin: 10px; padding: 8px; }
#notification { background-color: #669966; color: white; border: none; }

#quiz-result, #quiz-start { margin: auto; background-image: url('/images/chalkboard.jpg'); background-repeat: no-repeat; width: 400px; height: 300px; color: white; }
#quiz-start { background-image: url('/images/chalkboard-plain.jpg'); margin-bottom: 40px; }
#quiz-result p, #quiz-result h1, #quiz-start p, #quiz-start h1 { padding-left: 40px; padding-right: 40px; }
#quiz-result h1, #quiz-start h1 { padding-top: 40px; }

.biglink { margin-top: 30px; color: white; text-align: right; margin-right: 20px; }
.biglink a {font-size: 1.4em; font-weight: bold; color: yellow; }

.orangetxt { color: #FFCC66; font-weight: bold; }

#quiz-start ul { width: 360px; list-style: none; overflow: auto; }
#quiz-start li { width: 100px; display: inline; padding:2px; float: left; }

.sidebubble h3 {
    color: white;
    -webkit-border-top-left-radius: 4px; -moz-border-top-left-radius: 4px; border-top-left-radius: 4px;
    -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
    width: 90%;
    font-size: 1rem;
    padding-left: 0.5rem;
}

#updates, #join, #leaderboard, #addquestion, #feedback, #qotd, #wordlist, #login {
     width: 200px;      
     margin: auto; 
     margin-bottom: 1rem;
     -webkit-border--radius: 8px; -moz-border--radius: 8px; border-radius: 8px;
}

#updates, #login { border: 3px solid #d7a12d; }
#updates h3, #login h3 { background-color: #ecbd58; }
#join { border: 3px solid #ea2a19; }
#join h3 { background-color: #ed5b5b; }
#qotd { border: 3px solid #5086b2; }
#qotd h3 { background-color: #61b3cb; }
#leaderboard { border: 3px solid #67b250; }
#leaderboard h3 { background-color: #67b250; }
#leaderboard a { color: #67b250; }
#addquestion { border: 3px solid #767676; }
#addquestion h3 { background-color: #a4a4a4; }
#feedback { border: 3px solid #5086b2; }
#feedback h3 { background-color: #61b3cb; }
#wordlist { border: 3px solid #4b4b4b; }
#wordlist h3 { background-color: #4b4b4b; }
#wordlist { color: #000; }

#updates p, #join p, #leaderboard ol, #addquestion p, #feedback p, #leaderboard p { margin: 0px; padding-top: 4px; }
#leaderboard ol { margin-bottom: 10px; }
#leaderboard img { padding-right: 1px; }
#beleaderboardst p { text-align: center; }

#feedback textarea { width: 154px; margin-left: 12px; height: 100px; border: 1px solid #5086b2; background-color: #e0f3f8; }
#feedback button { width: 154px; margin-left: 12px; background-color: #386390; color: white; border: 1px solid #003366; }

#best #myrank { background-color: #CCFFCC; padding: 4px; width: 80%; margin: auto; margin-top: 10px; text-align: center; }

.leaderboard { 
 border-collapse: collapse;
}
.leaderboard th { background-color: #a7c942; color: white; padding: 4px; background-color: #000; }
.leaderboard th, .leaderboard td { border-bottom: 1px solid #98bf21; }
.leaderboard tr { background-color: #eaf2d3; }
.leaderboard td img { margin-right: 4px; }

#leaderboard-top100 { width: 98%; }
#leaderboard-top100 td { padding: 0.5em; }
#leaderboard-top100 img { height: 3em; padding-right: 0.5em; }
#leaderboard-top100 #crown { height: 1em; }
#selfrow { background-color: #006633; color: white; }

.score, .difficulty { font-weight: bold; }
.low, .hard { color: #ff0000; }
.med, .medium { color: #ff9900; }
.high, .easy { color: #008800; }

.playerrank { color: #666666; }

#percentage { font-size: 2em; }

.tagline { /* blurb describing the type-in quiz or wordsearch */
 font-size: 0.8rem;   
}

#typehere, #statsbar, #yourscore {
    overflow: auto; 
    text-align: center; 
    padding: 4px; 
    background-color: #99FF99; 
    border-radius: 8px; 
    color: #000; 
    font-weight: bold; 
    width: 98%; 
}
#typehere { background-color: #FFFF99; }

#typeinbox { padding: 4px; }
#typeinbox input { text-align: center; padding: 4px; }

/* IMPORTANT */
#typeinanswers-container { overflow: auto; margin-bottom: 2em; }
.typeinanswer { 
    color: white; 
    background-color: #006633; 
    display: none; 
    overflow: hidden; 
    border: 1px solid grey; 
    padding: 4px; 
    margin: 4px; 
    text-align: center; 
    float: left; 
}

img.reveal { display: none; }
#timer { float: right; }
#youscored { display: none; font-size: 2rem; }
#found { float: left; }

#siteaveragescore, #quip { display: none; font-size: 0.8rem; color: #999; text-align: center; }
#quip { font-size: 1rem; }

#giveup { overflow: auto; margin: auto; text-align: right; margin-right: 1em; }
#giveupbutton { font-size: 0.8rem; background-color: red; color: white; border: none; padding: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; }

.timeup { color: #990033; text-align: right; }
#typeinresults { float: left; width: 240px; }


.label { text-transform: uppercase; font-weight: bold; }
#yourscore { float: left; width: 200px; padding: 15px; margin-bottom: 20px; }

#tablecontainer { overflow: auto; margin: auto; }
#tablecontainer p { text-align: center; }

.bar { height: 10px; }
.percentage { text-align: left; }
.undernote { text-decoration: underline; }

.avatar-container { overflow: auto; }
.avatar-item {
     float: left; 
     margin: 1em; 
     border: 2px solid #ddd; 
     width: 20%; 
     height: 120px;

     display: flex;
      justify-content: center;
      align-items: center;
    }

.locked img { 
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%); 
        opacity: 0.5;
    }

.tier-requirements {
    text-decoration:  underline;
    color: red;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

  @keyframes pulse0 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes pulse1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.shaker:hover {     
    animation: shake 10s;
    animation-iteration-count: infinite;
}

#sound_option { height: 0.5em; }