@import url('reset.css');

h1 {

	color: rgb(153, 0, 51);

	font-family: 'Satisfy', cursive;

	font-size: 2.5em;

	line-height: 1.5em;

	font-weight: normal;

	margin-left: 10px;

}

h2 {

	font-size: 1.5em;

}

h3 {

	font-size: 1.3em;

}

h4 {

	font-size: 1em;

}

a:link {

	text-decoration: none;

	color: #90D3E4;

}

a:visited {

	text-decoration: none;

}

a:hover {

	text-decoration: none;

}

a:active {

	text-decoration: none;

}

p {

	font-family: verdana, sans-serif;

	color: rgb(0,0,100);

	font-size: 1em;

	line-height: 1.3em;

	font-weight: bold;

}

.p_h {

	color: rgb(0, 102, 51);

	font-size: 1.2em;

	font-weight: bold;

	margin-bottom: 25px;

}

body {

	background-color: #BBC5C5;

	margin: 0 auto;

	font-family: verdana, sans-serif;

}

div#wrapper {

	height: auto;

	width: 1000px;

	margin: 0 auto;

	background-color: #FFF;

	border: 3px solid White;

	margin-top: 25px;

}

.header {

	position: relative;

	width: 100%;

	height: 300px;

	background-image: url(../img/header_bg.jpg);

	background-repeat: no-repeat;

	margin-top: 0px;

}

.approved {

	position: absolute;

	margin-top: 16px;

	margin-left: 14px;

	width: 114px;

	height: 139px;

	background-image: url(../img/approved.png);

	background-repeat: no-repeat;

}

a.wifi {

	position: absolute;

	width: 162px;

	height: 164px;

	background-image: url(../img/wifi.png);

	background-repeat: no-repeat;

	margin-left: 821px;

	margin-top: 14px;

}

.logo {

	position: absolute;

	width: 375px;

	height: 41px;

	background-image: url(../img/logo.png);

	background-repeat: no-repeat;

	margin-top: 244px;

	margin-left: 4px;

}

.header p {

	position: absolute;

	color: #FFFFFF;

	font-size: 1.5em;

	font-weight: bold;

	margin-top: 251px;

	margin-left: 425px;

}

.nav {

	width: 100%;

	float: left;

	margin-top: 10px;

	margin-bottom: 10px;

	padding: 0;

	list-style: none;

}

.nav li {

	float: left;

}

.nav li a {

	font-size: 0.9em;

	font-weight: bold;

	display: block;

	padding: 9px 15px;

	margin-left: 20px;

	margin-right: 20px;

	text-decoration: underline;

	color: rgb(0, 102, 51);

	border: 1px solid #ccc;

	-moz-border-radius: 50%;

	border-radius: 50%;

	background-color: #E9E9E9;

}

.nav li a:hover {

	color: #A7B7D1;

	background-color: #fff;

}
.nav li.active a {

	color: rgb(0, 102, 51);
	background-color: #ccc;

}

.content {

	width: 100%;

	height: auto;

}

/*-----------Home-------------*/

.text_area {

	width: 440px;

	height: 400px;

	float: left;

	background-image: url(../img/content_bg.jpg);

	background-repeat: no-repeat;

	background-position: bottom left;

}

.text_area p {

	line-height: 1.8em;

	margin-top: 10px;

	margin-left: 15px;

}

.home_pic {

	width: 560px;

	height: 400px;

	float: left;

}

/*-----------Facilities-------------*/

.text_area2 {

	width: 100%;

	height: auto;

}

.text_area2 p {

	line-height: 1.8em;

	margin-top: 10px;

	margin-left: 15px;

	margin-right: 10px;

}

.room_img {

	width: 500px;

	height: 690px;

	float: left;

}

.text_area3 {

	width: 500px;

	height: 690px;

	float: left;

	background-image: url(../img/content_bg.jpg);

	background-repeat: no-repeat;

	background-position: left top;

}

.text_area3 p {

	line-height: 1.8em;

	margin-top: 10px;

	margin-left: 15px;

}

/*----------galerija-----------------*/

.gallery {

	width: 400px;

	height: auto;

	margin-left: 50px;

}

.gallery a {

	display: inline-block;

	height: 135px;

	position: relative;

	width: 180px;

	-moz-user-select: none;

	-webkit-user-select: none;

	-khtml-user-select: none;

	user-select: none;

}

.gallery a img {

	border: 8px solid #fff;

	border-bottom: 20px solid #fff;

	cursor: pointer;

	display: block;

	height: 100%;

	left: 0px;

	position: absolute;

	top: 0px;

	width: 100%;

	z-index: 1;

	-moz-box-sizing: border-box;

	-webkit-box-sizing: border-box;

	-o-box-sizing: border-box;

	box-sizing: border-box;

	-webkit-transition: all 1.0s ease;

	-moz-transition: all 1.0s ease;

	-o-transition: all 1.0s ease;

	transition: all 1.0s ease;

	-moz-box-shadow: 2px 2px 4px #444;

	-webkit-box-shadow: 2px 2px 4px #444;

	-o-box-shadow: 2px 2px 4px #444;

	box-shadow: 2px 2px 4px #444;

}

.gallery a:nth-child(1) img {

	-moz-transform: rotate(-5deg);

	-webkit-transform: rotate(-5deg);

	transform: rotate(-5deg);

}

.gallery a:nth-child(2) img {

	-moz-transform: rotate(4deg);

	-webkit-transform: rotate(4eg);

	transform: rotate(4deg);

}

.gallery a:nth-child(3) img {

	-moz-transform: rotate(-10deg);

	-webkit-transform: rotate(-10deg);

	transform: rotate(-10deg);

}

.gallery a:nth-child(4) img {

	-moz-transform: rotate(-5deg);

	-webkit-transform: rotate(-5deg);

	transform: rotate(-5deg);

}

.gallery a:nth-child(5) img {

	-moz-transform: rotate(-4deg);

	-webkit-transform: rotate(-4deg);

	transform: rotate(-4deg);

}

.gallery a:nth-child(6) img {

	-moz-transform: rotate(0deg);

	-webkit-transform: rotate(0deg);

	transform: rotate(0deg);

}

.gallery a:nth-child(7) img {

	-moz-transform: rotate(5deg);

	-webkit-transform: rotate(5deg);

	transform: rotate(5deg);

}

.gallery a:nth-child(8) img {

	-moz-transform: rotate(-3deg);

	-webkit-transform: rotate(-3deg);

	transform: rotate(-3deg);

}

.gallery a:nth-child(9) img {

	-moz-transform: rotate(-4deg);

	-webkit-transform: rotate(-4deg);

	transform: rotate(-4deg);

}

.gallery a:nth-child(10) img {

	-moz-transform: rotate(2deg);

	-webkit-transform: rotate(2deg);

	transform: rotate(2deg);

}

.gallery a:focus img {

	cursor: default;

	height: 250%;

	left: -150px;

	top: -100px;

	position: absolute;

	width: 250%;

	z-index: 25;

	-webkit-transition: all 1.0s ease;

	-moz-transition: all 1.0s ease;

	-o-transition: all 1.0s ease;

	transition: all 1.0s ease;

	-moz-transform: rotate(0deg);

	-webkit-transform: rotate(0deg);

	-o-transform: rotate(0deg);

	transform: rotate(0deg);

}

/*----------galerija-----------------*/

.room_list {

	padding-left: 34px;

	margin-bottom: 10px;

	margin-top: 10px;

}

.room_list li {

	margin-bottom: 10px;

	list-style: disc;

	color: rgb(0,0,100);

}

/*-------Location--------*/

.gmap_text {

	width: 440px;

	height: 400px;

	float: left;

	background-image: url(../img/content_bg.jpg);

	background-repeat: no-repeat;

	background-position: bottom left;

}

#map-canvas {

	border: #6B7C9B solid 2px;

	width: 533px;

	height: 399px;

}

/*-----------enquiry-------------*/



/*-----------------------------------------JAALABO!!!!!!!!!---------------*/

/*feedback Form*/

  

.feedbackform, .bodytext, .directdebit {

	position: relative;

	margin: 10px 0;

}

.feedbackform {

	background-image: url(../img/content_bg.jpg);

	background-repeat: no-repeat;

	background-position: bottom right;

}

.feedbackform .contactimage {

	position: absolute;

	top: 50px;

	right: 50px;

}

.feedbackform .orderimage {

	position: absolute;

	top: 70px;

	right: 30px;

}

.feedbackform p, .directdebit p {

	clear: both;

	display: block;

	font-size: 0.8em;

}

.feedbackform label {

	float: left;

	width: 200px;

	margin-right: 10px;

	text-align: right;

	font-weight: bold;

}

.directdebit label {

	float: left;

	width: 200px;

	margin-right: 10px;

	text-align: right;

	font-weight: bold;

}

.feedbackform span.radio {

	float: left;

	display: block;

	width: 130px;

	padding: 3px 0px 1px;

	font-weight: bold;

}

.feedbackform input.radio {

	border: 0px;

	float: left;

	margin-top: 0px;

	display: block;

	width: 30px;

}

.feedbackform input.checkbox, .directdebit input.checkbox {

	position: relative;

	border: 0px;

	top: 2px;

	width: 15px;

	float: none;

}

.feedbackform input, .feedbackform select, .feedbackform textarea, .feedbackform submit {

	float: left;

	margin: -2px 0 10px;

	border: #375B29 solid 1px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

}

.directdebit input {

	float: left;

	margin: -2px 0 10px;

	border: #375B29 solid 1px;

	-moz-border-radius: 3px;

	-webkit-border-radius: 3px;

	width: 350px

}

.directdebit input.submit {

	width: 100px

}

.feedbackform input, .feedbackform select {

	width: 200px;

}

.feedbackform .smallinputs input, .feedbackform .smallinputs select {

	width: 80px;

}

.feedbackform .errors {

	color: #C00;

	font-size: 0.8em;

	height: 40px;

}

/* Calendar */





table.jCalendar {

	border: 1px solid #000;

	background: #aaa;

	border-collapse: separate;

	border-spacing: 2px;

}

table.jCalendar th {

	background: #333;

	color: #fff;

	font-weight: bold;

	padding: 3px 5px;

}

table.jCalendar td {

	background: #ccc;

	color: #000;

	padding: 3px 5px;

	text-align: center;

}

table.jCalendar td.other-month {

	background: #ddd;

	color: #aaa;

}

table.jCalendar td.today {

	background: #666;

	color: #fff;

}

table.jCalendar td.selected {

	background: #f66;

	color: #fff;

}

table.jCalendar td.selected.dp-hover {

	background: #f33;

	color: #fff;

}

table.jCalendar td.dp-hover, table.jCalendar tr.activeWeekHover td {

	background: #fff;

	color: #000;

}

table.jCalendar tr.selectedWeek td {

	background: #f66;

	color: #fff;

}

table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {

	background: #bbb;

	color: #888;

}

table.jCalendar td.unselectable, table.jCalendar td.unselectable:hover, table.jCalendar td.unselectable.dp-hover {

	background: #bbb;

	color: #888;

}

/* For the popup */



/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */



div.dp-popup {

	position: relative;

	background: #ccc;

	font-size: 10px;

	font-family: arial, sans-serif;

	padding: 2px;

	width: 200px;

	line-height: 1.2em;

}

div#dp-popup {

	position: absolute;

	z-index: 199;

}

div.dp-popup h2 {

	font-size: 12px;

	text-align: center;

	margin: 2px 0;

	padding: 0;

}

a#dp-close {

	font-size: 11px;

	padding: 4px 0;

	text-align: center;

	display: block;

}

a#dp-close:hover {

	text-decoration: underline;

}

div.dp-popup a {

	color: #000;

	text-decoration: none;

	padding: 3px 2px 0;

}

div.dp-popup div.dp-nav-prev {

	position: absolute;

	top: 2px;

	left: 4px;

	width: 100px;

}

div.dp-popup div.dp-nav-prev a {

	float: left;

}

/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */

div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {

	cursor: pointer;

}

div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {

	cursor: default;

}

div.dp-popup div.dp-nav-next {

	position: absolute;

	top: 2px;

	right: 4px;

	width: 100px;

}

div.dp-popup div.dp-nav-next a {

	float: right;

}

div.dp-popup a.disabled {

	cursor: default;

	color: #aaa;

}

div.dp-popup td {

	cursor: pointer;

}

div.dp-popup td.disabled {

	cursor: default;

}

/* located in demo.css and creates a little calendar icon

 * instead of a text link for "Choose date"

 */

a.dp-choose-date {

	float: left;

	width: 16px;

	height: 16px;

	padding: 0;

	margin: 0 3px 0;

	display: block;

	text-indent: -2000px;

	overflow: hidden;

	background: url(../img/calendar.png) no-repeat;

}

a.dp-choose-date.dp-disabled {

	background-position: 0 -20px;

	cursor: default;

}

/* makes the input field shorter once the date picker code

 * has run (to allow space for the calendar icon

 */

input.dp-applied {

	width: 140px;

	float: left;

}

.clr {

	clear: both;

	height: 1px;

}

/*-----------------------------------------JAALABO!!!!!!!!!---------------*/

/*--------------special--------------*/

.speciallbg {

	width: 100%;

	height: 280px;

	background-image: url(../img/spec_bg.png);

	background-repeat: no-repeat;

	background-position: center;

}

.after-box {

	width: 1000px;

	height: 25px;

	clear: left;

}

.footer {

	width: 100%;

	height: 50px;

	background-color: #556E7E;

	text-align: center;

}

.footer p {

	line-height: 4.5em;

	color: #FFF;

	font-weight: bold;

	font-size: 0.6em;

}