/*  RESET  */

* {margin: 0; padding: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0; margin: 0; outline: 0; vertical-align: baseline; background: transparent; list-style: none; }
a img, img { border: 0px solid #fff; }
html { font-size:100.01%; }
.clear { display: block; clear: both; height: 0px !important; line-height: 0px; }
.hidden { display: none; }

/*	LAYOUT	*/
#top { height: 150px; left: 0; position: absolute; width: 100%; z-index: 1; }
	#animate { height: 150px; right: 50%; margin-right: -470px; position: absolute; width: 720px; z-index:2; }
	#logo { left: 50%; margin-left: -460px; position: absolute; top: 86px; z-index: 3;}
	
	#languages, #goto-home { display: block; height: 19px; left: 50%; margin-left: -340px; padding: 1px; position: absolute; top: 86px; z-index: 4;}
		#languages .sk, #languages .en { display: inline-block; height: 19px; width: 29px; }
			* html #languages .sk,* html #languages .en { display: inline; float: left; }
				* html #languages .sk { margin-right: 2px; }
			*+html #languages .sk,*+html #languages .en { display: block; float: left; }
				*+html #languages .sk { margin-right: 2px; }
		#goto-home { padding: 1px 10px 1px 4px; visibility: hidden; z-index: 3; }
				
	#navigation { margin-right: -470px; right: 50%; position: absolute; top: 108px; z-index: 3; }
	#navigation li { display: block; float:left; }
		#navigation li a { display: block; padding: 10px 10px 18px; }
		
#wrapper { margin: 0 auto; position: relative; top: 200px; width: 940px;}
	#featured { display: block; float:left; height: 366px; margin: 0px 40px 0 0; padding: 22px; width: 416px; }
	#featured img { margin-bottom: 28px; }
	
	#footer { margin-top: 40px; padding: 20px 0 40px; }
	
/* BASIC "TYPOGRAPHY" */
body { font: 12px/18px Helvetica, "Helvetica Neue", Arial, sans-serif; }
	
	p { margin-bottom: 18px; }
	
	a { color: #231f20; text-decoration: underline; }
	a:hover, a:focus { color: #333; text-decoration: underline;}
	.hasJS a:hover, .hasJS a:focus { color: #231f20; }
	
	.hr { clear:both; display: block; height: 6px; line-height: 5px; margin: 7px 0; background-color: #ddd;}
	
	h1 { font-size: 32px; font-weight: normal; line-height: 60px; margin-bottom: 40px; }
	h2 { font-size: 24px; font-weight: normal; line-height: 40px; margin-bottom: 20px; }
	h3 { font-size: 16px; font-weight: bold; line-height: 40px; margin-bottom: 20px; }
	#featured { font-size: 11px; text-decoration: none; }
	#index-buttons { text-align: right; }
		#index-buttons .button { margin: 5px; }
	
	#footer { color: #666; font-size: 10px; }

/* COLORS */	
body { background: #eee url(../img/bg.jpg); color: #231f20; }
	#top { background: #231f20; border-bottom: 5px solid #999; color: white; }
		#animate { background: url(../img/top_bg.png) no-repeat; }
		#languages, #goto-home { background-color: #f4f6f5; border: 1px solid #d9d9d9; line-height: 19px; }
			#languages .sk, #languages .en { background: url(../img/flags.png) 0px 0px no-repeat; border: none !important; text-indent: -9999px;  }
			#languages .sk { background-position: 0px -38px;}
			#languages .sk:hover { background-position: 0px 0px; }
			#languages .en { background-position: 0px -95px;}
			#languages .en:hover { background-position: 0px -57px; }
			#languages span.sk { background-position: 0px -19px !important; }
			#languages span.en { background-position: 0px -76px !important; }
		#goto-home { color: #231f20; font-style: italic;}
		
		#navigation { font-weight: bold; font-size: 13px; }
		#navigation li { background: url(../img/sipka.png) no-repeat right 14px; padding:0 20px 0 10px; }
			#navigation li.last {padding-right: 0px; background: none; }
		#navigation a { color: white; text-decoration: none; }
		#navigation a:hover, #navigation a:focus { color: #eee; border-bottom: 2px solid #231f20; }
	
	#featured, #project-detail .preview { background: url(../img/display.jpg) no-repeat; }
	#footer { border-top: 6px solid #ddd; }
		#footer p { float: left; margin-left: 20px; width: 220px; }
		#footer p.first { margin-left: 0; width: 440px;}
	
	.button { background: #231f20; border: 1px solid #433f40; color: white; cursor: pointer; display: inline-block; font-size: 16px; padding: 8px 20px 10px; text-decoration: none; }
	.hasJS .button { font-weight: bold; }
		a.button:hover { color: white; text-decoration: none; }

/* SUBPAGE STYLES */

	/* COLUMNS */
		.multicolumn li {list-style: circle outside; }
		
		.multicolumn { clear: both; }
		.multicolumn .col { float: left; margin-right: 20px; }
		.multicolumn div.last { margin-right: 0px !important; }
		
		.col2 .col { width: 460px; }
		.col3 .col { width: 300px; }
		.col4 .col { width: 220px; }

	/* PROJECTS (WORK) */

	ul#project-list { border-top: 1px solid #e0e0e0; display: block; float: left; margin: 60px 20px 0 0; width: 220px; }
	ul#project-list li { border-bottom: 1px solid #e0e0e0; display: block; font-weight: bold; }
		ul#project-list li a { display: block; padding: 9px 10px 10px; text-decoration: none; text-transform: uppercase; }
		ul#project-list li a:hover { text-decoration: underline; text-shadow: 1px 1px 1px #b9b5b6;}
	ul#project-list li.active {background-color: #231f20;}
		ul#project-list li.active a { color: white; }
		ul#project-list li.active a:hover { text-shadow: 1px 1px 1px #231f20; }

	#project-detail, #project-list-thumbnails { float: left; width: 700px; }
		#project-detail h1, #project-list-thumbnails h1 { border-bottom: 1px solid #ddd; margin-bottom: 39px; }
		
	#project-detail .preview { float:left; height: 366px; margin: -20px 0 0; padding: 22px; width: 416px; }
	#project-detail .details { border-top: 1px solid #bbc; float: right; margin-top: -10px; padding-left: 20px; width: 220px; }

	#project-detail .details h5 { border-bottom: 1px solid #ddd; border-top: 1px solid #bbc; color: #445; font-size: 11px; margin-bottom: 4px; padding-top: 10px; text-transform: uppercase; }
	#project-detail .details h5.first { border-top: none; }
	#project-detail .details p { margin-bottom: 15px; }

	.more-details { clear: left; margin: 20px 0 20px; }
		.more-details img { float: left; }
		.more-details p { border-top: 1px solid #ddd; display: block; float: left; padding: 19px 20px 20px; }

	ul#project-thumbnails li { display: block; float:left; margin: 0 20px 20px 0; width: 220px; }
		ul#project-thumbnails li.third { margin-right: 0; }
	ul#project-thumbnails li a { text-decoration: none !important; }
	ul#project-thumbnails img {display: block;}
		ul#project-thumbnails a:hover img { border: 5px solid #231f20; margin: -5px 0 -5px -5px; }
	ul#project-thumbnails .title { background-color: #231f20; color: white; display: block; height: 20px; padding: 10px;}
	ul#project-thumbnails .date { background-color: #433f40; color: #ccc; display: block; font-size: 10px; height: 10px; line-height: 10px; padding: 5px; text-align: right; }
	
	/* PROCESS */
		#process-diagram { float: left; margin-right: 40px; }
		#process { float: left; width: 520px;}
		#process h3 { background: url(../img/numbers.png) 0px 0px no-repeat; padding-left:40px; }
			#process h3#analysis	{ background-position: 0px    1px; }
			#process h3#design		{ background-position: 0px  -39px; }
			#process h3#xhtml-css	{ background-position: 0px  -79px; }
			#process h3#execution	{ background-position: 0px -119px; }
		
		.varovanie { border: 5px solid #231f20; font-size: 14px; margin: 20px; padding: 20px; text-align: center;}
	
	/* SERVICES */
	
	/* CONTACT */
	#contact { float: left; width: 620px; }
	#contact-information {float: left; padding-left: 20px; width: 300px; }
	
		#contact form p { font: italic 16px/40px Palatino, Georgia, serif; margin-bottom: 20px; text-shadow: 0px 0px 1px #aaa; }
		#contact form .tfield, #contact form .tafield { background-color: #f6f6f6; border: 1px dotted #ddd; border-bottom: 1px solid #999; font: italic 14px/20px Palatino, Georgia, serif; padding: 9px; outline: none !important; }
		#contact form .tafield { width: 580px; height: 200px; }
		#contact form .hbo { display: none; }
			#contact form .tfield:focus,#contact form .tafield:focus { border-bottom: 1px solid #666; background-color: #eef; }
			#contact form .tfocused, #contact form .tafocused { border-bottom: 1px solid #666; }
			#contact form .default_value { color: #999; }
			#contact form p#thank-you {margin-bottom: 0px; }
		#contact .error { background-color: #fee; border: 1px solid #c00; margin-bottom: 20px; padding: 9px 10px; }
			#contact .error p { list-style: inside circle; margin-bottom: 0; }
		#contact .ok { background-color: #efe; border: 1px solid #0c0; margin-bottom: 20px; padding: 9px 10px; }