/*------------------------------------------------------------------------------------
                                                                           main.css */

/* styles used on all pages */


/* makes vert scrollbar visible on FF on pages with not enough length to force it */
:root {
 overflow-y: scroll !important;}

/* default font face - "Luxi Sans" is for Linux - default sans-serif has weird line-height */
body, body div, body p, body th, body td, body li, body dd	{
	font-family:arial, verdana, "Luxi Sans", sans-serif;}

/*------------------------------------------------------------------------------------
                                                                      general stuff */
h1 {
	font-size:135%;}

h2 {
	font-size:120%;}

h3 {
	font-size:115%;}

h4 {
	font-size:110%;}

h5 {
	font-size:105%;}

h6 {
	font-size:100%;}

img, form {
  border:0;
  margin:0;
  padding:0;}



/* define any common colors here - named generically so it can be easily changed and still be (somewhat) descriptive */
.textColor1 {
	color:#046288;}

.textColor2 {
	color:#7d7d7d;}


/* used for instances of "11px" font - default xSmall.css import creates text at ~12px */
.smallText {
	font-size:95%;}

/* used for instances of "10px" font - default xSmall.css import creates text at ~12px  */
.smallerText {
	font-size:75%;}

/* used for instances of "13px" font - default xSmall.css import creates text at ~12px  */
.largeText {
	font-size:105%;}

/* used for instances of "14px" font - default xSmall.css import creates text at ~12px  */
.largerText {
	font-size:110%;}

/* Not sure if this is better than a <strong> or <em> tag - thoughts are that I can add a voice-family, and other css aural rules... */
.bold {
	font-weight:bold;}

.italics {
	font-style:italic;}



/* use on elements that would normally require a <div style="clear:both"></div> after them - no extra divs in the code please ;) */
.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/* general tooltip css, create with <a>text<span>tooltip text</span></a> */
a.tooltip {
  position:relative;
	z-index:24;
	text-decoration:none;}

a.tooltip:hover {
	z-index:25;}

a.tooltip span {
	display:none}

a.tooltip:hover span {
	display:block;
	position:absolute;
	top:2em;
	left:2em;
	width:15em;
	padding:2px;
	border:1px solid #4d4d4d;
	background-color:#be2e1a;
	color:#fff;
	text-align:center}



/* general img styles */
img {
	margin:0;
	padding:0;
	border:0;}


/* general padding, nest within another element to give it 10px padding */
.innerPadding {
	padding:10px;}


/* 
  creates the illusion of rounded corner boxes
  use:
    <div class="myClass roundedCorner">              <- create a div/span element with a bgcolor
     <div class="r1"></div>                          <- can be div/span - default border color is white - override as necessary, but 
                                                        leave this style alone, override with .myClass .div { border-color: myColor }
     <div class="r2"></div>                          <- can be div/span
     <div class="r3"></div>                          <- can be div/span
     <div class="r4"></div>                          <- can be div/span
     <div class="r5"></div>                          <- can be div/span
     <div class="r6"></div>                          <- can be div/span
     <div class="r7"></div>                          <- can be div/span
     <p>Text, images, whatever...</p>                <- wrap any text in a <p>
     <div class="r7">...<div class="r1"></div>       <- Reverse order for bottom rounded corners
    </div><!-- /.myClass -->
    
  default is black box on a white bg.
  em units are used because relative font sizes are used; rounded corners enlarge with the text size.
*/

.roundedCorner {
	background:#000;}

	.roundedCorner div {
		overflow:hidden;
		height:.06em;  /* 0.06em ~= 1px */
		font-size:1em;
		border-style:solid;
		border-color:#fff;}

	.r1 { border-width:0em .5em 0em .5em;}
	.r2 { border-width:0em .35em 0em .35em;}
	.r3 { border-width:0em .2em 0em .2em;}
	.r4 { border-width:0em .14em 0em .14em;}
	.r5 { border-width:0em .12em 0em .12em;}
	.r6 { border-width:0em .08em 0em .08em; }
	.r7 { border-width:0em .05em 0em .05em; }

	/* want only the right side rounded? */
	.roundedRight div {
		border-left-width:0em;}
	
	.roundedLeft div {
		border-right-width:0em;}



/* override the default in rigidLiquidMax1024.css */
body {
	background:#414142;}

#expander {
	}




/*

  Begin with actual layout here
*/

/* -------------------------------------------------------------------------------------------------------
                                                                                                 HEADER */
#header {
	width: 770px;
	height: 77px;
	background-image: url("/images/index_header_bg.jpg");
	padding: 0;
	margin: 0;
	}
#logo {
	position: absolute;
	z-index: 9;
	width: 182px;
	height: 143px;
	}

/* -------------------------------------------------------------------------------------------------------
                                                                                              MAIN IMAGE */	
#mainimgcontainer {
	position: relative;}
	
	#mainimg {
		position: absolute;}	
	
	#navshadow {
		width: 770px;
		height: 28px;
		background: url("/images/index_navshadow.png") no-repeat;
		position: absolute;
		z-index: 4;}


		
/* -------------------------------------------------------------------------------------------------------
                                                                                           MAIN CONTENT */	
																								 
#maincontentwrap {
	width: 770px;
	position: relative;
	top: 51px;}

	#maincontent {
		padding-left: 182px;   /* LC width */
		padding-right: 146px;  /* RC width */
		background-color: #fff;}
		
		#maincontent .column {
			position: relative;
			float: left;}

/* center column */	
		#maincontent #center {
			width: 100%;
			background-color: #fff;
			color: #fff;
			padding: 0 0 10px 0;}		
		
		#maincontent #center .centercontent {
			padding: 10px 15px 0px 20px;
			margin: 0;
			color: #000000;}	
					
		#maincontent #center p {
			color: #000;
			font-weight: normal;
			padding: 10px 0 10px 0;
			margin: 0;}	
			
		#maincontent #center h1 {
			color: #8e191b;
			margin: 10px 0 0 0;
			font-size: 140%;}
						
		#maincontent #center h2 {
			color: #8e191b;
			margin: 10px 0 0 0;
			font-size: 130%;}
			
		#maincontent #center h3 {		
			color: #8e191b;
			margin: 10px 0 0 0;}
			
		#maincontent #center .solution {
			color: #fd0;}	

/* left column */		
	#maincontent #left {
		width: 182px;          /* LC width */
		right: 182px;          /* LC width */
		margin: 0 0 15px -100%;
		color: #6c6e70;
		background-color: #fff;}		
				
		#maincontent #left .sectionnavwrap  {
			background-color: #95979a;
			padding: 12px 0 0 0;
			margin: 0;}
								
		#maincontent #left .sectionnav {
			background-color: #95979a;
			padding: 0;
			margin: 0;}	
				
		#maincontent #left .sectionheading {
			color: #ffdd00;
			text-transform: uppercase;
			border-bottom: 1px dashed #fd0;
			margin: 0;
			padding: 11px 0 8px 15px;
			background: url("/images/main_sectionarrow_bg.png") no-repeat top left #4c4d4f;
			font-weight: bold;}
		
		#maincontent #left .sectioncontent {
			border-top: 5px solid #4c4d4f;
			margin: 0;
			padding: 8px 0 0 0;}
		
		#maincontent #left .leftcolimg {
			background-color: #fff;
			padding: 10px 0px 10px 0;}	
			
		#maincontent #left .contactwrap {
			background-color: #dbdcde;
			padding: 0;
			margin: 0 0 15px 0;}	
			
/* Contact heading */				
		#maincontent #left .contactheading {
			color: #000;
			border-bottom: 1px dashed #6c6e70;
			margin: 0 17px 0 0;
			padding: 11px 0 8px 15px;
			background: url("/images/main_contactarrow_bg.png") no-repeat top left;
			font-weight: bold;}
			
/* Contact content */
		#maincontent #left .contactcontent {
			margin: 0 15px 0 14px;
			padding: 8px 0 0 0;}
		
		#maincontent #left .contactcontent td {
			padding: 0 0 11px 0;
			color: #6c6e70;
			font-size: .7em;}
			
/* Contact link */
			a.contact, a.contact:visited  {
				color: #6c6e70;
				text-decoration: none;}
				
			a.contact:hover {
				color: #6c6e70;
				text-decoration: underline;}
	
/* right column */			
	#maincontent #right {
		width: 146px;          /* RC width */
		margin-right: -146px;  /* RC width */
		background-color: #8e191b;
		padding: 14px 0 120px 0;}
	
		#maincontent #right ul.rightcolimg {
			padding: 0;
			margin: 0;}
				
		#maincontent #right .rightcolimg li {
			display: inline;
			float: left;
			padding: 0 0 13px 14px;
			margin: 0;}

#sizer {
  width: 0%;
  max-width:224px;}

.ulNavSidebar li {
    list-style-type: none;}

.ulNavSidebar a.root {
    width: 150px;}
    
.ulNavSidebar a.root:hover {
    width: 150px;}
    
pre {
    background: #efffff;
    font-size: 130%;
    padding: 0.2em;}
    
div.error {
    margin-top: 1em;
    border: 1px solid #C43D3F;
    padding: 0.5em 2em;
    font-weight: bold;}
    
div.notice {
    margin-top: 1em;
    border: 1px solid #5070FF;
    padding: 0.5em 2em;
    font-weight: bold;}
    
div.calendar td {
    width: auto;}
    
#maincontent #center p.galleryMsg {
    color: #ffffff;}
    
div.inlineImage {
    float: right;
    padding: 0.5em 0 0 0.5em;}
    
div.relatedFiles h4 {
    margin-bottom: 0;
    color:#8E191B}
    
div.relatedFiles ul.relatedDocs {
    margin-top: 0;}