/***********************************************/

/* copyright 2007 - 2009 Mark Stamas */

/* This is an all css fixed width layout, using various techniques, wrapper, margin auto and etc, all of which are standard faire, a lot of these styles are carryovers from a DW template, the one based on the old Macromedia site, remind me to clear out the unused styles */

/***********************************************/ 
body, html {
	margin:0;
	padding:0;
	color:#000;
}
body {
	min-width:760px;
}
body {
	font-family: Arial, sans-serif;
	color: #000000;
	line-height: 1.166;
	background-image:  url("../images/background_gradient.jpg");
	font-size:90%;
}
#logo {
	position:absolute;
	left:0px;
	top:0px;
	width:222px;
	height:33px;
	z-index:1;
}
#wrapper {
	/*wraps the whole shooting match setting the center justified content area*/
	position:relative;
	margin:0 auto;
	padding:0;
	width:760px;
	border:0;
}
#container {
	background:#FFF;
	margin:0 auto;
	padding:0;
	width:760px;
	border: 1px solid #0294F9;
	background: url(../images/wrapper_background.jpg) repeat-y top;
	/*The background image sets the blue left column background, a slice tiled vertically*/
}
#header {
	background:#FFF;
}
#header h1 {
	padding:5px;
	margin:0;
}
/************* #globalNav styles **************/
#globalNav {
	color: #cccccc;
	white-space: normal;
	text-align: center;
	background:#FFF;
	border-bottom: 2px solid #EAEAEA;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap, 
   ah the good 'ol days of DW */
#globalNav ul {
	margin:0;
	padding:0;
	list-style:none;
}
#globalNav li {
	display:inline;
	margin:0;
	padding:0;
}
#globalNav img {
	display: block;
}
#globalNav a {
	font-size: 90%;
	padding: 0px 4px 0px 0px;
	color: #006699;
}
#search2 {
	margin:10px;
	padding:0;
	background:#FFF;
}
#search2 form {
	margin: 0px;
	padding: 0px;
}
#search2 label {
	display: block;
	margin: 0px;
	padding: 0px;
}
/********home page layout, uses the same container, header, globalNav********/
#contentWrapperIndex {
	/*this wraps the content with a white background to cover up the background image with the left column, I could, in fact, 
	for this design, put the left column background in a content wrapper for the rest of the site as well, instead of using
	the container for the background, maybe I will, six of one.....*/
	background:#FFF;
}
#GetStartedContent {
	float:left;/*despite this content being 100 percent wide this float takes out the mystery gap between divisions, width must be set and is 2 pixels less than the container due to the 1 pixel blue border, 100% runs over the right side in Mozilla*/
	width:758px;
	margin: 0px;
	padding: 0px;
	background:#FFFFFF;
	border-left: 2px solid #EAEAEA;
}
#GetStartedContent h2 {
	padding:0 3px;
	border-bottom: 2px solid #EAEAEA;
}
#GetStartedContent p {
	padding:0px 8px;
}
#leftIndex {
	margin:0;
	padding:0;
	float:left;
	width:345px;
	clear:left;
	background:#FFF;
}
#leftIndex h3, #leftIndex p {
	padding:0 10px;
}
.subheader {
	font-size: 105%;
	color: #000000;
	margin-bottom: 10px;
	padding-left: 15px;
	font-weight: bolder;
}
#contentIndex {
	position:relative;
	margin: 0 0 0 350px;
	padding: 0px;
	background:#FFFFFF;
	border-left: 2px solid #EAEAEA;
}
#contentIndex h2 {
	padding:0 3px;
	border-bottom: 2px solid #EAEAEA;
} 
#contentIndex h3, #contentIndex p {
	margin:0;
	padding:10px;
}
/******************************************/
#get_started {
	margin:0;
	padding:15px;
	background:white;
}
#main {
	position:relative;
	margin:50px 0 0;
	padding:0;
	background:#FFF;
	float:right;
	width:559px;
}
#main h2 {
	padding:0 3px;
	border-bottom: 2px solid #EAEAEA;
} 
#main h3, #main p {
	padding:0 10px;
}
#main h3 {
	margin:25px;
	padding:0px;
	/*color: #0033FF;*/
}
/***Paragon Slideshow***/
.paragon {
	margin:0;
	padding:4px;
	background: #84A842;
	height:25px;
}
.paragonh3 {
	margin:0;
	padding:0 0 0 10px;
	font-weight:900;
}
.slideh3 {
	margin:0;
	padding:0;
	font-weight:900;
	font-family:"Times New Roman", Times, serif;
	font-size:150%;
	text-align:center;
}
#whatsnew {
	position:absolute;
	padding:0;
	left:-299px;
	top:399px;
	width:227px;
	height:148px;
	z-index:12;
	/*background: url(../images/2007/whatsnewbox.jpg) no-repeat;*/
}
#paragoninst {
	position:absolute;
	left:-205px;
	top:410px;
	width:205px;
	height:123px;
	z-index:13;
}
#paragon {
	margin:10px 0 0 0;
	padding:0;
	width:559px;
	height:419px;
	background: url(../images/paragon/suzhou_skyline_faded.jpg);
}
#paragon h3 {
	margin:0 0 5px 0;
	padding:0;
	font-weight:900;
}
#primaryclarifier {
	position:absolute;
	left:58px;
	top:292px;
	width:245px;
	height:43px;
	z-index:1;
}
#sequential {
	position:absolute;
	left:129px;
	top:405px;
	width:314px;
	height:43px;
	z-index:2;
}
#beltpress {
	position:absolute;
	left:125px;
	top:422px;
	width:334px;
	height:23px;
	z-index:3;
}
#floccinuntreated {
	position:absolute;
	left:183px;
	top:378px;
	width:58px;
	height:23px;
	z-index:4;
}
#floccintreated {
	position:absolute;
	left:344px;
	top:380px;
	width:74px;
	height:23px;
	z-index:5;
}
#pulp {
	position:absolute;
	left:92px;
	top:151px;
	width:386px;
	height:29px;
	z-index:6;
}
#basic {
	position:absolute;
	left:178px;
	top:121px;
	width:210px;
	height:29px;
	z-index:7;
}
#external {
	position:absolute;
	left:19px;
	top:370px;
	width:170px;
	height:29px;
	z-index:8;
}
#evaporator {
	position:absolute;
	left:149px;
	top:413px;
	width:58px;
	height:23px;
	z-index:9;
}
#lox {
	position:absolute;
	left:259px;
	top:414px;
	width:74px;
	height:23px;
	z-index:10;
}
#oxygen {
	position:absolute;
	left:225px;
	top:380px;
	width:287px;
	height:48px;
	z-index:11;
}
.white {
	color:white;
}
.times {
	font-family:"Times New Roman", Times, serif;
}
/****left navigation****/
#leftNav {
	margin: 0px;
	padding: 0px;
	background:#CEE9FE;
	float:left;
	width:199px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#leftNav ul {
	margin:0;
	padding:0;
}
#leftNav li {
	margin:0;
	padding:0;
	list-style-type:none;
}
#leftNav h3, #leftNav p {
	padding:0 10px;
}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists, border color matches background */
#leftNav li {
	border-bottom: 1px solid #CEE9FE;
}
/* fix for browsers that don't need the hack */
html>body #leftNav li {
	border-bottom: none;
}
#leftNav a:link, #leftNav a:visited {
	display: block;
	/*ie6 workaround for the block level hover, set the width and ie6 will hover anywhere within that width*/
	width:190px;
	border-top: 1px solid #ffffff;
	font-weight: normal;
	color: #21536A;
	padding:3px 2px 3px 8px;
	font-size:70%;/*8/17/09 playing with a small font*/
}
#leftNav a:hover {
	background-color: #DDEEFF;
	background-image:  url("../images/header_background.jpg");
	font-weight: normal;
	text-decoration: underline;
	border-top: 1px solid #FFFFFF;
}
#leftNav ul ul li{
	padding:0 0 0 10px;
	/*adds full column width top border to nested lists*/
	border-top: 1px solid #ffffff;
}
#leftNav ul ul a:link, #leftNav ul ul a:visited {
	/*resetting the width for anchors within the nested navigation unordered list at 190px minus the 10px of left padding for the indent saves breaking the layout in IE6, be careful to also include visited links without shorthand, hover was covered by the parent list properties but I had to take out the top border cause IE6 bounced around, freaking width is only needed here for the block level hover in IE6 to work*/
	width:180px;
	font-size:72%;/*80%*/
	/*takes out the white top border in parent list's anchors to allow the nested list top border to be full width, so they don't double up to 2px*/
	border-top:none;
}
#leftNav ul ul a:hover {
	background-color: #DDEEFF;
	background-image:  url("../images/header_background.jpg");
	font-weight: normal;
	text-decoration: underline;
	border-top:none;
}

/*repeat for the third level nested menus*/
#leftNav ul ul ul li{
	padding:0 0 0 10px;
	/*adds full width top border, well, let's say at the third level it apparently doesn't, indented 10px, some sort of inheritance thing*/
	border-top: 1px solid #fff;
}
#leftNav ul ul ul a:link, #leftNav ul ul ul a:visited {
	/*resetting the width for anchors within the nested navigation unordered list at 190px minus the 10px (third level minus another 10px) of left padding for the indent saves breaking the layout in IE6, be careful to also include visited links without shorthand, hover was covered by the parent list properties but I had to take out the top border cause IE6 bounced around, freaking width is only needed here for the block level hover in IE6 to work*/
	width:170px;
	font-size:70%;/**/
}
#leftNav ul ul ul a:hover {
	background-color: #DDEEFF;
	background-image:  url("../images/header_background.jpg");
	font-weight: normal;
	text-decoration: underline;
	border-top:none;
}

#leftNav h2 {
	margin:15px 0 5px 0;
	padding:0 0 0 5px;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color: #0066FF;
}

#footer {
	margin:0;
	padding:0;
	border:none;
	clear: both;
	background: #CEE9FE;
}
#footer p {
	padding:5px;
	margin:0;
}
#outsideFooter {
	position:relative; /*trying this for the bbb seal, id bbb is inside this id*/
	font-size: 70%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align:center;
}
#outsideFooter ul {
	margin:0;
	padding:0;
	list-style:none;
}
#outsideFooter li {
	display:inline;
	margin:0;
	padding:0;
}
#outsideFooter p {
	margin:0;
	padding:5px;
	text-align:left;
}
#videobox {
	width:315px;
	height:auto;
}
a:link, a:visited, a:hover {
	color: #0066FF;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */
.center {
	text-align:center;
}
img {
	border:none;
	margin:0;
	padding:0;
	vertical-align: bottom;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.right {
	text-align:right;
}
.pad15 {
	margin:0;
	padding:15px;
}
.pad15Right {
	padding:0 15px 0 0;
}
.navHeading {
	margin-left: 4px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-bottom: 2px;
	font-size: 65%;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Arial, sans-serif;
	margin: 0px;
	padding: 0px;
}
h1 {
	font-family: "Times New Roman", Times, serif;
	color: #0294F9;
	font-size: 175%;
	background-image:  url("../images/header_background.jpg");
	padding-left: 20px;
	float: none;
	text-align: center;
}
h2 {
	font-size: 125%;
	color: #3D4993/*#006699 #015F9C*/;
	padding-left: 2px;
	padding-right: 5px;
}
h3 {
	margin:0px 25px;
	padding-left: 15px;
}
h4 {
	color: #0033CC;
	margin-top:10px;
	margin-bottom:10px;
	padding-left: 25px;
	font-family: Gulim, Verdana, "Trebuchet MS", Arial;
}
h5 {
	font-size: 100%;
	color: #0066CC;
	text-align: left;
	padding-left: 35px;
}

.heading5 {
	font-size: 100%;
	color: #0066CC;
	text-align: left;
	padding-left: 35px;
}

.black {
	color:black;
}
.subLinks {
	padding: 0px 0px 0px 10px;
	font-size: 80%;
}
.subLinks2 {
	padding: 0px 0px 0px 20px;
	font-size: 80%;
}
.skyscraper {
	font-family: "Times New Roman", Times, serif;
	color: #0294F9;
	font-size: 175%;
	background-image:  url("../images/header_background.jpg");
	padding-left: 20px;
	float: none;
	text-align: center;
}
.emphasisHeading {
	font-size: 125%;
	color: #00CC33;
	padding-left: 2px;
	text-transform: capitalize;
	padding-right: 5px;
}
ul {
	list-style-position: outside;
	bottom: 5px;
	list-style-type: circle;
}
ul ul {
	list-style-type: disc;
}
ul ul ul {
	list-style-type: none;
}
label {
	font: bold 100% Arial, sans-serif;
	color: #334d55;
}
/***********************************************/

/* Layout Divs                                 */

/***********************************************/



#masthead {
	margin: 0;
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
	background-color: #FFFFFF;
}
#navBar {
	margin: 0 79% 0 0;
	padding: 0px;
	border: 1px solid #ccc;
}
#content {
	float:right;
	width: 75%;
	margin: 0;
	padding: 0 3% 0 0;
}
/***********************************************/

/*Component Divs                               */

/***********************************************/



#siteName {
	margin: 0px;
	padding: 0px 0px 10px 10px;
}
/*************** #pageName styles **************/



#pageName {
	padding: 0px 0px 10px 10px;
}
/************* #breadCrumb styles *************/



#breadCrumb {
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}
/************** .feature styles ***************/



.feature {
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 95%;
	list-style-type: circle;
	text-align: justify;
}
.feature h2 {
	font-size: 125%;
	color: #006699;
	text-indent: -10px;
	text-transform: capitalize;
}
.feature h3 {
	padding: 30px 0px 5px 0px;
	text-align: center;
	font-size: 95%;
	text-transform: capitalize;
}
.feature img {
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */





/************** .story styles *****************/



.story {
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}
.story p {
	padding: 0px 0px 10px 0px;
}
/************* #siteInfo styles ***************/



#siteInfo {
	clear: both;
	border: 1px solid #cccccc;
	font-size: 75%;
	color: #cccccc;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)

	the bottom border of the navBar in cases where they "touch" */



#siteInfo img {
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}
/************* #search styles ***************/



#search {
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}
#search form {
	margin: 0px;
	padding: 0px;
}
#search label {
	display: block;
	margin: 0px;
	padding: 0px;
}
/*********** #navBar link styles ***********/



#navBar ul a:link, #navBar ul a:visited {
	display: block;
}
#navBar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */

#navBar li {
	border-bottom: 1px solid #EEE;
}
/* fix for browsers that don't need the hack */

html>body #navBar li {
	border-bottom: none;
}

/*********** .relatedLinks styles ***********/



.relatedLinks {
	margin: 0px;
	padding: 0px 0px 10px 10px;
	font-size: 90%;
}
.relatedLinks h3 {
	padding: 10px 0px 2px 0px;
}
/************** #advert styles **************/



#advert {
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	border-top: 1px solid #cccccc;
}
#advert img {
	display: block;
}
/************** #headlines styles **************/



#headlines {
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 80%;
}
#headlines p {
	padding: 5px 0px 5px 0px;
}
.navBorder {
	border: 2px solid #0099FF;
}
#mainTable {
	background-color: #FFFFFF;
	border: 1px solid #0099FF;
}
.footer {
	font-size: 70%;
	padding-top: 20px;
	padding-bottom: 20px;
}
.box {
	border: 2px solid #EAEAEA;
	padding: 15px;
}
/*p {
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 90%;
	list-style-type: circle;
}*/
#mainTableColors {
	background-color: #CEE9FE;
}
.smallText {
	font-size: 90%;
}
.smallerText {
	font-size: 70%;
}
.110 {
	font-size: 110%;
	color: #000000;
	margin-bottom: 10px;
	padding-left: 15px;
	font-weight: bold;
}
.hotlink {
	font-family: "Trebuchet MS", Verdana, Arial;
	font-size: 110%;
	font-weight: 300;
	text-transform: capitalize;
}
.indent10 {
	padding-left: 10px;
}
.emphasis {
	font-family: "Trebuchet MS", Verdana, Arial;
	font-size: 80%;
	font-weight: lighter;
	font-style: italic;
}
.navHeading {
	margin-left: 4px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	margin-bottom: 2px;
	font-size: 65%;
	color:red;
}
.smallTextPad {
	padding-right: 10px;
	padding-left: 10px;
	font-size: 90%;
}
.bigText {
	font-size: 200%;
}
.big150 {
	font-size:150%;
}
.big125 {
	font-size:125%;
}
.navHeading1 {
	margin-left: 4px;
	text-transform: uppercase;
	color:red;
	margin-bottom: 2px;
	margin-top: 15px;
	font: bolder 65% Arial, Helvetica, sans-serif;
}
.border1pixel {
	border: 1px solid #000000;
}
#border1px {
	border: 1px solid #000000;
}
.redbolder {
	font-weight: bolder;
	color: #FF0000;
}
.bold {
	font-size: 100%;
	color: #000000;
	margin-bottom: 10px;
	padding-left: 15px;
	font-weight: bold;
}
.bottomBorder {
	border-bottom: 2px solid #EAEAEA;
}
.leftBorder {
	border-left: 2px solid #EAEAEA;
}
.marginZero {
	margin:0;
	padding:0;
}
#downloadsTable ul{
	margin:0;
	padding:0;
	list-style: none;
}
#downloadsTable td {
	margin:20px;
	padding:7px;
	width: 33%;
	vertical-align: top;
	font-size:75%;
}
#50persenttd  td{
	margin:20px;
	padding:7px;
	width:50%;
	vertical-align:top;
}
.marginAuto {
	display: block;
    margin: auto;
}


/* Table Blue*/
table.Blue {
	margin:15px auto;
	border-spacing: 0px;
	border-collapse: collapse;
}
table.Blue th {
    text-align: center;
    font-weight: normal;
    padding: 0.1em 0.5em;
    border-bottom: 2px solid #FFFFFF;
    background: #687EAB;
    color: #FFFFFF;
}
table.Blue td {
    text-align: left;
    border-bottom: 2px solid #FFFFFF;
    padding: 0.1em 0.5em;
    background: #DBE2F1;
}

table.Blue thead th {
    background: #687EAB;
    color: #FFFFFF;
    text-align: center;
}
table.Blue th.Corner {
    text-align: left;
}
/* Table BlueLeft Left Column Header Row*/
table.BlueLeft {
    margin:auto;
	border-spacing: 0px;
    border-collapse: collapse;
}
table.BlueLeft th {
    text-align: left;
    font-weight: normal;
	color:#FFF;
    padding: 0.1em 0.5em;
    border-bottom: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
    background: #687EAB;
}
table.BlueLeft td {
    text-align: left;
    padding: 0.1em 0.5em;
    border-bottom: 2px solid #FFFFFF;
    background: #DBE2F1;
}
/* Table Plain*/
table.Plain {
	margin:auto;
    border-spacing: 0px;
    border-collapse: collapse;
}
table.Plain th {
	text-align: left;
	font-weight: 500;
	padding: 0.1em 0.5em;
	border-bottom: 2px solid #DBE2F1;
}
table.Plain td {
    text-align: left;
    border-bottom: 2px solid #DBE2F1;
    padding: 0.1em 0.5em;
}
/* Table PlainLeft*/
table.PlainLeft {
	margin:auto;
    border-spacing: 0px;
    border-collapse: collapse;
}
table.PlainLeft th {
    text-align: left;
    font-weight: normal;
    padding: 0.1em 0.5em;
    border-bottom: 2px solid #DBE2F1;
}
table.PlainLeft td {
    text-align: left;
    border-bottom: 2px solid #DBE2F1;
    padding: 0.1em 0.5em;
}
.col250 {
	width:250px;
	float:left;
}
.col250R {
	width:250px;
	float:right;
}
.col350 {
	width:350px;
	float:left;
}
.col700 {
	width:700px;
	margin:auto;
}
.bgcolor {
	background: #FFFFEC;
}
.verticalresponse {
	font-family: verdana;
	font-size: 11px;
	padding-left: 30px;
	border: none;
}
.button {
	background: #fff;
	border: 1px solid blue;	
}
.sitemap ul {
	list-style: none;	
	margin:0;
	padding:0:	
}
.sitemap ul ul{
	padding-left:20px;
}
/*.sitemap li {
	padding-left:15px;
}*/
.margintop10 {
	margin-top:10px;
}
.margin10 {
	margin:10px;
}
/*2008*/

div.leftcolumn {
	float:left;
	width:125px;
	margin-right:10px;
	padding:0;
	background:#C6FFD9;
	font-size:75%;
}
#addthis {
	position:absolute;
	left:763px;
	top:1px;
	width:125px;
	height:16px;
}
#bbb {
	position:absolute;
	left:659px;
	top:15px;
	width:75px;
	height:98px;
	background: url(../images/bbb.gif);
	z-index: 14;
}

div.subscribe {
	width:190px;
	margin:0;
	padding:0 0 0 8px;
}
div.subscribe form input {
	margin:2px 0 2px; 
	padding:2px;
	border:1px solid #999; 
	font-size:9px;
}
.green {

}
.normal strong {
	font-weight:normal;
}