/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:980px; background:#fff url(../images/global/gradient-bg-tile.gif) repeat-x; } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:12px; color:#333333; margin:0 0 12px 0; line-height:1.7em } a { } a:hover { } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.2em } ol { margin:0 0 12px 0; font-size:1.2em } dl { margin:0 0 12px 0; font-size:1.2em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:1px solid #ccc; border-left:1px solid #ccc } th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc } fieldset { border:0px solid #ccc; } legend { background:#fff; } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ .wrapper{width:960px; margin:0 auto; text-align:left;} div#container {width:100%;} /* 3.3 - header */ div#header {width:100%; height:100%; background:url(../images/global/header-bg.png) top center no-repeat;} body.sub div#header {width:100%; background:url(../images/global/header-bg.png) top center no-repeat; padding:0 0 0px 0} div#header .wrapper #logo{display:block; padding:15px 20px 0px 20px; float:left} div#header .wrapper #header-details{float:right; padding:15px 20px 0 0px} div#header .wrapper #header-navigations{list-style:none; text-align:right} div#header .wrapper #header-navigations li{display:inline; color:#999999} div#header .wrapper #header-navigations li a{color:#999999; padding:0 10px} div#header .wrapper #header-navigations li a:hover{color:#63924a;} div#header .wrapper #header-contact-details{list-style:none; padding:0 0px} div#header .wrapper #header-contact-details li{} div#header .wrapper #header-contact-details #header-email-ttl a{text-indent:-3000em; display:block} div#header .wrapper #header-contact-details #header-tel-ttl{text-indent:-3000em; display:block} body.us div#header .wrapper #header-contact-details #header-tel-ttl{background:url(../images/global/UStelephone-0151-327-2220-ttl.gif) right no-repeat; height:22px; width:316px} body.us div#header .wrapper #header-contact-details #header-email-ttl a{background:url(../images/global/USemail-sales-promatic-co-uk-ttl.gif) right no-repeat; height:21px; width:336px;} body.uk div#header .wrapper #header-contact-details #header-tel-ttl{background:url(../images/global/telephone-0151-327-2220-ttl.gif) right no-repeat; height:22px; width:316px} body.uk div#header .wrapper #header-contact-details #header-email-ttl a{background:url(../images/global/email-sales-promatic-co-uk-ttl.gif) right no-repeat; height:21px; width:336px;} div#header .wrapper #primary-navigation{float:left; background:url(../images/global/primary-navigation-bg.gif) no-repeat; width:946px; padding:14px 0px 14px 14px; list-style:none; margin:0 7px; position:relative; z-index:5} div#header .wrapper #primary-navigation li{} div#header .wrapper #primary-navigation #our-products-ttl{background:url(../images/global/our-products-ttl.gif) no-repeat; width:182px; height:47px; text-indent:-3000em; margin:12px 15px 5px 15px} div#header .wrapper #primary-navigation #personal-use-btn a{background:url(../images/global/primary-navigation-btn.gif) 0 0px no-repeat; width:123px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #personal-use-btn a:hover{background:url(../images/global/primary-navigation-btn.gif) 0 -28px no-repeat; width:123px; height:28px; display:block; text-indent:-3000em} div#header .wrapper #primary-navigation #sporting-btn a{background:url(../images/global/primary-navigation-btn.gif) -123px 0px no-repeat; width:104px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #sporting-btn a:hover{background:url(../images/global/primary-navigation-btn.gif) -123px -28px no-repeat; width:104px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #trap-and-skeet-and-trench-btn a{background:url(../images/global/primary-navigation-btn.gif) -227px 0px no-repeat; width:202px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #trap-and-skeet-and-trench-btn a:hover{background:url(../images/global/primary-navigation-btn.gif) -227px -28px no-repeat; width:202px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #simulated-game-btn a{background:url(../images/global/primary-navigation-btn.gif) -428px 0px no-repeat; width:158px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #simulated-game-btn a:hover{background:url(../images/global/primary-navigation-btn.gif) -428px -28px no-repeat; width:158px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #sharp-shooter-btn a{background:url(../images/global/primary-navigation-btn.gif) -584px 0px no-repeat; width:136px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #primary-navigation #sharp-shooter-btn a:hover{background:url(../images/global/primary-navigation-btn.gif) -584px -28px no-repeat; width:136px; height:28px; display:block; text-indent:-3000em; margin:20px 0 } div#header .wrapper #shopping-navigation{float:left; background:url(../images/global/primary-navigation-bg.gif) 0 100% no-repeat; width:946px; height:31px; list-style:none; margin:0 7px; position:relative; z-index:-999px} div#header .wrapper #shopping-navigation li{float:left;} div#header .wrapper #shopping-navigation #cant-find-what-you-need{background:url(../images/global/cant-find-what-you-need-ttl.gif) no-repeat; width:166px; height:15px; margin:8px 20px; text-indent:-3000em} div#header .wrapper #shopping-navigation #search-bar{margin:3px 0; float:left} div#header .wrapper #shopping-navigation #search-bar fieldset{width:400px;} div#header .wrapper #shopping-navigation #search-bar form {float:left;} div#header .wrapper #shopping-navigation #search-bar form #search-field{padding:5px; float:left; border:none; font-family:"Verdana", Arial, Helvetica, sans-serif; color:#666666; width:250px} div#header .wrapper #shopping-navigation #check{float:right;} div#header .wrapper #shopping-navigation #checkout{list-style:none; float:right; padding:8px 25px 0 25px; font-family:"Verdana", Arial, Helvetica, sans-serif} div#header .wrapper #shopping-navigation #checkout li{color:#FFFFFF; float:left; font-weight:bold; font-size:0.9em; padding:0 5px } div#header .wrapper #shopping-navigation #checkout li a{color:#FFFFFF;} div#header .wrapper #shopping-navigation #checkout li a:hover{color:#334879;} div#header .wrapper #flash-content{float:left; padding:0 10px} .wrapper #primary-content p.info-para{float:left; padding:10px 10px; color:#333333; font-style:italic; background:#eceef1} .wrapper #primary-content p img{padding:5px;} /* 3.4 - content */ div#content { width:100%; background:url(../images/global/middle-bg.png) center repeat-y; margin:0 auto; position:relative; z-index:0 } /* 3.5 - primary content */ div#primary-content { margin:0 20px; position:relative; z-index:1 } /*INDEX STYLING*/ body.index .wrapper #primary-content #featured-column{float:left; padding:0 25px 0 0; width:465px;} body.index .wrapper #primary-content #featured-column h2{color:#275f60; font-family:"Verdana", Arial, Helvetica, sans-serif; font-size:2.3em; font-weight:400; line-height:1.3em; padding:0 0 0 0px;} body.index .wrapper #primary-content #latest-news{float:left; width:400px;} body.index .wrapper #primary-content #latest-news h4{color:#f1935c;} #more-news {list-style:none; float:right} #more-news li{float:left;} #more-news .full-article-btn{background:url(../images/global/full-article-btn.gif) no-repeat; width:106px; height:36px; text-indent:-3000em; display:block; } #more-news .full-article-btn:hover{background:url(../images/global/full-article-btn.gif)0 100% no-repeat; width:106px; height:36px; text-indent:-3000em; display:block; } #more-news .archive-btn{background:url(../images/global/archive-btn.gif) no-repeat; width:106px; height:36px; text-indent:-3000em; display:block; } #more-news .archive-btn:hover{background:url(../images/global/archive-btn.gif)0 100% no-repeat; width:106px; height:36px; text-indent:-3000em; display:block; } body.index .wrapper #primary-content #video{float:left; width:400px;} body.index .wrapper #primary-content #video img{float:left; padding:0 10px 0 0px} body.index .wrapper #primary-content #video a{color:#63924a;} /*SUB STYLING*/ body.sub .wrapper #primary-content{float:left; padding:20px 25px 0 0; width:655px;} body.fairs .wrapper #primary-content{float:left; padding:20px 25px 0 0; width:890px;} body.sub .wrapper #primary-content h1{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px; line-height:165%;} body.sub .wrapper #primary-content .our-services {float:left; background:url(../images/global/services-bg.gif) no-repeat; padding:20px; border-bottom:1px #333333 dashed} body.sub .wrapper #primary-content .our-services ul{list-style:square;width:330px; float:right;} body.sub .wrapper #primary-content .our-services ul li{margin-bottom:2px; list-style-position:inside; color:#F1935C} body.sub .wrapper #primary-content .our-services p{width:330px; float:right; padding-right:5px} body.sub .wrapper #primary-content .our-services img{float:left; padding:0 20px 0 0px;} body.sub .wrapper #primary-content h3{color:#63924A ;} body.sub .wrapper #primary-content #featured-column{float:left; padding:0 25px 0 0; width:660px;} body.sub .wrapper #primary-content .testimonial {list-style:none} body.sub .wrapper #primary-content .testimonial img{float:left; border:3px #ece4d4 solid; margin:10px 20px 10px 5px} body.sub .wrapper #primary-content .testimonial h4{color:#275f60; font-size:1.6em; padding:10px 0 0 0} body.sub .wrapper #primary-content .testimonial li{color:#333333; font-size:1.0em;} body.sub .wrapper #primary-content #featured-column{ background:url(../images/global/product-bg.gif) no-repeat} body.sub .wrapper #primary-content .product-info { background: #F6F6EC; } body.sub .wrapper #primary-content .product-info-details{float:left; width:290px; padding:10px 25px 50px 35px; list-style:none} body.sub .wrapper #primary-content .product-info-details h4{color:#df321a; font-size:1.7em} body.sub .wrapper #primary-content .product-info-details h5{color:#5b8585; font-size:1.4em} body.sub .wrapper #primary-content .product-info-details p{color:#666666; font-size:1.0em;} body.sub .wrapper #primary-content .product-info-details .prices li{ margin:5px 0; list-style:none} body.sub .wrapper #primary-content .product-info-details .prices .now-price{color:#333333; font-size:1.4em;} body.sub .wrapper #primary-content .product-info-details .prices .was-price{color:#333333; font-size:1.2em;} body.sub .wrapper #primary-content .product-info-details .prices .save-price{color:#fff; font-size:1.2em; background:#e56651; width:6em; padding:2px} body.sub .wrapper #primary-content .product-info-details form ol {list-style:none;} body.sub .wrapper #primary-content .product-info-details form ol li {float:left;} body.sub .wrapper #primary-content .product-info-details form ol li label{color:#333333; font-size:1.2em; font-weight:bold; float:left; padding:7px} body.sub .wrapper #primary-content .product-info-details form ol li .qty-field{color:#333333; font-size:1.4em; font-weight:bold; float:left; width:1.5em; padding:5px; font-family:"Verdana", Arial, Helvetica, sans-serif; border:1px solid #bebebe} body.sub .wrapper #primary-content .product-info-details form ol li .shopping-cart-btn{float:right; padding:0 0 0 20px} body.sub .wrapper #primary-content .product-info-details-img{float:left; padding:50px 15px} body.sub .wrapper #primary-content #technical ul {margin-left: 20px;line-height: 165%;} body.sub .wrapper #primary-content #availabilty {background:url(../images/global/availability-bg.gif) no-repeat; float:left; width:293px; margin:0 25px 0px 35px; padding:0 0 5px 0; list-style:none} body.sub .wrapper #primary-content #availabilty h5{background:url(../images/global/availability-ttl.gif) no-repeat; width:293px; height:34px; text-indent:-3000em; margin:0px} body.sub .wrapper #primary-content #availabilty p{color:#FFFFFF; font-size:1.0em; padding:0px 10px; margin:0} body.sub .wrapper #primary-content #availabilty a img{float:right; padding:0 5px 0 0} body.sub .wrapper #primary-content #delivery {background:url(../images/global/delivery-bg.gif) no-repeat; float:left; width:293px; list-style:none; padding:0 0 5px 0} body.sub .wrapper #primary-content #delivery h5{background:url(../images/global/delivery-ttl.gif) no-repeat; width:293px; height:34px; text-indent:-3000em; margin:0px} body.sub .wrapper #primary-content #delivery p{color:#FFFFFF; font-size:1.0em; padding:0px 10px; margin:0} body.sub .wrapper #primary-content #delivery a img{float:right; padding:0 5px 0 0 } /*SEARCH STYLING*/ body.search .wrapper div#primary-content {width:700px; float:left; padding:25px 0 0 0} body.search .wrapper div#primary-content h1{color:#275f60; font-size:2.7em; margin:0; padding:25px 10px 5px 10px;} body.search .wrapper div#primary-content h2{color:#f1935c; font-size:1.7em; margin:0; padding:10px 10px;} body.search .wrapper div#primary-content ul.products{list-style:none; margin:0 0 0 0px;} body.search .wrapper div#primary-content ul.products li{background:#f7f5ef; width:220px; margin:10px 5px 50px 5px; padding:0 0 65px 0; float:left; position:relative; height:auto !important;/*all browsers except ie6 will respect the !important flag*/ min-height:300px; height:300px;/*Should have the same value as the min height above*/} body.search .wrapper div#primary-content h3{color:#334879; font-size:1.7em; margin:0; padding:10px 10px;} body.search .wrapper div#primary-content ul.products li .compare-option{ font-size:12px; color:#df321a; text-align:center} body.search .wrapper div#primary-content ul.products li .compare-option input{margin-left:10px;} body.search .wrapper div#primary-content ul.products li h4{color:#df321a; font-size:1.6em; padding:0 0 0 15px} body.search .wrapper div#primary-content ul.products li p{padding:0 0 0 15px;} body.search .wrapper div#primary-content ul.products li em{position:absolute; bottom:-13px; margin:0 0 10px 0} body.search .wrapper div#primary-content ul.products li em a{background:url(../images/global/more-info-btn.gif) no-repeat 0 0; width:230px; height:44px; display:block; text-indent:-3000em; bottom:0px;} body.search .wrapper div#primary-content ul.products li em a:hover{background:url(../images/global/more-info-btn.gif) no-repeat 0 100%; width:230px; height:44px; display:block; text-indent:-3000em} body.search .wrapper div#secondary-content {float:left; width:220px; padding:45px 0 0 0} body.search .wrapper div#secondary-content #other-range {list-style:none; padding-bottom:20px; width:210px} body.search .wrapper div#secondary-content #other-range li a{background:#b1c8a4; width:200px; display:block; color:#FFFFFF; font-size:1.2em; padding:5px; font-weight:bold; border-bottom:1px solid #fff} body.search .wrapper div#secondary-content #other-range li a:hover{background:#63924a} body.search .wrapper div#secondary-content .video-examples {float:left; list-style:none} body.search .wrapper div#secondary-content .video-examples li p{width:200px; font-size:1.0em} body.search .wrapper div#secondary-content .video-examples li a{color:#63924a; text-decoration:underline} /* 5.4.4 - Pagination controls */ dl.pagination { border-top:1px solid #B1C8A4; padding:15px 0 0 0; font-size:0.9em } dl.pagination { font-size:0.9em } /* Show a border separating the results from the navigation above or below appropriately. */ dl.pagination-above-results { border-bottom:1px solid #B1C8A4; padding:0px 0 15px 0; border-top:0 solid white} dl.pagination-below-results { border-top:1px solid #B1C8A4; padding:15px 0 0 0; } dl.pagination dt { float:left; font-weight:bold; margin-right:10px; color:#6d6d6d } dl.pagination dd { float:left; border-left:1px solid #c7c7c7; padding:0 8px } dl.pagination dd.previous-off { border-left:none; color:#c7c7c7; padding-left:16px; background:url("../images/backgrounds/pagination/arrow-off-left.gif") no-repeat left center } dl.pagination dd.previous-on { border-left:none; padding-left:16px; background:url("../images/backgrounds/pagination/arrow-on-left.gif") no-repeat left center } dl.pagination dd.next-off { color:#c7c7c7; padding-right:16px; background:url("../images/backgrounds/pagination/arrow-off-right.gif") no-repeat right center } dl.pagination dd.next-on { padding-right:16px; background:url("../images/backgrounds/pagination/arrow-on-right.gif") no-repeat right center } dl.pagination dd.dotted { color:#c7c7c7 } dl.pagination dd.current { font-weight:bold; color:#6d6d6d } dl.pagination dd a { color:#275F60 } dl.pagination dd a:hover { text-decoration:underline; color:#b71646 } body.news h2 { color:#275F60 } body.news div.post { color:#333333; } body.news p.date { color:#275F60 } body.news p.nav a { color:#275F60 } body.news div.post ul { margin-left:3em } /* 3.6 - secondary content */ div#secondary-content { } /*INDEX STYLING*/ body.index .wrapper div#secondary-content ul.products{list-style:none; margin:0 0 0 20px} body.index .wrapper div#secondary-content ul.products li{background:#f7f5ef; width:222px; margin:5px; float:left} body.index .wrapper div#secondary-content ul.products li h4{color:#df321a; font-size:1.6em; padding:0 0 0 15px} body.index .wrapper div#secondary-content ul.products li p{padding:0 0 0 15px;} body.index .wrapper div#secondary-content ul.products li em a{background:url(../images/global/more-info-btn.gif) no-repeat 0 0; width:230px; height:44px; display:block; text-indent:-3000em} body.index .wrapper div#secondary-content ul.products li em a:hover{background:url(../images/global/more-info-btn.gif) no-repeat 0 100%; width:230px; height:44px; display:block; text-indent:-3000em} /*SUB STYLING*/ body.sub .wrapper div#secondary-content {float:left; width:220px; padding:20px 0 0 0} body.sub .wrapper div#secondary-content #other-range {list-style:none; padding-bottom:20px; width:210px} body.sub .wrapper div#secondary-content #other-range li a{background:#b1c8a4; width:200px; display:block; color:#FFFFFF; font-size:1.2em; padding:5px; font-weight:bold; border-bottom:1px solid #fff} body.sub .wrapper div#secondary-content #other-range li a:hover{background:#63924a} body.sub .wrapper div#secondary-content .video-examples {float:left; list-style:none} body.sub .wrapper div#secondary-content .video-examples li p{width:200px; font-size:1.0em} body.sub .wrapper div#secondary-content .video-examples li a{color:#63924a; text-decoration:underline} body.sub .wrapper #secondary-content h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} /*PRODUCT STYLING*/ body.product .wrapper div#secondary-content { float: right; } body.product .wrapper div#tertiary-content ul.products li.last {clear:left; } /* 3.7 - tertiary content */ div#tertiary-content { } /*SUB STYLING*/ body.sub .wrapper div#tertiary-content { width:980px; float:left } body.sub .wrapper div#tertiary-content ul.products{list-style:none; margin:0 0 0 20px} body.sub .wrapper div#tertiary-content ul.products li{background:#f7f5ef; width:222px; margin:5px; float:left} body.sub .wrapper div#tertiary-content ul.products li h4{color:#df321a; font-size:1.6em; padding:0 0 0 15px} body.sub .wrapper div#tertiary-content ul.products li p{padding:0 0 0 15px;} body.sub .wrapper div#tertiary-content ul.products li em a{background:url(../images/global/more-info-btn.gif) no-repeat 0 0; width:230px; height:44px; display:block; text-indent:-3000em} body.sub .wrapper div#tertiary-content ul.products li em a:hover{background:url(../images/global/more-info-btn.gif) no-repeat 0 100%; width:230px; height:44px; display:block; text-indent:-3000em} /*PRODUCT STYLING*/ body.product .wrapper div#tertiary-content { width:740px; } /* 3.8 - footer */ div#footer { background:url(../images/global/footer-bg.png) no-repeat center top; padding:0 0 131px 0 } div#footer .wrapper .footer-links{padding:135px 0 0 15px; float:left; width:142px; } div#footer .wrapper .footer-links dt a{ color:#9c8f6b; font-size:1.2em; font-weight:bold} div#footer .wrapper .footer-links dd{border-bottom:1px #918d82 solid; padding:5px 0} div#footer .wrapper .footer-links dd a{ color:#999999; font-size:1.0em;} div#footer .wrapper #associations{padding:135px 0 0 0px; list-style:none; float:right;} div#footer .wrapper #associations li{display:inline;} div#footer #forte{width:960px; margin:0 auto; float:left; text-align:center; color:#999999;} div#footer #forte a{color:#999999;} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /*IMAGE REPLACED TITLES*/ body.us #featured-ttl{background:url(../images/global/us-featured-ttl.gif) no-repeat; width:465px; height:52px; text-indent:-3000em; float:left} body.uk #featured-ttl{background:url(../images/global/featured-ttl.gif) no-repeat; width:465px; height:52px; text-indent:-3000em; float:left} #news-ttl{background:url(../images/global/news-ttl.gif) no-repeat; width:63px; height:21px; text-indent:-3000em} #video-ttl{background:url(../images/global/video-ttl.gif) no-repeat; width:153px; height:21px; text-indent:-3000em} #personal-use-ttl{background:url(../images/global/personal-use-ttl.jpg) no-repeat; width:207px; height:24px; text-indent:-3000em; } #product-info-ttl{background:url(../images/global/product-info-ttl.png) no-repeat; width:183px; height:47px; text-indent:-3000em; position:relative; left:-10px} #other-range-ttl{background:url(../images/global/other-range-ttl.gif) no-repeat; width:165px; height:25px; text-indent:-3000em;} #video-examples-ttl{background:url(../images/global/video-examples-ttl.gif) no-repeat; width:193px; height:22px; text-indent:-3000em; margin:20px 0 0 0} #subscribe-ttl{background:url(../images/global/subcribe-ttl.gif) no-repeat; width:410px; height:22px; text-indent:-3000em; margin:20px 0 0 0; float:left} /*CSS BORDERS ON IMAGES*/ .large-photo {position: relative; width:475px; height:215px; float: left;} .large-photo img {background: #fff; border: solid 1px #ccc; padding: 4px;} .large-photo span {width: 20px; height: 18px; display: block; position: absolute; top: 12px; left: 12px; background:url(../images/global/large-photo-border.gif) no-repeat ;} .large-photo a {text-decoration: none;} .small-photo {position: relative; width:198px; height:135px; float: left; margin:10px} .small-photo img {background: #fff; border: solid 1px #ccc; padding: 4px;} .small-photo span {width: 200px; height: 136px; display: block; position: absolute; top: 0px; left: 0px; background:url(../images/global/products-border.png) no-repeat ;} .small-photo a {text-decoration: none;} .video-photo {position: relative; width:200px; height:100px; float: left; margin:10px 20px 10px 0px} .video-photo img {background: #fff; border: solid 1px #ccc; padding: 4px;} .video-photo .img {background: #fff; border: solid 1px #ccc; padding: 4px;} .video-text{float:right; width:45%;} .video-photo span {width: 200px; height: 100px; display: block; position: absolute; top: 0px; left: 0px; background:url(../images/global/video-examples-border.png) no-repeat ;} .video-photo a {text-decoration: none;} .feature-border span {height:230px; left:-12px; position:absolute; top:-18px; width:489px; display: block; background:url(../images/global/our-feature-border.png) no-repeat; z-index:99999} .special-offer-border span {width: 220px; height: 156px; display: block; position: absolute; top: -20px; left: -20px; background:url(../images/global/special-offer-border.png) no-repeat; z-index:99999} .video-examples-border span {width: 200px; height: 100px; display: block; position: absolute; top: -20px; left: -20px; background:url(../images/global/video-examples-border.png) no-repeat; z-index:99999} .subscribe{float:left; width:430px} .subscribe form{float:left; width:210px} .subscribe fieldset{border:0px} .subscribe fieldset ol{list-style:none;} .subscribe fieldset ol li{padding:5px;} .subscribe fieldset label{color:#333333; font-size:12px; padding-right:25px} .subscribe fieldset input[type="text"]{color:#333333; font-size:12px; padding:5px; border:#999999 solid 1px; width:210px } .subscribe p{float:left; width:170px; padding:10px} .subscribe-btn{float:right} /*NAVIGATION*/ #our-products-btn{background:url(../images/global/our-products-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #our-products-btn:hover{background:url(../images/global/our-products-btn.gif) 0 100% no-repeat;} #our-products-btn.current{background:url(../images/global/our-products-btn.gif) 0 100% no-repeat;} #our-services-btn{background:url(../images/global/our-services-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #our-services-btn:hover{background:url(../images/global/our-services-btn.gif) 0 100% no-repeat;} #our-services-btn.current{background:url(../images/global/our-services-btn.gif) 0 100% no-repeat;} #meet-promatic-btn{background:url(../images/global/meet-promatic-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #meet-promatic-btn:hover{background:url(../images/global/meet-promatic-btn.gif) 0 100% no-repeat;} #meet-promatic-btn.current{background:url(../images/global/meet-promatic-btn.gif) 0 100% no-repeat;} #where-to-us-btn{background:url(../images/global/where-to-us-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #where-to-us-btn:hover{background:url(../images/global/where-to-us-btn.gif) 0 100% no-repeat;} #where-to-us-btn.current{background:url(../images/global/where-to-us-btn.gif) 0 100% no-repeat;} #grab-a-deal-btn{background:url(../images/global/grab-a-deal-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #grab-a-deal-btn:hover{background:url(../images/global/grab-a-deal-btn.gif) 0 100% no-repeat;} #grab-a-deal-btn.current{background:url(../images/global/grab-a-deal-btn.gif) 0 100% no-repeat;} #downloads-btn{background:url(../images/global/downloads-btn.gif) 0 0 no-repeat; width:146px; height:41px; display:block; text-indent:-3000em; padding:0} #downloads-btn:hover{background:url(../images/global/downloads-btn.gif) 0 100% no-repeat;} #downloads-btn.current{background:url(../images/global/downloads-btn.gif) 0 100% no-repeat;} /* LEVEL ONE */ ul.dropdown { position: relative; z-index:9999 } ul.dropdown li { font-weight: bold; float: left; zoom: 1; position: relative; z-index:9999} ul.dropdown a:hover { color: red; position: relative; z-index:9999} ul.dropdown a:active { color: #ffa500; position: relative; z-index:9999} ul.dropdown li a { display: block; padding: 4px 8px; z-index:99999; color: #334879; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover {color:#334879; position: relative; z-index:9999;} ul.dropdown li.hover a { color:#334879; font-weight:bold } ul.dropdown li.hover a:hover { color:#63924a; } .sub_menu{ } /* LEVEL TWO */ ul.dropdown ul { width: 180px; visibility: hidden; position: absolute; z-index:9999; top: 100%; left: 0; list-style:none } ul.dropdown ul li { font-weight: normal; background: #fff; color:#334879; border-bottom: 1px solid #ccc; float: none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color:#334879;} /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; } /*CATERGORY STYLING*/ body.category .wrapper div#primary-content {width:700px; float:left; padding:25px 0 0 0} body.category .wrapper div#primary-content h1{color:#275f60; font-size:2.7em; margin:0; padding:25px 10px 5px 10px;} body.category .wrapper div#primary-content h2{color:#f1935c; font-size:1.7em; margin:0; padding:10px 10px;} body.category .wrapper div#primary-content ul.products{list-style:none; margin:0 0 0 0px;} body.category .wrapper div#primary-content ul.products li{background:#f7f5ef; width:220px; margin:10px 5px 50px 5px; padding:0 0 65px 0; float:left; position:relative; height:auto !important;/*all browsers except ie6 will respect the !important flag*/ min-height:340px; height:340px;/*Should have the same value as the min height above*/} body.category .wrapper div#primary-content ul.products li.last {clear:left; } body.category .wrapper div#primary-content ul.products li h4{color:#df321a; font-size:1.6em; padding:0 0 0 15px} body.category .wrapper div#primary-content ul.products li p{padding:0 0 0 15px;} body.category .wrapper div#primary-content ul.products li em{position:absolute; bottom:-13px; margin:0 0 10px 0} body.category .wrapper div#primary-content ul.products li em a{background:url(../images/global/more-info-btn.gif) no-repeat 0 0; width:230px; height:44px; display:block; text-indent:-3000em; bottom:0px;} body.category .wrapper div#primary-content ul.products li em a:hover{background:url(../images/global/more-info-btn.gif) no-repeat 0 100%; width:230px; height:44px; display:block; text-indent:-3000em} body.category .wrapper div#secondary-content {float:left; width:220px; padding:45px 0 0 0} body.category .wrapper div#secondary-content #other-range {list-style:none; padding-bottom:20px; width:210px} body.category .wrapper div#secondary-content #other-range li a{background:#b1c8a4; width:200px; display:block; color:#FFFFFF; font-size:1.2em; padding:5px; font-weight:bold; border-bottom:1px solid #fff} body.category .wrapper div#secondary-content #other-range li a:hover{background:#63924a} body.category .wrapper div#secondary-content .video-examples {float:left; list-style:none} body.category .wrapper div#secondary-content .video-examples li p{width:200px; font-size:1.0em} body.category .wrapper div#secondary-content .video-examples li a{color:#63924a; text-decoration:underline} body.category .wrapper div#primary-content ul.products{list-style:none; margin:0 0 0 0px;} body.category .wrapper div#primary-content ul.products li{background:#f7f5ef; width:220px; margin:10px 5px 50px 5px; padding:0 0 65px 0; float:left; position:relative} body.category .wrapper div#primary-content ul.products li h4{color:#df321a; font-size:1.6em; padding:0 0 0 15px} body.category .wrapper div#primary-content ul.products li p{padding:0 0 0 15px;} body.category .wrapper div#primary-content ul.products li em{position:absolute; bottom:-13px; margin:0 0 10px 0} body.category .wrapper div#primary-content ul.products li em a{background:url(../images/global/more-info-btn.gif) no-repeat 0 0; width:230px; height:44px; display:block; text-indent:-3000em; bottom:0px;} body.category .wrapper div#primary-content ul.products li em a:hover{background:url(../images/global/more-info-btn.gif) no-repeat 0 100%; width:230px; height:44px; display:block; text-indent:-3000em} /*WHERE TO US PAGE*/ .where-to-us-cta{list-style:none;} .where-to-us-cta li{float:left; padding:0 13px} body.wheretous .wrapper #primary-content{float:left; padding:25px 0 0 0px; width:920px;} body.gounds .wrapper #primary-content{float:left; padding:25px 0 0 0px; width:350px;} body.gounds .wrapper #secondary-content{float:left; padding:0px 0px; width:550px!important;} body.gounds .flash-content{width:350px; height:600px;} .locations{border-bottom:1px dashed #CCCCCC; padding:20px 0} .locations h3{font-size:14px;} .locations h4{font-size:12px;} .locations p{font-size:11px;} .locations a{font-size:11px; color:#63924A} .popular-grounds{list-style:none;} .popular-grounds li{float:left; width:30%; float:left; padding:1.5%;} .popular-grounds .clear{clear:left;} .popular-grounds li p{} .popular-grounds li h4{color:#63924A; font-size:12px} .popular-grounds li a{color:#63924A; font-size:12px;} /*Fairs*/ .fair{float:left; width:45%; padding-right:5%} .fair h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} .fair ul{list-style:none;} .fair ul li{color:#333333; line-height:18px; margin-bottom:10px} .fair a{color:#63924A; display:block} .fair a:hover{color:#000;} body.us .fair{float:left; width:20%; padding-right:5%} .competitions{float:left; width:70%;} .competitions h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} .competitions ul{list-style:none;} .competitions ul li{color:#333333; line-height:18px; margin-bottom:10px} .competitions a{color:#63924A; display:block} .competitions a:hover{color:#000;} .agent-introduction{float:left; width:95%; padding-right:5%} .agent-introduction h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} .agent-introduction ul{list-style:none;} .agent-introduction ul li{color:#333333; line-height:18px; margin-bottom:10px} .agent-introduction a{color:#63924A; display:block} .agent-introduction a:hover{color:#000;} .agent-introduction .agent-list li{float:left; width:45%; padding:0 2% 0 0; margin:0px} .agent-introduction .agent-list li.clear{clear:left;} .agent-introduction .agent-list li h3{font-size:13px; margin:0px} .agent-introduction .agent-list li h4{font-size:12px; margin:0px} .agent-introduction .agent-list li p{font-size:12px; margin:0px} .agent-introduction .agent-list li address{font-size:12px; font-style:normal} .agent-introduction .agent-list li ul {float:none;} .agent-introduction .agent-list li ul li{float:none; width:100%; padding:0%; font-size:11px} .agent{float:left; width:95%; padding-right:5%} .agent h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} .agent ul{list-style:none;} .agent ul li{color:#333333; line-height:18px; margin-bottom:10px} .agent a{color:#63924A; display:block} .agent a:hover{color:#000;} .download ul{list-style:none;} .download ul li{color:#333333; line-height:18px; margin-bottom:10px} .download a{color:#63924A; display:block} .download a:hover{color:#000;} body.grab-a-deal .wrapper #primary-content {float:left; padding:20px 25px 0 0; width:890px; } body.grab-a-deal .wrapper div#secondary-content {float:left; padding:20px; width:925px;} .deals{float:left; width:43%; padding:0.5% 2.5%} .deals p{ font-size:12px} .deals a{color:#63924A; display:block; font-size:12px} .deals a:hover{color:#000;} .deals dl dt{font-size:12px;} .deals dl dd{font-size:12px; padding-top:5px} .promotions{} .promotions ul{list-style:none;} .promotions ul li{float:left; width:33%} .promotions ul li h4{ color:#333333; padding:0 10px; font-size:14px; line-height:18px} .promotions ul li p{color:#333333; padding:0 10px; font-size:12px} body.us .deals{float:left; width:43%; padding:0.5% 2.5%} body.us .promotions{ float:right; width:40%} .promotions ul{list-style:none;} body.us .promotions ul li{float:left; width:100%} .promotions ul li h4{ color:#333333; padding:0 10px; font-size:14px; line-height:18px} .promotions ul li p{color:#333333; padding:0 10px; font-size:12px} .pdf li{background:url(../images/global/pdf-icon.gif) no-repeat; display:block; padding-left:50px;} #formHolder h1{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} #compliance{float:left; width:400px; margin:20px 0 20px 10px} #compliance a.productpreview img { border: 5px solid #63924A; } #compliance a{color:#000000;} #compliance h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} #compliance address{margin-bottom:12px;} .competition-proven{border:#CCCCCC 1px solid;} .competition-proven th{padding:5px; text-align:center; background:#4bacc6; color:#FFFFFF; font-size:14px; } .competition-proven td{padding:5px; text-align:center; background:#d2eaf1; color:#000000; font-size:12px} .linkage{float:left; width:45%; padding-right:5%} .extended{padding:40px 0 20px;} .extended2{padding:40px 0 20px; width:240px!important;} .linkage h2{color:#275F60; font-size:2em; margin:0; padding:5px 0 20px;} .linkage ul{list-style:none;} .linkage ul li{color:#333333; line-height:18px; margin-bottom:10px} .linkage a{color:#63924A; display:block} .linkage a:hover{color:#000;} .linkage dt{font-size:14px; font-weight:bold; line-height:18px; margin-top:12px} .linkage dd{font-size:12px; line-height:18px;} .linkage dd a{font-size:12px; line-height:18px; margin-top:10px; background:url(../images/global/link-icon.gif) no-repeat left center; display:block; padding:0 0 0 25px} /*Claymate product page*/ .claymate-products{list-style:none;} .claymate-products li{width:45%; padding-right:5%; float:left;} .claymate-products li dl dt{color:#333333; font-size:12px; line-height:18px; font-weight:bold; margin-bottom:12px} .claymate-products li dl dd{color:#333333; font-size:12px; line-height:18px; margin-bottom:12px} /*VIDEO PAGE*/ body.videos .wrapper #primary-content{float:left; padding:20px 25px 0 0; width:600px;} body.videos .video{float:left; background:url(../images/global/services-bg.gif) no-repeat; padding:20px; border-bottom:1px #333333 dashed}} /*Sharp Shooter*/ .sharp-shooter-list{list-style:none; } .sharp-shooter-list dt{font-size:12px; color:#333; margin-bottom:5px; font-weight:bold} .sharp-shooter-list dd{font-size:12px; color:#63924A; font-weight:bold; margin-bottom:10px; background:url(../images/global/arrow-icon.jpg) no-repeat left 5%; display:block; padding-left:20px;} /*Comapre Table*/ .compare-table{float:left; width:670px; padding-top:15px} .compare-table table{width:100%; float:left; border:#CCCCCC 1px solid;} .compare-table table th{padding:5px; text-align:center; background:#4bacc6; color:#FFFFFF; font-size:13px; } .compare-table table td{padding:5px; text-align:center; background:#fff; color:#000; font-size:13px; } .compare-table table td.attribute-name{font-weight:bold;} .compare-table tr.different td { background:#d9e7d0;border:0 } .compare-legend { margin:20px 20px !important; clear:both;float:left } .compare-legend .sample { width:10px; height:10px; background:#d9e7d0;float:left; margin-right:10px } .compare-option .compare-label { padding-left: 10px; cursor:default } a.compare-now-btn { background:url(../images/global/compare-now-btn.gif); text-indent:-9999px; line-height: 50px; width:179px; height:50px; display:block; float:right} /*Flags*/ .flags {list-style:none; float:right} .flags li{float:left; width:50px;} .claymate-list dd{ background:url(../images/global/arrow-icon.jpg) no-repeat left 5%; display:block; padding-left:20px;} /*BUTTONS EXTRA ADDITIONS*/ #download-button {background:url(../images/global/download-button-on-home.gif) 0 0 no-repeat; width:450px; height:110px; display:block; text-indent:-3000em} #download-button:hover {background:url(../images/global/download-button-on-home.gif) 0 100% no-repeat; width:450px; height:110px; display:block;} /* basescript */ ul#basewords { list-style:none; width:940px; margin:auto; text-align:left } ul#basewords li { display:inline; margin-right:12px; color:#999; font-size:1.0em } ul#basewords li a { color:#999 } ul#basewords strong { font-weight:normal } div#basescript { width:940px; margin:auto } div#basescript p { color:#999; font-size:1.1em; text-align:left } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .standout{font-size:1.5em;} body.comingsoon #primary-content h1{line-height:18px;} .back-to-top{color:#CC0000; font-size:12px; font-weight:bold; float:right; padding-right:15px} #SEO{text-align:left;} #SEO h1{color:#999999; font-size:1.2em} #SEO p{color:#999999; font-size:1.0em} .bottom-dotted-border{border-bottom:2px dotted #c9c9c9; margin:0 0 10px 0} .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .clear { clear: both; } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }