/*-----------------------------------------------
Soper-Wheeler Company Web Site Styles
-------------------------------------------------

Author:		Matson & Isom Technology Consulting
            www.mitcs.com
Version:	2006.09.20.1536
Title:      Soper-Wheeler Base Stylesheet

----------------------------------------------- */

/*-----------------------------------------------
    Base Styles 
----------------------------------------------- */

*
{
	margin: 0;
	padding: 0;
}

body
{
	background: #0C4920;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
	text-align: center;
	font-size: x-small; /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small; /* for compliant browsers */
}

h1,h2,h3,h4,h5
{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
}

h1 a
{
    display: block;
	float: left;
	background: url(/images/logo_small.png) no-repeat;
	text-indent: -9999px;
	width: 200px;
	height: 95px;
}

h2
{
	clear: both;
    font-size: 180%;
    color: #006635;
    padding-bottom: 6px;
    margin: 5px 0 18px 0;
    border-bottom: 1px solid #CCC;
    
}

h3
{
	clear: both;
    font-size: 130%;
    letter-spacing: -1px;
    color: #000;
    margin-top: 15px;
}

h4
{
    font-size: 115%;
	margin: 10px 0 5px 0;
}

h4 a
{
    font-size: 115%;
	margin: 10px 0 5px 0;
	text-decoration: none;
}

ul, li
{
	list-style-type: circle;
}

li
{
	line-height: 160%;
}

a
{
	text-decoration: underline;
	font-weight: bold;
}

a:link 
{
	color: #006635;
}

a:visited 
{
	color: #006635;
}

a:hover
{
    color: #0c4920; 
}

a img
{
	border: none;
}

p 
{
    padding: 5px 0 10px 0;
    line-height: 160%;
}

/*-----------------------------------------------
-- Specific Styles Throughout Site
----------------------------------------------- */

#container
{
	background-color: #FFF;
	width: 800px;
	text-align: left;
	margin: 0 auto;
}

#home #headerWrapper
{
	background: #FFF url(/_images/header_bottom_line.gif) repeat-x bottom;
}

#headerWrapper
{
	float: left;
	width: 100%;
	text-align: center;
	background: #FAFAFA url(/_images/header_background.jpg) repeat-x bottom left;
}

#header
{
	text-align: left;
    width: 800px;
	margin: 0 auto;
}

/*-----------------------------------------------
-- Navigation Styles
----------------------------------------------- */

#navigation
{
    float: left;
    width: 100%;
	margin: 15px 0 0 0;
}

#navigation li
{
    float: left;
    list-style: none;
    margin: 0 5px;
}

#navigation li a
{
    display: block;
    color: #000;
    text-align: center;
    padding: 7px 10px;
    text-decoration: none;
}

#navigation li a:hover
{
	border-bottom: 2px solid #0C4920;
	text-decoration: none;
    padding: 7px 10px 4px 10px;
}
	
/*-----------------------------------------------
-- Selected Navigation Styles
----------------------------------------------- */

#home #navigation #l-home,
#about #navigation #l-about,
#news #navigation #l-news,
#contact #navigation #l-contact,
#employment #navigation #l-employment,
#events #navigation #l-events,
#sales #navigation #l-sales,
#support #navigation #l-support,
#timeline #navigation #l-timeline,
#tours #navigation #l-tours,
#fire #navigation #l-fire 
{
    background: url(/_images/nav_selected_right.png) no-repeat right top;
    margin: 0;
    list-style: none;
}

#home #navigation #l-home a,
#about #navigation #l-about a,
#news #navigation #l-news a,
#contact #navigation #l-contact a,
#employment #navigation #l-employment a,
#events #navigation #l-events a,
#sales #navigation #l-sales a,
#support #navigation #l-support a,
#timeline #navigation #l-timeline a,
#tours #navigation #l-tours a,
#fire #navigation #l-fire a
{
    background:  url(/_images/nav_selected_left.png) no-repeat left top;
   	font-weight: bold;
	color: #0C4920;
    text-align: center;
    display: block;
}

#home #navigation #l-home a:hover,
#about #navigation #l-about a:hover,
#news #navigation #l-news a:hover,
#contact #navigation #l-contact a:hover,
#employment #navigation #l-employment a:hover,
#events #navigation #l-events a:hover,
#sales #navigation #l-sales a:hover,
#support #navigation #l-support a:hover,
#timeline #navigation #l-timeline a:hover,
#tours #navigation #l-tours a:hover,
#fire #navigation #l-fire a:hover
{
  text-decoration: none;
  border-bottom: none;
  padding: 7px 10px;
}

/*-----------------------------------------------
-- Content Styles
----------------------------------------------- */

#contentWrapper
{
	float: left;
	background-color: #FFF;
	width: 100%;
}

#content
{
	background-color: #FFF;
    float: left;
	width: 760px;
	margin: 0 auto;
    padding: 20px 0 15px 0;
}

#mainContent
{
	float: left;
    line-height: 1.5em;
    width: 430px;
}

p.intro
{
	float: left;
	font-size: 120%;
	letter-spacing: -1px;
	line-height: 175%;
	color: #444;
	margin: 0 0 10px 0;
}

/*-----------------------------------------------
-- Specific Styles for Main Page
----------------------------------------------- */

#extras
{
	width: 290px;
	margin-left: 445px;
}

#extras a img
{
	border: none;
}

#extras ul
{
    padding-bottom: 25px;
}

#extras ul li
{
   background: url(/_images/double_arrow.gif) no-repeat left;
   line-height: 160%;
   padding-bottom: 3px;
   list-style: none;
}

#extras ul li a
{
	font-weight: normal;
    padding-left: 15px;
}

#extras a img
{
	color: #FFF;
	float: left;
}

#accidentFree 
{
    float: left;
    padding: 5px;
    margin-left: 15px;
    background: #e3eae3;
    border: 1px solid #ccc;
}

#accidentFree h4
{
	font-size: 120%;
}

#quotes 
{
    float: right;
    width: 400px;
    padding: 5px 0 10px 0;
}

#quotes h1
{
    float: right;
    font-size: 110%;
    color: #FFF;
}

#quotes h1 strong
{
    font-size: 110%;
}

#quotes h1 span
{
    float: right;
    margin-right: 50px;
}
/*-----------------------------------------------
-- Features Styles for Main Page
----------------------------------------------- */

#features
{
	clear: both;
    float: left; 
}

.featuresProjects
{
    float: left;
	width: 185px;
    padding: 0 0 20px 0;
}

.featuresProjects h4 a
{
    color: #858584;
    font-size: 100%;
    font-weight: normal;
}

.featuresProjects h4
{
    color: #858584;
}

#features .featuresProjects img
{
    float: left;
	margin: 0;
	padding: 2px;
	border: #CCCCCC 1px solid;
	width: 150px;
}

#features a:visited 
{
	color: #858584;
}

#features a:hover
{
    color: #000000; 
}


/*-----------------------------------------------
-- Sub Page Styles
----------------------------------------------- */

#content img
{
    float: right;
    padding: 2px;
    margin: 10px;
    border: 1px solid #ccc;
}

.portrait
{
	width: 180px;
    float: right;
    text-align: center;
    padding: 3px;
}

.portrait img
{
    padding: 2px;
    margin: 5px;
}

.portrait p
{
	clear: both;
}

.supportList 
{
	list-style-type: circle;
}

#supportDiv ul
{
	float: left;
	padding: 25px;
}

/*-----------------------------------------------
-- Timeline Styles
----------------------------------------------- */

#timelineJump
{
    margin-top: 5px;
}

#timelineJump ul 
{
    float: left;
    background: #e5ebe1;
    display: block; 
    padding: 5px;
    border: 1px dashed #d6ded1;
}

#timelineJump ul li
{
	display: inline;
}

#timelineJump ul li a
{
   background: #fff;
   float: left;
   padding: 5px 15px 5px 5px;
   text-decoration: underline;
}

.timelineimage
{
	margin: auto 0;
	padding: 10px;
	text-align: center;
}

#timelinecontainer
{
    margin: 0 95px 25px 0;
}

#timelinecontainer h2
{
	font-size: 140%;
	color: #006635;
	margin-left: 8px;
	padding-top: 20px;		
	clear: both;
}

#timelinecontainer h3
{	
	font-size: 130%;
	font-weight: bold;
	color: #000000;	
}

#timelinecontainer h4
{
    font-size: 160%;
}

#timelinecontainer p
{
	padding: 2px 3px 2px 5px;
}

#timelinecontainer .timelineelement
{
    background: #fff url(/_images/arrow.gif)  left top no-repeat;
	margin-left: 30px;
	clear: both;
}

#timelinecontainer .timelinecontent
{
    background: #e5ebe1;
	margin: 15px 0 0 20px;
    padding: 10px 10px 20px 10px;
    border: 1px solid #CCC;  
}

#timelinecontainer .timelineimage
{
   	margin-left: 50px;
}

#timelinecontainer .timelineimage img
{
	float: none;
    padding: 2px;
	border: 1px solid #ccc;
	text-align: center;
}

.top
{
    float: right;
    font-size: 80%;    
}

.indent
{
    font-weight: bold;
    text-align: center;
    margin: 0 100px;
}

/*-----------------------------------------------
-- Sub Page Centennial Event / Fuels Project Styles
----------------------------------------------- */
.subContainer	

{
	margin: 0 0 25px 0;
}

.subContainer h3
{
	font-size: 130%;
    letter-spacing: -1px;
    color: #000;
}

.subContainer h2
{
	font-size: 110%;
    color: #000;
}

.subContent

{
   background: #e5ebe1;
   padding: 5px 10px 20px 10px;
   border: 1px solid #CCC;  
}

.subContent img

{
	text-align: center;
	padding: 15px 0 0 10px;
}

#content .subContent img

{
    float: left;
	margin: 0;
    padding: 2px;
	border: 1px solid #CCC;
}

.subContent .eventcontent

{
	float: right;
	width: 250px;
	margin-right: 100px;
}

.subContent .eventcontent p, 
.subContent li

{
	font-size: 90%;

}
.subContent .eventcontent ul

{
	padding-left: 15px;
}

div.clear

{
	clear: both;
}

.events
{
    padding: 5px;
}

#highlights li
{
    list-style: circle;
    padding: 2px;
}

/*-----------------------------------------------
-- Contact Page Styles
----------------------------------------------- */

#contact dl
{
	float: left;
	margin-bottom: 20px;
}

#contact dl dt
{
	clear: left;
	float: left;
	width: 100px;
	font-weight: bold;
}

#contact dd
{
	padding: 2px;
}

#contact dl dd
{
	float: left;	
	width: 400px;
	padding-bottom: 5px;
}

/*-----------------------------------------------
-- Footer Styles
----------------------------------------------- */

#footerContainer
{
	clear: both;
    width: 100%;
	background: #0c4920 url(/_images/footer_gradient.jpg) repeat-x top;
    line-height: normal;
    color: #DDD;
    text-align: left;
	padding: 15px 0;
}

#footerInfo
{
	width: 210px;
	background: #0f5827 url(/_images/logo_tree.gif) no-repeat 4% 50%;
	border: 1px solid #888;
    font-size: 85%;
	margin: 0 auto;
	padding: 5px 5px 5px 112px;
}

.name
{
	font-size: 120%;
	color: #FFF;
	font-weight: bold;
	margin-bottom: -15px;
}

#footerInfo a
{
	color: #FFF;
	font-weight: normal;
}