body,
html {
	height: 100%;
}

body {
	margin: 0;
	font-size: 100%;
}


	/* GLOBAL */
	#home,
	#portfolio,
	#about {
		min-height: 600px;
		height: 100%;
		min-width: 950px;
		position: relative;
	}
	
	.top {
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: top left;
	}
	
		.top .logo {
			display: block;
			margin: 29px 0 0 35px;
		}
	
	.content {
		overflow: hidden;
		padding: 0 0 0 36px;
		position: absolute;
		top: 39%;
		left: 0;
		z-index: 20;
	}
	
		.content .h1,
		.content .h2 {
			display: block;
		}
		
		.content p.left,
		.content p.right,
		.content div.right {
			float: left;
			width: 205px;
			margin: 1em 21px 0 3px;
		}
	
	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-repeat: no-repeat;
		background-position: bottom left;
		z-index: 15;
	}
	
	/* HOME */
	#home {
		color: #464646;
		background-color: #aedfe5;
		background-image: url('home_bg.png');
		background-position: top left;
		background-repeat: repeat-x;
	}
	
		#home a {
			color: #464646;
			background-color: inherit;
		}
	
		#home .top {
			height: 300px;
			background-image: url('home_top_bg.png');
		}
		
		#home .content {
			margin-top: -110px;
		}
					
			#home .content .h2 {
				margin: 11px 0 0 2px;
			}
								
		#home .bottom {
			height: 380px;
			background-image: url('home_bottom_bg.png');
		}
		
			#home .bottom .blog_box {
				position: absolute;
				left: 552px;
				bottom: 201px;
				width: 222px;
				background-image: url('home_blog_box_bg.png');
				background-repeat: repeat-y;
				background-position: top left;
			}
			
				#home .bottom .blog_box .inner {
					width: 197px;
					padding: 106px 3px 6px 13px;
					position: relative;
				}
			
					#home .bottom .blog_box .inner a {
						font-weight: bold;
						color: #bf1e2e;
						background-color: inherit;
					}
					
					#home .bottom .blog_box .inner .logo {
						position: absolute;
						top: 9px;
						right: 0;
					}
			
			#home .bottom .second {
				position: absolute;
				left: 792px;
				top: 142px;
			}
					
			#home .bottom a.twitter {
				position: absolute;
				display: block;
				left: 783px;
				top: 93px;
				width: 75px;
				height: 96px;
			}
					
			#home .bottom em {
				color: #c2b59b;
				background-color: inherit;
			}
	
	/* ABOUT */
	#about {
		color: #ffffff;
		background-color: #3c2313;
		background-image: url('about_bg.png');
		background-position: top left;
		background-repeat: repeat-x;
	}
	
		#about a {
			color: #c07026;
			background-color: inherit;
		}
		
		#about em {
			color: #c49a6d;
			background-color: inherit;
		}
		
		#about .top {
			height: 375px;
			background-image: url('about_top_bg.png');
		}
		
		#about .content {
			margin-top: -90px;
		}
					
			#about .content .h1 {
				margin: 0 0 9px;
			}
			
			#about .content .right ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
				#about .content .right ul li {
					margin: 0 0 8px 0; 
					padding: 0 0 0 24px;
					background-image: url('about_contact_icons.png');
					background-repeat: no-repeat;
				}
				
				#about .content .right ul li.email {
					background-position: 2px 2px;
				}
			
				#about .content .right ul li.linkedin {
					background-position: 2px -22px;
				}
			
				#about .content .right ul li.twitter {
					background-position: 2px -46px;
				}
			
				#about .content .right ul li.blog {
					background-position: 2px -66px;
				}
				
			
			#about .bottom em {
				display: block;
				padding: 0 0 45px 37px;
			}
			
	/* PORTFOLIO */
	#portfolio {
		color: #bfd8e7;
		background-color: #71b3cf;
		background-image: url('portfolio_bg.png');
		background-position: bottom left;
		background-repeat: repeat-x;
	}
		
		#portfolio a {
			color: #60bce5;
			background-color: inherit;
			text-decoration: none;
		}
				
		#portfolio .top {
			height: 100%;
			background-image: url('portfolio_top_bg.png');
			background-position: bottom left;
		}
		
		#portfolio .bottom {
			height: 213px;
			background-image: url('portfolio_bottom_bg.png');
		}
		
		#portfolio .content {
			margin-top: -120px;
			overflow: visible;
			padding: 0;
			width: 100%;
		}
		
			#portfolio .content img.h1 {
				float: left;
				margin-left: 36px;
			}
			
			#portfolio .content .portfolio,
			#content-slider {
				margin: -32px 75px 0 219px;
				position: relative;
				overflow: hidden;
			}
			
				 #content-slider {
					top: -48px;
					height: 15px;
					background-image: url('slider_bg.png');
					background-repeat: repeat-x;
					background-position: 0 7px;
					overflow: visible;
				}
				
					#content-slider .ui-slider-handle {
						position: absolute;
						top: 0;
						left: 0;
						width: 67px;
						height: 15px;
						background-image: url('slider.png');
						background-position: center center;
						background-repeat: no-repeat;
					}
			
				/* JS resizes width acording to number of childs */
				#portfolio .content .portfolio ul {
					list-style: none;
					margin: 0;
					padding: 0;
					overflow: hidden;
					width: 1500px;
				}
				
					#portfolio .content .portfolio ul li {
						margin: 0;
						padding: 0;
						width: 180px;
						float: left;
					}
					
						#portfolio .content .portfolio ul li > img {
							display: block;
						}
						
						#portfolio .content .portfolio ul li p {
							padding: 0;
							margin:  32px 15px 0 15px;
							line-height: 18px;
						}

/* MISC */
body, input, textarea {
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

input, textarea {
	font-size: 14px;
}

a img {
	border: none;
}

#about .error {
	color: white;
	background-color: inherit;
}

.clear {
	width: auto;
	height: 0;
	overflow: hidden;
	line-height: 1px;
	float: none;
	clear: both;
}






/* ÊÎÍÒÀÊÒÍÀß ÔÎÐÌÀ */
#contact-overlay {background-color:#000; cursor:wait;}

/* Container */
a.contact {font-size: 30px;}

#contact-container {font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; width:450px;}
#contact-container .contact-content {background-color:#333; color:#ddd; height:40px;}
#contact-container h1 {color:#d76300; font-size:20px; line-height:20px; margin:0; padding:0 0 6px 12px; text-align:left;}
#contact-container .contact-loading {background:url(loading.gif) no-repeat; height:55px; margin:-14px 0 0 190px; padding:0; position:absolute; width:54px; z-index:8000;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-error {background:#000; border:2px solid #ccc; font-size:14px; font-weight:bold; line-height:18px; margin:0 auto; padding:2px; width:92%;}
#contact-container br {clear:both;}
#contact-container form {margin:0; padding:0;}
#contact-container label {clear:left; display:block; float:left; font-weight:bold; padding-right:4px; text-align:right; width:100px;}
#contact-container .contact-input {background:#eee; border:1px solid #fff; font-family:'Trebuchet MS', Verdana, Arial; float:left; padding:2px; margin:2px; width:300px;}
#contact-container textarea {height:114px;}
#contact-container .contact-cc {cursor:default; font-size:14px; vertical-align:top;}
#contact-container .contact-top {background-color:#333; height:13px; margin:0; padding:0; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; border-radius:8px 8px 0 0;}
#contact-container .contact-bottom {background-color:#333; font-size:12px; height:13px; line-height:12px; text-align:center; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-radius:0 0 8px 8px;}
#contact-container .contact-bottom a,
#contact-container .contact-bottom a:link,
#contact-container .contact-bottom a:active,
#contact-container .contact-bottom a:visited {color:#666; position:relative; top:-4px; text-decoration:none;}
#contact-container .contact-bottom a:hover {color:#888;}
#contact-container .contact-button {background:#d76300; border:0; color:#fff; cursor:pointer; font-size:16px; font-weight:bold; height:26px; margin:4px 0 0 4px; text-align:center; vertical-align:middle; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
#contact-container .contact-button:hover {background:#f49000;}
#contact-container a.modal-close,
#contact-container a.modal-close:link,
#contact-container a.modal-close:active,
#contact-container a.modal-close:visited {color:#999; font-size:18px; font-weight:bold; position:absolute; text-decoration:none; right:8px; top:0px;}
#contact-container a.modal-close:hover {color:#ccc;}