/* Theme Name: Certified Connections Website theme Theme URI: n/a Description: A design for Certified Connections. Version: 1 Author: Jackrabbit Design Author URI: http://jumpingjackrabbit.com Name v1 This site was designed and built by Jackrabbit Design, whose website you will find at jumpingjackrabbit.com */ /* ========================================================================= */ /* FONTS */ /* ========================================================================= */ /* = Delicious ====================================== */ @font-face { font-family: 'DeliciousItalic'; src: url('../fonts/Delicious/Delicious-Italic.eot'); src: local('Delicious Italic'), local('Delicious-Italic'), url('../fonts/Delicious/Delicious-Italic.ttf') format('truetype'); } @font-face { font-family: 'DeliciousRoman'; src: url('../fonts/Delicious/Delicious-Roman.eot'); src: local('Delicious Roman'), local('Delicious-Roman'), url('../fonts/Delicious/Delicious-Roman.ttf') format('truetype'); } @font-face { font-family: 'DeliciousHeavy'; src: url('../fonts/Delicious/Delicious-Heavy.eot'); src: local('Delicious Heavy'), local('Delicious-Heavy'), url('../fonts/Delicious/Delicious-Heavy.ttf') format('truetype'); } @font-face { font-family: 'DeliciousBoldItalic'; src: url('../fonts/Delicious/Delicious-BoldItalic.eot'); src: local('Delicious BoldItalic'), local('Delicious-BoldItalic'), url('../fonts/Delicious/Delicious-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'DeliciousBold'; src: url('../fonts/Delicious/Delicious-Bold.eot'); src: local('Delicious Bold'), local('Delicious-Bold'), url('../fonts/Delicious/Delicious-Bold.ttf') format('truetype'); } @font-face { font-family: 'DeliciousSmallCaps'; src: url('../fonts/Delicious/Delicious-SmallCaps.eot'); src: local('Delicious SmallCaps'), local('Delicious-SmallCaps'), url('../fonts/Delicious/Delicious-SmallCaps.ttf') format('truetype'); } /* ========================================================================= */ /* UNIVERSAL STYLES */ /* ========================================================================= */ * { margin: 0; padding: 0; } html, body { font: normal 12px/150% 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Arial, sans-serif; color: #474747; background: #3D4049 url(../images/bg_body.gif) repeat-x 0 0; } body.index { background: #3D4049 url(../images/bg_body-index.gif) repeat-x 0 0; } /* ========================================================================= */ /* LAYOUT STYLES */ /* ========================================================================= */ #wrapper { width: 960px; margin: 0 auto; padding: 1px 0 0 0; } #header { height: 79px; padding: 15px 0 0 0; } #banner { height: 335px; padding: 1px 0 0 0; background: url(../images/bg_banner.jpg) no-repeat 50% 1px; } #contentarea { background: #fff; clear: both; margin: 1px 0 0 0; padding: 1px 0 0 0; overflow: hidden; } #contentarea.index { margin: 1px 0 30px 0; } #content-main { float: left; width: 500px; margin: 30px 0; padding: 0 30px; border-right: 4px solid #eee; } #content-sub { float: right; width: 340px; margin: 30px 0; padding: 0 30px 0 0; } #store { background: #2A2C38; float: left; width: 520px; overflow: hidden; } #blogpreview { background: #2A2C38; float: left; width: 480px; overflow: hidden; padding:0 20px; } #flickr { width: 400px; float: right; border: 4px solid #2A2C38; border-right: none; border-left: none; padding: 5px 0 15px 0; } #footer { clear: both; border-bottom: 4px solid #2A2C38; overflow: hidden; margin: 0 0 40px 0; *padding-bottom: 20px; } /* ========================================================================= */ /* ELEMENT STYLES */ /* ========================================================================= */ h1 { margin: 20px 0; color: #186fa4; font: normal 36px/100% 'DeliciousBold'; } h1 a { color: #186fa4; } h1 a:hover { color: #6AAE1B; text-decoration: none; } h1 span { font: normal 16px/150% 'DeliciousRoman'; display: block; color: #888; } h1 span.searchterm { text-transform: capitalize; font-size: 20px; } h2 { margin: 20px 0; color: #186fa4; font: normal 24px/100% 'DeliciousBold'; } h2 a { color: #186fa4; } h2 a:hover { color: #6AAE1B; text-decoration: none; } h2 em { color: #6AAE1B; font-style: normal; } h2 span { font: normal 16px/150% 'DeliciousRoman'; display: block; color: #888; } h3 { margin: 20px 0; color: #6AAE1B; font: normal 18px/100% 'DeliciousBold'; } h4 { font-size: 16px; margin: 20px 0; color: #BCE5F8; font-weight: bold; } p { margin: 20px 0; } ul { margin: 20px; } ol { margin: 20px 20px 20px 25px; } a { color: #6AAE1B; text-decoration: none; } a:hover { text-decoration: underline; } a:focus { border: none; outline: none; } blockquote { margin: 20px 20px 0 20px; } cite { margin: 0 20px 20px 20px; } /* = ELEMENT STYLES: Classes and ID's ====================================== */ h1.logo { float: left; margin: 0; } h1.logo a { display: block; text-indent: -9000px; background: url(../images/logo.jpg) no-repeat 0 0; width: 224px; height: 60px; } p.phone { float: right; color: #2a99c5; font: normal 22px/150% 'DeliciousRoman'; margin: 0 0 0 0; } a.button { display: inline-block; padding: 0 0 0 5px; color: #fff; font-family: 'DeliciousBold'; text-transform: uppercase; font-size: 14px; text-shadow: #000 0 -1px 0; margin: 0 0 0 0; } a.button span { display: inline-block; line-height: 33px; padding: 0 15px 0 10px; } a.button:hover { text-decoration: none; } a.button.black { background: url(../images/button.gif) no-repeat 0 -200px; } a.button.black span { background: url(../images/button.gif) no-repeat 100% 0; } a.button.black:hover { background: url(../images/button.gif) no-repeat 0 -300px; } a.button.black:hover span { background: url(../images/button.gif) no-repeat 100% -100px; } a.button.blue { background: url(../images/button.gif) no-repeat 0 -300px; } a.button.blue span { background: url(../images/button.gif) no-repeat 100% -100px; } a.button.blue:hover { background: url(../images/button.gif) no-repeat 0 -200px; } a.button.blue:hover span { background: url(../images/button.gif) no-repeat 100% 0; } #banner img { float: left; margin: 0 40px 0 0; } #banner h2 { color: #1691c0; font: normal 24px/120% 'DeliciousHeavy'; } #banner p { font-size: 14px; line-height: 150%; color: #3D4049; } ul#tabs { list-style: none; margin: 0; background: url(../images/bg_tabs.jpg) repeat-x 0 0; overflow: hidden; clear: both; text-align: center; } ul#tabs li { display: inline; margin: 0; padding: 0; } ul#tabs li a { color: #ddd; font-size: 13px; font-family: 'DeliciousRoman'; text-transform: uppercase; line-height: 43px; display: inline-block; padding: 0 10px; } ul#tabs li a:hover, ul#tabs li.active a { background: #121010 url(../images/bg_tabs-hover.gif) no-repeat 50% 100%; color: #fff; text-decoration: none; } .tab_container { height: 300px; } .tab_content { height: 280px; margin: 20px 30px 0 30px; font-size: 11px; } .tab_content ul { float: right; width: 640px; margin: 0; list-style: none; } .tab_content ul li { float: left; width: 170px; margin: 0 0 0 25px; padding: 0 0 0 15px; background: url(../images/icon_plus.gif) no-repeat 0 6px; font-size: 11px; } .tab_content ul li strong { color: #186fa4; font-size: 12px; } .tab_content p { font-weight: bold; } #store h4 { background: url(../images/icon_cart.gif) no-repeat 0 0; padding: 0 0 20px 60px; margin: 20px 20px 0 20px; border-bottom: 4px solid #3D4049; } #store { color: #ccc; } #store .tags { float: left; width: 220px; border-right: 1px solid #3D4049; padding: 0 20px; color: #8EC54A; margin: 0 20px 20px 0; } #store .tags a { color: #8EC54A; text-decoration: underline; font-size: 11px; line-height: 200%; } #store .tags a:hover { color: #fff; text-decoration: underline; } #blogpreview { color: #ccc; } #blogpreview h3 { margin: 20px 0 0 0; } #blogpreview h3 span { font-size: 12px; color: #ccc; } #blogpreview p { margin: 5px 0 30px 0; } #blogpreview a.more { float: right; text-transform: uppercase; font-size: 10px; display: block; margin: 0 0 20px 0; } #blogpreview .tags { float: left; width: 220px; border-right: 1px solid #3D4049; padding: 0 20px; color: #8EC54A; margin: 0 20px 20px 0; } #blogpreview .tags a { color: #8EC54A; text-decoration: underline; font-size: 11px; line-height: 200%; } #blogpreview .tags a:hover { color: #fff; text-decoration: underline; } #flickr h4 { margin: 5px 0 10px 0; } #flickr h4 a { color: #fff; font-size: 10px; } #flickr h4 a:hover { color: #ccc; text-decoration: none; } #flickr * a img { border: none; } #flickr .gallery { background: #fff; padding: 10px; overflow: hidden; } #flickr .gallery ul.gallery-item { float: left; width: 316px; height: 188px; overflow: hidden; margin: 0; } #flickr .gallery ul.gallery-item li { display:none; list-style: none; } #flickr .gallery ul.gallery-item li:first-child { display:list-item; margin: 0; padding: 0; } #flickr .gallery ul.gallery-item li img { width: 316px; } #flickr .gallery ul.gallery-list { float: right; background: #3D4049; margin: 0; list-style: none; width: 53px; height: 184px; padding: 4px 0 0 0; } #flickr .gallery ul.gallery-list li a { color: #ccc; text-transform: uppercase; font-size: 10px; line-height: 18px; display: block; font-weight: bold; padding: 0 0 0 7px; } #flickr .gallery ul.gallery-list li.active a, #flickr .gallery ul.gallery-list li a:hover { color: #fff; text-decoration: none; background: #186fa4; } p.copyright { float: left; color: #8c8c8c; font-size: 10px; } p.copyright a img { border: none; vertical-align: -2px; } #content-sub img { margin: 0 0 20px 0; } #content-sub p { margin: 20px 0 0 0; } #content-sub h3 { margin: 20px 0 0 0; color: #186fa4; font: normal 16px/120% 'DeliciousBold'; } #content-sub ul { margin: 0; list-style: none; } #content-sub ul li { margin: 10px 0; padding: 0 0 0 15px; background: url(../images/icon_plus.gif) no-repeat 0 6px; font-size: 11px; } #content-sub ul li strong { color: #186fa4; font-size: 12px; } .testimonial { border-bottom: 4px solid #eee; } .testimonial p { margin: 20px 0 0 0; } .testimonial p.testimonial-author { margin: 10px 0 20px 0; font-size: 10px; font-weight: bold; text-align: right; } .blog { border-bottom: 4px solid #eee; padding: 0 0 0 0; } .blog p { margin: 20px 0; } #flickr-gallery { list-style: none; } #flickr-gallery li { float: left; margin: 20px 20px 0 0; } #flickr-gallery li a img { border: 1px solid #ccc; } #flickr-gallery li a:hover img { border: 1px solid #6AAE1B; } #jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; } #jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #jquery-lightbox a img { border: none; } #lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding: 10px; } #lightbox-loading { position: absolute; top: 40%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; } #lightbox-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #lightbox-container-image-box > #lightbox-nav { left: 0; } #lightbox-nav a { outline: none; } a#lightbox-nav-btnPrev, a#lightbox-nav-btnNext { width: 49%; height: 100%; zoom: 1; display: block; font-weight: bold; text-decoration: none; color: #186FA4; } a#lightbox-nav-btnPrev { left: 0; float: left; } a#lightbox-nav-btnPrev span { display: none; } a:hover#lightbox-nav-btnPrev span { display: block; width: 100px; line-height: 25px; text-align: center; float: left; margin: 20px 0 0 0; background: #fff; } a#lightbox-nav-btnNext { right: 0; float: right; } a#lightbox-nav-btnNext span { display: none; } a:hover#lightbox-nav-btnNext span { display: block; width: 100px; line-height: 25px; text-align: center; float: right; margin: 20px 0 0 0; background: #fff; } #lightbox-container-image-data-box { background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px; } #lightbox-container-image-data { padding: 0; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1em; font-size: 10px; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: .7em; text-transform: uppercase; font-size: 10px; text-align: right; font-weight: bold; text-decoration: none; color: #186FA4 } .postnav { overflow: hidden; padding: 10px 0 0 0; font-size: 10px; text-transform: uppercase; font-weight: bold; } .postnav a { color: #aaa; } .postnav a:hover { color: #6AAE1B; text-decoration: none; } .postnav .left { float: left; } .postnav .right { float: right; } p.tags { font-size: 10px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 2px 5px; background: #fafafa; text-transform: capitalize; } p.tag-cloud a { text-transform: capitalize; display: inline-block; color: #999; background: #f4f4f4; padding: 2px 5px; line-height: 100%; margin: 4px 2px; } p.tag-cloud a:hover { color: #fff; background: #6AAE1B; text-decoration: none; } #comments { margin: 40px 0 0 0; } #comments ul { list-style: none; margin: 0 0 40px 0; } #comments ul li { border-bottom: 1px solid #e0e0e0; overflow: hidden; padding: 10px 20px; } #comments ul li.even { background: #f6f6f6; } #comments ul li img { float: left; margin: 10px 0 0 0; } #comments ul li span.name { display: block; float: left; margin: 10px 0 0 20px; width: 360px; font-size: 10px; } #comments ul li p { margin: 10px 0 10px 0; font-size: 12px;} /* ========================================================================= */ /* NAV STYLES */ /* ========================================================================= */ ul#nav { float: right; list-style: none; margin: 3px 0 0 0; *clear: right; *width: 650px; } ul#nav li { float: left; } ul#nav li a { color: #e0e0e0; text-transform: uppercase; display: block; padding: 0 20px; font: normal 19px/43px 'DeliciousBold', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Arial, sans-serif; } ul#nav li a:hover { text-decoration: none; color: #fff; background: url(../images/bg_nav-hover.gif) no-repeat 50% 100%; } /* ========================================================================= */ /* FORM STYLES */ /* ========================================================================= */ form { margin: 20px 0; } form ul { margin: 0; padding: 0; } form li { list-style: none; border-bottom: 1px solid #eee; overflow: hidden; padding: 10px 0; } form li div { margin: 0; float: right; width: 300px; } form li div span.mmf-list-item { display: block; margin: 5px 0; } label.description { display: block; float: left; font-weight: bold; width: 150px; } label.choice { padding-left: 5px; } input.text { width: 300px; background: #e6e6e6; color: #3D4049; border: none; padding: 3px; float: right; } input.required { background: #e6e6e6 url(../images/icon_required.gif) no-repeat 99% 50%; } input.checkbox { } input.radio { } li.submit input, input.submit { background: #186fa4; color: #fff; font-size: 10px; border: none; padding: 1px 2px 0 2px; display: inline-block; line-height: 16px; width: 50px; text-transform: uppercase; *border: 1px solid #222; border-bottom: 1px solid #222; border-top: 1px solid #3b93c9; } li.submit input:hover, input.submit:hover { background: #3b93c9; border-top: 1px solid #59aadb; } textarea { width: 300px; height: 100px; font: normal 11px/150% 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Arial, sans-serif; background: #e6e6e6; color: #3D4049; border: none; padding: 3px; margin: 5px 0; float: right; } select { width: 300px; float: right; } .mmf-not-valid-tip-no-ajax { display: none; } .mmf-validation-errors { background: #a00; padding: 5px; text-align: center; color: #fff; } .mmf-mail-sent-ok { background: #4e9d10; padding: 5px; text-align: center; color: #fff; } .mmf-form-control-wrap input.text { *margin-top: -20px; } #footer form { float: right; margin: 20px 0 0 0; } #footer form input.text { width: 150px; color: #fff; background: #2A2C38; margin: 0; float: none; } #content-sub form ul li { background: none; padding: 10px 0 10px 15px; margin: 0; } #content-sub form ul li input { float: left; } #content-sub form ul li textarea { float: left; } #content-sub form ul li img { margin: 0; } #comments input.submit { width: 120px; } input#comment_post_ID, input#comment_parent { display: none; }