@import url(reset.css);



@font-face {font-family: 'MyriadProCondensed'; src: url('MyriadPro-Cond.eot'); src: local('Myriad Pro Condensed'), local('MyriadPro-Cond'), url('MyriadPro-Cond.woff') format('woff'), url('MyriadPro-Cond.otf') format('opentype'), url('MyriadPro-Cond.svg#MyriadPro-Cond') format('svg');}

html { background:url(../images/global_bg.png) top left repeat-x #031d3e;}

	body {background:url(../images/page_bg.jpg) top center repeat-x;}

		.main_content { width:960px; margin:0px auto;}

			.ui-tabs .ui-tabs-hide { display: none;}



/*HEADER*/



.header {height:89px; position:relative; }



	h1 { height:81px; width:179px; float:left;}

		h1 a { background: url(../images/logo.png) top left no-repeat; display:block; height:81px; text-indent:-9999px; width:179px; outline:none;}

		h1 a.logoeng {background-image: url(../images/logo-eng.png);}



	ul.top_nav { float:right; width:auto; margin-top:31px;}

		ul.top_nav li { display:inline; float:left; margin-left:12px;}

			ul.top_nav a { color:#fff; font-size:12px; text-shadow: 1px 1px 1px #333333; float:left; padding:0px 0px 0 12px; height:27px; line-height:27px; display:block; outline:none;}

			ul.top_nav li a span { padding:0 12px 0 0; display:block;}

			ul.top_nav li a.active { background: url(../images/menu_left.png) top left no-repeat; }

			ul.top_nav li a.active span { background: url(../images/menu_right.png) top right no-repeat; }

			ul.top_nav li a:hover { color:#dce2e6;}

			.last_nav {padding-right:0px !important;}

			.last_nav span {padding-right:0px !important;}



	ul#language { position:absolute; bottom:-9px; right:0px; z-index:2; background: url(../images/lang_right.png) top right no-repeat; font-size:12px; width:auto; height:17px;}

		ul#language li { float:left; padding:2px 10px 0 10px; height:15px;}

		ul#language li.first { padding:2px 0px 0px 10px; margin-left:-5px; background: url(../images/lang_left.png) top left no-repeat; }

			ul#language li a, ul#language li a:visited {color:#8fc4f1; font-size:10px; display:block;}

			ul#language li a:hover {color:#8fc4f1;}

			ul#language li a.active { color:#ffffff !important; text-shadow:0px 1px 1px #000;}		





#banner {height:470px; width:960px; overflow:visible; position:relative; z-index:1;}

	#banner h2 { background: url(../images/kreativna.png) no-repeat; display:block; text-indent:-9999px; position:absolute; top:43px; height:278px; width:547px;}

	#banner h2.creative {background-image:url(../images/creative.png);}

	#banner img {height:405px;  width:813px; position:absolute; top:155px; right:-121px; }

		#banner a, #banner a:visited { background:url(../images/work_button.png) no-repeat 0px -80px; width:240px; height:80px; display:block; text-indent:-9999px; outline:none; position:absolute; left:-22px; bottom:35px;}

			#banner a:hover { background-position:0px -162px;}

			#banner a:active { background-position:0px 0px;}

			#banner a.workbuttoneng {background-image:url(../images/work_button_eng.png);}



/*CONTENT-Home page*/



.content { overflow:hidden; padding:30px 0 60px 0; width:960px; margin:0px auto;}

	h3 { letter-spacing:-3px; color:#072341; font:80px 'MyriadProCondensed', Arial, sans-serif; line-height:49px; text-shadow:0px 1px 1px #145086;}

	.content ul {padding-top:60px; width:960px; overflow:hidden;}

	.content ul li { float:left; width:290px; display:inline; margin-right:45px;}

		.content ul li.last { margin-right:0px;}

		.content ul li h4 { color:#aadce4; font: 25px 'MyriadProCondensed', Arial, sans-serif; letter-spacing: 0; line-height:25px;}

		.content ul li p { font-family: Arial; font-size:12px; color:#64c7f3; line-height: 18px; padding-top:15px;}
			.content ul li a {color:#87d6f9;}
			.content ul li a:hover {text-decoration:underline;}
			.content ul li a.info {font-size:9px; margin-left:2px; color:#196b8f;}
		
			.content ul li ul {padding:0; width:auto; padding-top:20px;}
				.content ul li ul li {font-size:12px; color:#64c7f3; line-height: 18px; padding-left:8px; background:url(../images/bullet.gif) 0 8px no-repeat;}
					.content ul li ul li.noBullet {background:none;}
				
		.infoBox {padding:20px 20px 0 20px;}
			.infoBox p {font-size:12px; color:#64c7f3; line-height: 18px; padding-bottom:20px;}



/*CONTENT-Portfolio*/



#main_holder {width:100%; background:#031d3e; }

	#content_holder {width:100%; overflow:hidden; background:#0a315c;}

		.content_portfolio { width:960px; margin:0px auto; padding-top:50px;}

			#tabs {width:960px; margin:-77px 0 0 0;}

			.tabs {padding-top:40px;}

				.tabs ul {float:right; width:auto;}

					.tabs ul li { float:left;}

						.tabs ul li a {font-size:12px; padding:6px 0px 7px 9px; float:left; outline:none;}

						.tabs ul li a span { padding:6px 12px 7px 5px;}

					.tabs ul li.ui-state-active {  background: url(../images/tab_left.png) top left no-repeat;}

						 .tabs ul li.ui-state-active span {background: url(../images/tab_right.png) top right no-repeat;}

							.tabs ul li.ui-state-default a { color:#286ba8; font-size:12px; text-shadow:0px -1px 0px #000; outline:none; text-transform:uppercase;}

							.tabs ul li.ui-state-default a:hover {color:#1b89be;}							

							.tabs ul li.ui-tabs-selected a, .tabs ul li.ui-state-active a { color:#09405b !important; text-shadow:0px 1px 1px #39ace4; text-transform:uppercase;}

				.ui-tabs-panel { margin:0px auto; width:920px; padding:65px 0px 30px 0px; overflow:hidden;}

				#logo_tab ul, #user_tab ul, #web_tab ul {margin-right:0;}

					#logo_tab ul li, #user_tab ul li, #web_tab ul li { list-style: none; float:left; padding:0px; margin-right:18px; margin-bottom:18px;}

					#logo_tab ul li.first, #user_tab ul li.first, #web_tab ul li.first { margin-left:0px;}

					#logo_tab ul li.last, #user_tab ul li.last, #web_tab ul li.last { margin-right:0px;}

						.boxgrid{ width: 288px; height: 121px; margin:10px; float:left; background:#161613; overflow: hidden; position: relative;}

							.boxgrid img{ position: absolute; top: 0; left: 0; border: 0;}

						.boxcaption{ position: absolute; background: #000; height: 48px; bottom:0px; left:0px; width: 278px; padding:3px 0 3px 10px;}

						.captionfull .boxcaption { bottom:-55px; left: 0;}

						.caption .boxcaption { bottom:-55px; left: 0;}

						.boxcaption h5 { font-family:arial; font-size:12px; font-weight:bold; color:#fff;}

						.boxcaption p {font-family:arial; font-size:11px; font-weight:normal; color:#fff; line-height:16px; padding-top:1px;}

						.boxcaption p span {color:#589AAD; font-size:11px;}

						.boxcaption p a, .boxcaption p a:visited {color:#589AAD; padding:0px !important; margin:0px !important; text-decoration: none; font-size:11px !important; float:none !important;}

						.boxcaption p a:hover {color:#589AAD; text-decoration:underline;}		

						a.zoom {position:absolute; top:19px; right:10px; display:block; width:16px; height:16px; background:url(../images/zoom-button.png) 0 0 no-repeat; text-indent:-9999px; outline:none;}



/*FOOTER*/



.footer_holder { width:100%; background: #031d3e;}

	.footer { width:960px; margin:0px auto; height:88px; position:relative; overflow:hidden;}

		p.copyright {float:left; color:#225f7c; font-family:arial;font-size: 12px; padding-top:33px;}

		.connect { float:right; width:auto; padding-top:33px;}

			.connect p { color:#225f7c; font-family:arial; font-size: 12px; float:left;}

			.connect ul { float:left; display:inline; padding-left:2px;}

				.connect li { float:left; padding-left:7px;}

					.connect li a { float:left;}



/*CONTACT*/



.contact{ overflow:hidden; width:640px;}

	.contact h4 { color:#0b6a8d; font:30px 'MyriadProCondensed', Arial, sans-serif; margin:10px auto; width:615px; padding-left:18px; }

	.contact_content_left { float:left; width:300px; padding:0 0 10px 25px;}

	.contact_content_right { float:left; width:290px; padding:0px 0 10px 0;}

		.contact_content_left span { background: url(../images/inputfield.png) top left no-repeat; padding:9px 9px 8px 9px; display:block; overflow:hidden; height:20px;}

		.contact_content_left span.inputfocus { background-position:0 -37px; outline: none;}

		.contact_content_right span { background: url(../images/textarea_back.png) top left no-repeat; padding:9px 9px 8px 9px; display:block; overflow:hidden; height:162px;  }

		.contact_content_right span.areafocus {background-position:0 -179px; outline: none;}

			label { display:block; width:280px; color:#186b8a; font-size:14px; padding:15px 0px 3px 0px; font-weight:bold; font-family: arial; letter-spacing: -1px;}

			input { width:265px; height:20px; background: none; color:#b8b8b8; font-size:13px; outline: none;}

			textarea { display:block; width:270px; height:162px; background: none; color:#b8b8b8; font-size:13px; overflow:auto; outline: none; resize:none;}

			input.submit_button { background: url(../images/submit_button.png) no-repeat 0 0; float:right; height:29px; margin:10px 3px 10px 0; width:95px; cursor:pointer;}
				
				input.submit_button:hover {background-position:0 -29px;}
				input.submit_button:active {background-position:0 -58px;}
				
				input.enButton {background: url(../images/submit_button_en.png) no-repeat 0 0 !important;}
					input.enButton:active {background-position:0 -58px !important;}
					input.enButton:hover {background-position:0 -29px !important;}



		#info {font-size:11px; color:#186b8a; padding-top:17px;}

	.success { position:relative; margin-top:15px; left:0px; width:100%; height:100%; z-index:3; display:none; background:#031d3e;}

		.success p {color:#0b6a8d; font:30px 'MyriadProCondensed'; height:40px; width:400px; text-align:center; margin:100px auto; }