/* Theme Name: QRS Theme URI: http://qrsrecycling.com/ Description: Custom site by Karma Progressive Interactive for QRS Recycling. Version: 1.0 Author: Karma Progressive Interactive Author URI: http://karmaprogressive.com/ */ /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ ins {text-decoration: none;} del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* =Spacing --------------------------------------------------------------------------------*/ ol {list-style: decimal;} ul {list-style: square;} li {margin-left: 0px;} p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom: 20px;} html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://www.positioniseverything.net/easyclearing.html */ .clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} /* =Basic HTML --------------------------------------------------------------------------------*/ body {font: 13px/1.5 Arial, 'Liberation Sans', FreeSans, sans-serif;} /* =Headings --------------------------------------------------------------------------------*/ h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;} h2 {margin-top:1em;} h5 {font-size:1.2em;} h6 {font-size:1em; text-transform:uppercase;} /* anchors ----------------------------------------------- */ a { color: #000; } a:hover { color:#000; text-decoration: none; } a:focus{outline: 1px dotted invert;} /**** ALL ****/ body {background: #fff url(/img/bg.jpg) center 0 repeat-x;color: #555;} h1 {} h2 {} h3 {font-size: 18px;color: #668c2e; font-style: italic;border-bottom: 1px dotted #80807e;} h4 {font-size: 16px;font-style: italic;} table td {vertical-align: top} .black {color:#000 !important} .wrap {width:970px;margin-left:auto;margin-right:auto;} /* client wanted smaller p margins */ p {margin-bottom: 10px} #header {height:120px} #header #logo {float:left;display:inline;width:195px;height:138px;} #header #top-options {height:25px;width:700px;float:right;margin-top:40px} #header #schedule-pickup {float:right;display:inline;padding-right: 20px} #header #schedule-pickup img {margin-top: 2px} #header #search {float:right;} #header #dearch p {display:inline;} #header #search input {border:1px solid #436968;height:18px;width:160px;font-size:14px} #header #search img {margin-bottom: -6px;cursor: pointer} #header #nav {float:right;/* height:50px; */ margin-top:10px;position:relative;z-index:1000001} #header #nav ul {border-top: 1px solid #f0f0f0;list-style-type: none} #header #nav ul li {float:left;display:inline;/* height:50px; */width:123px;background: transparent url(/img/nav-bg2.png) 0 0 repeat-x;border-right:1px dotted #f0f0f0;text-align: center;position: relative;/* cursor: pointer */} #header #nav ul li a {color:#fff;text-decoration: none;font-size:18px;display:block;padding-top:10px;padding-bottom:10px;font-style: italic} #header #nav ul li.last {border-right: none;} #header #nav ul ul {position:absolute;width:123px;left:0px;border-top:none;display: none;z-index: 10} #header #nav ul li:hover, #header #nav ul li.hover {background-image:none;background-color:#739931;} #header #nav ul li:hover ul, #header #nav ul li.hover ul {display:block} #header #nav ul ul li {background-image:none;background-color: #86b13a;height:auto;border-bottom: 1px dotted #f0f0f0;border-right: none;position:relative;z-index:10;} #header #nav ul ul li:hover, #header #nav ul ul li.hover {background-color:#739931;} #header #nav ul ul li a {display:block;font-size: 12px;font-style: normal;height:auto;text-align: left;margin-left:8px;padding-bottom: 5px} #cardboard {width:100%;height:37px;background: transparent url(/img/cardboard.jpg) center 0 repeat-x;} #footer {width:100%;height: 285px;color:#888;background-color: #ededed;border-top:2px solid #f9f5f2;} #footer div.wrap div {float:left;display:inline;height:140px;padding-left:10px;margin-top:20px;border-left:1px solid #cdcdcb;} #footer div h5 {font-size:14px} #footer div ul {list-style-type: none} #footer div ul li {font-size: 11px;} #footer div ul li a {color:#888;text-decoration: none} #footer div ul li a:hover {text-decoration: underline} #footer #footer-divisions {width:204px} #footer #footer-locations {width:182px} #footer #footer-corevalues {width:182px} #footer #footer-contactus {width:214px} #footer #footer-connect {width:124px} #footer #footer-connect #facebook-link {padding-left:25px;height:25px;background: transparent url(/img/connect-facebook.png) -1px -2px no-repeat} #footer #footer-connect #twitter-link {padding-left:25px;height:25px;background: transparent url(/img/connect-twitter.png) 0 -2px no-repeat} #copyright {font-size:10px;width:100%;text-align: center;margin-top:50px} /*** HOME PAGE ***/ #accordion-wrap {width:100%;height:530px;background:transparent url(/img/accordian-bg.gif) 0 0 no-repeat;margin-top:40px} #accordion {width:950px;height:511px;margin-left:15px;overflow: hidden;overflow-x: hidden;overflow-y: hidden} #accordion img.blade {float:left;display:inline;cursor:pointer;border-right:1px solid #dadada;} #accordion img.current {} #accordion div.pane {width:0px;float:left;display:inline;display:none;width:610px;height:492px;padding:10px;position: relative;z-index:0} /*612px*/ #accordion div.pane h2 {color:#86b13a;font-size:34px;/* font-weight: normal; */font-style: italic} #accordion div.pane p {font-size: 16px;color:#797979} #accordion div.pane ul {list-style-type: disc;margin-left:10px} /* #accordion #welcome-pane {background: #fff url(/img/welcome-pane-1.jpg) -150px 0px no-repeat} */ #accordion #welcome-pane .box {position:absolute;top:10px;left:350px;width:270px;z-index:5} #accordion #commercial-industrial-pane {background: #fff url(/img/commercial-industrial-pane-bg.jpg) -100px 0 no-repeat} #accordion #commercial-industrial-pane .box {position:absolute;top:40px;left:360px;width:250px;z-index:5} #accordion #printers-pane {background: #fff url(/img/printers-pane-bg.jpg) -80px 0 no-repeat} #accordion #printers-pane .box {position:absolute;top:90px;left:420px;width:200px;z-index:5} #accordion #brokerage-pane {background: #fff url(/img/brokerage-pane-bg.jpg) 0px 0 no-repeat} #accordion #brokerage-pane .box {position:absolute;top:30px;left:380px;width:230px;z-index:5} #accordion #iron-metal-pane {background: #fff url(/img/iron-metal-pane-bg.jpg) -80px 0 no-repeat} #accordion #iron-metal-pane .box {position:absolute;top:30px;left:380px;width:250px;z-index:5} #accordion #single-stream-pane {background: #fff url(/img/single-stream-pane-bg.jpg) -80px 0 no-repeat} #accordion #single-stream-pane .box {position:absolute;top:30px;left:380px;width:250px;z-index:5} #accordion #small-biz-office-pane {background: #fff url(/img/small-biz-office-pane-bg.jpg) 0px 0 no-repeat} #accordion #small-biz-office-pane .box {position:absolute;top:30px;left:370px;width:270px;z-index:5} #accordion #school-campus-pane {background: #fff url(/img/school-campus-pane-bg.jpg) -60px 0 no-repeat} #accordion #school-campus-pane .box {position:absolute;top:30px;left:380px;width:250px;z-index:5} #modal {height:250px;width:100%;} #modal #corevalue {float:left;display:inline;width:300px;height:180px;padding:16px 0px 50px 16px;background: transparent url(/img/corevalue-bg.png) 0 0 no-repeat;margin-right:14px} /* #modal #corevalue h3 {width: 280px;font-weight: normal} #modal #corevalue h4 {margin-top:20px;width:280px} #modal #corevalue p {margin-top:8px;font-size:14px;line-height: 26px;width:280px} */ #modal #testimonials {float:left;display:inline;width:308px;height:245px;background: transparent url(/img/testimonials-bg.png) 0 0 no-repeat;margin-top:-2px} #modal #testimonials #window {height:202px;width:300px;margin:8px 0 0 14px;padding:20px 0px 0px 10px;/* background: transparent url(/img/testimonials-chick.jpg) right bottom no-repeat; */} #modal #testimonials #window h3 {width:250px;font-weight: normal;margin-top:14px;} #modal #testimonials #window blockquote {width:250px;margin-top:10px} #modal #testimonials #window p {font-size: 12px;margin-top:10px} #modal #testimonials #window p em {font-size:14px;font-weight:bold;display:block} #modal #news {float:left;display:inline;width:302px;height:200px;padding:40px 0px 10px 30px;background: transparent url(/img/news-bg.png) 0 0 no-repeat;} #modal #news h3 {width: 280px;font-weight: normal} #modal #news ul {list-style-type: none} #modal #news ul li {width:280px;border-bottom: 1px dotted #ededed;padding:5px 0 5px 0;margin-left:3px;} #modal #news ul li.last {border-bottom: none;border-top:1px dotted #80807e;font-style: italic} #modal #news ul li a {color:#666;text-decoration: none;} #modal #news ul li a:hover {color:#658b2e} /*** SUB PAGE ***/ #banner {padding: 20px 0 0 0} .onethirds {float:left;display:inline;height: 220px;width:345px;background: transparent url(/img/onethirdsbanner.png) 0 0 no-repeat;} .onethirds .pane {width:310px;height:202px;margin:0px 0px 0px 17px;} .twothirds {float:left;display:inline;height: 220px;width:625px;background: transparent url(/img/twothirdsbanner.png) 0 0 no-repeat;} .twothirds .pane {width:604px;height:202px;margin:0px 0px 0px 14px} .viewport {padding:14px} .onethirds-blank {float:left;display:inline;height: 220px;width:345px;} #content-short {float:left;display:inline;width:600px;padding:24px 7px 0 18px;} #content-short h1 {font-size: 22px;color: #668c2e; font-style: italic;font-weight:normal;border-bottom: 1px dotted #80807e;} #content-short h2 {font-size: 20px;color: #668c2e; font-weight:normal;} #content-short p {color:#666;line-height: 24px;padding-bottom: 10px} #content-short ul {list-style-type: disc;margin-left:20px} #content-full {width:920px;padding:24px 7px 0 18px;} #content-full h1 {font-size: 22px;color: #668c2e; font-style: italic;font-weight:normal;border-bottom: 1px dotted #80807e;} #content-full h2 {font-size: 20px;color: #668c2e; font-weight:normal;} #content-full h2 a {text-decoration: none} #content-full p {color:#666;line-height: 24px;padding-bottom: 10px} #content-full small {font-size: 11px;margin-top:-5px} #content-full ul {list-style-type: disc;margin-left:20px} /*********** SCHEDULE PICKUP ***********/ #pickup fieldset {display: block;width:500px} #pickup fieldset ol {list-style-type: none;padding:20px} #pickup fieldset ol li {} #pickup fieldset ol li label {font-weight: bold;display: block} #pickup fieldset ol li input.medium {margin-bottom:12px;font-size: 18px} #pickup fieldset ol li select {font-size:14px;margin-bottom:12px} #pickup fieldset ol li textarea {width:260px;height:100px} /*** MODULAR BOXES ***/ #can-prices {background: transparent url(/img/can-bg.jpg) 0 bottom no-repeat;float:left;display:inline;} #can-prices h3 {font-size: 18px;color: #668c2e; font-style: italic;border-bottom: 1px dotted #80807e;font-weight: normal} #can-prices .boxprice {float:left;display:inline;width: 280px;text-align: center} #can-prices .boxprice h4 {text-transform: uppercase;color:#8b8b8b;font-style: normal;padding-top: 10px;font-size: 18px} #can-prices .boxprice em {color:#4d4d4f;font-style: normal;font-weight:bold;font-size:16px} #single-stream {background: transparent url(/img/single-stream-banner-bg.jpg) left top no-repeat;} #single-stream .viewport {width:140px;float:right;padding-top:70px} #single-stream-contest {background: transparent url(/img/single-stream-contest-bg.jpg) left 10px no-repeat;} #single-stream-contest .viewport {width:135px;float:right;padding-top:40px} #banner-quote {/* background: transparent url(/img/business-dude.jpg) left top no-repeat; */background-color: #fff} #banner-quote .viewport {/* float:right;width:340px */width:580px} #banner-quote .viewport blockquote {font-size:22px;color:#658b2e;font-style: italic;text-align: center} #banner-quote .viewport blockquote p {color:#658b2e;margin:0px;} #banner-quote .viewport p {color:#686868;margin:15px 0px 0px 40px;} #banner-quote .viewport em {color:#a6a6a6;font-style: normal;display: block;margin-left:65px} #news-banner {background: transparent url(/img/news-banner-bg.jpg) left top no-repeat;} #yt-video {} #yt-video .viewport {width:220;width:335;margin:0px 0px 0px -2px;padding:0;} /*** TEXT STYLES ***/ .alignright {float:right;} .alignleft {float:left;} .wp-caption {background-color: #f3f3f3;margin:10px;text-align: center;border:1px solid #ddd;padding-top:4px;} .wp-caption-text {font-size: 11px;line-height: 14px !important;font-style: italic} .post {border-bottom:1px dotted #80807e;} /*** SEARCH ***/ p.search-text {} strong.search-excerpt {color:#333}