/* Initialization */
body {margin: 0; padding: 0; background-image: url(../i/pageBkgd.gif); background-repeat: repeat-x; background: #f3f3f3; text-align: center; font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; color: #223;}

/* ======== PAGE LAYOUT ========= */
/* header has the top logo bar & misc. links */
#header {width: 900px; height: 40px; margin: 10px auto; margin-bottom: 0; text-align: center; background: url(../i/top-logo-900.gif) no-repeat top center;}
#header ul.widepad {padding-right: 75px;}
/* footer has the bottom bar & links for XHTML, etc. */
#footer {width: 900px; margin: 0 auto; padding: 0; text-align: center; background: url(../i/footer-900.gif) no-repeat bottom center;}
#footer ul.widepad {padding-left: 65px;}

/* main is everything else but the header and footer, and includes the drop shadow */
#main 	{width: 900px; margin: 0 auto; text-align: left; background: url(../i/mainsidebg20060118.gif) repeat-y top center;}
#main div.column {text-align: left; margin-bottom: 1em;}
#main p {margin: 0 0 .5em 0;}
#main p.last {margin: 0;}
#main p.intro {font-weight: bold;}
#main .lite {color: #79767c;}

/* home-img is the first block in main; it generally holds an image on the left, and text on the right */
#home-img {width: 750px; height: 178px; margin: 0 0 0 75px; padding: 0px; border-bottom: 2px solid #d5d5d5; background: #eee url(../i/home-img-y.jpg) no-repeat; background-position: 0% 100%; text-align: right;}
#home-img .button {margin-top: 30px; margin-right: 80px; display: inline; border: none;}
#home-img h1 {font-size: 20px; margin: 0; padding: 75px 10px 0 0; color: #1d1d1d; text-align: right;}
#home-img h1.elevated {padding: 60px 10px 0 0;}
#home-img h1.two-line {font-size: 18px; padding: 60px 10px 0 0;}
#home-img h1.elevated2line {font-size: 18px; padding: 45px 10px 0 0;}
#home-img h1.elevated3line {font-size: 16px; padding: 30px 10px 0 0;}
#home-img h2 {margin: 18px 10px 0 0; padding: 0; font-size: 14px; text-align: right; color: #1d1d1d;}
#home-img h3 {margin: 4px 10px 0 0; padding: 0;}
#home-img img {display: block; float: right;}

/* threeCol-container is the primary content area; does not include drop shadow background; can hold from 1-3 columns. */
#threeCol-container {padding: 5px 0 0 0;}
#threeCol-container h1 {font-size: 18px; color: #446BAA; margin: 0 0 9px 0; text-align: center;}

/* subcolumnN are DIVs to use when you want to break threeCol-container into columnar content; must use all of X-N */
#subcolumn1-1 {width: 880px; padding-bottom: 8px; float: left; display: inline;}
#subcolumn1-1 #innerMargins {margin-left: 100px; margin-right: 100px;}
#subcolumn1-1 #innerNoMargins {margin-left: 75px; margin-right: 75px;}
#subcolumn1-2 {width: 148px; float: left; font-size: 10px;}
#subcolumn2-2 {width: 645px; float: right; margin-right: 90px; display: inline;}
#subcolumn1-3, #subcolumn3-3 {width: 148px; float: left; font-size: 10px;}
#subcolumn2-3 {width: 570px; float: left;}
#subcolumn1-3, #subcolumn2-3 {margin-right: 15px;}

/* leftblock and rightblock are used to divide subcolumn2-2 the home page into separate content areas */
#boxblock {width: 650px; float: left;}
#leftblock {width: 290px; height: 225px; float: left; margin: 0 3px 0 3px; padding: 0px 10px 10px 10px; border: 1px solid #bababa;}
#leftblock p.c-align {padding-top: 0;}
#leftblock .img {padding-left: 20px; border: 0px;}
#leftblock a.img {border: 0px;}
#rightblock {width: 290px; height: 225px; float: right; margin: 0 3px 0 3px; padding: 0px 10px 10px 10px; border: 1px solid #bababa;}

/* Header & footer layout */
#header ul 	{ margin: 0; padding: 0 10px 0 0; border: 0; list-style-type: none; text-align: center; clear: right;}
#header ul li { display: block; float: right; padding: 13px 13px 0 0; font-size: 10px;}
#header ul li a { color: #fff; text-decoration: none; display: block; text-align: center;}
#header ul li a:hover, #header ul li a:active { color: #FFF797;}

#footer ul 	{list-style-type: none; clear: right; margin: 0; padding: 3px 0 16px 0;}
#footer ul li {color: #fff; float: left; font-size: 10px; margin-bottom: 0; margin: 0; padding: 0;}
#footer ul li a {color: #fff; text-decoration: none; display: block;}
#footer ul li a:hover, #header ul li a:active {color: #FFF797;}
#footer ul li.left {width: 110px;}
#footer ul li.center {width: 555px;}
#footer ul li.right1 {width: 55px;}
#footer ul li.right2 {width: 35px;}

/* Grey boxes to use in 1st or 3rd columns.
 * Usually used to hold secondary nav in left column, & other stuff in right.
 * Cleverly contains the box bottom graphic in the background;
 * note: IE needs an NBSP addded outside any DIVs that are nested *within* this .box in order to display the bottom graphic
 */
/* Part 1: layout & bottom */
.box {border: 0; margin: 0 0 24px 0; padding: 0 0 10px 0; background: url(../i/menubottom060110.gif) no-repeat bottom center;}
/* Part 2: layout & top graphic, & fontography for title bar of box */
.box h2 {background: url(../i/menutop060110.gif) no-repeat top center; border: 0; margin: 0; padding: 6px 8px 4px 8px; color: #000; font-size: 10px;}
/* Part 3: line under the header bar */
.box .line {background: url(../i/menuline060110.gif) no-repeat top center; border: 0; margin: 0; height: 1px; line-height: 1px; font-size: 1px;}
/* Part 4: the layout of the inside ; note: interior color is #f1f1f1 */
.box .inside {background: url(../i/menubody060110.gif) repeat-y top center; padding: 8px 10px 0px 10px; margin: 0; border: 0;}
.box .inside-narrow {background: url(../i/menubody060110.gif) repeat-y top center; padding: 6px 6px 0px 6px; margin: 0; border: 0;}
/* hack to fix Table bottom on IE */
.box p.fixer {font-size: 1px; margin: 0; padding: 0;}
.box a.inBoxLink {color: #3d6099;}
.box .inside form.login {margin-top: 0px; margin-bottom: 0px;}
.questions li {padding-top: 3px;}
.box ul.square {list-style-type: none; padding: 0; margin: 0;}
.box li.square {background: url(../i/bullet.gif) no-repeat 0 .4em; padding-left: .7em;}
.box h3 {padding-top: 0px;}

/* Boxes for use in right column for case study callouts */
#Cases h1 {font-size: 12px; margin: 0; padding: 0; color: #000; text-align: left;}
#Cases h2 {font-size: 11px; padding: 1px 1px 3px 1px; background-image: none; color: #333; text-align: left;}
#Cases h3 {font-size: 10px; font-style: italic; margin: 0 2px 4px 2px; padding: 0; color: #333; text-align: left;}
#Cases p  {font-size: 10px; padding: 0 3px 0 3px;}
div.Case {border: 1px solid #ccc; margin: 0 0 8px 0; background-color: #Fff9b1;} /* padding here controls top/left of img */
div.Case img {padding: 1px; margin: 1px 3px 3px 1px; padding: 0; border: 1px solid #333; float: left;}

/* Center column highlight boxes */
#yellowbox {background: #fff797; border: 1px solid #000; padding: 0 20px 20px 20px; margin: 40px 20px 0 20px;}

/* Primary selectors and other miscellaneous typography */
table, td {font: 10px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif; color: #000;}
h1 {font-size: 18px; color: #446BAA; margin-bottom: 9px; margin-top: 6px; padding-bottom: 0; padding-top: 6px; text-align: center;}
#subcolumn2-3 h1.question {font-size: 14px; color: #223; text-align: left;}
h2 {font-size: 14px; color: #445BAA; margin: 0; padding: 8px 0 8px 0; text-align: center;}
h3 {font-size: 12px; color: #1D1D1D; margin: 0 0 .3em 0; padding-top: 8px;}
h4 {font-size: 10px; font-weight: bold; color: #1D1D1D; margin: 0;}

#main .bolder {font-weight: bold;}
#main .c-align {text-align: center; padding-top: 8px;}
#subcolumn2-2 a, #subcolumn2-3 a {color: #3D6099; text-decoration: none;}
#subcolumn2-2 a:hover, #subcolumn2-3 a:hover {text-decoration: underline; color: #446BAA;}
#subcolumn2-3 a.nolink, #subcolumn2-3 a:hover.nolink {text-decoration: none; color: #223;}

img.left {float: left; margin: 2px 10px 5px 0; border: 0;}
img.right {float: right; margin: 2px 0 5px 10px; border: 0;}
img.across {margin: 0 0 10px 0; border: 0;}

ul {list-style: outside; margin: 0 0 .5em 2em; padding: 0;}
ul.square {list-style: square ; margin: 0 0 .5em 2em; padding: 0;}
ul.circle {list-style: circle; margin: 0 0 .5em 2em; padding: 0;}
ul.gear {list-style-image:url(../i/gearBullet.gif); margin: 0 0 0 1em; padding: 0 0 1em 0.5em;}
ol {list-style: decimal outside; margin: 0 0 0 2.8em; padding: 0 0 1em 0;}
li {margin-bottom: .25em;}
li.extra {margin-bottom: .75em;}

/* items for callout / nav boxes */
.box a:link, .box a:visited {text-decoration: none; color: #000; font-weight: bold; text-decoration: none;}
.box a:hover {text-decoration: underline; color: #446BAA;}
.box ul {list-style: none outside; margin: 0; padding: 0 0 1em 0;}
.box li {padding-bottom: .2em; margin-bottom: 0;}
.box li.last {padding: 0;}
.box .bluelinks a:link, .box .bluelinks a:visited {text-decoration: none; color: #3D6099; font-weight: bold;}
.box .bluelinks a:hover {text-decoration: underline; color: #3D6099;}
#casenav a:link, #casenav a:visited {text-decoration: none; color: #000; font-weight: bold; text-decoration: none;}
#casenav a:hover {text-decoration: underline; color: #446BAA;}

.column-interstitial {text-align: center; font-weight: bold;}
.red-highlight {background-color: #F00; color: #fff; font-weight: bold;}
.yellow-highlight {background-color: #ff0; font-weight: bold;}
.green-highlight {background-color: #0C0; font-weight: bold;}
.soft-highlight {background-color: #fff9b1; color: #1d1d1d;}
.blue-text {color: #446BAA; }
.error-msg {padding: 12px 0 0 0; color: #069;}
.vertical-td {vertical-align: top;}

#threeCol-container .leftText {text-align: left;}


img.left {float: left; margin: 2px 10px 5px 0; border: 0;}
img.right {float: right; margin: 2px 0 5px 10px; border: 0;}

div.clearer {clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px;}