/**
 * styles.css
 *
 * Computer Science 50
 * Project
 *
 * Global CSS.
 */

/* ***************************************
*** Start of  main body layout			***
*************************************** */
h1
{
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}
h2
{
	font-size: 17px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}
h3
{
	font-size: 16px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}
h4
{
	font-size: 15px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}
h5
{
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}
.infotext
{
	font-size: 16px;
	font-family: Arial, Verdana, sans-serif;
	color: #0066cc;
}

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

li
{
	/* Stop ie and chrome aligning list bullets down the LHS Margin */
    list-style-position:inside;
}

/* **********************************************************
*** Experiment with use of divs to control tabular layout ***
********************************************************** */
div.divtableheader
{
	border: none;
	font-size: 20px;
	background-color: #003D7A;
	color: #B2D1F0;
	padding: 5px;
	width: 100%;
}

div.divheight
{
	min-height: 28px;
	font-size: 14px;
	height: 100%;
	overflow: auto;
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: #0066cc;
	-moz-border-radius: 0px 0px 0px 0px;
}

div.divtablecell-leftborder
{
	border-style: outset;
	border-color: inherit;
	border-width: 0px 0px 0px 1px;
}
div.divtablecellcontent
{
	text-align: left;
	float: left;
}

div.divtablecellwidth10
{
	width: 10%;	
}
div.divtablecellwidth20
{
	width: 20%;	
}
div.divtablecellwidth30
{
	width: 30%;	
}
div.divtablecellwidth70
{
	width: 70%;	
}
div.divtablecellwidth80
{
	width: 80%;	
}

div.divtablecategory
{
	background-color: #B2D1F0;
	
}

div.divtablerowsubcategory
{
	background-color: #E6F0FA;
}
div.divtablecellsubcategory
{
	padding-left: 5%;
}
div.divtablerowsubcategory:hover {
	background-color:#FFFFFF;
	color:#09C;
}

/* ***************************************
*** Form element layout					***
*************************************** */
select
{
max-width: 200px;
}
select.dropcat
{
width: 50%;
float: left;
display: block;
font-family: Arial, Verdana, sans-serif; 
font-size: 14px;
color: #0066cc;
width: 200px;
}
label
{
margin-right: 4px;
font-family: Arial, Verdana, sans-serif; 
font-size: 14px;
color: #0066cc;
}

label.above
{
width: 100%;
float: left;
text-align: left;
margin-left: 10%;
display: block;
font-family: Arial, Verdana, sans-serif; 
font-size: 14px;
color: #0066cc;
}

label.lineup
{
width: 50%;
float: left;
text-align: right;

}

fieldset
{
	border: none;
	padding: 0;
}
legend
{
	font-size: 20px;
	background-color: #003D7A;
	color: #B2D1F0;
	padding: 5px;
	width: 100%;
}

.outline
{
	border: solid #0066CC thin;
	background-color: #E6F0FA;
}

.someheight
{
	height: 35%;
}


.formcenter
{
	width: 80%;
    margin: 0 auto;
}

.textleft
{
	text-align: left;
	padding: 4px;
}

textarea.noscroll
{
	resize:none;
	overflow: hidden;
}

textarea.filltd
{
	resize:		none;
	overflow: 	hidden;
	width: 		100%;
	border:		none;
	outline: 	none;
}

/* ***************************************
*** Image control						***
*************************************** */
#loading-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
}

/* ************************************************************
palette of blue shades to use within this CSS
	#000000   (	0	,	0	,	0	)   Black  : 
	#000A14   (	0	,	10	,	20	)          : 
	#001429   (	0	,	20	,	41	)          : Table Text, Table Caption Background
	#001F3D   (	0	,	31	,	61	)          : 
	#002952   (	0	,	41	,	82	)          : 
	#003366   (	0	,	51	,	102	)          : 
	#003D7A   (	0	,	61	,	122	)          : Table Header Background
	#00478F   (	0	,	71	,	143	)          : 
	#0052A3   (	0	,	82	,	163	)          : 
	#005CB8   (	0	,	92	,	184	)          : 
	#0066CC   (	0	,	102	,	204	)          : Table borders
	#1975D1   (	25	,	117	,	209	)          : 
	#3385D6   (	51	,	133	,	214	)          : 
	#4D94DB   (	77	,	148	,	219	)          : 
	#66A3E0   (	102	,	163	,	224	)          : Question List Category heading,
	#80B2E6   (	128	,	178	,	230	)          : 
	#99C2EB   (	153	,	194	,	235	)          : 
	#B2D1F0   (	178	,	209	,	240	)          : Nav Menu background
	#CCE0F5   (	204	,	224	,	245	)          : 
	#E6F0FA   (	230	,	240	,	250	)          : Nav Menu background hover
	#FFFFFF   (	255	,	255	,	255	)   White  : 
************************************************************* */
img
{
	max-width: 100%;
	max-height: 100%;	
}
.container
{
    /* center contents */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.fillpink
{
	height: 30px;
	background: #FF99CC;	
}

.threesidebyside
{
          display: block;
          float:left; 
          width:33%;
}

div.listalignleft li 
{
	text-align: left;
    margin-left:5%;
    margin-right:5%;
}

#headerbar
{
    /* center form controls */
    display: inline-block;
    padding-top 	: 4px;
    padding-bottom 	: 4px;

    /* override Bootstrap's 100% width for form controls */
    width: auto;
}
#info_area
{
    margin-left: 		20px;
    margin-right: 		20px;
    border: 0px 		solid;
    border-radius: 		25px;
    background-color: 	#d0e4fe;
    height : 			100px;
    box-shadow: 10px 10px 5px #888888;
}

.player_info
{
font-family: Arial, Verdana, sans-serif; 
font-size: 16px;
color: #0066cc;
}

.form-control
{
    /* center form controls */
    display: inline-block;
    padding-top: 4px;
	
    /* override Bootstrap's 100% width for form controls */
    width: auto;
}

#bottom
{
    /* shrink bottom's font size */
    font-size: smaller;

    /* surround with whitespace */
    margin: 20px;
    
    /* border required?
    border: 2px solid;
    border-radius: 25px;
    */
}

div#centerpanel 
{	
	border: 0px solid;
	text-align: left;
    margin-left:1%;
    margin-right:1%;	
}
div#playarea 
{
	border: 0px solid;
    margin-left:10%;
    margin-right:10%;
}

div#CountDownTimer 
{
	border: 0px solid;
    margin: 0 auto;
    height: 80px;
    width: 80px;
}

div#question_no
{
	border: 0px solid;
    margin-left:auto;
    margin-right:auto;
    height: 20px;
    font-weight:bold;
}

div#q_area
{
	margin: 20px;
	margin-top: 4px;
	margin-bottom: 4px;
    border: 1px solid;
    border-radius: 25px;
    background-color: white;
    height : auto;
    min-height: 30px;
    font-size: 16px;
}

div#category_area
{
	margin: 20px;
	margin-top: 4px;
	margin-bottom: 4px;
    border: 1px solid;
    border-radius: 25px;
    background-color: white;
    height : auto;
    min-height: 30px;
    box-shadow: 10px 10px 5px #888888;
}

div#a_centerspace
{
	background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #001429;
    font-size: 16px;
    font-weight: bold;
}


/* ***************************************
*** Start of CSS for table rendering   ***
*************************************** */
table {
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    color:rgb(0,20,41);
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border-width: 0px 0px 0px 0px;
    border-spacing: 2px 2px;
    border-style: outset outset outset outset;
    border-color: #0066cc;
    border-collapse: collapse;
    background-color: transparent;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}

table caption {
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: #0066cc;
	font-size: 28px;
	color:white;
	background-color: rgb(0,20,41);
	-moz-border-radius: 0px 0px 0px 0px;
}

table th {
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: #0066cc;
	background-color: rgb(0, 61, 122);
	color:white;
	text-align: center;
  	vertical-align: middle;
	-moz-border-radius: 0px 0px 0px 0px;
}

table td {
	border-width: 1px 1px 1px 1px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: #0066cc;
	background-color: white;
	text-align: left;
	-moz-border-radius: 0px 0px 0px 0px;
}

td.right {
text-align: right
} 
td.left {
text-align: left
}

/* style table elements for having form input text fields*/
td.unpadded {
	padding: 0px 3px 0px 3px;
}

td.unpadded input[type=text] {
   border: none;
}

td.unpadded textarea[type=text] {
   border: none;
}

td.imagecontent {
	padding: 0px 3px 0px 3px;
	width: 1%;
}

td.categoryheader {
	padding: 0px 3px 0px 3px;
	background-color: rgb(	102	,	163	,	224	);
	text-align: center;
  	vertical-align: middle;
}




/* ***************************************
*** Start of CSS for forms and buttons ***
*************************************** */
.fitdivwidth {
    display: inline;
    width: 96%;
    margin-right: 2%;
  	margin-left: 2%;
    box-sizing: border-box; /* CSS3 */
    -moz-box-sizing: border-box; /* Firefox */
    -ms-box-sizing: border-box; /* IE8 */
    -webkit-box-sizing: border-box; /* Safari */
    -khtml-box-sizing: border-box; /* Konqueror */
}

form.contentcentered 
{
    display: inline-block;
    text-align: center;
}

/* A bit of div/css wizardry to align buttons in forms nxt to each other */
.buttoncontainer {
  display: inline-block;
  text-align: center;
  margin-top: 0px;
  margin-right: 10%;
  margin-bottom: 0px;
  margin-left: 10%;
  overflow: hidden;
}
.bigbuttoncontainer {
  display: inline-block;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
.bigbuttonleft, .bigbuttonright {
  float: left;
  width: 50%;
  margin: 0 0%;
}

.buttonleft, .buttonright {
  float: left;
  width: 30%;
  margin: 0 0%;
}


button.formbtn
{ 
background-color: rgb(236,236,236);
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
color: #0066cc;
width : 114px;
margin: 4px 2px 4px 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999
/*float: right
border: 2px outset rgb(0,102,153) */
}
button.formbtn:hover {
background:#fff;
color:#09C;
}

button.bigsquare
{ 
background-color: rgb(236,236,236);
font-size: 16px;
font-family: Arial, Verdana, sans-serif;
color: #0066cc;
width : 100px;
height : 100px;
margin: 4px 2px 4px 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999
/*float: right
border: 2px outset rgb(0,102,153) */
}

.bigsquare:hover {
background:#fff;
color:#09C;
}

button.answerbtn
{ 
background-color: #ECECEC;
width : 100%;
height : width;
margin: 4px 2px 4px 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
word-wrap: break-word;
}

.answerbtn:hover {
background:#fff;
color:#09C;
}

button.answerbtngreen
{ 
background-color: #CCFF66;
width : 100%;
height : width;
margin: 4px 2px 4px 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
word-wrap: break-word;
}

button.answerbtnred
{ 
background-color: #FFB9B9;
width : 100%;
height : width;
margin: 4px 2px 4px 2px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
word-wrap: break-word;
}

.btn-file input[type=file] {
   
    min-width: 100%;
    min-height: 100%;
    
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    
    cursor: inherit;
    display: block;
}

input[type=checkbox] {
    float: left;
    margin-right: 0.5em;
}

.checkcontainer {
  display: inline-block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.alignedlist 
{ 
	width: 100%;
	list-style: none;
	text-align : left;
	color: #0066cc;
	font-weight : bold;
}
/* ***************************************
*** Start of CSS for menu navigation   ***
*************************************** */
#navigation {
    font-size: 14px;
    text-align: right;
	z-index:10000;
}
	#navigation ul {
	    margin: 0px;
	    padding: 0px;
	}  
	ul.top-level { background:rgb(	178	,	209	,	240	); color: #3333FF; }
		
		#navigation li { list-style: none; padding-right: 4px; }
        ul.top-level li {
            border-bottom: #fff solid;
            border-top: #fff solid;
            border-width: 1px;
        }
		#navigation a {
			cursor: pointer;
			display:block;
			height:25px;
			line-height: 25px;
			text-indent: 10px;					
			text-decoration:none;
			width:100%;
		}
			
		#navigation a:link 		{ color: #3333FF; } 	/* unvisited link */
		#navigation a:visited 	{ color: #3333FF; } 	/* visited link */
		#navigation a:active 	{ color: #3333FF; }		/* selected link */

		#navigation a:hover{ text-decoration:underline; color: #000099;	}
	    #navigation li:hover {
	        background:rgb(	230	,	240	,	250	);
	        position: relative;
	    }
	
		
	    
	    
	    
        ul .sub-level { display: none; }
        li:hover .sub-level {
            background:rgb(	230	,	240	,	250	);
            border-bottom: #fff solid;
            border-top: #fff solid;
            border-width: 1px;
            display: block;
            position: absolute;
            left: 105px;
            top: 4px;
        }
        ul.sub-level li {
			border: none;
			float:left;
			width:110px; 
        }
		#navigation .sub-level { background:rgb(	178	,	209	,	240	); }
		#navigation .sub-level .sub-level { background:rgb(	178	,	209	,	240	); }
						
	/*IE RESET HELPER*/
	li:hover .sub-level .sub-level { display:none; }
	.sub-level li:hover .sub-level { display:block; }