/* CSS Document */
<!--

/*
	Position Elements
	
	Basically the page is wired fairly simply.  There is a constant background image
	that establishes the drop shadow.  Then we use a header and a footer element to 
	write over the drop shadow at the correct junctures.   A tent pole element is
	introduced to keep a short page from showing it's slip at the bottom of the page.
*/

#header {
	/*
		Establishes a 990px by 40px buffer at the top center of the page.  Base
		positioning area.
	*/
	text-transform: capitalize;
	text-align: right;
	font-size: 8pt;
	font-weight: bold;
	width: 990px;
	height:40px;}
#contentsheet {
	/*
		Eastablishes the content area.  This area is delibrately 20px shorter than
		the header and footer element.  This is to allow the drop shadow on the background
		image to come through on the left and right of this container element.
	*/
	width:970px;
	position: relative;}
#dropshadow_bottom {
	/*
		Establishes a 990px buffer at the bottom of the page.  I'd like to see this 
		be 100px tall instead of 10px and I've requested the images to make that happen.
	*/
	height: 100px;
	width: 990px;
	padding: 0px;
	margin: 0px;
	
	}
#header_fill {
	/*
		Although the header is 990px wide to cover up the drop shadows, we actually want a 
		970px area for the text to fill in here.  I'm wondering if this shouldn't actually
		be 990px with a 20px right padding to keep the global menu items in line.
	*/
	width: 970px;
	height: 30px;
	float: left;	}
#brandingbar {
	/*
		This is the bar at the top of the page with the logo placement.  Depending on the
		brand, either the left or the left and the right will be utlizied.  Controlled 
		content through the pageitems object in the authoring tool for the actual content.
	*/
	width:970px;
	height:80px;
	float: left;}
#brandingbar_brand {
	/*
		This element controls the left side of the branding bar.  Where the primary
		logo is placed.  When crafting the image for this area, center it vertically on 
		a white field at 90px.  Then shave off the top 10px when you post up the image.  The
		header will give you the top 10px you need for this element.
	*/
	width: 405px;
	height: 80px;
	float: left;}
#brandingbar_sector {
	/*
		This element controls the right side of the branding bar.  Where the primary
		logo is placed.  When crafting the image for this area, center it vertically on 
		a white field at 90px.  Then shave off the top 10px when you post up the image.  The
		header will give you the top 10px you need for this element.
	*/
	width: 405px;
	height: 80px;	
	float: right;}
#herospotband {
	/*
		The herospot can be an image or flash element cut to any of the ways shown in the 
		webstandards.	
	*/
	width: 970px;
	height: 300px;
	float: left;}
#keybrands {
	/*
		This area is only applicable to the main corporate site. No other site uses this element.
		It is on the page to server as a storage area for the strategic brands of Ingersoll Rand.
	*/
	width: 970px;
	height: 78px;
	float: left;}
#contentalley {
	/*
		Container for content below the herospot and navbar/keybrands area.
	*/
	width: 970px;
	float: left;	}
#contentalley_content {
	/*
		contentalley contains some additional vertical buffer areas.  This element serves to store
		actual content in the content alley section.
	*/
	width: 970px;
	float: left;	}
#contentalley_navcolumn{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 250px;
	float: left;}
#contentalley_threecolumns{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 300px;
	float: left; }
#contentalley_splitcolumns{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 440px;
	float: left;}
#contentalley_largecolumn{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 630px;
	float: left;}
#contentalley_singlecolumn{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 400px;
	float: left;}
#contentalley_narrow{
	/*
		A possible breakdown of the contentalley with this element.
	*/
	width: 200px;
	float: left;}
#footer {		
	/*
		Area for the copyright information to be.
	*/
	padding-left:30px;
	height: 90px;
	float:left;}
#gutternarrow_line_white{
	/*
		a white line.  (I know, shocker.)
	*/
	width: 970px;
	height: 1px;
	float: left;}
#gutternarrow_line{
	/*
		Same thing, just not labeled white.
	*/
	width: 970px;
	height: 1px;
	float: left;}
#nav_bar{
	/*
		Navbar element appears either above or below the hero spot on most home pages.
		also present on the secondary pages.  Contains the root site navigation in 
		an imagemap.
	*/
	width: 970px;
	height: 30px;
	float: left;
	font-size: 14pt;
	font-weight: bolder; 
}
.nav_barsub {
	width: 200px;
	color: #333333;
	margin-left: 5px;
	padding-left: 5px;
	font-size: 10pt;}
	
.lang_barsub{
	width: 120px;
	margin-left: 5px;
	padding-left: 5px;
	font-size: 10pt;}
	
	}
#gutterstandard_full{
	/*
		Vertical gutter of 30px to seperate content in the content alley.
	*/
	width: 970px;
	height: 30px;
	float: left;}
#gutterstandard_full_2{
	/*
		Vertical gutter of 30px to seperate content in the content alley.
	*/
	width: 970px;
	height: 30px;
	float: left;}
#gutterstandard_half{
	/*
		Vertical gutter of 10px to seperate content in the content alley.  
		(why half?  should be third.)
	*/
	width: 970px;
	height: 10px;
	float: left;}
#gutter_content {
	/*
		30px gutter block to serve a wedge where needed.
	*/
	width: 30px;
	height: 30px;
	float: left;}
#gutter_content_interior {
	/*
		Interior gutters are 25px, not 30px.  Use this then.
	*/
	width: 25px;
	height: 60px;
	float: left;}
#categorypage_image {
	/*
		This is the optional image area on the secondary page template.
	*/
	width: 665px;	
	padding:0px;
	margin:0px;
	text-align:right;	}
#categorypage_image img{
	/*
		More attempts to keep the picture right aligned.  
	*/
	text-align:right;}
#content_horizontalspace {
	/*
		Needed for internal buffers.
	*/
	width: 100%;
	height: 30px;	}
#contentalley_categorypage{
	/*
		Early attempt at a right aligned picture for the template.
	*/
	width: 665px;
	float: right;	}
#gutter_content_right {
	/*
		An attempt to get the right gutter correct.  I think it can float a little however.
		this may be unnecessary.
	*/
	padding-right:30px;	}
#news_area {
	/*
		Robert must have added this.  Not sure where it's used.
	*/
	height:80px;}
#news_area_tn {
	/*
		Robert must have added this.  Not sure where it's used.
	*/
 	width:90px;
	float:left;	
	height:70px;}
#news_area_text {	
	/*
		Robert must have added this.  Not sure where it's used.
	*/
	height:70px;}
#tent_pole{	
	/*
		Key positioning element.  One of the weaknesses of the design is that a 
		"short" page will show the page background below the footer showing an 
		out of place drop shadow element.  To help make the page "stretch" to the bottom
		of a screen we added a 600px transparent image that props up the page and keeps the 
		footer at the bottom of the page.
	*/	
	padding:0px;
	width:30px;
	float:left;}

/*
	Text Elements.
	
	No color here.  This is just the actual element font size, line spacing, font-family, 
	and weight.

*/

* {
	/*
		Going for the universal with IE.
	*/
	/*
	padding: 0px;
	margin: 0px;
	*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;}
body {
	/*
		And here is the attempt for Firefox.
	*/
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	}

a {
	/*
		No decoration on any link.  This has wavered a bit from on to off.  Here 
		is where we change that.
	*/
	text-decoration: none;	}    
hr{
	/*
		Universal Horzontal Rule height set.
	*/
	height:2px;}
/*
	Sub Anchor text styles.
*/

/*
	Global nav is the top right items.
*/
a.global_nav:link{ 
	font-size: 11px; 
	font-weight:bold;	
	text-decoration:none; }
a.global_nav:visited{ 
	font-size: 11px; 
	font-weight:bold;	
	text-decoration:none;}

/*
	ir_nav_category is the left navigation element.  Text decoration is manually set to be none, 
	effectively overriding any other global setting for it.
*/
.ir_nav_category{ 
	padding-bottom:15px;	
	width:250px;}  
a.ir_nav_category:link{ 
	font-size: 16px; 
	line-height: 24px; 
	font-weight:bold;	
	text-decoration:none; }
a.ir_nav_category:visited{ 
	font-size: 16px; 
	line-height: 24px; 
	font-weight:bold;	
	text-decoration:none;}
.ir_nav_category2_area{ 
	padding-top:6px;
	padding-bottom:6px;}     
a.ir_nav_category2:link{ 
	font-size: 13px; 
	line-height: 14px; 
	text-decoration: none;		 }
a.ir_nav_category2:visited{ 
	font-size: 13px; 
	line-height: 14px; 
	text-decoration: none;}
a.ir_nav_category2_on:link{ 
	font-size: 13px; 
	line-height: 14px; 
	text-decoration: none;		}
a.ir_nav_category2_on:visited{ 
	font-size: 13px; 
	line-height: 14px; 
	text-decoration: none;	}
.ir_nav_category3_area{ 
   padding-left:8px;
   padding-bottom:4px;}    
a.ir_nav_category3:link{ 
	font-size: 11px; 
	line-height: 14px; 
	text-decoration: none;  }
a.ir_nav_category3:visited{ 
	font-size: 11px; 
	line-height: 14px; 
	text-decoration: none; 				}
a.ir_nav_category3_on:link{ 
	font-size: 11px; 
	line-height: 14px; 
	text-decoration: none;  }
a.ir_nav_category3_on:visited{ 
	font-size: 11px; 
	line-height: 14px; 
	text-decoration: none; 				}
.ir_nav_category4{ 
	font-size: 11px; 
	line-height: 14px; 
	text-decoration: none;	}     
.ir_nav_category4_area{ 
   padding-left:16px;
   padding-bottom:2px;} 
/*
	IE7 clears the white of contentarea to the bottom of the page.  Firefox does not.  
	This makes sure it does.
*/
.clear{
	clear: both;}
.titlePage { 
	/*
		Exactly what it says it is.
	*/
	font-weight:bold; 
	font-size: 16px; 
	line-height: 24px;}
.looking { 
	/*
		Not sure where this is used yet. There is a spot in the standards, but I don't have the graphic yet.
	*/
	font-size: 13px; 
	line-height: 15px;
	font-weight:bold; }
.copyright { 
	/*
		Pretty self explanatory
	*/
	font-size: 11px; 
	line-height: 13px; }
.text { 
	/*
		Normal Text
	*/
	font-size: 12px; 
	line-height: 15px; }
.textsmaller { 
	/*
		Normal Text smaller
	*/
	font-size: 10px; 
	line-height: 15px; }
.hometext { 
	/*
		Text on the home page.
	*/
	font-size: 14px; 
	line-height: 16px; }
.hometextlinks { 
	/*
		Links on the home page?  I'm a little puzzled on this one.
	*/
	font-size: 12px; 
	line-height: 14px; }
.headlines { 
	/*
		Headlines
	*/
	font-weight:bold; 
	font-size: 16px; 
	line-height: 24px; }
.texthead { 
	/*
		Headers
	*/
	font-size: 12px; 
	line-height: 16px; }

-->