/* ************************************************* NathanCrenshaw.com v1.0 03.20.2010 ************************************************* */ /* KEY ---------------------------- COLORS: #938882 - Brown Dark #b6a79a - Brown Medium #d8c5bf - Brown light #614e41 - Reddish Brown #113e49 - Teal Dark #36626f - Teal Medium #081d22 - Blue Dark #6e96a3 - Blue Light #799f3b - Green FONTS: HEADINGS: Trebuchet,Verdana,Geneva,Arial,sans-serif COPY: Trebuchet,Verdana,Geneva,Arial,sans-serif ------------------------------------ */ /* @group ******* FONTS */ /* @end ******* FONTS */ /* @group ******* GLOBAL */ * { margin: 0; padding: 0; } body { font: normal 12px/1.75 Trebuchet,Verdana,Geneva,Arial,sans-serif; background-color: #131313; color: #474747; } /* @group ******* /BLOCK-LEVEL */ h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-bottom: 10px; line-height: 1;} h1, .home #content h2 { font-size: 52px; } #content h1, #content h2 { text-shadow: 0 1px 0 #f2f2f2; } h2, .home #content h3 { font-size: 40px; } h3, .home #content h4 { font-size: 32px; } h4, .home #content h5 { font-size: 26px; } h5, .home #content h6 { font-size: 18px; } h6 { font-size: 14px; } p, li { margin-bottom: 10px; list-style: none; } #content ul { position: relative; left: 20px; } #content ol { position: relative; left: 25px; } blockquote { margin: 0 40px 15px; } fieldset { margin: 0 0 10px; border: none; } /* @end ******* /BLOCK-LEVEL */ /* @group ******* /INLINE */ em { font-style: italic; } strong { font-weight: bold; } a { color: #b85b5a; border: none;} p a { white-space:nowrap; } img { display: block; margin-bottom: 15px; } a img { border: none; } /* @end ******* /INLINE */ /* @group ******* /COMBOS */ .main-nav:after, .author:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; } .move { position: absolute; left: -9999px; } .clear { clear: both; } .hide { display: none; } /* @end ******* /COMBOS */ /* @end ******* GLOBAL */ /* @group ******* PAGE LAYOUT */ body { background: #061e76 url(./images/layout/topBG.jpg) repeat-x 0 0; } #top-wrap { clear: both; background: url(./images/layout/headerBG.jpg) no-repeat top center; overflow: hidden; } #header-wrap { clear: both; overflow: hidden;} #header { margin:0 auto; padding:0; position:relative; width:960px; overflow: hidden; height: 180px; } #topContent-wrap { clear: both; overflow: hidden;} #topContent { margin:0 auto; padding:0 0 40px; position:relative; width:960px; overflow: hidden; } #bottom-wrap { clear: both; background: #b6c4e0 url(./images/layout/bottomBG.jpg) repeat-y top center; overflow: hidden;} #content-wrap { clear: both; background: url(./images/layout/contentWrapBG.jpg) repeat-x; border-top: #c8d0f5 solid 1px; overflow: hidden;} #content { background: url(./images/layout/contentBG.jpg) no-repeat top center; margin:0 auto; width: 940px; padding: 20px 10px; position:relative; overflow: hidden; height: 1%; } #footer-wrap { clear: both; background: url(./images/layout/footerLine.jpg) no-repeat top center; overflow: hidden;} #footer { color:#2c4754; margin:0 auto; position:relative; width:960px; padding:20px 0; overflow: hidden;} /* @end ******* PAGE LAYOUT */ /* @group ******* HEADER */ #logo { display: block; height: 160px; width: 330px; background:transparent url(./images/layout/logo_sm.jpg) no-repeat scroll 0 0; text-indent: -9999px; } .home #logo { display: block; height: 180px; width: 470px; background:transparent url(./images/layout/logo.jpg) no-repeat scroll 0 0; text-indent: -9999px; } /* @group ******* MAIN NAVIGATION */ .main-nav { position: absolute; top: 65px; right: 0; margin: 0;} .main-nav li { float: left; margin: 0 0 0 26px; } .main-nav li a { display: block; height: 38px; color: #2a608f; text-decoration: none; font-size: 28px; line-height: 28px; letter-spacing: 1px; text-transform: lowercase; padding-top: 30px; } .main-nav li a:hover, .main-nav li a:focus { background: url(./images/layout/menuHover.jpg) no-repeat bottom center; color: #88ac3f; } .main-nav li a em { display: none; color: #bdcff1; font-size: 12px; font-weight: normal; letter-spacing: 0; font-family: Georgia,"Times New Roman",Times,serif; margin-top: -48px; } .main-nav li a:hover em { display: block;} .main-nav li.selected a { color: #3882c2; } /* @end ******* MAIN NAVIGATION */ /* @group ******* SEARCH */ #site-search { position: absolute; width: 301px; height: 29px; right: 0; top: 0; background: url(./images/layout/searchBG.jpg) no-repeat 0 0; } #site-search * { vertical-align: middle; } #site-search p { display: inline; } #site-search label { position: absolute; left: -9999px; } #keywords { background: none; color:#36626f; font-family: Georgia,"Times New Roman",Times,serif; font-size:13px; margin-left: 10px; width: 220px; font-style: italic; border: none; } #site-search input[type=submit], #site-search input[type=submit]:focus { background:transparent url(./images/layout/searchButton.jpg) no-repeat 0 0; border: medium none; cursor:pointer; border: none; height:23px; width:27px; text-indent:-9999px; position: absolute; right: 15px; top: 3px; } #site-search input[type=submit]:hover, #site-search input[type=submit]:focus { background:transparent url(./images/layout/searchButton.jpg) no-repeat 0 -23px; } /* @end ******* SEARCH */ /* @end ******* HEADER */ /* @group ******* CONTENT */ #content a { color: #081d22; text-decoration: none; border-bottom: 1px dotted #081d22; } #content a:hover, #content a:focus { color: #113e49; border-bottom: 1px dotted #113e49; } #content a:active { color: #36626f; border-bottom: 1px dotted #36626f; } #content h2 a, #content h3 a { border-bottom: none; } #content ul li { list-style-image: url(./images/layout/bulletArrow.gif);} #content ul.roll, #content ul.comments, #content ul.comment-form { list-style: none; left: 0; } .entry { clear: both; overflow: hidden; margin-top: 10px; padding-top: 20px; border-top: 1px dotted #999;} #content #mainContent { width: 640px; float: left; } #content #sidebar { width: 260px; float: right; padding-left: 10px; } #content #sidebar h2 { font-size: 20px; text-shadow: none; letter-spacing: 0; } #content #sidebar h3 { font-size: 16px; letter-spacing: 0; } /* @group ******* HOME PAGE */ #topContent #intro-wrap { overflow: hidden; margin-bottom: 10px; padding-bottom: 26px; background: url(./images/layout/IntroShadow.jpg) no-repeat bottom center; } #topContent #homeIntro { height: 384px; width: 960px; background: #000 url(./images/layout/IntroBlockBG.jpg) no-repeat 0 0; border-top: #173b42 solid 1px; border-bottom: #173b42 solid 1px; position: relative; } #topContent #homeIntro p { font: 26px/1.25 Georgia, serif; color: #9ac83e; letter-spacing: 1px; width: 460px; padding: 20px 10px; margin-left: 480px; } #topContent #homeIntro p a { color: #2a608f; text-decoration: none; border-bottom: #2a608f dotted 1px; } #topContent #homeIntro .name { display: block; width: 397px; height: 127px; margin: 10px 0; background: url(./images/layout/nathanCrenshaw_intro.gif) no-repeat 0 0; text-indent: -9999px; } #topContent #homeIntro .description { display: block; color: #5d7081; font-style: italic; text-transform: lowercase; font-size: 20px; background: url(./images/layout/separatorIntro.jpg) no-repeat 0 0; padding-top: 10px;} #topContent #homeIntro .cta { width: 480px; position: absolute; bottom: 20px; right: 0; } #topContent #homeIntro .cta p { font: 12px/1.25 Trebuchet,Verdana,Geneva,Arial,sans-serif; color: #5d7081; width: 240px; text-align: right; padding: 0; margin: 0; } #topContent #homeIntro .cta .portfolio { display: block; margin: 0; padding: 0; text-indent: -9999px; width: 104px; height: 41px; background: url(./images/layout/cta.jpg) no-repeat 0 0; position: absolute; bottom: 15px; right: 125px; border-bottom: none; } #topContent #homeIntro .cta .portfolio:hover, #topContent #homeIntro .cta .portfolio:hover { background: url(./images/layout/cta.jpg) no-repeat 0 -41px; } #topContent #homeIntro .cta .portfolio:active { background: url(./images/layout/cta.jpg) no-repeat 0 -82px; } #topContent #homeIntro .cta .contact { display: block; margin: 0; padding: 0; text-indent: -9999px; width: 105px; height: 41px; background: url(./images/layout/cta.jpg) no-repeat -104px 0; position: absolute; bottom: 15px; right: 20px; border-bottom: none; } #topContent #homeIntro .cta .contact:hover, #topContent #homeIntro .cta .contact:hover { background: url(./images/layout/cta.jpg) no-repeat -104px -41px; } #topContent #homeIntro .cta .contact:active { background: url(./images/layout/cta.jpg) no-repeat -104px -82px; } #topContent h2 { color: #6c8ca8; text-shadow: 2px 1px 5px #040817; margin-bottom: 20px; } #topContent h2 a { color: #6c8ca8; border-bottom: none; } #topContent h3 { color: #bfc4d9; margin-bottom: 10px; } #topContent h3 a { color: #bfc4d9; border-bottom: none; } #topContent p { color: #dcdcdc; } #topContent a { color: #647eff; text-decoration: none; border-bottom: 1px dotted #647eff;} #topContent a:hover #topContent a:hover { color: #dcdcdc; border-bottom: 1px dotted #dcdcdc;} #topContent a:active { color: #333; border-bottom: 1px dotted #333;} .home #topContent .news { width: 530px; float: left; margin: 0 0 0 10px; position: relative; } .home #topContent .news p { margin-left: 10px; } .home #topContent .news .date { color: #6c8ca8; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; margin-bottom: 0; } .home #topContent .news .more { background: url(./images/layout/moreLeft.gif) no-repeat left center; padding-left: 10px; height: 16px; line-height: 0; display: inline; } .home #topContent .news .more a { width: 200px; padding-right: 20px; line-height: 16px; color: #061e76; background: url(./images/layout/moreRight.gif) no-repeat right center; text-decoration: none; border-bottom: none;} .home #topContent .contact { width: 390px; float: right; margin: 0 10px 0 0; } .home #topContent .contact li a { display: block; font-size: 18px; color: #647eff; text-decoration: none; padding-left: 40px; line-height: 30px; border-bottom: none; } .home #topContent .contact li a:hover, .home #topContent .contact li a:focus { color: #9ac83e; } .home #topContent .contact li a:active { color: #dcdcdc; } #topContent .contact a.form { background: url(./images/layout/checkmark.gif) no-repeat 0 0; } #topContent .contact a.twitter { background: url(./images/layout/twitterIcon.gif) no-repeat 0 0; } #topContent .contact a.facebook { background: url(./images/layout/facebookIcon.gif) no-repeat 0 0; } #topContent .contact a.email { background: url(./images/layout/emailIcon.gif) no-repeat 0 0; } .home .entry { border-top: none; } /* @end ******* HOME PAGE */ /* @group ******* PORTFOLIO */ div.featured { float: right; width: 482px; margin: 0 0 10px 10px; padding-bottom: 20px; background: transparent url(./images/layout/shadowFeatured.png) no-repeat scroll bottom center; } div.featured img { border: 1px solid #666; margin: 0; } .sub img.featured { float: left; margin: 0 10px 10px 0 ; padding: 0; border: 1px solid #666; } .related img { border: 1px solid #666; } .categories { width: 80px; float: right; margin: 0 10px 10px 20px; } .sub .categories { float: left; } .categories span { font-size: 8px; ;font-weight: bold; text-transform: uppercase; } #content .categories a { display: block; font-weight: bold; height: 30px; width: 80px; text-indent: -9999px; border: none; background:transparent url(./images/layout/categories_sprite.gif) no-repeat scroll 0 0; } #content .categories a.print { background-position: 0 0; } #content .categories a.print:hover, #content .categories a.print:focus { background-position: 0 -30px; } #content .categories a.print:active { background-position: 0 -60px; } #content .categories a.web_design { background-position: -80px 0; } #content .categories a.web_design:hover, #content .categories a.web_design:focus { background-position: -80px -30px; } #content .categories a.web_design:active { background-position: -80px -60px; } #content .categories a.misc { background-position: -160px 0; } #content .categories a.misc:hover, #content .categories a.misc:focus { background-position: -160px -30px; } #content .categories a.misc:active { background-position: -160px -60px; } #details { margin: 20px 0; padding: 10px; clear: both; border: 1px solid #999; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #details a.portfolio_extra { display: block; float: left; width: 140px; padding: 7px; margin: 0 10px; background: #E9EAEE; border: 2px solid #f1f1f1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .portfolio_extra img { margin: 0; border: 1px solid #999; } .portfolio .info { margin-left: 400px; } .portfolio .related { clear: both; border-top: 1px dotted #666; margin-top: 20px; padding-top: 20px; } #content .roles { margin: 10px 0; } #content .roles p { display: inline; text-transform: uppercase; font-weight: bold; } #content .roles ul { display: inline; left: 0; } #content .roles li { list-style: none; list-style-image: none; display: inline; font-size: 12px; padding: 0 5px; border-left: 1px dotted #666; } #content .roles li:first-child { border-left: none; } #content a.cms_wp { display: block; width: 300px; height: 50px; background:transparent url(./images/layout/WordPress.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #content a.cms_wp:hover, #content a.cms_wp:focus { background-position: 0 -50px;} #content a.cms_wp:active { background-position: 0 -100px;} #content a.cms_ee { display: block; width: 300px; height: 50px; background: transparent url(./images/layout/ExpressionEngine.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #content a.cms_ee:hover, #content a.cms_ee:focus { background-position: 0 -50px;} #content a.cms_ee:active { background-position: 0 -100px;} #content a.cms_joomla { display: block; width: 300px; height: 50px; background: transparent url(./images/layout/Joomla.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #content a.cms_joomla:hover, #content a.cms_joomla:focus { background-position: 0 -50px;} #content a.cms_joomla:active { background-position: 0 -100px;} #content a.cms_kentico { display: block; width: 300px; height: 50px; background: transparent url(./images/layout/Kentico.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #content a.cms_kentico:hover, #content a.cms_kentico:focus { background-position: 0 -50px;} #content a.cms_kentico:active { background-position: 0 -100px;} #content a.cms_flash { display: block; width: 300px; height: 50px; background: transparent url(./images/layout/Flash.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #content a.cms_flash:hover, #content a.cms_flash:focus { background-position: 0 -50px;} #content a.cms_flash:active { background-position: 0 -100px;} /* @end ******* PORTFOLIO */ /* @group ******* RESUME */ .resume #content #mainContent { margin-left: 20px; width: 620px; } .resume #content #mainContent h2 { font-size: 38px; margin: 30px 0 20px; text-shadow: none; } .resume #content #mainContent h3 { font-size: 22px; margin-bottom: 10px; } .resume #content #mainContent h4 { font-size: 16px; font-style: italic; margin: 0 0 0 20px; } .resume #content #mainContent .entry { clear: both; overflow: hidden; margin-top: 0; padding-top: 10px; border-bottom: 1px dotted #999; border-top: none; } .resume #content #mainContent .entry .meta { display: inline; padding-left: 20px; font-weight: bold; font-style: italic; } .resume #content #mainContent ul { margin-left: 20px; } .resume #content #mainContent ul.education, .resume #content #mainContent ul.vocation { margin-left: 0; } .resume #content #mainContent ul.education li, .resume #content #mainContent ul.vocation li { list-style: none; list-style-image: none; margin: 10px 0 0; } a.resume { background: url(./images/layout/briefcase.gif) no-repeat 0 0; padding-left: 53px; font-size: 28px; line-height: 36px;} /* @end ******* RESUME */ /* @group ******* CONTACT FORMS */ #content form { } #content label { display: block; font-weight: bold; font-size: 16px; text-transform: uppercase; color: #18476d; letter-spacing: 1px; margin: 0; padding: 0; } #content .inline label { display: inline; } #content input, #content textarea { font: 12px/1.5 verdana,arial,san-serif; color: #333; border: 1px solid #e2eafc; background: #e2eafc; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #content textarea { width: 400px; } #content input:focus, #content textarea:focus { background: #e7ebf4; color: #000; border-color: #3c7aab; } /* @end ******* CONTACT FORMS */ #lcol, #mcol, #rcol { width: 275px; float: left; margin-right: 20px; padding: 15px 0 10px 15px; } #rcol { margin-right: 0 ;} /* @end ******* CONTENT */ /* @group ******* FOOTER */ #footer a { color: #b543af; } #footer a:hover, #footer a:focus { color: #781273; } #footer ul, #footer ol { position: relative; left: 25px; } #footer .ee { width: 300px; float: right; } #footer .ee a { display: block; width: 300px; height: 50px; background: transparent url(./images/layout/ExpressionEngine.gif) no-repeat 0 0; text-indent: -9999px; border-bottom: none;} #footer .ee a:hover, #footer .ee a:focus { background-position: 0 -50px;} #footer .ee a:active { background-position: 0 -100px;} /* @end ******* FOOTER */ /* @group ******* EXTRAS */ #content .pdf { display: block; height: 80px; padding-left: 70px; background: url(./images/layout/pdficon.png) no-repeat 0 0; border-bottom: none; } /* @end ******* EXTRAS */ #content button, .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #d9eef7; font-weight: bold; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); } #content button:hover, #content button:focus, .button:hover, .button:focus { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e'); } #content button:active, .button:active { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee'); }