/* -----------------------------------------------------------------------

   Blueprint CSS Framework 0.7.1
   http://blueprintcss.googlecode.com

   * Copyright (c) 2007-2008. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img,
q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align:baseline;
}
body {
	line-height:1.5;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table, td, th {
	vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: none;
}

/* typography.css */
body {
	font-size: 75%;
	color:#222; 
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.splash { background: #fff; }
body.s-ag { background: #000 url('../img/body-bg-ag.gif') 0 0 repeat-x; }
body.s-pe { background: #000 url('../img/body-bg-pe.gif') 0 0 repeat-x; }
body.s-wo { background: #000 url('../img/body-bg-wo.gif') 0 0 repeat-x; }
body.s-na { background: #000 url('../img/body-bg-wo.gif') 0 0 repeat-x; }

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	color: #111;
}
h1 {
	text-indent: -9999px;
	background: url('../img/westeel-logo.png') 0 25% no-repeat;
	width: 215px;
	height: 90px;
}
h1 a {
	display: block;
	height: 60px;
	overflow: hidden;
	width: 215px;
}
.s-pe h1 {
	text-indent: -9999px;
	background: url('../img/westeel-petroleum-logo.png') 0 25% no-repeat;
	width: 176px;
	height: 90px;
}
.s-pe h1 a {
	width: 176px;
}
h1 a:hover {
	background: none !important;
}
h2 {
	font-size: 2em;
	margin-bottom: 0.75em;
}
h3 {
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
}
h4 {
	font-size: 1.2em;
	line-height: 1.25;
	margin-bottom: 0.25em;
}
h5 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom:1.5em;
}
h6 {
	font-size: 1em;
	font-weight: bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
p { 
	margin: 0 0 1.5em;
}
p img {
	float: left;
	margin: 0 1.5em 1.5em 0;
	padding:0;
}
p img.right {
	float: right;
	margin:1.5em 0 1.5em 1.5em;
}
a:focus, a:hover {
	color:#000;
}
a { color: #033955;
	text-decoration: underline;
}
blockquote {
	margin: 1.5em;
	color: #666;
	font-style: italic;
}
strong {
	font-weight: bold;
}
em, dfn {
	font-style: italic;
}
dfn {
	font-weight: bold;
}
sup, sub {
	line-height: 0;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
}
address {
	margin: 0 0 1.5em;
	font-style: italic;
}
del {
	color: #666;
	}
pre, code {
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt {
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
}
li ul, li ol {
	margin: 0 1.5em;
}
ul, ol {
	margin: 0 1.5em 1.5em 1.5em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
dl {
	margin: 0 0 1.5em 0;
}
dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.5em;
}
table {
	margin-bottom: 1.4em;
	width: 100%;
}
th {
	color: #fff;
	font-weight: bold;
	background: #033955;
}
th a {
	color: #fff;
	text-decoration: none;
}
th a:hover {
	color: #fff;
	text-decoration: underline;
}
th, td {
	font-size: .9em;
	padding: 4px 2px 4px 3px;
	border-bottom: 1px solid #eee;
}
tr.even td {
	background: #eee;
}
tfoot {
	font-style: italic;
}
td.part_num {
	white-space: nowrap;
}
caption {
	padding: 1em;
	background: #fff;
}
col {
	border-right: 1px solid #eee;
}
col#fax-col {
	border: none;
}
.small {
	font-size: .8em;
	margin-bottom: 1.875em;
	line-height: 1.875em;
}
.large {
	font-size: 1.2em;
	line-height: 2.5em;
	margin-bottom: 1.25em;
}
.hide {
	display: none;
}
.quiet {
	color: #666;
}
.loud {
	color: #000;
}
.highlight {
	background: #ff0;
}
.added { 
	background: #060;
	color: #fff;
}
.removed {
	background: #900;
	color: #fff;
}
.first {
	margin-left: 0;
	padding-left: 0;
}
.last {
	margin-right: 0;
	padding-right: 0;
}
.top {
	margin-top: 0;
	padding-top: 0;
}
.bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* grid.css */
/* == STRUCTURE: ========================
    * Page width:            750 px
    * Number of columns:     19
    * Column width:          30 px
    * Margin width:          10 px
   ======================================

   By default, the grid is 750px wide, with 19 columns 
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, use this formula to calculate
   the new total width: 

   Total width = (number_of_columns * column_width) - margin_width

   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
}
.wrap {
	width: 950px;
	margin: 0 auto;
}
body {
	margin: 0.5em 0;
}
/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, 
div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {
	float: left;
	margin-right: 10px;
}
div.last {
	margin-right: 0;
}
/* Use these classes to set the width of a column. */
.span-1  { width: 30px;}
.span-2  { width: 70px;}
.span-3  { width: 110px;}
.span-4  { width: 150px;}
.span-5  { width: 190px;}
.span-6  { width: 230px;}
.span-7  { width: 270px;}
.span-8  { width: 310px;}
.span-9  { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 710px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24, div.span-24 { width: 950px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}



/* Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:28px;
  margin-right:25px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}
.pull-5 { margin-left: -200px;}
.pull-6 { margin-left: -240px;}
.pull-7 { margin-left: -280px;}
.pull-8 { margin-left: -320px;}
.pull-9 { margin-left: -360px;}
.pull-10 { margin-left: -400px;}
.pull-11 { margin-left: -440px;}
.pull-12 { margin-left: -480px;}
.pull-13 { margin-left: -520px;}
.pull-14 { margin-left: -560px;}
.pull-15 { margin-left: -600px;}
.pull-16 { margin-left: -640px;}
.pull-17 { margin-left: -680px;}
.pull-18 { margin-left: -720px;}
.pull-19 { margin-left: -760px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19 {float:left;position:relative;}


.push-1 { margin: 0 -40px 1.5em 40px;}
.push-2 { margin: 0 -80px 1.5em 80px;}
.push-3 { margin: 0 -120px 1.5em 120px;}
.push-4 { margin: 0 -160px 1.5em 160px;}
.push-5 { margin: 0 -200px 1.5em 200px;}
.push-6 { margin: 0 -240px 1.5em 240px;}
.push-7 { margin: 0 -280px 1.5em 280px;}
.push-8 { margin: 0 -320px 1.5em 320px;}
.push-9 { margin: 0 -360px 1.5em 360px;}
.push-10 { margin: 0 -400px 1.5em 400px;}
.push-11 { margin: 0 -440px 1.5em 440px;}
.push-12 { margin: 0 -480px 1.5em 480px;}
.push-13 { margin: 0 -520px 1.5em 520px;}
.push-14 { margin: 0 -560px 1.5em 560px;}
.push-15 { margin: 0 -600px 1.5em 600px;}
.push-16 { margin: 0 -640px 1.5em 640px;}
.push-17 { margin: 0 -680px 1.5em 680px;}
.push-18 { margin: 0 -720px 1.5em 720px;}
.push-19 { margin: 0 -760px 1.5em 760px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19 {float:right;position:relative;}



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eeeeee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 1em 0;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }


/* forms.css */
label { font-weight:bold; }
fieldset {padding:1.1em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width: 150px; padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

/* SPLASH PAGE */
.splash .container {
	width: 550px;
	margin: 0 auto;
}
.splash h1 {
	text-indent: -9999px;
	background: url('../img/westeel-logo.png') 0 0 no-repeat;
	width: 215px;
	height: 52px;
}
.splash #c-branding {
	background: url('../img/splash/grain-bins-petroleum-tanks.jpg') 100% 0 no-repeat;
	margin: 20px 0 10px 0;
}
.splash ul {
	margin: 0;
	padding: 0;
}
.splash li {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}

/* NAVGATION */
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
#nav ul {
	z-index: 1000;
}
#nav {
	float: left;
	width: 100%;
	font-size: 0.9em;
}

div.ag #nav { background: #033955; }
div.pe #nav { background: #265503; }
div.wo #nav { background: #4f4f4f; }

#nav a {
	display: block;
	width: 12em;
	color: #fff;
	text-decoration: none;
}
#nav li ul li a:hover {
	text-decoration: underline;
}
#nav a em {
	text-transform: none;
	display: block;
	color: #999;
	font-style: normal;
}
#nav li { /* all list items */
	background: url('../img/nav-divider.png') 0 100% no-repeat;
	text-transform: uppercase;
	float: left;
	padding: 0.75em 0 0.5em 1em;
	width: 12em; /* width needed or else Opera goes nuts */
}
#nav li:hover, #nav li.active {
	background: url('../img/nav-hover.png') 0 100% repeat-x;	
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #999;
	margin-top: 0.5em;
	padding: 1em;
	width: 12em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul li {
	background: none;
	text-transform: none;
	padding: 0.25em 0;
	border-bottom: 1px dotted #ccc;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	margin-left: -1em;
	left: auto;
}

/* Slider Navigation */
#slider {
  	width: 700px;
  	margin: 10px 0 0 0;
  	position: relative;
}

.scroll {
  	height: 1000px;
	width: 700px;
  	overflow: hidden; /* was auto */
  	position: relative;
  	clear: left;
 	border-top: 1px solid #999;
}

.scrollContainer div.panel {
  padding: 20px;
  height: 760px;
  width: 660px;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
	z-index: 0;
}

ul.navigation li {
/*	display: inline; */
	float: left;
    margin-right: 2px;
    padding: 10px;
	border: 1px solid #ccc;
	border-bottom: none;
}

ul.navigation a {
    color: #000;
    text-decoration: none;
}

ul.navigation a:hover {
    background-color: #333;
	color: #fff;
}

ul.navigation a.selected {
/*    background-color: #f5f5f5; */
/*	border: 1px solid #999; */
	border-bottom: none;
	font-weight: bold;
}

ul.navigation a:focus {
    outline: none;
}

ul#nav-products {
	list-style: none;
	margin: 0;
	padding: 20px 10px;
	background: #cdd7dd;
}
ul#nav-products li {
	border-top: 1px solid #90a7b4;
	padding: 0;
	margin: 0;
	list-style: none;
	font-weight: bold;
}
ul#nav-products li a {
	padding: 0.25em 1em;
	display: block;
	text-decoration: none;
	background: #b3c3cc url("../img/bullet-01.gif") 0.25em 50% no-repeat;
}
ul#nav-products li ul {
	margin: 0;
	padding: 0 0 0 0.25em;
}
ul#nav-products li ul li {
	border-top: 1px solid #bbc9d1;
	border-bottom: none;
	padding: 0 0;
	font-weight: normal;
}
ul#nav-products li ul li a {
	background: url("../img/bullet-02.gif") 0.25em 50% no-repeat;
	padding: 0.15em 0 0.15em 1em;
	text-decoration: none;	
}

/* Structure */
#c-global {
	background: #000;
}
#c-global ul, #c-global li {
	float: right;
	list-style: none;
	margin: 0;
	padding: 0;
}
#c-global li {
	background: #333;
	list-style: none;
	margin: 0 0.5em 0 0;
	padding: 0;
}
#c-global li.active {
	background: #fff;
	font-weight: bold;
}
#c-global a {
	padding: 0.15em 0.5em;
	display: block;
	color: #aaa;
	text-decoration: none;
}
#c-global li.active a {
	color: #000;
}
#c-branding {
	clear: right;
	background: #fff url('../img/header-bg.gif') 50% 100% no-repeat;
}
#c-branding .wrap {
	position: relative;
	height: 90px;
}
#c-branding ul {
	margin: 0;
	padding: 0;
}
#c-branding li {
	float: left;
	background: #fff;
	border: 1px solid #ccc;
	border-bottom: none;
	list-style: none;
	margin: 0 0.5em 0 0;
	padding: 0;
}
#c-branding a {
	padding: 0.15em 1em;
	color: #666;
	text-decoration: none;
	display: block;
}
#c-branding a:hover {
	color: #000;
}
#c-branding select {
	position: absolute;
	right: 0;
	top: 20px;
}
#c-branding #n-division {
	position: absolute;
	left: 0;
	bottom: 0;
}
#c-branding li.active a { color: #fff; }
#c-branding li.active { background: #999;}
#n-division li.n-agricultural.active { background: #033955;}
#n-division li.n-petroleum.active { background: #265503;}
#c-branding #n-corporate {
	position: absolute;
	right: 0;
	bottom: 0;
}
#c-nav {
/*	background: #265503; */
}
#c-content {
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #ccc;
	clear: both;
	background: #fff;
}
#c-siteinfo {
	border-top: 1px solid #ccc;
	padding: 1em 0;
	color: #ccc;
	text-align: center;
}
#c-siteinfo a {
	color: #666;
}
/* Image Replacement */
h2.h-complete-storage {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background: url("../img/h-complete-storage.png") no-repeat;
	width: 290px;
	height: 70px;
}
h2.h-complete-storage-fr {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background: url("../img/h-complete-storage-fr.png") no-repeat;
	width: 359px;
	height: 70px;
}

/* Edit-in-place styles */
div.editable, #editform {
	padding: 20px 0px;
	border: 1px dashed #d00013;
	border-right: none;
	border-left: none;
}
div.editing textarea {
	width: 100%;
	height: 300px;
	background: #f3d8db;
}
li.n-logout {
	background: #d00013 !important;
}
li.n-logout a {
	color: #fff !important;
}
.editme {
	background: #f3d8db;
	padding: 0.25em;
}
.notes {
	font-style: italic;
	color: #999;
}
textarea.specs {
	background: #f3d8db;
	height: 4em;
	width: 8em;
	padding: 0.25em;
}
input.specs {
	width: 4em;
	background: #f3d8db;
}
#gauge-chart fieldset {
	border: none;
	border-top: 1px solid #ccc;
}
.gauge-chart-results {
	float: left;
	width: 200px ;
	margin-right: 20px;
}
.gauge-chart-results td.depth, .gauge-chart-results th.depth {
	padding-left: 10px;
	text-align: left;	
}
.gauge-chart-results td.volume, .gauge-chart-results th.volume {
	padding-right: 10px;
	text-align: right;
}