/*CSS Reset*/
body, div, dl, dt, dd, li, pre,form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }
			
html, body {
	font-size: 14px;
}
			
body {
	background: #bbdefa /*#2A597F*/ url("images/bg_pattern.jpg") 0px 0px repeat;
	font-family: Arial, Helvetica, sans-serif;
}
			
* {
	font-size: 1em;
}
	/*  This centers the content in a 960 pixel wide box */
	#container {
		background: #fff;
		margin: 0px auto;
		width: 960px;
		padding: 0px ;
		overflow: hidden;
		border-right: solid 1px #5c6d7a;
		border-left: solid 1px #5c6d7a;
		border-bottom: solid 1px #5c6d7a;
	}
	
	/* The header styling */
	#header {
		width: 960px;
		height: 150px;
		margin: 0px;
		padding: 0px;
		background: url("images/BnB_layout_05a.jpg") 0px 0px no-repeat;
	}
		/* 
		    The Navigation styling uses a single image with versions of both normal and hover states
		    the hover states for each element alter the positioning of the image to match up with the
		    corresponding part of the image to display the rollover effect.
		*/
		#navigation {
		    display: block;
		    width: 960px;
		    height: 52px;
		    margin: -1px 0px 0px 0px;
		    padding: 0px;
		    background: #004f8f url("images/navigation.gif") 0px 0px no-repeat;
		    overflow: hidden;
		}
		    #navigation li {
		    	float: left;
		    	display: block;
		    	margin: 0px;
		    	padding: 0px;
		    	overflow: hidden;
		    	list-style: none;
		    }
		
		    #navigation li a {
		    	display: block;
		    	height: 52px;
		    	margin: 0px;
		    	padding: 0px;
		    	text-decoration: none;
		    	margin-right: 5px;
		    	
		    }
		    
		    	#home_btn {
		    		width: 110px;
		    	}
		    	
		    		#home_btn:hover, .home #home_btn {
		    			background: #004f8f url("images/navigation.gif") 0px -60px no-repeat;
		    		}
		    	
		    	#contact {
		    		width: 130px;
		    	}
		    		#contact:hover, .contact #contact {
		    			background: #004f8f url("images/navigation.gif") -115px -60px no-repeat;
		    		}
		    		
		    	#rooms {
		    		width: 120px;
		    	}
		    		#rooms:hover, .rooms #rooms {
		    			background: #004f8f url("images/navigation.gif") -250px -60px no-repeat;
		    		}
		    	
		    	#menus {
		    		width: 120px;
		    	}
		    		#menus:hover, .menus #menus {
		    			background: #004f8f url("images/navigation.gif") -375px -60px no-repeat;
		    		}
		    	
		    	#activities {
		    		width: 150px;
		    	}
		    		#activities:hover, .activities #activities {
		    			background: #004f8f url("images/navigation.gif") -500px -60px no-repeat;
		    		}
		    		
		    	#transport {
		    		width: 160px;
		    	}
		    		#transport:hover, .transport #transport {
		    			background: #004f8f url("images/navigation.gif") -655px -60px no-repeat;
		    		}
		    	
		    	#history {
		    		width: 130px;
		    	}
		    		#history:hover, .history #history {
		    			background: #004f8f url("images/navigation.gif") -820px -60px no-repeat;
		    		}
		    		
		    	.home #home_btn, .contact #contact, .rooms #rooms, .menus #menus, .activities #activities, .transport #transport, .history #history {cursor: default}
		
		/* The main content styling */    	
		#content {
		    width: 960px;
		    /*
		    min-height: 450px;
		    height: auto !important;
		    height: 450px;
		    */
		    margin: 0px;
		    padding: 0px 5px 0px 5px;
		    background: #fff;
		}
			/* Styling for the map section on the map page */
			#milosmap, #home_material, #room_info {
				float: left;
				position: relative;
				top: 0px;
				left: 0px;
				margin: 30px 5px 30px 5px;
				width: 620px;
			}
				#home_material h1, #room_info h1 {
					font-size: 2em;
					font-weight: bold;
					margin-bottom: 15px;
				}
				#home_material h2 {
					font-size: 1.8em;
					font-weight: bold;
					margin-bottom: 15px;
				}
				#home_material p {
					margin: 0px 0px 15px 0px;
				}
				#venus_statue {
					float: left;
					margin: 0px 20px 0px 0px;
				}
			
			dl {
				float: left;
				top: 0px;
				left: 0px;
				margin: 30px 5px 30px 5px;
				width: 620px;
			}
			
					dt {
						font-size: 2em;
						font-weight: bold;
						margin-bottom: 25px;
					}
					dd {
						text-align: left;
						width: 600px;
						margin: 0px 0px 25px 0px;
					}
				
					.image_item {
						text-align: center;
						margin: 0px 0px 10px 0px;
					}
			#contact_list {
				margin: 30px -175px 30px 175px;
			}
			
			#room_info {
				text-align: center;
			}
			#room_info p, #room_info h1 {
				text-align: left;
			}
			#room_images {
				margin: 0px 0px 0px 0px;
			}
			
			#sidebar {
				float: right;
				position: relative;
				top: 30px;
				left: 0px;
				width: 285px;
				margin: 0px 10px 40px 10px;
				padding: 0px;
				overflow: hidden;
				background: #fff;
			}
				#maplink {
					display: block;
					height: 195px;
					margin: 0px;
		    		padding: 0px;
		    		text-decoration: none;
		    		background: #fff url("images/map_button.jpg") 0px 0px no-repeat;
		    		overflow: hidden;
				}
				
					#maplink:hover, .map #maplink {
						background: #fff url("images/map_button.jpg") -4px -196px no-repeat;
					}
					
					.map #maplink {
						cursor: default;
						opacity:0.4;
						filter: alpha(opacity=40);
					}
					
					#map_caption {
						text-align: center;
						text-transform: uppercase;
					}
						.map #map_caption {
							opacity:0.4;
							filter: alpha(opacity=40);
						}
					
				#booknow {
					display: block;
					height: 180px;
					margin: 10px 60px 25px 60px;
		    		padding: 0px;
		    		text-decoration: none;
		    		background: #fff url("images/book_now_02.jpg") 0px 0px no-repeat;
		    		overflow: hidden;
				}
					#booknow:hover, .contact #booknow {
						background: #fff url("images/book_now_02.jpg") 0px -205px no-repeat;
					}
					
					.contact #booknow {
						cursor: default;
						opacity:0.4;
						filter: alpha(opacity=40);
					}
						
		/* Styling for the footer section */
		#footer {
			clear: both;
		    display: block;
		    width: 960px;
		    height: 25px;
		    margin: 80px 0px 0px 0px;
		    padding: 0px 0px 0px 5px;
		    border-top:  1px solid #004f8f;
		    overflow: hidden;
		}
		    #footer li {
		    	float: left;
		    	display: block;
		    	margin: 0px 5px 0px 0px;
		    	padding: 0px;
		    	overflow: hidden;
		    	list-style: none;
		    	color: #004f8f;
		    	font-size: .8em;
		    }
		
		    #footer li a {
		    	display: block;
		    	height: 14px;
		    	margin: 0px;
		    	padding: 0px;
		    	text-decoration: none;
		    	margin-right: 5px;
		    	color: #004f8f;
		    }
		    	#footer li a:hover {
		    		color: red;
		    	}
			#copyright {
			    position: relative;
			    left: 485px;
			}
		
		/* 
			This moves the the content way off the screen in order to hide it.  Is used primarily for the navigation section
			in order to have some actual text in the links for SEO purposes but to hide it so it does not interfere with the graphic
			image in the background.
		 */
		.hide {
		    position: relative;
		    left: -9999px;
		}