/****************************************************************************
	Standard layout and style library for tronox.com.
	
	Layout technique is based largely on the "Jello Mold" documented at:
	  http://positioniseverything.net/articles/jello.html
	
	Copyright (c) 2005 Tronox Incorporated. All rights reserved.
******************************************************************************/
html, body, form {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	padding: 0 395px; /* The critical side padding that sets the natural min-width! */
	color: #000;
	font-family: Arial, Helvetica, sans-serif; /* Sets fonts globally */
	font-size: 100.01%; /* This body font-size fixes an IE bug and maintains x-browser uniformity */
	text-align: center; /* Centers the #Sizer element in IE5.x/win */
}

img {max-width: 100%;}
/* Prevents oversize images from breaking layout in browsers that support max-width */


#Sizer {
	margin: 0 auto; /* Centers #Sizer in standard browsers */
	padding: 0;
	width: 40%; /* This value controls liquidity; 0% = full rigid, 100% = full liquid */
	text-align: left !important; /* Resets the default text alignment for the page */
	max-width: 200px;
}

#Expander { /* Any % height here causes IE to lose the neg right margin */
	margin: 0 -395px; /* Neg. side margin values should be < or = to side body padding */
	min-width: 790px; /* Prevents Safari from losing the negative margins in narrow windows */
	position: relative; /* Makes #Expander visible outside #Sizer in IEwin */

	/* Sets the content border along entire right side of page */
	background: url(../images/content_border.jpg) repeat-y right top;
}
	/*\*/
	* html #Expander {height: 0;}
	/* #Expander must have "height: 0" in IEwin bug fixing */

	/* The above is a modified Holly hack for #Expander, with zero substituted for the
	usual 1% height value. Any % value on this element causes a horrendous IE bug! */


#Wrapper {
	position: relative; /* Positioning may be needed for IEwin if page is to contain positioned elements */
	clear: both; /* Drops #Wrapper below #Header that contains floats */
	
	/* This BG tiles the left column */
	background: url(../images/navigation_local_bg.jpg) repeat-y left top;
}
	/*** Fixes for IEwin ***/
	/*\*/
	* html #Wrapper {height:1%;}
	/* */


/****************** Main Page Structure *****************/

/* To modify the side column widths and the col divider widths, the values that are
marked "critical" and also refer to the desired mod MUST be changed as a group. */

.outer {
	border-left: 2px solid #fff; /*** Critical left divider dimension value ***/
	border-right: none; /*** Critical right divider dimension value ***/
	margin-left: 201px;    /*** Critical left col width value ***/
	margin-right: 0;   /*** Critical right col width value ***/
	
	background-repeat: no-repeat;
	background-position: left top;
	
	/* This BG tiles the center column (default - specific images are set below) */
	background-image: url(../images/content_bg_pellets.jpg);
}
	.outer a {word-wrap: break-word;}
	/* Prevents long urls from breaking layout in IE, must
	be hidden in a conditional comment for CSS to validate */
	
	/*** Fixes for IEwin ***/
	/* Note: I did have "* html .outer a" with 1% height, but it breaks IE5.x */
	/*\*/ 
	* html .outer {height: 1%;}
	* html .outer p {margin-right: -6px;}
	/* */
	
	/* Set the content background image */
	.outer.about {
		background-image: url(../images/content_bg_pellets.jpg);
	}
	.outer.products {
		background-image: url(../images/content_bg_plantsavannah.jpg);
	}
	.outer.ir {
		background-image: url(../images/content_bg_plasticspvc.jpg);
	}
	.outer.media {
		background-image: url(../images/content_bg_paintbrush.jpg);
	}
	.outer.careers {
		background-image: url(../images/content_bg_paperrollers.jpg);
	}

.float-wrap {
	float: left;
	width: 100%;
}

#Main {
	float: right;
	width: 100%;

	font-size: 80%;
	line-height: 150%;
}

/* Control padding inside main content area */
#Main .textpadder {
	padding-left: 140px;
	padding-right: 25px;
	padding-bottom: 2em;
}

#Main h1 {
	font-size: 180%;
	margin-top: 1em;
}

#Sidebar {
	float: left;
	position: relative; /* Needed for IE/win */
	width: 200px; /*** Critical left col width value ***/
	margin-left: -202px; /*** Critical left col width value ***/ /*** Critical left divider dimension value ***/

	/* Main section indicator background image 
	background: url(../images/navigation_local_section_products.gif) no-repeat 3px 0;*/
}

#Navigation-Local {
	color: #ffc;
	font-size: 80%;
	
	/* Make room for main section indicator bg image */
	/*padding-top: 52px;*/
}
	/*** Fixes for IEwin ***/
	/*\*/
	* html #Navigation-Local {height:1%;}
	/* */
	
#Navigation-Local #Nav-Header {
	background-position: 3px top;
	background-repeat: no-repeat;
	width: 100%;
	height: 51px;
}
#Navigation-Local #Nav-Header a {
	display: block;
	width: 191px;
	height: 100%;
}
	/* Assign BG images for each top-level section */
	#Navigation-Local .about {
		background-image: url(../images/navigation_local_section_about.gif);
	}
	#Navigation-Local .products {
		background-image: url(../images/navigation_local_section_products.gif);
	}
	#Navigation-Local .ir {
		height: 82px !important;
		background-image: url(../images/navigation_local_section_ir.gif);
	}
	#Navigation-Local .responsibility {
		height: 82px !important;
		background-image: url(../images/navigation_local_section_responsibility.gif);
	}
	#Navigation-Local .media {
		background-image: url(../images/navigation_local_section_media.gif);
	}
	#Navigation-Local .careers {
		background-image: url(../images/navigation_local_section_careers.gif);
	}
	#Navigation-Local .resources {
		background-image: url(../images/navigation_local_section_resources.gif);
	}

#Navigation-Local .reorganization {
		background-image: url(../images/navigation_local_section_reorganization.gif);
	}


#Navigation-Local a {
	margin: 0;
	padding: 0;
	
	text-decoration: none;
}

#Navigation-Local ul {
	margin: 0;
	padding: 0;
	
	border: none;
	list-style: none;
}

#Navigation-Local li {
	margin: 0;
	
	font-weight: bold;
	font-size: x-small; /* Overridden in IE5x stylesheet */
}
	
/* Styles second-level navigation elements */
#Navigation-Local li span.active,
#Navigation-Local li a {
	display: block;
	width: 163px; /* Overridden in IE5x stylesheet */
	margin-left: 3px;
	padding: 6px 9px 6px 25px;
	vertical-align: bottom; /* Needed for IEWin proper alignment */
	
	background: #b0aeb9 url(../images/navigation_local_button.gif) no-repeat;
	border-bottom: 1px solid #868295;
	color: #404d73;
	font-size: x-small; /* Overridden in IE5x stylesheet */
	text-decoration: none;
	text-transform: uppercase;
}
	/* Reset width for compliant browsers */
	html>body #Sidebar #Navigation-Local li a {
		width: auto;
	}
	
#Navigation-Local li span.active {
	color: #000;
}
	
#Navigation-Local li a.open,
#Navigation-Local li span.open {
	background-image: url(../images/navigation_local_button_open.gif) !important;
}

/* Styles third-level navigation elements */
#Navigation-Local li li a,
#Navigation-Local li li span.active {
	width: 162px;
	margin-left: 3px;
	padding: 4px 0 5px 35px;
	
	background-image: url(../images/navigation_local_button_sub.gif);
	border-bottom: 1px solid #c7c6c4;
	color: #5a5a5a;
	text-transform: none;
}

#Navigation-Local li li span.active {
	color: #000;
}


/* Styles mouseovers for second-level navigation elements */
#Navigation-Local li a:hover {
	background-image: url(../images/navigation_local_button_mo.gif);
	background-color: #8f8ba2;
	color: #fff;
}

#Navigation-Local li a.open:hover {
	background-image: url(../images/navigation_local_button_open_mo.gif);
}

/* Styles mouseovers for third-level navigation elements */
#Navigation-Local li li a:hover {
	background-image: url(../images/navigation_local_button_sub_mo.gif);
	color: #888;
}


/*************** Header and Footer elements *****************/

#Header {
	padding-left: 4px;
	padding-right: 4px;
	
	/* Set content border along left side of Header */
	background: url(../images/content_border.jpg) repeat-y left top;
}

#Header #Logo {
	height: 69px;
	
	/* Sets colored squares background element */
	background: url(../images/header_squares_bg.gif) no-repeat 175px 2px;
	border-top: 4px solid #adaaba;
}

#Header #Logo img {
	border: 0;
	margin: 0;
	padding: 0;
}

#Header #Utility {
	/* Attach this section to upper right corner of Header */
	position: absolute;
	top: 4px;
	right: 4px;
	
	width: 400px; /* Must set width or this layer will cover company logo */
	z-index: 1;
	
	text-align: right; /* Right-aligns Search box in IEWin */
}
	/* IEWin places section 1 pixel too far to left */
	/*\*/
	* html #Header #Utility {right:3px;}
	/* */

#Header #Utility #Navigation-Utility {
	height: 25px;
	
	/* Sets gradient border along bottom of utility nav. */
	background: url(../images/header_utility_border.gif) no-repeat right bottom;
}

#Header #Utility #Navigation-Utility li {
	float: right;
}

/* 
	Format anchor elements to hide their text and display background images.
	Based on image replacement technique documented at:
	  http://www.kryogenix.org/code/browser/lir/
*/
#Header #Utility #Navigation-Utility a {
	display: block;
	height: 0; /* Overridden in IE5x stylesheet */
	overflow: hidden;
	padding-top: 20px; /* Set to height of replacement images */
	
	background-repeat: no-repeat;
}
	/* Set the individual images for each utility navigation element */
	li#Nav-Home a {
		background-image: url(../images/navigation_utility_home.gif);
		width: 57px;
	}
		li#Nav-Home a:hover {
			background-image: url(../images/navigation_utility_home_mo.gif);
		}
	li#Nav-Sitemap a {
		background-image: url(../images/navigation_utility_sitemap.gif);
		width: 68px;
	}
		li#Nav-Sitemap a:hover {
			background-image: url(../images/navigation_utility_sitemap_mo.gif);
		}
	li#Nav-Contact a {
		background-image: url(../images/navigation_utility_contact.gif);
		width: 84px;
	}
		li#Nav-Contact a:hover {
			background-image: url(../images/navigation_utility_contact_mo.gif);
		}

#Header #Utility #Search {
	height: 45px;
	padding-top: 8px;
	padding-right: 3px;
	
	/* Sets gradient background behind search box */
	background: url(../images/header_search_bg.gif) no-repeat right top;
}

#Header #Utility #Search #Query {
	width: 137px;
	margin-bottom: 4px;
	
	border: 1px solid #364b80;
	font-size: 8pt;
}

#Header #Navigation-Global {
	/* This allows global nav to stack in front of the utility section */
	position: relative;
	z-index: 10;
	
	/* Sets background behind global nav buttons */
	background: #60638d url(../images/navigation_global_bg.gif) repeat-x;
	border-bottom: 2px solid #fff;
}
	/* Needed for IEWin to "contain" floated items */
	/* Overridden in IE5.x stylesheet */
	/*\*/
	* html #Header #Navigation-Global {height: 1%;}
	/* */
	
	/* Needed for non-IE browsers to "contain" floats */
	#Navigation-Global:after,
	#Navigation-Utility:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

/* Make navigation list items display side-by-side */
#Navigation-Global ul,
#Navigation-Global li,
#Navigation-Utility ul,
#Navigation-Utility li {
	display: inline;
	margin: 0;
	padding: 0;
}

/* List items must be floated because they contain anchors displayed as blocks */
#Navigation-Global li {
	float: left;
}

/* 
	Format anchor elements to hide their text and display background images.
	Based on image replacement technique documented at:
	  http://www.kryogenix.org/code/browser/lir/
*/
#Navigation-Global a {
	display: block;
	height: 0; /* Overridden in IE5x stylesheet */
	overflow: hidden;
	padding-top: 38px;	/* Set to height of replacement images */
	
	background-repeat: no-repeat;
}
	/* Set the individual images for each global navigation element */
	a#Nav-about {
		width: 112px;
		background-image: url(../images/navigation_global_aboutus.gif);
	}
		a:hover#Nav-about {
			background-image: url(../images/navigation_global_aboutus_mo.gif);
		}
	a#Nav-products {
		width: 114px;
		background-image: url(../images/navigation_global_products.gif);
	}
		a:hover#Nav-products {
			background-image: url(../images/navigation_global_products_mo.gif);
		}
	a#Nav-ir {
		width: 143px;
		background-image: url(../images/navigation_global_ir.gif);
	}
		a:hover#Nav-ir {
			background-image: url(../images/navigation_global_ir_mo.gif);
		}
	a#Nav-media {
		width: 114px;
		background-image: url(../images/navigation_global_media.gif);
	}
		a:hover#Nav-media {
			background-image: url(../images/navigation_global_media_mo.gif);
		}
	a#Nav-responsibility {
		width: 184px;
		background-image: url(../images/navigation_global_responsibility.gif);
	}
		a:hover#Nav-responsibility {
			background-image: url(../images/navigation_global_responsibility_mo.gif);
		}
	a#Nav-careers {
		width: 114px;
		background-image: url(../images/navigation_global_careers.gif);
	}
		a:hover#Nav-careers {
			background-image: url(../images/navigation_global_careers_mo.gif);
		}
a#Nav-reorganization {
		width: 114px;
		background-image: url(../images/navigation_global_reorganization.gif);
	}
		a:hover#Nav-reorganization {
			background-image: url(../images/navigation_global_reorganization_mo.gif);
		}

#Footer {
	position: relative;
	width: 100%;
	clear: both;
	padding-bottom: 1.5em;
	
	/* Sets content border along left side of footer */	
	background: url(../images/content_border.jpg) repeat-y left top;
	font-size: 70%;
}

#Footer #Contact {
	width: 100%;
}

#Footer #Company {
	margin: 0 4px 0.2em 4px;
	padding: 0.5em 0 0.5em 30px;
	
	background-color: #576182;
	border-top: 2px solid #fff;
	color: #fff;
	font-weight: bold;
}

#Footer #Address {
	margin: 0;
	padding-left: 30px;
	
	font-size: 90%;
	line-height: 150%;
}

#Footer #Copyright {
	/* Attach copyright to top right corner of footer */
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 1em;
	margin-top: 0.5em;
	
	color: #fff;
	text-align: right;
}

#Footer a {
	color: #666;
}

#Footer ul, 
#Footer li {
	display: inline;
	margin: 0;
	padding: 0;
}

#Footer ul {
	margin-left: 30px;
}

#Footer li {
	padding: 0 0.5em 0 0.5em;
	border-left: 1px solid #576182;
	font-size: 90%;
}
	#Footer li.first {
		border-left: none;
		padding-left: 0;
	}

.brclear { /* Use a break with this class to clear float containers */
	height: 0;
	margin: 0;
	clear: both;
	
	font-size: 1px;
	line-height: 0;
}

/****************************************************************************
	Main content section styles.
	
	These rules style and format content in the Main section of the page.
****************************************************************************/
/* Format display tables */
table.info-display-table {
	width: 100%;
	clear: both;
	border-top: 1px solid #555;
	border-collapse: collapse;
	margin-top: 1em;
}

table.info-display-table caption {
	margin-top: 1em;
	padding-bottom: 0;
	
	text-align: left;
	font-weight: bold;
	font-size: 125%; /* Overridden in IE5x stylesheet */
}
	/*** Fixes for IEwin ***/
	/*\*/
	* html table.info-display-table caption {padding-bottom: 0.5em;}
	/* */


table.info-display-table th {
	padding-right: 1em;
	
	background-color: #d0d7e1;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
}

table.info-display-table td {
	padding: 7px 1em 7px auto;
	border-bottom: 1px solid #ddd;
	vertical-align: top;
}

table.info-display-table tr.total td {
	border-bottom: none;
	font-weight: bold;
}

* html table.info-display-table .number-col {
	text-align: right !important;
}

table.info-display-table td.col-date {
	width: 25%;
}

table.info-display-table td.col-title {
	width: 75%;
}

table.info-display-table td.col-label {
}

table.info-display-table td.col-value {
	padding-right: 1em;
}

table.info-display-table sup {
	margin-right: -0.8em;
}

table.info-display-table .alt-row {
	background-color: #eee;
}

/* Some items shoud only show up when printed */
.print-only {
	display: none;
}

/* Mark a paragraph with "alert" colors */
p.alert {
	border: 2px solid red;
	background-color: lightyellow;
	padding: 1em;
	font-size: larger;
}

/* Style special links with a bullet */
p.link a {
	padding-left: 18px;
	padding-bottom: 2px;
	
	/* This BG adds a bullet next to hyperlinks */
	background: url(../images/bullet_link.gif) no-repeat left top; /* bg-position overridden in IE5x stylesheet */
}

/* Make that "2" in TiO2 smaller */
sub {
	font-size: 75%;
}

p.contact-person {
	padding-left: 2em;
}

/* Links to Resources page (esp. for Adobe Reader) */
p.resource-link {
	font-size: smaller;
}

/* Headings and sub-headings */
#Main h1,
#Main h2,
#Main h3,
#Main h4,
#Main h5,
#Main h6 {
	font-family: tahoma, arial, helvetica, sans-serif !important;
}

#Main h1 {
	color: #656565;
	font-size: 180%;
	line-height: 100%;
}

#Main h2 {
	color: #576182;
	font-size: 145%;
	margin-top: 1.5em;
	margin-bottom: 0;
}

#Main h3 {
	font-size: 125%;
	margin-bottom: -0.5em;
}

#Main h4 {
	font-size: 110%;
	margin-bottom: -1em;
	color: #555;
}

#Main h5 {
	font-size: 105%;
	margin-bottom: -1em;
}

#Main h6 {
	font-size: 100%;
	margin-bottom: -1em;
}

/* Image alignment */
#Main .image-align-left img {
	display: block;
	float: left;
	padding-top: 5px;
	margin-right: 15px;
	margin-bottom: 8px;
}

#Main .image-align-right img {
	/* Redefined in IE5.x stylesheet */
	display: block;
	float: right;
	padding-top: 4px;
	margin-left: 15px;
	margin-bottom: 8px;
}

#Main p.image-align-center {
	text-align: center;
}

#Main .image-align-right {
	/* Redefined in IE5.x stylesheet */
	/* Close up space left by the IMG container in IE */
	width: 0;
	margin: 0;
	padding: 0;
}
	/* Offsets are different depending on the container element */
	#Main h2 .image-align-right	{ margin-right: -0.9em; }
	#Main h3 .image-align-right { margin-right: -0.9em; }
	#Main p .image-align-right 	{ margin-right: -1.2em; }

#Main ul {
	/* Do not let images float to the left of ULs 
	clear: left;*/
}


dt {
	font-weight: bold;
	margin-top: 1.2em;
	margin-bottom: 0.5em;
}

dd {
	margin-bottom: 0.5em;
	line-height: 1.6em;
}


/* Update for IE7 */
#Header #Navigation-Global, .outer { zoom: 1; }


/* Load override styles for IE5 + IE5.5 */
*/
@media tty {
	i{content:"\";/*" "*/}} @import 'standard_ie5x.css'; /*";}
}/* */