@charset "utf-8";
/* CSS Document */

body { 
 margin: 0px; 
 font-family: "Arial", "Helvetica", Sans-serif;
 /* background-image:url('../media/Development/background.jpg');
 background-repeat:repeat-y;
 background-position:center; */
}

#MasterArea {
    margin: auto;
    width: 800px;
    background-color: White;
}

/* Header and Menu */
#Header {
 background-image:url('/assets/img/Development/blue_gradient.jpg');
 background-repeat:repeat-x;
 height: 345px;
 text-align: left;
 padding: 0px 0px 0px 18px;
 padding: 40px 0px 0px 18px;
}

#Header .cityLogo {

}

#Header .cityHeader {
 position: absolute;
 padding: 86px 0px 0px 310px;
 font-size: 3.5em;
 text-align: left;
}

#Header .bigCity {
 position: absolute;
 padding: 60px 0px 0px 310px;
 font-size: 3.5em;
 text-align: left;
 color: #CCCCCC;
}

#Header .smallCity {
 position: absolute;
 padding: 80px 0px 0px 310px;
 font-style: italic;
 font-weight: bold;
 font-size: 2em;
 text-align: left;
}

#Header .loginBox {
 position: absolute;
 /* padding: 5px 0px 0px 525px; */
 padding: 5px 0px 0px 75px;
 margin-top: -40px;
 z-index: 100;
 text-align: right;
 width: 700px;
}

#Header .loginBox .textbox {
 width: 80px;
 padding: 2px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 2px;
 height: 20px;
 font-size: 1.2em;
}

#Header .loginBox .button {
 width: 90px;
 height: 28px;
 font-size: 1.2em;
 padding: 2px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 2px;
}

#Header .loginBox a {
 text-decoration: none;
 color: #FFDC00;
}

#Header .sloganText {
 position: absolute;
 padding: 160px 0px 0px 200px;
 font-style: italic;
 font-size: 1.5em;
 text-align: left;
}


/* Main Area */
#MainContentArea 
{
    float: left;
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border-bottom: solid 2px #000000;
}

#LeftSidebar 
{
    width: 130px;
    float: left;
    text-align: center;
}

#LeftSidebar .doTheMathHeader
{
    font-weight:bold; 
    color: Red; 
    font-style: italic; 
    font-size: 1.2em; 
    text-align: center;
}

#LeftSidebar .doTheMathNumbers
{
    font-size: 1.3em; 
    font-weight: bold;
}

#LeftSidebar .doTheMathItalic
{
    font-size: .7em;
    line-height: 170%;
}

#LeftSidebar .specialBox
{
    padding: 10px 0 10px 0;
    background-color: #FFDC00;
    border-bottom: solid 2px #000000;
    border-top: solid 2px #000000;
}

#LeftSidebar .specialBox a {
 text-decoration: none;
 color: Black;
}

#LeftSidebar .whiteSpecialBox
{
 margin-top: -10px;
 padding-top: 5px;
 /* border-top: solid 2px #000000; */
}

#LeftSidebar h3
{
 color: Black;
 font-family: "Times New Roman", "Times", "serif";
 font-style: italic;
 font-weight: bold;
 font-size: 1.1em;
 padding-bottom: 6px;
 background-image: url(/assets/img/Development/q.gif);
 background-repeat: no-repeat;
 border-bottom: solid 1px #000000;
 line-height: 160%;
 margin-bottom: 0px;
 padding-left: 4px;
}
    
#RightSidebar 
{
    width: 130px;
    float: left;
}

#RightSidebar h3
{
 color: Black;
 font-family: "Times New Roman", "Times", "serif";
 font-style: italic;
 font-weight: bold;
 font-size: .9em;
 padding-left: 28px;
 padding-bottom: 6px;
 background-image: url(/assets/img/Development/q.gif);
 background-repeat: no-repeat;
 border-bottom: solid 1px #000000;
 line-height: 160%;
 margin-bottom: 0px;
}

#RightSidebar ul {
    margin-left: 0px;
    margin-top: 0px;
    padding-left: 0px;
    list-style: none;
}

#RightSidebar li {
 border-bottom: solid 1px #000000;
 padding: 6px 0px 6px 0px;
 font-size: .7em;
 color: #000000;
 font-family: "Times New Roman", "Times", "serif";
 text-transform: uppercase;
 font-weight: bold;
}

#RightSidebar li a {
 text-decoration: none;
 color: #000000;
}

#RightSidebar li a:hover {
 text-decoration: underline;
 color: #006600;
}

#Footer {
    float: left;
    border-top: solid 1px #A5A5A5;
    padding: 10px 20px 0px 20px;
    width: 760px;
}

#Footer .socialize 
{
    float: left;
    width: 210px;
}

#Footer .socialize img {
 float: left;
}

#Footer .purchaseNow {
 float: left;
 padding: 0px 10px 0px 45px;
}

#Footer .purchaseNow .button {
 float: left;
 padding: 5px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 5px;
 font-weight: bold;
 font-style: italic;
}

#Footer .purchaseNow .button2 {
 width: 32px;
 height: 70px;
 word-wrap: break-word;
 padding: 5px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 5px;
 font-weight: bold;
 font-style: italic;
}

#Footer .legalMenu {
 float: right;
 text-align: right;
}

#Footer .legalMenu a {
 text-decoration: none;
 color: Black;
}

#Footer .legalMenu a:hover {
 text-decoration: underline;
}

#Footer .legalMenu .button {
 float: left;
 margin: 1px;
 padding: 1px;
 border-style: solid;
 border-width: 2px;
}

#Footer .legalMenu .button a {
 text-decoration: none;
 color: Black;
}

#MainText {
    margin: 0px 25px 10px 25px;
    width: 490px;
    float: left;
    z-index: 800;
}

#MainText .homePage {
    text-indent: 1.5em;
}

#MainText h1 {
    font-size: 1.4em;
    font-weight: bold;
    color: #000080;
}

#MainText h3 {
    color: #000080;
}

#MainText .rightHeader {
    text-align: right;
}


.summaryTable 
{
    border: none;
    border-collapse:collapse;
    width: 100%;
}

.summaryTable tr
{
    background-color: #F7F6F3;
    color: #333333;
}

.summaryTable .altRow
{
    background-color: White;
    color: #284775;
}

.summaryTable .totalRow
{
    background-color: #5D7B9D;
    color: White;
    font-weight: bold;
}

.summaryTable td
{
    
}

.summaryTable .money
{
    text-align: right;
}

#homeButtons
{
    padding: 20px 5px 10px 5px;
}

#homeButtons .button
{
 float: left;
 width: 140px;
 height: 28px;
 font-size: 1.2em;
 padding: 2px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 2px;
 margin-right: 10px;
 text-align: center;
}

#homeButtons .button a {
 text-decoration: none;
 font-weight: bold;
 text-transform: uppercase;
 color: Black;
}

/* Quest Section */

#QuestMainText {
 margin: 15px; 
 padding: 5px 20px 5px 20px; 
 border-style: solid;
 border-width: 4px;
 border-color: #9AD7FF;
 font-family: "Arial", "Helvetica", Sans-serif;
 font-size: 18px;
}

#QuestMainText .questionNumber {
 font-size: .9em;
}

#QuestMainText .itemType {
 font-size: 1.8em;
 line-height: 250%;
}

#QuestMainText .text {
 font-size: 1em;
}

#QuestMainText .textbox {
 padding: 5px;
 background-color: #FFFFFF;
 border-style: outset;
 border-width: 5px;
}

#QuestMainText .hintButton {
 padding: 5px;
 background-color: #9AD7FF;
 border-style: outset;
 border-width: 5px;
 width: 300px;
 height: 40px;
 font-size: 12pt;
 margin: 10px 20px 10px 0px;
}

#QuestMainText .submitButton {
 padding: 5px;
 background-color: #FFFF00;
 border-style: outset;
 border-width: 5px;
 width: 180px;
 height: 40px;
 font-size: 12pt;
}

#QuestMainText .skipButton {
 padding: 5px;
 background-color: #00FF00;
 border-style: outset;
 border-width: 5px;
 width: 270px;
 height: 40px;
 font-size: 12pt;
}

#QuestMainText .pauseButton {
 padding: 5px;
 background-color: lightcoral;
 border-style: outset;
 border-width: 5px;
 width: 180px;
 height: 40px;
 font-size: 12pt;
}

#QuestMainText .readOnlyButton {
 padding: 5px;
 background-color: orange;
 border-style: outset;
 border-width: 5px;
 width: 300px;
 height: 40px;
 font-size: 12pt;
 color: black;
 text-decoration: none;
 border-color: white;
}

#QuestMainText .refreshButton {
 padding: 5px;
 background-color: yellow;
 border-style: outset;
 border-width: 5px;
 width: 300px;
 height: 40px;
 font-size: 12pt;
 color: black;
 text-decoration: none;
 border-color: white;
}

#QuestMainText .correctAnswer {
 font-size: 1.8em;
 line-height: 250%;
 color: Green;
}

#QuestMainText .wrongAnswer {
 font-size: 1.8em;
 line-height: 250%;
 color: Red;
}

.gamePausedText {
  text-align: center;
  font-size: 50px;
  color: red;
  background: #333333;
  font-weight: bold;
  padding: 100px 25px;
}


.bigYellowButton {
 width: 250px;
 height: 28px;
 font-size: 1.2em;
 padding: 2px;
 background-color: #FFDC00;
 border-style: outset;
 border-width: 2px;
 text-align: center;
 margin: 20px auto;
}

.bigYellowButton a {
 text-decoration: none;
 color: black;
 font-weight: bold;
 text-transform: uppercase;
 line-height: 150%;
}


/* Misc and ClearFix */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

label {
    display: inline-block;
    /* width: 5em; */
}


/* Phones etc. */
@media (max-width: 650px) 
{
    #QuestMainText 
    {
        border: none;
        padding: 0px;
    }    
}

img
{
    max-width: 100%;
    height: auto;
}

/* Get rid of the tables
table[style]
{
    width: auto !important;
}
*/



/* Loading Modal */
#loadingModal
{
    z-index: 1000;
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(66,66,66, .6); 
    text-align: center; 
}

#loadingModalContent
{
    border: 2px solid black;
    z-index: 1050;
    width: 260px;
    height: 200px;
    background-color: rgba(255,255,255, 1);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -130px;
}
/* End loading modal */

input[type=button]
{
    cursor: pointer;
}