@charset "utf-8";
/*-------------------------------------------------------

	KROJAC CSS FRAMEWORK

---------------------------------------------------------

Developed by: 		Krojač web dizajn (www.krojac.com)
Date:				February, 2011
Version:			1.00
Copyright (C) 2003-2011 Krojač. All rights reserved.

---------------------------------------------------------
	CONTENT
---------------------------------------------------------

1.	RESET				
2.	GENERAL STYLES		
3.	MAIN CONTAINERS		
4.	HOLDERS				
5.	MENUS				
6.	PRODUCTS			
7.	PAGINATION			
8.	GALLERIES			
9.	FOOTER				
10.	FORMS
11. TABLES
12.	SPECIFIC STYLES		
13.	DEBUGGING TOOLS	

/*-------------------------------------------------------
	RESET
--------------------------------------------------------*/

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, 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, input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, header, hgroup, menu, nav, section {display: block}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

body {line-height: 1}
li {list-style: none}
blockquote, q {quotes: none}
a img {border:none}
:focus {outline:none}

/*-------------------------------------------------------
	GENERAL STYLES
--------------------------------------------------------*/
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/oswald-webfont.eot');
    src: url('../fonts/oswald-webfont.eot?iefix') format('eot'),
         url('../fonts/oswald-webfont.woff') format('woff'),
         url('../fonts/oswald-webfont.ttf') format('truetype'),
         url('../fonts/oswald-webfont.svg#webfont0EfxgKkg') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*------- child pixels/parent pixels=child ems -------*/
html, body {
	width:100%;
	height:100%;
	}
	body{
	font:12px/1.4 Helvetica, Arial, sans-serif;
	color:#FFF;
	background-color:#000;
	margin:0 0 1px;
	background-image: url(../images/bg-index.jpg);
	background-position: center -95px;
	background-repeat: no-repeat;
	}
	/*body#about{
	background-image: url(../images/bg-about.png);
	background-position: 750px -100px;
	}
	*/
p {
	font-size:12px;
}

/*------- Links -------*/
a {
	text-decoration: none;
	color: #F09;
	font-size: 12px;
	line-height: 1.1;
    }
    a:hover {
	text-decoration: none;
	color: #FFF;
}

a.link_orange {
	text-decoration: none;
	color: #F90;
	font-size: 16px;
	line-height: 1.1;
    }
    a.link_orange:hover {
	text-decoration: none;
	color: #666;
}

/*------- Nested elements -------*/
/*p a, p span, p font, li a, li span, li a span, li li, li p, a span, a font, span font  {font-size:inherit}
*/
/*------- Headings -------*/
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	font-weight: normal;
	}
	h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {font-size:inherit}
	h1 {
	font-size:44px;
	}
	h2 {
	font-size:30px;
	font-weight: normal;
	
	color: #F90;
	font-family: 'Oswald', Arial, serif;
	margin-bottom: 15px;
	}	
	h3 {
	font-size: 15px;
	color: #F90;
	padding-bottom: 10px;
	line-height: 1.3;
	}
	h3 span{
	font-size: 12px;
	color: #FFF;
	padding-bottom: 10px;
	}
	h4 {
	font-size:16px;
	color: #F90;
	padding-bottom: 5px;
	}
	h5 {
	font-size:12px;
	color:#F90;
	padding-bottom: 5px;
	}
	h6 {
		font-size:10px;
	}
	
	.list ul {
	padding-left: 20px;
	list-style-image: none;
	list-style-type: square;
}
	.list li {
	padding-left: 5px;
	list-style-image: none;
	list-style-type: square;
	margin-left: 30px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	line-height: 1.2;
			  }

/*-------------------------------------------------------
	MAIN CONTAINERS
--------------------------------------------------------*/

#container,
#container_left,
#container_middle,
#container_right {position:relative}

#container{
	margin:0 auto;
	width:980px;
	/* [disabled]overflow: hidden; */
}
		
#container_left {
	float:left;
	width:470px;
	top:80px;
}

/*header*/		
header, #main, #banner {
	position:relative;
	width:100%;
	float: left;
	}
	#banner {
	width: 700px;
	margin-bottom: 20px;
	}
	#banner  h2{
	width: 700px;
	font-size: 12px;
	line-height: 1.5;
	margin-top: 15px;
	color: #FFF;
	font-family: Helvetica, Arial, sans-serif;
	margin-bottom: 0px;
	padding-left: 5px;
	}
	#banner p{
	width: 700px;
	font-size: 0.9em;
	line-height: 1.2;
	margin-top: 15px;
	color: #999;
	}
	#banner h1{
	width: 700px;
	font-size: 72px;
	color: #FFF;
	font-weight: normal;
	line-height: .9;
	margin-top: 30px;
	}
	#banner h1 span{
	font-size: 95px;
	color: #F90;
	font-weight: normal;
	}

	
/*-------------------------------------------------------
	HOLDERS
--------------------------------------------------------*/

.holder,
.holder_content,
.holder_line,
.holder_separator,
.holder_separator_right,
.top_news {
	position:relative;
	float:left;
	width:100%;
	}
	.holder_line, .holder_separator, .holder_separator_right  { margin-bottom:1.5em}
	.holder_line {
	background-image: url(../images/line.png);
	background-repeat: repeat-x;
	background-position: left top;
	margin-top: 25px;
	padding-top: 30px;
	width: 940px;
	padding-right: 20px;
	padding-left: 20px;
	}
	.holder_line section {
	background-image: url(../images/line-up.png);
	background-repeat: repeat-y;
	background-position: left top;
	margin-left: 5px;
	padding-left: 15px;
	width: 200px;
	float: left;
	padding-top: 10px;
	}
	.holder_line section span p {
	font-size: 12px;

	color: #FFF;
	}
	.holder_line section p strong {
	font-size: 12px;
	line-height: 1.4;
	color: #FFF;
	}
	.holder_line section article {
	float: left;
	margin-bottom: 15px;
	}
	article.news {
	float: left;
	width: 190px;
	margin-right: 25px;
	height:220px;
	}
	article.news p {
	padding-top: 5px;
	padding-left: 10px;
	}
	article.awards {
	float: left;
	width: 286px;
	margin-right: 40px;
	height:310px;
	position: relative;
	}
	article.awards p {
	padding-top: 5px;
	padding-left: 10px;
	}
	article.clients {
	float: left;
	background-image:url(../images/line.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	margin-bottom:25px;
	font-size: 12px;
	}
	article.clients h5 {
	margin-top:10px;
	}
	h5 em{
	padding-top: 5px;
	font-size: 12px;
	color: #FFF;
	line-height: 1.2;
	}
	
	article.clients p {
	padding-bottom: 5px;
	font-size: 12px;
	}
	.holder_line section.top{
	width: 260px;
	/* [disabled]height: 200px; */
	margin-left: 0px;
	padding-left: 0px;
	background-image: none;
	padding-right: 20px;
}

.gallery{
	background-image: url(../images/line-up.png);
	background-repeat: repeat-y;
	background-position: left top;
	width: 620px;
	float: left;
	padding-left: 30px;
	padding-bottom: 10px;
	margin-left: 5px;
	}
	.gallery li {
	margin-bottom: 30px;
	float: left;
	width: 630px;
		}
		.gallery li ul li{
	padding: 0px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 70px;
	}
	.gallery li ul li.gallery_info{
	width: 300px;
	font-size: 11px;
	}
	
	

/*-------------------------------------------------------
	MENUS
--------------------------------------------------------*/

/* Main navigation */
#main_nav {
	position:relative;
	float:right;
	width:auto;
	top:65px;
	}
	#main_nav li {
	float:left;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
		}
		#main_nav a {
	text-decoration:none;
	color:#FFF;
	font-size:12px;
	font-family: 'Oswald', Arial, serif;
	font-size: 15px;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 0.02em;
		}
		#main_nav a:hover {color:#999}
		
body#home a#home_link, body#news a#news_link, body#about a#about_link, body#references a#references_link, body#contact a#contact_link,  body#konsalting a#konsalting_link, body#requirement a#requirement_link { 
	color:#F90
}

#sec_nav{
	float: left;
	width: 250px;
	margin-top: 15px;
	}
	#sec_nav ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
	float: none;
		}
		#sec_nav ul li{
	font-family: 'Oswald', serif;
	font-size:12px;
	text-transform: uppercase;
	float: none;
	margin-bottom: 10px;
	padding-bottom: 5px;
	background-image: url(../images/line.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	color: #EBEBEB;
			}
			#sec_nav ul li a{
	color:#F09;	font-size:14px;
				}
				#sec_nav ul li a:hover{
	color:#EBEBEB;
}
	

/* Subnavigation */

/* Footer navigation */

/*-------------------------------------------------------
	PRODUCTS
--------------------------------------------------------*/



/*-------------------------------------------------------
	PAGINATION
--------------------------------------------------------*/

#pagination_holder{
	position: relative;
	float: left;
	width: 100%;
	font-size:0.4em;
	color: #999;
	}
	
#pagination_holder_left, #pagination_holder_right{
	position: relative;
	float: left;
	width:40%;
	}
	#pagination_holder_right {float: right}

a.pagination_link{
	color: #666;
	font-size:0.4em;
	text-decoration: none;
	padding:0.2em 0.5em;
	line-height: 2em;
	}
	a.page-nav-link:hover{color: #CCC}

.pagination_link_active{
	color: #666;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	background-color: #EFEFEF;
	border: 1px solid #CCC;
	padding:0.2em 0.5em;
	}

/*-------------------------------------------------------
	GALLERIES
--------------------------------------------------------*/

.photo_hover, .photo_hover2{
	padding: 3px;
	float: left;
	margin-right: 10px;
	line-height: 0px;
	border: 1px solid #666;
	margin-bottom: 8px;
	}
	.photo_hover2 {margin-right: 0px;}
	.photo_hover3  {float: left;}
	.photo_hover3:hover {
	z-index:500;	
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;}

/*-------------------------------------------------------
	FORMS
--------------------------------------------------------*/

form{
	font-size: 1em;
	font-family:inherit;
	}
	form#formRegistracija .holder_separator, form#formWebDizajnZahtev .holder_separator {width:330px}
	form#formRegistracija .holder_separator_right, form#formWebDizajnZahtev .holder_separator_right {width:290px}

form	.holder_content{
	line-height: 22px;
	}
	
label{
	display: block;
	font-size: 12px;
	color: #FFF;
	line-height: 1.4;
	padding-bottom: 2px;
	padding-left:6px;
	cursor:pointer;
}

fieldset {
	position:relative;
	float:left;
	width:100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 25px;
	margin-left: 0;
	border:none;
	font-size: 12px;
	color: #FFF;
    }
    legend {
	font-family: 'Oswald', serif;
	font-size: 26px;
	font-weight:normal;
	color: #F90;
	text-transform: uppercase;
	margin:0 0 5px;
	}

input, select {vertical-align: middle}
	
.textbox, .textbox_error, .textarea, .textarea_error{
	font-size: 12px;
	font-family:inherit;
	width: 282px;
	height: 22px;
	line-height: 22px;
	border: 2px solid #fff;
	padding: 4px;
	color:#999;
	}
	.textbox, .textbox_error {width: 282px !important} /* jNice plugin! */
	.textarea, .textarea_error {
		width: 612px;
		height:auto;
	}
	.textbox_error, .textarea_error  {
		border: 2px solid #FF0099;
	}
	.textbox:focus, .textbox_error:focus, textarea:focus, .textarea_error:focus{
		border: 2px solid #F90;
		background-color:#FFF;
		color:#333;
	}
	
#submit_form{
	position:relative;
	float:right;
	width: 260px;
	height: 63px;
	background-image: url(../pic/bg-contact-button.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-bottom: 20px;
	background-color: transparent;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	text-indent:-9999px;
	cursor:pointer;
    }

.req {	
	color:#F90;
	}

#number {
	width:70px !important; /* jNice plugin! */
	text-align:center;
}

#nameError, #mailError, #messageError, #captchaError{
	color:#FF0099;
	position:absolute;
	top:1px;
	right:38px;
	font-weight:bold;
	}
	#captchaError {
		left:170px;
		top:35px;
	}
	#messageError{
	right:0px;
	top: 30px;
}
	#captchaNotif {
		position:relative;
		float:left;
		width:585px;
		left:0;
		color:#FFF;
		padding:20px;
		background:#FF0099 url(../pic/captcha-bg-notifications.gif) repeat 0 0;
		margin-bottom:20px;
		}
		#captchaNotif p {
			font-size:16px;
			line-height:1.3;
			font-weight:bold;
			}
			#captchaNotif p a { font-size:inherit; color:#FFF; text-decoration:underline; font-style:italic}
			#captchaNotif p span {
			display:block;
			width:42px;
			height:43px;
			float:left;
			margin-right:15px;
			background:url(../pic/captcha-form-error.png) no-repeat 0 0;	
			}
	
#grForm  {
	position:relative;
	float:left;
	width:245px;
	height:47px;
	top:16px;
	padding:4px 0 0 55px;
	line-height:47px;
	font-family: 'Oswald', serif;
	font-size:12px;
	text-transform:uppercase;
	color:#FF0099;
	background:url(../pic/bg-form-error.png) no-repeat 0 0;
	}
	
#contact_sent h2 {
	line-height:1.4;	
	}
	#contact_sent p span{
		color:#FFF;
		font-weight:bold;
		font-size:16px;
	}

/*-------------------------------------------------------
	TABLES
--------------------------------------------------------*/
	
table {
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1em;
    }
	
table caption {
	margin: 0;
	padding: 0 0 1.5em 0;
	font-weight: bold;
	}
	
th {
	font-weight: bold;
	text-align: left;
    }
	
td {font-size: 1em}	

/*-------------------------------------------------------
	FOOTER
--------------------------------------------------------*/

footer {
	width:900px;
	background-image: url(../images/bg-footer.png);
	background-repeat: repeat-y;
	background-position: left top;
	/* [disabled]height: 340px; */
	padding-top: 40px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-left: 40px;
	float: left;
	position: relative;
	bottom: 0px;
	margin-top: 10px;
	}
	footer section {
	padding-bottom: 40px;
	}
	footer section p {
	font-size:16px;
	color: #FFF;
	}
	footer section p a {
	font-size:24px;
	color: #FFF;
	}
	footer section p a:hover {
	text-decoration: underline;
	color: #FFF;
	}
	footer section .like {
	position: absolute;
	left: 230px;
	bottom: 39px;
	z-index: 99999;
	}
	
a#krojac_link {
	text-decoration:none;
	font-size:16px;
	}
	#krojac_link:hover {text-decoration:underline}

#footer_left, #footer_right  {
	float:left;
	width:750px;
	}
	#footer_right {
	text-align:right;
	position: absolute;
	right: 40px;
	bottom: 15px;
	color: #FFF;
		}

/*-------------------------------------------------------
	SPECIFIC STYLES
--------------------------------------------------------*/

#logo {
	position:relative;
	float:left;
	display:block;
	margin-top: 13px;
	}
	
.date  {
	display:block;
	color:#999;
	font-size:11px;
	padding-top: 3px;
	}
	
.comment {}	
.clearing {}
.hidden {display:none}
.details {}

.top_news h1 a, .news h1 a {
	font-size:44px;
	text-decoration:underline;
	color:#FFF;
	font-weight:normal;
	}
	.news h1 a  {font-size:20px}
	.top_news h1 a:hover, .news h1 a:hover {text-decoration:none}
	.top_news h2 {
		background-color:#000;
		color:#FFF;
		font-size:20px;
		float:left;
		font-weight:normal;
		}
		.news h2 {
			font-size:12px;
			color:#FFF;
			}

.top_news h1 a, .news h1 a, .news h2, .date {text-shadow:1px 1px 2px #000}

.facebook {
	position: absolute;
	top: 40px;
	z-index: 999;
	right: -34px;
			}	
.twitter {
	position: absolute;
	top: 150px;
	z-index: 999;
	right: -34px;
			}	

/*-------------------------------------------------------
	DEBUGGING TOOLS
--------------------------------------------------------*/

/*
* { outline: 2px dotted red}
* * { outline: 2px dotted green}
* * * { outline: 2px dotted orange}
* * * * { outline: 2px dotted blue}
* * * * * { outline: 1px solid red}
* * * * * * { outline: 1px solid green}
* * * * * * * { outline: 1px solid orange}
* * * * * * * * { outline: 1px solid blue}
*/