﻿/* 1em = 10px, 0.5em = 5px, 0.1em = 1px */
body { background-color: #E1E1E1; color: #4C4C4C; font: 62.5%/1.5 Helvetica, Arial, sans-serif; margin: auto; min-width: 960px; width: 96em;}
#body { }

/* ==== Header ==== */
#header { }
#header #skip { display: none;}

/* ---- Logo ---- */
#header #logo { margin: 4em 0 0; position: absolute; z-index: 100;}

/* ---- Search Box ---- */
#header #search { border: 1px solid #DFDFDF; color: #C8C8C8; float: right; margin: 0.9em 1.6em 0.7em 1.2em; width: 16.8em;}
#header #search form fieldset { border: 0; margin: 0; padding: 0;}
#header #search form #searchfor { border: 0; font-size: 1.3em; width: 11.2em; vertical-align: middle;}
#header #search form #searchbutton { background-color: #fff; border: 0; font-size: 1.2em; vertical-align: middle;}

/* Global Nav */
#header #global { background-color: #fff; box-shadow: 0 0 0.3em #999; -moz-box-shadow: 0 0 0.3em #999; -webkit-box-shadow: 0 0 0.3em #999; color: #c8c8c8; font-size: 1.1em; text-align: right; padding: 0.8em 1em 3em; z-index: 2;}
#header #global a { color: #DFDFDF; text-decoration: none;}
#header #global span { padding: 0 0.7em;}

/* ---- Main Navigation ---- */
#header #nav { background-color: #fff; border-bottom: 2px solid #999; border-radius: 0 0 0.6em 0.6em; -moz-border-radius: 0 0 0.6em 0.6em; -webkit-border-radius: 0 0 0.6em 0.6em; box-shadow: 0 0.2em 0.3em #999; -moz-box-shadow: 0 0.2em 0.3em #999; -webkit-box-shadow: 0 0.2em 0.3em #999; clear: right; margin-bottom: 0.5em; padding: 0.5em 0; z-index: 99;}
#header #nav ul { list-style: none; overflow: hidden; width: 100%;}
#header #nav li { float: left;}
#header #nav li a { border-bottom: 5px solid #fff; color: #666; display: block; font-size: 1.5em; padding: 0.1em 0; text-decoration: none;}
#header #nav li:hover a { border-bottom: 5px solid #777;}

#header #nav li ul { border-top: 0.5em solid #fff; display: none; position: absolute; width: 23em; z-index: 100;}
#header #nav li:hover ul { display: block;}
#header #nav li ul li { float: none;}
#header #nav li ul li a { background-color: #F0F0F0; font-size: 1.3em; margin: 0; padding: 1em 1.2em;}
#header #nav li:hover ul li a { border-bottom: 1px solid #fff;}
#header #nav li ul li a:hover { background-color: #e6e6e6; color: #777;}

/* ---- Breadcrumb bar ---- */
#header #location { background-color: #fff; color: #606060; border-radius: 0.6em 0.6em 0 0; -moz-border-radius: 0.6em 0.6em 0 0; -webkit-border-radius: 0.6em 0.6em 0 0; clear: both; font-weight: 600; margin-top: 1em; overflow: hidden; width: 100%;}
#header #location a { text-decoration: none;}
#header #location span { padding: 0 1em;}
#header #location #breadcrumbs { float: left; font-size: 1.1em; padding: 1.4em 1.9em;}
#header #location #sharing { float: right; font-size: 1.1em; padding: 1.4em 1.9em;}

/* ==== Midder ==== */
#midder { background-color: #fff; overflow: hidden; width: 100%;}

/* ---- Left Nav ---- */
#midder #leftnav { float: left; width: 20%;}
#midder #leftnav ul { list-style: none;}
/* First Level */
#midder #leftnav ul li { padding: 0.7em 0;}
#midder #leftnav ul li a, #midder #leftnav ul li strong { color: #4C4C4C; display: block; font-size: 1.15em; font-weight: bold; margin-right: 0.5em; padding-left: 2.9em; text-decoration: none;}
#midder #leftnav ul li a:hover { text-decoration: underline;}
/* Second Level */
#midder #leftnav ul ul { margin-left: 2em;}
#midder #leftnav ul ul li { padding: 0.15em 0;}
#midder #leftnav ul ul li a { font-weight: normal; padding-left: 1.95em;}
#midder #leftnav ul ul li a:hover { background-position: 5px -97px;}
/* Third Level */
#midder #leftnav ul ul ul { }
#midder #leftnav ul ul ul li a { font-size: 1.1em; padding-left: 1.6em;}

/* ---- Main Content ---- */
#content { border-left: 1px solid #C5C5C5; float: left; overflow: hidden; width: 78%;}

/* Colored Boxes on the Right */
#content div.box { background-color: #FF7800; border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; clear: right; color: #fff; float: right; margin: 1em 0.3em 1em 1em; position: relative; width: 31.8%;}
#content div.box h1 { color: #fff; font-size: 1.5em; font-weight: 600; margin: 0.6em;}
#content div.box h2 { color: #fff; font-size: 1.3em; margin: 0.5em;}
#content div.box a { color: #fff;}
#content div.box address { margin: 0.4em 0;}
#content div.box ul { margin: 1em 0 !important;}
#content div.box ul li { background-position: 0 -696px; margin-left: 1em;}
#content div.box p { clear: both;}

/* Headings */
#content h1 { color: #4B4B4B; font-size: 2.2em; font-weight: 500; line-height: 1.2em; margin: 0.55em;}
#content h1 a { color: #4B4B4B;}
#content h2 { color: #4B4B4B; font-size: 1.8em; font-weight: 500; margin: 0.6em 0.7em;}
#content h3 { font-size: 1.4em; font-weight: 600; margin: 0.4em 0.9em;}
#content h4 { color: #0056C4; font-size: 1.1em; font-weight: bold; margin: 0.35em 1em;}

/* Paragraphs */
#content p { font-size: 1.2em; line-height: 1.35; margin: 0.45em 1em;}
#content p.small, #content span.small { color: #969696; font-size: 1.1em;}

/* Lists Ordered, Unordered, and Definition */
#content ol, #content ul { margin: 1em 0;}
#content ol li, #content ul li { font-size: 1.25em; }
#content ol li { margin: 0.3em 0.95em 0.3em 2.5em;}
#content ul li { list-style-type: none; background: url(/images/icons/icons.gif) no-repeat 0 -1896px; margin: 0.3em 0.95em; padding-left: 1.3em;}

#content ol ol, #content ul ul { margin: 0em;}
#content ol ol li, #content ul ul li { font-size: 1em;}
#content ol ol li { list-style-type: lower-alpha; margin-left: 2em;}
#content ul ul li { background-position: 0 -1797px; margin-left: 0;}

#content ul.tabs { margin: 0; overflow: hidden; width: 100%;}
#content ul.tabs li { float: left;}

#content ul li.deleted { background-position: 0 -1597px;}
#content ul li.doc { background-position: 0 -997px;}
#content ul li.img { background-position: 0 -896px;}
#content ul li.lock { background-position: 0 -1696px;}
#content ul li.pdf { background-position: 0 -1497px !important;}
#content ul li.phone { background-position: 0 -797px !important;}
#content ul li.ppt { background-position: 0 -1197px;}
#content ul li.vsd { background-position: 0 -1297px;}
#content ul li.xls { background-position: 0 -1097px;}
#content ul li.zip { background-position: 0 -1397px;}

#content dl { margin: 1.2em 0;}
#content dl dt { font-size: 1.4em; font-weight: 600; margin: 0.4em 0 0 0.9em;}
#content dl dd p { margin-top: 0;}

#content dl.aligned { margin: 0.5em 1em; overflow: hidden; width: 97%;}
#content dl.aligned dt { clear: both; display: block; float: left; font-size: 1.2em; margin: 0.4em 0; text-align: right;}
#content dl.aligned dd { display: block; float: right; margin: 0.38em 0; text-align: left;}
#content dl.aligned dd p { margin: 0;}

/* Miscellaneous */
#content address { font-size: 1.2em; margin: 0.5em 1em;}
#content blockquote { font-size: 1.2em; margin: 0.95em 0 0.95em 0.95em;}
#content hr { background-color: #969696; border: 0; clear: both; color: #979DA5; height: 1px; margin: 0.3em 0 0.3em 1em; padding: 0;}
#content img { }
#content li address { font-size: 1em;}
#content cite { margin: 1em;}

/* Forms */
#content form { margin: 1em;}
#content form fieldset { border: 1px solid #777; padding: 0 0.5em;}
#content form fieldset legend { color: #0056C4; font-size: 1.1em; font-weight: bold;}
#content form fieldset div { background: #EFEFEF; margin: 0.5em 0; overflow: hidden; width: 100%;}
#content form fieldset div.required { background: url(/images/icons/star_orange.png) #E0E0E0 0.5em 0.7em no-repeat;}
#content form fieldset div label { display: block; float: left; font-size: 1.1em; margin-left: 1em; padding: 0.5em 0.5em 0.5em 0em; text-align: right; width: 25%;}
#content form fieldset div input.text { border: 1px solid #777777; margin: 0.35em 0em; width: 40%;}
#content form fieldset div input.file { border: 1px solid #777777; margin: 0.35em 0.5em; width: 40%;}
#content form fieldset div input.image { margin: 0.35em 0em;}
#content form fieldset div select { margin: 0.35em 0em; width: 40%;}
#content form fieldset select optgroup { background-color: #CFCFCF; font-style: normal; text-align: center;}
#content form fieldset select optgroup option { background-color: white; padding: 0.05em 0.35em; text-align: left;}
#content form fieldset div fieldset { border: 0; margin: 0; padding: 0;}
#content form fieldset div fieldset legend { color: black; font-weight: normal; padding: 0.3em 0 0 2em;}
#content form fieldset div fieldset label { float: none; margin: 0.5em 0; padding: 0; text-align: left; overflow: hidden; width: 100%;}
#content form fieldset div fieldset label input { display: block; float: left; height: 13px; margin: 0.25em 0.3em 0.25em 24%; vertical-align: middle;}
#content form fieldset div textarea { border: 1px solid #777777; margin: 0.35em 0em; width: 65%;}
#content form fieldset div small { display: block; font-size: 0.95em; margin-left: 30%; margin-bottom: 0.35em;}
#content form fieldset#submit { border: 0; margin-top: 1em;}

/* Tables */
#content table { margin: 1em; width: 98%;}
#content table caption { caption-side: bottom; font-size: 0.95em; font-style: oblique;}
#content table th, #content table td { font-size: 1.1em; padding: 0.5em; text-align: left;}
#content table tbody tr td { vertical-align: top;}
#content table tbody tr td img { margin: 0;}
#content table tbody tr td input { }
#content table tbody tr td textarea { width: 95%;}
#content table tbody tr td ul { margin: 0;}
#content table tbody tr td ul li { font-size: 1em;}
#content table tfoot tr { background: #c8c8c8;}

#content table.light, #content table.light td, #content table.light th { border: 1px solid #0056C4;}
#content table.light thead tr, #content table.light thead tr a { background-color: #71A7D9; color: white;}

#content table.dark, #content table.dark td, #content table.dark th { border: 1px solid #91A5b6;}
#content table.dark thead tr th, #content table.dark thead tr th a { background-color: #0056C4; color: white;}

#content table.gray, #content table.gray td, #content table.gray th { border: 1px solid #777;}
#content table.gray thead tr, #content table.gray thead tr a { background-color: #999; color: white;}

/* Div Floats/Columns */
#content div.left { float: left; margin: 1.2em;}
#content div.right { float: right !important; margin: 1.2em;}
#content div.left span, #content div.right span { background: #EFEFEF; display: block; text-align: center;}

#content div.twoColumn { float: left; overflow: hidden; width: 49.99%;}
#content fieldset div.twoColumn div label { width: 40%;}
#content div.twoColumn fieldset div input.text { width: 59%;}
#content div.twoColumn fieldset div input.file { clear: both; width: 95%;}
#content div.twoColumn fieldset div select { width: 59%;}
#content div.twoColumn fieldset div small { margin-left: 38%;}
#content div.twoColumn table { width: 96.8%;}
#content div.twoColumn.dark, #content div.twoColumn.light, #content div.twoColumn.gray { width: 48.4%;}

#content div.threeColumn { float: left; overflow: hidden; width: 33.3%;}
#content div.threeColumn.dark, #content div.threeColumn.light, #content div.threeColumn.gray { width: 31.7% !important;}
#content div.threeColumn table { width: 95.18%;}

#content div.fourColumn { float: left; overflow: hidden; width: 25%;}
#content div.fourColumn.dark, #content div.fourColumn.light, #content div.fourColumn.gray { width: 17%;}

#content div.fiveColumn { float: left; overflow: hidden; width: 19.99%;}
#content div.fiveColumn.dark, #content div.fiveColumn.light, #content div.fiveColumn.gray { width: 17%;}

#content div.twoThirdsColumn { float: left; overflow: hidden; width: 65.1%;}
#content div.twoThirdsColumn fieldset div input.text { width: 59%;}
#content div.twoThirdsColumn fieldset div select { width: 59%;}
#content div.twoThirdsColumn fieldset div small { margin-left: 32%;}
#content div.twoThirdsColumn table { width: 97.5%;}

#content div.threeColumn h3 { background-color: #777; color: white; margin: 0 0 0 0.85em; padding: 0.45em 0.76em;}

#content div.dark, #content div.gray, #content div.light { background-color: #E6E6E6; border: 1px solid #C5C5C5; border-radius: 0.5em; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; margin-left: 1em;}
#content div.dark h1, #content div.gray h1, #content div.light h1 { color: #4C4C4C; margin: 0; padding: 0.27em;}
#content div.dark h2 , #content div.gray h2, #content div.light h2 { font-weight: 500; color: #4C4C4C; margin: 0; padding: 0.3em 0.7em;}
#content div.dark ul, #content div.gray ul, #content div.light ul { margin: 0; padding: 0.5em 0;}
#content div.dark li, #content div.gray li, #content div.light li { background-position: 0 -1896px;}
#content div.dark a, #content div.gray a, #content div.light a { }

/* Product Details, on each product page, at least once we redesign */
#content #productDetails { background-color: #CECECE; border-top: 1px solid #CECECE; clear: both; overflow: hidden; width: 100%;}
#content #productDetails div.twoThirdsColumn { background-color: white; overflow: hidden; padding-right: 1em; width: 66.6%;}
#content #productDetails #downloads { background-color: #CECECE; float: right; margin: 0; width: 31.7%;}
#content #productDetails #downloads h2 { background-color: #979DA5; color: #fff; padding: 0.48em 0 0.48em 0.48em; margin: 0;}
#content #productDetails #downloads p { margin: 0.95em;}
#content #productDetails #downloads ul li { background-position: 0 -696px;}

/* ==== Footer ==== */
#footer { border-top: 1px solid #C5C5C5; overflow: hidden; width: 100%;}
#footer a { color: #4C4C4C; text-decoration: none;}
#footer a:hover { color: #FF5A00; text-decoration: underline;}
#footer #fat { background-color: #fff; border-radius: 0 0 0.6em 0.6em; -moz-border-radius: 0 0 0.6em 0.6em; -webkit-border-radius: 0 0 0.6em 0.6em; overflow: hidden; width: 100%;}
#footer #fat div.sixColumn { float: left; margin: 0.5em 0; width: 16.5%;}
#footer #fat div.sixColumn h3 { font-size: 1.1em; margin: 0.5em 2.5em;}
#footer #fat div.sixColumn ul { margin: 0.5em 0;}
#footer #fat div.sixColumn ul li { list-style-type: none; margin-left: 2.8em;}
#footer #disclaimer { float: left; margin: 1em 2em;}
#footer #copyright {  margin: 1em 2em; text-align: right;}
