mainmenu.css

/* $Id: mainmenu.css,v 1.6 2010/08/14 16:57:54 sandking Exp $ */

/*
    This file is part of WebChess. http://webchess.sourceforge.net
	Copyright 2010 Jonathan Evraire, Rodrigo Flores

    WebChess is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    WebChess is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with WebChess.  If not, see <http://www.gnu.org/licenses/>.
*/

A:visited, :link {text-decoration: underline}
A:link {color : navy}
A:link:hover, :visited:hover {text-decoration: none}
A:visited {color: navy}
A:link:active, :visited:active {color: green}

body {
	margin: 0px;
	padding: 0px;
	color : #333;
	background-color: #fff;
	font-size : 11px;
	font-family : Arial, Helvetica, sans-serif;
}

form {
    margin: 0px;
}

/*.button {
	border : solid 1px #ccc;
	background: #E9ECEF;
	color : #666;
	font-weight : bold;
	font-size : 11px;
	padding: 4px;
	margin: 3px;
}*/
.challengeSelect{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1.5em;
	letter-spacing: 1px;
}


.tableButton {		
	-webkit-appearance: none;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 1px;
	font-size: 1.1em;
	color:#fff;
	cursor:pointer;
	background:#3B5998;
	border: 1px solid #3B5998;
	border-radius:10px;
	box-shadow: #4c4c4c 0px 0px 4px;
}

.tableButton:hover{
	color:yellow;
}

.button {		
	-webkit-appearance: none;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 1px;
	font-size: 1.7em;
	color:#fff;
	cursor:pointer;
	background:#3B5998;
	border: 1px solid #3B5998;
	border-radius:10px;
	box-shadow: #4c4c4c 0px 0px 4px;
}

.button:hover{
	color:yellow;
}

.inputlabel {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	}

.inputlabelPrefs {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.8em;
	text-align: left;
	margin-bottom: 10px;
	}

h1 {color : navy; text-align: center}
h2 {color : navy; text-align: center}
h3 {font-family: arial; font-weight: bold; text-align: left; text-indent:80}

hr {width: 50%}
.fullwidth {width: 100%}

#header {
	margin:0;
	/*margin-top:10px;*/
	padding: 10px;
	/*height:5%;*/
	height: 35px;
	width: auto;
	border-style:solid;
	border-color:#3B5998;
	border-width:0px 0px 1px 0px;
	background-color:#3B5998;
	color: white;
	box-shadow: #4c4c4c 0px 0px 8px;
	
}

#heading {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1.5;
}

#content {
	margin:0;
	padding:0;
	border:0;
	width:auto;
}

#rightcolumn
{
width: 600px;
text-align: left;
margin: 0 0 0 200px;
height: auto;
padding: 15px 0 0 5px;
border:0;
border-left: 1px dotted #fff;
}

.preferences {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 5px;
	width: 725px;
	background: #dddddd;
	border:1px solid #888;
	border-radius:10px;
	box-shadow: #3B5998 0px 0px 4px;
}

.preferences h1 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	letter-spacing: 1px;
	color: #000;
	margin: 0px;
	height: 50px;
	/*padding: 15px 4px 0 50px;*/
 	text-align: center;
	font-size: 1.5em;
}

.preferences-form {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	text-align: center;
	float: right;
	width: 725px;
}

.login-text {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	text-align: left;
	width: 125px;
	float: left;
}

.form-block {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	/*border: 1px solid #4c4c4c;*/
	background: #dddddd;
	padding-top: 15px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}

.viewmessage-form {
        margin-top: 30px;
	text-align: left;
	float: left;
	width: 800px;
}

.message-block {
	border: 1px solid #ccc;
	background: #E9ECEF;
        margin-left: 180px;
	padding-top: 15px;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
}

#personalinfo {display:none;}
#preferences {display:none;}
#challenge {display:none;}
#invitations {display:none;}
#messages {display:none;}
#continuegame {display:block;}
#viewgame {display:none;}

.clr {
    clear:both;
    }

.ctr {
	text-align: center;
}

.instruction {
	color: #000;
	margin:0;
	margin-bottom: 10px;
	font-size:1.2em;
}

/* Table styles. */

table {
  border-color: #ccc;
  border-spacing: 0px;
  border-style: solid;
  border-width: 0px;
  cell-spacing: 0px;
  width: 100%;
	box-shadow: #3B5998 0px 0px 3px;
	  border-top-left-radius: 10px;
  border-top-right-radius: 10px; 

}

td {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1.5em;
	padding: 10px;
	box-shadow: #4c4c4c 0px 0px 1px;
}

td.numeric {
  text-align: right;
}

th {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1.3em;
	font-weight: normal;
	color: #fff;
	padding: 2px;
	background-color: #3B5998;
}

th.mainHeader {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 1.5em;
  font-weight: normal;
  background-color: #3B5998;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; 
}

th a {
  color: yellow;
  text-decoration: underline;
}

th a:visited {
  color: #fff;
}

th a:active, th a:hover {
  color: yellow;
  text-decoration: underline;
}

tr{
	margin-bottom: 10px;
  background-color: #eeeeee;
}
tr.alternateRow {
  background-color: #eeeeee;
}

td.sortedColumn {
  background-color: #d0d0d0;
}

th.sortedColumn {
  background-color: #3B5998;
}

tr.alternateRow td.sortedColumn {
  background-color: #3B5998;
}

/* Menu definitions */

#navcontainer
{
	position: absolute;
	z-index: 10;
	/*top: 70px;*/
	/*left:15px;*/
	width: 200px;
	height: 100%;
	margin: 0;
	margin-top: 0px;
	padding: 0;
	border: 0;
	background: #3B5998;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 1.8em;
	text-align: center;
letter-spacing: 1px;
	/*text-transform: lowercase;*/
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;
}

ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 1em;
border-width: 1px solid #3B5998;
color: #fff;
text-decoration: none;
background: #3B5998;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #3B5998;
color: yellow;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: yellow;
background: #3B5998;
border-color: #aaab9c #fff #fff #ccc;
}

.inputboxPrefsReload{
	width: 60px;
	/*height: 35px;*/
	/*margin: auto;*/
	margin-top: -10px;
	margin-bottom: 10px;
	/*float: left;*/
	font-size: 1.6em;
	/*border: 1px solid #ccc;*/
}

.inputboxPrefsEmail {
	width: 300px;
	/*height: 35px;*/
	/*margin: auto;*/
	margin-top: -10px;
	margin-bottom: 10px;
	/*float: left;*/
	font-size: 1.6em;
	/*border: 1px solid #ccc;*/
	}


.inputboxes {
	width: 99%;
	/*height: 35px;*/
	margin: auto;
	margin-top: -10px;
	margin-bottom: 10px;
	float: left;
	font-size: 1.6em;
	/*border: 1px solid #ccc;*/
	}

.inputbox {
	width: 100%;
	height: 35px;
	margin: auto;
	margin-bottom: 10px;
	/*border: 1px solid #ccc;*/
	}

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}
 
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.4em;
    padding-top: 7px;
    background-color: #3B5998;
    border: 0px solid yellow;
    color: #696969;
    height: 27px;
    width: 80px;
    text-align: center;
    border-radius: 10px;
	box-shadow: #4c4c4c 0px 0px 4px;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#3B5998;
    color: yellow;
}