/* ----- general rules ----- */

body, div, p, blockquote, ol, ul, dl, li, dt, dd, td {
	text-align: justify;
	font-size: 12px;
	font-family: Verdana, Helvetica, Arial;
}

body {
	margin: 15px;
}

p {
	line-height : 140%;
}

h1 {font-size: 2em; margin: .6em 0;}
h2 {font-size: 1.5em; margin: .8em 0;}
h3 {font-size: 1.1em; margin: 1em 0; }
h4 {font-size: 1em; margin: 1.3em 0;}
h5 {font-size: 0.8em; margin: 1.6em 0;}
h6 {font-size: 0.6em; margin: 2.3em 0;}

li {
	list-style-image: url(images/greyball-10-on-white.gif);
	margin-bottom : 2px;
}

img {
	display: block;
	border: none;
}

img.left {
	float: left;
	margin: 0 1em 0.75em 0;
}

img.right {
	float: right;
	margin: 0 0 0.75em 1em;
}

a {
	text-decoration : none;
	font-weight: bold;
}

a:link {
	color: #00c;
}

a:visited {
	color: #88e;
}

table {
	border-collapse : collapse;
}

table td, table th {
	padding : 0;
}

.left-col {
	width : 17%;
}

.centre-col {
	width : 66%;
}

.right-col {
	width : 17%;
}

/* ----- Generic styles (not page- or region-specific) ----- */

ul.inline {
	overflow: auto;	/* Enclose floats */
	-moz-padding-start: 0;
}

ul.inline li {
	display:block;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	background: transparent url(images/greyball-10-on-white.gif) no-repeat left top;
	padding-left: 18px;
	margin-left: 8px;
}

ul.inline li.first {
	background-image: none;
	padding-left: 0;
	margin-left: 0;
}


/* ----- Navigation sidebar ----- */

#nav-bar {
	margin: 0px 0px 30px 0px;;
}

#nav-bar a:visited {
	color: #00c;	/* Navigation looks awkwards with 2-color links */
}

#nav-bar p{
	font-family : "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 18px;
	margin : 0 0 0.33em;
	padding-left: 15px;
	line-height: 120%;
	text-align: left;
}

body#bodyIndex #nav-bar .index,
body#bodyContact #nav-bar .contact,
body#bodyEvents #nav-bar .events,
body#bodyClassifieds #nav-bar .classifieds,
body#bodyScores #nav-bar .scores,
body#bodySponsors #nav-bar .sponsors,
body#bodyMedia #nav-bar .media,
body#bodyMachines #nav-bar .machines,
body#bodyMailingList #nav-bar .mailingList,
body#bodyRules #nav-bar .Rules{
	font-weight : bold;
	background: transparent url(http://topl.org/images/greyball-10-on-white.gif) left center no-repeat;
}

#nav-bar .gameroomShow {
	line-height: 100%;
	margin-bottom: .25em;
}

#nav-bar .gameroomShow a {
	color: #d44 !important;
}

#nav-bar .twitter a img {
	display: inline;
	margin-bottom: -0.333em;	/* Baseline-align "twitter" text in image */
}

#countdownarea {
	margin: 20px 15px 20px 5px;
}

#countdownarea a,
#countdownarea object,
#countdownarea img
{
	display: block;
}


/* ----- News sidebar ----- */

.news{
	margin : 5px 15px 5px 5px;
	padding : 10px;
	border : 1px solid #DDDDDD;
}

.right-col .news{
	margin : 0 5px 5px 15px;
}

.news .featured {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #f2f2da;
}

.news .featured>:last-child {
	margin-bottom: 0;
}

.news h1{
	background : #DDDDDD;
	font-size : 14px;
	margin: -10px -10px 5px -10px;
	padding: 1px 10px 2px 10px;
	text-align: left;
}

.news h2{
	font-size : 12px;
	margin: 0px 0px -10px;
	text-align: left;
}

.news p {
	text-align: left;
	font-size: 11px;
	font-family: Verdana, Helvetica, Arial;
	line-height : 130%;
}

.news sup {
	line-height: 1%; /* keep line spacing constant if superscript is present */
}

.news .date {
	color: #aaa;
	margin-bottom: -0.75em;
}

.news .more {
	text-align: right;
}

/* ----- Centre column ----- */

.centre-col h1.first {
	margin-top: 0;
}

/* ----- Footer Navigation ----- */

#footer-nav {
	text-align: center;
	border: 1px Black;
	border-style: solid none none none;
	padding-top: 15px;
	margin-top: 15px;
	min-height: 69px;	/* floated imgs not in layout */
}

#footer-nav a:visited {
	color: #00c;	/* Navigation looks awkwards with 2-color links */
}

#footer-nav p {
	display: inline;
	background: transparent url(images/greyball-10-on-white.gif) no-repeat center left;
	padding-left: 18px;
	padding-right: 5px;
}

#footer-nav p.first {
	background-image: none;
	padding-left: 5px;
}

#footer-nav a{
	font-family : "Trebuchet MS",Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#centeredmenu {
   margin: 0 auto;
   overflow:hidden;
   position:relative;
}

#centeredmenu ul {
   clear:left;
   float:left;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}

#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
	background: transparent url(images/greyball-10-on-white.gif) no-repeat left 0.1em;
	padding-left: 18px;
	margin-left: 8px;
}

#footer-nav li.first {
	background-image: none;
	padding-left: 0;
	margin-left: 0;
}


/* ##### HOME PAGE ##### */

/* ----- Header ----- */

#header {
	margin-bottom: 1em;
}

#header td {
	padding: 0 5px 0 0;
	border: none;
}

#header td.last {
	padding-right: 0;
}

#header td.logo {
	padding-top: 5px;
	padding-right: 0;
}

#header td.logo img {
	float: right;
}

/* ----- varia ----- */

body#bodyIndex .centre-col p.first {
	margin-top: 0;
}


/* ##### RULES ##### */

/* ----- The Basics ----- */

#TheBasics {
	float: right;
	width: 33%;
	background-color : #CCE6FF;
	margin-left: 10px;
	padding : 10px;
}

#TheBasics UL{
	margin-left : 0px;
}

#TheBasics LI{
	list-style-image: url("images/greyball-10-on-blue(darker).gif");
	padding-bottom : 5px;
}

/* ----- Rules Table of Contents ----- */

#RulesToC {
	margin-bottom : 40px;
	padding-left : 12px;
	border : 1px solid Black;
	border-style : none none none solid;
}

#RulesToC p {
	margin : 0px;	/* appear as a list */
}

#RulesToC a:link {
	font-weight : bold;
	text-decoration : none;
}

#RulesToC a:visited {
	font-weight : bold; 
	text-decoration : none; 
} 

#RulesToC a:hover {
	text-decoration : underline; 
} 

#RulesToC a:active {
	text-decoration : underline; 
} 

/* Level-1 links */

#RulesToC p.h-1 {
	padding-top : 5px;
}

#RulesToC p.h-1 a {
	color : Black;
	font-size : 125%;
	font-weight : bold;
}

/* ----- Rules ----- */

#Rules {
	padding : 0 25px 25px;	/* First H1 is meant to have 0 top margin. Adam's code had a hard-coded div instead of that h1, so has a top margin. This zero top-margin counteracts that. */
	margin-top : 0px;
}

#Rules H1 {
	color : Black;
	font-size : 125%;
	font-weight : bold;
}

#Rules H2 {
	color : Black;
	font-size : 115%;
	font-weight : bold;
}

#Rules H3 {
	color : Black;
	font-size : 100%;
	font-weight : bold;
}



/* ##### MACHINES ##### */

/* ----- Timeline ----- */

.long  { /* debugging */
	color : Red;
}

#timeline {
	margin-left: auto;
	margin-right: auto;
}

#timeline td {
	vertical-align : top;
}

#timeline .left-name {
	/* Pad top of cell, not individual paragraphs */
	padding-top : 25px;
	border-top : 1px solid Black;
}

#timeline .left-name-no-photo {
	/* Pad top of cell, not individual paragraphs */
	padding-top : 25px;
}

#timeline .left-name p {
	text-align : right;
	padding-left : 5px;
	padding-right : 15px;
	margin-top : 0px;
	margin-bottom : 0px;
}

#timeline .left-name-no-photo p {
	text-align : right;
	padding-left : 5px;
	padding-right : 15px;
	margin-top : 0px;
	margin-bottom : 0px;
}

#timeline .year-odd {
	color : White;
	background-color : #CCCCCC;
	font-weight : bold;
	font-size : 200%;
	line-height : 200%;
	padding-left : 15px;
	padding-right : 15px;
	text-align : center;
}

#timeline .year-even {
	color : White;
	background-color : #CCCCCC;
	font-weight : bold;
	font-size : 200%;
	line-height : 200%;
	padding-left : 15px;
	padding-right : 15px;
	text-align : center;
}

#timeline .right-name {
	/* Pad top of cell, not individual paragraphs */
	padding-top : 25px;
	border-top : 1px solid Black;
}

#timeline .right-name-no-photo {
	/* Pad top of cell, not individual paragraphs */
	padding-top : 25px;
}

#timeline .right-name p {
	padding-left : 25px;
	padding-right : 5px;
	text-indent : -10px;
	text-align : left;
	margin-top : 0px;
	margin-bottom : 0px;
}

#timeline .right-name-no-photo p {
	padding-left : 25px;
	padding-right : 5px;
	text-indent : -10px;
	text-align : left;
	margin-top : 0px;
	margin-bottom : 0px;
}

/* "-small" = in a long stretch of years where there are no machines, text is smaller */

#timeline .left-name-small {
	text-align : right;
	padding-right : 15px;
}

#timeline .year-small {
	color : White;
	background-color : #CCCCCC;
	font-weight : 900;
	font-size : 100%;
	line-height : 100%;
	padding-left : 10px;
	padding-right : 10px;
	text-align : center;
}

#timeline .right-name-small {
	padding-left : 15px;
	text-align : left;
}



/* ##### EVENTS ##### */

body#bodyEvents li.upcoming a,
body#bodyEvents2009 li.year2009 a,
body#bodyEvents2010 li.year2010 a,
body#bodyEvents2011 li.year2011 a {
	color: black;
	font-weight: normal;
}

body#bodyEvents li.upcoming a:hover,
body#bodyEvents li.upcoming a:focus,
body#bodyEvents2009 li.year2009 a:hover,
body#bodyEvents2009 li.year2009 a:focus,
body#bodyEvents2010 li.year2010 a:hover,
body#bodyEvents2010 li.year2010 a:focus,
body#bodyEvents2011 li.year2011 a:hover,
body#bodyEvents2011 li.year2011 a:focus {
	text-decoration: none;
}

body#bodyEvents li.upcoming li.first
body#bodyEvents2009 li.year2009 li.first
body#bodyEvents2010 li.year2010 li.first
body#bodyEvents2011 li.year2011 li.first {
	background-image: none;
	padding-left: 0;
	margin-left: 0;
}