/* Theme Name: dbd Theme URI: http:/dbanksdesign.com/ Description: Version: 1.1 Author: Me Author URI: http:/dbanksdesign.com/ Tags: */ /* Code by Danny Banks http:/dbanksdesign.com */ /* COLORS gray (text): #5f5c5a tan (bg): #f1efe9 red (links): #a73a3b light green: #a0b6ac dark green: #627e72 */ @import url('reset.css'); /* @Font Face */ @font-face { font-family: 'ChunkFiveRegular'; src: url('type/Chunkfive.eot'); src: local('ChunkFive Regular'), local('ChunkFive'), url('type/Chunkfive.woff') format('woff'), url('type/Chunkfive.ttf') format('truetype'), url('type/Chunkfive.svg#ChunkFive') format('svg'); } /*------------------------------------ General Styles ------------------------------------*/ html { background:url(img/bg.jpg) top center repeat; } * { font-family: Geneva, Tahoma, Verdana, Trebuchet MS, sans-serif; } p, li, blockquote, cite, dt, dl, input, textarea { font-size:13px; line-height:1.6em; letter-spacing:.05em; color:#5f5c5a; } p { margin-bottom:10px; } a { color:#a73a3b; font-weight:bold; } a:hover { border-bottom:2px dotted #a73a3b; text-decoration:none; } hr { border:none; display:block; height:5px; background:#a0b6ac; margin-bottom:20px; } small { font-size:0.8em; } h2 { font-family:'ChunkFiveRegular', Georgia, Serif; font-size:32px; color:#627e72; letter-spacing:.05em; } h2.page-title { text-transform:uppercase; color:#627e72; margin:5px 0 10px 0; font-size:42px; } h2.section-title { clear:both; display:block; padding:3px 0 0 0; margin:0 0 10px 0; text-transform:uppercase; line-height:40px; border-top:5px solid #a0b6ac; border-bottom:5px solid #a0b6ac; } h3 {} h4, h4 a { font-family:'ChunkFiveRegular', Georgia, Serif; font-size:22px; color:#a0b6ac;} h5 { text-transform:uppercase; color:#5f5c5a; font-size:28px; padding-bottom:5px; border-bottom:1px dotted #5f5c5a; margin-bottom:10px;} h6 {} dt { font-weight:bold; } ul.check li { padding-left:30px; margin-bottom:10px; font-weight:bold; background:url(img/check.png) 0 0 no-repeat; } ul.bullet li { padding-left:15px; margin-bottom:10px; background:url(img/bullet-gray.png) 0 5px no-repeat; } input[type="text"], textarea { background:#a0b6ac; border:5px solid #627e72; padding:5px 10px; line-height:20px; color:#f1efe9; } input[type="text"]:focus, textarea:focus { border-color:#a73a3b; } label { font-weight:bold; text-transform:uppercase; font-size:18px; } input[type="submit"] { border:5px solid #a73a3b; background:#f1efe9; font-weight:bold; padding:5px 10px; cursor:pointer; } input[type="submit"]:hover, input[type="submit"]:focus { background:#a73a3b; color:#f1efe9;} ::selection { background:rgba(0,0,0,.1);} ::-moz-selection { background:rgba(0,0,0,.1); } /*------------------------------------ Useful Classes ------------------------------------*/ .clear { clear:both; } div.clear { height:0; } .left { float:left; } .right { float:right; } p.left { text-align:left; } p.right { text-align:right; } .set { border:1px solid red; font-family:'ChunkFiveRegular', Georgia, Serif; font-size:40px; } .adjust { border:1px solid red; font-family:'ChunkFiveRegular', Georgia, Serif; font-size:40px; } /*------------------------------------ Wrapper ------------------------------------*/ #wrapper { width:960px; margin:0 auto; position:relative; } #me { display:block; width:150px; height:150px; position:absolute; right:-170px; top:0; background:url(img/me-new.jpg); text-indent:-9999px; } /*------------------------------------ Header ------------------------------------*/ #header { height:150px; border-bottom:5px solid #a0b6ac; } #header h1 a { height:150px; width:410px; float:left; background:url(img/logo.png); text-indent:-9999px; } #header h1 a:hover { border:none; } #header h2 { float:right; height:70px; width:550px; background:url(img/tagline.png); text-indent:-9999px; } /*------------------------------------ Nav ------------------------------------*/ #nav { height:80px; float:right; } #nav li { float:left; height:80px; position:relative; } #nav a { display:block; height:75px; background:url(img/nav.png); border-bottom:5px solid #a0b6ac; text-indent:-9999px; } #nav a.current { border-color:#a73a3b;} #nav .about a { width:143px; background-position:0 0; } #nav .about a:hover { background-position:0 -75px; } #nav .about a.current { background-position:0 -150px; } #nav .work a { width:141px; background-position:-143px 0; } #nav .work a:hover { background-position:-143px -75px;} #nav .work a.current { background-position:-143px -150px;} #nav .art a { width:93px; background-position:-284px 0;} #nav .art a:hover { background-position:-284px -75px;} #nav .art a.current { background-position:-284px -150px;} #nav .contact a { width:173px; background-position:-377px 0; } #nav .contact a:hover { background-position:-377px -75px; } #nav .contact a.current { background-position:-377px -150px; } #nav ul { position:absolute; top:75px; left:0; display:none; z-index:100; } #nav ul li { float:none; height:auto; } #nav ul li a { background:#a73a3b; border:none; text-indent:0; color:#f1efe9; height:auto; padding:10px; font-weight:bold; font-size:18px; text-transform:uppercase; } #nav ul li a:hover { text-decoration:none; background:#627e72; } #nav .work ul li a { width:121px; } #nav .art ul li a { width:175px; } /*------------------------------------ Intro Featured ------------------------------------*/ #featured { position:relative; padding-bottom:10px; margin-bottom:55px; border-bottom:5px solid #a0b6ac; } #featured h2 { margin:-2px 0 10px 0; font-family:'ChunkFiveRegular', Georgia, Serif; font-size:40px; color:#a0b6ac; text-transform:uppercase; } .project-thumb { float:left; border:5px solid #627e72; height:160px; position:relative; overflow:hidden; } .project-thumb:hover { border-color:#a73a3b; } .project-thumb .links { position:absolute; width:600px; margin:0; padding:10px 10px 5px 10px; background:#a73a3b; } #featured .project-thumb .links { font-size:18px;} .links, .links a { color:#f1efe9; } .links a:hover { border-color:#f1efe9; } .description { float:right; width:310px; } .description h3 { margin-bottom:10px; font-family: Geneva, Tahoma, Verdana, Trebuchet MS, sans-serif; color:#627e72; font-size:24px; font-weight:bold; text-transform:uppercase;} .description h3 a { font-family: Geneva, Tahoma, Verdana, Trebuchet MS, sans-serif; color:#627e72; font-size:24px; font-weight:bold; text-transform:uppercase; } .description h3 a:hover { color:#a73a3b; border:none; } .description h3 a .caps { font-size:100%; } .view-portfolio { display:block; width:250px; padding:0 30px; height:40px; line-height:40px; background:url(img/view-portfolio.png); font-family:'ChunkFiveRegular', Georgia, Serif; font-size:28px; color:#f1efe9; letter-spacing:.05em; } .view-portfolio:hover { background-position:bottom; border:none; } #featured .view-portfolio { position:absolute; bottom:-40px; right:-30px; } .projectSlider { width: 960px; height: 170px; position: relative; margin:0; padding:0; } .projectSlider .wrapper { width: 960px; overflow: auto; height: 170px; margin: 0px; position: absolute; top: 0; left: 0; } .projectSlider .wrapper ul { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; } .projectSlider ul li { display: block; float: left; padding: 0; height: 170px; width: 960px; margin: 0; padding:0; overflow:hidden; } .projectSlider .arrow { display: none; } #start-stop { display:none; } #thumbNav { position:absolute; bottom:-50px; left:0; overflow:hidden; } #thumbNav a { display:block; width:35px; height:35px; line-height:35px; text-align:center; float:left; padding:0; margin-right:10px; background:#627e72; color:#f1efe9; font-family:'ChunkFiveRegular', Georgia, Serif; font-size:24px; } #thumbNav a:hover { border:none; background:#a0b6ac; } #thumbNav a.cur { background:#a0b6ac; } /* Prevents */ .projectSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; } .projectSlider .wrapper ul ul li { float: none; height: auto; width: auto; border:none; background: url(img/asterisk.png) 2px 2px no-repeat; color:#FFF; padding:3px 0px 3px 20px; font-weight:bold; letter-spacing:0.05em; } /*------------------------------------ Content ------------------------------------*/ #content { padding-bottom:20px; } #page-nav { float:left; width:300px; } #page-nav li { width:300px; margin-bottom:10px; } #page-nav a { padding:5px 0; text-align:center; display:block; background:#a73a3b; color:#f1efe9; } #page-nav a:hover { border:none; background:#627e72; } #page-summary { float:right; width:630px; } #content .project { clear:both; padding:10px 0; margin-bottom:10px; border-top:5px solid #a0b6ac; overflow:hidden; } #content .project h3 { font-size:28px; color:#5f5c5a; margin-bottom:5px; } .project li { padding-left:30px; margin-bottom:10px; line-height:20px; font-weight:bold; background:url(img/check.png) 0 0 no-repeat; } .project .sub-head { text-transform:uppercase; } .project-img { float:right; width:470px; height:350px; margin-left:20px; } .project-img { border:5px solid #627e72; } .project-img img { display:none; padding:5px; } .project-img img:first-child { display:block; } .img-nav { float:right; clear:right; margin:10px 0 0 0; } .img-nav li { float:left; margin:0 0 0 10px; padding:0; background:none; } .img-nav li a img { border:5px solid #a0b6ac; } .img-nav li a:hover { border:none; } .img-nav li a.activeSlide img { border-color:#627e72; } .img-nav li a:hover img { border-color:#a73a3b; } #recent-projects { padding-bottom:30px; } #about { float:left; position:relative; width:590px; height:160px; padding:20px; margin-bottom:50px; background:#a0b6ac; } #about h2 { color:#f1efe9; margin-bottom:10px; } #about p { color:#f1efe9; } #about-pic { float:right; border:5px solid #a0b6ac; } #about ul { position:absolute; bottom:-30px; left:0; } #about li { float:left; height:30px; width:100px; margin-right:20px; } #about li a { display:block; line-height:30px; text-align:center; background:#627e72; color:#f1efe9; } #about li a:hover { border:none; background:#a0b6ac; } #resume { float:right; padding:0; margin:0; clear:both; } #resume li { float:right; margin-left:20px; height:30px; width:100px; } #resume a { display:block; text-align:center; line-height:30px; background:#a73a3b; color:#f1efe9; } #resume a:hover { border:none; background:#627e72; } #content .section { margin-bottom:20px; overflow:hidden; clear:both; } #content .half { width:470px; } .third { width:300px; float:left; margin-left:30px; } .third.first { margin-left:0; } .contact-form { width:630px; float:left; } .art-thumb { float:left; width:290px; height:290px; margin-left:15px; padding:5px; border:5px solid #627e72; } .art-thumb img { width:290px; height:290px; } .art-thumb:first-child { margin:0; } .art-thumb:hover { border:5px solid #a73a3b; } /*------------------------------------ Main ------------------------------------*/ #main { position:relative; float:left; width:460px; margin:0 10px; } #main img { border:5px solid #627e72; } #main p { text-shadow:-1px -1px 0px rgba(255,255,255,.75); } #main .half { width:220px; } #main .project { width:210px; height:100px; overflow:hidden; float:left; margin:0 0 20px 0; } #main .project img { border:none; } #main .project .links { padding:10px 5px 5px 5px; width:200px; text-shadow:none; } #main .project .links a { } /*------------------------------------ Sub ------------------------------------*/ #sub { position:relative; float:left; margin:0 10px; width:460px; } #sub h2 { font-size:24px; letter-spacing:.05em; color:#5f5c5a; margin-bottom:10px; font-family:Geneva, Tahoma, Verdana, Trebuchet MS, sans-serif; font-weight:bold; } #sub .widget { margin-bottom:20px; overflow:hidden; } #sub .quote blockquote { background:#a0b6ac; padding:10px; color:#f1efe9; } #sub .quote cite { display:block; padding-left:40px; background:url(img/quote.png) 10px 0 no-repeat; } .flickr_badge_image { width:60px; float:left; margin:0 0 10px 20px; } #flickr_badge_image1, #flickr_badge_image5 { margin-left:0; } .flickr_badge_image a { border:5px solid #a0b6ac; display:block; width:50px; height:50px; } .flickr_badge_image a:hover { border-color:#a73a3b; } .flickr_badge_image img { width:50px; height:50px; } .recent-links li { margin-top:10px; } .recent-links li:first-child { margin-top:0; } .recent-links li a { display:block; background:#a0b6ac; color:#f1efe9; padding:5px 10px; } .recent-links li a:hover { border:none; background:#627e72; } /*------------------------------------ Footer ------------------------------------*/ #footer { position:relative; overflow:hidden; padding:20px 0; margin-bottom:50px; background:#627e72; border-bottom:5px solid #a0b6ac; border-top:5px solid #a0b6ac; } #footer h4 { color:#f1efe9; text-transform:uppercase; letter-spacing:.05em; border-bottom:5px solid #f1efe9; margin-bottom:10px; padding-bottom:5px; } #footer h4 a { color:#f1efe9; } #footer h4 a:hover { color:#a73a3b; border-bottom:none; } #footer .section { width:300px; float:left; margin:0 10px; } #footer .section.middle { } #footer * { color:#f1efe9; } #footer a { color:#a0b6ac; } #footer li a:hover { border-color:#a0b6ac; } #footer li { padding-left:15px; background:url(img/bullet-tan.png) 0 5px no-repeat; margin-bottom:5px; } #footer li ul { } #footer li ul li { background:none; } #footer a.sub { font-weight:normal; } #footer li.phone { background:url(img/phone.png) 0 3px no-repeat; padding-left:25px; } #footer li.location { background:url(img/location.png) 0 3px no-repeat; padding-left:25px; } #footer li.email { background:url(img/email.png) 0 5px no-repeat; padding-left:25px; } .social a { display:block; float:left; width:20px; height:20px; text-indent:-9999px; } .social .linkedin { background:url(img/linkedin.gif) top left no-repeat; } .social .vimeo { background:url(img/vimeo.gif) top left no-repeat; } .social .flickr { background:url(img/flickr.gif) top left no-repeat; } .social .delicious { background:url(img/delicious.gif) top left no-repeat; } #bottom { height:40px; padding-top:10px; width:100%; background:url(img/bottom.png) top left repeat-x; position:fixed; bottom:0; z-index:1000; } #bottom div { width:960px; height:40px; margin:0 auto; } #bottom p, #bottom a { text-shadow:1px 1px 0 rgba(0,0,0,.25);} #bottom p { line-height:40px; color:#f1efe9; } #bottom a { color:#f1efe9; text-transform:uppercase; } #bottom a:hover { border-color:#f1efe9;} #sb-nav a:hover { border:none; } #shDisplay #shWrap #shTopImg { padding:0; border:10px solid #f1efe9; } #shDisplay #shWrap #shCount { color:#f1efe9; font-size:24px; font-family:'ChunkFiveRegular', Georgia, Serif; padding:20px 0; } #shDisplay #shWrap #shNext a, #shDisplay #shWrap #shPrev a { color:#a0b6ac; font-size:24px; font-family: Geneva, Tahoma, Verdana, Trebuchet MS, sans-serif; } #shDisplay #shWrap #shNext a:hover, #shDisplay #shWrap #shPrev a:hover { color:#a73a3b; } /*------------------------------------ Contact ------------------------------------*/ #content span.wpcf7-form-control-wrap { display:block; } #content span.wpcf7-not-valid-tip { top:5px; left:5px; font-size:13px; line-height:20px; padding:5px 10px; background:none; color:#a73a3b; font-weight:bold; border:none; } #content div.wpcf7-validation-errors { padding:5px 10px; margin:10px 0; background:#a73a3b; color:#f1efe9; font-weight:bold; font-size:13px; line-height:1.6em; border:none; } #content div.wpcf7-mail-sent-ok { padding:5px 10px; margin:10px 0; background:#627e72; color:#f1efe9; font-weight:bold; font-size:13px; line-height:1.6em; border:none;} #content .piclenselink { display:none; } #content .ngg-gallery-thumbnail-box { width:225px; height:225px; margin:0 20px 20px 0; } #content .ngg-gallery-thumbnail-box img { margin:0; padding:5px; border:5px solid #a0b6ac; background:none; } #content .ngg-gallery-thumbnail-box a:hover img { background:none; border-color:#a73a3b; }