﻿/* -------------------------------------------- */
/* ----------------- Layout ------------------- */

/* -- HEADER -- */
#logo { width: 200px; margin-left: 10px !important; }
#logo img { float: left; padding: 0; }
#titlePanel { display: inline-block; vertical-align: top; position: relative; text-align: center; margin: 0 auto; }
#languagePanel { display: inline-block; padding: 12px 10px 4px 10px;border:0;}

.header { 
	background: #eee url(../images/headbg.png) repeat-x top left; margin: 10px; position: relative;	border: 1px solid #ccc; 
	-moz-box-shadow: 1px 1px 3px #eee; -webkit-box-shadow: 1px 1px 3px #eee; box-shadow: 1px 1px 3px #eee; 
}
.headerinner { padding: 10px; }
.headerinner2 { border-top: 1px solid #ccc; height: 57px; position: relative; }
.headercolumn { height: 33px; padding: 12px 10px; border-left: 1px solid #fff; border-right: 1px solid #ccc; float: left; position: relative; }
.headright { position: absolute; top: 0; right: 0; }
.headleft { position: absolute; top: 0; left: 0; }
.headright img, .headleft img { vertical-align: middle; }

.headlinkwrap { width: 38px; }
.headlink { position: absolute; top: 0; left: 0; padding: 19px 15px; }
.headlink:hover { background: #373737; }

.languageMenu { position: absolute; top: 0; right: 0; }

/* -- LEFT -- */
.mainleft { width: 250px; position: absolute; top: 0; left: 0; padding-bottom: 20px; }

.leftmenu { -moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee; }
.leftmenu ul { list-style: none; }
.leftmenu ul li { display: block; position: relative; }
.leftmenu ul li a { 
	border: 1px solid #ddd; border-top: 0; display: block;/*background:#fcfcfc url(../images/spriteNumbers.png);*/ color: #293352; padding-left: 35px;
	background-repeat: no-repeat; background-position: 8px center; font: 12px Arial,Helvetica,Sans-Serif; font-weight: 600;
}
.leftmenu ul li a:hover { color: #4472B9; text-decoration: none; background-color: #eee; }

/* -- LEFT MENU STYLES -- */
.leftmenu ul li:first-child a { border-top: 1px solid #ddd; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; }
.leftmenu ul li:last-child a { -moz-border-radius: 0 0 2px 2px; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; }
.leftmenu ul li a span { display: block; padding: 8px 10px; border-left: 1px solid #eee; background: #fff; line-height: 1.1; }
.leftmenu ul li a:hover span { border-left: 1px solid #ddd; background: #f7f7f7; }
.leftmenu ul li a em { font-style: normal; }

.leftmenu ul li.current a { background-color: #e7e7e7; border-color: #ddd; color: #4472B9; border-top: 0; }
.leftmenu ul li.notValid a { background-color: #e7e7e7; border-color: #ddd; color: #C52F29; border-top: 0; }
.leftmenu ul li:first-child a { border-top: 1px solid #ddd; }
.leftmenu ul li.current a, .leftmenu ul li.notValid a { -moz-box-shadow: inset 0 1px 0 #f7f7f7; -webkit-box-shadow: inset 0 1px 0 #f7f7f7; box-shadow: inset 0 1px 0 #f7f7f7; }
.leftmenu ul li.current a span, .leftmenu ul li.notValid a span { background-color: #f7f7f7; border-left: 1px solid #ddd; }
.leftmenu ul li.current a span, .leftmenu ul li.notValid a span { -moz-box-shadow: inset 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; }
.leftmenu ul li.current a.active, .leftmenu ul li.notValid a.active { background-color: #e7e7e7; border-color: #ddd; }
.leftmenu ul li.current a.active span, .leftmenu ul li.notValid a span { background: #f7f7f7; border-left: 1px solid #ddd; }

.leftmenu ul li.disabled a { background-color: #ffffff; border-color: #ddd; color: #bbbbbb; border-top: 0; }
.leftmenu ul li.disabled a span { background-color: #ffffff; border-left: 1px solid #ddd; }
.leftmenu ul li.disabled a span { -moz-box-shadow: inset 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; }
.leftmenu ul li.disabled a.active { background-color: #ffffff; border-color: #ddd; }
.leftmenu ul li.disabled a span { background: #ffffff; border-left: 1px solid #ddd; }

.leftmenu ul li a.uvod { background: url(../images/Istrazivanje.png) no-repeat 12px 6px; }
.leftmenu ul li span.rbr {font-weight:600;color:#bbb;float:left;display: inline;padding:8px 0;line-height:1;width:35px;text-align: center;} 
.leftmenu ul li a.jedan { background-position: 10px 6px; }
.leftmenu ul li a.dva { background-position: -28px 6px; }
.leftmenu ul li a.tri { background-position: -66px 6px; }
.leftmenu ul li a.cetiri { background-position: -104px 6px; }
.leftmenu ul li a.cetiri_jedan{background-position:-104px 6px}
.leftmenu ul li a.cetiri_dva{background-position:-104px 6px}
.leftmenu ul li a.pet { background-position: -142px 6px; }
.leftmenu ul li a.sest { background-position: -180px 6px; }

.leftmenu ul li .menutip { 
	position: absolute; z-index: 100; left: 38px; top: 0; background: url(../images/bluetrans.png); color: #fff; padding: 9px 10px; display: none;
	-moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; 
}

/* -- PRIKAZI SAMO IKONE U LEVOM MENIJU -- */
.lefticon .mainleft { width: 34px; }
.lefticon .leftmenu { overflow: none;}
.lefticon .leftmenu ul li { width: 250px; }
.lefticon .leftmenu ul li a { width: 2px; height: 32px !important; }
.lefticon .leftmenu ul li a span { display: none; }
.lefticon .maincontent { margin-left: 45px; }

#togglemenuleft { border-top: 1px solid #eee; margin-top: 20px; text-align: center; }
#togglemenuleft a { 
	display: inline-block; position: relative; top: -13px; width: 22px; height: 22px; 
	background: url(../images/toggle.png) no-repeat 0 0; cursor: pointer; 
}
#togglemenuleft a.toggle { background: url(../images/toggle.png) no-repeat 0 -25px; text-align: left; }

/* -- MAIN TAB MENU -- */
.maintabmenu { list-style: none; margin: 0; line-height: 21px; position: relative; z-index: 5; }
.maintabmenu li { display: inline-block; }
.maintabmenu li a { 
	padding: 8px 20px 4px 20px; color: #999; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 20px; 
	-moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; border: 1px solid #ddd;
	letter-spacing: 0.8px; display: block; background: #eee url(../images/titlebg.png) repeat-x top left; text-shadow: 1px 1px #f7f7f7;
}
.maintabmenu li a:hover { text-decoration: none; color: #666; background: #ddd; border-color: #ccc; text-shadow: 1px 1px #e7e7e7; }
.maintabmenu li.current a { display: block; background: #fff; border: 1px solid #ddd; border-bottom: 1px solid #fff; color: #293352; }
.maintabmenu li.current a:hover { text-shadow: none; }

/* -- CONTENT -- */
.mainwrapper { margin: 10px; position: relative; }

.maincontent { margin: 0 0 0 260px; }
.maincontentinner { }
.maincontentNoMenu { margin: 0 310px; }
.mainright { width: 250px; position: absolute; top: 0; right: 0; padding-bottom: 20px; }

.content { 
	padding: 20px; border: 1px solid #ddd; background: #fff; margin-top: -1px; position: relative; line-height: 21px; 
	-moz-border-radius: 0 2px 2px 2px; -webkit-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px;
	-moz-box-shadow: 1px 1px 2px #eee; -webkit-box-shadow: 1px 1px 2px #eee; box-shadow: 1px 1px 2px #eee;
}
.content .copyright { text-align: center; padding: 0; line-height: 1; }
.content .copyright a { text-decoration: underline; color: #ffffff; }


#cphBody_d2p1_italic {
	display: none;
}
/* -- RESPONSIVE -- */
@media screen and (max-width: 1024px) {
	.maincontent { margin-right: 0; margin-left: 230px; }
    .maincontentNoMenu { margin-right: 0; margin-left: 0; }
	.mainright { width: 250px; }
	.contenttitle, .widgetbox .title { height: 32px; overflow: hidden; }
	.contenttitle h2, .widgetbox .title h2 { font-size: 16px; }
	.mainleft { width: 220px; }
	.errorWrapper { width: auto; }
    /*.odgovor input [type="text"], .odgovor textarea { border: 1px solid #bbbbbb; width: 100%; }*/
	.one_half, .one_third, .two_third, .three_fourth, 
	.one_fourth, .one_fifth, .two_fifth, .three_fifth, 
	.four_fifth, .one_sixth, .five_sixth {
		float: none !important; width: 100% !important; *margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 20px !important; display: block !important; }
}
@media screen and (max-width: 800px) {
    .headerinner { border-bottom: 1px solid #ccc; }
	.headerinner2 { border-top: 1px solid #eee; }
	.headerinner2 .headercolumn { border-left: 0; border-right: 0; }
    .headerinner #logo .marginleft10 { margin: 0 auto !important; }
    #logo { width: 100% !important; }
    #logo img { float: none; margin: 0 auto !important; }
}

@media screen and (max-width: 700px) {
	.maincontent { margin-right: 0; }
	.mainright { position: relative; margin-top: 10px; width: auto; }
	.mainright .widgetbox { width: 48%; float: left; margin-right: 4%; }
	.mainright .widgetbox:nth-child(even) { margin-right: 0; }
	.floatright { display: none; }
}

@media screen and (max-width: 650px) {
	#languagePanel { border-left: 0; }
	#searchPanel { border-right: 0; }
	.stdform p, .stdform div.par { background: none; }
	.stdform label { display: block; text-align: left; float: none; width: auto; }
	.stdform span.field, .stdform div.field, .dualselect, 
	.stdform .formwrapper, .stdform .formwrapper { margin-left: 0; }
	.stdform small.desc { margin: 5px 0 0 0; }
	.stdform .stdformbutton { margin-left: 0; }
	
	.stdform2 p, .stdform2 div.par { background: none; }
	.stdform2 label { display: block; padding: 7px 10px; background: #f7f7f7; border-bottom: 1px solid #ddd; float: none; width: auto; }
	.stdform2 span.field, .stdform2 div.field { display: block; margin-left: 0; border-left: 0; }
}

@media screen and (max-width: 580px) {

	.one_half, .one_third, .two_third, .three_fourth, 
	.one_fourth, .one_fifth, .two_fifth, .three_fifth, 
	.four_fifth, .one_sixth, .five_sixth { float: none; width: 100%; clear: both; margin-right: 0; margin-bottom: 20px; display: block; }
    .textareaOdgovor, .form-control { width: 85%; display: block; *width:200px; }
}

@media screen and (max-width: 570px) {
	.tablewrapper { width: 100%; overflow: hidden; }	
	.mainright .widgetbox { float: none; margin-right: 0; width: auto; margin-bottom: 10px; }
	.maintabmenu li a { padding: 8px 10px; font-size: 16px; }	
    .listaDugmica li { margin-bottom: 10px; }
}

@media screen and (max-width: 480px) {
	.maincontent { margin-right: 0; }
	.mainright .widgetbox {  }
	.stdtable td, .stdtable th { font-size: 11px; }
	.widgetgrid .widgetbox { width: auto !important; display: block; margin-right: 0; }
}

@media screen and (max-width: 430px) {

    body { font-size: 12px; }
    button, input, select, textarea { font-size: 11px; }
    .tabmenu li a, .widgetlist li a { font-size: 11px; }
    .dataTables_wrapper input { width: 70px; }
    .deletebutton { display: none; }
    .tableoptions select { padding: 2px; }
    .tableoptions button { padding: 2px 5px; }
    .stdtablecb thead th:first-child, .stdtablecb tbody tr td:first-child { display: none; }
    .multipletabmenu li a { width: auto; padding: 5px; font-size: 11px; font-weight: bold; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0; }
    .stdform button, .stdform input[type="reset"] { padding: 5px; }
    .stdform2 span.field, .stdform2 div.field, .stdform2 .stdformbutton { padding: 10px; }
    .errorWrapper a { display: block; margin-top: 0; padding: 20px 0; font-size: 12px; }
    .errorWrapper span { display: block; margin-bottom: 20px; }
    .footer { font-size: 10px; }

    .matrixtable, .matrixtable1 { border: 0; display: block; width: 100%; }
    .matrixtable tbody, .matrixtable tr, .matrixtable th, .matrixtable td,
    .matrixtable1 tbody, .matrixtable1 tr, .matrixtable1 th, .matrixtable1 td { width: 90%; display: block; text-align: left; white-space: normal; }
    .matrixtable td, .matrixtable th, .matrixtable1 td, .matrixtable1 th { float: left; clear: both; }
    .matrixtable td, .matrixtable1 td {border:0}
    .matrixtable tr.broj, .matrixtable1 tr.broj { display: none; visibility: hidden; }
    .matrixtable td:nth-of-type(1):before { content: ""; }
    .matrixtable td:nth-of-type(2):before { content: "1 - "; }
    .matrixtable td:nth-of-type(3):before { content: "2 - "; }
    .matrixtable td:nth-of-type(4):before { content: "3 - "; }
    .matrixtable td:nth-of-type(5):before { content: "4 - "; }
    .matrixtable td:nth-of-type(6):before { content: "5 - "; }
    .matrixtable td:nth-of-type(7):before { content: "6 - "; }
    
    .matrixtable1 td:first-child:before { content: "1 - "; }
    .matrixtable1 td:first-child + td:before { content: "2 - "; }
    .matrixtable1 td:first-child + td + td:before { content: "3 - "; }
    .matrixtable1 td:first-child + td + td + td:before { content: "4 - "; }
    .matrixtable1 td:first-child + td + td + td + td:before { content: "5 - "; }
    .matrixtable1 td:first-child + td + td + td + td + td:before { content: "6 - "; }

	#cphBody_d2p1_italic {
		display: block;
	}

}