﻿body {
    font-family:Tahoma,Arial, Sans-Serif;
    font-size: 11px;
    background-color:white;
    margin:0px;
    border:0px;
    padding:0px;
}

h1 {
    font-size:12px; 
    font-weight:bold;
    margin:0px;
    border:solid 0px red;
    padding:0px;
}

#title {
    border:solid 0px red;
    float:right; 
    font-size:24px;
    color:#999999; 
    font-family:georgia,Arial,Sans-Serif;
    font-weight:normal;
    padding:10px 0px 0px 0px;
}    

#background {
    margin:auto;
    border:solid 0px white; 
    background:url(../images/background2.jpg) 0 0 no-repeat; 
    width:800px; 
    height:540px;
}

#banner {
    margin-top:28px; 
    margin-left:63px;
    width:682px;
    height:146px;
    border:solid 1px white;
    background-color:white;
    padding:0px;
}

#container {
    margin-left:63px;
    border:solid 0px black; 
    background-color:white; 
    width:684px;
    height:338px;
}

#content {
    border:solid 0px blue; 
    background-color:white; 
    width:489px; 
    float:right;
    padding-right:15px;
}

#menu {
    margin-left:10px;
    padding:10px 0px 10px 0px; 
    text-align:center;
    border:solid 0px red;
    background-color:white; 
    width:161px;
}

.buttonpadding {padding:5px 5px 5px 5px;}

.clear {clear:both;}

#contact1 {
    color:White;
    padding:5px 0px 0px 210px;
    float:left;
    border:solid 0px white;
    letter-spacing: 1px;
}

#contact2 {
    color:White;
    padding:5px 55px 0px 0px;
    float:right;
    border:solid 0px black;
    letter-spacing: 1px;
}

#contact3 {
    text-decoration:none;
    color:White;
}

img {
    vertical-align: middle;
    border:solid 0px blue;
    padding:0px 2px 0px 2px;
}

a {outline:0px;}

a:link {color : #333333; text-decoration:underline; }
a:visited {color : #333333; text-decoration:underline;}
a:hover {color : #333333; text-decoration:none;}
a:active {color : #333333; text-decoration:none;}

a.outandabout:link {color : #0953B7; text-decoration:underline; }
a.outandabout:visited {color : #0953B7; text-decoration:underline;}
a.outandabout:hover {color : #0953B7; text-decoration:none;}
a.outandabout:active {color : #0953B7; text-decoration:none;}

a.whitenone:link {color : white; text-decoration:none; }
a.whitenone:visited {color : white; text-decoration:none;}
a.whitenone:hover {color : white; text-decoration:none;}
a.whitenone:active {color : white; text-decoration:none;}

a.whiteline:link {color : white; text-decoration:underline; }
a.whiteline:visited {color : white; text-decoration:underline;}
a.whiteline:hover {color : white; text-decoration:none;}
a.whiteline:active {color : white; text-decoration:none;}

table.myborder {
	border: 2px solid #9CC3EF;
	border-collapse: collapse;
	background-color: #FFFFFF;
	font-size: 11px;
}
table.myborder th {
    text-align:center;
	border: 2px solid #9CC3EF;
	background-color: #FFFFFF;
	padding: 6px 6px 2px 6px;
}
table.myborder td 
{
    text-align:center;
	border: 2px solid #9CC3EF;
	padding: 2px 6px 2px 6px;
}

table.leftborder {
	border: 2px solid #9CC3EF;
	border-collapse: collapse;
	background-color: #FFFFFF;
	font-size: 11px;
}
table.leftborder th {
    text-align:left;
	border: 2px solid #9CC3EF;
	background-color: #FFFFFF;
	padding: 6px 6px 2px 2px;
}
table.leftborder td {
    text-align:left;
	border: 2px solid #9CC3EF;
	padding: 2px 6px 2px 2px;
}

table.noborder {
	border: 0px solid #9CC3EF;
	border-collapse: collapse;
	background-color: #FFFFFF;
	font-size: 11px;
}
table.noborder th {
    text-align:left;
	border: 0px solid #9CC3EF;
	background-color: #FFFFFF;
	padding: 10px 6px 10px 0px;
}
table.noborder td {
    text-align:left;
	border: 0px solid #9CC3EF;
	padding: 7px 6px 7px 0px;
}


.button1,.button2,.button3,.button0 {padding:6px 0px 0px 0px;height: 20px;width: 161px;color:white;font-weight:bold;margin:auto; vertical-align:middle;}

.button1 {
  background-image: url('../images/buttons/mysprite_buttons.png');
  background-position: left -0px;
}
.button2 
{
  background-image: url('../images/buttons/mysprite_buttons.png');
  background-position: left -26px;
}    
.button3 {
  background-image: url('../images/buttons/mysprite_buttons.png');
  background-position: left -52px;
}  
.button0 {
  background-image: url('../images/buttons/mysprite_buttons.png');
  background-position: left -78px;
}       

p.dropcap:first-letter {padding-right:0px;font:20px "Times New Roman",Arial,sans-serif;font-weight:bold;line-height:15px;border:solid 0px red;}
p.dropcap {margin:0px;border:0px;padding:0px;}

.height1,.height2,.height3,.height4,.height5,.height6,.height7,.height8,.height9,.height10,.height12,.height15,.height20,.height30,.height37,.height40,.height47,.height50 {font-size:0px;}
.height1 {height:1px;}
.height2 {height:2px;}
.height3 {height:3px;}
.height4 {height:4px;}
.height5 {height:5px;}
.height6 {height:6px;}
.height7 {height:7px;}
.height8 {height:8px;}
.height9 {height:9px;}
.height10 {height:10px;}
.height12 {height:12px;}
.height15 {height:15px;}
.height20 {height:20px;}
.height30 {height:30px;}
.height37 {height:37px;}
.height40 {height:40px;}
.height47 {height:47px;}
.height50 {height:50px;}

.bold1 {font-weight:bold; letter-spacing: 1px;}
.bold3 {font-weight:bold; letter-spacing: 3px;}

#home_rightcolumn {
    border:solid 0px red;
    float:right;
    padding:25px 0px 0px 0px;
}

#home_leftcolumn {
    margin-left:8px;
    border:solid 0px red;
    text-align:justify;
    width:220px;
}

#rooms_leftcolumn {
    margin-left:8px;
    border:solid 0px red;
    text-align:justify;
    width:220px;
}

#rooms_rightcolumn {
    border:solid 0px red;
    float:right;
    width:244px;
}

#rooms_thumbnails {
    border:solid 0px blue;
    float:right;
    width:244px; 
    text-align:center;
}

#rooms_table {height:40px;}

#gallery_leftcolumn {
    margin-left:20px;
    border:solid 0px red;
    width:240px;
}

#gallery_rightcolumn {
    border:solid 0px red;
    float:right;
    width:205px;
}

#thumbnail_instruction{
    border:solid 0px red;
    margin:10px 0px 10px 5px;
}

#breakfast_rightcolumn {
    float:right;
    width:205px;
    border:solid 0px red;
}

#breakfast_leftcolumn {
    margin-left:10px;
    border:solid 0px red;
    padding:0px 0px 0px 0px;
    width:250px;
    text-align:center;
}

#tariff_leftcolumn {
    margin-left:20px;
    border:solid 0px red;
    padding:50px 0px 0px 0px;
}

#tariff_rightcolumn {
    float:right;
    width:230px;
}

#outandabout {
    margin-left:  15px;
    border:solid 0px red;
}

#directions_leftcolumn {
    border:solid 0px red;
    margin-left:20px;
}

#directions_rightcolumn {
    border:solid 0px #999999;
    float:right;
    width:232px;
}

#contact_leftcolumn {
    border:solid 0px red;
    margin-left:20px;
}

#contact_rightcolumn {
    border:solid 0px red;
    float:right;
    width:260px;
}

#gallery_table {height:285px;}

#directions_map {
    background: url(../images/directions/map5.png) 0 0 no-repeat; 
    width:232px; 
    height:230px; 
    border:solid 1px #999999;
}

#directions_map_input {
    border-width:0px 1px 1px 1px;
    width:232px; 
    border-style:solid; 
    border-color:#999999;
}

#directions_map_width {
    width:40px;
}

.contact_form {
    font-family:Tahoma,Arial, Sans-Serif;
    font-size: 11px;
}

#contact_table {
    border: 0px solid #aaaabb;
    margin:0px;
    padding:0px;
    color:white;
    width:100%;
    text-align:left;
}

#outandabout_table {
    border: 0px solid #aaaabb;
    margin:0px;
    padding:0px;
    color:white;
    width:100%;
    text-align:left;
}

#textarea_size {
    width:250px;
    height:170px;
}

.black {color:Black;}

.red {color:Red;}


/* This will be the same size as the width of your drop shadow box. The margin styles cause the container to be centered */
#tariff_container {
	width: 172px;
	margin-left: 0px;
}
/* This is the top of the shadow. You want to make sure your background does not repeat, and the height is exactly the same as the image you cropped for the bg*/
#tariff_top {
    background-image: url('../images/tariff/mysprite.gif');
    background-position: -0px top;
    height: 15px;
	border:0px solid red;
	padding:10px 0px 0px 70px;
	color:#fff
}
/* This is where your content will go. You apply the "repeat y" style so that your background image repeats down with your content. You can put additional divs for columns or whatever you want in here, just remember to use the clear class on either a div or br element before your footer to avoid gaps in IE */
#tariff_content {
    background-image: url('../images/tariff/mysprite.gif');
    background-position: -172px top;
    border:0px solid green;
    padding:0px 0px 0px 10px;
    height:72px;
}
/* This is the bottom of the shadow. Same with the top, you want the div to be the same height as the image you cropped */
#tariff_bottom {
    background-image: url('../images/tariff/mysprite.gif');
    background-position: -344px top;
	height: 25px;
}


/* This will be the same size as the width of your drop shadow box. The margin styles cause the container to be centered */
#outandabout_container {
	width: 428px;
	margin-left: 0px;
	text-align:center;
}
/* This is the top of the shadow. You want to make sure your background does not repeat, and the height is exactly the same as the image you cropped for the bg*/
#outandabout_top {
    background-image: url('../images/outandabout/mysprite.gif');
    background-position: -0px top;
	height: 15px;
	border:0px solid red;
	padding:10px 0px 0px 0px;
	color:#fff;
}
/* This is where your content will go. You apply the "repeat y" style so that your background image repeats down with your content. You can put additional divs for columns or whatever you want in here, just remember to use the clear class on either a div or br element before your footer to avoid gaps in IE */
#outandabout_content {
    background-image: url('../images/outandabout/mysprite.gif');
    background-position: -428px top;
    border:0px solid green;
    padding:0px 0px 0px 7px;
}
/* This is the bottom of the shadow. Same with the top, you want the div to be the same height as the image you cropped */
#outandabout_bottom {
    background-image: url('../images/outandabout/mysprite.gif');
    background-position: -856px top;
	height: 25px;
}


/* This will be the same size as the width of your drop shadow box. The margin styles cause the container to be centered */
#directions_container {
	width: 208px;
	margin-left: 0px;
}
/* This is the top of the shadow. You want to make sure your background does not repeat, and the height is exactly the same as the image you cropped for the bg*/
#directions_top {
    background-image: url('../images/directions/mysprite.gif');
    background-position: -0px top;
	height: 15px;
	border:0px solid red;
	padding:0px 0px 0px 180px;
	color:#fff;
}
/* This is where your content will go. You apply the "repeat y" style so that your background image repeats down with your content. You can put additional divs for columns or whatever you want in here, just remember to use the clear class on either a div or br element before your footer to avoid gaps in IE */
#directions_content {
    background-image: url('../images/directions/mysprite.gif');
    background-position: -208px top;
    border:0px solid green;
    padding:0px 0px 0px 10px;
    height:72px;
}
/* This is the bottom of the shadow. Same with the top, you want the div to be the same height as the image you cropped */
#directions_bottom {
    background-image: url('../images/directions/mysprite.gif');
     background-position: -416px top;
	height: 25px;
}


/* This will be the same size as the width of your drop shadow box. The margin styles cause the container to be centered */
#contact_container {
	width: 178px;
	margin-left: 0px;
}
/* This is the top of the shadow. You want to make sure your background does not repeat, and the height is exactly the same as the image you cropped for the bg*/
#contact_top {
    background-image: url('../images/contact/mysprite.gif');
    background-position: 2px top;
    background-repeat:no-repeat;
    height : 15px;
    border:0px solid red;
    padding:0px 0px 0px 180px;
    color:#fff;
 }
/* This is where your content will go. You apply the "repeat y" style so that your background image repeats down with your content. You can put additional divs for columns or whatever you want in here, just remember to use the clear class on either a div or br element before your footer to avoid gaps in IE */
#contact_content {
    background-image: url('../images/contact/mysprite.gif');
    background-position: -176px top;
    border:0px solid green;
    padding:0px 0px 0px 10px;
    height:35px;
}
/* This is the bottom of the shadow. Same with the top, you want the div to be the same height as the image you cropped */
#contact_bottom {
    background-image: url('../images/contact/mysprite.gif');
    background-position: -354px top;
	height: 25px;
}



#room1,#room2,#room3,#room4,#room5 {
    width:40px;
    height:30px;
    display: block;    
}

#room1 {
    background-image: url('../images/rooms/mysprite_rooms.gif');
    background-position: left -0px;
}
#room2 {
    background-image: url('../images/rooms/mysprite_rooms.gif');
    background-position: left -30px;
}
#room3 {
    background-image: url('../images/rooms/mysprite_rooms.gif');
    background-position: left -60px;
}
#room4 {
    background-image: url('../images/rooms/mysprite_rooms.gif');
    background-position: left -90px;
}
#room5 {
    background-image: url('../images/rooms/mysprite_rooms.gif');
    background-position: left -120px;
}



#image1,#image2,#image3,#image4,#image5,#image6,#image7,#image8,#image9,#image10,#image11,#image12,#image13,#image14,#image15,#image16,#image17,#image18,#image19,#image20 {
    width:40px;
    height:40px;
    display: block;    
}

#image1 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -0px;
}
#image2 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -40px;
}
#image3 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -80px;
}
#image4 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -120px;
}
#image5 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -160px;
}
#image6 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -200px;
}
#image7 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -240px;
}
#image8 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -280px;
}
#image9 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -320px;
}
#image10 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -360px;
}
#image11 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -400px;
}
#image12 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -440px;
}
#image13 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -480px;
}
#image14 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -520px;
}
#image15 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -560px;
}
#image16 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -600px;
}
#image17 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -640px;
}
#image18 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -680px;
}
#image19 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -720px;
}
#image20 {
  background-image: url('../images/gallery/mysprite_gallery.gif');
  background-position: left -760px;
}

#table_tariff {
     border: 0px solid #aaaabb;
     margin:0px;
     padding:0px;
     width:100%;
     text-align:left;
     color:White;
}

#table_directions {
    border: 0px solid #aaaabb;
    margin:0px;
    padding:0px;
    width:100%;
    text-align:left;
    color:White;
}