/* TABLE OF CONTENTS ----------------- 01 - RESET - Resets the differences in browser DOMs. 02 - GLOBAL CLASSES - Classes used globally across the site. 03 - TYPOGRAPHY - Type and font settings. 04 - HEADER - Header settings including Logo and Navigation. 05 - CONTENT - Includes column, Container, and Post settings. 06 - SHOWCASE - Homepage jQuery slider styling. 07 - FREELANCE STATUS - Customizable freelance status. 08 - SIDEBAR - Sidebar text and widget styling. 09 - DETAIL PAGES - Post typography and spacing. 10 - COMMENTS - Typography and spacing for comments. 11 - CONTENT FORMS - Form styling for comments and search. 12 - LIGHTBOX - jQuery Lightbox styling. 13 - PANEL SLIDER - jQuery slider styling. 14 - FOOTER - Footer styling and spacing. */ /* 01 - RESET /* ----------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } body { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } html { height:100%; margin-bottom:1px; } /* 02 - GLOBAL CLASSES /* ----------------------------------------------*/ .fL { float: left; } .fR { float: right; } .cB { clear: both; } .fS10 { font: 0.83em Tahoma; } .up {text-transform:uppercase;} .tAC { text-align: center; } .tAJ { text-align: justify; } .clear { clear: both; } .noborder {border:none;} .nomargin {margin:0; padding:0;} body.home .hide {display:none;} /* 03 - TYPOGRAPHY /* ----------------------------------------------*/ body { font: 0.75em "Helvetica Neue", Arial, Helvetica, sans-serif; color: #808080; background: #111; } body.home { font: 0.75em "Helvetica Neue", Arial, Helvetica, sans-serif; color: #808080; background: url('../images/homeBG.png') repeat-x #111; } a { color: #CDCDCD; text-decoration: none; } a:hover { color: #FFF; } h1 { font-size:2.42em; margin-bottom: 20px; } h2 { font-size:1.92em; margin: 10px 0; } h3 { font-size:1.42em; margin: 10px 0; } h4 { font-size:1.2em; margin: 10px 0; } h5 { font-size:1em; margin: 10px 0; } h1, h2, h3, h4, h5 {color:#FFF; font-weight:bold;} h1 a:hover, h2 a:hover, h3 a:hover {color: #FFF;} p { line-height: 1.5em; margin-bottom: 10px;} strong {font-weight:bold; color: #CDCDCD;} blockquote { float:left; margin:0 15px 15px 0; padding:10px; background: url(../images/software_bg.png); border: 1px solid #3d3d3d; } .pdf { padding-left:20px; background: url(../images/icons/pdf_icon.png) no-repeat left center; } .school {font-size: 0.8em; font-style:italic; color:#666;} /* 03 - RESUME TYPOGRAPHY /* ----------------------------------------------*/ .resume h3 { font-size:1.42em; margin: 20px 0 10px 0; } .resume h5 { color:#808080; margin: 15px 0 5px 0; } /* 04 - HEADER /* ----------------------------------------------*/ #header { width: 480px; height: 260px; position: absolute; left: 0; top: 0; background: url('../images/headerBG.png') no-repeat; } #header #logo { width: 269px; height: 151px; background: url('../images/logo.png') no-repeat; position: absolute; left: 0; top: 55px; } #header #logo img { width: 269px; height: 151px; } #header #nav { min-height: 128px; font: 0.92em Tahoma; text-transform: uppercase; padding: 12px 0 0 20px; background: url('../images/navBG.png') no-repeat; position: absolute; left: 285px; top: 75px; } #header #nav ul li { margin-bottom: 5px; } #header #nav ul li a { color: #808080; } #header #nav ul li a:hover { color: #FFF; } /* 05 - CONTENT /* ----------------------------------------------*/ body.home .categories {display:none;} #container { width: 980px; margin: 0 auto; position: relative; } #content { min-height: 780px; background: url('../images/contentBG.png') no-repeat; } #contentLeft { width: 480px; padding-top: 260px; float: left; } #contentLeft #sidebar1 { width: 215px; float: left; margin-right: 20px; } #contentLeft #sidebar2 { width: 215px; float: left; } #contentRight { width: 500px; float: right; } .content_column { float:left; margin:15px 15px 15px 0; background: url(../images/software_bg.png); border: 1px solid #3d3d3d; width:225px; } .content_column .pad {padding:20px;} /* 06 - SHOWCASE /* ----------------------------------------------*/ .showcaseTexts { width: 480px; height: 250px; position: relative; } .showcaseTexts ul { width: 430px; height: 250px; } .showcaseTexts ul li { width: 430px; height: 200px; padding-top: 50px; margin-right: 50px; position: relative; } .showcaseTexts ul li h2 a { color: #FFF; } .showcaseTexts ul li p.readMore { background: url('../images/iconArrow.gif') 0 2px no-repeat; padding-left: 13px; position: absolute; bottom: 10px; right: 0; margin:15px 0 0 0; } .showcaseTexts .buttons { width: 50px; height: 250px; position: absolute; right: 0; top: 0; } .showcaseTexts .buttons .prev { width: 50px; height: 125px; background: url('../images/prev.png') no-repeat; cursor: pointer; } .showcaseTexts .buttons .prev:hover { background: url('../images/prevOn.png') no-repeat; } .showcaseTexts .buttons .next { width: 50px; height: 125px; background: url('../images/next.png') no-repeat; cursor: pointer; } .showcaseTexts .buttons .next:hover { background: url('../images/nextOn.png') no-repeat; } .showcaseImages { width: 500px; height: 770px; position: relative; } .showcaseImages ul { width: 500px; height: 770px; } .showcaseImages ul li { width: 500px; height: 250px; margin-bottom: 10px; } .showcaseImages ul li a img { width: 494px; height: 244px; border: 3px solid #333; } .showcaseImages .pattern1 { width: 500px; height: 250px; position: absolute; left: 0; top: 0; background: url('../images/pattern1.png') no-repeat; } .showcaseImages .pattern2 { width: 500px; height: 260px; position: absolute; left: 0; bottom: 0; background: url('../images/pattern2.png') no-repeat; } /* 07 - FREELANCE STATUS /* ----------------------------------------------*/ .available { width: 420px; height: 75px; padding: 20px 23px 15px 23px; background: url('../images/freelanceOn.png') no-repeat; color: #85b5a8; } .available h2 { color: #cef6ff; margin: 0 0 5px 0; } .unavailable { width: 420px; height: 75px; padding: 20px 23px 15px 23px; background: url('../images/freelanceOff.png') no-repeat; color: #b58585; } .unavailable h2 { color: #f0d1d1; margin: 0 0 5px 0; } /* 08 - SIDEBAR /* ----------------------------------------------*/ .box { color: #4F4F4F; margin-top: 40px; } .search { width: 215px; height: 30px; background: url('../images/searchBG.gif') no-repeat; position: relative; } .search .text { width: 165px; height: 22px; font: 0.83em Tahoma; color: #666; padding: 8px 10px 0px 10px; background: none; border: none; position: absolute; left: 0; top: 0; } .search .submit { width: 30px; height: 30px; background: none; border: none; cursor: pointer; position: absolute; right: 0px; top: 0; } #contentLeft #sidebar1 .box ul, #contentLeft #sidebar2 .box ul { background: url('../images/listBG.png') top no-repeat; padding-top: 10px; } #contentLeft #sidebar1 .box ul li, #contentLeft #sidebar2 .box ul li { text-transform: capitalize; padding-bottom: 13px; margin-bottom: 10px; background: url('../images/listBG.png') bottom no-repeat; } #contentLeft #sidebar1 .box ul li p, #contentLeft #sidebar2 .box ul li p { margin-bottom: 2px; } #contentLeft #sidebar1 .box ul li a, #contentLeft #sidebar2 .box ul li a { color: #4F4F4F; } #contentLeft #sidebar1 .box ul li a:hover, #contentLeft #sidebar2 .box ul li a:hover { color: #FFF; } #contentLeft #sidebar1 .box ul li .fS10, #contentLeft #sidebar2 .box ul li .fS10 { color: #7C7C7C; text-transform: uppercase; } #contentLeft #sidebar1 .box ul li .fS10 a, #contentLeft #sidebar2 .box ul i .fS10 a { color: #7C7C7C; } #contentLeft #sidebar1 .box ul li .fS10 a:hover, #contentLeft #sidebar2 .box ul i .fS10 a:hover { color: #FFF; } /* 09 - DETAIL PAGES /* ----------------------------------------------*/ #contentRight.detail { padding-top: 65px; } #contentRight.detail ul { margin-bottom:10px; } #contentRight.detail ul li { color: #CDCDCD; padding-left: 13px; margin-bottom: 5px; background: url('../images/iconArrow.gif') 0 2px no-repeat; } .post { padding: 15px 0 0 0; margin-bottom: 15px; background: url('../images/postBG.gif') top no-repeat; position:relative; clear:both; } .post p.readMore { float:right; margin-top: 5px;} .post p.readMore a { background: #090909 url('../images/iconArrow.gif') 2px center no-repeat; border: 1px solid #000; padding: 4px 4px 4px 15px; text-transform: uppercase; display:block; } .post p.readMore a:hover { background-color: #000; border: 1px solid #000; } .post .head {background: #090909; } .post .head h2 { float: left; margin: 0 0 5px 0; } .post .head p { margin-bottom: 0px; } .post .head p.date { font-weight:bold; font-size:1.5em; float: right; } .post .head p.fS10 { text-transform: uppercase; clear: both; float:left; margin-bottom:1.3em; border-bottom:1px dashed #222; width:98%; padding:0 0 5px 10px; background: url('../images/iconArrow.gif') left 2px no-repeat;} .post .entry {clear:both;} .post .entry img { border: 3px solid #333; } .post .entry a img:hover {border-color:#666;} .post .entry a.lightbox img { border: 3px solid #333; } .post.details { padding-top: 0; margin-bottom: 0px; background: none; } .post.details .head h1 { float: left; margin: 0 0 5px 0; clear: both; } .pageNav { padding-top:20px; clear:both; border-top:1px dashed #222;} .pageNav div a { background: #090909; border: 1px solid #000; padding: 7px; text-transform: uppercase; } .pageNav div a:hover { background: #000; border: 1px solid #000; } /* 10 - COMMENTS /* ----------------------------------------------*/ .comments { background: url('../images/postBG.gif') top no-repeat; padding-top: 20px; margin-top: 40px; } .commentlist .comment {position:relative;} .commentlist li { background: #090909; border: 1px solid #000; padding: 10px; margin-bottom: 10px; } .commentlist li .comment-author { font: 0.83em Tahoma; text-transform: uppercase; } .commentlist li .comment-author cite.fn { font-style: normal; } .commentlist li .comment-author .avatar { background: #FFF; border: 1px solid #000; padding: 3px; margin-right: 10px; float: left; } .commentlist li .comment-meta { font: 0.83em Tahoma; text-transform: uppercase; margin: 5px 0px 5px 0px; float: left; } .commentlist li p { clear: both; padding-left: 48px; margin-bottom: 0px; } .commentlist div.reply {position: absolute; top:0; right:0; margin:10px; } .commentlist div.reply a {background: url('../images/iconArrow.gif') 0px 3px no-repeat; padding-left: 13px;} #contentRight.detail ul.children li { background: #111 url('../images/iconArrow.gif') 3px 25px no-repeat; margin-top:10px; } .cancel-comment-reply {text-align:center; padding:0 0 10px 0;} .cancel-comment-reply a {background: url('../images/iconArrow.gif') left 2px no-repeat; padding-left:13px; color:#c00;} /* 11 - CONTENT FORMS /* ----------------------------------------------*/ #contentRight form { width: 100%; } #contentRight form fieldset { background: #090909; border: 1px solid #000; padding: 10px; margin-bottom: 10px; } #contentRight form fieldset label { float: left; width: 120px; margin-top: 8px; text-align: right; display: block; } #contentRight form fieldset input, form fieldset textarea { width: 220px; background: #CCC; border: 1px solid #000; padding: 3px; margin: 5px 0px 0px 10px; } #contentRight form fieldset input:hover, form fieldset textarea:hover { background: #FFF; } #contentRight form fieldset input:focus, form fieldset textarea:focus { background: #FFF; } #contentRight form fieldset textarea { overflow: auto; } #contentRight form fieldset select { width: 220px; background: #FFF; height: 25px; margin: 5px 0px 0px 10px; border: 1px solid #838383; } #contentRight form fieldset select:hover { background: #FFF; } #contentRight form fieldset select:focus { background: #FFF; } #contentRight form fieldset br { clear:left; } #contentRight form fieldset .right { margin: 5px 0px 0px 130px; } #contentRight form fieldset .button { width: 228px; font: 0.83em Tahoma; text-transform: uppercase; color: #FFF; background: #1D1D1D; border: 1px solid #000; margin: 0; cursor: pointer; } #contentRight form fieldset .button:hover { background: #000; } /* 12 - CONTACT FORMS /*----------------------------------------------*/ #contact_form p {margin-bottom:15px;} #contact_form input, #contact_form textarea {background:#1d1d1d; border:1px solid #333; padding:5px; color:#999;} #contact_form input:focus, #contact_form textarea:focus {background:#292929; border:1px solid #555; color:#fff;} #contact_form .wpcf7-not-valid-tip {background:#ffa8a8; border:1px solid #f00; color:#f00; display:block; width:97%; position:absolute; left:0; top:0; line-height:1; padding:5px; margin-top:-5px; text-align:center;} #contact_form div.wpcf7-validation-errors {background:#ffa8a8; border:1px solid #f00; color:#f00; display:block; width:27em; padding:5px; margin-top:-5px; text-align:center;} #contact_form div.wpcf7-mail-sent-ok {background:#c7fbb1; border:1px solid #398F14; color:#5a8c45; display:block; width:27em; padding:5px; margin-top:-5px; text-align:center;} #contact_form input[type="submit"] {padding: 5px 10px;} #contact_form input[type="submit"]:hover {background:#292929; border:1px solid #555; color:#fff; cursor:pointer;} #contact_form div.wpcf7-response-output {margin:0;} #contact_form p.message .wpcf7-not-valid-tip {margin-top:-155px; height:80px; padding-top:85px;} #contact_form p.quiz .wpcf7-not-valid-tip {margin-left: 135px; width:12em;} /* 13 - LIGHTBOX /* ----------------------------------------------*/ #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; } #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%; display: block; } #lightbox-nav-btnPrev { left: 0; float: left; } #lightbox-nav-btnNext { right: 0; float: right; } #lightbox-container-image-data-box { font-size: 0.83em; background-color: #FFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding: 0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight: bold; } #lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1em; } #lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; } /* 14 - PANEL SLIDER /* ----------------------------------------------*/ #toppanel { position: absolute; top: 0; left: 0; width: 100%; z-index: 999; text-align: center; margin:0 auto; } #panel { width: 100%; height: 200px; overflow: hidden; position: relative; z-index: 3; display: none; background: url(../images/panel_bg.png); } #panel ul { margin: 0 0 5px 0; padding: 0; list-style: none; } #panel .content { width: 980px; margin: 0 auto; padding-top: 15px; text-align: left; } .tab { background: url(../images/tab_b.png) repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 42px; width: auto; line-height: 42px; margin: 0; right: 150px; } .tab ul.login li.left { background: url(../images/tab_l.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url(../images/tab_r.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url(../images/tab_m.png) repeat-x 0 0; } .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 70px; position: relative; top: 11px; } .tab a.open { background: url(../images/bt_open.png) no-repeat left 0; } .tab a.close { background: url(../images/bt_close.png) no-repeat left 0; } .tab a:hover.open { background: url(../images/bt_open.png) no-repeat left -19px; } .tab a:hover.close { background: url(../images/bt_close.png) no-repeat left -19px; } .column { float:left; background: url(../images/footer_divider.png) no-repeat left center; line-height:2; padding:0 60px; } .column p, .column li { color: #CDCDCD; font-family: Tahoma; } .column h3 {margin-bottom:10px; line-height:1;} .column a { border-bottom: 1px dotted #FFF; padding-bottom:2px; } .skills li { padding-left:20px; } .first {background:none;} .column .green { background: url(../images/check_green.png) no-repeat left center; } .column .orange { background: url(../images/check_orange.png) no-repeat left center; } /* 15 - FOOTER /* ----------------------------------------------*/ #footer_wrap { background: #0a0a0a; padding:10px 0; margin-top:20px; } #footer { width: 980px; margin: 0 auto; } .rss { background: url(../images/rss.png) no-repeat left center; padding-left:18px; height:14px; } /* 16 - SOFTWARE ICONS /* ----------------------------------------------*/ #contentRight.detail .software li { padding-left: 20px; } #contentRight.detail .acrobat { background: url(../images/icons/acrobat.png) no-repeat; } #contentRight.detail .dreamweaver { background: url(../images/icons/dreamweaver.png) no-repeat; } #contentRight.detail .flash { background: url(../images/icons/flash.png) no-repeat; } #contentRight.detail .illustrator { background: url(../images/icons/illustrator.png) no-repeat; } #contentRight.detail .indesign { background: url(../images/icons/indesign.png) no-repeat; } #contentRight.detail .photoshop { background: url(../images/icons/photoshop.png) no-repeat; } #contentRight.detail .coda { background: url(../images/icons/coda.png) no-repeat; }