/* Glavni css file */

@font-face {
	font-family: 'PTSansRegular';
	src: url('pts55f-webfont.eot');
	src: url('pts55f-webfont.woff') format('woff'),
		url('pts55f-webfont.ttf') format('truetype'),
		url('pts55f-webfont.svg#') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansItalic';
	src: url('pts56f-webfont.eot');
	src: url('pts56f-webfont.woff') format('woff'),
		url('pts56f-webfont.ttf') format('truetype'),
		url('pts56f-webfont.svg#') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansBold';
	src: url('pts75f-webfont.eot');
	src: url('pts75f-webfont.woff') format('woff'),
		url('pts75f-webfont.ttf') format('truetype'),
		url('pts75f-webfont.svg#') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansBoldItalic';
	src: url('pts76f-webfont.eot');
	src: url('pts76f-webfont.woff') format('woff'),
		url('pts76f-webfont.ttf') format('truetype'),
		url('pts76f-webfont.svg#') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansNarrowRegular';
	src: url('ptn57f-webfont.eot');
	src: url('ptn57f-webfont.woff') format('woff'),
		url('ptn57f-webfont.ttf') format('truetype'),
		url('ptn57f-webfont.svg#PTSansNarrowRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PTSansNarrowBold';
	src: url('ptn77f-webfont.eot');
	src: url('ptn77f-webfont.woff') format('woff'),
		url('ptn77f-webfont.ttf') format('truetype'),
		url('ptn77f-webfont.svg#PTSansNarrowBold') format('svg');
	font-weight: normal;
	font-style: normal;
}

.cfx:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.cfx {
	/*display: inline-block*/
}

html[xmlns] .cfx {
	display: block;
}

* html .cfx {
	height: 1%;
}

body {
	font-family: 'PTSansRegular', Arial, Helvetica, sans-serif;
	background-color:#296B2E;
}

h1 {
	font-familiy:'PTSansNarrowBold', Arial, Helvetica, sans-serif;
	font-size:22px;

}

a
{
	text-decoration:none;
	color: #333;
}
.noBorder {
	border:none !important;
}

/* shading */
.shading
{
	-moz-box-shadow: 5px 5px 7px rgba(3,3,3,0.2);
  	-webkit-box-shadow: 10px 10px 10px #000;
  	box-shadow: 10px 10px 10px #000;
}

/* rounded corners */
.round_corners
{
	-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.clearfix
{
	display:block;
	clear:both;
}


div.divBody
{
	max-width:960px;
	width:100%;
	margin:16px auto 0 auto;
	padding:12px;

	background-color:#FFF;
}

#header {
	margin:0 0 12px 0;
}

div.divBodyLeft
{
	width:180px;
	height:100%;
	padding:0 0px 0 0;

	float:left;

}

.divBodyLeft img {
	width:100%;
	margin:0 0 12px 0;
}

div.divMenu
{
	padding:0 12px 64px 16px;
}

div.divBodyRight
{
	max-width:760px;
	width:100%;
	padding:0 0 0 12px;

	float:left;


}

h5 {
	margin:0;
}

p {
	margin:4px;
}

.loginForm { padding:16px  !important; margin-top:200px !important; width:600px !important; }
.loginForm img { margin:24px 0 0 0; float:left; }
.loginForm  fieldset { width:300px; float:left; margin:0 0 0 16px; border:1px solid #AAA; }
.loginForm input[type="submit"] { padding:8px 12px; }



/* div za ajax working ikonu */
div.ajaxWorkingDiv
{
	background-image:url("static/ajax-loader.gif");
	background-repeat:no-repeat;

	width:20px;
	height:20px;

	float:left;

}

div#MessageDiv
{
	position:absolute;
	left:10%;
	top:30%;

	width:80%;
	height:150px;

	background-color:#999;

	z-index:70;
}

.divMainMenuItem
{
	/*padding:5px 5px 5px 8px;
	margin:0 4px 4px 0;*/
	/*background-color: #DBDBDB;*/
	border-bottom:1px dotted #CCC;
	margin:0 0 4px 0;
	padding:0 0 4px 2px;
	font-size:14px;
}

.divMainMenuItem:hover a {
	color:#999;
}

#poi_dialog .container {
	position: relative;
	width: 100%;
	height: 100%;
}

#poi_map {
	position: absolute;
	top: 0;
	left: 200px;
	bottom: 0;
	right: 0;
}

#poi_list_controls {
	position: absolute;
	top: 85%;
	left: 0;
	bottom: 0;
	width: 200px;
}

#poi_list {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 15%;
	width: 200px;
	background-color: #E5E3DF;
}

#poi_list ul {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 100%;
	overflow: auto;
}

#poi_list ul.types > li {
	font-weight: bold;
	padding: 4px;
	cursor: pointer;
}

#poi_list ul.types > li.active-type {
	color: #296B2E;
}

#poi_list ul.pois li {
	/*padding-left: 8px;*/
}

#poi_list ul.pois li {
	font-weight: normal;
	color: initial;
}

#poi_list ul.pois li[data-position=""] {
	font-style: italic;
}

#poi_list ul.pois li.active-poi {
	background-color: #296B2E;
	color: #FFF;
}

.btn-group button {
	border: 1px solid #CCC;
	border-radius: 0;
	width: 50%;
	margin: 4px 0 0 -1px;
	display: inline-block;
	float: left;
	background-color: #FFF;
	line-height: 24px;
}

.btn-group button:enabled:hover {
	background-color: #EEE;
	border-color: #BBB;
}

.btn-group button:first-child {
	border-radius: 3px 0 0 3px;
}

.btn-group button:last-child {
	border-radius: 0 3px 3px 0;
}


#poi_type_edit {
	position: absolute;
	width: 220px;
	height: 310px;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -155px;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 0 2px 0 #000;
	border-radius: 4px;
}

#poi_edit {
	position: absolute;
	width: 220px;
	height: 150px;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 0 2px 0 #000;
	border-radius: 4px;
}

#poi_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

#prop_edit {
	position: absolute;
	width: 220px;
	height: 150px;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;
	padding: 10px;
	background-color: #fff;
	box-shadow: 0 0 2px 0 #000;
	border-radius: 4px;
}

#prop_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

.mobile-menu { display:none; }



@media (max-width: 767px) {
	body { margin:0;  }
	div.divBody { margin:0 auto; padding:0; }
	.divBodyLeft { display:none !important }   	
	div.divBodyRight { margin-top:-38px; padding:0; }
	.divBodyRight h1 { text-align: right; padding:0 8px 0 0; }
	.mobile-menu { display:block; }
	.divMainMenuItem { font-size:18px }	

	.ui-dialog { width:100% !important; max-width:840px; }

	.working-animation { margin:10px 0 6px 4px; }

	
	div.divBody.loginForm { max-width:350px; margin: 40px auto !important; }
	.loginForm img { float:none; margin: 0 auto; display:block; }
	.loginForm fieldset { float:none; margin: 16px auto 0; width:auto; }
	
	.loginForm input[type="text"],
	.loginForm input[type="password"] { 
		padding:4px 6px; 
	}

	/*
	* Made by Erik Terwan
	* 24th of November 2015
	* All rights reserved
	*
	*
	* If you are thinking of using this in
	* production code, beware of the browser
	* prefixes.
	*/


	#menuToggle
	{
	display: block;
	position: relative;
	top: 9px;
	left: 7px;	
	z-index: 100;
	
	-webkit-user-select: none;
	user-select: none;
	}

	#menuToggle input
	{
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	
	cursor: pointer;
	
	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	
	-webkit-touch-callout: none;
	}

	/*
	* Just a quick hamburger
	*/
	#menuToggle span
	{
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	
	background: #cdcdcd;
	border-radius: 3px;
	
	z-index: 1;
	
	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	transform-origin: 0% 100%;
	}

	/* 
	* Transform all the slices of hamburger
	* into a crossmark.
	*/
	#menuToggle input:checked ~ span
	{
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
	background: #232323;
	}

	/*
	* But let's hide the middle one.
	*/
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	* Ohyeah and the last one should go the other direction
	*/
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	opacity: 1;
	transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	* Make this absolute positioned
	* at the top left of the screen
	*/
	#menu
	{
	position: absolute;
	width: 300px;
	margin: -100px 0 0 -50px;
	padding: 50px;
	padding-top: 125px;
	
	background: #ededed;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
	
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	}

	#menu li
	{
	padding: 10px 0;
	font-size: 22px;
	}

	/*
	* And let's fade it in from the left
	*/
	#menuToggle input:checked ~ ul
	{
	transform: scale(1.0, 1.0);
	opacity: 1;
	}

}