@charset "utf-8"; /* CSS Document */ @import url(http://fonts.googleapis.com/css?family=Ropa+Sans|Electrolize); * { padding: 0; margin: 0; } body { font: normal 14px/16px 'Electrolize', Tahoma, Geneva, sans-serif; color: #cccccc; background: url('../images/dark/bg-a.png') top left repeat; } h1 { font: normal 24px/24px Electrolize, Tahoma, Geneva, sans-serif; padding: 9px 0 0 0; } h2 { font: normal 18px/24px Electrolize, Tahoma, Geneva, sans-serif; } h3 { font: normal 16px/24px Electrolize, Tahoma, Geneva, sans-serif; } ul,ol { margin: 0 0 0 24px; } img { border: 0; } p { padding: 20px 0; } .clear { clear: both; } a, a:link, a:visited, a:active { outline: none; text-decoration: underline; color: #cccccc; } a:hover { text-decoration: none; } /* --- header + logo --- */ #header { position: relative; width: 100%; height: 104px; background: url('../images/dark/bg-header.png') top left repeat-x; } #logo { height: 70px; } #logo img { display: block; width: 97px; height: 26px; padding: 22px 20px 0; } /* --- menu --- */ #menu { position: relative; height: 33px; margin: 0 auto; padding: 0 22px 0 0; } #menu .line { position: absolute; top: 1px; width: 124px; height: 2px; background-color: #a8a8a8; } #menu ul { position: absolute; top: 0; left: 18px; margin: 0; list-style: none; } #menu ul li { display: block; float: left; padding: 0 14px 0 4px; } #menu ul li a, #menu ul li a:link, #menu ul li a:visited, #menu ul li a:active { display: block; width: 96px; height: 32px; padding: 0 0 0 24px; font: normal 13px/34px Electrolize, Tahoma, Geneva, sans-serif; text-transform: uppercase; text-decoration: none; } #menu ul li a:hover { text-decoration: none; } #menu .home { background: url('../images/dark/icon-home.png') center left no-repeat; } #menu .about-us { background: url('../images/dark/icon-info.png') center left no-repeat; } #menu .portfolio { background: url('../images/dark/icon-portfolio.png') center left no-repeat; } #menu .contact-us { background: url('../images/dark/icon-email.png') center left no-repeat; } /* --- content --- */ #content { position: relative; width: 740px; margin: 0 auto; padding: 0; } /* --- uc-block ---- */ #uc-block { height: 180px; text-align: center; } #uc-block .block-height { padding: 37px 0 0 0; } #uc-block strong { display: block; font-family: 'Ropa Sans', Tahoma, Geneva, sans-serif; font-size: 40px; line-height: 38px; font-weight: normal; text-transform: uppercase; color: #dfa022; } #uc-block p { font-size: 16px; line-height: 16px; padding: 0px 0 0 0; margin: 0; } /* --- page --- */ #wrap-pages { position: relative; height: 490px; } .page { display: block; padding: 0 0 200px; margin: 0; } /* --- count-down --- */ #count-down { position: relative; width: 525px; height: 140px; margin: 0 auto; background: url('../images/dark/count-down-frame.png') top left no-repeat; } .count-down-numbers { position: relative; width: 522px; height: 107px; } .count-down-numbers div { position: absolute; width: 37px; height: 75px; top: 14px; } .count-down-numbers div span { display: block; width: 37px; height: 75px; background-image: url('../images/count-down-sprite-numbers.png'); background-repeat: no-repeat; background-position: 0px 0px; } #d-1 { left: 22px; } #d-2 { left: 69px; } #h-1 { left: 154px; } #h-2 { left: 201px; } #m-1 { left: 286px; } #m-2 { left: 333px; } #s-1 { left: 418px; } #s-2 { left: 465px; } .count-down-numbers .n-n { } .count-down-numbers .n-0 { background-position: -44px 0px; } .count-down-numbers .n-1 { background-position: -88px 0px; } .count-down-numbers .n-2 { background-position: -132px 0px; } .count-down-numbers .n-3 { background-position: -176px 0px; } .count-down-numbers .n-4 { background-position: -220px 0px; } .count-down-numbers .n-5 { background-position: -264px 0px; } .count-down-numbers .n-6 { background-position: -308px 0px; } .count-down-numbers .n-7 { background-position: -352px 0px; } .count-down-numbers .n-8 { background-position: -396px 0px; } .count-down-numbers .n-9 { background-position: -440px 0px; } .count-down-title { position: relative; margin: 3px 0 0 0; height: 20px; } .count-down-title span { position: absolute; top: 0; left: 0; width: 84px; font-family: 'Electrolize', Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 100%; font-weight: normal; text-transform: uppercase; text-align: center; color: #dfa022; } .count-down-title .days { left: 23px; } .count-down-title .hours { left: 155px; } .count-down-title .minutes { left: 287px; } .count-down-title .seconds { left: 419px; } /* --- Subscribe --- */ #wrap-subscribe { position: absolute; width: 520px; bottom: 0; left: 50%; margin-left: -260px; } #subscribe { position: relative; width: 303px; height: 30px; margin: 7px auto 0; } h5{ padding: 75px 0 0 0; font: normal 20px/20px 'Ropa Sans', Tahoma, Geneva, sans-serif; color: #cccccc; text-align: center; } .input-subscribe { width: 242px; height: 28px; background: url('../images/dark/input-subscribe.png') top left no-repeat; } .input-subscribe input { border: none; background: none; width: 210px; height: 27px; padding: 0 0 0 15px; font-family: 'Electrolize', Tahoma, Geneva, sans-serif; font-size: 14px; line-height: 27px; color: #FFF; } #subscribe .button-submit { position: absolute; width: 79px; height: 30px; top: 0; right: 0; background: url('../images/dark/button-submit.png') top left no-repeat; background-position: 0 0; } #subscribe .button-submit:hover { background-position: 0px -30px; } #subcribe-message { display: none; position: absolute; top: 24px; left: 0; width: 302px; height: 34px; background: url('../images/dark/form-message-bg-down.png') top left no-repeat; color: #377419; line-height: 41px; padding: 0 16px; } /* ---- social-icons --- */ #social-icons { padding: 0; margin: 0 auto; list-style: none; padding-top: 30px; } .social-icons-absolute { position: absolute; left: 50%; bottom: 34px; padding-top: 0 !important; } #social-icons li { display: block; float: left; padding: 0 8px; } #social-icons a { display: block; width: 34px; height: 35px; background-position: top left; } #social-icons a:hover { background-position: bottom left } #social-icons .twitter { background: url('../images/dark/social-icons/twitter.png') top left no-repeat; } #social-icons .dribbble { background: url('../images/dark/social-icons/dribbble.png') top left no-repeat; } #social-icons .facebook { background: url('../images/dark/social-icons/facebook.png') top left no-repeat; } #social-icons .skype { background: url('../images/dark/social-icons/skype.png') top left no-repeat; } #social-icons .rss { background: url('../images/dark/social-icons/rss.png') top left no-repeat; } #social-icons .digg { background: url('../images/dark/social-icons/digg.png') top left no-repeat; } #social-icons .googlebuzz { background: url('../images/dark/social-icons/googlebuzz.png') top left no-repeat; } #social-icons .delicious { background: url('../images/dark/social-icons/delicious.png') top left no-repeat; } #social-icons .tumbler { background: url('../images/dark/social-icons/tumbler.png') top left no-repeat; } #social-icons .plixi { background: url('../images/dark/social-icons/plixi.png') top left no-repeat; } #social-icons .stubleupon { background: url('../images/dark/social-icons/stubleupon.png') top left no-repeat; } #social-icons .lastfm { background: url('../images/dark/social-icons/lastfm.png') top left no-repeat; } #social-icons .mobypicture { background: url('../images/dark/social-icons/mobypicture.png') top left no-repeat; } #social-icons .youtube { background: url('../images/dark/social-icons/youtube.png') top left no-repeat; } #social-icons .vimeo { background: url('../images/dark/social-icons/vimeo.png') top left no-repeat; } #social-icons .myspace { background: url('../images/dark/social-icons/myspace.png') top left no-repeat; } #social-icons .dropbox { background: url('../images/dark/social-icons/dropbox.png') top left no-repeat; } #social-icons .foursquare { background: url('../images/dark/social-icons/foursquare.png') top left no-repeat; } #social-icons .gowalla { background: url('../images/dark/social-icons/gowalla.png') top left no-repeat; } #social-icons .ichat { background: url('../images/dark/social-icons/ichat.png') top left no-repeat; } #social-icons .googleplus { background: url('../images/dark/social-icons/googleplus.png') top left no-repeat; } #social-icons .linkedin { background: url('../images/dark/social-icons/linkedin.png') top left no-repeat; } /* ---- window ---- */ .window { position: relative; width: 562px; height: 262px; padding: 0; margin: 0 auto; background: url('../images/dark/window.png') top left no-repeat; } .visible-area { position: absolute; top: 8px; left: 10px; width: 521px; height: 243px !important; overflow: hidden; padding: 0 11px; } .window-tabs .visible-area { top: 31px !important; height: 211px !important; left: 0 !important; width: 520px !important; } .visible-area .inner { position: relative; } .scroll-bar { display: none; position: absolute; top: 1px; right: 0px; width: 11px; height: 242px; border-left: 1px solid #101010; cursor: pointer; } .window-tabs .scroll-bar { height: 210px !important; } .scroll-bar .scroll { position: absolute; top: 0px; right: 0; width: 11px; height: 26px; background: url('../images/dark/window-scroll.png') top left no-repeat; cursor: pointer; } h4 { position: absolute; top: -25px; left: 24px; padding: 0; margin: 0; font: normal 21px/21px 'Ropa Sans', Tahoma, Geneva, sans-serif; color: #dfa022; } .window p { font-family: Electrolize, Tahoma, Geneva, sans-serif; font-size: 14px; line-height: 115%; font-weight: normal; margin: 0; padding: 8px 0; } /* --- tabs --- */ .tabs { position: absolute; top: 9px; left: 11px; width: 542px; height: 31px; background: url('../images/dark/tab-bg.png') top left repeat-x; border-bottom: 1px solid #101010; } .tabs ul { padding: 0; margin: 0; list-style: none; } .tabs ul li { display: inline-block; height: 31px; border-right: 1px solid #101010; padding: 0; margin: 0; } .tabs ul li.active, .tabs ul li:hover { background-color: #292a29; border-bottom: 1px solid #292a29; } .tabs ul li > a { font-size: 16px; line-height: 31px; color: #999999; text-decoration: none; padding: 0 12px; } .tabs ul li.active a, .tabs ul li a:hover { color: #cccccc; } .tab { visibility: hidden; } .tabs .tab-2 { padding: 0 0 15px 0; } #map-location { position: relative; width: 327px; height: 172px; margin: 0; padding: 0; float: left; } #map-location iframe { position: absolute; top: 6px; left: 0; width: 520px !important; height: 198px !important; } /* --- form send message --- */ #wrap-send-message { position: absolute; top: 0px; left: 6px; height: 206px; width: 530px; } #wrap-send-message input { border: none; background: none; font: normal 14px/24px Electrolize, Tahoma, Geneva, sans-serif; color: #cccccc; width: 190px; height: 24px; } #wrap-send-message label { font: normal 14px/24px Electrolize, Tahoma, Geneva, sans-serif; color: #6d6d6d; padding: 0 10px; } .field-name { position: absolute; top: 6px; left: 6px; left: 0; width: 264px; height: 24px; border: 1px solid #101010; } .field-email { position: absolute; top: 6px; right: 6px; right: 0; width: 263px; height: 24px; border: 1px solid #101010; } .field-message { position: absolute; top: 31px; left: 6px; left: 0; width: 528px; height: 171px; border: 1px solid #101010; } #wrap-send-message .field-message label { line-height: 34px; padding-right: 400px; } .field-message textarea { position: absolute; top: 33px; left: 10px; width: 508px; height: 97px; border: none; background: none; font: normal 14px/16px Electrolize, Tahoma, Geneva, sans-serif; color: #cccccc; overflow: hidden; } #wrap-send-message .button { position: absolute; width: 79px; height: 30px; bottom: 9px; right: 226px; background: url('../images/dark/button-submit.png') top left no-repeat; background-position: 0 0; cursor: pointer; } #wrap-send-message .button:hover { background-position: 0px -30px; } .message { } .error { color: #d80036 !important; } .jf_cf_name, .jf_cf_email, .jf_cf_message { display: none; position: absolute; top: 8px; width: 226px; height: 34px; font-size: 14px; line-height: 27px; color: #FFF; background: url('../images/dark/form-message-bg.png') top left no-repeat; padding: 0 12px; } .jf_cf_name { top: 8px; left: 6px; } .jf_cf_email { top: 8px; right: 21px; } .jf_cf_message { top: 67px; left: 91px; } #jf_cf_button_show { } #jf_cf_information { font-size: 16px; } /* --- carusel --- */ #carusel { position: relative; width: 742px; height: 248px; padding: 0; margin: 0 auto; background: url('../images/dark/portfolio-frame.png') top left no-repeat; } #carusel .wrap { position: absolute; padding: 0; margin: 0; width: 650px; height: 250px; top: 11px; left: 47px; overflow: hidden; } #carusel .border { width: 648px; height: 144px; border: 1px solid #151515; background-color: #FFF; } #carusel ul { position: relative; width: 2000px; padding: 0; margin: 0; list-style: none; } #carusel ul li { position: relative; display: inline-block; width: 214px; height: 142px; border: 1px solid #151515; padding: 0; margin: 0; } #carusel .left { position: absolute; top: 70px; left: 16px; width: 15px; height: 26px; background: url('../images/dark/arrow-left.png') top left no-repeat; outline: none; } #carusel .left:hover { background: url('../images/dark/arrow-left-hover.png') top left no-repeat; } #carusel .right { position: absolute; top: 70px; right: 14px; width: 15px; height: 26px; background: url('../images/dark/arrow-right.png') top left no-repeat; outline: none; } #carusel .right:hover { background: url('../images/dark/arrow-right-hover.png') top left no-repeat; } #carusel .hint { display: none; position: absolute; top: 135px; right: 0px; width: 214px; padding: 11px 0 0 0; background: url('../images/dark/hint-arrow.png') top right no-repeat; } #carusel .hint p { padding: 6px 9px 8px; margin: 0; background-color: #fff4c4; font-size: 14px; line-height: 14px; color: #151515; } /* --- preloader --- */ .preloader { position: absolute; top: 53px; left: 239px; width: 52px; height: 52px; background: url('../images/dark/preloader-bg.png') top left no-repeat; } .preloader span{ display: block; width: 52px; height: 52px; background: url('../images/dark/preloader.gif') center center no-repeat; } .preloader-small { position: absolute; top: 2px; right: -40px; width: 24px; height: 24px; background: url('../images/dark/preloader-small-bg.png') top left no-repeat; } .preloader-small span{ display: block; width: 24px; height: 24px; background: url('../images/dark/preloader-small.gif') center center no-repeat; }