/* Created by Vladimir Mokry (c) 2010 */

/* COLORS */
html {background-color: #cec5bb;}
#head-logo h1 a{background-color: #746e67; /*tmave béžová*/ color: #fff;}
h2 strong {color: #fff089; /*žlutá*/ background-color: #bfac94; /*stredne béžová*/}
#header a, #teaser a, .column h3 {color: #068; /*modrá*/}
.column, .column h4, #community a, #or-contact dd a {color: #444; /*šedá*/}
/*#footer p, #footer li {color: #555;}*/
.disable, a.service .small, .project .small, #head-contact {color: #808080;}
a, .service strong {color: #807;}
a:hover, a:hover.service strong {color: #000;}
.column#biography a:hover, a:hover.service strong, #footer a:hover {background-color: #eae1d7;}

#footer p, #footer ul {color: #444;}


/* FONTS */
html {font-family: Arial, Helvetica, sans-serif;}
body {font-size: 10px;}
#you-want {font-family: Georgia, "Times New Roman", Times, serif;}
.small, #footer {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

/* switchers */
.cap {font-size: 12px; letter-spacing: 0.05em;}
.small .cap {font-size: 10px; letter-spacing: 0.05em;}
abbr {border-bottom: 1px dotted #808080; cursor:help;}
	.column a.ext {
	background-image: url('../img/ext.gif'); 
	background-position: center right;
	background-repeat: no-repeat;
	padding: 0 15px 0 0;}
	.column#biography a:hover.ext {background-image: url('../img/ext1.gif');}
	.column#biography a:active, a:active.service strong, #footer a:active  {position: relative; top: 1px; }

/* MAIN */
html {background-image: url('../img/bc.png');}
.column a {text-decoration: none;}

/* HEADER */
#header {
background: url('../img/header.png') repeat-x;
width: 100%; height: 150px;
z-index: 1000;
position: fixed;
}
#head-main {
background: url('../img/head-main.png') no-repeat;
width: 590px; height: 140px;
}
#head-loop {
background: url('../img/head-loop.png') no-repeat;
width: 53px; height: 53px;
position: absolute; left: 148px; top: 108px;
}
#head-logo h1 a {
width: 340px; height: 80px;
position: absolute; left: 60px; top: 20px;
padding: 10px 0 0 140px;
font-size: 36px;
letter-spacing: 2px;
}
	#head-logo h1 a span {
	background: url('../img/head-logo.png') no-repeat;
	width: 480px; height: 90px;
	position: absolute; left: 0; top: 0;
	}
		#head-logo h1 a span span {
		background: url('../img/head-logo.png') no-repeat;
		background-position: 0px -90px;
		width: 100%; height: 100%;
		position: absolute; left: 0; top: 0;
		}
		#head-logo h1 a:active span span {background-position: 0px -180px;}
#head-menu ul {
width: 150px; height: 90px;
position: absolute; left: 600px; top: 35px;
font-size: 20px;
letter-spacing: 2px;
}
	#head-menu ul li {
	height: 30px;
	}
		#head-menu ul li a {
		height: 30xp;
		position:relative;
		padding: 0 0 0 15px;
		}
			#head-menu ul li a span {
			background: url('../img/head-menu.png') no-repeat;
			width: 150px; height: 30px;
			position: absolute; left: 0; top: 0;
			}
				#head-menu ul li a span span {
				background: url('../img/head-menu.png') no-repeat;
				background-position: -150px 0px;
				width: 100%; height: 100%;
				position: absolute; left: 0; top: 0;
				}
				#head-menu ul li a:active span span {background-position: -300px 0px;}
			#head-menu ul li a.n2 span {background-position: 0px -30px;}
				#head-menu ul li a.n2 span span {background-position: -150px -30px;}
				#head-menu ul li a:active.n2 span span {background-position: -300px -30px;}
			#head-menu ul li a.n3 span {background-position: 0px -60px;}
				#head-menu ul li a.n3 span span {background-position: -150px -60px;}
				#head-menu ul li a:active.n3 span span {background-position: -300px -60px;}
#head-contact ul {
width: 200px; height: 90px;
position: absolute; left: 780px; top: 38px;
font-size: 17px; line-height: 30px;
}

/* TEASER */
#teaser {
background: url('../img/main-bc.png') no-repeat;
width: 100%; height: 750px;
background-position: 450px 220px;
}
#you-want {position: absolute; left: 60px; top: 240px;}
	#you-want p {font-size: 60px; line-height: 1.2em; position:relative; top: 30px; left: 20px;}
	#you-want span {
	background: url('../img/you-want.png') no-repeat;
	width: 430px; height: 280px;
	position: absolute; left: 0; top: 0;
	z-index: 100;
	}
		#you-want span span {
		background: url('../img/you-want.png') no-repeat;
		background-position: -430px -175px;
		width: 30px; height: 60px;
		position: absolute; left: 430px; top: 175px;
		}
#slider-out {position: absolute; left: 490px; top: 240px;}
#slider {
position: relative;
background: url('../img/loading.gif') no-repeat 50% 50%;
width: 490px; height: 290px;
}
	#slider img {
	position: absolute;
	left: 0px; top: 0px;
	display: none;
	}
	#slider a{
	display:block;
	}
#teaser-menu {
background: url('../img/teaser-menu.png') no-repeat;
background-position: 0 30px;
width: 470px; height: 150px;
position: absolute; left: 310px; top: 500px; z-index: 150;}
#show-works a {position: absolute; left: 50px;}
	#show-works a strong {font-size: 25px; display: block; position:relative; top: 30px; left: 30px;}
	#show-works a span {
	background: url('../img/show-works.png') no-repeat;
	width: 220px; height: 90px;
	position:absolute; left: 0; top: 0;
	}
		#show-works a span span {
		background: url('../img/show-works.png') no-repeat;
		background-position: -220px 0px;
		width: 100%; height: 100%;
		position:absolute; left: 0; top: 0;
		}
		#show-works a:active span span {background-position: -440px 0px;}
#show-works-loop {
background: url('../img/show-works-loop.png') no-repeat;
width: 40px; height: 80px;
position:absolute; left: 30px; top: 65px;
}
#hire-me a {position: absolute; left: 320px; top: 0;}
	#hire-me a strong {font-size: 40px; text-align: center; display: block; position:relative; top: 30px; left: 40px;}
	#hire-me a span {
	background: url('../img/hire-me.png') no-repeat;
	width: 150px; height: 150px;
	position:absolute; left: 0; top: 0;
	}
		#hire-me a span span {
		background: url('../img/hire-me.png') no-repeat;
		background-position: -150px 0px;
		width: 100%; height: 100%;
		position:absolute; left: 0; top: 0;
		}
		#hire-me a:active span span {background-position: -300px 0px;}

/* PORTFOLIO */
#portfolio h2 {
position: relative; width: 330px; height: 90px;}
	#portfolio h2 span {
	background: url('../img/portfolio.png') no-repeat;
	width: 100%; height: 100%;
	position:absolute; left: 0; top: 0;
	}		
.group {height: 186px; margin-right: 20px; margin-top: 40px; padding: 27px 37px; float: left; position: relative;}
.group211 {width: 906px; background: url('../img/box211.png') no-repeat;}
.group1 {width: 306px; background: url('../img/box1.png') no-repeat;}
.group21 {width: 706px; background: url('../img/box21.png') no-repeat;}
.group2 {width: 506px; background: url('../img/box2.png') no-repeat;}

.box {position: relative; float: left;}
	.box a, .box span.no {
	display: block; padding: 3px; position: relative;
	line-height: 0; margin-right: 14px;
	width: 180px;
	}
	.box.dva a, .box.dva span.no {width: 380px;}
	.box a:hover {background-color: #000;}
		.box a span {
		display: none;
		background: url('../img/zoom.png') no-repeat;
		width: 24px; height: 24px;
		position: absolute; right: 10px; bottom: 10px;
		}
		.group:hover .box a span {display:block;}
		.box a:hover span {background-position: -24px 0;}
		.box a:active span {background-position: -48px 0;}
		
	.box ul {position: absolute; top: 185px; left: 10px;}
		.box li {
		position: relative; float: left; margin-right: 10px;
		display: block; height: 39px;
		font-size: 12px; line-height: 39px; text-align: center;}
		.box.wbd li {width: 124px;}
		.box.ld li, .box.id li {width: 104px;}
		.box li.cod {width: 64px;}
		.box li.con {width: 84px;}
			.box.wbd li span {
			background: url('../img/box-wbd.png') no-repeat; 
			width: 100%; height: 100%;
			position:absolute; left: 0; top:0;}
			.box.wbd li.cod span {
			background: url('../img/box-cod.png') no-repeat;
			width: 100%; height: 100%;
			position:absolute; left: 0px; top:0;}
			.box.wbd li.con span {
			background: url('../img/box-con.png') no-repeat; 
			width: 100%; height: 100%;
			position:absolute; left: 0px; top:0;}
			.box.ld li span {
			background: url('../img/box-ld.png') no-repeat; 
			width: 100%; height: 100%;
			position:absolute; left: 0; top:0;}
			.box.id li span {
			background: url('../img/box-id.png') no-repeat; 
			width: 100%; height: 100%;
			position:absolute; left: 0; top:0;}
	.box a.hidden {
	display:block;
	width: 24px; height: 24px;
	text-indent: -99999px;
	padding: 0;
	position: absolute; bottom: 10px; right: 41px;
	}
	.box a.hidden:hover {background-color: inherit;}
		.box a.hidden b {
		background: url('../img/second.png') no-repeat; 
		width: 100%; height: 100%;
		position:absolute; left: 0; top:0;
		display: none;}
		.group:hover .box a.hidden b {display: block;}
		.box a.hidden:hover b {background-position: -24px 0;}
		.box a.hidden:active b {background-position: -48px 0;}
	.group .tag {
	clear: both;
	position: absolute; right: 0px;
	padding: 3px;
	width: 140px;
	text-align: center;
	}
		.group .tag h3 {margin-top: 65px; font-size: 17px; line-height: 16px; letter-spacing: 0.05em;}
		.group .tag p.date {margin-top: 17px; font-size: 15px; letter-spacing: 0.05em;}
		.group .tag p.year {margin-top: 2px; font-size: 20px; letter-spacing: 0.3em; position: relative;left: 1px;}
		/*.group .tag {
		-webkit-transform:rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		}*/
		.group .tag b {
		background: url('../img/loop1.png') no-repeat; 
		width: 70px; height: 60px; display: block;
		position: absolute; left: 121px; top: 158px;
		z-index: 100;}
		.group .tag b.dva {background: url('../img/loop2.png') no-repeat;}
		.group .tag .disable {visibility: hidden;}
		
.visit-it a {
position: absolute; right: 40px; top: 10px;
width: 25px; height: 50px;
padding: 5px 50px 0 5px;
}
.visit-it a span {
background: url('../img/visit-it.png') no-repeat;
width: 80px; height: 55px;
position: absolute; right: 0; top: 0;
}
	.visit-it a span span {
	background: url('../img/visit-it.png') no-repeat;
	background-position: -80px 0;
	width: 100%; height: 100%;
	position: absolute; right: 0; top: 0;
	}
	.visit-it a:active span span {background-position: -160px 0;}

.buy-it a {
position: absolute; right: 40px; top: 10px;
width: 25px; height: 50px;
padding: 5px 50px 0 5px;
}
.buy-it a span {
background: url('../img/buy-it.png') no-repeat;
width: 80px; height: 55px;
position: absolute; right: 0; top: 0;
}
	.buy-it a span span {
	background: url('../img/buy-it.png') no-repeat;
	background-position: -80px 0;
	width: 100%; height: 100%;
	position: absolute; right: 0; top: 0;
	}
	.buy-it a:active span span {background-position: -160px 0;}

/* PROFILE */
#profile h2 {
position: relative; width: 270px; height: 90px;}
	#profile h2 span {
	background: url('../img/profile.png') no-repeat;
	width: 100%; height: 100%;
	position:absolute; left: 0; top: 0;
	}	
	
#biography h4, #biography p, #biography dl {padding: 0 0 0 120px;}
#biography dt {position:relative; top: 0; left: -120px; margin-bottom: -20px; width: 120px;}
#biography .download  .small {letter-spacing: 0.1em;}

#achievements h4, #achievements p {padding: 0 0 0 100px;}

.achiev {height: 110px;}
	.achiev b {
	background: url('../img/achiev.gif') no-repeat;
	display: block; width: 120px; height: 120px;
	position: relative; left: -20px; top: -25px; margin-bottom: -120px;
	}
		.achiev:hover b {
		background: url('../img/achiev1.gif') no-repeat;
		/*background-position: 0 -120px;*/
		}
	.achiev span {
	background: url('../img/achiev-map.png') no-repeat;
	background-position: -80px 0;
	width: 80px; height: 80px;
	position: absolute; left: 20px; top: 20px;
	}
		.achiev span span {
		background: url('../img/achiev-map.png') no-repeat;
		background-position: -160px 0; 
		display: block; width: 100%; height: 100%;
		position: absolute; left: 0; top: 0;
		}
	.achiev.a2 span {background-position: -80px -80px;}
		.achiev.a2 span span {background-position: -160px -80px; }
	.achiev.a3 span {background-position: -80px -160px;}
		.achiev.a3 span span {background-position: -160px -160px; }
	.achiev.a4 span {background-position: -80px -240px;}
		.achiev.a4 span span {background-position: -160px -240px; }
	.achiev.a5 span {background-position: -80px -320px; }
		.achiev.a5 span span {background-position: -160px -320px; }
	
#testimonials {position: relative;}

/* CONTACT */
#contact h2 {
position: relative; width: 300px; height: 90px;}
	#contact h2 span {
	background: url('../img/contact.png') no-repeat;
	width: 100%; height: 100%;
	position:absolute; left: 0; top: 0;
	}

/*
#write-me .lab {}
	#write-me .lab label {line-height: 24px; width: 120px;
	text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;
	}
#write-me .inp {}
	#write-me .inp input {
	background: url('../img/form-input.png') no-repeat;
	width: 234px; height: 38px; padding: 0 5px; border: 0;
	}
*/

#or-contact dl {padding: 0 0 0 120px; line-height: 24px; position: relative;}
#or-contact dt {
position:relative; top: -1px; left: -120px; line-height: 24px;
margin-bottom: -24px; padding-left: 30px; 
width: 70px;
text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em;
}
	#or-contact dd strong {font-size: 15px; font-weight: bold;}
#or-contact dd {margin-bottom: 16px;}
	
#or-contact dt.e-mail {background: url('../img/e-mail.png') no-repeat;}
#or-contact dt.phone {background: url('../img/phone.png') no-repeat;}
#or-contact dt.wlm {background: url('../img/wlm.png') no-repeat;}
#or-contact dt.skype {background: url('../img/skype.png') no-repeat;}
#or-contact dt.home {background: url('../img/home.png') no-repeat; background-position: 0 -2px;}

.service {display: block; font-size: 13px; line-height: 20px;
padding-left: 80px; position: relative; margin-bottom: 20px;}
	.service strong {
	font-size: 15px; padding-right: 20px; 	
	background-image: url('../img/extbig.gif'); 
	background-position: center right;
	background-repeat: no-repeat;
	}
	.service:hover strong {	background-image: url('../img/extbig1.gif'); }
	.service b {
	background: url('../img/services-map.png') no-repeat;
	display: block; width: 62px; height: 60px;
	position: absolute; left: 0; top:0 ;
	}
		.service b b {
		background: url('../img/services-map.png') no-repeat;
		background-position: -62px 0; 
		display: block; width: 62px; height: 60px;
		position: absolute; left: 0; top:0 ;
		}
		a:active.service b b{background-position: -124px 0;}
	.service.a2 b {background-position: 0 -60px;}
		.service.a2 b b{background-position: -62px -60px;}
		a:active.service.a2 b b{background-position: -124px -60px;}
	.service.a3 b {background-position: 0 -120px;}
		.service.a3 b b{background-position: -62px -120px;}
		a:active.service.a3 b b{background-position: -124px -120px;}
	.service.a4 b {background-position: 0 -180px;}
		.service.a4 b b{background-position: -62px -180px;}
		a:active.service.a4 b b{background-position: -124px -180px;}
		
.project {padding-left: 40px;}
	.project a {font-size: 15px; font-weight: bold; position: relative; left: -40px; 
	display: block; height: 30px;}
	.project b {
	background: url('../img/project-map.gif') no-repeat;
	display: block; width: 200px; height: 30px;
	position: absolute; left: 0; top:0 ;
	}
		.project b b {
		background: url('../img/project-map.gif') no-repeat;
		background-position: 0 -30px;
		display: block; width: 100%; height: 100%;
		position: absolute; left: 0; top:0 ;
		}
		.project a:active b b {background-position: 0 -60px;}
	.project.yourway b {background-position: 0 -90px;}
		.project.yourway b b{background-position: 0 -120px;}
		.project.yourway a:active b b {background-position: 0 -150px;}

/* FOOTER */
#footer-line {
width: 100%; height: 7px; 
clear: both;
background: url('../img/footer-line.gif'); background-position: 3px 0;
position: relative; top: 4px;}
#footer p, #footer ul, #footer dl {line-height: 18px; margin-bottom: 9px;}
#footer p, #footer ul, #footer dl {opacity: 0.75;}

#footer li {
background: url('../img/li.png') no-repeat; 
position: relative; left: -13px; padding-left: 13px;
background-position: 0 7px;
}

#footer em {font-style: normal;}
#footer strong {font-weight: normal;}

#footer dl {padding: 0 0 0 120px; font-size: 11px;}
	#footer dl .cap {font-size: 10px;}
#footer dt {
background: url('../img/li.png') no-repeat; 
position: relative; left: -133px; padding-left: 13px;
background-position: 0 7px; margin-bottom: -18px;
width: 120px;
}
#footer dd {}

#footer .dva dl {padding: 0 0 0 80px;}
#footer .dva dt {left: -93px; width: 80px;}


/* COMMON */
h2 {text-align: center;}
h2 strong {
position: relative; line-height: 90px;
font-size: 55px; letter-spacing: 0.05em; background-color: #bfac94;
}
.section {clear: both; padding-top: 205px; padding-left: 50px;}
#contact.section {min-height: 650px;}
#footer.section {padding-top: 0; min-height: 400px; background: url('../img/bc-footer.png');}

#profile p, #contact p, #profile dl, #contact dl {font-size: 13px; line-height: 20px;}
#profile p, #contact p, #profile dd, #contact dd {margin-bottom: 20px;}

.column {margin-top: 40px; padding: 0 0 0 40px; width: 360px; height: 650px; float: left;}
#contact .column {height: 450px;}
#footer .column  {height: 150px;}
	.column h3 {height: 60px; font-size: 35px; font-weight: normal; margin-bottom: 10px; }
	.column h4 {font-size: 20px; font-weight: bold; margin-bottom: 10px;}