/* Author : Sonora DesignWorks Website : SonoraDesignWorks.com */ @import url("reset.css"); @import url("mobile.css"); /* GENERAL ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #tabb {position:fixed; bottom:20px; left:0; height:131px; width:35px; z-index:900} #tabb a:link, #tabb a:visited {display:block; height:131px; background:url(../images/buttons/contact.png) no-repeat -3px 0} #tabb a:hover, #tabb a:active {display:block; height:131px; background:url(../images/buttons/contact.png) no-repeat -1px 0} #tabb2 {position:fixed; bottom:20px; left:-240px; height:183px; width:275px; z-index:900; background:url(../images/buttons/contact-long.png) right no-repeat} #tabb2:hover {left:0px;} html {background:url(../images/pageBack.jpg) repeat-x top #e5e5e5} body { font-family:Arial, Helvetica, sans-serif; background:url(../images/headBack2.gif) repeat-x; text-align: center; color: #3d3d3d; line-height:16px } /* Headings -----------------------------------------------------------------------------*/ #mainContent h1 {color:#0f2244; font-size:17px; text-shadow:1px 1px 3px #ccc; margin-bottom:15px} h2 {color:#868686; font-size:15px} h3 {font-size:14px} /* LINKS -----------------------------------------------------------------------------*/ a:link, a:visited, a:hover, a:active {text-decoration:none;} a:link {color:#db511c} a:visited {color:#db511c} a:hover {color:#db511c; text-decoration:underline;} a:active {color:#db511c; text-decoration:underline;} /* CONTAINER ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #container { width: 900px; margin: 0 auto; text-align: left; } /* HEADER ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #headBanner {height:340px; position:relative; top: -59px; *top:0px; z-index:1} #header { background:url(../images/headRays3.jpg) top no-repeat; width:900px; height:172px; } #header h1 { height:89px; width:236px; background:url(../images/sonora-logo.png) no-repeat; position:relative; top:17px; left:26px; } h1 a { display : block; height : 96px; text-indent : -9999px; } .headPhone { float:right; color:#c3c3c3; font-size:22px; letter-spacing:3px; margin-right:12px; position:relative; top:27px; *top:49px; _top:45px; line-height:17px; } #headSub { color:#868686; font-weight:bold; font-size:11px; float:right; position:relative; top:19px; *top:9px; margin-right:12px; *padding-top:10px } #headSub a:link, #headSub a:visited { font-weight:bold; color:#868686; padding-top:10px; } #headSub a:hover, #headSub a:active { font-weight:bold; color:#868686; background:url(../images/subNavArrow.gif) top center no-repeat; padding-top:9px; text-decoration:none } /* HEADER Images -----------------------------------------------------------------------------*/ #headerImage {width:900px; height:136px; background:url(../images/headers/web3.jpg) no-repeat} #headerImageText {position:relative; top:25px; *top:30px; } #headerImageText h1 {background:#f25b24; float:left; padding:10px 50px; -webkit-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333; border-right:2px solid #fff; font-size:28px; color:#fff; margin-bottom:0px; text-shadow:0px 0px 8px #000; font-variant:small-caps; z-index:10} #headerImageText h2 {font-size:22px; color: #ffffb1; text-shadow:0px 0px 8px #000; z-index:20; float:left; clear:left; background:#b39f6a; padding:10px 50px; margin-top:0px; -webkit-box-shadow: 1px 1px 2px #333; -moz-box-shadow: 1px 1px 2px #333; border-right:2px solid #ffffb1} #history-page #headerImage, #testimonials-page #headerImage, #team-page #headerImage, #why-page #headerImage, #clients-page #headerImage {width:900px; height:136px; background:url(../images/headers/about.jpg) no-repeat} #contact-page #headerImage, #contact-form-page #headerImage, #directions-page #headerImage, #payment-page #headerImage, #news-page #headerImage {width:900px; height:136px; background:url(../images/headers/contact.jpg) no-repeat} #seo-faq-page #headerImage, #seo-page #headerImage, #seo-an-page #headerImage {width:900px; height:136px; background:url(../images/headers/seo.jpg) no-repeat} #gd-port-page-a #headerImage, #gd-port-page-bb #headerImage, #gd-port-page-c #headerImage, #gd-port-page-d #headerImage, #gd-page #headerImage, #illustration-page #headerImage {width:900px; height:136px; background:url(../images/headers/gd.jpg) no-repeat} #rewards-page #headerImage {width:900px; height:136px; background:url(../images/headers/rewards.jpg) no-repeat} #marketing-page #headerImage, #ppc-page #headerImage {width:900px; height:136px; background:url(../images/headers/marketing.jpg) no-repeat} #award-page #headerImage {width:900px; height:136px; background:url(../images/headers/web2.jpg) no-repeat} #wquote-page #headerImage, #website-features-page #headerImage {width:900px; height:136px; background:url(../images/headers/web4.jpg) no-repeat} #web-plan-page #headerImage, #web-services-page #headerImage {width:900px; height:136px; background:url(../images/headers/web5.jpg) no-repeat} #browser-page #headerImage, #web-port-page #headerImage {width:900px; height:136px; background:url(../images/headers/web6.jpg) no-repeat} /* MAINCONTENT ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #mainContent { margin-left:12px; width:878px; background:#fff; min-height:10px; } /* Left Col ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #leftCol { float: left; width: 239px; min-height:200px; position:relative; left:-8px; } #leftCol p {margin:0px} /* Left Col SubNav -----------------------------------------------------------------------------*/ #subTop { width:232px; height:9px; background:url(../images/subNav/top.png) no-repeat; _background:none; margin-top:50px } #subMid { width:232px; min-height:60px; background:url(../images/subNav/mid.png) repeat-y; _background:url(../images/subNav/mid.gif) repeat-y; font-size:14px; font-weight:bold; padding-top:15px; _border-top:1px solid #f0e3b3} #subBot { width:232px; height:21px; background:url(../images/subNav/bot.png) no-repeat; _background:url(../images/subNav/bot.gif) no-repeat} #subMid ul{ } #subMid li{text-indent:38px} #subMid a {display:block; width:100%; height:29px; padding-top:6px; padding-left:10px; text-shadow:1px 1px 2px #ccc } #subMid a:link, #subMid a:visited{color:#642400; } #subMid a:hover, #subMid a:active{color:#642400; background:url(../images/subNav/backNewRoll.png) no-repeat -1px 0; text-decoration:none } .subCurrent {background:url(../images/subNav/backNew.png) no-repeat; } .quoteButton {position:relative; left:51px; top:-11px} /* Right Col ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #rightCol { float: right; width: 525px; padding: 35px 85px 20px 0; _padding-right:20px; min-height:300px } #rightCol a:link, #rightCol a:visited, #rightCol a:hover, #rightCol a:active { font-weight:bold} #rightCol p:first-child, #rightCol h2:first-child, #rightCol h1:first-child {margin-top:0px !important} /* FOOTER ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #footer-background {min-height:200px; width:100%; background:#868686; border-top:1px solid #5c5c5c} #footer { padding:20px 0; text-align:left; line-height:17px; margin:0 auto; width:900px } #footer p {margin: 0;} a.noprint:link {display:none; visibility:hidden;} a.noprint:visited {display:none; visibility:hidden;} a.noprint:hover {display:none; visibility:hidden;} /* FOOTER Home Page ----------------------------------------------------------------------------- -----------------------------------------------------------------------------*/ #footer-background-home {width:900px; height:314px; background:url(../images/footerBackHome.png) no-repeat 6px 0; _background:url(../images/footerBackHome.gif) no-repeat 6px 0} #home-page .footLink {color:#fff; float:left; margin-left:30px; margin-top:50px} .copyHome {font-size:11px; padding-left:30px; clear:both; position:relative; top:100px} /* FOOTER LINKS -----------------------------------------------------------------------------*/ .footLink {color:#fff; float:left; margin-left:30px} .footLink ul {border-left:1px dotted #fde7be; padding-left:10px; margin:10px 0 0 0} #footer a:link, #footer a:visited {color:#fde7be} #footer a:hover, #footer a:active {color:#fff;} .footContact {width:225px; height:153px; padding:15px; background:url(../images/socialBack.gif) no-repeat right top; float:right; text-align:right; color:#122b5e; font-size:12px; margin-right:20px; } #social {padding:5px 30px 0 0; margin-top:20px; background:url(../images/twitter.jpg) right top no-repeat; height:25px; font-size:10px} .footContact p {margin-top:6px !important} .copy {font-size:11px; padding-left:30px; clear:both} /* Content Styles -----------------------------------------------------------------------------*/ .dots {padding-top:15px; margin-top:20px; border-top:1px dotted #d6bf80; clear:right} .dotsBot {padding-bottom:15px; margin-bottom:20px; border-bottom:1px dotted #d6bf80;} .topLink {display:block; width:40px; height:15px; background:url(../images/top.gif) no-repeat; float:right; margin-bottom:10px} .topLink:hover{display:block; width:40px; height:15px; background:url(../images/topRoll.gif) no-repeat} blockquote {padding:15px; background-color:#f3f3f3; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-topright:10px} .bulletList {} .bulletList li {margin-bottom:13px; padding-left:22px; background:url(../images/icons/bullet-arrow.jpg) no-repeat left top} .bulletList li li {margin-bottom:13px; background:none; list-style-type:disc; padding-left:5px } .bulletList li ul {margin-top:10px; margin-left:15px} .bulletList2{margin-left:15px} .bulletList2 li { padding-left:18px; background:url(../images/icons/orange-bullet.jpg) no-repeat left } .teamPic {float:right; border:1px solid #ccc; margin-left:10px; margin-bottom:5px; margin-top:10px; -webkit-box-shadow: 0px 0px 2px #333; -moz-box-shadow: 0px 0px 2px #333} .borderPic {border:1px solid #ccc; -webkit-box-shadow: 0px 0px 2px #333; -moz-box-shadow: 0px 0px 2px #333} .serv-box {border:1px solid #ccc; padding:15px; margin-top:40px; margin-bottom:5px} .serv-box h3 {color:#213051; margin-bottom:10px} .serv-box a:link, .serv-box a:visited, .serv-box a:hover, .serv-box a:active {font-weight:bold} .flashBox {padding:50px 0; border-bottom:1px dotted #ccc; text-align:center} #creditTable td {padding:10px} #clientlist {font-size:14px} .outlinedLI {background:#f8f8f8 !important; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border:2px solid #e3e0e0} .outlinedLI:hover {background:#FFf !important; } /* Logo Page -----------------------------------------------------------------------------*/ #logoTable td{padding:15px; vertical-align:middle; text-align:center} ul#gdSub li:last-child { border-right: none; margin-right: 0; padding-right: 0; } ul#gdSub a:link, ul#gdSub a:visited { color: #999; text-decoration: none; } ul#gdSub a:hover, ul#gdSub a:active { color: #999; text-decoration:underline } ul#gdSub{ float: left; font-size: 16px; *font-size: 15px; list-style: none; margin-left: 0; width: 100%; margin-bottom:15px } ul#gdSub li { border-right: 1px solid #dedede; float: left; line-height: 16px; margin-right: 13px; padding-right: 13px; } #logoTable a img {-webkit-box-shadow: 0px 0px 2px #555; -moz-box-shadow: 0px 0px 2px #555; *border:1px solid #ccc} #logoTable a img:hover {-webkit-box-shadow: 0px 0px 4px #444; -moz-box-shadow: 0px 0px 4px #444} /* Homepage specific -----------------------------------------------------------------------------*/ .homeQuote {float:right; margin:0px; position:relative; top:7px; *top:55px; right:5px; clear:right} #leftColHome {width:520px; padding:40px 0 150px 40px; line-height:23px; float: left; position:relative} #rightColHome {width:242px; padding-right:20px; float:right; padding-top:40px} #quotesBack {background:url(../images/home-quote.gif) top no-repeat; margin-top:25px} #quotes{ font:14px Georgia, "Times New Roman", Times, serif; color:#8e8e8e; position:relative; width:110px; height:150px; padding:35px 10px 0 30px } #author{ color:#8e8e8e; position:absolute; top:120px; left:35px; font-size:12px; font-variant:small-caps; border-top:1px dotted #ccc } /* Forms -----------------------------------------------------------------------------*/ #rightCol input, textarea { background-color:#f9ece3; border:1px solid #868686; padding:3px; width:195px; color:#036; font-weight:bold} input { -webkit-border-radius:5px; -moz-border-radius:5px; } input:focus, textarea:focus {background:#fef9f6 !important; -webkit-box-shadow: 0px 0px 2px #999; -moz-box-shadow: 0px 0px 2px #999;} #rightCol .radio {background:none; width:20px; border:0px} #rightCol input.sm {width:50px} #rightCol .submit { width:100px; background-color:#FFC; border:1px solid #333; cursor:pointer; *border:1px; font-weight:bold; -webkit-border-radius:10px; -moz-border-radius:10px; color:#036; font-weight:bold } #rightCol .submit:hover {background-color:#eee; -webkit-box-shadow: 0px 0px 2px #999; -moz-box-shadow: 0px 0px 2px #999;} .joinbg { background-image: url(../images/join1.gif); background-repeat: no-repeat; background-position: center; } /* Browsers page -----------------------------------------------------------------------------*/ .browsBox {text-align:center; width:259px; float:left; margin-bottom:20px; margin-right:3px} .browsBox img:hover {background-color:#eee; -webkit-box-shadow: 0px 0px 3px #999; -moz-box-shadow: 0px 0px 3px #999;} #flash-alt { background:url(../images/noFlash.jpg) no-repeat; width:900px; height:340px; position:relative; top:59px} #iPhone-content {display:none} /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:transparent url(../jquery-tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; } /* style the trigger elements */ #demo img { border:0; cursor:pointer; margin:0 8px; }