/* --------------------------------------------- C+K Plastics Screen Style Sheet author: Cyberwoven version: 2010.01 ----------------------------------------------- */ body { font:normal 12px/20px Arial, Helvetica, sans-serif; color:#333; margin:0; padding:0; background:#fff url(../images/bodybg.jpg) repeat-x center top; text-align:center;} a {color:#364a51; text-decoration:underline;} a:visited {color:#1d3842;} a:hover {text-decoration:none;} h2 {font:normal 38px/40px "Century Gothic", Futura, "Trebuchet MS", arial, sans-serif; color:#2a4b58; margin:0; padding:10px 0 15px 0; text-transform:uppercase; text-shadow: -1px 2px 1px #647881;} h3 {font:normal 20px/24px Arial, Helvetica, sans-serif; margin:0; padding:10px 0 5px 0; color:#002232;} h4 {font:normal 14px/18px Arial, Helvetica, sans-serif; margin:0; padding:10px 0 5px 0;} p {margin:0 0 15px 0; padding:0;} blockquote {display:block; clear:both; width:490px; margin:0 auto; padding:20px 30px 55px 30px; background:url(../images/blockquotebg.png) no-repeat right bottom; font:italic 16px/22px "Times New Roman", times ,georgia,serif;} fieldset {margin:0; padding:0; display:block; border:none;} .textbox {border:1px solid #333; background:none; padding:2px 5px;} textarea {border:1px solid #333; background:none; padding:2px 5px;} img {float:right; margin:0 0 10px 10px;} a:hover img {border:none;} /* Reusables ----------------------------------------------- */ p.intro {font:italic 18px/28px "Times New Roman", times ,georgia,serif;} .hidden {display:none;} .alt {display:none;} .clear {clear:both; display:block; overflow:hidden; width:0; height:0;} table.data {text-align:left; margin:0 0 10px 0;} table.data th {padding:4px 5px; border-bottom:1px solid #ccc; font-weight:bold; font-size:14px; line-height:18px; text-align:left; color:#00366e;} table.data td {padding:4px 5px; line-height:16px; border-bottom:1px solid #ccc; } table.data tr.even td {background-color:#eee;} .floatleft {float:left;} .floatright {float:right;} .nofloat {float:none !important;} .linkbutton {display:inline-block; clear:both; padding:6px 10px; font-weight:bold; margin:5px 0; text-decoration:none; background:#eee; border:1px solid #fff; color:#0063d3;} .linkbutton:hover {text-decoration:none; border:1px solid #666; background:#eee;} .certified { padding:10px; margin:10px; border:3px solid #fff; text-align:center; background:#D1D2BD; color:#4E4E49; } /* Layout Blocks ----------------------------------------------- */ .outerwrapper {background:url(../images/outerwrapperbg.png) no-repeat center top;} .wrapper {background:url(../images/wrapperbg.jpg) no-repeat center 180px;} .container {width:940px; margin:0 auto; text-align:left;} a.skiplink {display:block; position:absolute; top:0; left:0; font-size:1px; text-indent:-9999px;} #header {height:125px; position:relative;} #header h1 {margin:0; padding:0;} #header h1 a {display:block; position:absolute; top:0; left:0; height:125px; width:320px; margin:0 0 0 -62px; background:url(../images/ckplastics.png) no-repeat left top; font-size:1px; text-indent:-9999px; outline:none;} #header h1 a:hover {background-position:right top;} #header h2 {display:none;} ul.mainnav {display:block; position:absolute; height:40px; top:85px; right:0; margin:0 -11px 0 0; padding:0; list-style:none;} ul.mainnav li {display:inline; margin:0; padding:0;} ul.mainnav li a {display:block; float:left; height:40px; width:100px; background:url(../images/mainnav.png) no-repeat; font-size:1px; text-indent:-9999px; outline:none;} ul.mainnav li#about a {width:110px; background-position:0 0;} ul.mainnav li#about a:hover {background-position:0 -40px;} ul.mainnav li#about.active a, ul.mainnav li#about.active a:hover {background-position:0 -80px;} ul.mainnav li#engineering a {width:145px; background-position:-110px 0;} ul.mainnav li#engineering a:hover {background-position:-110px -40px;} ul.mainnav li#engineering.active a, ul.mainnav li#engineering.active a:hover {background-position:-110px -80px;} ul.mainnav li#capabilities a {width:140px; background-position:-255px 0;} ul.mainnav li#capabilities a:hover {background-position:-255px -40px;} ul.mainnav li#capabilities.active a, ul.mainnav li#capabilities.active a:hover {background-position:-255px -80px;} ul.mainnav li#qualityassurance a {width:206px; background-position:-395px 0;} ul.mainnav li#qualityassurance a:hover {background-position:-395px -40px;} ul.mainnav li#qualityassurance.active a, ul.mainnav li#qualityassurance.active a:hover {background-position:-395px -80px;} .content {display:block; margin:10px 0 0 0; background:url(../images/secondarybg.png) repeat-y right;} #primary {float:left; width:600px; padding-left:20px; overflow:hidden;} #primary h2 {display:block; height:80px; width:600px; line-height:80px; padding:0 0 20px 20px; margin:0 0 0 -20px; background:url(../images/h2bg.png) no-repeat; overflow:hidden;} #primary ul {display:block; margin:0 20px 20px 0; padding:0; float:left; border-top:1px solid #ccc; border-right:1px solid #999; list-style:none;} #primary ul li {display:block; padding:3px 5px 3px 16px; margin:0; border-bottom:1px solid #ccc; background:url(../images/content-libg.png) no-repeat 2px 8px;} #primary ul.sitemap {border:none; float:none; font-size:14px;} #primary ul.sitemap li {border:none;} #primary ul.sitemap ul {border:none; float:none; margin:0 0 3px 5px; font-size:12px;} #primary ul.sitemap a {text-decoration:none;} #primary ul.sitemap a:hover {text-decoration:underline;} #secondary {float:right; width:305px; margin:0 0 20px 0; overflow:hidden;} .subnav {display:block; margin:0; padding:0 0 9px 0; list-style:none; background:#fff url(../images/subnav.png) no-repeat right bottom;} .subnav li {display:inline; margin:0; padding:0;} .subnav li a {display:block; margin:0; padding:10px 10px 10px 20px; background:#b4cbd4 url(../images/subnavitem.png) no-repeat -9999px 0; border-bottom:1px solid #83a9b8; border-top:1px solid #e5edf0; font-size:13px; line-height:20px; text-decoration:none; color:#363630;} .subnav li a:hover {background-position:left bottom;} .subnav li.active a, .subnav li.active a:hover {background-position:left top;} .subnav li.first a {border-top:none;} .subnav li.last a {border-bottom:none;} .sidebox {padding:0 20px 25px 20px; background:#d1d2bd url(../images/sidebox.png) no-repeat 0 bottom;} .sidebox h3 {position:relative; color:#4e4e49; font:bold 16px/24px Arial, Helvetica, sans-serif; padding:10px 20px; margin:0 0 10px -20px; height:auto; width:265px; background:url(../images/sideboxh3.png) repeat-x bottom;} .valleysidebox {position:relative; padding:45px 20px 25px 50px !important;} .valleysidebox h3 {position:absolute; top:0; left:0; padding:0; margin:0; background:url(../images/sideboxvalleyh3.png) no-repeat; width:265px; height:110px; z-index:5;} .valleysidebox h3 a {display:block; width:305px; height:78px; font-size:1px; text-indent:-9999px;} .valleysidebox p {position:relative; margin:0; padding:0; z-index:10;} .valleysidebox p a {display:block; color:#4e4e49; font-weight:bold; text-decoration:none;} .valleysidebox p a:hover {text-decoration:underline;} ul.lightbox {display:block; margin:15px 0 0 0; padding:0; list-style:none; height:130px;} ul.lightbox li {display:inline; margin:0; padding:0;} ul.lightbox li a {display:block; float:left; margin:0 15px 15px 0; width:50px; height:50px; background:#68695e;} ul.lightbox li a img {margin:-1px 0 0 -1px; padding:0; border:none; float:none;} ul.lightbox li a:hover {background:#333;} ul.lightbox li a:hover img {margin:-2px 0 0 -2px;} #bottomlaunch {display:block; clear:both; margin:0; padding:42px 0 0 0; list-style:none; height:150px; overflow:hidden; background:#fff url(../images/bottomlaunch-int.png) no-repeat;} #bottomlaunch li {display:block; position:relative; float:left; margin:0 12px 0 0; padding:0; width:305px; height:150px; background-repeat:no-repeat; background-position:0 -160px; overflow:hidden; cursor:pointer;} #bottomlaunch li h3 {display:inline; margin:0; padding:0;} #bottomlaunch li h3 a {display:block; height:115px; margin:0; padding:0; font-size:1px; text-indent:-9999px; outline:none;} #bottomlaunch li h4 {font:normal 14px/20px Arial, Helvetica, sans-serif; color:#fff; margin:0; padding:0 20px;} #bottomlaunch li p {display:none; padding:0 20px; color:#fff; line-height:15px; } #bottomlaunch li a.more {display:none; position:absolute; left:0; bottom:0; padding:0 20px; width:305px; height:30px; line-height:30px; color:#fff; text-decoration:none;} #bottomlaunch li:hover {background-position:0 0;} #bottomlaunch li:hover h3 a {height:66px;} #bottomlaunch li:hover h4 {display:none;} .nojs li:hover p {display:block !important;} .nojs li:hover a.more {display:block !important;} #bottomlaunch li.blue {background-image:url(../images/bottomlaunch-blue.png);} #bottomlaunch li.blue a.more {background:#081f2c; border-top:1px solid #9ac0cf;} #bottomlaunch li.blue a.more:hover {background:#0c3044;} #bottomlaunch li.green {background-image:url(../images/bottomlaunch-green.png);} #bottomlaunch li.green a.more {background:#012d01; border-top:1px solid #8aac8a;} #bottomlaunch li.green a.more:hover {background:#044504;} #bottomlaunch li.orange {background-image:url(../images/bottomlaunch-orange.png); margin-right:0;} #bottomlaunch li.orange a.more {background:#4c1800; border-top:1px solid #f9cc9e;} #bottomlaunch li.orange a.more:hover {background:#622002;} .footerwrapper {position:relative; padding:10px 0 100px 0; z-index:60;} #footer {width:920px; margin:0 auto; padding:10px 10px; text-align:left; font-size:12px; line-height:25px; letter-spacing:.02em; position:relative; border-top:4px solid #00233d;} #footer .vcard .url {display:none;} #footer .vcard .tel {margin:0 10px 0 0;} #footer .vcard .tel .type {color:#00233d; text-transform:uppercase; font-weight:bold; font-size:11px;} #footer a {text-decoration:none;} #footer a:hover {text-decoration:underline;} ul.footernav {display:block; position:absolute; top:10px; right:0; margin:0; padding:0; list-style:none;} ul.footernav li {display:inline; margin:0; padding:0;} ul.footernav li a {display:block; float:left; padding:15px 2px 2px 2px; margin:-15px 0 0 10px; font-weight:bold; font-size:11px; text-transform:uppercase; color:#00233d;} #footer a.cyberwoven {display:block; position:absolute; top:35px; right:0; color:#333;} #footer a.cyberwoven:hover {text-decoration:none;} #footer a.cyberwoven span {color:#333;} #footer a.cyberwoven:hover span {color:#923600 !important;} #valleyhover {display:none; position:absolute; right:150px; bottom:65px; width:300px; margin:0; padding:0 0 12px 0; line-height:18px; color:#333; border:5px solid #262626; background:#eaffd6 url(../images/vhover-logo.png) no-repeat 15px 100px;} ul.footernav li.first a {background:url(../images/vhover-arrow.png) no-repeat -9999px 0;} ul.footernav li.first a.on {background-position:center 10px;} #valleyhover h4 {display:block; position:absolute; top:0; left:0; width:300px; text-indent:12px; margin:0; padding:2px 0 0 0; height:26px; line-height:26px; font-size:13px; text-transform:uppercase; background:#c3f09a url(../images/vhover-close.png) no-repeat 268px center; cursor:pointer;} #valleyhover h4:hover {background-color:#9fcf72;} #valleyhover p {padding:38px 12px 5px 12px; margin:0;} #valleyhover ul {margin:0 0 5px 0; padding:0; list-style:none;} #valleyhover ul li {margin:0; padding:2px 70px; color:#024515;} #valleyhover a.gotovalley {display:inline-block; margin:2px 2px 2px 70px; padding:2px 10px; background:#c3f09a; border:1px solid #9fcf72; color:#000; font-weight:bold; text-decoration:none;} #valleyhover a.gotovalley:hover {text-decoration:none; border-color:#657b52; background:#9fcf72;} /* Homepage Specific ----------------------------------------------- */ body.home .content {background:none;} body.home #bottomlaunch {position:relative; margin:-30px 0 0 0; padding:15px 0 0 0; background:transparent url(../images/bottomlaunch-home.png) no-repeat; z-index:50;} body.home .footerwrapper {background:url(../images/homefooterwrapper.jpg) repeat-x bottom; padding:10px 0 0 0; height:360px;} #homeflash {height:305px; position:relative; z-index:10;} #homeflash.flash-replaced {background:none !important;} #homeflash a {margin: 0px; padding: 0px; border: none;} #homeflash a img {border: none;} #homeflash a:hover {margin: 0px; padding: 0px; border: none; text-decoration: none;} /* Specialty Pages ----------------------------------------------- */ /* News */ .categoryselector {clear:both;} #rss {position:absolute; top:30px; right:10px; height:24px; width:155px; padding-left:30px; } #rss a {display:block; float:right; background:url(../images/rss-icon.png) no-repeat top left; line-height:24px; padding-left:30px; line-height:24px; text-decoration:none;} #rss a:hover {text-decoration:underline;} .articletitle a {text-decoration:none;} .articletitle a:hover {text-decoration:underline;} p.articlepreview {display:block; padding:0 0 5px 0; margin:0 10px 10px 0; border-bottom:1px solid #8cb9eb;} ul.pager {display:block; height:30px; margin:10px 0 0 0; padding:0; list-style:none;} ul.pager li {display:block; float:left; margin:0; padding:0 5px 0 0;} /* Form Builder ---------------------------- */ fieldset.searchform { padding-left:15px;} fieldset.searchform label { position:absolute; left:-9999px; } fieldset.searchform input { width:300px; } fieldset.searchform input[type="submit"] { margin:15px 0 10px 5px; padding:2px 22px 2px 34px; width:auto; background-position:left -5px; } div.formrow {display:block; margin:0 0 10px 0; clear:both;} div.formrow label {display:block; clear:both; width:170px; text-align:right; float:left; margin:0 5px 10px 0; padding:5px 8px 5px 12px; font-size:13px; color:#333; background:#dfe0d0;} div.formrow label.required {background:#dfe0d0 url(../images/required-stripe.png) no-repeat 0 0;} div.formrow input.textbox {display:block; width:200px; border:1px solid #ccc; margin:0 10px 0 0; font-size:12px; line-height:20px; padding:5px 5px;} div.formrow textarea {display:block; width:350px; height:125px; border:1px solid #ccc; margin:0 10px 0 0;} div.formrow span {display:block; padding-left:195px; margin:0; clear:left; font-size:11px; color:#555; font-style:italic;} div.formrow span.error {display:inline; padding-left:0; font-style:normal;} div.formrow span.error div {display:block; padding-left:195px;} div.formrow select {margin:4px 0 0 0;} input.formsubmit {clear:left; margin:0 0 0 190px; display:block; float:left; font-size:14px; line-height:20px; background:#b4cbd4; color:#333; border:3px solid #fff; padding:6px 25px;} input.formsubmit:hover {border:3px solid #b4cbd4;} div.formrow table {position:relative; left:-4px; margin:0; padding:0; text-align:left; border-spacing:0;} div.formrow table tr.even td {background:none;} div.formrow table tr td {padding:0 0 2px 0; line-height:14px; border:none; margin:0;} div.formrow table tr td label {display:inline; width:auto; text-align:left; float:none; margin:0; padding:0 0 0 5px; background:none; color:#333; font-size:12px;} .searchform div.formrow {height:75px; width:600px; padding-top:10px;} .searchform div.formrow .textbox {float:left; margin-right:5px;} .searchform div.formrow input.formsubmit {clear:none; float:left; margin:-1px 0 0 0; padding:4px 15px;} div.checkbox input {float:left; margin:0 6px 0 196px; clear:left;} div.checkbox label {float:left; clear:none; background:none; color:#333; padding:0; margin:0; text-align:left; font-size:12px;} /* Lightbox ----------------------------------------------- */ #lightbox{position:absolute; top:0; left:0; width:100%; z-index:100; text-align:center; line-height:0;} #lightbox a img{border:none;} #outerImageContainer{position:relative; background-color:#fff; width:250px; height:250px; margin:0 auto;} #imageContainer{padding: 10px;} #loading{position:absolute; top:40%; left:0%; height:25%; width:100%; text-align:center; line-height:0;} #hoverNav{position:absolute; top:0; left:0; height:100%; width:100%; z-index:10;} #imageContainer>#hoverNav{left:0;} #imageContainer img {float:none; margin:0; padding:0; border:none;} #hoverNav a{outline: none;} #prevLink, #nextLink{width:49%; height:100%; background:transparent url(../images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */ display:block;} #prevLink {left:0; float:left;} #nextLink {right:0; float:right;} #prevLink:hover, #prevLink:visited:hover {background:url(../images/lightbox/prev.gif) left 50% no-repeat; } #nextLink:hover, #nextLink:visited:hover {background:url(../images/lightbox/next.gif) right 50% no-repeat; } /*** START : next / previous text links ***/ #nextLinkText, #prevLinkText{color:#FF9834; font-weight:bold; text-decoration: none;} #nextLinkText{padding-left:20px;} #prevLinkText{padding-right: 20px;} /*** END : next / previous text links ***/ /*** START : added padding when navbar is on top ***/ .ontop #imageData {padding-top:5px;} /*** END : added padding when navbar is on top ***/ #imageDataContainer{font:10px Verdana, Helvetica, sans-serif; background-color:#fff; margin:0 auto; line-height:1.4em;} #imageData{padding:0 10px;} #imageData #imageDetails{width: 70%; float:left; text-align:left; } #imageData #caption{font-weight:bold;} #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #imageData #helpDisplay {clear: left; float: left; display: block; } #overlay{position: absolute; top:0; left:0; z-index:90; width:100%; height:500px; background-color:#000; filter:alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; display:none;} .clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} * html>body .clearfix {display:inline-block; width:100%;} * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }