* {
	box-sizing: border-box;
}

html {
	font-size: 65%;
}
@media (min-height:1024px) {
	html {
		font-size: 120%;
	}
}

body,html {
	margin:0;
	padding:0;
	font-family: Arial;
	width:100%;
	height:100%;
}
span {
	display:inline-block;
	vertical-align:top;
}
.counter {
	font-weight:bold;
	background: #FFF;
	color: #666;
	padding-left:3px;
	padding-right:3px;
}
.login-page {
	background: url('images/pozadina.jpg');
	background-size: 100% 100%;
	background-repeat: repeat-x;
	background-attachment: fixed;
	perspective: 1000px;
}
.login-page .dialog {
	display:block;
	background: #FFF;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	width: 60rem;
	margin-left:auto;
	margin-right:auto;
	position: relative;
	top: 40%;
	left: 0%;
	border: 1px solid #CCC;
	padding:0;

	transition: top 0.5s, left 0.7s, transform 0.7s, opacity 0.7s;
	transform-origin: 50% 50%;
	transform: rotateX(-90deg);
	opacity:0;
	/*
	max-height: 0px;
	opacity:0;
	overflow:hidden;
	transition: top 0.5s, opacity 0.7s, max-height 0.7s;
	*/
}
.title-bar {
	display:block;
	background: #5FA2ED;
	width: 100%;
}
.title-bar h1 {
	display:block;
	margin:0;
	padding:0;
	margin-top: 10px;
	font-family: Arial;
	font-size: 2.5rem;
	font-weight: 600;
	width:100%;
}
.title-bar h2 {
	display:block;
	margin:0;
	padding:0;
	margin-top: 5px;
	font-family: Arial;
	font-size: 2rem;
	font-weight: 300;
}
.login-page icon {
	display: inline-block;
	width: 8rem;
	height: 8rem;
	background-size: 100% 100%;
	vertical-align: top;
	margin:5px;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}
.login-page .error {
	display: block;
	margin-top: 20px;
	font-family: Verdana;
	font-weight: 100;
	font-size: 2.5rem;
	color: red;
}
.login-page .content {
	display: block;
	border-top: 3px solid #CCC;
	width:100%;
	text-align:center;
	padding-bottom: 20px;
}
.login-page input[type="text"],
.login-page input[type="password"] {
	border: none;
	font-family: verdana;
	font-size: 2.5rem;
	border: 1px solid #5FA2ED;
	margin-top: 20px;
	color: #000;
}
.login-page input[type="submit"] {
	height: 5rem;
	margin-top: 20px;
	font-size: 2rem;
}
.login-page input[type="button"] {
	height: 5rem;
	margin-top: 20px;
	font-size: 2rem;
	border-radius: 0.5rem;
	border: 1px solid #999;
	background: #DDD;
}
.menu-page {
	background: url('images/pozadina.jpg');
	background-size: 100% 100%;
	background-repeat: repeat-x;
	background-attachment: fixed;
}
.menu-page .left-menu {
	width:100%;
	background: rgba(255,255,255,0.3);
	padding-left: 0;
	transition: max-width 0.5s, padding-left 0.7s, background-color 1s;
	overflow: hidden;
	display:block;
	padding-bottom:7rem;
}
.menu-page icon {
	display:inline-block;
	background-size: 6.5rem 6.5rem;
	background-repeat: no-repeat;
	background-position: 1.75rem 2.5rem;
	width: 10rem;
	height: 9.5rem;
	text-align: center;
	font-size: 1.2rem;
	color: #000;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
	transition: background-position 0.7s,background-size 0.7s,max-width 0.4s;
	cursor: pointer;
	margin: 1.75rem;
	overflow: hidden;
	max-width: 10rem;
	padding:0;
}
.menu-page icon:hover {
	background-size: 8rem 8rem;
	background-position: 0.75rem 0.75rem;
	transition: background-position 0s,background-size 0s;
}
.left-menu hr {
	display:block;
	width:100%;
	border: none;
	border-top: 1px solid #000;
}
.copyright {
	display:block;
	text-align:right;
	width:100%;
	cursor:pointer;
}
.copyright .title {
	font-size:1.8rem;
	font-weight:bold;
	font-style: italic;
	text-decoration: underline;
}
.copyright .underline {
	font-size:1.4rem;
	font-weight:100;
	font-style: normal;
}
/* ****************************************** papir, okvir, sastavnica ************************************ */
.main-paper {
	display:block;
	width:100%;
	height:auto;
	border: none;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	/*background: #FFF;*/
	vertical-align: top;
	max-height: 0;
	transition: max-height 0.7s;
	overflow:hidden;
	margin-top:-7rem;
}
.main-paper .content {
	display:block;
	width: 100%;
	font-size: 2rem;
	padding: 0 0.8rem 0.8rem 0.8rem;
	clear:both;
	white-space: normal;
	height:auto;
	/*
	overflow: hidden;
	overflow-y: auto;
	height: 91%;
	*/
}
.main-paper .content .logo {
    display: block;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 20px;
    background: url('images/logo.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 50%;
    height: 10rem;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}
.main-paper .content h1 {
	font-size: 2.5rem;
	font-weight: 100;
	font-style: italic;
}

.main-paper .content label {
	font-size: 1.8rem;
}

.main-paper .content input[type="text"],
.main-paper .content input[type="search"],
.main-paper .content input[type="checkbox"] {
	border: none;
	font-family: verdana;
	font-size: 2.5rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: 20px;
	vertical-align: top;
}
.main-paper .content input[type="checkbox"] {
	width:2.5rem;
	height:2.5rem;
}
.main-paper .content input[type="button"] {
	height: 5rem;
	/*margin-bottom: 0.8rem;
	margin-right: 0.8rem;*/
	font-size: 2rem;
	vertical-align: top;
	border-radius: 0.5rem;
	border: 1px solid #999;
	background: #DDD;
}
.malibotun {
	height:3.5rem !important;
}
.main-paper .content textarea {
	border: none;
	font-family: verdana;
	font-size: 2.5rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: 20px;
}
.main-paper .content select {
	border: none;
	font-family: verdana;
	font-size: 2.5rem;
	border: 1px solid #5FA2ED;
	color: #000;
	margin-bottom: 20px;
	vertical-align: top;
	background: #FFF;
}
.main-paper .content hr {
	display:block;
	border: none;
	border-bottom: 1px solid #CCC;
	margin-bottom: 0.8rem;
	margin-top:0px;
	width:100%;
}
.main-paper .content .topmenu {
	/*
	width:74%;
	position:fixed;
	*/
	width:100%;
	background:#EEE;
	padding:0.4rem;
	height:5.8rem;
}
.main-paper .content .topmenu-fixed {
	width:74%;
	position:fixed;
	background:#EEE;
	padding:0.4rem;
}
.main-paper .content .topclear {
	margin-top:7rem;
}
.main-border {
	display: block;
	width: 100%;
	height: auto;
	background: #FFF;
	text-align:left;
}
.main-border .right_aligned {
	width:100%;
	text-align: right;
}
.sastavnica {
	border: none;
	font-size: 1.2rem;
	border-spacing: 0;
    border-collapse: collapse;
	background: #FFF;
	margin-left:1rem;
}
.sastavnica td {
	border: 1px solid #999;
	padding: 8px;
	white-space: nowrap;
	height: 5rem;
	border-bottom:none;
}
.sastavnica #korisnik {
	display:block;
	font-size: 1.8rem;
	font-weight: 300;
}
.sastavnica #podruznica {
	display:block;
	font-size: 1.8rem;
	font-weight: 300;
}
#naslov {
	display:block;
	font-size: 2.5rem;
	font-style: italic;
	font-weight: bold;
	margin-left:1rem;
	padding-top:1rem;
}
.sastavnica #list {
	display:block;
	font-size: 2rem;
	font-style: italic;
	font-weight: bold;
}
/* *********************** glavna lista (grid) ********************************** */
.lista {
	vertical-align:bottom;
	width:98%;
	height:60%;
}
.lista table {
	width: 100%;
	border-spacing: 0;
    border-collapse: collapse;
	cursor: default;
	font-size: 1.5rem;
	table-layout:fixed;
}
.lista td {
	border: 1px solid #CCC;
	padding: 8px;
	background: none;
	overflow: hidden;
}
.lista .content tr:hover {
	background: #EEE;
	border:2px solid #5FA2ED;
}
.lista th {
	background: #999;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 100;
	padding-top: 7px;
	border: 1px solid #FFF;
	padding: 8px;
	overflow: hidden;
}
.lista .content {
	padding:0;
	margin:0;
	/*
	overflow: hidden;
	overflow-y: scroll;
	height:30rem
	*/
	border: 1px solid #999;
	height:auto;
}

/* ********************************* slike ********************************** */
.slika_stroja {
	text-align: center;
	cursor:pointer;
	vertical-align: top;
	display: inline-block;
}
.slika_stroja img {
	width: 32rem;
	height: 24rem;
	background: url('images/mm.png');
}
.selection {
	height:34px;
	border: 1px solid #CCC;
	padding: 0;
	margin: 0;
	margin-right: 10px;
}
#upload {
	width: 300px;
	height: 200px;
	border: 1px solid #999;
	text-align: center;
	padding-top: 10px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
	border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
  	-webkit-border: 7px 7px 7px 7px;
	display: none;
	background: #FFF;
	font: bold 1.2rem 'Open Sans Condensed', sans-serif;
}
#upload_img {
	width: 200px;
	height: 200px;
	border: 1px solid #999;
}
.gallery_container {
	width: 210px;
	border: 1px solid #999;
	margin-right: 10px;
	display: inline-block;
	margin-bottom: 15px;
	text-align: center;
	padding-bottom:10px;
}
.gallery_image {
	width: 200px;
	height: 200px;
	border: 1px solid #CCC;
	margin-top:5px;
}
.gallery_image img {
	width: 100%;
	height: 100%;
}
.gallery_caption {
	width: 200px;
	height: 70px;
	overflow: hidden;
	font: 1.5rem arial, sans-serif;
}
th {
	background: #999;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: 100;
	padding-top: 7px;
	border: 1px solid #FFF;
	padding: 8px;
	text-align: left;
}
.obavezno label {
	font-weight:bold;
}
.obavezno input,
.obavezno select {
	border-width: 2px!important;
	margin-top: -1px;
	background: #EEE;
}
.tab{
	background: #EEE;
	border: 1px solid #999;
	padding-top:5px;
	padding-bottom:2px;
	margin-right:3px;
	padding-left:10px;
	padding-right:10px;
	border-radius: 5px 5px 0px 0px;
	position: relative;
	top: 1px;
	cursor:pointer;
	color:#999;
}
.tab:hover{
	border-top: 3px solid #FF6600;
	padding-top:3px;
}
.active_tab{
	background: #FFF;
	position:relative;
	top:1px;
	border: 1px solid #999;
	border-bottom: 1px solid #FFF;
	padding-top:7px;
	padding-bottom:3px;
	margin-right:3px;
	border-radius: 5px 5px 0px 0px;
	padding-left:10px;
	padding-right:10px;
}
.underline td {
	border-bottom:1px solid #CCC;
	cursor:pointer;
}
.underline:hover {
	border:2px solid #5FA2ED;
}
/****************************************** PLAN ********************************************/
.kalendar {
	font-family:Arial;
	font-size:16px;
	display: inline-block;
	vertical-align:top;
	margin: 1rem;
}
.kalendar th {
	font-size:16px;
	font-weight:normal;
	background: #999;
	color:#FFF;
	padding:2px 5px 2px 5px;
}
.kalendar td {
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #999;
	font-size:12px;
	height:2rem;
	text-align:center;
}
.legenda input[type="button"] {
	font-size: 1.5rem;
	vertical-align: top;
	border-radius: 0.5rem;
	border: 1px solid #999;
	background: #DDD;
	padding:0.5rem;
	height:3.5rem !important;
	width:3.5rem !important;
}
/****************************************** MESANGER ********************************************/
.poruka {
	border: 1px solid #999;
	border-radius: 10px 10px 10px 10px;
	max-width:90%;
	cursor:pointer;
}
.poruka td {
	border:none;
}
.poruka:hover {
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.poruka .time {
	font-size: 1.2rem;
}
.poruka .ime {
	font-size: 1.5rem;
	font-weight: bold;
}
.poruka .msg_body {
	background-color:#FFF;
	border-radius: 0px 0px 7px 7px;
	padding:2px;
	cursor:text;
}