html, body { width: 1024px; min-width: 980px; min-height: 700px }

body {
	font-family: 'Arial', sans-serif;
	font-size: 11px;
	line-height: 14px;
	margin: 0;
	background-color:#C1C5D7;
}
#page_wrapper { position: absolute; top: 0; left: 0; width: 100%; display: block; background-color: #252525; }

#header_wrapper { background: url('webassets/header_bg.png') repeat left top #FFF; width: 100%; }
#header { width: 980px; height: 100px; position: relative; margin: 0 auto 0 auto; /* padding-right: 40px */ }
#header #logo { margin: 22px 0 0 20px; position: absolute; display: inline }
#bottom_row { display: block; height: 24px; top: 32px; float: right; position: relative; margin-top: 6px }
#bottom_row ul { display: inline }

/********************************** main nagivation styles **********************************/
#main_nav_wrapper { position: relative; width: 100%; height: 22px; zoom: 1  }
#main_nav { position: relative; width: 980px; height: 22px; margin: 0 auto; overflow: visible; top: -11px  }
#main_nav>ul { padding: 0; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; display: inline}
#main_nav ul>li { display: inline-block; margin: 0; }
	/******** main navigation 'major' links ********/	
#main_nav .major_link { display: inline; margin: 0 0 0 400px; text-align: center; height: 22px }
#main_nav>.major_link>.red_main_nav { font-family:Verdana, Geneva, sans-serif;font-size: 17px; line-height: 22px; font-weight: 400; position: relative; top: -5px; text-transform: uppercase; 		padding: 8px 0; zoom:1; min-width: 2px; height: 100%; display: inline-block; overflow: visible;}
#main_nav>.major_link>.red_main_nav_img {position: relative; top: 3px; padding: 8px 0; zoom:1; min-width: 2px; height: 100%; display: inline-block; overflow: visible;}

#main_nav .major_link li.red_main_nav>a { padding: 8px 24px 8px 24px; }
#main_nav>.major_link>.red_main_nav_img>a {padding: 8px 24px 8px 24px;}
#main_nav .major_link li.red_main_nav:hover>a { color: #CC0000; text-decoration: none; }
#main_nav .major_link li.red_main_nav_img:hover>a {}
#main_nav .major_link li>a { color: #FFF; text-decoration: none; }
.divided { border-left: 1px solid #e8666a }
/********************************** content area styles **********************************/

#content_wrapper { position: relative; width: 960px; display: block; margin: 18px auto 0 auto; }
/******** control containers for content area columns ********/
#cbd_content { background-color: #eee; min-height: 600px; height: 100%; width: 960px;  position: relative; display: block; float: left; overflow:hidden }
#left_col { float: left; background-color: #eee; z-index: 1  }
#right_col { float: left; width: 100%; right: 280px; background-color:#C1C5D7; z-index: 3 }

	
	/******** main content area ********/
	#content_main { position: relative; float: left; clear:left; background-color: #fff; padding: 12px 18px; width: 630px; margin: 0; min-height: 500px; padding-bottom:36px}
	#content_main h2, #content_main .faux_h2 { font-weight: normal; font-size: 16px; line-height: 21px; margin: 0 0 12px 0 ;  }
	#content_main h3 { margin: 16px 0 0 0; padding: 0; font-size: 16px; font-weight: normal}
	#content_main h4, #content_main h4 a { margin-bottom: 0; padding-bottom: 0; color: #CC0000; font-size: 14px; line-height: 18px; text-decoration: none; }
	#content_main h4 a:hover { text-decoration: underline; }
	#content_main p { margin-top: 0; padding-top: 0; font-size: 12px; line-height: 18px }
	#content_main p.first { margin-top: 48px }
	#content_main p a, #content_main td a { color: #CC0000 }
	#content_main .content_hr { border: none; background-color: #ccc; width: 100%; height: 1px; margin: 24px 0 24px 0 }
	#content_main .sub_section { margin-left: 44px }
	#content_main ul li a { color: #CC0000; text-decoration: none }
	#content_main>ul { color: #CCC; margin: 12px 0 24px 0; font-size: 12px; line-height: 18px }
	#content_main ul li , #content_main td { color: #000; font-size: 12px; line-height: 22px }
	#content_main ul li a:hover { text-decoration: underline }
	#content_main a.downloadLink { font-size: 12px; line-height: 18px; color: #CC0000; text-decoration: none; }
	#content_main a.downloadLink:hover {text-decoration: underline; }
	#content_main ul li ul { margin:0; padding:0 0 0 16px;}
	ol, ol li { font-size: 12px; line-height: 18px }
	ol li ul, ol li ul li { margin-top: 0; padding-top: 0 }
	#content_main ul.two-col li { display: inline }
	#content_main ul.two-col:first-child { border-right: solid 1px #CCC; }
	#content_main .three_col_list { list-style-type: none; padding: 0; margin-top: 48px }
	#content_main .three_col_list li { display: inline-block; padding-right: 5px; position: relative; width:155px; text-align:center; margin: 12px 12px 0 12px }
	#content_main .three_col_list li.alt { display: inline-block; padding: 0 36px 0 0; position: relative; width:124px; text-align:center; margin: 12px 12px 0 12px }
	#content_main ul.three_col_list .divider { border-right: solid 1px #ccc;  }
	#content_main .two_col_list { list-style-type: none; padding: 0; margin-top: 48px }
	#content_main .two_col_list li { display: inline-block; padding: 0 12px 12px 0; position: relative; width:230px; text-align:center; margin: 12px 12px 0 12px }
	#content_main ul.two_col_list .divider { border-right: solid 1px #ccc;  }
	#content_main ul.two_col_list img.pad_bottom { padding-bottom: 48px }
	#content_main .anchors a { color: #CC0000 }
	#content_main.img { margin: 0 0 12px 12px }

	#cbd_content #page_title {background: url('webassets/page_title_bg.png') 0 0 repeat-x scroll; height: 32px; width: 100%; margin: 0; padding: 14px; float: left;display: block; position: relative;}
	#cbd_content #page_title h1 {font-family: 'Arial',sans-serif; font-size: 28px; font-weight: normal; color: #FFF; padding: 0; margin: 12px 0;}


/********************************** home page rotator styles **********************************/

	#cbd_content #rotator { position: relative; margin: 0 auto; width: 960px; height: 600px; background: url('webassets/rotator-gradient.png') repeat-x left bottom;}
	#cbd_content #rotator #slide_1{ background: url('webassets/content/rotator_bg_o-nama.jpg') 0 0 scroll no-repeat; width: 100%; height: 100%}
	#cbd_content #rotator #slide_2{ background: url('webassets/content/rotator_bg_reference.jpg') 0 0 scroll no-repeat; width: 100%; height: 100%}
	#cbd_content #rotator #slide_3{ background: url('webassets/content/rotator_bg_kontakt.jpg') 0 0 scroll no-repeat; width: 100%; height: 100%}
	#cbd_content #rotator .headline {position: absolute; top: 20px; left: 42px;}
	#cbd_content #rotator .subhead { position: absolute; top: 156px; left: 44px; width: 360px }
	#cbd_content #rotator p { font-family:Verdana, Geneva, sans-serif; font-weight: 300; color: #333; font-size: 22px; line-height: 26px; margin: 0 0 28px 0; padding: 0;}
	#cbd_content #rotator .rotator_buttons { position: absolute; left: 38px; top: 340px; }
	.rotator_buttons .rotator_button {	float: left; display: block; padding: 14px; text-transform: uppercase; font-family:Verdana, Geneva, sans-serif; font-weight: 400; font-size: 11px; 	line-height: 12px; letter-spacing: .1em; color: #fff; background-color: #333; border: solid 8px; border-color: rgba(255,255,255,.7); margin: 0 6px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding;  background-clip: padding-box; }
	.rotator_buttons .rotator_button:hover { background-color: #CC0000; cursor: pointer; }
	.rotator_buttons .selected { float: left; display: block; background-color: #CC0000; -moz-box-shadow: inset 0 0 12px #000000; -webkit-box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000; }
	
	/* the next three styles add the triangle-shape to the top of the rotator navigation buttons. 
	a pain in the a** way of positioning, but one class to rule them all would not work */	
.PrviSlajd_link.selected::after {content: ' ';height: 0;position: absolute;	width: 0;border: 10px solid transparent;border-bottom-color: #4f0e0d;top: -20%;	left: 0%;margin-left: 14%; } 
.DrugiSlajd_link.selected::after {content: ' ';	height: 0;position: absolute;width: 0;	border: 10px solid transparent;	border-bottom-color: #4f0e0d;top: -20%;	left: 34%;margin-left: 13%;	} 
.TreciSlajd_link.selected::after {content: ' ';	height: 0;	position: absolute;width: 0;border: 10px solid transparent;	border-bottom-color: #4f0e0d;top: -20%;left: 67%;margin-left: 13%;} 

#cbd_content #rotator #rotator_modules { margin-top: 40px; position: absolute; top: 40px; width: 900px; padding: 0  }
#cbd_content #rotator_modules .rotator_module { border: solid 8px; border-color: rgba(255,255,255,.1); padding: 0; float: left; width: 275px; height: 140px; position: relative ; margin-right: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box;}
#cbd_content #rotator #rotator_modules #o-nama_module { background: url('webassets/content/module_bg_o-nama.jpg') 0 0 scroll no-repeat; }
#cbd_content #rotator #rotator_modules #reference_module { background: url('webassets/content/module_bg_reference.jpg') 0 0 scroll no-repeat; }
#cbd_content #rotator #rotator_modules #kontakt_module { background: url('webassets/content/module_bg_kontakt.jpg') 0 0 scroll no-repeat; }

/*#cbd_content #rotator #rotator_modules #news_module { background: url('webassets/content/module_bg_contractor.jpg') 0 0 scroll no-repeat; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; }	*/
#cbd_content #rotator #rotator_modules h3{ font-family:Verdana, Geneva, sans-serif; font-weight: 300; text-transform:none;color: #FFF; font-size: 14px; line-height: 22px; margin: 12px 12px 8px 12px; 	padding: 0; letter-spacing: .1em }
#cbd_content #rotator #rotator_modules p { font-family: 'Arial',sans-serif; font-size: 12px; font-weight: normal; line-height: 15px; color: #FFF; }
#cbd_content #rotator #rotator_modules #o-nama_module p { margin: 0 60px 12px 12px }
#cbd_content #rotator #rotator_modules #reference_module p, #cbd_content #rotator #rotator_modules #kontakt_module p { margin: 0 90px 12px 12px }

	/******** right column ********/	
	#right_col_nav { position: relative; width: 280px; height: 100%; display: block; float: left;  padding-bottom: 36px }
	#right_col_nav #links_widget { padding: 12px 12px }
	#right_col_nav #links_widget ul { list-style-type: none; margin: 0; padding: 0 }
	#right_col_nav #links_widget div.link, #right_col_nav #links_widget div.green { padding-top: 12px }
	
	#right_col_nav #links_widget li, 
	#right_col_nav .right_col_mod p, 
	#right_col_nav .right_col_mod label, 
	#right_col_nav #links_widget .link a, 
	#right_col_nav #links_widget .date, 
	#right_col_nav #links_widget .green  a	{ font-size:12px; color: #000; text-decoration: none; }
	
	#right_col_nav #links_widget .link img {margin-right:10px;}
	
	#right_col_nav #links_widget .link a:hover, #right_col_nav #links_widget .green  a:hover{ color: #CC0000; text-decoration: underline; }
	#right_col_nav #links_widget .green { /* float:right; margin-top: -24px; */ display: none; position: absolute; }
	#right_col_nav .right_col_mod { padding: 12px 12px 32px 12px; background: url('webassets/right_col_bg.png') no-repeat left top; }
	#right_col_nav select { width: 156px; }

/********************************** footer styles **********************************/
#footer { background-color: #252525; position: relative; width: 100%; display: block; clear: both }
	/******** first 3 columns of links ********/
#footer #footer_nav { background: url('webassets/footer_bg_alt.png') 0 0 repeat-x scroll; display: block; min-height: 30px; background-color: #222; width: 960px; margin: 0 auto; padding-top: 4px }
#footer #footer_nav div ul { color: #fff; font-family: 'Arial',sans-serif; list-style-type: none; -webkit-padding-start: 0; line-height: 20px; list-style-position:outside; padding: 0 }
#footer #footer_nav div ul li{ margin: 0 }
	
/******** bottom footer buttons (activate modules) ********/
	
#footer_buttons { clear: both }
#footer_buttons>ul { margin: 20px 0px 10px 0px;	padding: 0; }
#footer_buttons>ul>li { display: inline; text-align: center; border-right: 1px solid #585858; border-left: 1px solid #585858; background: url('webassets/footer_bttns_bg.png') 0 0 repeat-x scroll; font-size: 12px;line-height: 28px; text-transform: uppercase; background-color: #000;margin: 0px;padding: 0px;font-family:Verdana, Geneva, sans-serif;font-weight: 400;}
#footer_buttons .footer_bttn_txt { background: url('webassets/footer_bttns_upArrow.png') right -25px no-repeat; padding: 0 16px; color: #FFF; text-decoration: none }
#footer_buttons li:hover .footer_bttn_txt {color: #4767FE;background-position: right 3px}
#footer_buttons li:hover { background: url('webassets/footer_bttns_hover_bg.png') 0 0 repeat-x scroll }
#footer_buttons #col_1_bttn, #footer_buttons #col_2_bttn, #footer_buttons #col_3_bttn { position: relative; width: 315px; display: inline-block; overflow: visible;}

/******** the actual modules ********/

#postscript {clear: both; display: block; position: relative; background: url("webassets/postscript_bg.png") 0 0 repeat-x scroll; min-height: 40px; background-color:#0f0f0f; padding: 10px 0; }
#postscript ul { display: block; position: relative; margin: 10px auto; width: 100%; width: 320px }	
#postscript> .postscript_links li {display: inline-block;}
	
/********************************** site-wide styles for no particular container, like buttons **********************************/

img { border: none }
.bold { font-weight: bold}
.FontSemiBold { font-weight: 400; font-size:22px; }
.FontSmall { font-weight: 400; font-size:9px; }
.red { color: #CC0000 }
.margin_top_bottom { margin: 18px 0 }
.shift_right { float: right; margin-left: 6px }
.TableField { vertical-align: top; }
.TableLabel { width:120px;}
.activeField { color: #000 }
.allcaps { text-transform: uppercase }
.blue_title { font-family:Verdana, Geneva, sans-serif;font-weight: 300;font-size: 18px;line-height: 21px;margin: 0 0 7px 0;padding: 0;color: #0000FF;}
.clear { clear: both; display: block; position: relative }
.clear:after{   content: ".";    display: block;    height: 0;    font-size:0;	   clear: both;    visibility:hidden;   }
.shadowed_text {text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.borderedImage {border:1px solid #000000;}

.white {color:#FFF;}
.centrirano{  margin:auto; text-align:center;}
#porukaBoxOK {
	background-color:#03F;
	height:140px;
	margin:20px;
}
#porukaBoxOK p { padding: 50px 0px; }

#porukaBoxERR {
	background-color:#C00;
	height:140px;
	margin:20px;
}
#porukaBoxERR p { padding: 50px 0px; }


.default_button { 
	position: relative; 
	background: url('webassets/bttn_main_bg.png') 0 0 repeat-x !important; 
	border: 1px solid #CC0000; 
	display: inline; 
	padding: 2px 12px; 
	color: #FFF; 
	font-family:Verdana, Geneva, sans-serif;
	font-weight: 400; 
	font-size: 12px; 
/*	text-transform: uppercase; */
	line-height: 12px; 
	text-decoration: none;
	margin-top: 36px
}


.default_button:hover, .roundButton:hover { -moz-box-shadow: inset 0 0 12px #000000; -webkit-box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000; }
	
.roundButton {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	height: 15px;
	overflow: visible;
	padding: 1.5px 6px;
	min-width: 54px;
	background-color: #CC0000;
	position: relative;
	display: inline-block;
	margin-left: 12px;
	background: url('webassets/bttn_round_bg.png') 0 0 repeat-x;
	behavior: url('webassets/PIE.htc');
	background-image: url('webassets/bttn_round_bg.png');
}
	
.roundButton a { margin-left: 6px; font-family: 'Arial', sans-serif; font-weight: bold; font-size: 12px; line-height: 16px; text-decoration: none; color: #FFF; vertical-align: top }
	
.roundButton img { margin-left: 1px; top: .5px; position: relative; display:inline }

.button {
	display: block;
	outline: none;
	cursor: pointer;
	text-decoration: none;
	margin: 0;
	-webkit-border-radius: 0em; 
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: 6px 0px 6px rgba(0,0,0,.2);
	-moz-box-shadow: 6px 0px 6px rgba(0,0,0,.2);
	box-shadow: 6px 0px 6px rgba(0,0,0,.2);
}

.button:hover {	text-decoration: none; }

.button:active { position: relative; }

.buttonSubmit{background: url('webassets/bttn_main_bg.png') 0 0 repeat-x !important; color:#FFF; }
input, textarea{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000;}

.red_main_nav,.red_main_nav_img {
	color: #DC2322;
	background-color: #DC2322;
	border-right: 1px solid #7A0D0D;
	background: -webkit-gradient(linear, left top, left bottom, from(#DC2322), to(#9C1C13));
	background: -moz-linear-gradient(top,  #DC2322,  #9C1C13);
	background: -ms-linear-gradient(top, #DC2322 0%, #9C1C13 100%);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#DC2322', EndColorStr='#9C1C13'); 
	-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#DC2322', EndColorStr='#9C1C13'); 
}

.red_main_nav_inverse {  
	color: #2626ff;
	background-color: #2626ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#2626ff), to(#101091));
	background: -moz-linear-gradient(top,  #2626ff,  #101091);
	background: -ms-linear-gradient(top, #2626ff 0%, #101091 100%);
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#2626ff', EndColorStr='#101091'); 
	-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#2626ff', EndColorStr='#101091'); 
}

.red_main_nav:hover, .red_main_nav_img:hover {
	background: #FFFFFF; /* Old browsers */
	background: -moz-linear-gradient(top, #d4d4d4 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top, #d4d4d4 0%,#ffffff 100%);
	background: -o-linear-gradient(top, #d4d4d4 0%,#ffffff 100%);
	background: -ms-linear-gradient(top, #d4d4d4 0%,#ffffff 100%);
	background: linear-gradient(to bottom, #d4d4d4 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( StartColorStr='#d4d4d4', EndColorStr='#ffffff'); 
	-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#d4d4d4', EndColorStr='#ffffff'); 

}

:-moz-any-link:focus {
  outline: none;
}