/*
see:
http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width/2251833#2251833
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
*/

body {
	width:96%;
	padding-left:2%;
	padding-right:2%;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	border:0px;
	background-image:url('translucentRect.png'); 
	background-position:0px 0px;
	background-repeat:repeat-x; 
	background-color:#FFFFFF;
	font-family:Arial, sans-serif;
	line-height:145%;
}

body, div, p, form, input{
	font-size:16px;
	font-family:Arial, sans-serif;
	line-height:145%;
	color: black;
	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

p, table, tr, td{
	margin-top:12px;
	margin-bottom:12px;
}

/*p, ol, ul, li, tr, td{
        margin: 1em 0px;	
}*/

input[type='button'], input[type='text'], input[type='password']{
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	padding:0px 4px 0px 4px;
	margin:0px 1px 0px 1px;
    display:inline-block; 

	font-weight:normal;
	text-decoration:none; 
	color: black;
	background-color: transparent;
	border: 1px solid black;
}
input[type='button']:hover, input[type='text']:hover, input[type='password']:hover{ 
	font-weight:normal;
	/*text-decoration:underline;*/ 
	text-decoration:none; 
	color: black;
	background-color: #DDDDDD;
	border: 1px solid black;
}
input[type='button']:disabled { 
	font-weight:normal;
	text-decoration:none; 
	color: gray;
	background-color: transparent;
	border: 1px solid lightgray;
}

div.bigContainer {
	/* Makes bigContainer contain its floated children */
	/*overflow: hidden;*/
    width: 100%;
	/*max-width:980px;*/
/*	max-width:90%;*/
	margin-left:auto; 
	margin-right:auto; 
	margin-top:0px;
	margin-bottom:0px; 
	padding:0px;
	border:0px;
}
/* the following code is an alternative to overflow:hidden. see http://colinaarts.com/articles/float-containment/#summary */
/* For modern browsers */
div.bigContainer:before, 
div.bigContainer:after {
  content: '';
  display: table;
}
div.bigContainer:after {
  clear: both;
}
/* For IE6/7 */
div.bigContainer { display: inline-block; }
div.bigContainer { display: block; }

div.rightCol {
	position:relative;
	z-index: 1;	/* Must specify relative position explicitly or else z-index doesn't work: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ */
	float: right;
	width:180px;
	margin-left:30px;
	
	/*background-color:rgba(0, 155, 155, 125);*/
}
div.content {
	/* Make this div take up the rest of the horizontal space, and no more */
	/*overflow: hidden;*/
	
	/*background-color:rgba(255, 0, 0, 125);*/
}
/* The following code is an alternative to overflow:hidden. see http://colinaarts.com/articles/float-containment/#summary */
/* For modern browsers */
div.content:before, 
div.content:after {
  content: '';
  display: table;
}
div.content:after {
  clear: both;
}
/* For IE6/7 */
div.content { display: inline-block; } 
div.content { display: block; } 



div.statusBar {
	position: fixed;
/*	position: fixed;*/
	top: 0px;
	right: 0px;
	height: 40px;
	width:96%;
	padding-left:2%;
	padding-right:2%;
	z-index:2;	/* To make sure maths appears underneath. see https://github.com/mathjax/MathJax/issues/277  */
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	border: 0px;
	background-color:rgba(160, 160, 160, 255); /*proper color*/
	/*background-color:rgba(0, 155, 0, 125);*/
}
div.statusContent {
	width:100%;
	/*max-width:980px;*/
/*	max-width:90%;*/
	height: 30px;
	position:relative;
	top:8px;
	z-index:1;	/* To make sure maths appears underneath. see https://github.com/mathjax/MathJax/issues/277  */
	margin-left:auto; 
	margin-right:auto; 
	margin-top:0px;
	margin-bottom:0px;
	text-align:right;
	padding:0px;
	border:0px;
	/*background-color:rgba(160, 160, 160, 255); proper color*/
	/*background-color:rgba(200, 200, 0, 125);*/
}

div.heading {
	/*max-width:980px;*/
	/*max-width:90%;*/
	width:100%; 
	margin-top:55px;
	margin-bottom:15px;
	padding:0px;
	border:0px;
/*	height: 65px;*/
	/*height: 90px;*/
	position:relative;
	margin-left:auto; 
	margin-right:auto;
	text-align:left;
	/*background-color:rgba(0, 0, 155, 125);*/
}

div.registerOrLoginDiv {
	width: 100%;
	position:relative;
	margin:0px;
	padding:0px;
}
form.registerForm {
	width:45%;
	float:left; 
	position:relative;
}
form.loginForm {
	width:45%;
	float:right; 
	position:relative;
}
td.profileLeftCol{
	white-space:nowrap; 
	text-align:left;
/*	see http://css-tricks.com/almanac/properties/w/whitespace/
*/
}
td.alignMiddle{
}
td.alignRightAndNoWrap{
	width:100%;	
	white-space:nowrap;
}
td.padAndAlignCenter{
	text-align:center;
	padding-left:8px;
	padding-right:8px;
}
td.padAndAlignRight{
	text-align:right;
	padding-left:8px;
	padding-right:8px;
}
input.loginOrRegisterInput{
	width:100%;
}
td.loginOrRegisterFeedback{
	width:100%;
	text-align:top;
}

a:link{
	text-decoration:none;
}
a:visited{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}

table.scoreTable{
	width:100%;
	/*border: 1px solid black;*/
}

td.scoreTableLeftCol{
	width:60%;
	white-space:nowrap; 
	/*border: 1px solid black;*/
	overflow:hidden;
}


td.scoreTableRightCol{
	width:40%;
	white-space:nowrap; 
	/*overflow:hidden;*/ 
	text-align:right;
	/*border: 1px solid black;*/
/*	see http://stackoverflow.com/questions/2127917/how-to-stretch-an-empty-element-horizontally
*/
}

td.underlineTopAndBottom{
	border-top-style:solid; 
	border-top-width:1px; 
	border-bottom-style:solid; 
	border-bottom-width:1px;
}

td.underlineBottom{
	border-bottom-style:solid; 
	border-bottom-width:1px;
}

td.underlineTop{
	border-top-style:solid;
	border-top-width:1px;
}





th.padAndAlignCenter{
	text-align:center;
	padding-left:8px;
	padding-right:8px;
}
th.padAndAlignRight{
	text-align:right;
	padding-left:8px;
	padding-right:8px;
}

th.underlineTopAndBottom{
	font-weight: normal;
	border-top-style:solid; 
	border-top-width:1px; 
	border-bottom-style:solid; 
	border-bottom-width:1px;
}

th.underlineBottom{
	font-weight: normal;
	border-bottom-style:solid; 
	border-bottom-width:1px;
}

th.underlineTop{
	font-weight: normal;
	border-top-style:solid;
	border-top-width:1px;
}