@charset "utf-8";
	/*	South Bay Striders
		CSS Document
		Chris Zegelin, started April 2009

		Source code - copyright 2009, 2010, 2011, 2012, 2014, Chris Zegelin, all rights reserved

		This code is licenced to the South Bay Striders, a non-profit organization,
		under the following terms: This code may not be sold, given away, or otherwise
		passed to a third party without the express written permission of the copyright
		holder. The code may be modified or updated as required, by any party, but doing
		so does not remove any distribution restrictions or rights of the copyright owner.
		Finally, this header or text block may not be removed or modified by anyone other
		than the copyright owner. It must also remain as the first text block in this file.
	*/

	/* This script:
		Contains all of the CSS required for the basic site.
	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, code, del, dfn, em,
img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0 none;
}

/* Spans a reasonable page width, but centers it on a given
	window. The background color is white. A 12pt
	font is very readable. */
body {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-family: Arial;
	font-size: 14px;
	background-color: white;
}

/* Removes decoration around links because it doesn't look
	good on this site. */
a {
	text-decoration: none;
}

/* Basic alignment for all images */
img {
	vertical-align: middle;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the basic layout for the entire site. */

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the basic layout for the entire site. */

#header_end {
	clear:both;
}

#footer {
	clear:both;
	margin-top:10px;
	padding:3px 0;
	border:2px solid #e0e0e0;
	border-width:2px 0 0 0;
	text-align:left;
	font-family:arial;
	font-size:10px;
	color:#929294;
}

/* Links in the footer will be displayed the same as regular text */
#footer a:link, #footer a:visited, #footer a:active, #footer a:hover {
	color:#929294;
	text-decoration:none;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* LEFT SIDE NAVIGATION - It all fits in 200px width.*/

#left_side{
	float:left;
	width:220px;
	height:595px;
	margin:0 0 0 0;
}

#left_side_long{
	float:left;
	width:220px;
	height:700px;
	margin:0 0 0 0;
}

.ls_title_first{
	margin-top:10px;
	margin-left:10px;
	text-align:left;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#55D400;
	list-style:none;
}

.ls_title{
	margin-left:10px;
	text-align:left;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#55D400;
	list-style:none;
}

.d_line{
	margin:10px 0 10px 12px;
	height:3px;
	width:180px;
}

.ls_nav{
	margin-right:30px;
	text-align:right;
	font-family:Arial;
	font-size:14px;
	font-weight:normal;
	color:#0000ff;
	list-style:none;
}

.ls_nav a:hover {
	color:#44a34f;
}

#ls_news{
	height:220px;
}

.ls_news_txt{
	margin-left:20px;
	margin-right:15px;
	text-align:left;
	font-family:Arial;
	font-size:14px;
	font-weight:normal;
}

.ls_login{
	text-align:right;
	font-family:Arial;
	font-size:11px;
	font-weight:normal;
	color:#585858;
}

.ls_login_err{
	text-align:right;
	font-family:Arial;
	font-size:11px;
	font-weight:normal;
	color:#FF0000;
}

.ls_login_box{
	font-family:Arial;
	font-size:11px;
	font-weight:normal;
	color:#585858;
	border-width:3px 1px 1px 3px;
	border-style:solid;
	border-color:#c0c0c0;
}

.ls_forgot{
	text-align:right;
	font-family:Arial;
	font-size:11px;
	font-weight:normal;
	color:#0000ff;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* LEFT SIDE HELP - It all fits in 200px width.*/

#help_off{
	margin-top:10px;
	margin-left:10px;
	text-align:left;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	color:#0000ff;
	list-style:none;
}

#help_list{
	margin-top:10px;
	margin-left:28px;
	margin-right:5px;
	text-align:left;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	color:#0000ff;
}

.help_item{
	margin-left:8px;
	text-align:left;
	font-family:Arial;
	font-size:10px;
	font-weight:normal;
	color:#0000ff;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the main information block for the entire site. */
#main_info{
	float:left;
	width:680px;
	text-align:left;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the main information block for the index page. This puts the
	text around the photos. */

#index_col_1{
	float:left;
	margin:20px 20px 20px 20px;
	width:260px;
	text-align:right;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

#index_col_2{
	float:left;
	margin:20px 0px 20px 0px;
	width:260px;
	text-align:left;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the main information block for a typical page. */

/* The main page headings. */
#heading-help{
	margin-top:15px;
	margin-bottom:10px;
	text-align:left;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
}

/* Most content in main block use these to position
	itself better in the block. */
.margin_left{
	margin-left:60px;
}

.margin_comment{
	margin-left:20px;
	margin-top:20px;
}

/* Used to place an address on a page */
.indent100{
	margin-bottom:10px;
	margin-left:120px;
	font-family:Arial;
	font-weight:bold;
	text-align:left;
}

/* The main page headings. */
.heading{
	margin-top:5px;
	margin-bottom:4px;
	text-align:center;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
}

div.heading_left{
	float:left;
	margin-top:5px;
	margin-bottom:4px;
	margin-left:40px;
	text-align:left;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
}

div.heading_right{
	float:right;
	margin-top:5px;
	margin-bottom:4px;
	text-align:right;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
}

img.heading_rule{
	margin-bottom:10px;
	height:5px;
	width:100%;
}

p.page_message{
	margin-top:5px;
	margin-left:20px;
	margin-bottom:10px;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#009933;
}

p.page_message_err{
	margin-top:5px;
	margin-left:20px;
	margin-bottom:10px;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#ff0000;
}

p.message{
	margin-top:30px;
	margin-left:20px;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

p.message_error{
	margin-top:30px;
	margin-left:20px;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.space_above{
	margin-top:30px;
}

p.space_below{
	margin-bottom:110px;
}

.error{
	color:#ff0000;
}

p.head_no_space{
	margin-top:15px;
	margin-bottom:10px;
	text-align:left;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

p.head_error{
	margin-top:15px;
	margin-bottom:10px;
	text-align:left;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.head_done{
	margin-top:15px;
	margin-bottom:10px;
	text-align:left;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	color:#0000ff;
}

p.head_next{
	margin-top:-25px;
	margin-bottom:10px;
	text-align:left;
	text-indent:30px;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

p.sub_head{
	margin-top:10px;
	margin-bottom:10px;
	text-align:left;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

p.sub_head_indent{
	margin-top:10px;
	margin-bottom:10px;
	text-align:left;
	text-indent:40px;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
}

td.table_list{
	font-family:Arial;
	font-size:14px;
	text-align:left;
}

p.normal{
	margin-bottom:10px;
	margin-right:20px;
	font-family:Arial;
	text-align:left;
}

p.bold{
	margin-bottom:10px;
	margin-right:20px;
	font-family:Arial;
	text-align:left;
	font-weight:bold;
}

p.indent{
	margin-left:30px;
}

p.text_small{
	margin-top:10px;
	margin-bottom:10px;
	margin-left:60px;
	margin-right:60px;
	font-family:Arial;
	font-size:10px;
	text-align:left;
	text-indent:10px;
}

p.center{
	margin-top:10px;
	margin-bottom:10px;
	font-family:Arial;
	font-size:14px;
	text-align:center;
}

.text_big{
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
}

ul.text_small{
	margin-top:10px;
	margin-bottom:10px;
	margin-left:100px;
	margin-right:60px;
	font-family:Arial;
	font-size:10px;
	text-align:left;
	text-indent:10px;
}

.box{
	font-family:Arial;
	font-size:14px;
	text-align:left;
	color:#585858;
	border:1px solid #ccc;
}

.view_top{
	height:30px;
	text-align:center;
	margin-left:5%;
}

.view_title{
	height:45px;
	text-align:center;
	margin-left:10%;
}

.view_foot{
	height:15px;
	font-family:arial;
	font-size:10px;
	color:#929294;
}

.honor{
	font-family:arial;
	font-size:15px;
	color:#008000;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Basic table styles */
table.basic {
	border-style: none;
	border-collapse: collapse;
	border-spacing: 0px;
}
			
table.full {
	width: 100%;
	border-style: none;
	border-collapse: separate;
	border-spacing: 5px;
}
			
td.item{
	width: 33%;
	padding-top: 8px;
	padding-right: 6px;
	padding-bottom: 8px;
	vertical-align: middle;
	text-align: right;
	font-size: 14px;
	font-weight: normal;
	color: #585858;
}

td.item_req{
	width: 33%;
	padding-top:8px;
	padding-right:6px;
	padding-bottom:8px;
	vertical-align: middle;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	color: #585858;
}

td.item_err{
	width: 33%;
	padding-top:8px;
	padding-right:6px;
	padding-bottom:8px;
	vertical-align: middle;
	text-align: right;
	font-size: 14px;
	font-weight: bold;
	color: #FF0000;
}

td.data{
	padding-left:7px;
	vertical-align: middle;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

td.txt{
	padding-top:8px;
	padding-left:12px;
	padding-bottom:8px;
	vertical-align: middle;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	color: black;
}

td.ibox{
	width: 33%;
	padding-left:7px;
	vertical-align: middle;
	text-align: left;
}

td.ibox_t{
	width: 33%;
	padding-top:12px;
	padding-left:7px;
	padding-bottom:12px;
	vertical-align: middle;
	text-align: left;
}

td.note{
	width: 33%;
	padding-top:8px;
	padding-left:7px;
	padding-bottom:8px;
	vertical-align: middle;
	text-align: left;
	font-size: 11px;
	font-weight: normal;
	color: green;
}

td.pic{
	padding-top:8px;
	padding-left:7px;
	padding-bottom:8px;
	text-align:center;
}

td.date{
	text-align:right;
	font-size:15px;
	font-weight:bold;
}

td.activity{
	text-align:left;
	font-size:100%;
	font-weight:normal;
}

td.list0 {
	width: 33%;
	padding: 4px;
	text-align: left;
}
td.list1 {
	width: 33%;
	padding: 4px;
	border-width: 2px;
	border-left-style: solid;
	border-color: green;
	text-align: left;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* The simplest of popup's. This produces a text box
	when you mouse over the item. */
#popup a span {
	display:none;
}

#popup a:hover p:hover{
	background-color:#e9e9e2;
	color:#ff0000;
	text-indent:0; /* required by IE */
}

#popup a:hover p:hover span{
	display:block;
	position:absolute;
	width:200px;
	margin:0px;
	padding:10px;
	color:#44af34;
	font-weight:normal;
	background:#e5e5e5;
	text-align:left;
	white-space:normal;
	border:1px solid #666;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Showing a group of thumbnail pictures */

.thumbnail{
	width: 200px;
	border: 1px #949c4f none;
	margin: 0 15px 15px 0;
	padding: 5px;
	background-color: #ffffff;
}

.thumbnail img {
	border: 1px none;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* The calendar formatting */

.date{
	width:120px;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	text-align:left;
}

.date_grey{
	width:120px;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	color:#929294;
	text-align:left;
}

.activity{
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	text-align:left;
}

.activity_grey{
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	color:#929294;
	text-align:left;
}

.clearboth { clear: both; }

.preview_line{
	width: 100%;
	border-top-style:solid;
	border-width:5px;
	border-color:#98bf21;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Formatting for an input box */

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the set of nice looking SUBMIT BUTTONS */

input.submit{
	display: inline-block;
	outline: none;
	cursor:pointer;
	overflow:visible; /* ie6/7 width fix */
	width:auto; /* ie6/7 width fix */
	padding: .1em .6em .1em;
	color:#000000;
	background: #70F0FF;
	border:1px solid #aaa;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	font-weight: bold;
	font:18px/100% arial, sans-serif;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
input.submit:hover {
	text-decoration: none;
}
input.submit:active {
	position: relative;
	top: 1px;
}

input.submitS{
	display: inline-block;
	outline: none;
	cursor:pointer;
	overflow:visible; /* ie6/7 width fix */
	width:auto; /* ie6/7 width fix */
	padding: .1em .6em .1em;
	color:#000000;
	background: #70F0FF;
	border:1px solid #aaa;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	font-weight: bold;
	font:11px/100% arial, sans-serif;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
input.submitS:hover {
	text-decoration: none;
}
input.submitS:active {
	position: relative;
	top: 1px;
}

input.nice_box{
	font-family:Arial;
	font-size:14px;
	font-weight:normal;
	color:#585858;
	background: #D0F8FF;
	border-width:3px 1px 1px 3px;
	border-style:solid;
	border-color:#c0c0c0;
}

.nice_box_text{
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
}

.nice_box_text_err{
	font-family:Arial;
	font-size:12px;
	font-weight:bold;
	color:#FF0000;
}

.nice_box_note{
	color:#009933;
	font-size:8pt
}