/* Theme Name: Devstars 2010 Theme URI: http://devstars.com/ Description: The 2010 theme for Devstars. Author: Dev = Paul Davis (Devstars) / Design = Alan Long (Sane & Able) Version: 1.0 */ /***** HTML5 CSS RESET *****/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,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%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display:block;}nav ul {list-style:none;}blockquote,q {quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title],dfn[title] {border-bottom:1px dotted #000;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select {vertical-align:middle;}* {outline: none; -webkit-text-size-adjust: none;} .clear {clear: both;} /***** GLOBAL *****/ html {overflow-y: scroll;} body {font-family: Arial, sans-serif; font-size: 62.5%; background: #333; color: #fff;} #bgImage {min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;} .wrap {width: 900px; margin: 0 auto; clear: both; position: relative;} /***** SECTIONS *****/ /* Header */ header {margin: 0 0 42px 0;} header #logo a {margin: 28px 0 36px 0; display: block; width: 188px; height: 42px; text-indent: -5000px; background: url(images/sprite.png) 0px 0px;} header nav {} header nav ul {overflow: hidden;} header nav ul li {float: left; font-size: 14px; display: block; width: 180px; height: 62px;} header nav ul li a {text-decoration: none; padding: 0 0 0 10px; display: block; width: 169px; height: 62px; border-left: 1px dotted #fff;} header nav ul li a:link, header nav ul li a:visited {color: #fff; display: block;} header nav ul li a:active, header nav ul li a:hover {color: #fff; background: url(images/white05.png) repeat bottom;} header nav ul li.active a {font-weight: bold; color: #ffbf17;} header nav ul li.navCallUs {display: block; width: 169px; height: 62px; border-left: 1px dotted #fff; padding: 0 0 0 10px; font-size: 16px;} header nav ul li.navCallUs .callUs {background: url("images/sprite.png") -112px -89px; display: block; height: 20px; text-indent: -5000px; width: 60px;} header nav ul li.navCallUs a {border: 0; padding: 0;} header nav ul li.navCallUs a:hover, header nav ul li.navCallUs a:active {background: none;} /* Footer */ footer {clear: both; background: transparent url(images/footerBg3.png) top repeat-x; margin: 100px 0 50px 0; width: 900px; position: relative; left: -15px; padding: 15px; z-index: 100;} footer section {float: left; width: 169px; border-left: 1px dotted #fff; padding: 0 0 0 10px;} footer section h5 {color: #ffbf17; font-size: 11px; font-weight: bold; margin: 0 0 10px 0;} footer p {font-size: 11px; line-height: 16px;} footer section nav ul li {display: block;} footer section nav ul li a {font-size: 11px; line-height: 16px; display: block;} footer section nav ul li a:link, footer section nav ul li a:visited {color: #fff; text-decoration: none;} footer section nav ul li a:active, footer section nav ul li a:hover, footer section nav ul li a:focus {color: #ffbf17;} footer #footerBlurb {width: 180px; border: 0; padding: 0;} footer #footerBlurb p {width: 50px; height: 32px; text-indent: -5000px; background: url(images/sprite.png) -110px -118px;} footer #footerAgencies {position: absolute; top: -46px; right: -36px; width: 102px; height: 137px; text-indent: -5000px; background: url(images/sprite.png) 0px -53px;} footer #photoBy {width: 7px; height: 33px; background: url(images/photoBy.png) no-repeat center center; position: absolute; top: 57px; right: -2px; text-indent: -5000px; padding: 3px;} /***** PAGED *****/ /* Home */ #topPortfolio {width: 100%; height: 22px; overflow: hidden; position: relative; background: #666 url(images/topPortfolioBg.png) repeat;} #topPortfolio.on {height: 500px;} #topPortfolioShadow {position: absolute; bottom: 0; left: 0; width: 100%; background: url(images/topPortfolioShadow.png) bottom repeat-x; height: 21px; padding: 0; margin: 0; z-index: 20;} #topPortfolioToggle {position: absolute; bottom: 5px; left: 0; width: 100%; z-index: 20;} #topPortfolioToggle span {display: block; width: 960px; margin: 0 auto; text-align: right;} #topPortfolioToggle a {color: #fff; background: #000; padding: 5px 8px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-size: 12px; text-decoration: none;} #homeBlurb {float: left; width: 500px;} #homeBlurb h2 {color: #fff; font-size: 38px; font-weight: bold; margin: 0 0 10px 0;} #homeBlurb h3 {color: #fff; font-size: 28px; font-weight: normal; line-height: 30px;} #homeLatestNews {float: right; width: 393px; height: 121px; background: url(images/sprite.png) 0px -191px; position: relative; top: -29px;} #homeLatestNews h3 {position: absolute; top: 0px; right: 0; text-indent: -5000px;} #homeLatestNews .rssIcon {display: block; text-indent: -5000px; width: 14px; height: 14px; background: url(images/sprite.png) -112px -62px; position: absolute; top: 24px; right: 30px;} #homeLatestNews h4 {font-size: 18px; font-weight: normal; padding: 26px 0 10px 32px;} #homeLatestNews h4 a:link, #homeLatestNews h4 a:visited {color: #fff; text-decoration: none;} #homeLatestNews h4 a:active, #homeLatestNews h4 a:focus, #homeLatestNews h4 a:hover {color: #ffbf17;} #homeLatestNews p {font-size: 12px; line-height: 16px; width: 325px; padding: 0 0 0 32px;} #homeAccordion {clear: both; overflow: hidden; height: 100px; padding: 50px 0 0 0; width: 900px;} #homeAccordionInner {width: 2000px;} #homeAccordion .outer {width: 180px; float: left; overflow: hidden;} #homeAccordion .inner {width: 360px; height: 100px; overflow: hidden;} #homeAccordion h3 {width: 168px; float: left; font-size: 20px; line-height: 24px; padding: 10px 0 0 12px;} #homeAccordion p {width: 168px; float: right; padding: 8px 12px 0 0; line-height: 15px;} #homeAccordion a {color: #fff; text-decoration: none;} #homeAccordion .skills h3 {font-size: 28px; font-weight: normal; line-height: 26px;} #homeAccordion .designAndWebDev {background: url(images/green50.png);} #homeAccordion .eCommerce {background: url(images/pink50.png);} #homeAccordion .multilingual {background: url(images/orange50.png);} #homeAccordion .consultancy {background: url(images/blue50.png);} #homeContent {clear: both;} #homeContent p {font-size: 12px; line-height: 16px;} #homeContentTrigger {color: #999; font-size: 20px;} #homeContentTrigger:hover {cursor: pointer;} /* About */ #leftNav {width: 180px; float: left; position: relative; z-index: 200;} #leftNav nav {background: url(images/black40.png);} #leftNav nav ul {} #leftNav nav ul li {} #leftNav nav ul li a {padding: 5px 15px; display: block; font-size: 14px;} #leftNav nav ul li a:link, #leftNav nav ul li a:visited {color: #fff; text-decoration: none;} #leftNav nav ul li a:active, #leftNav nav ul li a:hover, #leftNav nav ul li.current_page_item a {background: #2d272b;} #leftNav nav ul li.current_page_item a, #leftNav nav ul li.active a, #leftNav nav ul li.current-cat a {background: #2d272b url(images/leftNavActive.png) right center no-repeat !important;} #leftNav p {background: url(images/black25.png); line-height: 25px; padding: 0 10px; overflow: hidden;} #leftNav p a {font-size: 9px;} #leftNav p .home {width: 10px; height: 9px; text-indent: -5000px !important; display: block; float: left; background: url(images/breadcrumbHouse.png) no-repeat; margin: 7px 5px 0 0px;} #leftNav p a:link, #leftNav p a:visited {color: #9f9c9e; text-decoration: none;} #leftNav p a:active, #leftNav p a:focus, #leftNav p a:hover {color: #fff;} #leftNav p.darkText a:link, #leftNav p.darkText a:visited {color: #000;} #leftNav p.darkText a:active, #leftNav p.darkText a:focus, #leftNav p.darkText a:hover {color: #fff;} #rightQuote {width: 180px; float: right;} #rightQuote blockquote {font-size: 18px; line-height: 22px;} #rightQuote cite {font-size: 10px; font-style: italic; margin: 5px 0 0 0; display: block;} /* Work */ .workLeftNav {position: absolute; top: 0; left: 0;} .jsNav .workLeftNav nav ul {background: url(images/black80.png) !important;} .workLeftNav nav ul {background: url(images/black40.png);} #workBoxContainer {position: absolute; top: 210px; width: 100%; height: 726px; overflow: hidden;} #workBoxContainerInner {width: 690px; margin: 0 auto; overflow: visible; position: relative; right: -105px;} #workBoxes {position: absolute; width: 4914px;} #workBoxes .box {width: 348px; height: 222px; background: url(images/white50.png); margin: 0 30px 30px 0; display: block; float: left; color: #000; font-size: 20px; cursor: pointer; position: relative; z-index: 100;} #workBoxes .box img {margin: 5px 0 0 5px;} .hoverBox {position: absolute; background: #000; width: 292px; height: 418px; color: #fff; font-size: 12px; padding: 28px; overflow: hidden; z-index: 500;} .hoverBox h3 {color: #ffbf17; font-size: 24px; line-height: 24px; margin: 0 0 4px 0;} .hoverBox h5 {font-size: 16px; font-weight: normal; margin: 0 0 20px 0;} .hoverBox p {font-size: 12px; line-height: 18px; margin: 0 0 10px 0;} .hoverBox .caseStudy {background: #262626 url(images/caseStudyLink.png) left center no-repeat; color: #666; text-decoration: none; padding: 5px 5px 5px 28px; display: block; width: 90px; margin: 20px 0;} .hoverBox h6 {font-size: 11px; color: #444;} .rightHoverBox {left: 378px; top: 0px;} .leftHoverBox {left: -378px; top: 0px;} /* Category Pages */ .workCategoryItem {overflow: hidden; padding: 0 0 30px 0;} .workCategoryItem .image {float: left; padding: 5px; background: url(images/white50.png);} .workCategoryItem .image img {display: block;} .workCategoryItem .content {float: right; width: 256px;} .workCategoryItem .content {background: #000; color: #fff; font-size: 12px; padding: 28px 28px 8px 28px; overflow: hidden;} .workCategoryItem .content h3 {color: #ffbf17; font-size: 24px; line-height: 24px; margin: 0 0 15px 0;} .workCategoryItem .content h5 {font-size: 16px; font-weight: normal; margin: 0 0 20px 0;} .workCategoryItem .content p {font-size: 12px; line-height: 18px; margin: 0 0 10px 0;} .workCategoryItem .content .caseStudy {background: #262626 url(images/caseStudyLink.png) left center no-repeat; color: #666; text-decoration: none; padding: 5px 5px 5px 28px; display: block; width: 90px; margin: 20px 0;} .workCategoryItem .content h6 {font-size: 11px; color: #444;} .workCategoryItem .content .keywords {display: block; padding-bottom: 20px;} /* Center Column */ #centerColumn {width: 476px; padding: 5px 32px 0; float: left;} #centerColumn p {font-size: 13px; line-height: 17px; margin: 0 0 20px 0;} #centerColumn a:link, #centerColumn a:visited {color: #ffbf17; text-decoration: none;} #centerColumn a:active, #centerColumn a:hover {color: #fff; text-decoration: underline;} /* Work No JS */ #centerColumnWider {width: 690px; padding: 5px 0 0 0; float: right;} .compatibleItem {padding: 5px; background: url(images/white50.png); width: 320px; float: left; position: relative; text-decoration: none;} .compatibleItem {margin: 0 30px 30px 0;} .compatibleItem1 {margin: 0 0 30px 0;} .compatibleItem img {display: block; margin: 0 0 5px 0; width: 320px; height: 201px;} .compatibleItem h4 {color: #000; font-weight: bold; font-size: 12px;} .compatibleItem:hover {background-image: url(images/black80.png);} .compatibleItem:hover h4 {color: #ffbf17;} /* Contact */ #contactContent {width: 330px; float: left;} #contactContent p {font-size: 13px; line-height: 17px; margin: 0 0 20px 0;} #contactForm {width: 540px; float: right;} #contactForm form {position: relative; top: -10px;} #contactForm .left {float: left; width: 270px; padding: 0 0 10px 0;} #contactForm .right {float: right; width: 260px; padding: 0 0 10px 0;} #contactForm label {display: block; font-size: 13px; padding: 10px 0 3px 0;} #contactForm input[type="text"], #contactForm input[type="email"], #contactForm input[type="tel"], #contactForm input.file, #contactForm textarea {border: 0px; padding: 5px; background: url(images/white20.png); width: 250px; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 11px;} #contactForm input[type="radio"]{margin: 0; padding: 0; height: 12px;} #contactForm span {font-size: 11px; margin: 0 10px 0 0; line-height: 13px;} #contactForm textarea {height: 97px; overflow: auto;} #contactForm .file {margin: 0 5px 0 0;} #contactForm input[type="submit"]{display: block; clear: both; border: 0px; padding: 5px; margin: 10px 0 0 0; background: url(images/white20.png); color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 11px;} #contactForm .errors {margin: 0 0 20px 0;} #contactForm .errors p {color: #000; font-size: 13px;} /* 404 */ #searchForm404 {} #searchForm404 input[type="text"]{width: 400px; padding: 10px; font-size: 20px; border: 0; background: url(images/white20.png);} #searchForm404 input[type="submit"] {width: 56px; height: 45px; background: url(images/searchForm404Button.png) no-repeat center center; border: 0; text-indent: -5000px; margin: 0 0 0 8px; cursor: pointer;} /* Blog */ #archiveTitle {line-height: 36px; border-bottom: 1px dotted #fff; margin: 0 0 20px 0; padding: 0 0 15px 0;} #rightNav {width: 180px; float: right; position: relative; z-index: 100;} #rightNav nav {background: url(images/black40.png);} #rightNav nav ul {padding: 8px 0 0 0;} #rightNav nav ul li {} #rightNav nav ul li a {padding: 5px 15px; display: block; font-size: 14px;} #rightNav nav ul li a:link, #rightNav nav ul li a:visited {color: #fff; text-decoration: none;} #rightNav nav ul li a:active, #rightNav nav ul li a:focus, #rightNav nav ul li a:hover, #leftNav nav ul li.current_page_item a {background: #2d272b;} #rightNav nav ul li.current_page_item a, #rightNav nav ul li.active a, #rightNav nav ul li.current-cat a {background: #2d272b url(images/leftNavActive.png) right center no-repeat;} #centerColumn .post {border-bottom: 1px dotted #fff; margin: 0 0 20px 0;} #centerColumn .post h1 {line-height: 36px; margin: 0 0 15px 0;} #centerColumn .post h1 a:link, #centerColumn .post h2 a:visited {color: #fff; text-decoration: none;} #centerColumn .post h1 a:active, #centerColumn .post h2 a:hover {color: #ffbf17; text-decoration: none;} #centerColumn .postMeta {background: url(images/white20.png); padding: 3px 6px; margin: 0 0 20px 0;} #centerColumn .postMeta p a:link, #centerColumn .postMeta p a:visited {color: #fff; text-decoration: none;} #centerColumn .postMeta p a:active, #centerColumn .postMeta p a:hover {color: #ffbf17; text-decoration: none;} #centerColumn .postMeta p {font-size: 11px; margin: 0; padding: 0;} #centerColumn .post a:link, #centerColumn .post a:visited {color: #ffbf17; text-decoration: none;} #centerColumn .post a:active, #centerColumn .post a:hover {color: #ffbf17; text-decoration: underline;} #centerColumn .post ul, #centerColumn .post ol {font-size: 13px; padding: 20px 20px 20px 0;} #centerColumn .post ul li, #centerColumn .post ol li {margin: 0 0 10px 25px;} #centerColumn .post ul li {list-style: circle outside;} #centerColumn .post ol li {list-style: decimal outside;} #commentForm h3 {font-size: 32px; line-height: 36px; margin: 0 0 10px 0;} #commentForm form {} #commentForm form label {display: block; font-size: 11px; line-height: 13px; margin: 0 0 3px 0;} #commentForm form label span {color: #f00;} #commentForm form input[type="text"], #commentForm form input[type="email"], #commentForm form input[type="url"], #commentForm form textarea {border: 0px; padding: 5px; background: url(images/white20.png); width: 250px; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 11px; margin: 0 0 7px 0;} #commentForm form input[type="text"]:focus, #commentForm form input[type="email"]:focus, #commentForm form input[type="url"]:focus, #commentForm form textarea:focus, #commentForm form button:active {-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4);} #commentForm form textarea {width: 466px; overflow: auto;} #commentForm form button {padding: 3px 5px; margin: 10px 0 0 0; border: 0; float: right; background: url(images/white20.png);} #commentForm a:link, #commentForm a:visited {color: #ffbf17; text-decoration: none;} #commentForm a:active, #commentForm a:hover {color: #fff; text-decoration: none;} #centerColumn .post img {display: block; margin: 0 auto;} #centerColumn .post .wp-caption {text-align: center; width: 470px !important; padding: 10px 0 7px; margin: 0 0 20px 0;} #centerColumn .post .wp-caption img {margin: 0 auto;} #centerColumn .post .wp-caption .wp-caption-text{font-style: italic; margin: 0; padding: 0; font-size: 11px;} /* Page */ #centerColumn .page ul, #centerColumn .page ol {margin: 0 0 20px 0;} #centerColumn .page ul li, #centerColumn .page ol li {margin: 0 0 0 30px; font-size: 12px; line-height: 20px;} #centerColumn .page ul li {list-style: outside disc;} #centerColumn .page ol li {list-style: outside decimal;} /* About Team Perosn */ .teamPerson {overflow: hidden;} .teamPerson .left {width: 150px; float: left;} .teamPerson .right {} /* Top Portfolio */ #topPortfolioInner {width: 960px; overflow: visible; margin: 0 auto;} .dragdealer {position: relative;} .dragdealer .handle {position: absolute; cursor: pointer;} .dragdealer .red-bar {width: 100px; height: 30px; background: #CC0000; color: #FFF; line-height: 30px; text-align: center;} .dragdealer .disabled {background: #898989;} /* #slideshow-menu-wrapper {position: relative;} ul#slideshow-menu {position: absolute; top: 477px; right: 70px; z-index: 20;} ul#slideshow-menu li {float: left; list-style: none;} ul#slideshow-menu li a {display: block; float: left;} ul#slideshow-menu li a:hover { background: #E1E1E1;} */ #slideshow {width: 960px; height: 500px; overflow: visible; clear: both; position: relative; z-index: 10;} #slideshow .handle {width: 3880px; height: 267px;} #slideshow .handle .slide {float: left; width: 970px; height: 500px;} #slideshow .handle .img1 {background: url('/wp-content/themes/devstars2010/images/portfolio/port1.jpg') no-repeat 0 0;} #slideshow .handle .img2 {background: url('/wp-content/themes/devstars2010/images/portfolio/port2.jpg') no-repeat 0 0;} #slideshow .handle .img3 {background: url('/wp-content/themes/devstars2010/images/portfolio/port3.jpg') no-repeat 0 0;} #slideshow .handle .img4 {background: url('/wp-content/themes/devstars2010/images/portfolio/port4.jpg') no-repeat 0 0;} /* Comments */ .comment {overflow: hidden; margin: 0 0 20px 0; border-bottom: 1px dotted #fff;} .comment .left {width: 70px; float: left; padding: 0 0 20px 0;} .comment .right {width: 406px; float: right;} .comment cite {margin: 0 0 5px 0; display: block;} /***** TYPOGRAPHY *****/ h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, sans-serif; font-weight: bold;} h1, h2, h3, h4, h5, h6, p, li {line-height: 18px;} h1 {font-size: 32px; margin: 0 0 20px 0;} h2 {font-size: 20px; margin: 0 0 10px 0;} h4 {font-size: 16px; font-weight: normal;} footer nav li {display: inline; margin-right: 10px;} #centerColumn, #rightColumn, footer, #homeBlurb, #homeLatestNews, .skills, #contactContent, #contactForm {text-shadow: 1px 1px 1px rgba(0,0,0,0.3);} .blog #centerColumn {text-shadow: none;} ::selection {background: #ffbf17; color: #000;} ::-moz-selection {background: #ffbf17; color: #000;}