@import 'menu.css';




@font-face {
    font-family: "AAgency FB";
    src: url(/AGENCYR.TTF);
}









body {
	background:#ffffff url('/images/blackred.png') repeat-x;
	margin:0
}
table {
	border-collapse: collapse;
	font-size: inherit;
	color: inherit;
	width: 100%; 
}
td {
	vertical-align: top;
} 
th{
	background-color: #333;
	color:#fff;
	text-align: left;
	padding: 10px 2px;
}
th a, .text th a:link, .text th a:visited {
	color: #fff;
}
img {
	border: 0;
	max-width: 100%; 
}
 h1 { 
		font-family:  arial, verdana, helvetica; 
		font-size: 16px; 
		font-weight: bold; 
		color: #606060
}
 h2 { 
		font-family:  arial, verdana, helvetica; 
		font-size: 15px; 
		font-weight: bold; 
		color: #606060
}







.text { font-family:  arial, verdana, helvetica; font-size: 16px; font-weight: normal; color: #606060;
line-height: 150%;
 }
.text a {    color: #26557a ; text-decoration: none}
.text a:hover { color: #9C4218 ;}


.btext { font-family: arial, verdana, helvetica; font-size: 12px; font-weight: normal;  color: #606060}
.btext a:link { font-family:  arial, verdana, helvetica; font-size: 12px; font-weight: normal;  color: #606060; text-decoration: none}
.btext a:visited { font-family:  arial, verdana, helvetica; font-size: 12px; font-weight: normal;  color: #606060; text-decoration:none}
.btext a:hover { font-family: arial, verdana, helvetica; font-size: 12px; font-weight: normal; color: #000000; text-decoration: underline }
.btext h1 { font-family:  arial, verdana, helvetica; font-size: 16px; font-weight: bold; font-style:italic; color: #606060}
.btext h2 { font-family:  arial, verdana, helvetica; font-size: 14px; font-weight: bold; color: #606060}
.btext {line-height: 150%; }

.redtext { font-family:  arial, verdana, helvetica; font-size: 12px; font-weight: normal; color:#FF0000}




.header {
	border-collapse: collapse;
	max-width: 960px;
	min-height: 103px;
	margin: auto;

} 
.header td{
	border: 0;
	padding: 0;
	margin: 0;
}




input, textarea, select {
	font-family: Arial, Helvetica, sans-serif, Sans;
	font-size: 15px;
	border-radius: 5px;
	padding: 7px;
	border: 2px solid #EE3224;
	background-color: #fff;
	max-width: 80vw;
	width: 150px; 
} 
input[type=button], input[type=submit], input[type=reset] {
	margin-top: 15px;	
}

.btext input, .btext textarea, .btext select {
	width: auto; 
}

td {vertical-align:top}



p.pagehead {text-decoration:none; font-size:16px; font-weight:650; font-family:georgia, tahoma, verdana, arial; color: #ffffff;}




#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto; max-width: 80vw;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; 
	max-width: 90vw;
}
#imageContainer{ padding: 10px; 
	max-width: 90vw;
}

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; 
	max-width: 90vw;
}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }










.grey{
	padding: 30px;
	background-color: #262626;
	min-height: 270px; 
	margin-top: 60px; 
	}
.botlinks{

	margin: auto;
	font-family: Calibri, Arial, sans-serif;
	font-size: 16px;
	color: #bbb; 
	display: flex;
flex-flow: row wrap;
justify-content: center;
} 
.botlinks a{
	color: #bbb;
	text-decoration: none; 
}
.botlinks a:hover{
	text-decoration: underline;
	color: #fff;
}	
.address a{
	color: #ccc;
} 
.botlinks > div {
	width	: 350px;
}

#maintable {
	border-collapse: collapse;
	border: 0;
max-width	: 960px; 
} 
#maintable td {
	padding: 5px;
}
#container {
	margin: auto;
max-width	: 960px;
} 
.logo {
max-width	: 393px;
}
.pricelinks {
	text-align: center;
	margin: auto;
	background-color: #000;
	font-family: Agency FB, Arial Narrow;
	font-size: 26px; 
	transition: 1s; 
	line-height: 50px; 	
}	
.pricelinks a{
	color: #fff;
	padding: 14px 15px 11px 15px; 
	text-decoration: none; 
}
.pricelinks a:hover{
	background-color:#EE3224;
}

.toplinks {
max-width	: 560px;
	float: right;
	height: 80px;
	font-family: trebuchet ms, arial, helvetica, sans-serif;
	text-align: right;
}	
.toplinks a{
	color: #ffffff;
	font-size: 16px;
	padding: 10px 6px;
	text-decoration: none; 
	line-height: 40px; 
	white-space: nowrap;
}
.toplinks a:hover{
	background-color: #000; 
}








#plug-and-play {
	display:none;  
	overflow: hidden;
	border:15px solid black;
	border-radius: 10px; 
}
 .slide{
	overflow: hidden;
	height: 469px;

}
.slide p {
	float: right;
	margin: 20px;
	font-family:Arial, Helvetica, sans-serif, sans;
	font-size: 14px;
	color: #fff;
	max-width	: 250px; 
}

.slide .large {
	float: right;
	margin: 20px;
	font-family:Arial, Helvetica, sans-serif, sans;
	font-size: 16px; 
	color: #000;
max-width	: 250px; 
	font-weight: bold;
}
.logodiv {
	position:absolute;
	bottom		: 15px;
	right	: 15px;
	opacity:0.8;
	filter:alpha(opacity=80);
	height: 61px;
max-width	:248px ;
	z-index: 1;

}
	
	

#plug-and-play .slide-container{}
#plug-and-play .separator{  }
#plug-and-play .control{ cursor:pointer;  overflow: hidden; visibility: hidden; height:0}
// #plug-and-play .control-container{  }
#plug-and-play .control-active{text-decoration:underline;}
#plug-and-play .control-hover{text-decoration:underline; font-weight:bold;}

#dss {display:none;border:2px solid black;background:#8888ff}
#dss .slide{background:#ff8888;font-size:12px;font-family:Tahoma;border:1px solid red; margin:5px; padding:5px;}
#dss .slide-container{}
#dss .separator{border:2px solid #22cc22;}
#dss .control{font-size:10px; width:12px; cursor:pointer;}
#dss .control-container{background:#88ff88;}
#dss .control-active{text-decoration:underline;}
#dss .control-hover{text-decoration:underline; font-weight:bold;}





#map_wrapper {
    height: 600px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}
#street-view {
	width: 100%;
    height: 600px;
	max-height: 100vw;
}
.info_content{
max-width	: 300px;
	height: 300px;
} 
.info_content img {
	border: 0;
	max-width: 170px;
	max-height: 170px;
}
.blackadmin{
	height: 40px;
	text-align: center;
	font-family: arial, sans-serif;
	color: #fff;
	font-size: 15px;
	background-color: #000; 
	line-height: 40px;
}
.blackadmin a{
	padding: 13px 10px 12px 10px;
	color: #fff !important;
}
.blackadmin a:hover{
	background-color: #ee3224
} 
.creamone td{
	background-color: #eee;
	padding: 10px 10px !important; 
}
.creamtwo td{
	background-color: #ddd;
	padding: 10px 10px !important; 
}
.creamone a, .creamtwo a, .calone a, .caltwo a, .calname a {
	color: #000 !important;
	text-decoration: none; 
}
.creamone , .creamtwo, .calone , .caltwo, .tabletopmain {
	color: #000;
}









#calen{
max-width	: 600px;
	margin: auto;
}
table#cal { text-align: center;
	background-color: #000;

}
table#cal td{
	border: 1px solid #ccc;
}






.addtext {
	font-size: 12px;
}

#av td {
	border: 1px solid #999;
	padding: 2px 5px;
}
#av tr {
	background-color: #EDEDED;
}
#isavail,#avail {
	background-color: #ccc;
	color: #000;
	text-align: center;
}
#notavail,#booked {
	background-color: #ee3224;
	color: #fff;
	text-align: center;
} 


td.tabletop {
	background-color: #ee3224;

} 
.tabletopmain td {
	background-color: #303030;

} 
.tabletopmain td, td.tabletop {
	text-align: center;
	font-size: 13px;
	color: #FFF;
	padding-top: 10px;
	padding-right: 3px;
	padding-bottom: 10px;
	padding-left: 3px;
} 
.tabletext td {
	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 3px;
} 
.calname {
	width: 100px;
	padding: 5px 15px 5px 15px !important;
	color: #fff;
	text-align: left !important;
	font-weight: bold;
	font-size: 14px !important;
}
.calone td, .calone{
	padding: 10px 2px;
	background-color: #ccc;
	text-align: center;
	font-size: 13px;
	height: 20px;
	color: #000;
}
.caltwo td, .caltwo{
	padding: 10px 2px;
	background-color: #ddd;
	text-align: center;
	font-size: 13px;
	height: 20px;
	color: #000;
}

.dummy td {
	height: 25px;
	width: 25px; 

}
.dummy #booked, .dummy #avail{
	width: 25px !important;
	height: 25px !important;
	border: 1px solid #1a4123;
	line-height: 0px; 
}

.full {
	width: 90%;
	color: #000;
	margin-left: 50px;
	margin-bottom: 10px; 
}
.full td {
	padding: 5px; 
}
.oops {
	font-size: 150px;
	float: right;
	line-hight: 150px;
	color:#fff;
}

.months {
	width: 35%;
} 
.calendar {
	text-align: center;
max-width	: 250px; 
	margin: auto; 
} 
.calendar table, .caladmin table, .multicalendar table {
	margin: 0;
}
.caladmin table {
	border: 10px solid white;
}
.multicalendar {
	text-align: center;
	width: 100%; 
	margin: auto; 
} 
.caladmin {
	text-align: center;
max-width	: 450px; 
	margin: auto; 

} 


.calheading td{
	padding: 5px 15px 5px 15px;
	background-color: #ee3224;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
}
.calname{
	color: #333 !important
}


 #mapCanvas {
    max-width: 700px;
    height: 400px;
  }
  #infoPanel {

    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
.pictures{
	display: flex;
 	flex-flow: row wrap;
    justify-content: center;
	margin: auto; 
	border: 5px solid white;
}
.pictures > div {
	flex: 1 1 auto;
	position: relative;
	width:250px;

	padding	: 0; 
	border: 5px solid white;
	max-width: 500px;
}
.pictures > div.smallpic img{
	object-fit: none ;
    justify-content: center;
}

.moredetails{
	position: relative; 
}
.details {
	display: none; 	
	padding-bottom: 40px; 
}
.checkmark {
	display: block;
	height: 50px;
	width: 200px; 
	pointer-events: none; 
	margin: auto;
	position: absolute;
	top: 0; 
	left: 0; 
	font-size: 20px;
	font-weight: bold; 
 	color: #EE3224;
}
.checkmark span:nth-child(2) {
	display: none;
}



.moredetails input:checked ~ .checkmark span:nth-child(2) {
	display: inline;
}
.moredetails input:checked ~ .checkmark span:nth-child(1) {
	display: none;
}


.moredetails input:checked ~ .details {
    display: block; 
    opacity: 1;

}
.moredetails  input {
 position: relative;
	opacity: 0; 
  cursor: pointer;
  height: 50px;
  width: 200px; 
	border: 4px solid white; 
}
.firstdetails {
	background-color: #EE3224;
	color: #fff;
	padding: 20px 50px;
	margin-bottom: 30px; 
	font-size: 20px; 
}
.bigpicture {
	background-size: cover;
	background-position: center center;
	height: 100%;
}
.gallery-cell {
	width: 100%;
	height: 500px;
	max-height: 50vh;
	margin-right: 10px;
}
.slideshow2020 {
	position: relative;
	border: 15px solid black;
}
.ombudsman{
	text-align: center;
	padding: 3vw; 
}








@media only screen and ( min-width: 1024px ) {
#maintable  .search div{
	text-align: right; 	
	padding: 7px 0;
}	
.proplinks{
	text-align: right; 
}
.threehundred {
	width: 300px; 
}
.slideshow2020 {

	margin: 20px; 
}
}


@media only screen and ( max-width: 1024px ) {
body{
	background-color: #fff;
	background-image: none;
	margin: 0; 
}
.header{
	border-bottom: 15px solid black; 
}
.logo {
	float: none; 
	margin: auto;
	text-align: center; 
	width: 100%; 
	background-color: #EE3224;
	max-width: 100%; 
	
}
.toplinks, .pricelinks{
	background-color: #000;
	width: 100%;
	text-align: center; 
	margin: auto;
	float: none;
	max-width: 100%; 
	height: auto; 
	display: none;
}
#maintable  td {
	display: block;
	width: auto; 
}
#maintable  td:nth-child(1) {
	padding: 20px;
}
#maintable  .search  div{
	width: auto !important; 
	flex: 1 1 auto;
	padding: 5px 20px; 
}
#maintable  .search{
	display: flex;
	width: auto !important; 
 	flex-flow: row wrap;
	background-color: #EE3224;
	color: #fff;
	
}
#maintable  .search form{
	display: flex;
 	flex-flow: row wrap;
}
.proplinks{
	text-align: center; 
}
.threehundred {
	text-align: center; 
}
.header{
	background-color: #EE3224;
}
}






@media only screen and ( max-width: 640px ) {
.pictures > div > span {
	display: block;
}
input, textarea, select {
	max-width: 100%;
	width: 100%; 
} 
} 


@media only screen and (min-width: 640px) {
.pictures > div img{
	object-fit: cover ;
	width: 100%;
	height:  250px;
}
.pictures > div {
	height	: 250px;
}
.pictures > div > span{
	color: #fff;
	background-color: rgba(0,0,0,0.4); 
	z-index: 3;  
	position: absolute; 
	bottom: 0;
	left: 0;
	right: 0; 
	padding: 10px; 
}
}