/* 

COMMON CSS TEMPLATE FOR FOCAL POINT TEMPLATE SITES 12-2007 
This file is a blank version of the common.css file to be used in Focal Point 
websites, and is compatible with the XSL CMS version 1. A site design may require
more or different styles than those here; they are just a start. Any site will also have
a page_type.css file that will complete an possibly override the styles in common.css.

CONTENT CLASS STYLES
While this file does create some content class styles, page_type.css may override these styles
in order to accomodate size needs, etc.

CONTENT AREAS
Since the layout and formatting of content areas is determined by page type, they are not specified here. 

FUNCTIONS
This file also includes styles for the standard functions developed as part of v1 of the CMS. Functions can also add their own CSS files. */


/* IE PNG Fix */
* { behavior: url(/templates/Handy_Andy/css/iepngfix.htc) }

/* @group Global Text Styles */

/* @group H styles */

/* @end */

/* @group Link styles */

a {
	text-decoration:none;
	color: #3da061;
}

a img {
	border: none;
}

a:link, a:visited {
	text-decoration: none;
	}

a:hover {
	text-decoration: underline;
}

/* @end */


/* @end */

/* @group Layout Styles */
/* These layout styles are likely to be common to all page types. They could still be overridden by the page_type.css, but are specified here to avoid redundancy among the page_type.css files. */

/* @group body */

body{
	background: #f5f4c1 url(../images/body_bg.gif) repeat-x 0 top;
	_text-align: center; 
}

/* centers the content wrapper div */
#content {
	margin:  auto;
	width: 752px;
	_text-align:left;
}


/* @end */

/* @group Top */

/*#top is the upper horizontal component of the layout, usually with the banner, 
and possibly navigation, library items, and functions like rotating images*/

/*depending on the template, banner may hold an img or a background style to display the banner image */
#banner{float:left; background: url(../images/banner.jpg); width: 750px; height: 145px; border-top: 3px solid white;border-bottom: 3px solid white; 
/*_overflow: hidden;*/}
#top {
	float:left; 
	width: 750px;
	border-top:1px solid black; 
	border-left:1px solid black;  border-right:1px solid black;
	background: #adc687 url(../images/nav1_bg.jpg) repeat-x 0 top;
}

/* @end */


/* @group Middle */
/* #Middle is the main layout section, and will probably have child layout elements to create columns etc.*/
 
#middle {float: left; 
width: 750px; 
min-height: 475px;
_height: 475px;
background: #f5f4c1; padding-bottom: 20px; border-left:1px solid black; border-right:1px solid black; }
/* @end */

/* @group Bottom */
/*#bottom is the lowest horizontal layout area, usually containing the footer. If the 
page design has a content area in this orientation (hor. along the bottom of the page) it may need to act as the 'bottom' of the page itself if the footer is designed to hang over the background rather than within the content box.
*/
#bottom {border-top: 1px solid black;
	float: left; width:752px; padding-top:  6px;
	}

/* The footer will usually hold a library item, or hard-coded text. Technically speaking it is a content area, just like ca1, etc. But it is styled globally here since it is persistent throughout the site template. */
#footer{
	float: left;
	margin-top: 5px;
	width:100%;
}

#footer img{
	float: left;
}

/* @end */



/* @end */

/* @group Content Class Styles */
/*General definitions of content classes regardless of context content_area */
img{float:left;}

/* .article is for a text content item with h, p, a, and img tags (i.e. most content items)*/
.article1 {}

/* .breakout is for a text box with different background than the page*/
.breakout1 {}

/* lead-in is a blurb that points to another page */
.lead-in{}
/* @group table1 */

.table1 {
	float: left;
	background:#adc687 url(../images/t_list1_tr.gif) no-repeat top right;
margin-bottom: 20px;
}

.table1 h2 {
	color: #124e36;
	font-family:  Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
	background: url(../images/t_list1_tl.gif) no-repeat top left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 7px;
	padding-bottom: 3px;
	padding-left: 20px;
	font-size: 16px;
	border-bottom: 1px solid white ;
	
}

.table1 dl {
	margin:  0px;
	width: 680px;
	float: left;
	background: white url(../images/t_list1_bl.gif) no-repeat bottom left;
	border: 1px solid #666;
}

.table1 dl dt {
	border-bottom: 1px solid #a6a6a6;
	padding-bottom: 10px;
	width: 300px;
	float: left;
	padding-top: 10px;
	text-align: center;
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	color: white;
	font-size: 13px;
	background-color: white;
	height:  100px;
}
	
	.table1 dl dt.last {
	background-image: bottom left;
}

.table1 dl dd {
	padding-bottom: 10px;
	border-bottom: 1px solid #a6a6a6;
	width: 350px;
	margin-left: 0px;
	float: left;
	vertical-align: middle;
	height:  80px;
	padding-top: 30px;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 11px;
	color: #276d31}

.table1 dl dd a:link, .table1 dl dd a:visited {
	color: #124e36;
	font-size: 16px;
	font-family: Arial,  "Lucida Grande", Lucida, Verdana, sans-serif;
}	

.table1 dl dd p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	color: black;
}

.table1 dl dt img {
	vertical-align: middle;
	float: none;
	border: none;
}	
	.table1 dl dd.last, .table1 dl dt.last{
	
	border: none;
}

.table1 .right_column {
	float:right;
	width: 190px;
	background-color:#fcefbb;
	border: 1px #663300 double;
	margin: 10px;

}

.table1 .right_column h2 {
	margin-top: 5px;
	font-size: 15px;
	font-family:Arial, Helvetica, sans-serif;
	color:#996633;
	text-align:center;}

.table1 .right_column p, .table1 .right_column a{
	font-size:13px;
}



/* @end */

/* @group Content Area 1 Specific */
#ca1 img{}
#ca1 .article1 {
	padding-top: 20px;}
#ca1 .article1 h1 {
	color: #adc687;
	font-size: 24px;
	font-family: Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
	display :inline;
	margin-bottom: 10px;
	padding-bottom: 4px;
	padding-right:  25px;
	border-bottom: 2px solid #adc687;
	border-right: 2px solid #adc687;
}

#ca1 .article1 h2 {
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 20px;
	
	color: #235937;
	
}

#ca1 .article1 h3 {
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 18px;
	
	color: #235937;
	
}

#ca1 .article1 p {
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 14px;
	line-height: 24px;
}

#ca1 .article1 ul {
	list-style: none;
	list-style-image: url(../images/bullet.gif);
}
#ca1 .article1 ul li {
	/*background: url(../images/bullet.png) no-repeat left;
	padding-left: 16px;*/
	width: 325px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 22px;
	color: black;
	font-family: Arial, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#ca1 .article1 ul.italic li {
font-style: italic;
}

#ca1 .breakout1 {}
#ca1 .lead-in{}


#ca1 .form1 form fieldset {
margin-top:15px;
}
#ca1 .form1 form legend {
color:#CAAB6A;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
}
#ca1 .form1 form p {
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
#ca1 .form1 form ul {
	list-style: none;
}
#ca1 .form1 form li {
	margin-top: 8px;
text-align: right;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
}
#ca1 .form1 form input {
margin-bottom:5px;
}

#ca1 .list_row {
width: 90%;
display: block;
float: left;
}

#ca1 .list_row img {
	display: block;
}


#ca1 #flashcontent {
	float: left;
	/*width: 100%;*/
	width: 690px;
}

#ca1 .table1 dl dt img {
	border: none;
}


/* @end */

/* @group Content Area 2 Specific */

#ca2 img{}
#ca2 .article1 {}
#ca2 .breakout1 {}
#ca2 .lead-in{}
/* @end */

/* @group Content Area 3 Specific */
#ca3 {/*border-top: 3px solid white;*/}
#ca3 img{}
#ca3 .article1 {}
#ca3 .breakout1 {}
#ca3 .lead-in{}

/* @end */


/* @end */

/* @group Navigation */
/* 
Level Navs are functions that display the child pages of a section in the pageview heirarchy. 
While these styles will usually be used globally throughout the site, if a pagetype has an alternative nav style, it's page_type.css will have to override the styles written here. While multipe options could be written into the CSS for nav rendering (e.g. writing both #top #nav1 and #middle #nav1) This should be done at the pagetype.css level, since that is where layout elements are finalized. 


/* ids should be applied to ul */

#breadcrumb {
	list-style: none;
	padding-left: 0px;
	margin-top: 5px;
	margin-left: 0px;
	margin-bottom: 0px;
	width: 90%;
}

#breadcrumb li {
	padding-left: 5px;
	float: left;
	font-size: 12px;
	color: black;
	font-family: Arial, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#breadcrumb li a{
	color: #235937;
}


/* @group Nav1 */

#nav1 {
	background-image: url(../images/nav1_bg.jpg);
	list-style: none;
	display: table;
	/*_display: inline-block;
	_display: inline;*/
	padding-left: 0px;
	padding-right:  0px;
	margin-left: auto;
	margin-right: auto;
    white-space: nowrap; 
	margin-top: 0px;
	margin-bottom: 0px;
	height:30px;
	margin-left: 65px;
} 
#nav1 li{
	display: table-cell;
	float: left;
	margin-top: 0px;
	padding-top: 0px;
	padding-bottom: 0px;

	/*height: 30px;*/
	/*IE hack for max-width*/
	/*_width:80px;*/
	/*max-width: 95px;*/
	text-align: center;
	border-left: 1px solid white;
	font-family:  Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	font-size: 11px;
	/*text-transform: uppercase;*/
	vertical-align: middle;	
	font-weight: bold;
	 
}

#nav1 li.active, #nav1 li.active_parent {
	background-image: url(../images/nav1_active_bg.jpg);
	/*background: #235937;*/
	white-space:normal;
}
#nav1 li.last { border-right:1px solid white; }

#nav1 li a{
	white-space:nowrap;
	display:block;
	line-height: 30px;
	color: #235937;
	padding-left: 9px;
	padding-right: 9px;
	background-image: url(../images/nav1_bg.jpg);
}

 #nav1 li .active, #nav1 li a.active_parent {
	background-image: url(../images/nav1_active_bg.jpg);
	color: white;
	display: block;
	line-height: 30px;
	padding-left: 9px;
	padding-right: 9px;
}
#nav1 li a:link, #nav1 li a:visited{ 
/*font-size: 11px;*/
line-height: 30px;
display: block;
}
#nav1 li a:hover{
	display: block;
	background-image: url(../images/nav1_hover_bg.jpg);
	text-decoration: none;
	color: #235937;
} 

/* @end */

/* @group Nav2 */

#nav2 {
	float: left;
	list-style: none;
	width: 730px;
	/*_width:700px;*/
	border-top: 3px solid white;
	padding-left: 10px;
	/*padding-top: 5px;*/
	/*padding-bottom: 5px;*/
	padding-right: 10px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-image: url(../images/nav2h_bg.jpg);
	background-color: #f7d191;
} 
#nav2 li{
	height:27px;
	float: left;
	text-align: center;
	border-left: 1px solid #95753f;
	font-family: Arial, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 13px;
	/*text-transform: uppercase;*/
	vertical-align: center;
}

#nav2 li.last { border-right: 1px solid #95753f; }

#nav2 li a{
	line-height: 15px;
	display:block;
	color: #235937;
	padding-top: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	/*background-image: url(../images/nav2h_hover_bg.gif);*/
	background-image: url(../images/nav2h_bg.gif);
}
#nav2 li a:link, #nav2 li a:link{ 

font-size: 11px;
display: block;
 }
#nav2 li a:hover{
	display: block;
	text-decoration: none;
	background-image: url(../images/nav2h_hover_bg.gif);
		/*background-image: url(../images/nav2h_bg.gif);*/
} 
#nav2 li.parent  a:link, #nav2 li a:link{ font-size: 11px; color: black;}
#nav2 li.parent {
	border-right: 1px dotted #235937;
}

#nav2 li .active {
	line-height: 15px;
	display:block;
	background-image: url(../images/nav1_active_bg.jpg);
	padding-top: 8px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8px;
	color: white;
}

/* @end */

/* @group Nav3 */

#nav3 {
	
} 
#nav3 li{
	
}
#nav3 li a:link, #nav3 li a:link{
	
}
#nav3 li a:hover{
	
} 

/* @end */



/* @end */

/* @group Library Items */
/*Thes styles are special content classes. Library Items output a pre-defined snippet of html where-ever they are called in the page template. In this way they are synonymous to the Dreamweaver library item. They differ from other functions in that their output is rote rather than page-view context-dependent. */
#lib_banner_link { 
float: left;
position: relative; 
top: 15px;
height:110px; 
width: 270px; 
overflow:hidden;

}

#lib_banner_link a{
display:block;
height: 0pt;
padding-top:110px;
line-height:110px;
overflow:hidden;
}

#lib_estimate_request {height:28px; float: right; margin-right: 27px; _margin-right:15px;
		padding-left:5px;
		background: url(../images/lib_request_estimate_drop.png) no-repeat left bottom;

}

#lib_estimate_request a {
	background: url(../images/lib_request_estimate_bg.gif) repeat-x;
	line-height: 28px;
	float: left;
	padding-top: 0px;
	color: white;
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 13px;
	padding-left: 10px;
	padding-right:10px;
	
}


#lib_hot_topics {height:28px; float: right; margin-right: 0px; 
		padding-left:5px;
		background: url(../images/lib_request_estimate_drop.png) no-repeat left bottom;

}

#lib_hot_topics a:link, #lib_hot_topics a:visited {
	background: url(../images/lib_request_estimate_bg.gif) repeat-x;
	line-height: 28px;
	float: left;
	padding-top: 0px;
	color: white;
	font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 13px;
	padding-left: 10px;
	padding-right:10px;
	
}

#lib_hot_topics a:hover {
background: url(../images/lib_hot_topics_bg.gif) repeat-x;	
}

#lib_footer {
padding-left: 0px;
padding-top: 10px;
width:700px;
display: table;
	_display: inline-block;
	_display: inline;
list-style: none;
font-family: Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: .8em;
color: #235937;
margin: 0px auto;
}

#lib_footer li {
	float: left;
	padding-left: 6px;
	padding-right: 6px;
	border-right: 1px solid #235937;
	
}

#lib_footer li.last {
	border-right: none;
	float: left;
	
} 

/* @end */

/* @group Other Functions */
/*Functions include anything that calls an XSL template. Content areas, Level Navs, and Library Items are common functions, but there can be others, such as the Banner images. These are different than library items, since they output content specific to the page_view/ */

.banner_images {
	width: 450px;
	_width: 430px;
	float: left;
	position: relative;
	top: 85px;
	_top: 70px;
	/*_right: 30px;*/
	height:  100px;
	margin-left: 27px;
	_margin-left: 10px;
	overflow: visible;
	
}

.banner_images .drop{
	width: 125px;
	height: 105px;
	float: left;
	margin-right: 20px;
	_margin-right: 10px;
	background: url('../images/banner_imagedrop.png') no-repeat left top;
	overflow: visible;
		
}

.banner_images .drop img{
	width: 119px;
	height: 87px;
	position:relative;
	bottom:10px;
	right: 10px;
border: 3px solid white;
	overflow: visible;
}

/* @end */