* { margin: 0; padding: 0; }

body { 
	color: #000;
	font: normal 12px/1.6em Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}


/*
	= general
*/

address { font-style: normal; }

hr { 
	clear: both;
	height: 1px;
	visibility: hidden;
	width: 0px;
	margin-bottom: -1px;
}

img { border: 0; }


/* 
	= Links
*/

a { 
	color: #80caef;
	text-decoration: none;
}


a:visited {
	color: #80caef;
}

a:hover {
	color: #80ca3f;
	text-decoration: underline;
}


body.tier a { color: #39c; }
body.tier a:visited { color: #39c; }
body.tier a:hover { color: #39c; }


/*
	= structure
*/


#wrapper {
	margin: 0 auto 0 auto;
	text-align: left;
	width: 770px;
}

#header, #content, #footer { 
	clear: both;
	float: none;
	width: 100%;
}

#header {
	margin-top: 10px;
	position: relative;
}

#content {
	background: transparent url(../skins/bg-content-columns.gif) 0 0 repeat-y;
	/* use this background to make the column structure */
	margin: 0;
	padding-left: 173px; /* for the sidebar */
	position: relative;
}

/* need to make the column light gray for the tiers */
body.tier #content {
	background: transparent url(../skins/bg-content-columns-tier.gif) 0 0 repeat-y;
}

#content .column {
	float: left;
	position: relative;
}

#content #main {
	background: transparent url(../skins/bg-texture-red.jpg) 100% 0 no-repeat;
	border-top: 10px solid #bbb;
	color: #fff;
	width: 597px;
}

body.tier #content #main {
	border-top: 0;
	padding-top: 10px;
}

body.tier #content #main {
	background: #e0e0d8 url(../skins/bg-texture-light.jpg) 100% 0 no-repeat;
	color: #000;
	padding: 10px 0 2em 0;
}

#content #main .inner {
	padding: 50px 90px 30px 50px;
}

#main img { float: right; margin: 0 0 1em 2em; }

/* change the .inner def for body.tier */
body.tier #content #main .inner {
	padding: 20px 90px 30px 50px;
}

#content #sidebar { 
	float: left;
	width: 162px;
	margin-left: -100%;
}

#content p.intro { display: inline; }

#footer {
	background: transparent url(../skins/bg-footer-home.gif) 0 0 no-repeat;
	color: #9c9c94;
	font-size: .9em;
	height: 80px;
	padding: 65px 0 0 225px;
	width: 545px; 
}

/* what should the footer look like for tier pages? */

body.tier #footer {
	background: transparent url(../skins/bg-footer-tier.gif) 0 0 no-repeat;
	color: #9c9c94;
	font-size: .9em;
	height: 80px;
	padding: 95px 0 0 225px;
	width: 545px;
}

/*
	= header
*/

#header img { 
	float: left; 
	margin-bottom: 15px;
	margin-left: 20px; 
}

#nav {
	float: left;
	font-size: 1.2em;
	line-height: 1em;
	margin-left: 40px;
	margin-top: 17px;
	text-align: left;
	width: 590px;
}

#nav ul {
	background: #ccc url(../skins/nav-normal.gif) 100% 100% repeat;
	height: 2em;
	list-style-type: none;
	margin-top: 15px;
}

#nav li {
	display: inline;
	float: left;
	height: 1em;
	margin: 0;
}

#nav a { 
	color: #9c0000;
	line-height: 2em;
	padding: .5em; 
}

#nav a:hover { 
	background: transparent url(../skins/nav-hover.gif) 100% 100% repeat;
	color: #000; 
	text-decoration: none;
}

/* need to define the current page styling */
/* this is the styling need to change the HTML of the pages */

body.homepg #nav #homelnk a,
body.svcpg #nav #svclnk a,
body.safety #nav #safetylnk a,
body.contact #nav #contactlnk a,
body.aboutpg #nav #aboutlnk a { 
	background: transparent url(../skins/nav-current.gif) 100% 100% repeat;
	color: #000;
	cursor: text;
	font-weight: bold;
}


/*
	= getting started tag
*/

.getstarted {
	background: transparent url(../skins/bg-diagnal-gray.gif) 100% 100% no-repeat;
	/* put the background to the right and bottom */
	float: right; /* to put in right corner */
	font-family: Arial, Sans-Serif;
	font-size: 18px; /* fix it in pixels so it doesn't grow shrink with browser settings */
	margin: 0; /* no need for margin on a tag like this */
	/*padding: 1px 9px 4px 20px;*/
	padding-bottom: 5px;
	padding-right: 10px;
	text-align: right; /* again, just easier */
	width: 160px;
}

.getstarted em {
	color: #9c9c94;
	font-family: Georgia, Serif;
	font-size: 12px; /* shrink it back down */
	line-height: 25px;
}


/* 
	= footer
*/

/* 
	These colors might need to change on a tier page
*/

#footer p { margin-top: 0; }

#footer a { color: inherit; }


/* 
	= Headings
*/

h1, h2, h3, h4, h5, h6 {
	margin: .8em 0 1em 0;
	line-height: 1.2em;
}


h1 {
	background: #9c0000 url(../skins/bg-texture-red.jpg) 0 -10px no-repeat;
	color: #8adbff;
	font-family: Georiga, Serif;
	font-size: 2.3em; 
	font-weight: normal;
	line-height: 1.1em;
	margin: 0 0 0 0;
	padding: 25px 0 20px 50px;
}

/* change the settings for the H1 just for the home page */

body.homepg h1 {						/* page headline */
	background: transparent url(../skins/bg-pointer.gif) 0 0 no-repeat;
	color: #fff;
	display: inline; 		/* put this inline with the surrounding content */
	font-size: 1.7em;
	margin: 0 .3em 0 0;
	padding: 20px 0 0 0;	/* space above the text for the arrow */
}



/* This should be used for styling the headlines on pages */

h2 {
	color: #960001; 					/* page headline */
	font-family: Georgia, Serif;
	font-size: 2em; 
	line-height: 1em; 
	font-weight: normal;
}

h3 {									/* feature headlines */
	color: #960001;
	font-family: Georgia, Serif;
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 1em 0 .5em 0;
	padding: 0; 
}


h4 {									/* sidebar headlines */
	color: #9c0000;
	font-family: Georgia, Serif;
	font-size: 1em; 
	font-weight: normal;
	letter-spacing: .2em;
	text-transform: uppercase;
}

h5 { font-size: 1.2em; }
h6 { font-size: 1.2em; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
	font-weight: normal;
	color: #666
}

/*
	= Paragraphs
*/

p {
	margin: 1.3em 0 0 0; /* added the margin to the top because of other styling */
}

/*
	= sidebar
*/

#sidebar img.border {
	border-bottom: 10px solid #fff; /* to get the space between image and content */;
}

#sidebar .imgs {
	border-bottom: 10px solid #fff;
	margin: 1em 0;
	padding: 0 5px 10px 10px;
}

#sidebar .imgs p { 
	font-size: .8em;
	line-height: 1.3em;
	margin: 0 0 0 0;
}

#sidebar .inner {
	padding: 0 5px 10px 10px;
}

#sidebar ul {
	list-style-type: none;
	margin: 1em 0 2.5em 0;
	padding: 0;
}

#sidebar li {
	line-height: 1.3em;
	margin: 0 0 .6em 0;
}

/*
	= feature (under content)
*/

/* this background positioning is much less than ideal, but 
for the time it is much easier than using a .png file for transparancy */

.feature { 
	background-image: url(../skins/bg-texture-black.jpg);
	background-position: 0 -389px;
	background-repeat: no-repeat;
	border-top: 1px solid #fff;
	margin-top: 100px;
	padding: 30px 40px 30px 50px;
}

.feature h3 { 
	color: #fff;
}

.col-container {
       float: none;
       clear: both;
}


.col {
   float: left;
   margin: 1em 0em 0 0;
   width: 17em;
}

.c-right {
	padding-left: 2em;
}

.col ul {
	list-style-type: none;
}

.col li {
	line-height: 1.4em; 
	margin: 0 0 .6em 0;
}

.lbl {
	display: block;
	float: left;
	width: 5em;
	width: 5em;
}

table {
	clear: left;
	float: none;
	margin: 3em 0 2em 0;
	width: 100%;
}

table h3 { margin: 0; padding: 0; }

td, th { padding: .2em .5em; }

tbody td { background-color: #fff; }
thead th { background-color: #d9d8d0; }
thead th.trans { background-color: transparent; }

td, th { border-bottom: 5px solid #e0e0d8; /* container background */ }