ul, ol { list-style:none; } h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; } ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, div, span, img, dt, dd, dl { margin:0; padding:0; } /* * * Main Styles * * */ html { font-size: 16px; overflow-x:hidden; width: 100%; height: 100%; } body { color: #666; font: normal 62.5% Arial, Helvetica, sans-serif; text-align: center; background: #fff; /*overflow:hidden;*/ width: 100%; height: 100%; } h1 { font-size: 1.8em; line-height: 100%; } h2 { font-size: 1.1em; line-height: 100%; } h3 { font-size: 1.1em; } h4 { font-size: 1.0em; line-height: 100%; } p { font-size: 1.2em; font-family: Arial, Helvetica, sans-serif; } a img { border: 0px; } a:hover img { border: 0px; } a:link, a:visited { color: #666; text-decoration: none; outline: none; } a:hover { color: #fff; text-decoration: none; } span.hidden { display: none; } div.clearfix { clear: both !important; float: none !important; font-size: 0px !important; } /* * * Global Styles * * */ a.return { clear: both; position: absolute; float: right; display: block; color: #fff; font-size: 1.2em; font-weight: bold; background: url(../images/return.png) no-repeat scroll 0 100%; padding: 0 0 17px 0; bottom: 0px; right: 22px; width: 67px; height: 68px; } a.return:hover { color: #9e382e; } div#slideshow-toolbar { clear: both; width: 50px; height: 25px; } div#slideshow-toolbar a.prev { float: left; display: block; background: url(../images/slideshow-toolbar_prev.png) no-repeat scroll 0 0; width: 13px; height: 25px; } div#slideshow-toolbar a.next { float: right; display: block; background: url(../images/slideshow-toolbar_next.png) no-repeat scroll 0 0; width: 13px; height: 25px; } div#slideshow-toolbar a.prev:hover, div#slideshow-toolbar a.next:hover { background-position: 0 -26px; } /* div#slideshow-toolbar { clear: both; background: url(../images/slideshow-toolbar_bg.png) no-repeat scroll 0 0; width: 63px; height: 25px; } div#slideshow-toolbar a.prev { float: left; display: block; background: url(../images/slideshow-toolbar_prev.png) no-repeat scroll 0 0; width: 13px; height: 25px; } div#slideshow-toolbar a.next { float: right; display: block; background: url(../images/slideshow-toolbar_next.png) no-repeat scroll 0 0; width: 13px; height: 25px; } div#slideshow-toolbar a.prev:hover, div#slideshow-toolbar a.next:hover { background-position: 0 -26px; } div#slideshow-toolbar { } div#slideshow-toolbar a { color: #fff; font-weight: bold; font-size: 1.2em; line-height: 30px; } div#slideshow-toolbar a.prev { padding: 0 15px 0 0; } div#slideshow-toolbar a:hover { color: #9E382E; } */ /* * * Wrap Styles * * */ #header { text-align: left; } #content { text-align: left; background: #aba8a8 url(../images/content-bg.png) repeat-y scroll 50% 0; } #footer { text-align: left; } body div.container { clear: both; float: left; width: 100%; } /* * * Header Styles * * */ #header div#wrap-header { position: relative; background: transparent url(../images/header-bg.png); padding: 34px 0 0 0; margin: 0 auto; width: 980px; height: 64px; } #header ul#navigation { position: absolute; background: #dedede; left: 180px; bottom: 0px; width: 496px; } #header ul#navigation li { float: left; padding: 4px 0; } #header ul#navigation li a { display: block; color: #615c5c; font-weight: bold; font-size: 1.1em; letter-spacing: 1px; text-transform: uppercase; line-height: 21px; background: url(../images/navigation-bg.png) no-repeat scroll 0 0; /*padding: 0 10px 0 12px;*/ padding: 0 13px 0 12px; } #header ul#navigation li.first a { background: none; } #header ul#navigation li a.on, #header ul#navigation li:hover a { color: #9E382E; text-decoration: none; } #header div#logo { float: right; padding: 5px 40px 0 0; } #header div#logo a { display: block; background: url(../images/header_logo.png) no-repeat scroll 0 0; width: 225px; height: 49px; } /* * * Content Styles * * */ #content div#wrap-content { margin: 0 auto; background: #383330 url(../images/content_wrap-bg.png) repeat-y scroll 0 0; width: 980px; height: 495px; } /* left column */ #content div#column-left { float: left; padding: 45px 0 0 0; overflow-y: hidden; width: 180px; height: 450px; } #content div#column-left.index { background: url(../images/column_left-index.png) no-repeat scroll 100% 100%; } #content div#column-left.portfolio { background: url(../images/column_left-portfolio.png) no-repeat scroll 100% 100%; } #content div#column-left.works { background: url(../images/column_left-beforeandafter.png) no-repeat scroll 100% 100%; } #content div#column-left.about { background: url(../images/column_left-about.png) no-repeat scroll 100% 100%; } #content div#column-left.contact { background: url(../images/column_left-contact.png) no-repeat scroll 100% 100%; } #content div#column-left div#background { position: absolute; width: 188px; height: 450px; } /*#content div#column-left.works div#background { background: url(../images/column_left-works.png) no-repeat scroll 100% 100%; }*/ #column-left div.portfolio_category { clear: both; float: left; padding: 0 0 5px 0; width: 100%; } #column-left div.portfolio_category h2 a { color: #fff; display: block; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; background: transparent url(../images/portfolio_category-bg.png) no-repeat scroll 0 0; line-height: 12px; padding: 4px 0 4px 32px; height: 12px; } #column-left div.portfolio_category h2:hover a, #column-left div.portfolio_category h2 a.active { background: transparent url(../images/portfolio_category-bg.png) no-repeat scroll 0 -21px; } #column-left div.portfolio_category-container { /*padding: 14px 0 22px 32px;*/ padding: 2px 0 0 32px; } #column-left div.portfolio_category-container h3 a { color: #9e382e; display: block; font-weight: normal; line-height: 15px; text-transform: uppercase; } #column-left div.portfolio_category-container h3:hover a { color: #fff; } #column-left div.portfolio_category-container ul { padding: 0 0 2px 0; } #column-left div.portfolio_category-container ul li { } #column-left div.portfolio_category-container ul li a { color: #828282; display: block; font-size: 1.1em; line-height: 14px; } #column-left div.portfolio_category-container ul li a:hover, #column-left div.portfolio_category-container ul li.active a { color: #fff; } /* center column */ #content div#column-center { float: left; border: 8px solid #1F1A17; background: #1F1A17; overflow: hidden; width: 480px; height: 480px; } #column-center ul#portfolio_images { width: 100%; height: 100%; } #column-center ul#portfolio_images li { display: block; } #column-center ul#portfolio_images li img { display: block; width: 495px; height: 444px; } #column-center ul#portfolio_image.image_container img { width: 480px; height: 480px; } #column-center ul.image_container.portfolio { float: left; background: #1f1a17; width: 480px; height: 480px; } #column-center ul.image_container.portfolio li { float: left; position: relative; padding: 5px; width: 150px; height: 150px; } #column-center ul.image_container.portfolio li img { display: block; width: 150px; height: 150px; } #column-center ul.image_container.project { float: left; width: 999999px; height: 100%; } #column-center ul.image_container.project li { float: left; } #column-center ul.image_container.project li img { display: block; width: 480px; height: 480px; } #column-center ul.image_container.works { float: left; background: #1f1a17; width: 480px; height: 480px; } #column-center ul.image_container.works li { float: left; position: relative; padding: 5px; width: 150px; height: 150px; } #column-center ul.image_container.works li img { display: block; width: 150px; height: 150px; } /* right column */ #content div#column-right { float: right; position: relative; overflow: hidden; width: 304px; height: 495px; } #column-right div.description_container { position: absolute; top: 0; left: 0; } #column-right div.description_container p { color: #fff; line-height: 16px; text-align: justify; text-indent: 30px; padding: 0 0 15px 0; } #column-right div.description_container p a { color: #9E382E; } #column-right div.description_container p a:hover { color: #fff; } #column-right div.description_container p.architect { font-size: 1.1em; } #column-right div.description_container ul { color: #fff; font-size: 1.2em; padding: 0 40px 15px 40px; } /*#column-right div.description_container.project { float: left; }*/ /*#column-right div.description_container.project h2 { color: #fff; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; line-height: 12px; padding: 4px 0 19px 0; }*/ /*#column-right div.description_container.project h2 { color: #fff; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; background: transparent url(../images/portfolio_category-bg.png) repeat-x scroll 0 0; line-height: 12px; padding: 4px 32px 4px 0; width: 100%; height: 12px; } #column-right div.description_container.project h3 { color: #fff; font-weight: normal; letter-spacing: 1px; padding: 0 0 1px 0; } #column-right div.description_container.project div#slideshow-toolbar { position: absolute; bottom: 0px; }*/ #column-right #index-description { padding: 80px 30px 0 30px; width: 244px; height: 415px; } #column-right #portfolio-description { padding: 80px 30px 0 30px; width: 244px; height: 415px; } #column-right div.description_container.project { padding: 45px 0 0 0; width: 304px; height: 450px; } #column-right div.description_container.project h2 { color: #fff; font-weight: normal; letter-spacing: 1px; text-align: right; text-transform: uppercase; background: transparent url(../images/portfolio_category-bg.png) repeat-x scroll 0 -21px; line-height: 12px; padding: 4px 32px 4px 0; margin: 0 0 17px 0; width: 272px; height: 12px; } #column-right div.description_container.project h3 { color: #fff; font-weight: normal; letter-spacing: 1px; font-size: 1.3em; padding: 0 30px 15px; } #column-right div.description_container.project p { padding: 0 30px 15px 30px; text-align: justify; text-indent: 0px; } #column-right div.description_container.project div.p_container { position: absolute; } #column-right div.description_container.project div#slideshow-toolbar { position: absolute; left: 30px; bottom: 0; } #column-right #works-description { padding: 80px 30px 0 30px; width: 244px; height: 415px; } #column-right #about-description { padding: 80px 30px 0 30px; width: 244px; height: 415px; } #column-right #contact-description { /*padding: 80px 0 0 30px;*/ padding: 30px 0 0 30px; width: 274px; /*height: 415px;*/ height: 465px; } #column-right #contact-description form h2 { float: left; color: #fff; line-height: 20px; width: 64px; } #column-right #contact-description form h3 { float: left; color: #fff; padding: 0 0 2px 0; } #column-right #contact-description form div { clear: both; float: left; padding: 0 0 10px 0; width: 100%; } #column-right #contact-description form input { float: right; font-size: 1.2em; padding: 0 2px; width: 200px; } #column-right #contact-description form textarea { float: right; font-size: 1.2em; border: 1px solid #999; padding: 2px; margin: 1px 0; overflow-y: auto; width: 202px; height: 90px; } #column-right #contact-description form div.checkbox_container { padding: 0 20px 10px 68px; width: 186px; } #column-right #contact-description form div.checkbox_container input { float: left; margin: 0 5px 0 0; width: 13px; height: 13px; } #column-right #contact-description form div.checkbox_container label { float: left; color: #fff; font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; width: 166px; } #column-right #contact-description form div.checkbox_container span { clear: both; float: left; display: block; padding: 0 0 0 20px; width: 185px; } #column-right #contact-description form div.checkbox_container span label { width: auto; } /* #column-right #contact-description form input.checkbox { float: left; margin: 0 5px 0 68px; width: auto; } #column-right #contact-description form label { color: #fff; font-size: 1.1em; font-family: Arial, Helvetica, sans-serif; } */ #column-right #contact-description div.submitter { position: absolute; padding: 0 0 0 0; left: 0px; bottom: 0px; width: 304px; } #column-right #contact-description div.submitter input { color: #9E382E; } #column-right #contact-description div.message_status { position: absolute; padding: 0 0 0 0; left: 0px; bottom: 0px; width: 304px; } #column-right #contact-description div.message_status p { float: right; line-height: 24px; text-align: center; text-indent: 0px; padding: 0; width: 200px; } /* #column-right #contact-description #message_status { clear: both; font-size: 1.1em; line-height: 20px; text-align: center; padding: 0 0 0 45px; } #column-right #contact-description #message_status.sending { color: #00CC00; } #column-right #contact-description #message_status.error { color: #FF0000; } */ /* * * Footer Styles * * */ #footer ul#wrap-footer { margin: 0 auto; background: transparent url(../images/footer_wrap-bg.png) no-repeat scroll 0 0; padding: 40px 0 0 0; width: 980px; height: 60px; } #wrap-footer li.first { float: left; /*color: #1f1a17;*/ padding: 0 0 0 2px; } #wrap-footer li.last { float: right; } #wrap-footer li.last strong { color: #1f1a17; padding: 0 2px 0 0; } /* * * Javascript Styles * * */ div.hollywood_square { position: absolute; background: transparent url(../images/hollywood_square-bg.png) repeat scroll 0 0; cursor: pointer; top: 0px; left: 0px; z-index:10; width: 160px; height: 160px; } div.hollywood_square p { position: absolute; color: #fff; text-align: center; font-weight: bold; font-size: 1.2em; line-height: 14px; bottom: 10px; left: 0px; width: 158px; }