/* local.css - TCMBC local styles */

/*
* Syntax: If the name has a period it is a 'class' used in tags by the class=xx
*         If it starts with a #, it is an 'id' used in tags with id=xx
*         If it has both a # and period such as #yw-forecast.night{...} then I
*         think that either both the id=yw-forecast and class=night must be set
*         or, a surrounding tag has the id and a child tag has the class.
*/

/* define global style for all tags that include class="local" */
.local
{
	font-family: arial;
	font-size: medium;
	color: black;
	background-color: #CCFFFF;
}

a:link { color: #0000FF; }  	/* blue */
a:visited { color: #000099; }  	/* lighter blue */
a:hover { color: #0000FF; }  	/* blue */
/* active will highlight the last link taken,
 * that link will revert to 'visited' when a 
 * different link is taken. */
a:active { color: #FF5533; }  	/* mostly red */

.admin_links {
	font-size: x-small;
	color: black;
	margin-left: 70%;
	margin-right: auto;
}

.banner_links {
	font-size: small;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

table.edit {
	font-size: smaller;
	color: black;
	
}
table.login {
	font-family: arial;
	font-size: medium;
	color: black;
	background-color: #FFFF00;
	margin-left: auto;
	margin-right: auto;	
}

table.admin_list {
    border-collapse: collapse;
    border-spacing: 5px;
}

div.admin_header {
	background-image: url('../images/Water73a.jpg');  /*big_water_background3.jpg')*/
	background-repeat: repeat-x;
}

div.dynamic_info {
	font-size: medium;
	font-style: italic;
	/*background-color: yellow;*/
	color: red;
	margin-left: 10%;
	margin-right: 40%;
	/*outline-style: solid;*/
}
/* Very interesting - the order of these defininitions matters.
 And a border IS inherited - but shouldn't be.  And grouping does not
 work.  For example, a page with two tables, first one is wrapped in
 a div of class user-list, the second table is below the div.
 I want the first table to have bottom borders on all the cells (Well
 nearly all, I make an exception for empty spacer header cells.)
 So, with my understanding of a 'contextual' definition such as 
 .user-list th,td {border styles...} means that both TH and TD elements
 WITHIN a user-list element, would get the style.  And that all seemed
 to work fine - till I noticed that ALL TH and TD elements (notablly those
 in the second table outside the .user-list class), also got the bottom border
 values.  One - border should not be inherited.  Two - A contextual definition
 should apply only with in context (ie only within the .user-list div!
 So, I figured I needed to set a 'default' style for the TH, TD outside of the div
 so I used grouping such as th,td {border style = none} and placed that above all the
 .user-list definitions.  But that turned off the style for ALL TD elements, but
 look fine for TH elements (ie the TH had the bottom border I wanted).
 And using some web developer tools inside the Firefox browser, you can click
 on an element and see the style behind it - The order you see the styles was changing
 when I clicked on a TH or TD element.  So I moved my turn off of styles below the 
 user-list class definitions and I don't remember the details, except not right.
 Found that my last problem was grouping - when I try to set both th and td to one style,
 as in 'tr,td' {style...}, it did not work and had to be replaced by two separate lines.
 */

.user-list {
	font-size: 80%;
	background-color: #7FFFD4
	/*
	background-image: url('../images/Water73a.jpg');
	background-repeat: repeat;
	*/
}
.user-list table.user {border-collapse:separate; border-spacing:.5px;}
.user-list tr.group-color-1 {background-color:#7FFFD4;}
.user-list tr.group-color-2 {background-color:#7FDDD4;}
.user-list th {border-bottom-style:solid; border-bottom-width:thin; border-bottom-color:black;}
.user-list td {border-bottom-style:solid; border-bottom-width:thin; border-bottom-color:black;}
.user-list td.left-border {border-left-style:solid; border-left-width:thin; border-left-color:black;}
.user-list th.no-border {border-bottom-style:none;border-right-style:none;}
/* IE does not do min-width, and worst, treats width as min-width. */
.user-list th.race-date { width:70px;}
.user-list td.race-date { width:70px;} /*font-family: 'Lucida Console', Courier;font-size: 90%;}*/
.user-list th.race-class { width:100px;}
.user-list td.race-class { width:90px;}
/* And IE also does not like the child selectot '>', but Firefox does
and will undo the nonsense we had to set for IE. */
html>body .user-list th.race-date,td.race-date { width: auto; min-width:70px;}
html>body .user-list th.race-class,td.race-class { width: auto; min-width:90px;}
/* Misc nonsense - IE did not like that I tried to resolve the grouping issue
by haveing separate lines for each - And Firefox didn't seem to care.
/*html>body .user-list td.race-date { width: auto; min-width:70px;}*/

.user-list th.wide { min-width:40%;}
.user-list td.smaller { font-size: 90%}
th { border-bottom-style:none; border-left-style:none;}
td { border-bottom-style:none; border-left-style:none;}
th.edit {
	text-align: right;
}
td.readonly {
	color: gray;
}

.admin_header {
	font-size: large;
	font-style: normal;
	color: black;
}	
.info {
	font-size: small;
	font-style: italic;
	color: blue;
}
.info2 {
	font-size: small;
	font-style: normal;
	color: #DD1122;
}

.hints {
	font-size: medium;
	font-style: italic;
	color: red;
}
.hi-light {
	background-color: yellow;
	font-size: medium;
	font-style: italic;
	color: black;
}
.bold {
	font-weight: bold;
}
.underlined {
	text-decoration: underline;
}
.weather {
	/* 666633 is Goose Poo Brown - same color as the bottom of you shoes after a day at the pond.*/
	background-color: #666633; /*#33FFCC;*/ /*#C8C8C8;*/
	color: white;
}

.fixed-width-font {
	font-family: 'Lucida Console', Courier;
	font-size: 80%;
}
/* MZ Added April 5, 2009 for classSummary */
table.class-summary td {font-size:100%;border-bottom-style:none;}

.center {
	text-align: center;
}
.right {
	text-align: right;
}
div.login-info {
	font-size: small;
	font-style: normal;
	color: black;
	background-color: #99FF99; /* #666633; #CC9900; */
	margin-left: 20%;
	margin-right: 20%;
	outline-style: solid;
	padding: 3px;
}

.large_red {
	font-size: large;
	font-weight: bold;
	color: red;
}
.normal {
	font-size: normal;
	font-style: normal;
	color: black;
	background-color: white;
}
table.pictures {
	font-family: arial;
	font-size: medium;
	color: black;
	background-color: white;
	margin-left: auto;
	margin-right: auto;	
	border-colapse: colapse;
}

table.pictures td { width: 130px; height: 130px; }


div.copyright {
	font-family: arial;
	font-size: x-small;
	font-style: normal;
	color: black;
}