* { margin:0; padding:0; } a { outline:none; } a img { border:0; outline:0; } .clear { width:100%; clear:both; height:0; overflow:hidden;} ul { list-style:none; } input { border:0; } #wrapper { width:1000px; margin:20px auto 30px auto; padding:0; overflow:hidden; } body { background-color:#000; font-family:tahoma, arial; font-size:13px; background-image:url(../images/body_bg.jpg); background-repeat:repeat-x; background-position:top; } #top_container_wrapper { width:100%; height:129px; float:left; background-image:url(../images/top-container-bg.gif); background-repeat:repeat-x; -webkit-border-top-right-radius: 30px; -moz-border-radius-topright: 30px; border-top-right-radius: 30px; } #top_container { width:1000px; height:127px; clear:both; margin:auto; } #logo_container { width:273px; height:127px; float:left; } /* main menu */ /*--------------------------------*/ #menu_container { width:450px; height:62px; float:right; padding:65px 18px 0 0; } a#home_menu { width:100px; height:23px; float:left; padding:22px 0 0 0; color:#dcdcdc; text-align:center; text-decoration:none; font-size:15px; font-family:Arial, Helvetica, sans-serif; background-image:url(../images/home_button_bg.jpg); background-position:25px 0; background-repeat:no-repeat; } #home_menu:hover, #home_menu.hover { background-position:25px -45px; background-repeat:no-repeat; } a#works_menu { width:100px; height:23px; float:left; padding:22px 0 0 0; color:#dcdcdc; text-align:center; text-decoration:none; font-size:15px; font-family:Arial, Helvetica, sans-serif; background-image:url(../images/works_button_bg.jpg); background-position:27px 0; background-repeat:no-repeat; } #works_menu:hover, #works_menu.hover { background-position:27px -45px; background-repeat:no-repeat; } a#about_menu { width:100px; height:23px; float:left; padding:22px 0 0 0; color:#dcdcdc; text-align:center; text-decoration:none; font-size:15px; font-family:Arial, Helvetica, sans-serif; background-image:url(../images/about_button_bg.jpg); background-position:27px 0; background-repeat:no-repeat; } #about_menu:hover, #about_menu.hover { background-position:27px -45px; background-repeat:no-repeat; } a#contact_menu { width:100px; height:23px; float:left; padding:22px 0 0 0; color:#dcdcdc; text-align:center; text-decoration:none; font-size:15px; display:block; font-family:Arial, Helvetica, sans-serif; background-image:url(../images/contact_button_bg.jpg); background-position:27px 0; background-repeat:no-repeat; } #contact_menu:hover, #contact_menu.hover { background-position:27px -45px; background-repeat:no-repeat; } /* banner */ /*--------------------------------*/ #homepage_banner_container_wrapper { width:100%; height:317px; float:left; background-image:url(../images/homepage_container_wrapper_bg.gif); background-repeat:repeat-x; } #banner_container { width:1000px; height:317px; margin:auto; background-image:url(../images/below_top_bg.jpg); background-position:top center; background-repeat:no-repeat; } #banner_container #mac_book_container { width:441px; height:285px; float:right; padding:32px 0 0 91px; background-image:url(../images/mac_book.png); background-repeat:no-repeat; } #banner_container div.intro { width:500px; height:auto; padding-left:20px; position:absolute; } #banner_container div.intro h1 { font-size:34px; color:#fff4f4; width:100%; clear:both; font-weight:normal; padding-bottom:15px; padding-top:45px; font-family:Georgia, "Times New Roman", Times, serif; text-shadow: #333 1px 1px 1px; } #banner_container div.intro p { font-size:17px; color:#040404; width:100%; clear:both; line-height:24px; font-family:Georgia, "Times New Roman", Times, serif; } #banner_container div.intro p span { color:#ffffff; font-family:Georgia, "Times New Roman", Times, serif; } #banner_container div.intro div#more_about_me a { width:131px; height:32px; float:right; margin-top:15px; margin-right:60px; background-image:url(../images/more_about_me_button.png); background-repeat:no-repeat; background-position:top; } #banner_container div.intro div#more_about_me a:hover { background-position:bottom; } /* content container */ /*--------------------------------*/ #content_container_wrapper { width:100%; height:auto; float:left; background-image:url(../images/content-container-wrapper-bg.jpg); background-repeat:repeat-x; background-position:top; background-color:#f1f8e2; } #content_container { width:1000px; height:auto; margin:auto; padding-bottom:30px; clear:both; } /* home page content ------------------------------*/ #homepage-three-columns { width:100%; height:auto; float:left; } #homepage-three-columns h1 { width:100%; height:auto; float:left; font-size:22px; font-weight:normal;padding-bottom:30px; color:#5f9c13; text-shadow: #8cc449 0 1px 1px; } #homepage-three-columns p.text { width:100%; height:auto; float:left; font-size:13px; color:#555555; line-height:20px; padding-bottom:15px; } #homepage-three-columns a.more-info { position:absolute; bottom:0; left:100px; font-size:11px; color:#157383; text-decoration:none; border-bottom:1px solid #c1f2ff; } #homepage-three-columns a:hover.more-info { border-bottom:1px solid #157383; } #homepage-three-columns div.column_1 { width:233px; height:260px; float:left; padding:0 101px 0 21px; position:relative; } #homepage-three-columns div.column_2 { width:185px; height:260px; float:left; padding:0 138px 0 0; position:relative; } #homepage-three-columns div.column_2 div.featured-project { width:100%; height:auto; float:left; } #homepage-three-columns div.column_2 div.featured-project p.project-name { width:100%; height:auto; float:left; font-size:14px; color:#555555; font-weight:bold; padding-bottom:5px; } #homepage-three-columns div.column_2 div.featured-project img.project-screenshot { float:left; display:inline; margin-bottom:4px; padding:5px; border:1px solid #ccc; background-color:#fff; } #homepage-three-columns div.column_2 div.featured-project p.text { width:100%; height:auto; float:left; font-size:13px; color:#555555; line-height:20px; } #homepage-three-columns div.column_3 { width:277px; height:260px; float:left; padding:0 45px 0 0; position:relative; } #homepage-three-columns div.column_3 ul.what-you-get { width:257px; float:left; list-style:none; padding:0 0 0 10px; } #homepage-three-columns div.column_3 ul.what-you-get li { display:block; padding:0 0 0 25px; background-image:url(../images/check-icon.png); background-repeat:no-repeat; background-position:0 4px; font-size:12px; color:#555555; line-height:24px; font-weight:bold; } /* Sub Page Banner */ /*--------------------------------*/ #subpage_banner_container_wrapper { width:100%; height:auto; float:left; background-image:url(../images/homepage_container_wrapper_bg.gif); background-repeat:repeat-x; } #subpage_banner_container_inner { width:1000px; height:auto; clear:both; margin:auto; padding:50px 0; background-image:url(../images/below_top_bg.jpg); background-position:center center; background-repeat:no-repeat; } #subpage_banner_container_inner p.text { width:900px; height:auto; padding:0 50px; float:left; text-align:center; font-size:18px; color:#f1f8e2; line-height:24px; font-family:Georgia, "Times New Roman", Times, serif; text-shadow: #333 1px 1px 1px; } #subpage_banner_container_inner p.about-me { width:900px; height:auto; padding:0 50px; float:left; text-align:left; font-size:18px; color:#fff; line-height:28px; font-family:Georgia, "Times New Roman", Times, serif; text-shadow: #333 1px 1px 1px; } #subpage_banner_container_inner p.about-me a { color:#fff; } /* Work Page Content */ /*--------------------------------*/ #porfolio-page { width:900px; height:auto; float:left; padding:30px 50px; } #porfolio-page div.title { width:100%; height:auto; float:left; padding-bottom:6px; border-bottom:1px solid #413a2b; display:inline; margin-bottom:20px;font-weight:normal; text-transform:uppercase; color:#413a2b; font-weight:normal; font-size:22px; letter-spacing:1px; } #porfolio-page div.each-project { width:404px; height:auto; float:left; margin:10px 20px 20px 20px; display:inline;} #porfolio-page div.each-project a.view-screenshot { float:right; font-size:11px; color:#74ae2c; text-decoration:none; border-bottom:1px solid #8dc54a; margin:5px 5px 0 0; } #porfolio-page div.each-project a:hover.view-screenshot { border-bottom:1px solid #568819; } .boxgrid { width: 404px; height: 229px; padding:8px 0 0 8; float:left; background-image:url(../images/box-grid-bg.jpg); background-repeat:no-repeat; overflow: hidden; position: relative; } .boxgrid img { position: absolute; top:8px; left:8px; border: 0; } .boxcaption { float: left; position: absolute; background: #000; height: 80px; width: 377px; padding:0 0 0 8px; opacity: .8; /* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .caption .boxcaption { top: 230px; left: 8px; } .caption h3 { width:100%; color:#fff; font-size:16px; font-weight:bold; padding:5px 0 8px 0; } .boxgrid p { padding: 0 10px 3px 10px; color:#dedfdc; font-weight:normal; font-size:12px; font-family:Georgia, "Times New Roman", Times, serif;} .boxgrid p span { width:100px; text-align:right; float:left; padding-right:8px; color:#629e16; } .boxgrid p a { color:#dedfdc; text-decoration:underline; } .boxgrid p a:hover { color:#ff0000; } /* About Me Page */ /*--------------------------------*/ #about-me-page { width:900px; height:auto; float:left; padding:50px 50px; } #about-me-page div.left-column { width:550px; height:auto; float:left; padding:0 50px 0 0; } #about-me-page div.left-column p.title { width:100%; height:auto; float:left; font-size:22px; font-weight:normal; padding-bottom:20px; color:#5f9c13; text-shadow: #8cc449 0 1px 1px; } #about-me-page div.left-column p.text { width:100%; height:auto; float:left; font-size:13px; color:#555555; line-height:20px; padding-bottom:20px; } #skills{ float:left; width:250px; margin-top:50px; display:inline; padding:12px 0 25px 20px; color:#fff; background:#3a3b3f; border-bottom:8px solid #badb72; } #skills h2{ font-size:20px; margin-bottom:22px; color:#badb72; font-weight:normal; letter-spacing:1px; text-shadow:#000 0 1px 1px; } #skills li{ padding-left:25px; font-size:12px; margin-top:10px; color:#fff; font-family:arial, verdana, sans-serif; background:url(../images/puce_true.gif) left no-repeat; } /* Contact Page */ /*--------------------------------*/ #contact-me-page { width:900px; height:auto; float:left; padding:50px 50px; } #contact-me-page div.right-column { width:300px; height:auto; float:left; padding:0 50px 0 0; } #contact-me-page div.right-column div.each-contact { width:285px; float:left; padding:0 0 10px 15px; letter-spacing:1px; font-size:13px; color:#555555; } #contact-me-page div.right-column div.each-contact span { width:30px; float:left; } #contact-me-page div.right-column div.each-contact span.new-text { float:none; width:auto; position:relative; font-size:11px; color:#00CC00; top:-2px; font-weight:normal; } #contact-me-page div.right-column div.each-contact p { float:left; padding:3px 0 0 0; } #contact-me-page p.title { width:100%; height:auto; float:left; font-size:22px; font-weight:normal; padding-bottom:20px; color:#5f9c13; text-shadow: #8cc449 0 1px 1px; } #contact-me-page p.text { width:280px; height:auto; float:left; font-size:13px; color:#555555; line-height:20px; padding:0 0 8px 20px; letter-spacing:1px; } #contact-me-page #contactFormArea { width:400px; float:left; padding:0; font-size:13px; color:#555555; } #contact-me-page #contact_form_container { width:400px; float:left; padding:0 0 0 100px; font-size:13px; color:#555555; } #contact-me-page fieldset { border:0;margin:0;padding:0; float:left; } #contact-me-page label { display:block; padding-top:5px; } #contact-me-page input.text,textarea { width:300px; font-size:12px; color:#fff; padding:10px 5px; background-color:#2c2c2e; margin:1px 0; border:0; font-family:Arial, Helvetica, sans-serif; } #contact-me-page input:focus.text,textarea:focus { background-color:#8dc54a; color:#000; font-weight:bold; } #contact-me-page input.submit { padding:8px 8px;font:bold 12px/12px verdana,arial,sans-serif; cursor:pointer; background-color:#8dc54a; } /* footer --------------------------------*/ #footer_container { width:100%; height:215px; clear:both; background-repeat:repeat-x; background-position:top center; overflow:hidden; } #footer_container div.footer_inner { width:1000px; height:195px; padding:20px 0 0 0; margin:auto; background-image:url(../images/footer_bg_inner.jpg); -webkit-border-bottom-left-radius: 30px; -moz-border-radius-bottomleft: 30px; border-bottom-left-radius: 30px; float:left; } #footer_container div.footer_inner div.separator { width:12px; height:64px; float:left; overflow:hidden; background-image:url(../images/footer_separator.png); background-repeat:no-repeat; } #footer_container div.footer_inner div.column_1 { width:259px; height:auto; float:left; padding:2px 0 0 25px; } #footer_container div.footer_inner div.column_2 { width:420px; height:auto; float:left; text-align:center; font-size:12px; color:#c1cbbb; padding:25px 0 0 0; } #footer_container div.footer_inner div.column_2 a { font-size:12px; color:#c1cbbb; text-decoration:none; padding:0 13px; } #footer_container div.footer_inner div.column_2 a:hover { color:#fff; } #footer_container div.footer_inner div.column_3 { width:auto; height:auto; float:left; padding:25px 0 0 30px; } #footer_container div.footer_inner div.column_3 p { float:left; display:inline; margin-right:20px; color:#c1cbbb; font-size:11px; } /* end of footer */