body {
	color: #000;
	background-color:#ccc;
	margin: 0;
}

body, p { 
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.outertable { background-color: #ccc; }

#tipsbox, #settingsbox, #notesbox, #mapCreditBox,  #resultsbox, #studyinfo, #messagebox, #milestonebox {
	visibility: hidden;
}


#msAchieved {
    /* font-weight: bold; 
	font-size: 14px; */
}

.msAchievedTitle {
	font-weight: bold;
	font-size: 14px;
}
.msAchievedText {
font-weight: normal;
	font-size: 12px;
}

.outertable { background-color: #ccc;}

#headerTable {background-color: #fff;}
#footer {
	height: 50px;
	background-color: #ddd;
	clear: both;
	width: 100%;

	position : relative;

	border-top : 2px solid #174749;
	text-align:center;
	/*font-family: sans-serif;*/
	font-size: 12px;
	padding-top: 20px;
	margin-top: 30px;
	z-index: 1;
}



body.home {
	
	background-color:#FFF;
	
}

.infoHeader {
	background-color:#FFF;
	height: 64px;
}



#headerTable td {
	padding: 15px 30px 0 15px;
}

#qabox {
	background-color: white;
	border: 1px solid #316699;
	padding: 15px;
	height: 95px;
	margin-right: 35px;
	margin-top: 15px; 
	/*max-width:465px;*/
	  width: 435px;  /* was coded as 400 but behaving as 434ish, because of margin??? */
}


.box {
	background-color: #dddddd;
	border: 1px solid #174749;
	min-width:  300px;
	margin-top: 10px;
	padding: 5px 5px 5px 5px;
	
}

.shareicon {
	display: inline;	
	padding-right: 4px;
	position:relative;
	top:5px;
}

#sharebox {
	position: relative;
	width: 455px;
}

#questionArea { 
    color: #576d94; 
    font-size: 16px; 
    font-weight: bold; 	
}

#nextQuestionText { 
    color: #0000ff; /*#669966; */
   /* font-family: Verdana, sans-serif; */
    font-size: 16px;
    font-weight: bold; 
   /* visibility: hidden;  */
    padding: 5px 0 5px 0;
}


#correctResult { 
    color: #669966; 
   /* font-family: Verdana, sans-serif; */
    font-size: 16px;
    font-weight: bold; 
   /* visibility: hidden;  */
}

#incorrectResult { 
    color: #6A0922; 
   /* font-family: Verdana, sans-serif; */
    font-size: 16px;
    font-weight:  bold; 
}

.pageHeading {
	color:#3775b0;
	font-family:  Tahoma,Trebuchet,Verdana,Arial,Sans-Serif;	
	font-size:1.4em;
}

.helpHeading {
	color:#3775b0;
	font-family:  Tahoma,Trebuchet,Verdana,Arial,Sans-Serif;	
	font-size:1.0em;

}

.nameLabel {
	font-family:"Arial,Verdana,Serif";
	font-size:0.8em;
}

.bordered-img {
   border:1px solid #000;

}

/* boxes */

.popbox {
	width: 445px;
	border: 2px solid #174749; /* was 669966  */
	background-color: #ffffff;
	/*padding-right: 20px;*/
	padding: 0px 0px 20px 30px;
 	
	color: #000000;
	/* font-family: sans-serif; */
	/* font-size: 12px; */
	border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
        
    -moz-box-shadow: 5px 5px 8px #CCC;
    -webkit-box-shadow: 5px 5px 8px #CCC;
    box-shadow: 5px 5px 8px #CCC;

	z-index: 4;
}

.popboxContent {
	max-height: 320px;
	padding-right: 15px;
	margin-right: 0;
 	
}

/* Used for achievements/milestones pop-up  also used to give a warning message about not being signed in */
.boxBottomCentered {
  position: fixed;
  top: 65%;
  left: 45%;
  margin-top: -50px;
  margin-left: -100px;
}

.boxTitle {
	/*font-family: sans-serif;*/
	color: #174749;  /* was 669966  */
	font-weight: bold;
	/* padding-left: 15px; */
	
	
	font-size: 16px;
	margin-bottom: 5px;
	margin-top: 20px;
}

.close {
	float: right;
	color: #174749;  /* was 669966  */
	
	font-weight: bold;
	text-decoration: none;
	/*font-family: sans-serif;*/
	font-size: 16px;
}
.popbox ul {
	margin-left: 0;
	padding-left: 0;
}

.popbox li {
	/* font-size: 14px; */
	text-indent: none;
	margin: 10px 0;  /* some space between each li item */
	
}



.button {
    padding: 5px 10px;
    display: inline;
    background: #777 url(../images/button.png) repeat-x bottom;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: normal;
   font-family:  Tahoma,Trebuchet,Verdana,Arial,Sans-Serif;	
   font-size: 0.9em;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    text-decoration: none;
    }
.button:hover {
    background-position: 0 -48px;
    }
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }
.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #3775b0; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.button.small { font-size: 75%; padding: 3px 7px; }
.button.small:hover { background-position: 0 -50px; }
.button.small:active { padding: 4px 7px 2px; background-position: 0 top; }
.button.large { font-size: 125%; padding: 7px 12px; }
.button.large:hover { background-position: 0 -35px; }
.button.large:active { padding: 8px 12px 6px; background-position: 0 top; }