/*********** cashforcarssandiego.net nickswebworks nick sharpe August 8 2013 ******/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE: WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON */ 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, 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, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;font: inherit;vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} 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 visible focus styles! :focus {outline: ?????;} */ /* remember to highlight inserts somehow! */ ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;} /*************************************************** END RESET ************************************************/ /*** © 2013 NicksWebWorks.com - css by Nick Sharpe template 080713 *************/ body {margin:0;padding:0;width: 100%;height:100%;font-family: Arial, helvetica, sans serif;color:#666;}/*background-color:rgba(33, 33, 33, 0.5);*/ strong, th, h1,h2,h3,h4,h5,h6 {font-weight: bold;} em{font-style:italic;font-weight:500;} h1{font-size:152%;margin:0;padding:0px;} h2{font-size: 132%;font-family: 'Open Sans', Arial, helvetica, sans-serif;margin: 10px 0 0 0;}/*#0071ef blue color: #007D53; green*/ h3{font-size:112%;margin:10px 0;padding:0;font-weight:bold;} h4{font-size:95%;margin:10px 0;padding:0;font-weight:bold;} h4 em{font-style:oblique;} p{font:200 14px/20px Arial, Helvetica, sans-serif;} .post-cnt p{margin: 10px 0;padding:0;} .bold{font-weight:bold;} @font-face { font-family: ronnia; src: url('http://bop35.com/cashforcarssandiego.net/fonts/RonniaBasicReg.otf'), url('fonts/RonniaBasicReg.eot'); /* IE9 */ } .ronnia{font-family: 'Ronnia Basic';} @font-face {font-family: avenir ; src: url( 'http://www.nickswebworks.com/fonts/avenir_65_medium.otf' ) format("opentype"); } /* /* Then use it like you would any other font */ .avenir{font-family: Avenir, Arial, helvetica, sans-serif; } /*************************** LAYOUT *********************************/ #shell{width: 100%;height: auto;margin: 0;padding: 0;} header{position:relative;width:1024px;height:60px;top:20px;margin:0 auto;padding:0;} /**** LOGO ****/ .logo{position:relative;top:10px;left:0;margin:0;padding:0;width:640px;height: 80px;background-image: url('https://www.cashforcarssandiego.net/images/cashforcarssandiego-logo-color.png');background-repeat: no-repeat;} .logo h1{text-indent: -9999px;} .companyname{font:bold 32px 'Open Sans', Arial, Helvetica, sans-serif;color: #00b52a;text-shadow: 1px 1px 2px #333;} .phonebox{position:absolute;top:0px;right: 80px;width:280px;height:50px;margin:0;padding: 0;} .phonebox p{font: 900 2em/1em Arial, Helvetica, sans-serif;padding: 0 0 0px;text-align: center;} ul {list-style-type:none;} ul.socials{position:relative;top:0px;left:0px;margin:0;padding:0;width:460px;height:40px;} ul.socials li{display:inline;margin:0 10px 0 0;padding:0;width: 20px;} ul.socials li a{float:left;text-decoration:none;margin:0 10px 0 0;padding:0;border: none;} ul.socials li a:hover{color:orange;} .toptel{font-size: 1.5em;font-weight: 700;color: #00b52a;text-decoration: none;} /***************************** TOP NAV UL ******************************** */ nav#navigation{position: relative;top: 30px;left: 40%;width: 560px;height: 40px;margin: 0;padding: 5px;} #navigation { height: 52px; padding-top: 4px; font-family: 'Ubuntu', sans-serif; font-weight: 700;/*background: url(images/navigation.png) repeat-x 0 0;*/} #navigation ul { list-style: none; list-style-position: outside; } #navigation ul li { float: left; padding-right: 2px; line-height: 12px; /*background: url(images/nav-border.png) no-repeat right 0; */ font-size: 13px; text-transform: uppercase; } #navigation ul li a { display: block; padding: 0 12px 0 18px; color: #007400;text-decoration: none; } #navigation ul li a:hover, #navigation ul li.active a { text-decoration: none; color: #2b9208; } #navigation ul li.first a { padding-left: 38px; } #navigation a.nav-btn { display: none; } .blogbtnnav a{width:auto;height:auto;padding:3px;margin-right:6px;color:#fff;background-color:#00b52a;vertical-align: 20px;border:1px solid green;border-radius:3px;} /***************** VALUE PROP ********************/ #valueprop{position: relative;top: 0;left: 0;width: 100%;height: 300px;margin: 0;padding: 0;} /*background-color: #003F79;*/ #slider-wrap{position:relative;top:0;width:880px;height:280px;margin:0 auto;padding:20px 0 0 ;} /********* VP Buttons ********************/ #slider-wrap p.vplearn{position: absolute;top:240px;left: 10px;width: auto;font-style: italic;font-size: 1.5em;font-weight: 500;} #slider-wrap p.vpstarted{position: absolute;top:240px;left: 60px;width: auto;font-size: 2em;font-weight: 100;} /*.quote a{float: right;width: auto;height:auto;font-size:24px;padding:10px;text-decoration:none;color:#fff;background-color: #00b52a;border: 2px solid green;border-radius: 12px;box-shadow: 2px 2px 4px #666;} .quote a:hover{box-shadow: 3px 3px 6px #0017e6;}*/ /**************** MAIN *******************/ section{width: 100%;height:auto;} article{width:988px;height:auto;margin:0px auto 20px;padding:0px 10px 40px;}/*;border-radius: 12px*/ #box3{position:relative;top:0;left:0;width:1024px;height:320px;margin:0;padding:0;color:#666;text-align:justify;} #box3 h3{font-size: 1.8em;margin-bottom: 20px;color:#5A6673;font-family:'Ronnia Basic', Arial,Helvetica,sans-serif;font-weight: 600;} #box3 hr{height:1px;background-color:#0e3c51;} #boxa{position:absolute;top:0;left:0px;} #boxb{position:absolute;top:0;left:345px;} #boxc{position:absolute;top:0;right:30px;} #boxa, #boxb, #boxc{width:300px;height:380px;margin:0;padding:0;} #box3 p{ margin-top:10px;font-size: 1em;line-height: 1.5em;} #fancy-quote{position:relative;top:30px;margin:0px auto 30px;width:940px;height:120px;padding:10px;} #fancy-quote p{width:820px;margin: 0 auto;font-size:1.3em;line-height: 1.5em;text-align:center;font-family:Georgia;font-style: italic;} article h2{color: #5A6673;font-weight: 100;} article h3{padding:0 0 0 10px;line-height: 1.5em} article h4{padding:0 0 0 10px;} article h5{margin-top: 10px;padding:0 0 0 10px;} .featuretxt{padding:0 0 0 10px;} .post-img{float:right;width: 420px;margin:0;padding: 10px;} .post-img img{width: 400px;height: auto;margin:20px auto;/*border: 2px solid #007D53;border-radius: 12px;box-shadow:9px 8px 12px #666666;*/} .post-img p{font-size: 12px;} .post-cnt{width: 460px;height: auto;margin: 0;padding:0 20px 20px;} /***************************** FEATURE LINK BOX ***********************************************/ #feature{position:relative;top:0;margin:0 auto;padding:0;width:200px;height:auto; -moz-border-radius: 12px 0 0 12px;-khtml-border-radius: 12px 0 0 12px;-webkit-border-radius: 12px 0 0 12px;border-radius: 12px 0 0 12px;} #feature ul{display:block;} #feature ul li{margin:0;padding:10px 0 10px 10px;width:260px;height:auto;font-size:1em;font-weight:bold;text-align:left;background-color:#2bb0e7;margin-bottom: 5px;border-radius: 10px; background: #00b25a;} /*background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);}*/ #feature ul li a{text-decoration:none;color:#fff;padding-bottom: 10px;margin-bottom: 0px;border:none;border-radius: 10px;} #feature ul li a:hover{display:block;text-decoration:none;color:#0000ff;background-color:#B93B8F;margin:-10px 0 0px;padding:10px 0 0 0;width:260px;height:30px;font-size:1em;font-weight:bold;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:1px solid #999;border-radius:7px;-webkit-box-shadow:4px 5px 5px #888888; /* Safari and Chrome */ box-shadow: 4px 5px 5px #888888; background-color: #00b52a;} /************************ LEARN and QUOTE BUTTONS *********************/ p.learn{float:left; font-size:24px;margin: 10px;padding:10px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;} p.learn a{text-decoration:none;color:#fff;} p.learn a:hover{color: orange;} p.quote{float:right; font-size:24px;margin: 10px;padding:10px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;} p.quote a{text-decoration:none;color:#fff;} p.quote a:hover{color: orange;} /******************** QUOTE FORM CSS **************************/ tr{margin: 20px 0;padding: 10px 0;border:2px solid green;} /******************CSS3 BUTTONS *****************/ .getstarted a{color:#fff;width:auto;height:auto;margin:0;padding:5px;font-size:1em;font-family:HelveticaNeue, arial, helvetica, sans-serif;font-weight:200;border:1px solid #999; border-radius:4px;background-color: #00b52a;-webkit-box-shadow: 3px 3px 5px #333; /* Safari and Chrome */box-shadow: 3px 3px 5px #333;} .getstarted a:hover{color: orange;background-color: blue;} div#footer{position:relative;top:20px;left:0;width: 100%;height:200px;padding:0;background-color:#e1e1e1;} #footer p{color:#24749f;margin:0px;font-size: .75em;letter-spacing: 2px;text-align:center;padding:0;} #footer a:link{color:#24749f;} #footer a:visited{color: #0060ff;} #footer a:hover{color: #00FFFF;} #footer p img{vertical-align:sub;} /*************************************** FOOTNAV ********************************************/ ul{list-style-type:none;} ul#footnav{position:relative;top:30px;margin:0 auto;width:640px;height:25px;padding:0;} ul#footnav li{float:left;margin:0;padding:0 0 3px 0;color:#3d73b3;font-family:Arial; text-transform:uppercase;font-size:.85em;} ul#footnav li a{text-decoration:none;padding:0 10px 10px 15px;} ul#footnav li a:hover{color:#ffc19f;text-shadow:1px 1px 1px #000;} ul#footnav li.current a{color:#6699ff;font-weight:bold;} ul#footnav li a:visited {color: #24749f;} /* #Media Queries ================================================== =====================================================================================*/ @media only screen and (max-width:480px) { body { width: auto; background-image: none;} .shell {width: 300px; margin: 0 auto; } #header{position: relative; top: 0;left: 0;margin: 0;padding:0; width:100%;height: 30px;} /*.logo { margin: 0; padding: 0;height:30px;width: 260px;background-image: url('images/cashforcarssandiego-logo-color-260.png');}*/ .logo{float: left; display: block;margin:0;padding:0;width:260px;height: 30px;background-image: url('https://www.cashforcarssandiego.net/images/cashforcarssandiego-logo-color-260.png');background-repeat: no-repeat;} .logo img{width:260px;height:auto;}/*height:60px;*/ div.logotext{float: right;} .logo h1{display: none;} .logo h2{display: none;} #tagline{display: none;} /**/ .phonebox{display: none;} h2{font-size: 26px;} section{height: auto;} nav#navigation{position: relative;top: 0;left: 0%;width: 300px;} #navigation { padding: 0 0 0 0; height: 36px;width: 280px; } #navigation a.nav-btn { display: block; font-size: 13px; line-height: 36px; padding-top: 0px; height: 28px; padding-left: 22px; text-transform: uppercase; color: #2b9208; font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: bold; } #navigation a.nav-btn:hover { text-decoration: none; } #navigation a.nav-btn span.arr { background: url(images/nav-arr.png) no-repeat 0 0; width: 13px; height: 9px; position: absolute; right: 14px; top: 12px; } #navigation a.nav-btn span.arr.active { background: url(images/nav-arr.png) no-repeat 0 bottom; } #navigation { position: relative; z-index: 1000; } #navigation ul { display: none; position: absolute; top: 36px; left: 0; width: 100%;} #navigation ul li { display: block; line-height: 36px !important; float: none; background: url(images/navigation.png) repeat 0 0; } #navigation ul li a { padding: 0 22px; } #navigation ul li.first a { padding-left: 26px; display: none;} #valueprop{width: 100%;height:300px;padding: 0px 0px 0px;margin-bottom: 0px;border: 1px solid;} #slider-wrap{position:relative;top:0;width:100%;height:280px;margin:0;padding:0;} h2{font-size: 36px;font-family: Avenir, arial, helvetica, sans-serif;color: #0071ef;margin: 10px 0 0 0;} #slider-wrap h3{display: none} h2.vplearn{width: 80px;} section.box3{height: auto;} #box3{position:relative;top:0;left:0;width:100%;height:auto;margin:0;padding:0;color:#666;text-align:left;} #box3 h3{font-size: 1.8em;margin-bottom: 20px;color: #0071ef;font-family:Avenir, Arial,Helvetica,sans-serif;font-weight: 600;} #box3 hr{height:1px;background-color:#0e3c51;} #boxa{position:relative;top:0;left:10px;} #boxb{position:relative;top:0;left:10px;} #boxc{position:relative;top:0;left:10px;} #boxa, #boxb, #boxc{width:300px;height:350px;margin:0;padding:0 0 30px 0;} #fancy-quote{position:relative;top:20px;margin:30px auto 60px;width:240px;height:60px;padding:30px;} /* */ /************ FEATURE HOME *******************************/ article{width:100%;height:auto;margin:0px;padding:20px 0;} article h2{font-weight: 100;} article h3{padding:0 0 0 10px;} article h4{padding:0 0 0 10px;} article h5{margin-top: 10px;padding:0 0 0 10px;} article p{color:#666;text-align:left;margin: 0;padding: 20px 10px ;line-height: 20px;font:.9em/1.2em Arial, helvetica, sans-serif;} .post-img{float:none;width: 280px;margin: 0 auto;padding: 0;} .post-img img{width: 280px;} .post-img p{font-size: 12px;} .post-cnt{width:280px;padding: 0 5px;margin: 0;} /************************ LEARN and QUOTE BUTTONS *********************/ p.learn{float:left; font-size:16px;margin: 10px;padding:5px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;} p.learn a{text-decoration:none;color:#fff;} p.learn a:hover{color: orange;} p.quote{float:right; font-size:16px;margin: 10px 0;padding:5px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;} p.quote a{text-decoration:none;color:#fff;} p.quote a:hover{color: orange;} div#footer{width: 100%} ul#footnav{width: 100%;} footer{width: 100%;height: auto;} ul#footnav{width: 100%;height: 60px;} footer p{font-size: small;} } @media only screen and ( max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { #navigation a.nav-btn span.arr { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; } #navigation a.nav-btn span.arr.active { background: url(images/nav-arr@2x.png) no-repeat 0 bottom; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; } .search{position: relative;top: 0;margin: 0 auto;text-align: center;} }