/* Theme Name: Justin Cline v3 Theme URI: http://www.justincline.com/ Description: This is the brand new, fancy Justin Cline personal site theme. Version: 1 Author: Justin Cline Author URI: http://www.justincline.com/ BASE COLORS: Blue = 121c26 (light = 4a637c) Green = 30403b Green/Tan = 8b9976 (dark = 3c4233) Tan = bfbf8a (dark = 2e2e25) (light = f6f6bf) Red = 8c4119 */ /*-------------------------------------------------- G L O B A L S ---------------------------------------------------*/ body {background:#000; font-family:Geneva, "Lucida Grande", "Lucida Sans Unicode", Candara, Tahoma, Verdana, sans-serif; font-size:62.5%; opacity:99.9%;} strong, em, b, i {font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Tahoma, Verdana, sans-serif;} acronym, abbr {border-bottom:1px dotted #31302e; cursor:help;} acronym:hover, abbr:hover {border-style:solid;} input, textarea {font-family:Geneva, "Lucida Sans"," Lucida Grande", "Lucida Sans Unicode", Candara, Verdana, sans-serif; font-size:1.3em;} hr {display:none;} button {cursor:pointer;} button::-moz-focus-inner {border: 0px solid transparent;} /* GLOBAL STRUCTURE ------------------------------- */ .wrapper {width:940px;margin:0 auto;} .left {float:left; position:relative;} .right {float:right; position:relative;} .box {-moz-border-radius:6px;-khtml-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;} .btn {-moz-border-radius:6px;-khtml-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;} .hidden {display:none;} /* clearfix */ .clearfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}.clearfix {display: inline-block;} /* Hides from IE-mac \*/* html .clearfix {height: 1%;}.clearfix {display: block;}/* End hide from IE-mac */ /* GLOBAL IMAGES ------------------------------- */ .border, .thumbnail img {display:block;padding:9px;background:#0b1218;border:1px solid #233241;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .45);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .45); } a.border:hover, .thumbnail:hover img {background:#121c26;border-color:#2f4153;} /* GLOBAL TYPOGRAPHY ------------------------------- */ h1 { font: normal 2.6em/1em "League Gothic", Haettenschweiler, "Trebuchet MS", sans-serif; color:#6f6540; letter-spacing:0.06em; text-shadow:rgba(0,0,0,0.01) 0 0 0;} h2 { font:normal 4.5em/1em "Museo 100", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif;letter-spacing:-.06em;color:#f6f6bf; text-shadow:rgba(0,0,0,0.01) 0 0 0;} h2 a { color:#f6f6bf; } h2 a:hover {color:#fff;} h3 { font: 2.25em/1em "League Gothic", Haettenschweiler, "Trebuchet MS", sans-serif; color:#6f6540; letter-spacing:0.04em; } h4 { font: normal 2.25em/1em "Museo 700", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif; color:#bfbf8a; text-shadow:rgba(0,0,0,0.01) 0 0 0;} .text-replace { display: block;text-indent: -9999em;overflow: hidden;} span.amp { font-family: "Museo 100", "American Typewriter",Didot,Andalus, Baskerville,"Goudy Old Style",Palatino,"Book Antiqua",serif !important; font-size:120%; font-weight:normal !important;font-style:italic !important; padding-right:2px;} /* GENERIC LINKS ------------------------------- */ a { text-decoration:none;} .post a, .blog a { color:#f6f6bf;} .post a:hover, .blog a:hover { color:#fff;} /*-------------------------------------------------- M A S T H E A D ---------------------------------------------------*/ #masthead-wrapper { background:#000;} #masthead { display:block;} #masthead .logo { width:114px; height:34px;float:left;margin-top:10px;} #masthead .logo a { text-indent:-9999em;overflow:hidden;display:block;height:30px;background: transparent URL("assets/img/layout/sprite.gif") no-repeat 0 0;} #masthead .logo#logo-blog a { background-position: 0 -30px;} #masthead .logo#logo-design a { background-position: 0 -60px;} #masthead .logo#logo-photog a { background-position: 0 -90px;} #masthead .logo#logo-illus a { background-position: 0 -120px;} #masthead #nav-main { float:right;margin-top:6px;} #masthead #nav-main li { font-size:1.6em;line-height:1.8em;display:inline;} #masthead #nav-main li a { color:#3c4233;padding:12px 20px 14px;} #masthead #nav-main li a:hover { background:#181b14; color:#8b9976;} /* WELCOME BANNER ------------------------------- */ #banner-home { border-top:1px solid #2e2e25; background:#000 URL("assets/img/layout/generic-bg.jpg") no-repeat 50% 0;} #banner-home.open { display:block;} #banner-home.closed { display:none} #banner-welcome { height:215px;position:relative;} #banner-home h1 { width:327px;height:84px; float:right; position:relative; margin-top:69px;} #banner-home h2 { width:309px;height:129px; float:left; position:relative;margin-top:54px;} #banner-home span { display:block; width:330px; height:221px; position:absolute;top:-6px;margin-left:300px;} #welcome-hide { width:39px; height:39px;text-indent: -9999em;overflow: hidden;position:absolute;right:0;top:10px;} #welcome-banner-show { visibility:hidden; position:relative;} /* To show banner again */ #welcome-banner-show a { float:right; position:absolute; right:0;color:#223241; font-size:1.2em; background:#0b1218;-moz-border-radius-bottomleft: 4px;-webkit-border-bottom-left-radius: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-right-radius: 4px; padding:10px 0 10px; text-align:center; width:280px;} #welcome-banner-show a:hover { background:#121c26;color:#446585;} /* PNGs */ html>body #banner-home h1 { background:transparent URL("assets/img/layout/welcome-position.png") no-repeat 0 0;} html>body #banner-home h2 { background:transparent URL("assets/img/layout/welcome-name.png") no-repeat 0 0;} html>body #banner-home span { background:transparent URL("assets/img/layout/welcome-justin.png") no-repeat 0 0;} html>body #welcome-hide { background:transparent URL("assets/img/layout/close.png") no-repeat 0 0;} /*-------------------------------------------------- S O C I A L M E D I A ---------------------------------------------------*/ #social-wrapper { background:#2e2e25;padding:8px 0; z-index:10;} #social { background:#1e2b35 URL("assets/img/layout/sprite-bg.jpg") repeat-x 0 0; width:940px;margin:0 auto;padding:8px 10px;position:relative;} #social span { height:18px; width:40px;display:block;float:left;position:absolute;top:-17px; left:50%;margin-left:-470px;} html>body #social span { background:transparent URL("assets/img/layout/wedge-social.png") no-repeat 0 0;} #social ul { position:relative;height:40px; overflow:hidden;} #social ul li { display:block;float:left;overflow:hidden;width:140px;margin-right:20px;height:40px;} #social ul li .social-inner { width:640px;} #social ul li h3 { width:40px;height:40px;float:left;position:relative;margin:0;} #social ul li h3 a { text-indent:-9999em; overflow:hidden;display:block;height:40px; width:40px;background: transparent URL("assets/img/layout/sprite.gif") no-repeat 40px 40px;} #social ul li .social-inner div { display: none; float:left;width:580px;padding-left:20px;} #social ul li.active .social-inner div { display:block;} #social ul li:last-child { margin-right:none;} #social li p { color:#a19987; font-size:1.3em;line-height:1.2em;} #social li p a { color:#a19987;font-weight:bold;} #social li p a:hover { color:#c4bba8;} /* SOCIAL: ICONS ----------------------------------------- */ #social #social-rss h3 a { background-position: -114px 0;} #social #social-rss h3 a:hover, #social #social-rss.active h3 a { background-position: -154px 0;} #social #social-flickr h3 a { background-position: -114px -80px;} #social #social-flickr h3 a:hover, #social #social-flickr.active h3 a { background-position: -154px -80px;} #social #social-facebook h3 a { background-position: -114px -120px;} #social #social-facebook h3 a:hover, #social #social-facebook.active h3 a { background-position: -154px -120px;} #social #social-linkedin h3 a { background-position: -194px 0;} #social #social-linkedin h3 a:hover, #social #social-linkedin.active h3 a { background-position: -234px 0;} #social #social-twitter h3 a { background-position: -114px -40px;} #social #social-twitter h3 a:hover, #social #social-twitter.active h3 a { background-position: -154px -40px;} #social #social-deviant h3 a { background-position: -194px -40px;} #social #social-deviant h3 a:hover, #social #social-deviant.active h3 a { background-position: -234px -40px;} /* SOCIAL: MODULES ----------------------------------------- */ #social-rss p, #social-facebook p, #social-linkedin p, #social-deviant p { margin-top:14px;} #social #social-twitter a { font-weight:normal;} #social li .aktt_username { font-weight:normal;color:#a19987;} #social li .aktt_tweet_time { display:block; text-transform:uppercase;font-size:.65em;line-height:1em;font-weight:normal;letter-spacing:.08em;color:#4a637c;} #social li .aktt_tweet_time:hover { color:#789abb;} #social #social-flickr div p { float:left;width:160px;margin-right:20px;} #social #social-flickr div a { width:40px; height:40px; margin-right:20px;overflow:hidden; position:relative; float:left; display:block;} #social #social-flickr div a:list-child { margin-right:0;} #social #social-flickr div a img { width:40px; height:40px;} /*-------------------------------------------------- P A G E ---------------------------------------------------*/ .error404 .post, .page .wrapper .post { padding:42px 0 0 0;} .error404 .entry, .page .wrapper .entry { margin:18px 240px 45px 120px;} .page .wrapper .post h1 { margin:0 0 3px 120px; text-transform:uppercase;} .page .wrapper .post h2 { margin:0 0 0 60px;clear:both;top:-7px;position:relative;} .error404 .post p, .page .wrapper .post p, .page .wrapper .post li { font-size:1.4em;line-height:1.607em;color:#a19987;text-shadow:rgba(0,0,0,0.01) 0 0 0;margin-bottom:15px;} .page .post h4 + p { text-indent:2em;} /*-------------------------------------------------- B L O G ---------------------------------------------------*/ .col2 { -moz-column-count: 2;-moz-column-gap: 20px;-webkit-column-count: 2;-webkit-column-gap: 20px;} .col3 { -moz-column-count: 3;-moz-column-gap: 20px;-webkit-column-count: 3;-webkit-column-gap: 20px;} /* GENERIC POST ------------------------------------------*/ .blog {} .blog .post { padding:34px 0 0 0;} .blog .post-top { margin:0 0 0 60px;} .blog h1 { font:normal 4.5em/1em "Museo 100", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif;letter-spacing:-.06em;color:#f6f6bf; clear:both;} .blog h2 { clear:both;top:-7px;position:relative;} .blog h3, .blog h1.blog-kicker { font:2.25em/1em "League Gothic", Haettenschweiler, "Trebuchet MS", sans-serif;text-transform:uppercase;letter-spacing:0.04em;color:#6f6540; margin:0 0 0 60px;float:left;position:relative; } .blog .entry { background:transparent URL("assets/img/blog/base-divlines.gif") no-repeat 0 0; } .blog .entry { margin:0 60px 15px 59px;padding:10px 180px 15px 60px;} .blog p, .blog li { font-size:1.3em;line-height:1.415em; color:#a19987;} .blog .entry p { margin-bottom:15px;} /* POST META ----------------------------------------- */ .blog .post-meta { float:right;width:580px;margin:3px 60px 0 0;} .blog .post-meta .comments { width:25px; height:20px; display:block; text-align:center; font-size:1.2em; font-weight:bold;padding-top:2px; color:#000;} html>body .blog .post-meta .comments {background:transparent URL("assets/img/icons/comment-bubble.png") no-repeat 0 0;} .blog .post-meta .comments:hover { color:#bfbf8a;} .blog .post-meta .comments span { display:none;} .blog .post-meta .date { font-size:1.1em;color:#45423b;text-transform:uppercase; text-align:right; letter-spacing:0.08em;float:right;margin-top:6px;} /* POST ARCHIVE: featured -----------------------------------------*/ .blog.featured { width:820px;padding:30px 0; border-bottom:5px solid #0a1016;margin-bottom:30px;} .blog.featured .post-meta { width:240px;} .blog.featured #image-main { clear:left;} .blog.featured h2 { margin:3px 0 10px;} .blog.featured h2, .blog.featured p { top:0;float:right; width:460px;clear:none;} .blog.featured .post-meta .date { width:auto;margin-top:4px;} .blog.featured h3, .blog.archive h3 { float:none;margin-bottom:15px;width:200px;} /* POST ARCHIVE: list -----------------------------------------*/ .blog.archive { width:940px;padding-bottom:200px;} .latest-posts { float:left;width:600px;} .latest-posts li { font-size:1em;clear:left;margin-bottom:50px;} .latest-posts .thumbnail { margin:0 20px 15px 0;} .blog .sidebar { float:right;width:220px;} .blog .sidebar h3 { margin-left:0;} .blog .sidebar ul li { color:#3c4233;} .blog .sidebar ul a { font: normal 1.5em/1em "Museo 700", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif;color:#121c26;padding-right:5px;} .blog .sidebar ul a:hover { color:#4a637c;} /*-------------------------------------------------- W O R K ---------------------------------------------------*/ .portfolio .archive li, .portfolio.archive li { float:left; position:relative; margin:10px;} .portfolio .archive li:last-child, .portfolio.archive li:last-child { margin-right:0 !important;} .portfolio { margin-bottom:45px;} .portfolio p, .portfolio li { font-size:1.4em;line-height:1.607em;color:#a19987;text-shadow:rgba(0,0,0,0.01) 0 0 0;} .portfolio h1 { margin:0 0 10px 120px;} .portfolio h2 { clear:both;top:-7px;position:relative;} .portfolio h3 { margin:0 0 0 130px;} .portfolio h4 + p { text-indent:2em;} .portfolio .post a { color:#f6f6bf;} .portfolio .post a:hover { color:#fff;} .portfolio .post { margin: 8px 60px 45px;padding-top:34px;} .portfolio .entry { margin:5px 0 0 180px;padding:10px 180px 15px 60px;} .portfolio .entry p { margin-bottom:15px;} .portfolio .post-meta { float:left;width:220px;position:relative;top:-102px;left:-60px;} .portfolio .post-meta p, .portfolio .post-meta li { font-size:1.4em; font-style:italic; line-height:2.1428em;text-align:right; color:#3f3b34;letter-spacing:0.06em; margin-bottom:15px;} .portfolio .post-meta li li { font-size:1em; margin-bottom:0px;} .portfolio .post-meta a { color:#3f3b34;} .portfolio .post-meta a:hover { color:#bfbf8a;} .portfolio .post-meta strong { font-style:normal;letter-spacing:0;} .portfolio .post-meta-url { font-size:1.3em;color:#4a637c !important;top:35px;padding:7px 20px 8px;background:#0b1218;border:1px solid #233241;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .45);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .45);} .portfolio .post-meta-url:hover { background:#121c26;border-color:#2f4153;} .portfolio #image-main { margin:0 20px 10px 60px;} .portfolio .cta { display:block; width:160px;position:relative; top:183px; padding:10px 0; font-size:1.4em;line-height:1.607em;} /* PORTFOLIO ARCHIVES ------------------------------------------*/ .portfolio-gallery { margin:0 0 45px 240px;} .portfolio-gallery img { margin:0 20px 15px 0;} .portfolio.archive { width:960px;} .portfolio.archive p { width:460px;margin:0 0 15px 130px;} /* Portfolio Latest (learn to ignore the grid on this one, it needed 5 dammit!) ------------------------------------------*/ #latest-design { border-top:5px solid #0a1016; padding:10px;} #latest-design .wrapper { padding:10px 40px 0;width:860px;} #latest-design ul { clear:left;} #latest-design li a { position:relative;} #latest-design.portfolio h3 { margin-left:80px !important;} #latest-design .thumbnail img { width:132px; height:auto; position:relative;} #latest-design li h5 { text-align:center;color:#4a637c; font-size:0.9em;line-height:1em;margin:4px 0 10px 10px;position:absolute; width:132px; clear:both;} #latest-design li:hover h5 { color:#bfbf8a;} /* Portfolio Gallery ------------------------------------------*/ .portfolio.intro-wrapper { width:760px;padding-left:60px; clear:both; } hr + .portfolio.intro-wrapper { padding-top:100px;} .portfolio.intro-wrapper ul { float:right;width:220px;position:relative;} .portfolio.intro-wrapper ul a { font: normal 1.5em/1em "Museo 700", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif;color:#121c26;} .portfolio.intro-wrapper ul a:hover { color:#4a637c;} .portfolio .intro { margin-right:260px;} .portfolio .intro p:first-child { text-indent:-60px;position:relative;} .portfolio .intro p:first-child strong { font:normal 2.25em/15px "Museo 100", Consolas, "Juice ITC", Tahoma, Verdana, sans-serif;color:#f6f6bf;} /*-------------------------------------------------- S E A R C H ---------------------------------------------------*/ /* FOOTER SEARCH FORM ----------------------------------------- */ #footer #searchform { border:1px solid #10100e;border-top:none;padding:15px 20px;margin-bottom:17px;width:358px;position:relative;} #searchform label { font-size:1.8em;line-height:1em; position: absolute; top: 28px; left: 26px;color:#5b746c; font-style:italic; z-index:10;} #searchform #s { padding:10px 6px 6px;font-size:1.8em;line-height:1em;background:#30403b;border:none;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;width:248px; float:left; position:relative;color:#8b9976;} #searchform #searchsubmit { font-size:1.5em;line-height:1em; text-transform:uppercase; letter-spacing:0.06em;font-weight:bold; background:#46220d; color:#8a7459; border:1px solid #1e0d03;border-top-color:#62290a; -moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;padding:10px 0;width:80px;float:right;background:#46220d URL("assets/img/layout/sprite-bg.jpg") repeat-x 0 -153px;} #searchform #searchsubmit:hover { background-color:#5d2e13;background-position:0 -100px;color:#b29571;} #searchform #searchsubmit:active { background-position:0 -206px;color:#683213;} /* SEARCH RESULTS ----------------------------------------- */ .results {width:820px;padding:37px 0;} .results li {padding:30px 60px; font-size:1.6em; color:#a19987;} .results li small {font-size:0.8em;} /*-------------------------------------------------- F O O T E R ---------------------------------------------------*/ #nav-page-btm { width:620px;} #nav-page-btm a { padding:15px 20px 30px 14px; font-size:1.5em; line-height:1em;float:right;color:#3c4233;} #nav-page-btm a:hover { color:#8b9976;} #footer { border-top:10px solid #10100e;padding-bottom:30px;margin-top:5px;background:#000;} #footer .wrapper div:first-child { float:left;width:460px;position:relative;} #footer .wrapper div:last-child { float:right;width:460px;position:relative;} #footer blockquote { float:left;clear:left;width:280px;padding-top:3px;} #footer ul li { font-size:1.2em;line-height:2.5em;font-weight:bold;color:#697557;} #footer ul li li { font-weight:normal;font-size:1em;} #footer ul li a { color:#697557; padding:7px 0 8px;display:block;line-height:1.25em !important;} #footer ul li a:hover { color:#f6f6bf;} #footer ul li li a { color:#514d44; } #footer p { font-size:1.2em; color:#3f3b34;line-height:1.25em; } #footer p a { color:#3f3b34;} #footer p a:hover { color:#697557;} #footer .wrapper div:first-child p { font-style:italic;text-align:right;font-size:1.3em;line-height:1.7307em;margin-bottom:15px;} #footer .wrapper div:first-child ul { width:160px; float:right;} #footer .wrapper div:first-child ul ul { margin-top:0;} #footer .wrapper div:last-child ul { float:left;position:relative;margin:30px 0 15px;width:160px; } #footer .wrapper div:last-child ul ul { margin:0 0 15px 0;} #footer .wrapper div:last-child ul:first-child { width:100px;} #footer .wrapper div:last-child p { margin:37px 0 15px;float:right;width:180px;text-align:right;font-size:1.1em;line-height:1.3636em;} #footer .wrapper div:last-child p + p { clear:right;margin-top:0;} /*-------------------------------------------------- G R I D ---------------------------------------------------*/ /* Kids! You too can play at home! TOGGLE Grid = Alt+G | STICKY Grid = Alt+G+Enter | FRONT/BACK Grid = Alt+B */ #grid { background: url("assets/img/layout/bg-grid-980.gif") repeat-y 0 0;width:980px;position:absolute;top:0;left:50%; margin-left:-490px;opacity:0.4;filter:alpha(opacity=40);} #grid .horiz { height:14px;border-bottom:1px dotted #aaa;}/* From http://hashgrid.com */ /*-------------------------------------------------- F O N T L I S T ---------------------------------------------------*/ /* League Gothic: condensed sans serif */ @font-face {font-family: "League Gothic"; src: URL("assets/fonts/LeagueGothic.eot"); src: local("LeagueGothic"), URL("assets/fonts/LeagueGothic.otf") format('opentype');} /* Museo: wide slab serif (using until H&J decides to let Archer free.... ha! */ @font-face {font-family: "Museo 100"; src: URL("assets/fonts/Museo-100.eot"); src: local("Museo 100"), URL("assets/fonts/Museo100-Regular.otf") format('opentype');} @font-face {font-family: "Museo 700"; src: URL("assets/fonts/Museo-700.eot"); src: local("Museo 700"), URL("assets/fonts/Museo700-Regular.otf") format('opentype');}