/*** GENERAL STYLES ***/

body {background: #000 url(../images/ui/bkg.png); text-align: center; margin: 0; padding: 0;}
body, th, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: arial, helvetica, sans-serif; font-size: 12px; color: #333;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 20px;}
form, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

img, table, fieldset {border: 0;}
ul, ul li {list-style: none; margin: 0; padding: 0;}
p {margin: 0 0 1.7em 0;}
a {color: #003366; font-weight: bold; font-style: italic;}

a.noline {text-decoration: none;}
a.noline:hover {text-decoration: underline;}
a.arrowlink {padding-left: 25px; background: url(../images/ui/arrowlink.png) 0 3px no-repeat; text-decoration: none;}
a.arrowlink.blue {background-image: url(../images/ui/arrowlink-blue.png); color: #003366;}
a.arrowlink:hover {text-decoration: underline;}
a.downloadlink {padding-left: 20px; background: url(../images/ui/downloadlink.gif) 0 0 no-repeat; text-decoration: none;}
a.downloadlink:hover {text-decoration: underline;}

.blue {color: #003366;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.upper {text-transform: uppercase;}
.xsmall {font-size: 10px;}
.small {font-size: 11px; line-height: 15px;}
.medium {font-size: 12px;}
.large {font-size: 13px;}
.xlarge {font-size: 14px;}

.floatleft {float: left;}
.floatright {float: right;}
.floatnone {float: none;}
.imgleft {float: left; margin: 0 15px 10px 0;}
.imgright {float: right; margin: 0 0 10px 15px;}
.imgborder {border: 1px solid #ccc; padding: 5px;}
.textleft {text-align: left;}
.textcenter {text-align: center;}
.textright {text-align: right;}

blockquote {color: #003366; font-size: 11px; line-height: 17px; margin: 0 0 1.7em;}
blockquote p {margin-bottom: 1em;}
blockquote cite {display: block; font-size: 10px; color: #666; font-style: normal;}
blockquote.quoteright {float: right; width: 225px; margin: 0 0 1.7em 50px;}

.spacer {float: none; clear: both; height: 1px; overflow: hidden;}
.hr {float: none; clear: both; height: 1px; overflow: hidden; background: #ccc; margin: 2em 0;}
.clear {float: none; clear: both;}
.overflowhidden {overflow: hidden;}
.nowrap {white-space: nowrap;}

.half {width: 50%;}
.third {width: 33%;}
.twothird {width: 60%;}
.quarter {width: 25%;}
.threequarter {width: 70%;}

#outer {position: relative; width: 870px; margin: 0 auto; text-align: left;}


/*** HEADER STYLES ***/

#header {position: relative; height: 90px; z-index: 3;}
#logo {position: absolute; left: -5px; top: 15px;}
#tagline {position: absolute; right: 317px; top: 25px;}
#phonenumber {position: absolute; right: 208px; top: 22px;}

#searchform {position: absolute; right: 0; top: 20px; width: 190px; height: 20px; background: #ccc url(../images/ui/formfield-gray.gif);}
#searchtext {position: absolute; left: 5px; top: 2px; width: 150px; border: 0; margin: 0; background: transparent; font-size: 10px; font-weight: bold; font-style: italic; text-transform: uppercase; line-height: 18px;}
#searchsubmit {position: absolute; right: 0; top: 0;}

#downloadlink {position: absolute; right: 8px; top: 90px; font-size: 10px; text-transform: uppercase; line-height: 12px; text-decoration: none;}
#downloadlink a {text-decoration: none !important;}


/*** TOP NAV STYLES ***/

#nav {position: absolute; right: 0; top: 62px; font-size: 10px; text-transform: uppercase; line-height: 12px; z-index: 4;}
#nav li {position: relative; float: left; border-left: 1px solid #003366; padding: 0 3px;}
#nav li:first-child {border: 0;}
#nav a {position: relative; display: block; color: #003366; text-decoration: none; padding: 1px 4px; font-style: normal;}
#nav li:hover a, #nav > li > a.on {color: #FFFFFF; background: #999; padding: 3px 4px; margin: -2px 0;}

#nav li:hover ul {display: block;}
#nav ul {display: none; position: absolute; left: -9px; top: 16px; width: 150px; background: #999 url(../images/ui/subnav.png) -4px -5px no-repeat; padding: 12px 0;
	box-shadow: 			1px 3px 3px rgba(0,0,0,.5);
	-moz-box-shadow: 		1px 3px 3px rgba(0,0,0,.5);
	-op-box-shadow: 		1px 3px 3px rgba(0,0,0,.5);
	-webkit-box-shadow: 	1px 3px 3px rgba(0,0,0,.5);
}
#nav ul li {float: none; border: 0; padding: 0;}
#nav ul a {padding: 4px 10px !important; margin: 0 !important; background: none; text-transform: uppercase; font-style: italic;}
#nav ul a:hover {background: #003366;}


/*** BANNER STYLES ***/

#banner {position: relative; width: 405px; height: 100px; padding: 28px 320px 8px 145px; background: url(../images/ui/banner.png); color: #fff; font-size: 14px;}
#banner h1 {margin-bottom: 20px; font-size: 30px; color: #FFF; font-weight: normal; text-transform: uppercase;}

#searchproductsform {position: absolute; right: 25px; top: 30px; width: 190px; height: 20px; background: #ccc url(../images/ui/formfield-white.gif);}
#searchproductstext {position: absolute; left: 5px; top: 2px; width: 150px; border: 0; margin: 0; background: transparent; font-size: 10px; font-weight: bold; font-style: italic; text-transform: uppercase; line-height: 18px;}
#searchproductssubmit {position: absolute; right: 0; top: 0;}
#searchproductsform p {position: absolute; left: 0; top: 25px; color: #fff; font-size: 11px;}
#searchproductsform a {color: #fff; text-decoration: none;}
#searchproductsform a:hover {text-decoration: underline;}


/*** COLUMN STRUCTURE ***/

#main {background: #fff url(../images/ui/main.gif); padding: 35px 0; overflow: hidden;}
#leftnav {float: left; width: 150px; padding: 0 0 30px;}
#content {float: left; width: 420px;}
	body.twocolumn #content {width: 695px; padding-right: 25px;}
#sidebar {float: right; width: 225px; padding: 0 25px 30px 0;}
	body.twocolumn #sidebar {display: none;}
.content-420 {float: left; width: 420px;}


/*** LEFT NAV STYLES ***/

#leftnav ul {font-size: 11px; font-style: italic; font-weight: bold; line-height: 12px;}
#leftnav ul a {display: block; padding: 5px 25px; text-decoration: none; text-transform: uppercase;}
/* #leftnav ul a.on {background: url(../images/ui/leftnav-level1.gif) 9px 8px no-repeat;} */
#leftnav ul a:hover {text-decoration: underline;}

#leftnav ul ul {margin: 0 0 10px 25px;}
#leftnav ul ul a {color: #666; padding: 3px 25px 3px 0; background: none; text-transform: none;}
#leftnav ul ul a.on {color: #003366; padding-left: 10px;}

#leftnav ul ul ul {margin: 0 0 0 10px;}
#leftnav ul ul ul a {color: #666;}
#leftnav ul ul ul a.on {color: #003366; padding-left: 10px;}

#leftnav ul.states li.spaceabove {margin-top: 10px;}
#leftnav ul.states a {padding: 2px 25px; text-transform: none; color: #666; font-style: normal; font-weight: normal;}
#leftnav ul.states a:hover {color: #003366;}
#leftnav ul.states a.on {background-position: 9px 5px; color: #003366; font-weight: bold;}


/*** CONTENT STYLES ***/

#content h2, #content .h2 {font-size: 18px; color: #003366; font-style: italic; font-weight: normal; text-transform: uppercase; margin-bottom: 10px;}
#content h3, #content .h3 {font-size: 16px; color: #666; font-style: italic; font-weight: normal; text-transform: none; margin-bottom: 10px;}
#content h3.producttagline {font-size: 14px; color: #003366; margin: -10px 0 25px;}
#content h4, #content .h4 {font-size: 14px; color: #003366; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 0;}
#content h5 {font-size: 12px; color: #003366; font-weight: normal; text-transform: uppercase; margin: 20px 0 0;}
#content h6 {font-size: 10px; color: #003366; font-style: italic; font-weight: normal; text-transform: uppercase; margin-bottom: 0;}
#content h6.articlesource {margin: -10px 0 20px;}

#content ul {margin: 5px 0 1.7em;}
#content ul li {padding-left: 12px; background: url(../images/ui/bullet.gif) 0 7px no-repeat; margin-bottom: 6px; line-height: 17px;}
#content ul.nobullet li {padding-left: 0; background: none;}

#content .tabcolumns, #content .columns {overflow: hidden;}
#content .tabcolumns .floatleft, #content .tabcolumns .floatright {width: 160px; padding: 0 20px;}
body.twocolumn #content .tabcolumns .floatleft, body.twocolumn #content .tabcolumns .floatright {width: 178px; padding: 0 20px;}
#content .tabcolumns .floatleft h5, #content .tabcolumns .floatright h5 {margin: 0 -20px 15px;}
#content .columns .floatleft, #content .columns .floatright {width: 180px;}

#content .tabcolumns h5 {position: relative; background: url(../images/ui/corner.png) 0 -94px no-repeat; padding: 4px 25px 2px; font-size: 12px; text-transform: uppercase; font-weight: normal; margin-bottom: 15px;}
#content .tabcolumns h5 .toplink {position: absolute; right: 10px; top: 3px; color: #fff; font-style: italic; font-weight: normal; text-decoration: none; text-transform: lowercase;
    text-shadow:             0 0 2px rgba(0,0,0,.20);
    -moz-text-shadow:         0 0 2px rgba(0,0,0,.20);
    -op-text-shadow:         0 0 2px rgba(0,0,0,.20);
    -webkit-text-shadow:     0 0 2px rgba(0,0,0,.20);
}
#content .tabcolumns h5.lightgrey {background-color: #dcddde; color: #003366;}
#content .tabcolumns h5.lightblue {background-color: #89cce2; color: #003366;}
#content .tabcolumns h5.greyblue {background-color: #a0c5db; color: #003366;}
#content .tabcolumns h5.lightpurple {background-color: #adb0d9; color: #003366;}
#content .tabcolumns h5.lime {background-color: #c9d6a6; color: #003366;}
#content .tabcolumns h5.blue {background-color: #005695; color: #fff;}
#content .tabcolumns h5.grey {background-color: #7e8083; color: #fff;}
#content .tabcolumns h5.green {background-color: #5c8527; color: #fff;}
#content .tabcolumns h5.red {background-color: #9e2f39; color: #fff;}
#content .tabcolumns h5.teal {background-color: #00738d; color: #fff;}
#content .tabcolumns h5.purple {background-color: #6d1f7e; color: #fff;}

.productcategory {position: relative; height: 190px; background: #666; margin-bottom: 15px; color: #003366; font-style: italic; line-height: 17px;}
.productcategory > div {position: absolute; right: 25px; bottom: 25px; width: 345px;}
.productcategory.left > div {left: 35px; bottom: 25px;}
#content .productcategory h2, #content .productcategory h2 a {font-size: 23px; color: #003366; text-decoration: none; font-weight: normal;}
#content .productcategory h2 a:hover {text-decoration: underline;}
.productcategory > div > :last-child {margin-bottom: 0;}
.productcategory a {color: #003366; text-decoration: none;}
.productcategory a:hover {text-decoration: underline;}

.productitem {width: 300px; height: 164px; background: #fcfcfc url(../images/ui/productitem.gif); margin: 0 0 15px; padding: 21px 20px 0; line-height: 16px; font-style: italic; overflow: hidden;}
#content .productitem h6 {margin-top: -10px;}
#content .productitem h3 {margin: -5px 0 10px;}
.productitem .imgright {margin: 0 -10px 0 10px;}
.productitem .imgright + p {max-height: 120px; overflow: hidden;}
.productitem p {margin-bottom: 1em;}
.productitem p:last-child {margin: 0;}

.calloutitem {width: 300px; height: 164px; background: #fcfcfc url(../images/ui/calloutitem.gif); margin: 0 0 15px; padding: 21px 20px 0; line-height: 16px; font-style: italic; overflow: hidden;}

.distributoritem {float: left; width: 182px; padding: 10px 45px 25px 0; line-height: 16px;}
.distributoritem p {margin-bottom: 1em;}
.distributoritem p:last-child {margin-bottom: 0;}
.distributoritem img {border: 1px solid #000;}

.productcategory + p.toplink, .productitem + p.toplink, .distributoritem + p.toplink {clear: both; position: relative; top: -15px; margin: 0 0 -15px;}
p + p.toplink {margin: -1.2em 0 1.7em;}
p.toplink {text-align: right;}
p.toplink a {color: #666; text-decoration: none; font-weight: normal; font-size: 11px;}
p.toplink a:hover {text-decoration: underline; color: #003366;}

h2 + p.backlink {margin: -1em 0 1.7em;}
p.backlink a {color: #666; text-decoration: none; font-weight: normal; font-size: 11px;}
p.backlink a:hover {text-decoration: underline; color: #003366;}

.pagination {overflow: hidden; font-style: italic; color: #999;}
.pagination a {font-weight: normal; color: #999; text-decoration: none; margin: 0 1px;}
.pagination a.on, .pagination a:hover {color: #003366; text-decoration: underline;}
.pagination a.on {font-weight: bold;}
.pagination a.prev {padding-right: 25px; background: url(../images/ui/pagination-prev.gif) right 50% no-repeat;}
.pagination a.next {padding-left: 25px; background: url(../images/ui/pagination-next.gif) left 50% no-repeat;}

.article-nowrap {float:right; width:250px}
.articlethumb, .articlephoto, .videothumb {position: relative; float: left; margin: 0 15px 15px 0; overflow: hidden;
	box-shadow: 			3px 4px 2px rgba(0,0,0,.25);
	-moz-box-shadow: 		3px 4px 2px rgba(0,0,0,.25);
	-op-box-shadow: 		3px 4px 2px rgba(0,0,0,.25);
	-webkit-box-shadow: 	3px 4px 2px rgba(0,0,0,.25);
}
.articlethumb img, .articlephoto img, .videothumb img {display: block;}
.articlethumb span.corner, .articlephoto span.corner, .videothumb span.corner {position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: url(../images/ui/corner.png) right top;}
.articlethumb, .articlethumb img {width: 100px;}
.articlephoto, .articlephoto img {width: 205px;}
.articlephoto {margin: 0 20px 5px 0;}
.videothumb, .videothumb img {width: 150px;}

.share img {vertical-align: middle; margin-right: 3px;}
.share a {font-style: normal; font-weight: normal; font-size: 11px; text-decoration: none;}
.share a:hover {text-decoration: underline;}

.letterlinks {margin-bottom: 30px;}
.letterlinks a {margin-right: 2px;}

.disclaimer {font-style: italic; font-size: 10px; line-height: 15px; padding-bottom: 10px;}


/*** SIDEBAR STYLES ***/

#sidebar h2, #sidebar h3, #sidebar h4 {font-size: 12px; color: #003366; font-style: normal; font-weight: bold; text-transform: none; margin-bottom: 1em; line-height: 17px;}

#sidebar ul {margin: 0 0 1em;}
#sidebar ul li {padding-left: 12px; background: url(../images/ui/bullet.gif) 0 7px no-repeat; margin-bottom: 6px; line-height: 17px;}
#sidebar ul.nobullet li {padding-left: 0; background: none;}

#sidebar .box {background: url(../images/ui/corner.png) 0 -95px no-repeat; padding: 20px; color: #fff; font-size: 11px; line-height: 15px; font-style: italic; margin-bottom: 20px;}
#sidebar .box p {margin-bottom: 1.25em;}
#sidebar .box :last-child {margin-bottom: 0;}
#sidebar .box a {color: #fff; font-weight: normal;}
.box a.arrowlink {background-image: url(../images/ui/arrowlink-white.png); color: #fff;}
.box.lightgraybox a.arrowlink {background-image: url(../images/ui/arrowlink.png); color: #003366 !important;}

#sidebar .tealbox {background-color: #00718f;}
#sidebar .bluebox {background-color: #20558a;}
#sidebar .greenbox {background-color: #5c8727;}
#sidebar .purplebox {background-color: #6d207c;}
#sidebar .lightgraybox {background-color: #ccc; color: #333;}

#atvision-screens {overflow: hidden; margin-bottom: 20px;}
#atvision-screens .floatleft {width: 161px; color: #003366;}
#atvision-screens .floatleft img {margin-bottom: 10px;}
#atvision-screens .floatright {width: 32px;}
#atvision-screens .floatright img {display: block; width: 32px; margin: 10px 0;}


/*** TABLE STYLES ***/

table {width: 100%; border-collapse: collapse; margin: 5px 0 1.7em;}
th, td {border: 1px solid #ddd; padding: 5px 10px; line-height: 15px; font-size: 11px;}
th.noborder, td.noborder {border: 0; padding: 2px;}
thead th, thead td, .thead th, .thead td, td.thead, th.thead {font-weight: bold; font-size: 10px; color: #fff; background: #003366 url(../images/ui/thead.gif) 0 0 repeat-x; text-transform: uppercase; border-color: #003366; border-bottom-color: #ddd;}


/*** FORM STYLES ***/

.contentform input[type="text"] {width: 410px; padding: 5px; border: 0; background: #f3f4f4 url(../images/ui/formfield.gif); margin-bottom: 5px;}
.contentform textarea {width: 410px; height: 120px; padding: 5px; border: 0; background: #f3f4f4 url(../images/ui/formfield.gif); margin-bottom: 5px;}
.contentform p.note {margin: 0; font-size: 10px; padding: 0 5px;}
#content .contentform h4 {margin: 20px 0 5px;}


/*** HOME STYLES ***/

#homehero {position: relative; height: 450px; margin-top: 90px; overflow: hidden;}


/*** FOOTER STYLES ***/

#footer {background: url(../images/ui/footernews.gif) 0 30px repeat-x; padding: 30px 0; font-size: 10px; color: #333;}
#footercontainer {width: 870px; margin: 0 auto; text-align: left; overflow: hidden;}
#footer a {color: #333; text-decoration: none; font-weight: normal;}
#footer a:hover {text-decoration: underline;}

#footernews {height: 27px; line-height: 27px; color: #fff; margin-bottom: 8px;}
#footernews h4 {display: inline; margin-right: 10px; color: #fff; text-transform: uppercase; font-size: 12px;}
#footernews p {display: inline; font-size: 12px;}
#footernews a {text-transform: uppercase; font-size: 9px;}
#copyright {float: left;}
#copyright a {text-transform: uppercase; font-style: normal;}
#siteby {float: right; padding-left: 10px;}
#social {float: right; padding: 2px 0;}