/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
	display:block
}
mark, rp, rt, ruby, summary, time {
	display:inline
}
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.clear{clear:both}
.wrapper {
	width:100%;
	overflow:hidden
}
/* Global properties ======================================================== */
body {
	color:#585858;
	border:0;
	font:12px Arial, Helvetica, sans-serif;
	line-height:20px;
	background:url(../images/bg-header1.gif) repeat-x; padding-top:189px;
}
.ic, .ic a {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}
.css3 {
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	box-shadow:0 0 4px rgba(0, 0, 0, .4);
	-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
	-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
	position:relative
}
/* Global Structure ============================================================= */

.bg1 { margin-top:-187px;}
.bg2 { 	
}	
.main {background:url(../images/background.jpg) no-repeat center 156px;
width:100%; }
.box {
	margin:0 auto;
	width:960px;;
	padding:0 6px;
}
/* ============================= main layout  ====================== */
a {
	color:#72716f;
	text-decoration:underline;
	outline:none
}
a:hover {text-decoration:none}

h1 {
	padding:40px 0 0 38px;
	float:left
}
h2 {
	font-size:21px;
	line-height:1.2em;
	padding:6px 0 15px 0;
	color:#fff;
	letter-spacing:-1px
}
h2 img {
	margin-right:15px;
	float:left
}
p {padding-bottom:20px}
	
.pad {
	padding:20px 0 39px 40px; 
	}
	
.pad_bot1 {padding-bottom:10px;}
	
.pad_bot2 {padding-bottom:24px}
	
.pad_bot3 {padding-bottom:14px}
	
.pad_left1 {padding-left:70px}
	
.pad_left2 {padding-left:80px}
	
.color1 {color:#f3b21d}
	
.color2 {color:#000}
	
.color3 {color:#000}
	
.box1 .pad {padding:20px 0 15px 30px}
	
.list2 {
	border-top:1px solid #f2f2f2;
	margin-top:-2px;
	padding-bottom:21px
}
.list2 li {
	line-height:23px;
	border-bottom:1px solid #f2f2f2;
	padding:0 6px;
	color:#000
}
.list2 span {float:right}
/* ============================= header D9FFA9 - zelena svjetlo====================== */
header {
	width:960x;
	height:116px;
	margin:0 auto;
background:url(../images/bg-header.png) repeat-x;	
}
header h1 {padding-top:60px;}
#headerTitle a{
	color:#f3b21d;
	font-size:32px;
	text-decoration:none;
	margin-top:50px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding-top:50px;
}
.headerBijela{color:#FFFFFF;}
.department {
	float:right;
	padding:37px 35px 0 0;
	color:#ccc;
	text-align:right;
	font-size:16px;
}
.department span {}

#menu {
	list-style:none;
	margin:auto 0;
	padding:0;
}
#menu > li {
	padding-right:5px;
	float:left
}
#menu .last {border:0}
#menu > li > a {
	color:#28475C;
	display:block;
	font-size:14px;
	height:43px;
	line-height:37px;
	padding:0 23px;
	text-align:center;
	text-decoration:none;
	text-shadow:1px 1px 0 #94C81D;
	text-transform:capitalize;
}
#menu > li > hover, #menu > .active > {
	height:43px;
}
#menu > .active > a {
	background:url(../images/bg-menu.gif) repeat-x;
	color:#2a495e;
	font-weight:bold;
	text-shadow:1px 1px 0 #a8d32c;
}
#navigationWrapper{ 
	width:100%;
	height:43px;
	}
#navigation{ 
	width:750px; 
	float:left;
	}
#flags{
	margin-top:15px; 
	float:right;
	}
/* ============ content 274F75 =========== */
#content { 
	margin-top:120px;
}
.box1 {
	background-color:#ffffff;
}
.box1 h2 {
	color:#12110f;
	padding:7px 0 14px 0
}
.button1, .button2 {
	display:inline-block;
	background:#fff;
	padding:0 25px;
	color:#12110f;
	line-height:29px;
	position:relative;
	border-radius:1px;
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	text-decoration:none
}
.button2 {
	background:#7faf1b;
	color:#fff;
	padding:0 22px
}
.button1:hover {
	background:#94C81D;
	color:#72716f
}
.button2:hover {background:#94C81D}

/* ============= index ąnd city======== */
.wrapperIndex{ 
	width:940px;
	}
.indexWrapperBox {
	background:url(../images/line_vert1.gif) 280px 0 repeat-y;
	margin:0 auto;
	}
.indexBox{
	background:url(../images/line_vert1.gif) 600px 0 repeat-y;
	padding-bottom:7px
}
.indexColumn {
	width:250px;
	float:left;
}
.indexColumn a {
	color:#274F75;
	}
.wrapperWelcomeText {
	padding-bottom:11px;
}
.welcomeText{
	width:850px;
	font-size:13px;
		
}
.bookingcom{
	margin-top:-140px;
}
.video{
	margin-top:20px;
}

.welcomeText h2{
	color:#000000;
}
/*______________ACCOMMODATION______background-image:url(../images/boking400px.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;_____*/
.smjestaj{
	width:570px;
	float:left;
	padding:20px 0 39px 40px
	}
.wrapperAppBox1{background:url(../images/line_vert1.gif) 280px 0 repeat-y}
.appBox1{
	float:left;
	width:240px;
}
.padSmjestaj {padding:20px 0 39px 20px}
.appDescription {
	background:url(../images/line_vert2.gif) 630px 0 repeat-y;
	padding-bottom:11px
}
.appGallery{
	width:620px;
	float:left;
	}
.appGallery h2{ 
	color:#274F75;
	}
.appText{
	width:250px;
	padding-left:40px;
	padding-top:20px;
	float:left;
}
figure {padding-top:4px}

#priceApartment{
	color:#274F75;
}
#tblPrice{
	width:600px;
	margin:5px;
}
#tblPrice td{
	border:#999999 1px dotted;
	text-align:center;
}	
/*___________________CITY___________*/
.city {
	width:600px;
	float:left;
	padding-left: 20px;
}
/*___________________LOCATION___________*/
.location {
	width:600px;
	padding-left: 20px;
	float:left;
}
.map {
  	height:400px;
}
.map iframe{
	width:100%;
	height:450px;
	position:relative;
}

/*___________________MESSAGE___________*/
.message{
	width:600px;
	padding:20px 0 39px 20px;
	float:left;
}
.message h3{
	font-size:14px;
}
.messagePic{
	width:280px;
	margin-left:640px;
}

/* ============================= footer ====================== */
footer {
	padding:47px 30px 47px 40px;
	height:44px;
	width:960px;
	margin:0 auto;
}
footer a {
}
footer a:hover {
}
#footer_menu {padding-top:4px}
#footer_menu li {
	padding-right:26px;
	background:url(../images/footer_menu_line.gif) right 5px no-repeat;
	margin-right:25px;
	float:left
}
#footer_menu .last {
	padding-right:0;
	margin-right:0;
	background:none
}
#footer_menu .active a {text-decoration:none}
.footerNav{
	float:left;
	width:570px;
}
.footerInfo{float:right}
/* =========== kwiks slider INDEX ========= */
.kwicks-wrapper {
	width:640px;
	overflow:hidden;
	float:left;
}
.kwicks {/* recommended styles for kwicks ul container */
	list-style:none;
	position:relative;
	margin:0;
	padding:0 !important;
	overflow:hidden;
	height:445px;
	background:none
}
.kwicks li {/* these are required, but the values are up to you (must be pixel) */
	width:160px;
	height:445px;/*do not change these */
	display:block;
	overflow:hidden;
	padding:0 !important; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
	cursor:pointer;
	background:none !important;
}
.kwicks.horizontal li {/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
	margin-right:0;/*Set to same as spacing option. */
	float:left
}
/* =========== END kwiks slider INDEX ========= */

/*______FOTO GALLERY - SMJEŠTAJ_____________________*/
#smjestajGallery{
	width:97%;
	border:5px solid #72716f;
	background-color:#72716f;}
#gallery {position:relative; width:97%;}
/*#images {border:2px solid #9ac1c9; height:250px; background:#eef5f6; }*/
#image {position:relative; }
#image img {position:absolute; }
/*#thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; }*/
/*#thumbarea {position:relative; overflow:hidden; height:100px; width:682px; }*/
#thumbs {list-style:none; margin-left:5px; width:600px; height:400px; text-align:center;}
/*#thumbs li {float:left; margin-right:5px; cursor:pointer}*/
.imgnav {position:absolute; height:400px; width:50px; z-index:100; height:400px; width:50px; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; }
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; }
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}
/*_______END FOTO GALLERY - SMJEŠTAJ_____________________*/

/***** FOTO GALLERY - CITY *****/
.slider-wrapper {
	width:600px;
	height:400px;
	position:relative;
	overflow:hidden;
	background:url(../images/slider-bg.png) 0 0 no-repeat;
}
.slider {
	width:600px;
	height:400px;
}
.items {display:none;}
/***** END FOTO GALLERY - CITY *****/

/* ======== EMAIL form ============= */
.emailForm{
	width:320px;
	margin-left:640px;
	height:445px;
	background-color:#7faf1b;
}
#form {
	width:240px;
	height:385px;
	padding:30px;
	background-color:#7faf1b;
	color:#fff;
	background-image:url(../images/bg_top_form.png);
	background-position:top;
	background-repeat:no-repeat;
}
#form h2 {
	padding:0 0 22px 0;
	margin-top:-4px;
	color:#fff
}
#form .row {
	height:30px;
	line-height:22px;
	margin-bottom:6px;
}
#form .row_textarea {
	height:102px;
	line-height:22px
}
#form .input {
	font:13px Arial, Helvetica, sans-serif;
	color:#fff;
	background:none;
	height:15px;
	padding:3px 5px;
	width:165px;
	margin:0;
	border-bottom:#72716f 1px solid;
	border-left:#72716f 1px solid;
	float:right;
}
#form textarea {
	font:13px Arial, Helvetica, sans-serif;
	color:#ccc;
	background:none;
	height:54px;
	padding:3px 5px;
	width:222px;
	margin:0;
	overflow:auto;
	border-bottom:#72716f 1px solid;
	border-left:#72716f 1px solid;
}
#form select{
	width: 200px;
	height:20px;
	background-color:#f6f6f6;
	font-size:13px;
	padding-left:5px;
	border:1px solid #c0c0c0;
}
#form .button1 {
	margin-left:4px;
	padding:0 15px;
	float:right;
}

#messageError{
	width:500px;
	margin-top:100px;
	background-color:#FF8080;
	padding:10px;
	border:#999 solid 1px;
	color:#000000;
	text-align:center;
	border-bottom-right-radius:6px;
	border-top-right-radius:6px;
}
#messageError p{
	font-size:14px;
	text-align:left;
}
#messageError h4{
	font-size:16px;
	padding-left:50px;
}
#messageOk{
	width:500px;
	margin-top:100px;
	background-color:#C9E69A;
	padding:10px;
	border:#999 solid 1px;
	color:#000000;
	text-align:center;
	border-bottom-right-radius:6px;
	border-top-right-radius:6px;
}
#messageOk p{
	font-size:14px;
	text-align:left;
}