/***************************************************

			     Villa Mjesto STYLES

***************************************************/



html, body{margin:0;padding:0;height:100%}



#head, #head-booking, #head-about, #head-getting, #head-things, #head-contact{

	width:768px;

	margin-right: auto;

	margin-left: auto;

	position: relative;

	background-image: url(images/baner.jpg);

	background-repeat: no-repeat;

	height: 395px;

	background-position: left 83px;

}



#head-booking{background-image: url(images/baner-booking.jpg);height: 295px;}

#head-about{background-image: url(images/baner-about.jpg);height: 295px;}

#head-getting{background-image: url(images/baner-getting.jpg);height: 295px;}

#head-things{background-image: url(images/baner-things.jpg);height: 295px;}

#head-contact{background-image: url(images/baner-contact.jpg);height: 295px;}



/***************************************************

			    DESIGN ELEMENTS

***************************************************/	



.clearing { height: 0; width:100%;display: block; clear: both; overflow:hidden; }  

.hidden{
	visibility: hidden;
	position: absolute;
}



p{display: block;margin: 0px;padding-top: 5px;padding-bottom: 5px;}

li{

	float: none;

	margin: 0px;

	padding: 0px;

	line-height: 16px;

	display: block;

}

li a{color: #666666;padding-left: 10px;display: block;line-height: 16px;}

a, a.green, a.blue,a.blue-text{color: #108BAF;font-family: Tahoma, Arial;font-size: 10px;font-weight: normal;text-decoration: none;}

a:hover, a.green:hover, a.blue:hover, a.blue-text:hover{color: #333333;}

a.green{color: #9CAC2D;font-size: 12px;}

a.blue{color: #108BAF;font-size: 12px;}

a.blue-text{color: #108BAF;font-size: 11px;background-image: url(pic/line.png);background-repeat: repeat-x;background-position: left bottom;}

/***************************************************

			       CONTAINER

***************************************************/



#container{

	width:760px;

	margin-right: auto;

	margin-left: auto;

	position: relative;

	overflow: hidden;

	margin-top: 10px;

	margin-bottom: 15px;

}

#container-imagegallery{

	width:700px;

	margin-right: auto;

	margin-left: auto;

	position: relative;

	overflow: hidden;

	margin-top: 10px;

	margin-bottom: 15px;

}



#container-message{

	text-align: center;

	margin-top: -35px;

	margin-left: -200px;

	position: absolute;

	top: 50%;

	left: 50%;

	width: 400px;

	height: 70px;

	visibility: visible;

}



/***************************************************

			       HOLDERS

***************************************************/

.holder-empty{

	width:760px;

	float: right;

}



.message-home, .message, .message-step{

	position: absolute;

	width: 204px;

	height: 47px;

	right: 260px;

	top: 330px;

	margin: 0;

	z-index: 1;

}



.message{top: 230px;}



.message-step{

	height: 43px;

	right: 0;

	top: 500px;

}



.holder{

	float: left;

	padding-top: 2px;

	padding-bottom: 2px;

	width: 220px;

	line-height: 14px;

}



#holder-left, .holder-left-info, .holder-form, #holder-left-small{

	width:490px;

	float:left;

	font-family: Tahoma, Arial;

	font-size: 11px;

	color: #666666;

	text-decoration: none;

	position: relative;

}



#holder-left-small{

	width:420px;

	padding-left: 3px;

}

.holder-imagegallery{

	width:700px;
	
	padding-left: 3px;
	
	padding-right: 3px;
	
	padding-top: 3px;
	
}

.holder-form{

	width:490px;

	background-color: #E2E7B2;

	margin-bottom: 1px;

	line-height: 20px;

}



.holder-nav{

	width:750px;

	line-height: 20px;

	position: relative;

	float: left;

}



.holder-left-info{width:225px;padding-right: 35px;}



#holder-right, #holder-right-big{

	width:240px;

	float: right;

	position: relative;

}



#holder-right-big{width:310px;}



.holder-flash{width:163px;float:left;}



.line{

	background-image: url(pic/line-H.png);

	background-repeat: repeat-x;

	background-position: left bottom;

	display: block;

	padding-bottom: 3px;

}



.holder-calendar{

	width:710px;

	font-family: Tahoma, Arial;

	font-size: 10px;

	color: #666666;

	text-decoration: none;

	position: relative;

	padding-left: 25px;

	padding-top: 20px;

	padding-bottom: 20px;

	padding-right: 25px;

	float: left;

}



.holder-month{

	width:720px;

	float:left;

	padding-top: 2px;

	padding-bottom: 2px;

}



.calendar-cell{

	width:14px;

	float:left;

	height: 14px;

	background-color: #FFFFFF;

	line-height: 14px;

	text-align: center;

	border: 1px solid #DFDFDF;

	margin-right: 1px;

}



.calendar-cell-week, .calendar-cell-blank, .calendar-cell-booked, .calendar-cell-april-oct, .calendar-cell-may, .calendar-cell-june, .calendar-cell-jul-aug, .calendar-cell-sept{

	width:14px;

	float:left;

	height: 14px;

	background-color: #FF6600;

	line-height: 14px;

	text-align: center;

	border: 1px solid #DFDFDF;

	margin-right: 1px;

	color: #FFFFFF;

}

.calendar-cell-blank{background-color: #FFFFFF;border: 1px solid #FFFFFF;color: #999999;}

.calendar-cell-booked{background-color: #E9E9E9;color: #999999;}

.calendar-cell-april-oct{background-color: #FFCC00;}

.calendar-cell-may{background-color: #BDCD44;}

.calendar-cell-june{background-color: #9B8BB2;}

.calendar-cell-jul-aug{background-color: #03BEE1;}

.calendar-cell-sept{background-color: #F09175;}





/***************************************************

				    GALLERY

***************************************************/



.right-gallery{

	width:310px;

	position: relative;

	padding-bottom: 15px;

	float: right;

}



.thumbs{

	height: 180px;

	width: 280px;

	float:none;

	padding-top: 5px;

	padding-bottom: 5px;

	padding-left: 10px;

}

.imagegallery{

	width: 700px;
	
	float:none;
	
	padding-top: 5px;
	
	padding-bottom:5px;
	
	padding-left: 5px;
	
	padding-right: 5px;
	
}

.textimage{
	
	width: 90px;
	
	float:left;
	
	padding-top: 5px;
	
	padding-bottom:5px;
	
	padding-left: 5px;
	
	padding-right: 5px;
	
}


/***************************************************

				      FORMS

***************************************************/



.text-box-form{

	font-family: Tahoma, Arial;

	font-size: 11px;

	color: #333333;

	top: 4px;

	float: left;

	width: 350px;

	display: block;

	line-height: 30px;

	padding-left: 10px;

}



.text-form, .error{

	font-family: Tahoma, Arial;

	font-size: 11px;

	color: #ff0000;

	position: absolute;

	top: 4px;

}



form{margin: 0px;padding: 0px;}



#form{

	width:420px;

	padding-top: 15px;

	float: left;

}



#form-submit{

	display: block;

	text-align: right;

	padding-top: 20px;

	padding-right: 125px;

}



label{

	color:#666666;

	font-size:11px;

	width:60px;

	display:block;

	float:left;

	line-height: 14px;

	clear: left;

	padding-left: 2px;

}



.label{

	color:#666666;

	font-size:11px;

	width:100px;

	line-height: 22px;

	border-right-width: 1px;

	border-right-style: solid;

	border-right-color: #FFFFFF;

	padding-top: 4px;

	padding-right: 4px;

	padding-bottom: 4px;

	padding-left: 15px;

	position: relative;

}



.textbox, .select{

	border:1px solid #CCCCCC;

	font-size:11px;

	width:148px;

	line-height:16px;

	background-color: #FFFFFF;

	height: 16px;

	color: #747474;

	padding-right: 2px;

	padding-left: 2px;

	margin-left: 10px;

	margin-top: 5px;

	margin-bottom: 4px;

	margin-right: 10px;

}



.select{width:153px;}



.textbox:focus{border:1px solid #D8C217;cursor:text}



textarea{

	border:1px solid  #E1E1E1;

	width:300px;

	background-color: #FFFFFF;

	height: 150px;

	font-size: 11px;

	color: #999999;

	padding-right: 2px;

	padding-left: 2px;

	margin-left: 10px;

	margin-top: 5px;

	margin-bottom: 4px;

	margin-right: 10px;

}



textarea:focus{border:1px solid #b3c531;cursor:text;}



#sub-login {

	width:300px;

	height: 30px;

	padding-top: 20px;

	padding-left: 145px;

}

.sub-login{

	height: 22px;

	width: 80px;

	font-family: "Lucida Sans Unicode", Arial;

	font-size: 11px;

	color: #333333;

	border: 1px solid #999999;

	background-color: #FFFFFF;

	margin-left: 20px;

	margin-top: 5px;

}



/***************************************************

			HEADING TEXT ELEMENTS

***************************************************/



h1, h2, h3, h4, h5, h6{

	font-family: Tahoma, Arial;

	margin: 0px 0px 0px 0px;

	padding: 0px;

	font-weight: normal;

}



h1{

	font-size: 16px;

	color: #8A9324;

	font-weight: normal;

	display: block;

	padding-bottom: 3px;

	background-image: url(pic/h1.png);

	background-repeat: no-repeat;

	background-position: right center;

	margin-bottom: 8px;

	margin-top: 8px;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #C5D35A;

}



h2{

	font-size: 16px;

	color: #029AB5;

	font-weight: normal;

	display: block;

	padding-bottom: 3px;

	background-image: url(pic/h6.png);

	background-repeat: no-repeat;

	background-position: right center;

	margin-bottom: 8px;

	margin-top: 8px;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #ACDDFD;

}



h3{

	font-size: 11px;

	color: #666666;

	font-weight: normal;

	line-height: 14px;

	padding-left: 25px;

}



h4{

	font-size: 11px;

	color: #333333;

	font-weight: normal;

	padding-top: 10px;

}



h5{

	font-size: 11px;

	color: #333333;

	padding: 20px;

	line-height: 14px;

	}



h6{

	font-size: 16px;

	color: #029AB5;

	font-weight: normal;

	display: block;

	padding-bottom: 3px;

	background-image: url(pic/h6.png);

	background-repeat: no-repeat;

	background-position: right center;

	margin-bottom: 8px;

	margin-top: 8px;

	border-bottom-width: 1px;

	border-bottom-style: solid;

	border-bottom-color: #ACDDFD;

	margin-left: 22px;

	margin-right: 3px;

	}



.text-box, .text-box2{

	font-family: Tahoma, Arial;

	font-size: 11px;

	display: block;

	color: #666666;

	padding-bottom: 5px;

}



.text-box2{

	font-size: 12px;

	color: #CCCCCC;

}



.step, .step-done, .step-left{

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	display: block;

	color: #029AB5;

	line-height: 22px;

	padding-left: 20px;

	background-image: url(pic/step.png);

	background-repeat: no-repeat;

	background-position: left 4px;

}

.step-left{color: #CCCCCC; background-image: url(pic/step-left.png);}

.step-done{color: #A5B630; background-image: url(pic/step-done.png);}



a.pdf{

	color: #666666;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	font-weight: bold;

	text-decoration: none;

	background-image: url(pic/pdf.gif);

	background-repeat: no-repeat;

	background-position: left center;

	padding-left: 22px;

	line-height: 24px;

	display: block;

}

a.pdf:hover{color: #333333;}



a.links, a.links-gray{

	color: #108BAF;

	font-family: Tahoma, Arial;

	font-size: 11px;

	font-weight: normal;

	text-decoration: none;

	line-height: 14px;

	display: block;

}

a.links:hover{color: #333333;}



a.links-gray{

	color: #666666;

	line-height: 16px;

	display: block;

	padding-left: 10px;

}

a.links-gray:hover{color: #333333;}



a.links-H1{

	color: #108BAF;

	font-family: Tahoma, Arial;

	font-size: 13px;

	font-weight: normal;

	text-decoration: none;

	display: block;

	padding-top: 8px;

	padding-bottom: 3px;

}

a.links-H1:hover{color: #333333;}



/***************************************************

			        FOOTER

***************************************************/



#footer{

	width:760px;

	font-family: "Lucida Sans Unicode", Arial;

	font-size: 10px;

	font-weight: normal;

	color: #999999;

	margin-left: auto;

	margin-right: auto;

	height: 50px;

	background-image: url(pic/footer-line.png);

	background-repeat: no-repeat;

	position: relative;

}



#FooterOne{

	width:615px;

	float:left;

	position: relative;

}



#FooterTwo{

	width:140px;

	float:right;

	background-image: url(pic/krojac-logo.gif);

	background-repeat: no-repeat;

	background-position: 56px 12px;

	text-align: right;

	line-height: 40px;

}



a.krojac {

	font-family: "Lucida Grande", tahoma, sans-serif;

	font-size: 10px;

	color: #FF9900;

	text-decoration: none;

}

a.krojac:hover{color: #FF9900;}





/***************************************************

				       MENU

***************************************************/



#nav-menu{

	height: 20px;

	padding-top: 60px;

	padding-left: 220px;

	background-image: url(images/top-logo.jpg);

	background-repeat: no-repeat;

	background-position: left top;

}



#nav-menu ul, ul{

	list-style: none;

	margin: 0px;

	padding: 0px;

}



#nav-menu li{

	float: left;

	text-align: center;

	margin: 0px;

	padding: 0px;

}



#nav-menu li a{

	line-height: 30px;

	float: left;

	width: 90px;

	color: #666666;

	text-decoration: none;

	text-align: center;

	font-family: Tahoma, Arial;

	font-size: 11px;

	padding-left: 0px;

	font-weight: normal;

	background-image: url(pic/button.png);

	background-repeat: no-repeat;

}



#nav-menu li a:hover{

	color: #72A234;

	background-image: url(pic/buttonUP.png);

}



body#home a#home_link, 

body#o-nama a#o-nama_link, 

body#usluge a#usluge_link, 

body#slucajevi a#slucajevi_link, 

body#kontakt a#kontakt_link{color: #72A234;}



#bootom-menu ul{

	list-style: none;

	margin: 0px;

	padding: 0px;

	width: 765px;

}



#bootom-menu li{

	float: left;

	text-align: left;

	font-size: 10px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	color: #CCCCCC;

}



#bootom-menu li a{

	color: #999999;

	text-decoration: none;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	padding-right: 8px;

	padding-left: 0px;

	line-height: 40px;

	display: inline;

}



#bootom-menu li a:hover{color: #3FB2D9;}



body#home a#home_link, 

body#about a#about_link, 

body#booking a#booking_link,

body#contact a#contact_link, 

body#things a#things_link, 

body#getting a#getting_link{color: #009BD7;background-image: url(pic/buttonUP.png);background-repeat: no-repeat;}



.status_message_box {

	color:#FFFFFF;

	background-color:#FF0000;

	font-weight:bold;

	line-height:15px;

	padding:3px;

	padding-left:5px;

	border-bottom-color:#FFFFFF;

	border-bottom-width:3px;

}