﻿/* body applies styles to the body tag */
body
{
	width: 996px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
	background-color: #FFFFFF;
	/*
	background-image: url(../images/page_bg.jpg);
	background-repeat: repeat-y;
	*/
}

/* bodycontainer applies to a div with width of 763px 
        .bodycontainer {
	        width: 763px;
	        text-align:left;
	        margin:  0px;	
	     }
	     */

/* bodycontainer2 is for the homepage, it has the main image as it's background (truck with "Isn't it time...") */
.bodycontainer2
{
	width: 996px;
	height: 250px;
	text-align: left;
	margin: 0px 0px 10px 0px;
	
	background-image: url(../images/main.jpg);
	background-repeat: no-repeat;
}

/* top_area is the area with the logo and menu */
.top_area
{
	width: 996px;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	color: #FFFFFF;
}

/* client_login is the div with the client login tab */
.client_login
{
	width: 993px;
	text-align: right;
	margin-bottom: 10px;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 60%;
	color: #FFFFFF;
}

/* left column is the side link area for all sub pages */
.left_column
{
	float: left;
	width: 200px;
	text-align: left;
}

/* left content are the actual links on the side menu */
.left_content
{
	float: left;
	text-align: left;
	margin: 10px 0px 0px 15px;
	width: 190px;
}

/* right column is the content column area for the right side of sub pages */
.right_column
{
	float: left;
	width: 550px;
	text-align: left;
}

/* right content has the right side content with margins*/
.right_content
{
	float: left;
	text-align: left;
	margin: 0px 20px 20px 20px;
	width: 510px;
}

/* bottom highlight is the container for each of the three areas on the home page bottom*/
.bottom_highlight
{
	float: left;
	text-align: left;
	margin: 5px;
	width: 332px;
	border-right: #000000 1px dotted;
}

/* bottom last is the rightmost area, only change is it has no right hand border*/
.bottom_last
{
	float: left;
	text-align: left;
	margin: 5px;
	width: 244px;
}

/* title text for three bottom areas*/
.bottom_titletext
{
	margin-top: 0px;
	margin-bottom: 5px;
	font-family: Trebuchet MS, MS Sans Serif;
	font-weight: bold;
	font-size: 100%;
	color: #0971b3;
}

/* filler text for three bottom areas*/
.bottom_text
{
	float: left;
	text-align: left;
	padding: 0px 0px 0px 0px;
	margin: 10px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 70%;
	color: #000000;
}

/* setup container that holds the yellow buttons at bottom*/
.bottom_button
{
	float: left;
	text-align: left;
	padding: 0px 0px 0px 0px;
	margin-left: 75px;
	width: 160px;
}
/* Wrapper around three bottom sections */
.bottom_wrapper
{
	width: 996px;
	text-align: left;
	background-color: #FFFFFF;
	margin-bottom: 20px;
}

/* container for the footer copyright info*/
.footer_area
{
	width: 984px;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 10px;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 60%;
	color: #B3AAAA;
}

.footer_area a
{
	color:#808080;
	text-decoration: none;
}

/* logo container*/
.logo
{
	float: left;
	width: 200px;
	text-align: left;
}

/* navigation area for the links*/
.navright
{
	float: left;
	width: 530px;
	text-align: left;
	vertical-align: middle;
}


/* I don't think this is used*/

.maintag
{
	float: left;
	width: 338px;
	text-align: left;
	padding: 0px 0px 0px 410px;
	vertical-align: middle;
	height: 50px;
}

/* the div container for the text under the question in the homepage */
.maintext
{
	margin-left: 425px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 14px;
	line-height: 1.3;
	color: White;
	width: 300px;
	padding-top: 100px;
}


/* text formatting for the top menu links*/
.toplink
{
	font-family: Arial, Helvetica, sans-serif;
	color: #0970b3;
	font-size: 12px;
	font-weight: bold;
	padding-right: 15px;
	padding-left: 15px;
	border-right: #0970b3 1px solid;
	text-decoration: none;
}

/* extra text formatting for the top menu links*/
.toplink A:link
{
	text-decoration: none;
	color: #64a3cc;
}
.toplink A:visited
{
	text-decoration: none;
	color: #64a3cc;
}
.toplink A:active
{
	text-decoration: none;
	color: #64a3cc;
}
.toplink:hover
{
	text-decoration: underline;
	color: #64a3cc;
}

/* text formatting for the last link in top menu has no right hand border*/
.lastlink
{
	font-family: Arial, Helvetica, sans-serif;
	color: #0970b3;
	font-size: 12px;
	font-weight: bold;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
}

/* extra text formatting for the last link in top menu */
.lastlink A:link
{
	text-decoration: none;
	color: #000000;
}
.lastlink A:visited
{
	text-decoration: none;
	color: #000000;
}
.lastlink A:active
{
	text-decoration: none;
}
.lastlink:hover
{
	text-decoration: underline;
	color: #64a3cc;
}

#sidemenu
{
	background-image: url(../images/side_bg.jpg);
}

/* div container for each side menu link, has a dotted border on bottom */
.sidelinkdiv
{
	width: 75%;
	padding-bottom: 5px;
	padding-top: 5px;
	border-bottom: #FFFFFF 1px dotted;
}

/* text formatting for side links */
.sidelink
{
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 80%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	margin-left: 0px;
	margin-bottom: 5px;
	text-decoration: none;
	padding-bottom: 0.1em;
}

/* extra text formatting for side links */
.sidelink A:link
{
	text-decoration: none;
	color: #000000;
}
.sidelink A:visited
{
	text-decoration: none;
	color: #000000;
}
.sidelink A:active
{
	text-decoration: none;
}
.sidelink A:hover
{
	text-decoration: underline;
}


/* for when I was trying to highlight what page you are at, was not able to do it like I hoped but
    may be easier not to use it */

.currentpage
{
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #c40001;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
}

.currentpage A:link
{
	text-decoration: none;
	color: #FFFFFF;
}
.currentpage A:visited
{
	text-decoration: none;
	color: #FFFFFF;
}
.currentpage A:active
{
	text-decoration: none;
}
.currentpage A:hover
{
	text-decoration: underline;
}


/* margin info for all headers and the p tag */
h1, h2, h3, h4, h5, h6 p
{
	margin-top: 0px;
}

/* text formatting for largest header (<h1>) */
h1
{
	margin-top: 0px;
	margin-bottom: 0.5em;
	font-family: Trebuchet MS, MS Sans Serif;
	font-weight: bold;
	font-size: 170%;
	color: #0971b3;
}

/* text formatting for 2nd largest header (<h2>) */
h2
{
	margin-top: 0px;
	margin-bottom: 0.3em;
	font-family: Trebuchet MS, MS Sans Serif;
	font-weight: bold;
	font-size: 110%;
	color: #0971b3;
	text-transform: uppercase;
	border-bottom: #B3AAAA 1px solid;
	padding-bottom: 0.1em;
}

/* text formatting for 3rd largest header (<h3>) */
h3
{
	margin-top: 0px;
	margin-bottom: 0em;
	font-family: Trebuchet MS, Sans-Serif;
	font-weight: bold;
	font-size: 110%;
	color: #B3AAAA;
}

/* text formatting for largest header (<p>)
        EACH PARAGRAPH SHOULD BE WRAPPED IN THE <p> tag */
p
{
	margin-top: 0px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 80%;
}

/* used for screen reader purposes, if we used one, sets a section identifier to not show on the page but 
        be read if someone was using a screen reader (accessibility principal) */

.offleft
{
	position: absolute;
	margin-left: -9000px;
}

