/*Karen Duban's CSS Template For Current & Older Browsers
This one is to be linked. More modern browser stylesheet to be imported.
This template assumes you're using 3 basic colors, the main color, plus two alternating colors with a white background for text. 
A fourth color would be a background color other than white.
Created 10/20/03. Last updated: 10/20/03.*/

/*
Organization:
  Standard  &text elements
  CSS layout & positioning
  Navigation & buttons
  Decorative/Emphasis
  Tables
  Forms
  Media/Print
*/

/* STANDARD & TEXT ELEMENTS */
/*
Page margins and colors
Note:Margin is set for IE Browser only. Set Margins for NS in the body tag if desired.
Additional Info: Learn more about margins and CSS at http://www.dwfaq.com/tutorials/basics/margins.asp
*/
body {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background-color: #FFFFFF;
}

/*
Default font and text size for listed tags. Line-height goes in the modern.css stylesheet because it can
mess up the tables in Net4. 
Add color if you want something other than black.
*/

body, table, td, th, p, ol, ul, li {
	font: normal 12px Arial, Helvetica, sans-serif;
	color: #000000;
}

/*
H1: Main Heading
*/

h1 {
	margin:0px 0px 15px 0px
	padding: 0px;
	color: #663300;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	line-height:1;
	color:#330000
}

/*
H2: Medium heading in different color
Application:Automatic
*/

h2 {
	margin:0px 0px 15px 0px
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:1;
	color:#663300
}

/*
H3: Medium heading in another alternate color
Application:Automatic
*/

h3 {
	margin: 20px 0px 0px 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height: 16px;
	color:#663300
}

h4 {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height: 16px;
	color:#BA631A
}

/*
Default document link styles. This assumes you don't want the underline. 
Note: a:hover and a:active are not available in NS4x
*/
a:link{
	color:#660000;
	text-decoration:none;
	font-weight: normal;
	
}

a:visited{
	color:#663333;
	text-decoration:none;
	font-weight: normal;

}

a:hover{
	color:#E99D5F;
	text-decoration: underline;
	
}
a:active{
	color:#E99D5F;
	text-decoration: none;
	
}

/*
Purpose:Used for copyright notice and other text needing "fine print"
Application:<table>,<td>,<p>
*/
.smallprint {
font-size: 10px;
line-height:13px
}

/*
For footer information, gray color.
Application:<span>,<table>,<td>,<p>
*/

.footer {
font-size: 11px;
color: #330000;
}

/*
White text against background color of website. Probably most useful in a header file with text inside table cells,
but could be used in different situations, possibly as header for paragraphs.
Application:<span>,<table>,<td>,<p>
*/
.browntextonbg {
font-size: 13px;
font-weight: bold;
color: #330000;
background-color: #BA631A;
}

.browntextonltbg {
font-size: 13px;
font-weight: bold;
color: #330000;
background-color: #E99D5F;
}

/*
Purpose: Text for alerts.
Application:<div>,<span>,<table>,<td>,<p>
*/ 
.txtalert {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663300;
	font-weight: bold;
}

.normal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

/* LAYOUT & POSITIONING ITEMS */

/* CSS layout has improved. Check out these sites for code:
Note: I'll add code to a separate style sheet eventually for the ones that work. Havent' tested yet. 
Word is that they are still inconsistent.
Sites:
http://www.glish.com/css/
http://www.inknoise.com/experimental/layoutomatic.php
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html 
See also sample style sheet for Macromedia simple styling in this folder.*/

/*
The Scoocher. Adds 20 px of left padding. Use for table cells, paragraphs, or images.
*/

.leftpadding20 {
	padding-left: 20px
}

/*
Using a webding to create the illusion of a image on the page
*/

.txtfloatright {
	float: right;
	margin: 2px 2px 2px 2px;
	font-family: webdings, fantasy;
	font-size: 50px;
	color: #663300;
	line-height: 40px;
}


/*
Using a wingding to create the illusion of a image on the page
*/

.txtfloatleft {
	float: left;
	margin: 2px 2px 2px 2px;
	font-family: webdings, fantasy;
	font-size: 50px;
	line-height: 40px;
	color: #663300;
}

/*
This style puts the image floating to the right with a bevel-like border & caption
*/

.floatright
{
float: right;
margin: 0 0 10px 10px;
background-color: #ffffff;
padding: 10px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}

div.floatright img
{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}

.floatleftonly
{
float: left;
}

.floatrightonly
{
float: right;
}
.floatcenteronly
{
float: center;
}
.floatleft
{
float: left;
margin: 0 5px 10px 0;
background-color: #fff;
padding: 10px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}

div.floatleft img
{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}

.bev_img_border_brown
{
	margin: 5px 5px 5px 5px;
	background-color: #BA631A;
	padding: 10px;
	border-top: 1px ridge #996600;
	border-right: 2px ridge #663300;
	border-bottom: 2px ridge #663300;
	border-left: 1px ridge #996600;
	line-height: 13px;
}

div.bev_img_border_brown img
{
border-top: 1px ridge #000;
border-right: 1px ridge #000;
border-bottom: 1px ridge #000;
border-left: 1px ridge #000;
}

/* NAVIGATION & BUTTONS 
One technique is to use css sytles that look and act like rollovers.
Another is to use list objects to create a menu (to be used in the modern.css).
This will work in N4.7:
*/

/* This one may need to be in a table cell with at least 4 px for cellpadding (NOT spacing)
or one of the borders gets cut off. If you apply it to the <a> tag itself, you can have a rollover effect.
If you apply it to a span tag inside the a tag still works but you don't get the rollover effect. You 
can also apply it to the <p> tag surrounding the <a> tag, but you'll have 
to add a height and width property to keep it from shooting across the page. */

.fakebutton {
	background-color: #BA631A;
	border-top: 2px outset #E99D5F;
	border-right: 2px outset #663300;
	border-bottom: 2px outset #663300;
	border-left: 2px outset #E99D5F;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration : none;
	color: #000000;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	text-align: center;
	display: block;
	height: 20px;
	width: 150px;
}

.fakebutton:hover {
	background-color : #663300;
	color : #E99D5F;
	text-decoration : none;
}
.fakebutton:visited {
	background-color : #BA631A;
	color : #330000;
	text-decoration : none;
}
.fakebutton:active {
	background-color : #663300;
	color : #E99D5F;
	text-decoration : none;
}

.fakebutton_small {
	background-color: #BA631A;
	border-top: 1px outset #E99D5F;
	border-right: 1px outset #663300;
	border-bottom: 1px outset #6633001;
	border-left: 1px outset #E99D5F;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration : none;
	color: #000000;
	padding-top: 1px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
	text-align: center;
	display: block;
	height: 10px;
	width: 100px;
}

.fakebutton_small:hover {
	background-color : #E99D5F;
	color : #000000;
}

.fakebutton_large {
	background-color: #BA631A;
	border-top: 1px outset #E99D5F;
	border-right: 1px outset #663300;
	border-bottom: 1px outset #663300;
	border-left: 1px outset #E99D5F;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration : none;
	color: #000000;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: center;
	display: block;
	height: 10px;
	width: 150px;
}

.fakebutton_large:hover {
	background-color : #E99D5F;
	color : #000000;
}

/*controls for nav bars */

.height_width {
	height: 20px;
	width: 100px;
}

.margin_control {
	margin-top: 0px;
	margin-bottom: 0px;
}

.margin_neg {
	margin-top: -8px;
	margin-bottom: -8px;
}

.size_margins {
	height: 20px;
	width: 100px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* This style is designed for a series of text links, each link in its own <p> tag. The style class="menubutton"
is attached to the <p> tag with the <a> tag surrounding the text. It will show up looking like a menu. Adjust
the magin top and bottom to separate the menu boxes. Right now they are ligned up next to each other. The styling is different,
though not awful, in Net4. Real problem is the linking gets lost.*/

.menubutton a {
	background-color : #BA631A;
	border : 1px dotted #66330;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	line-height:11px;
	text-decoration : none;
	color: #000000;
	height: 20px;
	width: 100px;
	padding: 6px;
	text-align: center;
	margin-top: -11px;
	margin-bottom: -10px;
}

.menubutton a:hover {
	background-color : #E99D5F;
	color : #000000;
}


/* DECORATIVE ITEMS */
/*
Quickie dashed border. for dotted tables border.
This site generates quick code for other borders:
http://www.copysense.co.uk/border.htm
Note: this dash border will display as a solid border in Net 4.7.
*/
.dashborder {
	border:2px;
	border-color: #663300;
	border-style: dashed;
}

/* For closing line-height--make it less than what's in the main body tag*/

.lesslinespace {
	line-height: 12px;
}

/* For closing line-height--make it less than what's in the main body tag*/

.morelinespace {
	line-height: 40px;
}

.morelinespace24 {
	line-height: 16px;
}

/* quickie bold */

.bold {
	font-weight: bold;
}

/* quickie bold with a color */

.boldcolor {
	font-weight: bold;
	color: #330000;
}

/* quickie italic */
.italic {
	font-style: italic;
}

.indent {
	text-indent: 15pt;
}

.nospace {
	margin: 0px;
	padding: 0px;
}

/*
Quickie return to body color. Use when you need the same background color as the body.
.bodycolor Application: <table>,<td>,<p>,<span>,<div>
*/
.bodycolor {
background-color:#FFFFFF
}

/*
Site's main colors: easy access to site's main color for text & bgs--rename for easy identification
Application: <table>,<td>,<p>,<span>,<div>
*/

.darkbrown {
color:#663300
}

.medbrown {
color:#996600
}

.ltbrown {
color:#996633
}

.darkerbrown {
color:#330000
}

.accent {
color:#BA631A
}

.ltaccent {
color:#E99D5f
}

.dkred {
color:#660000
}

.bgdkbrown {
background-color:#663300
}

.bgdkred {
background-color:#660000
}

.bgmedbrown {
background-color:#996600
}

.bgltbrown {
background-color:#996633
}

.bgdarkerbrown {
background-color:#330000
}


.bgaccent {
background-color:#BA631A
}

.bgltaccent {
background-color:#E99D5F
}

/*
Alternate row color--for those tables
identify color, probably one of your three colors
Application: <table>,<td>,<p>,<span>,<div>
*/
.rowcolor { 
background-color : #996633
}

/* red arrows to indicate "go" */
.brownarrows {
	font-size: 8pt;
	font-weight: 900;
	color: #BA631A;
	font-style: italic;
}

/* for display of dingbat images */
.wingdingbat {
	font-family: Wingdings, fantasy;
	background-color: White;
	color: 663300;
	font-weight: bolder;
	font-size: 24px;
}

/* for display of dingbat images */
.webdingbat {
	font-family: Webdings, fantasy;
	background-color: White;
	color: 663300;
	font-weight: bolder;
	font-size: 24px;
}

/* for making the first-letter of a paragraph larger */

p.intro:first-letter { 
font-family : Times New Roman, times, serif; 
font-size : 24px; 
font-style: italic; 
color : #663300; 
}


/* TABLES */
/*
Table header style. Specifies color text and background color
*/

th {
	color:#663300;
	background-color:#E99D5F;
	font-size: 13px;
	font-weight: bold;
}

/* FORM */

/*this sets the background for the form and gives it a border */

form.mainform {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
background: #FFFFFF;
padding: 0px;
margin: 0px;
width: 400px;
}


INPUT, TEXTAREA, SELECT, OPTION {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*
Purpose: Set the font to mono-space for NS4x.
This helps to keep form elements a similar size cross-browser.
Application: Applied to the <td> tag only
Note: NS4x only. Other browsers use the textarea, select defined above
Need to test this.
*/ 
.fieldcell{
font-family: Courier New, Courier, mono;
}

.formheader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #663300;
	background-color: #E99D5F;
	text-align: right;
}

input.radio {
	padding: -1px;
	margin: 0px;
}


/*this button is for the submit button in a form*/

input.inputbutton {
	background-color: #BA631A;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration : none;
	color: #330000;
	padding: -1px;
	margin: -1px;
	text-align: center;
	border: 1px outset #330000;
}

/* Media/Print */
.boldred {
	font-weight: bold;
	color: #990033;
}
.redborder {
	border: 2px groove #990033;
}
.redborder2 {
	border: thin groove #990033;
}
.rightpadding20 {
	padding-right: 20px;
}
.boldred_lg {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 12px;
	font-weight: bold;
	color: #990033;
	text-decoration: underline;
}
.blackborder {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 2px;
	border-left-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	padding-right: 20px;
}
.rightmargin20 {
	padding-right: 20px;
}

/*
Dropshadows
example of ways to display prints
*/
.border_dropshadow {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 2 px;
}

.dropshadow { background-color: #ccc; }

.border_dropshadow, .dropshadow {
  position: relative;
  bottom: 4px;
  right: 4px;
}

.border_width140 { width: 140px; }
.border_width110 { width: 110px; }

/*
beveled border with 10 px padding
*/

.bev_img_border
{
	background-color: #ffffff;
	padding: 10px;
	border-top: 1px solid #999;
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	border-left: 1px solid #999;
	margin: 10px;
}

.bev_img_border3
{
	background-color: #ffffff;
	padding: 0px;
	border-top: 1px solid #999;
	border-right: 2px solid #555;
	border-bottom: 2px solid #555;
	border-left: 1px solid #999;
	margin: 10px;
}

.bev_img_border2
{
	background-color: #ffffff;
	padding: 0px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	border-left: 2px solid #000;
	margin: 10px;
}
.bev_brown_border
{
	border-top: 2px solid #996600;
	border-right: 4px solid #663300;
	border-bottom: 4px solid #663300;
	border-left: 2px solid #996600;
}

/*
beveled border for a table
*/
.bev_table_border
{
	border-top: 2px ridge #996600;
	border-right: 4px ridge #663300;
	border-bottom: 4px ridge #663300;
	border-left: 2px ridge #996600;

}

/*
thin black border with 10 px padding
*/
.thinborder {
	padding: 10px;
	background: white;
	display: block;
	height: auto;
	width: auto;
	border: 1px solid #000000;
}



/*
margin of 10 px all around
*/
.margin10 {
	margin: 10px;
}

/*
margin of 10 px on the right
*/
.margin10right {
	margin-right: 10px;
}

.margin20right {
	margin-right: 20px;
}

/*
margin of 10 px on the left
*/
.margin10left {
	margin-left: 10px;
}

.margin20left {
	margin-left: 20px;
}

.margin20top {
	margin-top: 20px;
}
.margin10top {
	margin-top: 10px;
}
.margin10bottom {
	margin-bottom: 10px;
}
.marginless20 {
	margin-bottom: -20px;
}

.webdingbatsm {
	font-family: Webdings;
	font-size: medium;
	color: #CC6600;
}
.wingdingbatsm {
	font-family: Webdings;
	font-size: medium;
	color: #CC6600;
}