/* NOTE:
	I opted to use pixels as the unit of measure rather than ems in order
	to make the design more consistent across various browsers.
	
	In case this is not clear to the new maintainer of this website, the
	use of abbreviations for colors is oftedn used in the following CSS.
	Such abbreviations work as follows: if a color value in hexadecimal
	is a set of three matching duples, then one need only write out the
	set of matching duples using but one of the hex values for each 
	duple.  For example: if the hexadecimal color is #999999 (a gray 
	color) then #999 can be used instead.  Another example: if the
	hexadecimal color is #3399ff, then the shorthand version of #39f can
	instead be used.  There are two main advantages for doing this: 1)
	to save bandwith for users with low bandwidth ISPs (this is 
	increasingly not an issue with the mainstreaming of DSL and other
	high-speed internet connections) and 2) it is easier (read: lazier)
	for the programmer. ;)
	
	By: mpg 12 Dec 07
*/

body {
	background-image:url(images/background.gif);
	background-repeat:repeat;
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
	font-size:14px;
}

html, body {
	margin:0;
}

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

a:link {
	color:#d6423d;
	font-weight:normal;
}

a:visited {
	color:#d6423d;
	font-weight:normal;
}

a:hover {
	color: #0A0;
	font-weight:normal;
}

h1 {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#26463c;
	background-color: #C1e8da;
	margin-top: 0;
	border: 2px solid #26463c;
	text-align:center;
}

h2 {
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#2A383B;
	background-color: #C1e8da;
	margin-top: 0;
	border: 2px solid #26463c;
	text-align:center;
	margin-left:24px;
	margin-right:24px;
}

h3 {
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-style:italic;
	color:#2A383B;
	background-color: #C1e8da;
	margin-top: 0;
	border: 2px solid #26463c;
	text-align:center;
	margin-left:48px;
	margin-right:48px;
}

h4 {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style:italic;
	color:#000;
	background-color: #FDD;
	margin-top: 0;
	padding: 8px;
	border: 2px solid #F00;
	text-align:left;
	margin-left:20px;
	margin-right:20px;
}

/* This is not used, but is available for serifs text. */
h5 {
	font-size: 14px;
	font-family:"Times New Roman", Times, serif;
	text-align:center;
}

/* This is used for error messages */
h6 {
	background-color:#F3F896;
	border:2px #c00 solid;
	font-size:16px;
	color:#c00;
	padding:5px 10px 5px 10px;
	width:90%;
	text-align:left;
}

pre {
	font-family: "Courier New", Courier, mono;
	font-size:16px;
	font-weight: bold;
	padding: 5px;
	background-color:#009;
	color:#ff0;
	margin:15px 15px 15px 15px;
	border:2px #ff0 solid;
}

p {
	margin:0 30px 10px 30px;
}

#content {
	/* NOTE:
		I opted to make this fixed-width instead of variable width
		for the sake of consistency with respects to photographs.
		By: mpg 12 Dec 07 
	*/
	margin-left: 100px;
	width:800px;
	color: #492E20;
	background-color: #FFF;
	border-left: 2px solid #557077;
	border-right: 2px solid #557077;
	border-bottom: 2px solid #557077;
}

div#left a, div#left a:link, div#left a:visited {
	font-weight: bold;
	font-size: 12px;
	display: block;
	background-color: #007e3d;
	color: #fff;
	border: 2px #002F17 solid;
	padding: 4px 0 4px 2px;
	margin-bottom: 4px;
}

div#left a:hover {
	background-color: #ed1c24;
	color: #FFF;
	border-color: #900B10;
}

/* This style is for demarcating the page we are on in the left nav bar,
	all else is inherited from the cascade. */ 
div#left a#DeadLink {
	background-color:#C1e8da;
	border-color: #900B10;
	font-style:italic;
	color:#333;
}

div#main {
	margin-left:40px;
	margin-right:40px;
}

#left {
	position: absolute;
	top: 50px;
	left: 0;
	padding-top: 16px;
	width: 115px;;
}

/* This style defines the copyright text at the bottom of the pages */
div#copyright {
	text-align:center;
	font-size:10px;
	background-color:#F3F3F3;
	margin-left: 100px;
	margin-right: 100px;
	width:800px;
	margin-bottom: 16px;
	color:#AAA;
	border-width: 2px 2px 2px 2px;
	border-style:solid;
	border-color:#000;
	font-variant:small-caps;
}

/* This set of classes define the items on the webmail form */
.mailform_left {
	/* This sets the form left-side text properties plus column width */
	width:40%;
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}

.mailform_right {
	/* This only sets the column width for the right-side, form fields entry 
	  properties are defined elsewhere depending upon field type */
	width:60%;
}

.mailform_text_entry {
	/* This defines the properties of the text form field entry box itself */
	background-color:#C1e8da;
	border: 2px #0c0 solid;
	width:98%;
	color:#c00;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}

.mailform_radio_text {
	/* This sets the radio button text properties and left-most column width */
	width:80%;
	font-style:italic;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}

.mailform_radio_area {
	/* This sets the text-style and column width for text associated with
	  a radio button */
	width:10%;
	font-style:italic;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}

.mailform_textarea_entry {
	/* This defines the properties of the textarea form field element */
	background-color:#C1e8da;
	border: 2px #0c0 solid;
	width:98%;
	height:160px;
	color:#c00;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}

/* NOTE:
	The following CSS definitions for fineprint, fineprint_important,
	and important are (as goes for all CSS) order dependent.  In this
	case the first class descriptors define the font size and color.
	The second class descriptors override the color (in the case of
	.fineprint_important) and inherit all other styles branching from
	the DOM (Document Object Model).
	
	By: mpg 12 Dec 07
*/

.fineprint, .fineprint_important {
	font-size:10px;
	color:#999;
}

.fineprint_important, .important {
	color:#c00;
}

.button, .button:link, .button:visited {
	font-size:16px;
	color:#fff;
	background-color:#007e3d;
	border-top:3px solid #0c0;
	border-right:3px solid #030;
	border-left:3px solid #0c0;
	border-bottom:3px solid #030;
	padding:1px 2px 1px 2px;
	margin:2px 5px 2px 5px;
	font-weight:bold;
}

.button:hover {
	font-size:16px;
	color:#fff;
	background-color:#ed1c24;
	border-top:3px solid #c00;
	border-right:3px solid #300;
	border-left:3px solid #c00;
	border-bottom:3px solid #300;
	padding:1px 2px 1px 2px;
	margin:2px 5px 2px 5px;
	font-weight:bold;
}

.quote {
	background:#ebe6f2;
	width:650px;
	border:2px #7d91d2 solid;
	margin:0 0 20px 0;
}

.quotecolumnleft {
	width:57px;
	vertical-align:top;
}

.quotecolumncenter {
	width:100%;
}

.quotecolumnright {
	width:57px;
	vertical-align:bottom;
}

.quotetext {
	width:536px;
	text-align:left;
	color:c00;
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
}

.quotedperson {
	width:536px;;
	text-align:right;
	color:#999999;
	font-size:10px;
}

.searchform_left {
	/* This sets the form left-side text properties plus column width */
	width:20%;
	font-size:14px;
	font-style:italic;
	font-weight:bold;
	text-align:right;
	padding-right:10px;
}

.searchform_right {
	/* This only sets the column width for the right-side, form fields entry 
	  properties are defined elsewhere depending upon field type */
	width:80%;
}

.searchform_text_entry {
	/* This defines the properties of the text form field entry box itself */
	background-color:#C1e8da;
	border: 2px #0c0 solid;
	width:98%;
	color:#c00;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}

ul.bigtomato li.bigtomato {
	list-style:square;
	list-style-image:url(images/tomatoe_bullet_filled_23x20.gif);
	font-size:24px;
}

ul.bigtomato2 li.bigtomato2 {
	list-style:square;
	list-style-image:url(images/tomatoe_bullet_filled_23x20.gif);
	font-size:24px;
	font-family:"Times New Roman", Times, serif;
}

ul.smalltomato li.smalltomato {
	list-style:square;
	list-style-image:url(images/tomatoe_bullet_filled_17x15.gif);
	font-size:18px;
}

ul.smalltomato2 li.smalltomato2 {
	list-style:square;
	list-style-image:url(images/tomatoe_bullet_filled_17x15.gif);
	font-size:18px;
	font-family:"Times New Roman", Times, serif;
}