* { outline:none; } body { background:#cbc2b1 url(../img/background_website.jpg) fixed center repeat; font-family:Arial, Verdana, sans-serif; font-size:12pt; color:#392b1f; } a { text-decoration:none; outline:none; color:#392b1f; } .link:hover { text-decoration:underline; outline:none; color:#574b42; } .hidden { display:none; } .block { display:block; } .clear { clear:both; } #website_wrapper { position:relative; width:960px; margin:0 auto 0 auto; min-height:100%; padding:0; } /* HEADER */ #header_wrapper { width:100%; height:230px; } #header_background { position:absolute; top:38px; left:0; width:100%; height:168px; background:#1d1816 url(../img/background_header.jpg) top center repeat-x; } #header_logo { position:absolute; top:38px; left:2px; width:319px; height:168px; background:transparent url(../img/logo_leechee.jpg) top left no-repeat; } /* NAVIGATION */ #header_nav { position:absolute; top:158px; right:0px; width:470px; height:32px; font-size:25px;} #header_nav ul li a { color: #ffffff;} #header_nav ul.lavaLamp li { float: left; list-style: none; } #header_nav ul.lavaLamp li.back { background: url(../img/nav_lava.jpg) no-repeat right -33px; width: 9px; height: 40px; z-index: 8; position: absolute; } #header_nav ul.lavaLamp li.back .left{ background: url("../img/nav_lava.jpg") no-repeat top left; height: 33px; margin-right: 9px; } #header_nav ul.lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; font: bold 14px arial; color: #fff; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; } #header_headline { position:absolute; top:75px; left:545px; width:344px; height:50px; background:transparent url(../img/headline.gif) top left no-repeat; } /* CONTENT STRUCTURE */ #content_wrapper { width:100%; height:auto; } #left_column { float:left; width:680px; min-height:1px; height:auto; } #right_column { float:left; width:276px; min-height:600px; height:auto; background:transparent url(../img/portrait.gif) 100px 10px no-repeat;} #right_column_2 { float:left; width:276px; min-height:600px; height:auto; background:transparent url(../img/portrait2.gif) 10px 0px no-repeat;} /* PORTFOLIO PREVIEW */ #portfolio_preview { position:relative; width:100%; height:300px;} #portfolio_preview_heading { width:190px; height:80px; background:transparent url(../img/heading_portfolio_preview.png) top left no-repeat; } #portfolio_preview_text { position: absolute; top: 15px; left: 180px;} #carousel-wrapper { width: 100%; margin-top:20px; padding-left: 20px; } .carousel { float:left; width: auto; height:210px; overflow: hidden;} .carousel ul { width:600px; height:210px; overflow: hidden;} .carousel li { width:275px; height:210px; text-align: center; list-style-type: none; float:left;} .carousel img { margin:0 20px 0 20px;} .portfolio_preview_desc { width:220px; height:15px; margin:5px 20px 0 20px; padding:5px 5px 5px 10px; overflow:hidden; font-size:15px; } .portfolio_preview_desc a { color:#392b1f; } #next { display:none; float:left; cursor: pointer; margin:50px 0px 0px 10px;} #next a { display:block; width: 32px; height: 51px; background: transparent url(../img/arrows.gif) -32px 0px no-repeat;} #next a:hover { background-position: -32px -51px;} #prev { display:none; float:left; cursor: pointer; margin:50px 10px 0px 0px;} #prev a { display:block; width: 32px; height: 51px; background: transparent url(../img/arrows.gif) 0px 0px no-repeat;} #prev a:hover { background-position: 0px -51px;} /* SKILLS */ #skills { float:left; width:340px; min-height:1px; height:auto; clear:both;} #skills_heading { width:190px; height:80px; background:transparent url(../img/heading_skills.png) top left no-repeat; } #skills span.skills_bold { font-weight:bold; font-size:14pt; } #skills ul { padding:30px 0 0 35px; } #skills ul li { position:relative; width:252px; height:18px; padding:10px 0 0 27px; margin:0 0 10px 0; background:url(../img/bullet.gif) 0px 12px no-repeat; } #skills ul li.skills_separator { width:280px; height:3px; padding:0; margin:0; background:transparent url(../img/dots.gif) top left no-repeat; } .skills_stars { position:absolute; top:2px; right:0px; width:35px; height:35px; } .skills_stars span { display:none; } .star_12 { background:transparent url(../img/star_12.gif) 0 0 no-repeat; } .star_11 { background:transparent url(../img/star_11.gif) 0 0 no-repeat; } .star_10 { background:transparent url(../img/star_10.gif) 0 0 no-repeat; } .star_9 { background:transparent url(../img/star_9.gif) 0 0 no-repeat; } .star_8 { background:transparent url(../img/star_8.gif) 0 0 no-repeat; } .star_7 { background:transparent url(../img/star_7.gif) 0 0 no-repeat; } .star_6 { background:transparent url(../img/star_6.gif) 0 0 no-repeat; } .star_5 { background:transparent url(../img/star_5.gif) 0 0 no-repeat; } .star_4 { background:transparent url(../img/star_4.gif) 0 0 no-repeat; } .star_3 { background:transparent url(../img/star_3.gif) 0 0 no-repeat; } #skills_more_button { display:none; margin:10px 0 0 190px;} #skills_more_button a { display:block; width:122px; height:20px; background:transparent url(../img/button_bg.gif) -20px 35px repeat; color:#ffffff; font-size:14px; text-align:center; padding:5px 0 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #skills_more_button a:hover { background-position:0px -25px; } /* SERVICES */ #services { float:left; width:340px; min-height:1px; height:auto; } #services_heading { width:190px; height:80px; background:transparent url(../img/heading_services.png) top left no-repeat; } #services ul { padding:30px 0 0 35px; } #services ul li { width:255px; height:auto; padding:10px 0 10px 27px; background:url(../img/bullet.gif) 0px 12px no-repeat; border:0 solid red; } #services ul li.services_separator { width:280px; height:3px; padding:0; background:transparent url(../img/dots.gif) top left no-repeat; } #services_more_button { display:none; margin:10px 0 0 190px;} #services_more_button a { display:block; width:122px; height:20px; background:transparent url(../img/button_bg.gif) -20px 35px repeat; color:#ffffff; font-size:14px; text-align:center; padding:5px 0 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #services_more_button a:hover { background-position:0px -25px; } /* PORTFOLIO */ #portfolio { position:relative; width:100%; height:auto; clear:both; } #portfolio_heading { width:190px; height:80px; background:transparent url(../img/heading_portfolio.png) top left no-repeat; } #portfolio_text { position: absolute; top: 15px; left: 180px;} .portfolio_project_wrapper { margin:0 10px 0 40px;} .portfolio_project_wrapper img { float:left; margin-right:20px;} .portfolio_project_title { position:relative; font-size:20px; width:364px; margin-bottom:5px;} .portfolio_project_details { font-size:15px; min-height:170px; height:auto; margin:0 10px 0 255px;} .portfolio_project_details a { font-size:12px; text-decoration:underline;} .portfolio_project_details a:hover { text-decoration:none;} .portfolio_project_copyright { font-size:12px;} .portfolio_project_url { font-size:12px;} .portfolio_project_desc { text-align:justify;} .portfolio_project_skills { font-size:12px;} .portfolio_project_separator { width:620px; height:3px; background: transparent url(../img/dots.gif) top center repeat-x; margin:20px 0 10px 40px;} .portfolio_project_gotop { position:absolute; top:2px; right:0; width:18px; height:18px; background:#504236 url(../img/arrow_top.gif) 0px 0px no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .portfolio_project_gotop:hover { background-position: 0px -18px; } /* CONTACT */ #contact { position:relative; width:100%; height:auto; } #contact_heading { width:180px; height:80px; background:transparent url(../img/heading_contact.png) top left no-repeat; } #contact #contact_info { width:409px; height:56px; background:transparent url(../img/contact_info_alt.gif) top left no-repeat; margin:0 0 30px 150px; } #contact_text { position:absolute; top:15px; left:180px;} #contact_form_wrapper { position:relative; } #contact_form { width:383px; height:400px; background:transparent url(../img/background_contact_form.jpg) 0px 0px no-repeat; margin:30px 0 0 150px; padding:29px 45px 0 0; text-align:right; border:0px solid red;} #contact_form input.field { width: 230px; height: 21px; margin:0px 0px 17px 0px; background-color:#f5f1e5; border:0;} #contact_form input.captcha { width:37px; position:absolute; top:370px; left:303px; } #contact_form textarea { width: 345px; height: 155px; background-color:#f5f1e5; border:0px;} #contact_form div#submit { position:relative; top:1px; left:273px; width:116px; height:34px; background:transparent url(../img/contact_form_submit.jpg) 0px 0px no-repeat; color:#ffffff; display:block;} #contact_form div#submit:hover { background:transparent url(../img/contact_form_submit.jpg) 0px -34px no-repeat; cursor: pointer;} #contact_form div#submit span { display:none;} #contact_form div#submit_hider { position:relative; top:-40px; left:260px; width:150px; height:34px; background-color:#231d1d; z-index:0;} #submit_no_js { position:relative; top:-10px; left:210px; z-index:1;} #feedback { width:410px; margin:0 0 0 150px; padding:0; text-align:center;} /* ABOUT */ #about_heading { margin-top:187px; width:180px; height:80px; background:transparent url(../img/heading_about.png) top left no-repeat; } #about_contact_link a { float:left; width:150px; height:60px; margin-top:-70px;} #about_intro, #about_more { text-align:justify; padding:10px 0 0 18px;} #about_more_button { display:none; margin:20px 0 20px 120px;} #about_more_button a { display:block; width:157px; height:20px; background:transparent url(../img/button_bg.gif) -20px 35px repeat; color:#ffffff; font-size:14px; text-align:center; padding:5px 0 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #about_more_button a:hover { background-position:0px -25px;} /* DOWNLOAD RESUME */ #download_resume { display:none; } #download_resume a { position:fixed; top:250px; left:0px; width:60px; height:257px; background:transparent url(../img/download_resume.png) top center no-repeat;} #download_resume_heading { margin-top:40px; width:180px; height:80px; background:transparent url(../img/heading_resume.png) top left no-repeat; cursor:pointer; } #download_resume_text { padding:10px 0 0 18px; text-align:justify;} #download_resume_button { margin:20px 0 0 133px;} #download_resume_button a { display:block; width:140px; height:20px; background:transparent url(../img/button_bg.gif) -20px 35px repeat; color:#ffffff; font-size:14px; text-align:center; padding:5px 0 0 0; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #download_resume_button a:hover { background-position:0px -25px;} /* TOOLS */ /* #tools_separator { width:100%; height:3px; background:transparent url('../img/dots.gif') top center no-repeat; margin:44px 0 45px 0;} #tools li { float:left; margin:0 0 10px 35px; } #logo_php { display:block; width:100px; height:52px; background:transparent url(../img/logo_php.gif) center center no-repeat; } #logo_mysql { display:block; width:100px; height:52px; background:transparent url(../img/logo_mysql.gif) center center no-repeat; } #logo_jquery { display:block; width:100px; height:52px; background:transparent url(../img/logo_jquery.gif) center center no-repeat; } #logo_w3c { display:block; width:100px; height:52px; background:transparent url(../img/logo_w3c.gif) center center no-repeat; } #logo_apple { display:block; width:100px; height:52px; background:transparent url(../img/logo_apple.gif) center center no-repeat; } #logo_ajax { display:block; width:100px; height:52px; background:transparent url(../img/logo_ajax.gif) center center no-repeat; } #logo_photoshop { display:block; width:100px; height:52px; background:transparent url(../img/logo_photoshop.gif) center center no-repeat; } #logo_coda { display:block; width:100px; height:52px; background:transparent url(../img/logo_coda.gif) center center no-repeat; } */ /* FOOTER */ #footer { clear:both; position:relative; height:60px; width:960px; background:transparent url(../img/background_footer.gif) top center no-repeat; font-size:14px; line-height:17px; margin:40px 0 40px 0; padding:0 0 0 0; color:#ffffff;} #footer div { position:absolute; top:19px; left:15px; } #footer ul li span { display:none; } #footer ul { position:absolute; top:18px; left:370px; } #footer ul li { float:left; } #footer ul li a { display:block; width:64px; height:30px; margin: 0 0 0 0; } #footer ul li#w3c_xhtml a { background:url(../img/icon_w3c_xhtml.gif) left top no-repeat; } #footer ul li#w3c_css a { background:url(../img/icon_w3c_css.gif) left top no-repeat; } #footer ul li#any_browser a { background:url(../img/icon_any_browser.gif) left top no-repeat; } #footer ul li#w3c_xhtml a:hover,#footer ul li#w3c_css a:hover,#footer ul li#any_browser a:hover { background-position:left -30px; } #footer #facebook_like { position:absolute; left:760px; top:20px; width:190px; overflow:hidden;} #footer #google_plus_one { position:absolute; left:674px; top:1px; width:60px;} #footer #top_of_page { position:absolute; top:17px; left:910px; width:26px; height:26px; background:#4a413b url(../img/top_of_page.gif) 3px 3px no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #footer #top_of_page:hover { background-position: 3px -22px } #directories { font-size:7px; color:#c5baa8; text-align:center; } #directories a, #directories a:hover{ color:#c5baa8; }