/* ---------------------------------------------------- Title : Thomas Maxson: Graphic Designer Version : V2.51 - Guava Author : Thomas Maxson URL : http://www.thomasmaxson.com/ Description : Personal portfolio site. Note(s) : Thanks for taking a look at my css code! Feel free to look and learn, but please respect that everything here is copyright (c) 2009 Thomas Maxson. Created : July 15, 2009 Modified : April 7, 2010 Table of Contents : A - Site divs B - Navigation 1 - Main Navigation 2 - Portfolio Sub Navigation C - Content 1 - Index Slideshow 2 - Page Headers 3 - Resume 4 - Contact (form style) 5 - Other D - Footer 1 - Footer Navigation 2 - Footer ---------------------------------------------------- */ /* ---------------------------------------------------- A - Site divs ---------------------------------------------------- */ body { margin:0; padding:0; border:0; font-family:Arial,Helvetica,Verdana,sans-serif; font-size:12px; line-height:16px; font-weight:normal; color:#333333; text-decoration:none; background:#efefef; } div, span, p { margin:0; padding:0; } a { outline:none; border:none; } img { border:none !important; } .clearfix { clear:both; width:0; height:0; line-height:0; margin:0; padding:0; } /* ---------------------------------------------------- B - Navigation ---------------------------------------------------- */ /* --------------------------- 1 - Main Navigation --------------------------- */ .navBg { margin:0 0 30px 0; padding:40px 0 0 0; width:100%; background:transparent url('../images/support/navigationBarBg.gif') 0 40px repeat-x; } .navContainer { margin:0 auto; width:975px; height:66px; } .navMenu { display:block; height:50px; list-style:none; margin:0; padding:0; } .navMenu ul { float:left; display:block; list-style:none; margin:0; padding:0; } .navMenu li { cursor:pointer; float:left; position:relative; overflow:hidden; margin:0; } .navMenu li a { cursor:pointer; position:relative; display:block; margin:8px 0 0 0; background-image:url('../images/support/navigation-Main.gif'); background-repeat:no-repeat; text-indent:-9999px; } .navMenu li a.home { float:left; display:block; width:66px; height:66px; margin:0 55px; background-position:top right; } .navMenu li a.works { width:176px; height:48px; background-position:0 0; } .navMenu li a.works:hover { background-position:0 -60px; } .navMenu li a.about { width:172px; height:48px; background-position:-176px 0; } .navMenu li a.about:hover { background-position:-176px -60px; } .navMenu li a.resume { width:197px; height:48px; background-position:-348px 0; } .navMenu li a.resume:hover { background-position:-348px -60px; } .navMenu li a.contact { width:201px; height:48px; background-position:-545px 0; } .navMenu li a.contact:hover { background-position:-545px -60px; } /* ---------------------------------------------------- C - Content ---------------------------------------------------- */ .contentEverything { margin:0 auto 30px auto; width:975px; background-color:#ffffff; border:1px solid #dddddd; } .contentArea { margin:0 auto 0 auto; padding:30px; height:100%; background-color:#ffffff; } .doubleLeft { float:left; display:block; width:597px; height:100%; margin:0; padding:0; } .doubleRight { float:right; display:block; width:597px; margin:0; padding:0 0 0 20px; } .doubleRight-Line { float:right; display:block; width:597px; margin:0; padding:0 0 0 20px; border-left:1px solid #cccccc; } .narrow { display:block; width:815px; height:100%; margin:0 50px; padding:0; } .singleLeft { float:left; display:block; width:280px; margin:0; padding:0; } .singleRight { float:right; display:block; width:280px; margin:0; padding:0 0 0 20px; } .singleRight-Line { float:right; display:block; width:280px; margin:0; padding:0 0 0 20px; border-left:1px solid #cccccc; } /* --------------------------- 1 - Index Slideshow --------------------------- */ .sliderBg { width:597px; height:310px; margin:0; padding:20px 0 0 30px; background:url('../images/slideshow/slideshowBackground.gif') 0 0 no-repeat; } .slider { position:relative; } .slider img { position:absolute; top:0px; left:0px; width:537px; height:280px; } .slider a.imageLink { z-index:60; position:absolute; display:none; top:0px; left:0px; width:100%; height:100%; margin:0; padding:0; border:0; } .slice { z-index:50; position:absolute; display:block; height:100%; } .caption { z-index:89; position:absolute; bottom:0px; left:0px; width:100%; color:#ffffff; background:#000000; opacity:0.8; } .caption p { margin:0; padding:5px; } .directionNav a { cursor:pointer; z-index:99; position:absolute; display:block; top:45%; width:32px; height:34px; background:url('../images/slideshow/arrows.png') no-repeat; text-indent:-9999px; } a.nextNav { background-position:-32px 0; right:10px; } a.prevNav { left:10px; } .controlNav { position:absolute; left:45%; bottom:-30px; } .controlNav a { cursor:pointer; float:left; display:block; width:10px; height:10px; margin:0 3px 0 0; background:url('../images/slideshow/bullets.png') no-repeat; text-indent:-9999px; } .controlNav a.active { background-position:-10px 0; } /* --------------------------- 2 - Page Headers --------------------------- */ h2#index { float:left; display:block; width:280px; height:215px; margin:25px 0 0 0; padding:0; background:url('../images/support/header-Pages.gif') 0 0 no-repeat; text-indent:-9999px; } h2#works { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -210px no-repeat; text-indent:-9999px; } h2#about { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -335px no-repeat; text-indent:-9999px; } h2#tutorial { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -460px no-repeat; text-indent:-9999px; } h2#contact { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -585px no-repeat; text-indent:-9999px; } h2#copyright { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -710px no-repeat; text-indent:-9999px; } h2#comingSoon { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -835px no-repeat; text-indent:-9999px; } h2#giantMonster { float:left; display:block; width:915px; height:125px; margin:0; padding:0; background:url('../images/support/header-Pages.gif') 0 -960px no-repeat; text-indent:-9999px; } h3.subHead { margin:0 0 30px 0; padding:0; font-size:25px; line-height:27px; font-weight:normal; color:#666666; text-decoration:none; } /* --------------------------- 3 - Resume --------------------------- */ ul#resumeNavMenu { float:left; display:block; list-style:none; width:915px; margin:30px 0 20px 30px; padding:0; } #resumeNavMenu li { display:inline; } #resumeNavMenu a { float:left; display:block; height:40px; margin:0; padding:0; background-image:url('../images/support/navigation-Resume.gif'); background-repeat:no-repeat; text-indent:-9999px; overflow:hidden; } #resumeNavMenu a.downloadResume { width:237px; background-position:0 0; } #resumeNavMenu a.downloadResume:hover { background-position:0 -40px; } #resumeNavMenu a.personalProfile { width:190px; background-position:-237px 0; } #resumeNavMenu a.personalProfile:hover { background-position:-237px -40px; } #resumeNavMenu a.education { width:143px; background-position:-427px 0; } #resumeNavMenu a.education:hover { background-position:-427px -40px; } #resumeNavMenu a.careerHistory { width:178px; background-position:-570px 0; } #resumeNavMenu a.careerHistory:hover { background-position:-570px -40px; } #resumeNavMenu a.proficiencies { width:167px; background-position:-748px 0; } #resumeNavMenu a.proficiencies:hover { background-position:-748px -40px; } .resumeBlock-Left { float:left; display:block; width:170px; height:100%; margin:0; padding:0; } .resumeBlock-Left h2 { float:right; display:block; width:170px; height:10px; margin:10px 0 0 10px; padding:10px 0 0 0; background-image:url('../images/support/header-Resume.gif'); background-repeat:no-repeat; text-indent:-9999px; } #personalProfile { background-position:10px 0; } #education { background-position:59px -20px; } #careerHistory { background-position:22px -40px; } #proficiencies { background-position:35px -60px; } #feedback { background-position:0 -80px; } .resumeBlock-Right { float:right; width:720px; height:100%; margin:0; padding:0 0 10px 0; } .resumeBlock-Right p { display:block; margin:10px 0; } ul.resume-careerHistory { float:left; display:block; list-style:none; width:100%; margin:0 0 10px 0; padding:0; } ul.resume-careerHistory li { width:100%; line-height:20px; margin:0; padding:0 0 0 25px; background:url('../images/support/bullet-Green.gif') 12px 6px no-repeat; } ul.resume-careerHistory li.noBullet { margin:0; padding:0; line-height:16px; background:none; } ul.resume-proficiencies { float:left; list-style:none; width:100%; margin:0 0 10px 0; padding:0; } ul.resume-proficiencies li { float:left; width:235px; line-height:30px; margin:0; padding:0; } ul.resume-proficiencies li img { width:24px; height:24px; margin:0 5px 0 0; vertical-align:middle; } /* --------------------------- 4 - Contact (form style) --------------------------- */ .emailConfirm { display:block; width:597px; height:260px; margin:0 0 10px 0; padding:0; background:url('../images/support/contactItems.gif') 0 0 no-repeat; text-indent:-9999px; } .foodForThought { display:block; width:915px; height:65px; margin:0; padding:0; background:url('../images/support/contactItems.gif') 0 -260px no-repeat; text-indent:-9999px; } form { width:597px; font-family:Arial,Helvetica,Verdana,sans-serif; color:#333333; font-size:12px; font-weight:normal; } form ol { list-style:none; margin:0; padding:0; } form li { margin:0; padding:10px 0; } form label { float:left; width:50px; margin:0 10px 0 0 ; color:#333333; font-weight:normal; line-height:33px; text-align:right; } form input, form textarea { width:250px; padding:5px; font:13px Arial,Helvetica,Verdana,sans-serif; background:#ffffff; border:1px solid #dddddd; } #message_text { width:500px; height:150px } #submitButton { cursor:pointer; float:right; display:block; width:132px; height:30px; margin:0 25px 0 0; padding:0; border:0; font-size:14px; font-weight:normal; background:#efefef; border:1px solid #999999; } /* --------------------------- 5 - Other --------------------------- */ h1#siteTitle { display:none; } .content { margin:0 0 20px 0; padding:0; } .contentBold { margin:0 0 20px 0; padding:0; font-weight:bold; } .contentBoldLrg { margin:0 0 5px 0; padding:0; font-size:14px; font-weight:bold; } .greenType { color:#49a148; } .greenTypeBold { color:#49a148; font-weight:bold; } .dividerLine { display:block; width:575px; height:1px; margin:20px 0 20px 0; background:url('../images/support/dividerLine01.gif') 0 0 no-repeat; text-indent:-9999px; } .dividerLineNarrow { display:block; width:815px; height:1px; margin:20px 0 20px 0; background:url('../images/support/dividerLine02.gif') 0 0 no-repeat; text-indent:-9999px; } .dividerLineWide { display:block; width:915px; height:1px; margin:20px 0 20px 0; background:url('../images/support/dividerLine03.gif') 0 0 no-repeat; text-indent:-9999px; } .dividerLineDotted { clear:both; display:block; width:915px; height:1px; margin:10px 0 20px 0; background:url('../images/support/dividerLine05.gif') 0 0 no-repeat; text-indent:-9999px; } .downloadVcard { float:right; display:block; width:280px; height:75px; margin:20px 0 0 0; background:url('../images/support/buttons.jpg') 0 0 no-repeat; text-indent:-9999px; overflow:hidden; } .downloadResume { float:right; display:block; width:280px; height:75px; margin:20px 0 0 0; background:url('../images/support/buttons.jpg') 0 -75px no-repeat; text-indent:-9999px; overflow:hidden; } .downloadResume02 { float:right; display:block; width:280px; height:75px; margin:0; background:url('../images/support/buttons.jpg') 0 -75px no-repeat; text-indent:-9999px; overflow:hidden; } .learnMore { float:right; display:block; width:180px; height:30px; margin:15px 0 0 0;background:url('../images/support/buttons.jpg') 0 -400px no-repeat; text-indent:-9999px; overflow:hidden; } .readMore { float:right; display:block; width:180px; height:30px; margin:10px 30px 0 0;background:url('../images/support/buttons.jpg') -180px -400px no-repeat; text-indent:-9999px; overflow:hidden; clear:both; } .seeMore { float:right; display:block; width:180px; height:30px; margin:20px 0 0 0;background:url('../images/support/buttons.jpg') 0 -450px no-repeat; text-indent:-9999px; overflow:hidden; } .getInTouch { float:right; display:block; width:180px; height:30px; margin:0 10px; background:url('../images/support/buttons.jpg') -180px -450px no-repeat; text-indent:-9999px; overflow:hidden; } a.ttt { float:left; width:174px; height:30px; margin:0; background:url('../images/support/buttons.jpg') -5px -500px no-repeat; text-indent:-9999px; overflow:hidden; } #friendMe { width:280px; margin:0; padding:0; color:#ffffff; } #friendMe ul { list-style-type:none; margin:0; padding:0; color:#ffffff; } #friendMe li { display:block; } #friendMe a { display:block; width:280px; height:42px; margin:0 0 20px 0; background-image:url('../images/support/buttons.jpg'); background-repeat:no-repeat; overflow:hidden; text-indent:-9999px; } #friendMe a.twitter { background-position:0 -150px; } #friendMe a.facebook { background-position:0 -200px; } #friendMe a.linkedin { background-position:0 -250px; } #friendMe a.flickr { background-position:0 -300px; } #friendMe a.gdf { background-position:0 -350px; } /* ---------------------------------------------------- D - Footer ---------------------------------------------------- */ /* --------------------------- 1 - Footer Navigation --------------------------- */ .footerNavBg { margin:0 auto; width:100%; background-color:#ffffff; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; } .footerNavContainer { clear:both; margin:0 auto; height:30px; width:975px; font-size:12px; font-weight:bold; } .footerNavLeft { float:left; width:500px; padding:7px 20px 0 0; } .footerNavLeft a { margin:0 0 0 20px; padding:0; color:#339933; text-decoration:none; } .footerNavLeft a:hover { color:#666666; text-decoration:underline; } .footerNavRight { float:right; width:140px; margin:0; padding:7px 0 7px 0; color:#ffffff; background-color:#339933; text-align:center; } .footerNavRight a { color:#ffffff; text-decoration:none; } .footerNavRight a:hover { color:#000000; text-decoration:underline; } .footerNavRight span { margin:0 15px; } /* --------------------------- 2 - Footer --------------------------- */ .footerContainer { clear:both; margin:0 auto; height:125px; width:975px; padding:20px 0 0 0; background:url('../images/support/footerLogo.png') bottom right no-repeat; } .footer { margin:0 auto; padding:0 20px 0 20px; color:#aaaaaa; font-family:Arial,Helvetica,Verdana,sans-serif; font-size:10px; font-weight:bold; } #footerLeft { float:left; width:450px; text-align:left; } a.sponsor { margin:0; padding:0; color:#aaaaaa; text-decoration:none; } a.sponsor:hover { color:#000000; text-decoration:underline; } #footerRight { float:right; width:450px; margin:0; padding:0; text-align:right; } a.footerRight:link, a.footerRight:visited { margin:0; padding:0; color:#aaaaaa; text-decoration:none; } a.footerRight:hover { color:#000000; text-decoration:underline; }