/* Default Stylesheet for Nterchange Frontend */ /* ========================================== */ @import url(print.css) print; /*@import url("other_stylesheet.css") screen;*/ /* HTML RULES */ /* ================================================== */ body { font:11px "Arial", Verdana, "Trebuchet MS", sans-serif; background: #191919 url(/images/layout/pipes-bg.jpg) top left repeat-x; } h1 { margin:0; font:24px "Georgia", "Helvetica"; } h2 { font:20px "Georgia", "Helvetica"; display: block; clear: both;} h3 { font:18px "Georgia", "Helvetica"; margin:0 0 2px 0; font-size: 16px; color: #8E0000;} h4 {margin:0 0 10px 0; color: #8E0000; font-weight: bold ;} p { line-height:1.5; margin-bottom:10px; } p.notes {font-size: 10px;} a {color: #8E0000;} a:hover {} dt {font-weight: bold; margin: 0 0 4px 0;} .notes {display: block;} .bodyimage {margin: 0 10px 10px 0px;} /* Why was this rule added? It breaks most body images on the site! */ /*.bodyimage img {height: 200px; width: 196px; border: 1px solid;}*/ .redbold {color: #8E0000; font-weight: bold ;} #converter {padding:0 0 10px 20px;} /* SITE LAYOUT RULES */ /* ================================================== */ #site { width: 960px; margin: 0 auto; } #header { height: 100px; } #logo, #tagline { margin: 0; padding: 0; background-color: transparent; background-position: top left; background-repeat: no-repeat; } #logo { float:left; width: 290px; height: 50px; margin: 30px 0 0 35px; background-image: url(/images/layout/masthead-logo.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/masthead-logo.png", sizingMethod="scale"); cursor: pointer; } #tagline { float:right; width: 544px; height: 100px; background-image: none; } #logo h1, #tagline span { display: none; } #container { position:relative; background: white url(/images/layout/body-background.png) top left repeat-x; margin-bottom: 20px; } #topnav { height: 41px; background: transparent url(/images/layout/topnav-background.png) bottom left no-repeat; } #nav { } #masthead { height: 170px; clear:both; overflow: hidden; position:relative; z-index: 10; } #masthead ul { position:relative; display:block; width:960px; height:170px; clear:both; margin:0px; padding:0px; overflow:hidden; z-index: 10; } #masthead ul li { position:absolute; display:block; list-style-type:none; margin:0px; padding:0px; background-color:#FFFFFF; } #masthead ul li img{ display:block; background-color:#FFFFFF; } #content { } #main { float: left; width: 640px; position:relative; } #main .wrapper { padding: 0 30px 0 30px; } #main h1 { margin: 25px 0 5px 0; color:#333333; } #main h1.description {margin:0 0 2px 0; font-size: 16px; color: #8E0000;} #main h2 { margin: 10px 0 4px 0; color:#333333; } #main ul { margin:0; padding:0; } #main ul li { padding:0 0 7px 14px; background:url(/images/layout/bullet.gif) no-repeat 0px 2px; height:1%; } #main ol { margin:0 0 10px 20px; list-style-type:decimal; } #main ol li { margin:0 0 5px 6px; padding:0 0 0px 14px; } #main .text .intro p { font-size:14px; line-height:22px; margin-top:20px; margin-bottom:0px; min-height:250px; color:#777; } #main .mediaelement .product { margin-bottom:20px; text-align:right; } .bodyimagevideo {margin:0 20px 6px 0;} /* Pink?? */ /*.mediaelement {width: 200px; background: pink; float: left;}*/ .video-icon {padding: 5px 0 5px 26px; float: right; background: url(../images/layout/video-icon.gif) no-repeat top left;} #sidebar { width: 240px; float: left; position: relative; top: -31px; z-index: 500; } #sidebar .top { height: 32px; } #sidebar .top li { float: left; padding: 0 1px 0 2px; } #sidebar .top li.active { padding-left: 0; } #sidebar .top li a { color: #666666; text-transform: lowercase; text-decoration: none; cursor: pointer; } #sidebar .top li.active a { color:#333333; } #sidebar .top li span { display: block; height: 22px; padding-top: 10px; float: left; background-color: transparent; background-position: top left; background-repeat: no-repeat; } #sidebar .top li span.left { width: 12px; background-image: url(/images/layout/sidebar-tab-left.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/sidebar-tab-left.png", sizingMethod="scale"); } #sidebar .top li span.right { width: 12px; background-image: url(/images/layout/sidebar-tab-right.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/sidebar-tab-right.png", sizingMethod="scale"); } #sidebar .top li span.center { padding: 10px 10px 0 10px; background-repeat: repeat-x; background-image: url(/images/layout/sidebar-tab-center.png); } #sidebar .top li.active span.left { width: 14px; background-image: url(/images/layout/sidebar-tab-active-left.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/sidebar-tab-active-left.png", sizingMethod="scale"); } #sidebar .top li.active span.right { background-image: url(/images/layout/sidebar-tab-active-right.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/sidebar-tab-active-right.png", sizingMethod="scale"); } #sidebar .top li.active span.center { background-image: url(/images/layout/sidebar-tab-active-center.png); } #sidebar .middle { width: 240px; min-height: 200px; _height: 200px; background: white url(/images/layout/sidebar-border.gif) top left repeat-y; } #sidebar .bottom { height: 20px; width: 5px; background: white url(/images/layout/sidebar-border-bottom.gif) top left no-repeat; } #footer { clear: both; padding: 0 30px 20px 30px; } #footer a { color: #666666; text-transform: lowercase; text-decoration: none; } #footer p { color: #666666; font-family: Verdana; text-transform: uppercase; font-size: 9px; } #footer_nav {} #credits {} /* HOMEPAGE OVERRIDES */ /* ================================================== */ /* BASIC CLASSES */ /* ================================================== */ .clear { display:block; clear:both; height:1px; line-height:1px; font-size:1px; } .img_left { float:left; } .img_right { float:right; } /* NAVIGATION RULES */ /* ================================================== */ #nav { position: relative; z-index: 1000; } #nav ul { position: relative; } #nav ul li { float: left; background: transparent url(/images/layout/topnav-separator.gif) center left no-repeat; position:relative; } #nav ul li a { display:block; padding:0 20px; color: #CCCCCC; font-size:13px; text-decoration: none; text-transform: lowercase; cursor:pointer; } #nav ul li span.center { height: 40px; line-height: 40px; } /* Active state */ #nav ul li.active a { color:#8E0000; } /* Hover state */ #nav ul li.hover a, #nav ul li:hover a { color: #333333; padding:0 11px; } #nav ul li.hover span, #nav ul li:hover span { display: block; width: 9px; height:31px; line-height:31px; margin-top:10px; float: left; background-color: transparent; background-position: top left; background-repeat: no-repeat; } #nav ul li.hover span.left, #nav ul li:hover span.left { background-image: url(/images/layout/topnav-top-left.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-top-left.png", sizingMethod="scale"); } #nav ul li.hover span.right, #nav ul li:hover span.right { background-image: url(/images/layout/topnav-top-right.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-top-right.png", sizingMethod="scale"); } #nav ul li.hover span.center, #nav ul li:hover span.center { width:auto; background-repeat: repeat-x; background: white; } #nav ul.top-level li ul.drop-level { display: none; } #nav ul.top-level li.hover ul.drop-level, #nav ul.top-level li:hover ul.drop-level { display:block; } /* Home button */ #nav ul li.home { background-image:none; } #nav ul li.home a { margin: 0; width:14px; height:20px; padding:10px 20px; overflow:hidden; } #nav ul li.home a span { display:block; width: 14px; height: 20px; margin:0; padding:0; background: url(/images/layout/topnav-home.png) top left no-repeat; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-home.png", sizingMethod="crop"); } #nav ul li.home a:hover span { background-image: url(/images/layout/topnav-home-hover.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-home-hover.png", sizingMethod="crop"); } #nav ul li.home span span { display:none; } /* Drop Down Nav */ #nav div.drop-nav { position:absolute; left:0px; top:41px; margin-left:11px; width:200px; } #nav ul.drop-level li { display:block; float:none; background: transparent; padding: 0;} #nav ul.drop-level li { clear:both; } #nav ul.drop-level li span { width:164px; height:auto; line-height:1; margin: 0; padding: 5px 5px 5px 31px; border-top: 1px solid #CCCCCC; background: white url(/images/layout/topnav-bullet.gif) 16px 8px no-repeat; } #nav ul.drop-level li.first span { border-top: 5px solid white; } #nav ul.drop-level li.last span { display: block; width: 9px; height:9px; padding:0; float: left; border-width:0; background-color: transparent; background-position: bottom left; background-repeat: no-repeat; } #nav ul.drop-level li.last span.left { background-image: url(/images/layout/topnav-bottom-left.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-bottom-left.png", sizingMethod="scale"); } #nav ul.drop-level li.last span.right { float:right; background-image: url(/images/layout/topnav-bottom-right.png); _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/layout/topnav-bottom-right.png", sizingMethod="scale"); } #nav ul.drop-level li.last span.center { width:182px; background-repeat: repeat-x; background: white; } #nav ul.drop-level li a { padding:0; color:#666666; } #nav ul.drop-level li a:hover { color:black; } /* Lame IE6 hack to deal with drop down lists having huge margins */ ##nav ul.drop-level li { margin-bottom:-14px; } ##nav ul.drop-level li.last { margin-bottom:0px; } /* Product Nav */ #pnav ul li { padding: 5px 0 5px 15px; } #pnav ul li a { display:block; width:203px; height:24px; color:white; text-decoration:none; background: transparent url(/images/layout/sidenav-top.gif) top left no-repeat; } #pnav ul li a span { padding-left:30px; line-height: 24px; } /* Product Sub Nav */ #pnav ul.drop-level li { padding:0; margin:5px 0 5px 10px; } #pnav ul.drop-level li a { display:inline; width:auto; height:auto; color:#333333; background-image:none; cursor:pointer; } #pnav ul.drop-level li a span { display:block; _display:inline-block; padding-left:7px; line-height:1; text-decoration:underline; background: transparent url(/images/layout/sidenav-bullet.gif) center left no-repeat; cursor:pointer; } /* Product Nav Active/Hover state */ #pnav a:hover { color:#8E0000; } #pnav li.active a { color:white; } #pnav ul.drop-level li a:hover { color:#8E0000; } #pnav ul.drop-level li.active a { color:#8E0000; font-weight:bold; } #pnav ul.drop-level { display:none; } #pnav li.active ul.drop-level, #pnav li.open ul.drop-level { display:block; } /* SEARCH */ /* ================================================== */ #search form {} #search form input.text {} #search form input.button {} #sidebar h3 { padding: 10px 0 5px 20px; font-family: Georgia; color: #333333; } #search-wrapper { width: 203px; height: 30px; margin: 0 0 15px 15px; background: transparent url(/images/layout/sidenav-search.gif) no-repeat left top; } #search { width: 162px; float: left; font: Arial; color: #0d0d0d; font-size: 11px; border: 0; background: none; margin: 9px 0 0 10px; padding: 0; } #search-go { float: right; } /* Safari 2 hack - too much top margin */ html[xmlns*=""] body:last-child #search { margin-top: 0px; } /* Safari2 & Webkit */ @media all and (min-width:0px) { html[xmlns*=""] body:not(:root:root) #search { margin-top: 9px; } } /* Webkit */ #searchresults dd { margin-bottom:10px; } #searchresults dl { margin-top:15px; } /* PAGE SPECIFIC */ /* ================================================== */ /* Contact Us form */ #page-10 table, #page-10 tr, #page-10 td { border-width: 0px; } #page-10 span.formerror { color: #FF0000; } /* USED TO BE IN TABLE.CSS */ /* ================================================== */ .size1Copy {color: #8E0000; font-weight: bold ;} td, table, tr {border: 1px solid #999; padding:3px;} table {margin: 0 0 10px 0;}