/* CSS Document */
/* 	InReach Company CSS Document
*	Author:			Barkingweb.com - Nick Barling 
*	Date:			December 11 2006	
*	Version:		1.0
*	File:			home.css
*	Description:	CSS File to style InReach Company section	
*	Notes:			This is the file to alter to make site wide changes to company section page styling.
*					Use the descriptive headers to identify the elements that you
*					wish to change.
*/

/************************************** start of global default css ****************************************************************/ 

/* the height spawns a vertical scrollbar on all pages
 * to prevent short pages jumping to the left on Firefox */
html, body{
height: 101%;
}

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset{
margin: 0;
padding: 0;
border: 0;
}

.clearleft{
clear: left;
}

.clearright{
clear: right;
}

.clearboth{
clear: both;
}

/************************************ end of global default css *********************************************************************/
/************************************ start of css for the global page styling ******************************************************/

body{
background-color: #121212;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 100%;
} 

#wrapper{
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */
position: relative; /* alternate page centering technique avoiding IE 5.x hack, which uses text-align: center; on the body tag */ 
left: 50%; /* use left 50% and margin left instead of margin auto for left and right positioning */
margin-left: -470px; /* apply half the wrappers width as a negative left margin to center the page */
margin-top: 10px;
margin-bottom: 10px; /* this does not work in IE6 but works in FF and IE7.  could be a margin collapse issue? */
background-color: #f7f7f8;
border: 1px solid rgb(77,103,119);
background-image: url(../images/company_wrapper_bg.jpg);
background-repeat: no-repeat;
}

#main_content a{
color: #FF0066;
text-decoration: none;
border-bottom: 1px dotted #000;
}

#main_content a:hover{
border-bottom-style: solid;
}

#main_content .external{
background: url(../images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
/************************************ end of css for the global page styling ********************************************************/
/************************************ start of css styling for the page *************************************************************/

#header{
height: 156px;
background-image: url(../images/company_header.jpg);
background-repeat: no-repeat;
/*background: #CC66FF; */
}

/* This div is placed inside the header div and contains the home page navigation bar and positions it over the header div background image */
#FWTableContainer1355077048{
top: 67px;
left: 339px;
}

#inner_wrapper{
width: 940px;
margin-top: 24px;
padding-bottom: 20px;
}

#main_content{
float: right;
width: 720px;
background-image: url(../images/main_con_fill_company.gif);
background-repeat: repeat-y;
}

#main_content h1, h2, h3, h4, h5, h6{
color: #4a4e45;
margin: 20px;
}

#main_content h1{
font-size: 120%;
}

#main_content h2{
font-size: 110%;
}

#main_content h3{
font-size: 90%;
}

#main_content h4{
font-size: 80%;
}

#main_content p{
font-size: 80%;
margin: 20px;
}

#background_top{
background-image: url(../images/main_con_top_company.gif);
background-repeat: no-repeat;
width: 720px;
height: 38px;
}

#background_bottom{
background-image: url(../images/main_con_bottom.gif);
background-repeat: no-repeat;
width: 720px;
height: 36px;
} 
div#left_column{
float: left;
width: 137px; /* floats must have a width */
display: inline; /* another IE bug (doubling the left margin of a floated element) is killed with display: inline. Always set this even if not using margins initially in the design. */
padding-top: 20px;
padding-left: 25px;
font-size: 13px;
}

div#left_column h1, h2, h3, h4, h5, h6{ /* always add horizontal padding to the navigation area content to avoid invoking IE 5.x's box model. */
text-align: center;
color: #4a4e45;
margin: 0; /* this margin overrides the margin set in the main_content div for h elements in the left_column div. */
padding-bottom: 12px; /* this provides separarion from the h1-6 elements and the css navigation ul below it. */
}

/************************************ end of css styling for the page ***************************************************************/
/************************************ start of css styling for the left_col navigation **********************************************/

div#left_column ul{
margin:  0;
padding: 0;
width: 137px;
/*background: #ccc2b0; */
/*border: 1px hidden; */
}

div#left_column li{
position: relative; /* establish a containing block to give lis a starting point to position their absolutely positioned sub-menus. */
list-style: none; /* remove bullets from lis. */
margin: 0; /* prevents auto margin value appearing in opera. */
/*border-bottom: 1px hidden; */
}

div#left_column li:hover {
background: #dfe8fd;
}

div#left_column li.submenu{
background: url(../images/arrows.gif) 95% 50% no-repeat;
border-bottom: 1px solid #b3bdc5; /* color match main page background to aid transparency of menu main links */
}

div#left_column li.submenu:hover {
background-color: #dfe8fd;
}

div#left_column li a{
color: #4a4345;
display: block; /* this makes links a block and fills the whole li box. */
padding: 3px 2px 3px 5px;
text-decoration: none; /* remove link underlining. */
width: 100%;
voice-family:"\"}\""; voice-family: inherit; /* this hack accommodates pre v6 Win IE browsers. */
width: 130px;
}

/* this hack uses the child selector, which IE6 cannot see, to set the width back to auto for all non-IE browsers */
/* IE7 can see it and therefore corecting code is added in the ie7.css file to get IE7 to reset the width to 100% */
div#left_column>ul a{
width: auto;
}

div#left_column ul ul{
position: absolute; /* align the lis, that are contained within another li, with the top of the containing li */
top: -12px; /* positions sub-menu lis vertically */
left: 137px; /* positions sub-menu lis horizontally */
display: none; /* default setting hides all sub-menu uls */
border: 1px solid #98a2ac;
background-color: #d2d6db;
}

div#left_column ul.level1 li.submenu:hover ul.level2 {
display: block; /* sub-menu appears when parent ul is hovered */
}
/************************************ end of css styling for the left_col navigation ************************************************/
/************************************ start of image positioning ********************************************************************/

.float_right_img{ /* universal class to float all images in main content area */
float: right;
width: 260px; /* floats must have a declared width */
}
/************************************ end of image positioning **********************************************************************/
/************************************ start of footer positioning *******************************************************************/

#footer{
margin: 0px;
padding: 0px;
border-top: 1px solid #4a4e45;
font-size: 60%;
letter-spacing: 0.2em;
color: #4a4e45;
clear: both;
}

/* when floating inside a containing div you must 'clear both' within the apparent containing div.  Here this means placing the clear both inside the footer div in the html */
#footer .footer_copy{
float: left;
text-align: left;
width: auto;
padding: 8px; /* apply padding to the floated class, not the containing footer, this is because the containing footer div only 'appears' to contain the floated elements and padding applied there would not work correctly. */
}

#footer .footer_site_map{
float: right;
text-align: right;
width: auto;
padding: 8px;
}

#footer a{
color: #FF0066;
text-decoration: none;
border-bottom: 1px dotted #000;
}

#footer a:hover{
border-bottom-style: solid;
}

#footer .external{
background: url(../images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}

/************************************ end of footer positioning **********************************************************************/