@charset "utf-8";
/* Zegelin.com
	CSS Document for web site

	This code is either common knowledge or has been modified
	from existing common knowledge. There is nothing proprietary here.
	
	Source code - copyright 2011, Chris Zegelin, all rights reserved
	
	The site design:
		The site design is based on a fixed window, 950px wide and 660px deep. This
		size renders on the most common display out there, 1024 by 768px, without
		having to scroll the mouse. This size severely limits the available data
		that can be presented on any individual screen, but simplifies the overall
		design. The result is a very clean look that will render correctly on all
		browsers.
		
		The screen is divided vertically into a 45px header, 40px navigation, 555px
		main body, and then a 20px footer. Horizontally, the site is a 180px wide
		side bar, a 15px gap, the a 755px wide main body. The result is a main body
		area of 755px wide by 555px high. Enough room to do a lot.
*/

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 14pt
	font is very readable. */
body{
	width:950px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	font: 14px/100% arial, sans-serif;
}

/* 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 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: 14px/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;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the standard header for the entire site. */
#header{
	height:45px;
	background-image:url('/graphics/header/top-banner.png'); /* 45px high by 950px wide */
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:top; 
	vertical-align:top;
}

.header_left{
	float:left;
	padding-top:5px;
}

.header_right{
	float:right;
	padding-top:7px;
}

#footer {
	margin-top: 5px;
	padding: 2px 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;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the side bar for the entire site. */
#side_bar {
	width:195px;
	height:595px;
	background-image:url('/graphics/sidebar/side-bar.png');  /* Graphic fills area */
	background-repeat:no-repeat;
	vertical-align:top;
}

hr.side_top{
	margin-top:70px;
	margin-bottom:12px;
	margin-left:20px;
	margin-right:25px;
	color:yellow;
}

#side_bar_table{
	width:170px;
	margin-left:5px;
	margin-top:60px;
}

.nav_bar{
	background-color: #000099;
	color: #929294;
}

.nav_bar_c{
	color: #929294;
}

.margin10{
	margin-top:10px;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* These are used for the tabs above the main block
	and below the header. */
#page_tabs {
	height:40px;
	vertical-align:bottom;
}

.tab{
	vertical-align:bottom;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* This is the main information block for the entire site. */
#main_block {
	height:555px;
	background-image:url('/graphics/main-content.png');
	background-repeat:no-repeat;
	background-position:top center;
	vertical-align:top;
}

#content {
	margin:12px 30px 10px 60px;
}

#content_wide {
	margin:12px 30px 10px 30px;
}

.content_2col1{
	width:330px;
	float:left;
}

.content_2col2{
	width:330px;
	float:right;
}

/* Typical page heading style. */
.head{
	margin-top:4px;
	margin-bottom:6px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
}

.head_error{
	margin-bottom:6px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	color:#ff0000;
}

hr.small_space{
	margin-bottom:12px;
	color:#ffff00;
	size:2px;
}

hr.medium_space{
	margin-bottom:28px;
	color:#ffff00;
	size:2px;
}

hr.big_space{
	margin-bottom:48px;
	color:#ffff00;
	size:2px;
}

/* Typical page sub-headings */
p.sub_head{
	margin-top:8px;
	height: 20px;
	margin-bottom:8px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
}

p.sub_head_error{
	margin-top:8px;
	height: 20px;
	margin-bottom:8px;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
}

p.sub_head_indent{
	margin-top:8px;
	height: 20px;
	margin-bottom:8px;
	text-align:left;
	text-indent:40px;
	font-size:16px;
	font-weight:bold;
}

/* Typical page text options */
p.text_normal{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	text-align:left;
	text-indent:10px;
}

p.text_bold{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:10px;
}

p.text_error{
	margin-top:8px;
	margin-bottom:8px;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-indent:10px;
	color:#ff0000;
}

p.text_small{
	margin-top:8px;
	margin-bottom:8px;
	font-size:10px;
	text-align:left;
	text-indent:10px;
}

p.list{
	font-size:14px;
	text-align:left;
	text-indent:70px;
}

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

.box{
	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-size:10px;
	color:#929294;
}

.error{
	color:#ff0000;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* Basic table styles */
td.item{
	text-align:right;
	font-size:14px;
	font-weight:normal;
	color:#585858;
}

td.item_err{
	text-align:right;
	font-size:14px;
	font-weight:normal;
	color:#FF0000;
}

td.note{
	text-align:left;
	font-size:10px;
	font-weight:normal;
	color:green;
}

td.ibox{
	text-align:left;
}

td.item_data{
	text-align:left;
	font-size:14px;
	font-weight:normal;
}

td.pic{
	text-align:center;
	font-size:16px;
	font-weight:normal;
}

.inbox{
	font-size:14px;
	font-weight:normal;
	color:#585858;
	border-width:3px 1px 1px 3px;
	border-style:solid;
	border-color:#c0c0c0;
}

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

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

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