under_construction/css/style-blue.css

@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: #FFF;
	background: url('../images/blue/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: #FFF;
	}		

a:hover {
	text-decoration: none;
	}	
	
/* --- header + logo --- */
#header {
	position: relative;
	width: 100%;
	height: 104px;
	background: url('../images/blue/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: #cfcfcf;
	}	
	
#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/icon-home.png') center left no-repeat;
	}
	
#menu	.about-us {
	background: url('../images/icon-info.png') center left no-repeat;
	}
	
#menu	.portfolio {
	background: url('../images/icon-portfolio.png') center left no-repeat;
	}
	
#menu	.contact-us {
	background: url('../images/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: #fff189;
	}	
	
#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/blue/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: 21px;
	}	
	
#d-2 {
	left: 68px;
	}

#h-1 {
	left: 153px;
	}
	
#h-2 {
	left: 200px;
	}	

#m-1 {
	left: 285px;
	}
	
#m-2 {
	left: 332px;
	}	
	
#s-1 {
	left: 417px;
	}	
	
#s-2 {
	left: 464px;
	}	
	
.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: #fff189;
	}	
	
.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: #FFF;
	text-align: center;
	}	
	
.input-subscribe {
	width: 242px;
	height: 28px;
	background: url('../images/blue/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: 31px;
	top: -1px;
	right: 0;
	background: url('../images/blue/button-submit.png') top left no-repeat;
	background-position: 0 0;
	}	
	
#subscribe .button-submit:hover {
	background-position: 0px -31px;
	}	
	
#subcribe-message {
	display: none;
	position: absolute;
	top: 24px;
	left: 0;
	width: 302px;
	height: 34px;
	background: url('../images/blue/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/blue/social-icons/twitter.png') top left no-repeat;
	}	
	
#social-icons .dribbble {
	background: url('../images/blue/social-icons/dribbble.png') top left no-repeat;
	}
	
#social-icons .facebook {
	background: url('../images/blue/social-icons/facebook.png') top left no-repeat;
	}
	
#social-icons .skype {
	background: url('../images/blue/social-icons/skype.png') top left no-repeat;
	}	
	
#social-icons .rss {
	background: url('../images/blue/social-icons/rss.png') top left no-repeat;
	}			
	
#social-icons .digg {
	background: url('../images/blue/social-icons/digg.png') top left no-repeat;
	}		
	
#social-icons .googlebuzz {
	background: url('../images/blue/social-icons/googlebuzz.png') top left no-repeat;
	}	
	
#social-icons .delicious {
	background: url('../images/blue/social-icons/delicious.png') top left no-repeat;
	}	
	
#social-icons .tumbler {
	background: url('../images/blue/social-icons/tumbler.png') top left no-repeat;
	}	
	
#social-icons .plixi {
	background: url('../images/blue/social-icons/plixi.png') top left no-repeat;
	}	
	
#social-icons .stubleupon {
	background: url('../images/blue/social-icons/stubleupon.png') top left no-repeat;
	}	
	
#social-icons .lastfm {
	background: url('../images/blue/social-icons/lastfm.png') top left no-repeat;
	}	
	
#social-icons .mobypicture {
	background: url('../images/blue/social-icons/mobypicture.png') top left no-repeat;
	}	
	
#social-icons .youtube {
	background: url('../images/blue/social-icons/youtube.png') top left no-repeat;
	}	
	
#social-icons .vimeo {
	background: url('../images/blue/social-icons/vimeo.png') top left no-repeat;
	}	
	
#social-icons .myspace {
	background: url('../images/blue/social-icons/myspace.png') top left no-repeat;
	}	
	
#social-icons .dropbox {
	background: url('../images/blue/social-icons/dropbox.png') top left no-repeat;
	}	
	
#social-icons .foursquare {
	background: url('../images/blue/social-icons/foursquare.png') top left no-repeat;
	}		
	
#social-icons .gowalla {
	background: url('../images/blue/social-icons/gowalla.png') top left no-repeat;
	}	
	
#social-icons .ichat {
	background: url('../images/blue/social-icons/ichat.png') top left no-repeat;
	}	
	
#social-icons .googleplus {
	background: url('../images/blue/social-icons/googleplus.png') top left no-repeat;
	}	
	
#social-icons .linkedin {
	background: url('../images/blue/social-icons/linkedin.png') top left no-repeat;
	}	
						
/* ---- window ---- */

.window {
	position: relative;
	width: 562px;
	height: 262px;
	padding: 0;
	margin: 0 auto;
	background: url('../images/blue/window.png') top left no-repeat;
	}
	
.visible-area {
	position: absolute;
	top: 8px;
	left: 10px;
	width: 520px;
	height: 243px !important;
	overflow: hidden;
	padding: 0 11px;
	}	
	
.window-tabs .visible-area {
	top: 31px !important;
	height: 211px !important;
	left: 0 !important;
	}	
	
.visible-area .inner {
	position: relative;
	}	

.scroll-bar {
	display: none;
	position: absolute;
	top: 1px;
	right: 0;
	width: 11px;
	height: 242px;
	border-left: 1px solid #4570ba;
	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/blue/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: #fff189; 		
	}	
	
.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: 10px;
	width: 542px;
	height: 31px;
	background: url('../images/blue/tab-bg.png') top left repeat-x;
	border-bottom: 1px solid #4570ba;
	}
	
.tabs ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}	
	
.tabs ul li {	
	display: inline-block;
	height: 31px;	
	border-right: 1px solid #4570ba;
	padding: 0;
	margin: 0;
	}
	
.tabs ul li.active,
.tabs ul li:hover {
	background-color: #6e8fc9;
	border-bottom: 1px solid #6e8fc9;
	}
	
.tabs ul li > a {
	font-size: 16px;
	line-height: 31px;
	color: #3d66ab;
	text-decoration: none;
	padding: 0 12px;
	}	
	
.tabs ul li.active a,
.tabs ul li a:hover {
	color: #fefefe;
	}		
	
.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: #FFF;
	width: 190px;
	height: 24px;
	}	
	
#wrap-send-message label {
	font: normal 14px/24px Electrolize, Tahoma, Geneva, sans-serif;
	color: #b7d2ff;
	padding: 0 10px;
	}	

.field-name {
	position: absolute;
	top: 6px;
	left: 6px;
	left: 0;
	width: 264px;
	height: 24px;
	border: 1px solid #4570ba;
	}
	
.field-email {
	position: absolute;
	top: 6px;
	right: 6px;
	right: 0;
	width: 263px;
	height: 24px;
	border: 1px solid #4570ba;
	}	
	
.field-message {
	position: absolute;
	top: 31px;
	left: 6px;
	left: 0;
	width: 528px;
	height: 171px;
	border: 1px solid #4570ba;
	}	
	
#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: #FFF;
	overflow: hidden;
	}	
	
#wrap-send-message .button {
	position: absolute;
	width: 79px;
	height: 31px;
	bottom: 9px;
	right: 226px;
	background: url('../images/blue/button-submit.png') top left no-repeat;
	background-position: 0 0;
	cursor: pointer;
	}	
	
#wrap-send-message .button:hover {
	background-position: 0px -31px;
	}		

.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/blue/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/blue/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 #4570ba;
	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 #4570ba;
	padding: 0;
	margin: 0;
	}	
	
#carusel .left {
	position: absolute;
	top: 70px;
	left: 16px;
	width: 15px;
	height: 26px;
	background: url('../images/blue/arrow-left.png') top left no-repeat;
	outline: none;
	}	
	
#carusel .left:hover {
	background: url('../images/blue/arrow-left-hover.png') top left no-repeat;
	}
	
#carusel .right {
	position: absolute;
	top: 70px;
	right: 14px;
	width: 15px;
	height: 26px;
	background: url('../images/blue/arrow-right.png') top left no-repeat;
	outline: none;
	}	
	
#carusel .right:hover {
	background: url('../images/blue/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/blue/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: #4774c0;
	}		
	
/* --- preloader --- */

.preloader {
	position: absolute;
	top: 53px;
	left: 239px;
	width: 52px;
	height: 52px;
	background: url('../images/blue/preloader-bg.png') top left no-repeat;
	}

.preloader span{
	display: block;
	width: 52px;
	height: 52px;
	background: url('../images/blue/preloader.gif') center center no-repeat;
	}	
	
.preloader-small {
	position: absolute;
	top: 2px;
	right: -40px;
	width: 24px;
	height: 24px;
	background: url('../images/blue/preloader-small-bg.png') top left no-repeat;
	}

.preloader-small span{
	display: block;
	width: 24px;
	height: 24px;
	background: url('../images/blue/preloader-small.gif') center center no-repeat;
	}