/* Theme Name: Branded Theme URL: http://www.rustydogcreative.com Description: Custom theme developed for RustyDog Creative. Author: Lee Peterson Author URI: http://www.rustydogcreative.com Version: 1.0 Tags: */ /* Dark Orange: #df7036 Light Orange: #efa535 Body Text: #666666 */ /************************************************ * Resets and Forms * ************************************************/ @import url('./reset.css'); @import url('./forms.css'); @font-face { font-family: 'HelveticaNeueLTStd45Light'; src: url('fonts/helveticaneueltstd-lt-webfont.eot'); src: local('?'), url('fonts/helveticaneueltstd-lt-webfont.woff') format('woff'), url('fonts/helveticaneueltstd-lt-webfont.ttf') format('truetype'), url('fonts/helveticaneueltstd-lt-webfont.svg#webfontBE5DyEs6') format('svg'); font-weight: normal; font-style: normal; } /************************************************ * Body * ************************************************/ body {background: #fff url(images/q-body-bg.jpg) top center repeat-x;width: 100%;color: #666;font-size: 11px;line-height:14px;font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;margin: 0px auto;padding: 0px;} div#wrap {background: transparent;width: 900px;margin: 0px auto;padding: 0px;position: relative;} p {margin-bottom:10px;color:#666;font-size:12px;line-height:20px;} li {list-style: none;} #tooltip {z-index:12;position:absolute;background:transparent url(images/tooltip.png) bottom center no-repeat;padding:20px;color:#000;display:none;width:160px;height:60px;} .clear {clear:both;width:100%;} /************************************************ * Header Styles * ************************************************/ h1 {font-size:28px;} h2 {font-size:14px;display:block;padding:0 0 5px;color:#b1b3b6;} h3 {font-size:20px;display:block;padding:0 0 5px;color:#666;} h4 {font-size:18px;display:block;padding:10px 0 5px;color:#b1b3b6;} h5 {font-size:14px;display:block;padding:0 0 5px;color:#df6d36;} h6 {font-size:12px;display:block;padding:0 0 5px;color:#b1b3b6;} /************************************************ * Hyperlinks * ************************************************/ a, a:visited {color: #666;text-decoration: none;} a:hover {color: #eda734;text-decoration: none;} a img {border: none;} a:focus, a:hover, a:active {outline: none;} /************************************************ * Header * ************************************************/ #header {background: transparent;width: 900px;height: 143px;margin: 0px 0px 40px;padding: 0px;overflow: hidden;} h1.logo {width:255px;height:57px;margin:40px 0px 0px;float:left;display:inline;} /************************************************ * Search Form * ************************************************/ div#search {position:relative;float:right;margin:0px;padding:15px 0px;width:565px;height:45px;text-align: right;} /************************************************ * Navbar * ************************************************/ div#nav {position:relative;float:right;margin:75px 0px 0px;height:45px;text-align:right;} div#nav ul {list-style-type: none;} div#nav li {display:inline;float:left;list-style: none;} div#nav li a {display:block;font-size:13px;color:#fff;text-decoration: none;text-transform: uppercase;padding:5px 14px;text-align: center;outline: none;z-index: 10;top: 3px;letter-spacing: 0;position: relative;overflow: hidden;} div#nav li a:hover {text-decoration:none;color:#df7036;} div#nav li a:hover, div#nav li a:active, div#nav li a:visited {border: none;} div#nav li.current_page_item a, div#nav li.current_page_parent a {color:#df7036;} div#nav li.page-item-12 a {padding-right:0px;} /************************************************ * Home Page * ************************************************/ /****************** Home Page Featured *********************/ div.slider-wrap {width:900px;height:350px;overflow:hidden;clear:both;position: relative;background: transparent url(images/loading.gif) center center no-repeat;} div.slider-wrap div.slide-nav {position: absolute;bottom:-15px;right:5px;z-index:6;width:230px;height:35px;} div.slider-wrap div.slide-nav a {padding:6px 9px;background-color:#000;border:2px solid #fff;font-size:12px;font-weight: bold;color:#fff;opacity:0.8;filter: alpha(opacity=80);text-decoration: none;margin-left:7px;} div.slider-wrap div.slide-nav a:hover {opacity:1;filter: alpha(opacity=100);text-decoration: none;} div.slider-wrap div.slide-nav a.activeSlide {background-color:#df7036;border-color:#fff;color:#000;opacity:1;filter: alpha(opacity=100);} div.slider-wrap div.featured {position:absolute;top:30px;right:0;width:225px;} div.feat-info-block {z-index: 6;width:200px;background-color:#000;opacity:0.8;filter: alpha(opacity=80);float:right;} div.feat-info-block div {padding:20px;} div.feat-info-block div h3 {font-size:15px;font-weight:bold;color:#efa535;padding:0px 0px 8px 0px;opacity:1;filter: alpha(opacity=100);} div.feat-info-block div p {color:#fff;opacity:1;filter: alpha(opacity=100);} div.feat-info-block div a {font-size:10px;font-weight:bold;text-transform: uppercase;text-decoration: none;color:#efa535;padding:5px 0px;} div.feat-info-block div a:hover {text-decoration: none;color:#fff;} div.feat-link0, div.feat-link1, div.feat-link2, div.feat-link3, div.feat-link4, div.feat-link5 {display:none;z-index: 7;width:200px;background-color:#fff;position: relative;float: right;} div.feat-link0 a, div.feat-link1 a, div.feat-link2 a, div.feat-link3 a, div.feat-link4 a, div.feat-link5 a {color:#000;text-decoration: none;font-weight: bold;font-size: 11px;display:block;padding:15px 20px;} div.feat-link0 a:hover, div.feat-link1 a:hover, div.feat-link2 a:hover, div.feat-link3 a:hover, div.feat-link4 a:hover, div.feat-link5 a:hover {color:#df7036;text-decoration: underline;} a.feat-btn {cursor: pointer;} /****************** Home Page Statement *********************/ div.mission {margin:0px 0px 0px;padding:20px 0px 0px;border-bottom:1px solid #ccc;} div.mission p.statement {font-family: 'HelveticaNeueLTStd45Light';font-size:24px;line-height:30px;color:#df7036;line-height: normal;margin-bottom:18px !important;} div.mission span.cufon {margin-bottom:10px;} div.mission p.statement a {border-bottom:1px solid #eee;border-spacing: 3px;} /****************** Home Page Bottom *********************/ div.home-bottom {width:900px;height:325px;margin-top:50px;} /****************** Info Block *********************/ div.home-block, div.services {width:420px;margin-right:60px;float:left;} div.home-block h2 {padding:15px;padding-top:0px;font-size:20px;color:#df7036;border-bottom:1px solid #ccc;} div.home-block ul li {margin-bottom:10px;} div.home-block ul li.content {font-size:12px;padding:20px;line-height:20px;} div.services, div.latest-work {margin-right:0px;position: relative;} div.services h2 {padding:0px 15px 15px;font-size:20px;color:#df7036;border-bottom:1px solid #ccc;} div.services h3 {font-size:14px;color:#df7036;margin:0px 0px 10px 0px;padding:0px 0px 5px 5px;border-bottom:1px solid #ccc;display:block;} div.services p {font-size:11px;line-height:16px;color:#666;padding:0px 0px 5px 5px;} div.services li {width:150px;padding:10px 10px 10px 50px;display:inline;float:left;} div.services li.design {background: url(images/li-print-design-ovr.png) 0px 10px no-repeat;} div.services li.brand {background: url(images/li-brand-ovr.png) 0px 10px no-repeat;} div.services li.print {background: url(images/li-print-ovr.png) 0px 10px no-repeat;} div.services li.web {background: url(images/li-web-ovr.png) 0px 10px no-repeat;} div.latest-blog ul li {margin-bottom:0px !important;} div.latest-blog a {padding:10px 15px;display: block;font-size:12px;color:#666;border-bottom:1px solid #eee;} div.latest-blog a:hover {color:#df7036;} div.latest-blog span.meta {font-size: 10px;margin-left:15px;} div.latest-work div.slider {width:340px;height:210px;overflow:hidden;display: inline;position: absolute;top:10px;left:5px;} div.latest-work a#prev, div.latest-work a#next {display: block;height:34px;width:35px;margin-top:75px;text-indent: -9999px;} div.latest-work a#prev {float:left;background: url(images/latest-arrows.png) 0px 0px no-repeat;} div.latest-work a#prev:hover {background: url(images/latest-arrows.png) 0px -34px no-repeat;} div.latest-work a#next {float:right;background: url(images/latest-arrows.png) -35px 0px no-repeat;} div.latest-work a#next:hover {background: url(images/latest-arrows.png) -35px -34px no-repeat;} /************************************************ * Content * ************************************************/ div#content {width: 900px;margin: 0px;padding:0px;overflow: hidden;} div#content h4 {font-size:24px;line-height:36px;color:#df7036;margin-bottom:15px;padding:0px;} div#content div.recent-projects {width:460px;height:190px;} div#content div.recent-projects ul {list-style-type: none;display:block;width:460px;} div#content div.recent-projects li {display:inline;float:left;list-style: none;width:65px;height:65px;border:5px solid #eee;margin-right:20px;} div#content div.recent-projects li:hover {border-color: #b1b3b6;} div#content div.recent-projects li.last {margin-right:0;} div#content div.recent-projects li a {text-decoration: none;border: 0;padding:0;margin:0;} div#content div.info {width:900px;height:105px;} div#content div.info li {list-style: none;font-size:10px;padding:3px 0;} div.contact, div.credentials {float:left;display:inline;height:105px;} div.contact {width:170px;margin-right:22px;} div.credentials {width:268px;} div#content div.contact ul {list-style-type: none;display:block;width:170px;} div#content div.credentials ul {list-style-type: none;display:block;width:268px;} div.page-content {float:left;display:inline;width:590px;position: relative;} a.bold {font-weight: bold;color:#de6d36;} a.bold:hover {color:#000;} /****************** About Tabs *********************/ ul.about-nav {width:200px;float:left;height:400px;border-right:1px solid #df7036;} ul.about-nav li {display: block;clear:both;} ul.about-nav li a {display: block;padding:20px 0px;background-color:#fff;color:#de6d36;} ul.about-nav li a:hover {color:#000;} ul.about-nav li a.selected {border-top:1px solid #df7036;border-bottom:1px solid #df7036;margin-right:-1px;color:#000;} ul.about-nav li a.first {border-top:0px;padding-top:0px;} span.name {font-size:18px;} span.title {font-size:12px;font-style: italic;} div#lee, div#rob, div#kel {float:right;width:365px;margin-left:10px;} div#lee span.title, div#rob span.title, div#kel span.title {margin-left:25px;} div#lee h3, div#rob h3, div#kel h3 {padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #ccc;} /****************** Left Side *********************/ div.left-side {width:255px;margin-right:50px;float:left;} div.left-side div.widget {clear:both;width:225px;margin-top:60px;/* background-color:#eee; */float:right;} h2.widgettitle {font-size:18px;} div.widget ul#project-list {background: url() top right repeat-y;} div.widget ul#project-list li a {padding:7px 0px 7px 5px;border-bottom:1px solid #ccc;color:#666;text-decoration: none;display: block;} div.widget ul#project-list li a.first {border-top:1px solid #ccc;} div.widget ul#project-list li a:hover {color:#df7036;text-decoration: none;} ul#project-list span.go {float:right;width:6px;height:12px;background: url(images/go-arrows.png) 0 0 no-repeat;} ul#project-list li a:hover span.go {background-position: 0px -12px;} /****************** Right Side *********************/ div.right-side {width:590px;float:left;} div.about-photo {width:370px;height:224px;margin-bottom:40px;clear:both;background-color:#eee;} div.pref-tools {width:350px;height:150px;} div.pref-tools div {width:130px;float:left;margin-left:20px;} div.pref-tools h4 {font-size:14px;color:#df7036;margin-bottom:7px;} div.pref-tools div li {padding:5px 0px;margin-left:20px;font-size:10px;} div.section-header {height:225px;overflow:hidden;margin-bottom:30px;background-color:#de6d36;-moz-border-radius: 5px;-webkit-border-radius:5px;position: relative;} div.section-header img {display:inline;float:right;} div.section-header span.cufon-canvas {background-color:#de6d36;padding-top:5px;} h2.quote {font-size:22px;line-height:24px;} h2.quote span, h2.page-header span {margin-bottom:7px;} h2.header {color:#fff;width:375px;position: absolute;top:15px;left:15px;z-index: 2;} h2.page-header {font-size:22px;color:#de6d36;margin-bottom:25px;} div.section-header p.quote-req {position: absolute;bottom:20px;left:48px;width:100px;height:35px;} div.section-header a {display: block;text-indent: -9999px;width:100px;height:35px; background: transparent url(images/get-a-quote-tab.png) 0 0 no-repeat;} div.section-header a:hover {background: transparent url(images/get-a-quote-tab.png) 0px -35px no-repeat;} ul.section-services li {width:225px;min-height:205px;margin-bottom:15px;padding:10px;/* -moz-border-radius: 5px;-webkit-border-radius:5px; */} ul.section-services li.left, ul.section-services li.right {float:left;margin-left:30px;} ul.section-services li.left {} ul.section-services h3 {color:#666;margin:10px 0px 0px;padding-left:60px;} ul.section-services a {display: block;} ul.section-services a:hover {color:#666;} ul.section-services li.web {background: url(images/screen_32.png) 20px 37px no-repeat;} ul.section-services li.seo {background: url(images/activity_monitor_chart.png) 20px 37px no-repeat;} ul.section-services li.cms {background: url(images/basket_32.png) 20px 37px no-repeat;min-height:165px;border-top:1px solid #ccc;} ul.section-services li.hosting {background: url(images/database_32.png) 20px 37px no-repeat;min-height:165px;border-top:1px solid #ccc;} ul.section-services li.facebook {background: url(images/facebook_32.png) 20px 37px no-repeat;border-top:1px solid #ccc;} ul.section-services li.twitter {background: url(images/twitter_32.png) 20px 37px no-repeat;border-top:1px solid #ccc;} ul.section-services li:hover {} div.service {margin-bottom: 40px;} div.service-image {width:200px;height:200px;} div.left div.service-image {float:right;margin-left:15px;} div.right div.service-image {float:left;margin-right:20px;} div.half {width:240px;padding:20px;float:left;margin-bottom: 40px;} /******* About *******/ ul.approach-list {width:280px;float:left;margin:0px 15px 20px 0px;} ul.approach-list li {font-size:14px;color:#333;padding:12px 5px 12px 40px;background: transparent url(images/small-check.png) 0px 2px no-repeat;} div.process h3.service-title {margin-top:25px;} ul.process-list li {font-size:14px;color:#333;padding:12px 5px 12px 40px;background: transparent url(images/small-check.png) 0px 2px no-repeat;} li.process {padding-left:50px;} li.step-one {background: transparent url(images/comment_user_info_32.png) 2px 0px no-repeat;} li.step-two {background: transparent url(images/activity_monitor.png) 2px 0px no-repeat;} li.step-three {background: transparent url(images/lightbulb_32.png) 2px 0px no-repeat;} li.step-four {background: transparent url(images/page_table_32.png) 2px 0px no-repeat;} li.step-five {background: transparent url(images/screen_32.png) 2px 0px no-repeat;} li.step-six {background: transparent url(images/window_app_32.png) 2px 0px no-repeat;} li.step-seven {background: transparent url(images/web_layout_32.png) 2px 0px no-repeat;} li.step-eight {background: transparent url(images/users_business_32.png) 2px 0px no-repeat;} li.step-nine {background: transparent url(images/newspaper_32.png) 2px 0px no-repeat;} /******* Contact *******/ div.contact-info {width:235px;float:left;margin-right:50px;} div.contact-info h2 {margin-bottom:10px;} div.contact-form {width:285px;float:left;} div.contact-form input, div.contact-form textarea {width:275px;padding:5px;} p.contact-field {width:280px;} div.contact-info p {margin-bottom:10px;} div.contact-info span.phone {background: url(images/phone.png) 0 0 no-repeat;padding:5px 0px 5px 25px;} div.contact-info span.fax {background: url(images/fax.png) 0 0 no-repeat;padding:5px 0px 5px 25px;} div.contact-info span.email {background: url(images/email.png) 0 0 no-repeat;padding:5px 0px 5px 25px;} div.contact-info span.address {background: url(images/address.png) 0 0 no-repeat;padding:5px 0px 5px 25px;} .side-nav li.page-item-279 {display: none;} body.page-id-279 .gform_body {padding-left:5px;} input[type="text"], input[type="submit"], textarea {border-color:#DE6D36;-webkit-box-shadow:#DE6D36; padding:7px !important;background: url(images/text-bg.jpg) 0 0 repeat; opacity: 0.6; /* Firefox */ -moz-transition: opacity 0.25s ease 0.5s; /* WebKit */ -webkit-transition: opacity 0.25s ease 0.5s; /* Opera */ -o-transition: opacity 0.25s ease 0.5s; /* Standard */ transition: opacity 0.25s ease 0.5s; } body.page-id-279 input[type="text"], body.page-id-279 input[type="submit"], body.page-id-279 textarea {margin:5px !important;} input[type="text"]:focus, textarea:focus {opacity:1; -webkit-box-shadow: 0px 0px 5px #DE6D36;} input[type="submit"] {background-image: none;} input[type="submit"]:hover {color:#fff !important;} body.page-id-279 .page-title {font-size:20px;line-height:20px;margin-bottom:20px;color:#DF7036;} body.page-id-279 .gfield {margin-bottom:15px;} body.page-id-279 .gform_wrapper .ginput_complex .name_prefix, body.page-id-279 .gform_wrapper .ginput_complex .name_suffix {width:60px !important;} body.page-id-279 .gform_wrapper .datepicker {width:200px !important;} .gform_wrapper {max-width: 900px !important;} .gform_description {font-size:14px !important;line-height: 20px !important;} /****************** Our Work *********************/ div.our-work div.page-content {width:900px;display:block;} div.our-work h2.page-title {font-size:20px;color:#df7036;margin-bottom:30px;/* margin-left:20px; */text-align: left;} div.our-work div.work-piece {width:280px;height:350px;/* background-color:#ccc; */margin:0px 30px 75px 0px;float:left;position: relative;} div.our-work div.work-piece-last {margin-right:0px;} ul.work-slider {clear:both;margin-bottom:10px;height:180px;overflow: hidden;} div.our-work a#prev, div.our-work a#next {width:120px;height:30px;display:block;float:left;} div.our-work a#next {float: right;text-align: right;} div.our-work h3 {font-size:14px;color:#444;font-weight: bold;} div.work-piece div {height:10px;} div.work-piece div a {display:block;width:7px;height:7px;float:left;margin-right:5px;background: transparent url(images/nav-dots.png) 0 0 no-repeat;outline:none;text-align: left;text-indent: -9999px;} div.work-piece div a.activeSlide {background-position: 0px -7px;} div#work-container {position: relative;} ul#work-navigation {height:65px;} ul#work-navigation li {display:inline;float:left;margin-right:40px;} ul#work-navigation li a {padding:7px 14px;margin-bottom:7px;outline: none;font-size:14px;color:#444;font-weight: lighter;text-decoration: none;border-bottom:3px solid #df7036;} ul#work-navigation li a.selected {background-color:#df7036;color:#fff;-moz-border-radius: 5px;-webkit-border-radius: 5px;} div#work-container #w, div#work-container #p, div#work-container #b {clear:both;margin:20px 0px;} div#work-container #p div.work-piece {height:250px;} ul#portfolio {display:block;} li.portfolio-piece {padding:5px;display:inline;float:left;margin-right:15px;width:150px;} li.portfolio-piece:hover {background-color:#eee;-moz-border-radius: 5px;-webkit-border-radius: 5px;} /************************************************ * Side Nav * ************************************************/ div.side-nav {text-align: right;clear:both;width:255px;} div.side-nav h2.page-title {font-size:20px;color:#df7036;margin-bottom:10px;/* margin-left:20px; */text-align: right;} div.side-nav li {position:relative;} div.side-nav li a {padding:10px 0px;margin-left:40px;font-size:14px;display:block;text-align: right;} div.side-nav ul li ul li a {margin-left:50px;font-size:12px;color:#df7036;padding:3px 0px;text-align: right;} div.side-nav li.current_page_item a {color:#000;} /************************************************ * Footer * ************************************************/ #footer {background:transparent url(images/footer-bg.png) top center no-repeat;width:900px;margin:30px 0px 0px;padding:0px;overflow: hidden;} #footer ul.footer-intro {margin-top:60px;display: block;height:60px;position: relative;} #footer ul li {display: inline;margin-right:15px;float:left;position: relative;} #footer ul li a {padding:3px 6px;display: block;} #footer span {font-size:10px;float: right;} /* Colorbox */ /* ColorBox Core Style The following rules are the styles that are consistant between all ColorBox themes */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com */ #cboxOverlay{background:url(images/overlay.png) 0 0 repeat;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) -100px 0 no-repeat;} #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) -129px 0 no-repeat;} #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) -100px -29px no-repeat;} #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) -129px -29px no-repeat;} #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:3px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;} #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;}