body {
     font: 100.01% Verdana, Arial, Helvetica, sans-serif; /* Sets the overall font size and family overriding an older Opera bug. */
     background: #3F77A0; /* Creates the overall window background color that blends in with the two drop shadow images. */
     margin: 0; /* Removes default margin some browsers add. */
     padding: 0; /* Removes default padding some browsers add. */
     text-align: center; /* Makes Win IE 5.5 and 5.0 center the design (bug). */
}
h1 {
	font-size: 1.25em;
	text-align: center;
	font-weight: normal;
	background-image: url(../images/hoover_test.png);
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: thin;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: groove;
	border-left-style: solid;
	border-top-color: #3F77A0;
	border-right-color: #3F77A0;
	border-bottom-color: #3F77A0;
	border-left-color: #3F77A0;
}

a img{
	border:0;
}

#holder {
	min-width: 600px; /* Keeps div from shrinking more than 600 pixels in width as window is narrowed. */
	max-width: 910px; /* Keeps div from growing more than 910 pixels in width as window is expanded. */
	background: #fff url(../images/background-right.jpg) repeat-y top right; /* Centers the overall design in standards-compliant browsers. */
	text-align: left; /* Resets the text alignment from center to left to override hack on body above. */
	position: relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/* The following hack is read only by Mac IE. It gives it a fixed width for the holder div since Mac IE doesn't support min- and max-width. Be sure you do not add any comments INSIDE the hack or it will close. */
/*\*//*/
#holder {
	width: 750px;
	}
/* End show to Mac IE. */

#inner {
	background: url(../images/background-left.jpg) repeat-y; /* Creates the blue background behind the sidebar and drop shadow to its left. Tiled up and down to make both columns appear to be the same length no matter which is longer. */
}

/* Needed for compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to the holder div. Also removes it from the flow, so it will not push down the header image. */
	top: 0; /* Places the div at the top edge of the holder div. */
	left: 0; /* Places the div at the left edge of the holder div. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#header {
	font-family: Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif; /* Sets the font-family for all content within.*/
	height: 165px; /* Creates space on left and right sides of div to let drop shadowed images on holder and inner divs show on each side. */
	position: relative; /* Gives the div positioning so that an absolutely positioned div descendant can be placed in relation to it. */
	background-color: #020504;
	background-image: url(../images/apartments_pakostane_croatia.jpg);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 10px;
}

#header p {
	text-align: right; /* Aligns the home and contact links on the right side. */
	font-size: .8em; /* Increases space between letter slightly. */
	line-height: 145%; /* Increases space between each line of text. */
	position: absolute; /* Sets the paragraph to be positioned in a precise spot in relation to the header div. */
	bottom: 40px; /* Places the bottom of the paragraph 40 pixels from the bottom of the header div. */
	right: 10px; /* Places the right side of the paragraph 10 pixels from the right edge of the header div. */
	margin: 0; /* Removes default paragraph margin so placement will be uniform across browsers. */
	letter-spacing: 0.06em;
}
#header #flags {
	float: right;
	padding-top: 135px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}


#content {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0;
	margin-left: 250px;
	padding-bottom: 5px;
}

/* The following selectors are styling for the content div's headings, paragraphs and links. */
#content h2, 
#content h3, 
#content h4 {
	color: #1E2C31;
	font-family: Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 1.35em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
#content h4 {
	font-size: 1.25em;
}
#inner #content h2 {
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#content #imageleft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	border: medium double #3F77A0;
	margin-top: 5px;
	margin-left: 0px;
}
#content #imageright {
	float: right;
	margin-right: 15px;
	margin-bottom: 10px;
	border: medium double #3F77A0;
	margin-top: 5px;
	margin-left: 10px;
}
#content p {
	color: #333;
	padding-right: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	line-height: 135%;
	padding-bottom: 10px;
}
#content .link { /* Creates the larger Learn More link at the bottom of the page. */
	font: 1.25em Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
}
#content a:link, 
#content a:visited {
	color: #3F77A0;
	text-decoration: none;
}
#content a:hover, 
#content a:active, 
#content a:focus {
	text-decoration: underline;
	color: #FF0000;
}


/* The following selectors are the form styles for contact.htm */
#content form {
	margin: 0; /* Removes the margin some browsers add by default. */
	padding: 0 0 10px; /* Creates 10px of padding at the bottom of the form. */
  	float: left; /* Keeps the internal clearing BR's within the form from clearing the external floated side column. */
	width: 100%; /* Makes form take up whole width of content div so that content following the form will not wrap on its right side. */
}	
#content fieldset {
	border: 1px solid #CFE5F5;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 15px;
	width: auto;
	clear: both;
}
#content legend {
	border: 1px solid #CFE5F5; /* Creates a defined box/border around the legend */
	color: #fff; /* Sets contrasting text color from background color. */
	background: #3F77A0 url(../images/sidehead.jpg) repeat-y; /* Gives the legend the same background image as the feature headings, plus backup background color in case images aren't loaded. */
	padding: 1px 5px 2px; /* Keeps the borders away from the text by these specified amounts. */
	margin-bottom: 5px; /* Creates 5px of space below the legend. */
	font: normal 1em Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif; /* Styles the text within. */
}
#content label {
	float: left; /* Allows labels to be placed on the left with their inputs following on their right sides. */
	width: 8em; /* All the labels have the same width, so their right edges line up vertically. */
	clear: both; /* They are all cleared so that they always start a new line below previous form element floats. */
	font-size: .8em; /* Sets same font size as that used on main content text. */
	text-align: justify; /* Aligns text to the right so that all form elements create an even middle gutter. */
	margin-top: 3px; /* Moves the text of the label down slightly to align with the top of the input to its right. */
	}
#content input, #content textarea {
	color: #000; /* Creates the text color inside the inputs. */
	border: 1px solid #6FA4CE; /* Sets a border. */
	padding: 1px; /* Creates the space around the inputs and textareas so they don't stack on top of each other. */
	width: 280px; /* Creates a consistent width between all inputs and textareas. */
	float: left; /* Floated next to their labels. */
	background-color: #CFE4F5;
	margin-top: 3px;
	margin-right: 5px;
	margin-bottom: 2px;
	margin-left: 5px;
	display: inline;
}

/* The following hack can only be read by Mac IE and removes the floats from the inputs and textareas to avoid bugs. Luckily, Mac IE is good without floating. Be sure you do not add any comments INSIDE the hack or it will close. */
/*\*/ /*/
#content input, #content textarea {
	float: none;
}
/* End show to Mac IE. */

/* This selector can be used on input boxes you want to be shorter than the normal ones. */
#content input.sminp {
	width: 110px; /* Smaller width. */
	margin-right: 160px; /* Keeps the shorter boxes aligned on the left with the wider ones. */
}


/* The following changes the colors of the inputs and textareas when the cursor is inside, in supported browsers. */
#content input:focus, #content input:active, #content textarea:focus, #content textarea:active {
	color: #000;
	background-color: #F6F8FC;
}
#content #flashcontent {
	border: 4px double #3F77A0;
	text-align: center;
	padding: 0px;
	margin: 0px;
}
#content #h2pricelist {
	margin: 0px;
	padding: 0px;
}


#content #h2pricelist h2 {
	text-align: center;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-size: 1.45em;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	color: #000000;
	border-bottom-width: medium;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: double;
	border-left-style: solid;
	border-bottom-color: #6FA4CE;
	width: 100%;
	background-image: url(../images/hoover_test.png);
	background-color: #6FA4CE;
	border-top-width: 1px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-color: #6FA4CE;
}


#content #h2pricelist img {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -10px;
	margin-left: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}

#content #h2pricelist .pricelistd a {
	color: #000000;
	text-decoration: none;
}
#content #h2pricelist .pricelistd a:hover {
	color: #000000;
	text-decoration: underline;
}


#content #h2pricelist td {
	padding: 7px;
	text-align: center;
	font-size: 1em;
	color: #000000;
	border-bottom-width: medium;
	border-bottom-style: double;
	border-bottom-color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#content #h2pricelist a {
	color: #000000;
	text-decoration: none;
}
#content #h2pricelist a:hover {
	color: #000000;
	text-decoration: underline;
}
#content #cmxMap {
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	border: medium double #3F77A0;
	margin-bottom: 10px;
	padding: 0px;
}


#content #h2pricelist table {
	width: 100%;
	background-color: #CFE4F5;
	border-bottom-width: medium;
	border-bottom-style: double;
	border-bottom-color: #FFFFFF;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding: 0px;
}
#content #book a {
	padding: 10px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}


/* The following selectors control the sidebar/navigational area. */
#sidebar {
	float: left; /* Moves div to left side of screen and allows content div to wrap around it on its right. */
	width: 210px; /* Sets width div should take up. Content div will take up remaining width to the right. */
	margin-top: 20px; /* Creates space on left side of div to let drop shadow image on inner div show on the side. */
	display: inline; /* Fixes the doubled margin bug that Win IE 6 and lower manifest when a left float has a left margin. Doesn't hurt other browsers. */
	margin-left: 10px;
}
.tr1 {
	background-image: url(../images/hoover_test.png);
}
#center #cmxMap {
	padding: 0px;
	margin-right: 35px;
	margin-left: 35px;
	margin-top: 10px;
	margin-bottom: 10px;
}
#content #h1link a:hover {
	padding: 5px;
	margin: 5px;
	border: thin solid #3F77A0;
	color: #000000;
	text-decoration: none;
	background-color: #FF6633;
}


#sidebar h2 {
	color: #fff; /* Controls the outer edge placement which keeps the heading box away from other elements. */
	text-align: center;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 3px;
	margin-left: 20px;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-image: url(../images/sidehead.jpg);
	font-family: Gill Sans, Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 20px;
}
#sidebar #features img {
	border: medium double #3F77A0;
	margin-left: 4px;
}

#sidebarimage {
	border: thin double #73A4CF;
	margin: 0px;
	padding: 0px;
	float: none;
}
#sidebar #features a {
	text-decoration: none;
	font-size: 14px;
	color: #FF0000;
}
#sidebar #features a:hover {
	color: #FF0000;
	text-decoration: underline;
}


#sidebar #features h1 {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 2px;
	padding: 2px;
}
#sidebarul ul {
	list-style-type: disc;
	color: #000000;
	font-size: 0.8em;
	list-style-position: inside;
	white-space: nowrap;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 120%;
	font-weight: bold;
}
#sidebarul li {
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 3px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}



/* The following selectors create the button look from list items in an unordered list. */
ul#nav {
	padding: 0; /* Removes default padding and margin to create a level playing field between browsers. */
	margin: 0;
	list-style: none; /* Removes the list marker (bullet) from the list items. */
}
#nav li {
	padding-left: 23px; /* Moves the text over by 23 pixels, which is the width of the little icons, so text doesn't overlap them. */
	margin-left: 20px; /* Sets font size, line-height and list of possible families. */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 120%;
}
#nav li#photogallery {
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url(../images/photogallery.gif);
}

#nav li#room {
	background-image: url(../images/room.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#bookonline {
	background-image: url(../images/email.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#apartments {
	background-image: url(../images/apartments.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

#nav li#car {
	background: url(../images/car.gif) no-repeat left center;
}
#nav li#links {
	background-image: url(../images/flight.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

#nav li#table {
	background: url(../images/table.gif) no-repeat left center;
}
#nav li#show {
	background: url(../images/show.gif) no-repeat left center;
}
#nav li#photogalleryana {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerybernarda {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogalleryelodi {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogalleryivana {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerykat1 {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerykat2 {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerymagdalena {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerystudio2 {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#nav li#photogallerystudio3 {
	background-image: url(../images/photogallery.gif);
	background-repeat: no-repeat;
	background-position: left center;
}



/* The below styles the button area next to the icon. */
#nav li a:link,
#nav li a:visited {
	display: block; /* Turns the A element into a solid block and thus clickable all the way across (not just on the words). */
	background: #fff; /* Overall background color of the button area. */
	color: #000; /* Text color. */
	font-weight: bold; /* Makes the link text appear bolded. */
	text-decoration: none; /* Gets rid of the default underlines on links. */
	margin: 3px 0 2px 0; /* Creates the space outside each button to space them apart from each other. */
	padding: 3px 2px 3px 20px; /* Creates the area within the button and keeps its text away from the edges of its background. */
}

#nav li a:hover, 
#nav li a:active, 
#nav li a:focus {
	background-image: url(../images/hoover_test.png);
	background-repeat: repeat;
}
#nav li#pricelist {
	background-image: url(../images/pricelist.gif);
	background-repeat: no-repeat;
	background-position: left center;
}



/* The following selectors create the photo/info teaser area below the navigation. */
#features {
	background: #fff url(../images/sidehead.jpg) no-repeat left bottom; /* Keeps the div away from the UL above and the same distance from the left side of the sidebar. */
	padding-bottom: 5px; /* Creates a little space between the end of the content of the div and its bottom background image strip. */
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 20px;
}


#features h2 {
	margin-left: 0;
}

#features p {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif; /* Creates extra space between each paragraph element (with floated image). */
	margin-top: 5px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 8px;
}

/* The next two selectors simply create the black footer area of the page. */
#bottom {
	background: #000;
}
#pagebott {
	min-width: 580px; /* Sets minimum width to 20px less than that set on the holder div to make up for the 10px on each side of the holder div that are removed by its side margins. */
	max-width: 890px; /* Sets maximum width to 20px more than that set on the holder div for the same reason. */
	border-left: 10px solid #000; /* Because we don't want drop shadow images to show here, we fill that extra 10px on each side with a border than blends into the background of the bottom div. */
	border-right: 10px solid #000;
	background: #26373E;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


#pagebott p {
	margin: 0; /* Removes default margin. */
	text-align: center; /* Center aligns the text. */
	font-size: 0.65em; /* Sets a font size slightly smaller than the main page text. */
	color: #FEDEEF; /* Sets a color without as much contrast as the main page text so that this doesn't jump out. */
	padding: 5px; /* Creates a small amount of space between the text and edges of the background. */
	letter-spacing: .06em; /* Creates small amount of space between letters in the text. */
}

/* The following selectors create the link and hover styling for the pagebott area. */
#pagebott a:link, 
#pagebott a:visited {
	color: #fff;
	text-decoration: none;
}
#pagebott a:hover, 
#pagebott a:active, 
#pagebott a:focus {
	color: #7AB4F4;
	text-decoration: underline;
}
#form1 .send {
	margin-top: 0px;
	margin-right: 200px;
	margin-bottom: 0px;
	margin-left: 200px;
}

.brclear { /* Use a break with this class to clear float containers on both sides. */ 
clear:both; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 
.clearrt { /* Use a break with this class to clear float containers only on the right (so as not to clear the left floated sidebar, for instance). */
clear:right; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 
.pricelistd {
	background-color: #6FA4CE;
}
#inner #h5 {
	margin: 0px;
	padding: 0px;
}
#sidebar #features a {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin: 5px;
	padding: 5px;
}
#nav li#callme {
	background-image: url(../images/callme.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
.align {
	text-align: center;
}