/***************************************************
			     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{overflow: hidden;visibility: hidden;}

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-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-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: 90px;
	width: 90px;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

/***************************************************
				      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: #999999;
	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-family: Tahoma, Arial;
	font-size:11px;

	line-height:16px;
	background-color: #FFFFFF;
	height: 16px;
	color: #747474;
	padding-right: 2px;
	padding-left: 2px;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

.select{width:153px;}

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

textarea{
	border:1px solid  #E1E1E1;
	font-family: Tahoma, Arial;
	width:300px;
	background-color: #FFFFFF;
	height: 50px;
	font-size: 11px;
	color: #999999;
	padding-right: 2px;
	padding-left: 2px;
	margin-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-right: 5px;
}

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:530px;
	float:left;
	position: relative;
}

#FooterTwo{
	width:220px;
	float:right;
	background-image: url(pic/krojac-logo.gif);
	background-repeat: no-repeat;
	background-position: 136px 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;}

.top-menu{
	line-height: 26px;
	float: left;
	width: 90px;
	color: #108BAF;
	text-decoration: none;
	text-align: center;
	font-family: Tahoma, Arial;
	font-size: 11px;
	padding-left: 0px;
	font-weight: normal;
}
.top-menu a:hover{
	color:#ff9933; /*#72A234;*/

}
.Contecttext{
	font-size:11px;
	font-family: tahoma, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	color: #747474;
	padding-right: 2px;
	padding-left: 2px;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 4px;
	margin-right: 10px;
}
.Abouttext{
	font-size:11px;
	font-family: tahoma, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	color: #747474;
	padding-right: 2px;
	padding-left: 2px;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: 4px;
	margin-right: 10px;
	text-align:justify;s
}
.footertext{	
	font-family: tahoma,"Lucida Sans Unicode", Arial;
	font-size: 10px;
	font-weight: normal;
	color: #999999;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
	}