﻿body {
background: url(/images/background.jpg) top left repeat-x #fff;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 200;
line-height: 1.5em;
color: #000 rgb (0,0,0) ;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
overflow-x: hidden; 
}

body#xtra {
background: #fff;
}

/* =====================SCROLL BARS ====================== */
/*First I set the dimensions of the scrollbar itself. The width will apply to the vertical bar and the height applies to the horizontal.*/
::-webkit-scrollbar {
background:  #3F4433/* rgb (148,185,211) */;
width: 10px;
height: 8px;
}

/*Next up is the track, the part of of the scrollbar behind the handle. It’s possible to use other webkit features such as box-shadow and border-radius:*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px #000;
-webkit-border-radius: 10px;
border-radius: 10px;
}

/*Finally I setup the “thumb”, the handle part of the scrollbar:*/
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background:#000;
-webkit-box-shadow: inset 0 0 3px #000;
}

/*I used the selector :horizontal for this part so that I can style the horizontal bar differently from the vertical bar (you can use :vertical too).*/
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #DDD2CC/* #0CA4DE */;
-webkit-box-shadow: inset 0 0 3px silver;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #DDD2CC/* #0CA4DE */;
}

		
/* #Typography
================================================== */
	h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 25px;font-weight: 700;color:#000000;}
	h1 a { font-weight: inherit; color: #000; }
	
	h1 span{color: #992D29;}/*this is so Cutting Edge has colour*/
	
	/* p.promote {font: 22px verdana,arial,helvetica,sans-serif;
	color: #B13500;line-height: 28px;  margin-bottom: 2px;text-align: center;}  */
		
	h2{font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 700;color:#000;}
	h2 a { font-weight: inherit; color: #000; }	
	h3 { color: #000; font-family: 'Open Sans', sans-serif; font-size: 14px;color:#000; font-weight: 600;}
	h3 a { font-weight: inherit; color: #000; }
	/* h4 {font: 13px 'times new roman', times, serif;color: #000;font-style: italic;	line-height: 18px;}
	h4 a { font-weight: inherit; color: #1D393D; } */
	
	h4 {color: #000;	font-family: 'Open Sans', sans-serif;font-weight: bold; font-size: 14px; padding: 4px 5px;}
	h4 a { font-weight: inherit; color: #000; }
	
	h6 {color: #000;	font-family: 'Open Sans', sans-serif;font-weight: normal; }
	h6 a { font-weight: inherit; color: #000; }

/* #Links
================================================== */
	a, a:visited { color:#000 ; text-decoration: underline;  }/*links in the text*/
	a:hover, a:focus { color: #ccc; text-decoration: none;}
	p a, p a:visited { line-height: inherit; }
	a.link, .lighti { font-size: 12px; font-weight: normal; text-decoration: none; color: #777; font-style: italic; }
	a.linkbg { font-size: 12px; text-decoration: none; color: #fff; background-color: red; padding-bottom: 2px; padding-top: 3px; padding-left: 5px; padding-right: 5px;}
	a.titlelink { font-size: 11px; font-weight: normal; text-decoration: none; color: #999; font-style: normal; }
	a.link span, a.link:visited span { font-size:13px; line-height:12px; }
	
	#keen{width: 1100px;margin: 20px auto;text-align: center;}
	#keen a, #keen a:link { font-size: 10px; text-decoration: none;color: #000;} 
	#keen a:visited {font-size: 10px; text-decoration: none; color: #000; text-decoration: none;} 
	#keen a, #keen a:hover {color: #ccc; text-decoration: underline;} 
	
	#ufwus span a, #ufwus span a:link { font-weight: bold; font-family:'Open Sans', sans-serif; font-size: 12px; text-decoration: none; color: #BA0808;} 
	#ufwus span a:visited {font-size: 12px; text-decoration: none; color: #BA0808; text-decoration: none;} 
	#ufwus span a, #ufwus span a:hover {color: #ccc; text-decoration: underline;} 
	/* =======keen div=============== */
	#keen p{text-align: center;color: #000;font-family:'Open Sans', sans-serif;font-size: 10px;}
	
	/* #num{
	position: absolute;
	top: 190;
	left: 10;

font-family: 'Open Sans', arial, sans-serif;
font-weight: 700;
font-size: 40px;
color: #fff;
padding: 0 10px 10px 0;
} */


	a[href^="tel:"] {text-decoration: none;}/* this is for tap phone number */
	a.phone, a.phone:visited { color:#fff ; text-decoration: none;}
	a.phone:hover, a.phone:focus { color: #ccc; text-decoration: none;}
	/* .phone {padding: 0 10px}; */
	
	#ufwus a[href^="tel:"] {text-decoration: none;}/* this is for tap phone number */
	#ufwus a.phone, a.phone:visited { color:#000; font-weight:300; text-decoration: none;}
	#ufwus a.phone:hover, a.phone:focus { color: #ccc; text-decoration: none;}
	
	#footer a[href^="tel:"] {text-decoration: none;}/* this is for tap phone number */
	#footer a.phone, a.phone:visited { color:#000; text-decoration: none;}
	#footer a.phone:hover, a.phone:focus { color: #ccc; text-decoration: underline;}
	
/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 20px; }
	ul { list-style: square outside; color: #000; }
	ul.check { list-style: none; }
	ul.check li { background: url('/images/tiles/tick.png') no-repeat; padding-left: 25px;}
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 100%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 16px; margin-bottom: 12px; } /* XXXXXXXXXXXXXXXXXXXXXXX lineheight was 18px */		

/* ===============SOCIAL ICONS=============================== */
.socialholder { /*float: right; width: 100px; text-align:center; padding-right: 10px;  margin-top: 10px; background: pink; */
float: right;
width: 700px;
background: transparent;
 }

.socialicons { float: right; margin: 0; padding: 0; }
	.socialicons li { float: left; display: inline; margin: 0; padding: 0; margin-right: 5px; }
	.socialicons li:last-child { margin-right: 0; }
	.socialicons div { display: none; float: left; text-align: center; width: 120px; position: absolute; margin-top: -15px; margin-left: -47px; font-size: 11px; line-height: 11px; color: #777; text-shadow: 1px 1px 0px #f5f5f5; font-style: italic; }
	.socialicons li a { float: left; width: 26px; height: 26px; background-position:top; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; }
	.socialicons li a:hover { background-position:bottom; }
	/* .social_twitter { background: url('/images/social/social_twitter.png') no-repeat; } */
	.social_facebook {background: url('/images/social/social_facebook.png') no-repeat; }
		
/* ========================STRUCTURE===================== */
.stickybackground { position: fixed; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; 
background-image: url(/images/grass.png);
background-position: bottom left;
background-repeat: repeat-x;
}

#pagewrap {
width: 1100px;
margin: 20px auto;
border: none/* solid 1px blue */;
background: #F0F7FD;
}

#header {
padding-top: 10px;
background-color: #51A3E6;
height: auto;
}

#header img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}

#headerxtra {
background:red;
height: 5px;
}

/* #header p.headtitle{
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 25px;font-weight: 700;color:#000;
}

#header span{
float: right;
}
 */
#header img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

/* =================CART================ */
#cart{/* cart at top of header */
/*background: url(/images/cart.png) bottom left no-repeat #000;*/
background:#000;
height: 40px;
}

#cart p{
font-family: Arial,"Open Sans", Helvetica,  sans-serif;font-size: 12px;font-weight: 600;color:#fff;
padding-top: 10px;/* padding-left: 50px */; 
}

#cart span{background-color: #E7442E;/* padding:10px 10px 5px 10px; */}

#cart a:link{color: #fff; text-decoration:none;} 
#cart a:hover {color: #ccc; text-decoration: underline;} 

#cart img{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
float: left;
}
/* ================================= */
#ufwus {
/* min-height: 900px; */
background:transparent;
width: 765px;
float: left;
padding: 0px 10px;
color:  #000 rgb (0,0,0);
}

#ufwushop { /* this is for the shop page */
/* min-height: 900px; */
background:transparent;
width: 98%;
padding: 0px 10px;
}

div.menucont{
background-color: #D9EBFA;
}


body#xtra#ufwus {
/* min-height: 900px; */
background:transparent;
width: 765px;
float: left;
padding: 0px 10px;
}

body#xtra#pagewrap {
/* min-height: 900px; */
background:blue;
width: 765px;
float: left;
padding: 0px 10px;
}

#ufwus p.message{
color: #9A0020;
font-weight: bold;
}

#ufwus img {
margin: 3px 4px;
border: solid 1px #000;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

#ufwus img.noborder {
border: none;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

hr.spacer{
border-color: transparent;
height:2px; 
visibility:hidden; 
margin-bottom:-1px;
clear: left;
}
/*=============PRODUCTS BOX==========*/
#products {
width: 290px;
padding: 0;
margin-top: -18px;
float: left;
height: auto; 
/* overflow: auto; */
overflow: hidden;
}

#products li.title{
font-family: 'Open Sans', arial, sans-serif;
font-weight: bold;
font-size: 20px;
background-color: #E7442E;
color: #fff;
padding-top: 10px; 
padding-bottom: 10px;
/* margin-bottom: 14px; */
}

#products ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: 'Open Sans', arial, sans-serif;
font-weight: bold;
font-size: 18px;
background-color: #fff
/* border: solid 1px #000; */
}

/* #products ul ul
{
font-weight: 900;
font-size: 16px;
} */

#products a:link {
margin-bottom: -10px;
display: block;
padding: 10px ;
/* width: 269px; */
background-color: #fff;
border-bottom: 1px solid #000;
}

#products a:link, #prodlist a:visited
{
color: #000;
text-decoration: none;
}

#products a:hover
{
background-color: #C6E1F7;
color: #000;
}


/* 
p.productsheading{
margin-top: 0;
padding: 0;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
}

#products p.title{
font-family: arial, 'Open Sans', sans-serif;
font-weight: 800px;
font-size: 20px;
background-color: #E7442E;
border-bottom: solid 1px #000;
color: #fff;
padding-top: 6px; padding-bottom: 6px;
margin: 0;
}

#products ul{
display: block;
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: arial, 'Open Sans', sans-serif;
font-weight: 800px;
font-size: 20px;
color: #000;
}

#products li{
border-bottom: solid 1px #000;
}

#products ul li ul li{
margin-left: 20px;
border-bottom: solid 1px #000;
}

#products a:link{
display: block;
width: 280px;
text-decoration: none;
}

#products li:hover{
text-decoration: none;
background: pink;
color: #ccc;
}

#products a:visited{
text-decoration: none;
}

#products p.desc{
margin-top: 0;
line-height: 1.3em;
}
 */



input.read{/* for readonly inputs */
background-color: transparent/*  #EBECEB */;
border: none;
}

#wrap {
position: relative;
/* padding: 5px 27px; */
background:transparent;
height: auto;
clear: both;
}

#wrap hr.rule{
border-color: #fff;
height: 1px;
margin: 0 10px;
/* clear: both; */
}


/*============Google maps===================*/ 
 .google-maps {
        position: relative;
        padding-bottom: 3%; 
        height: 300px;
        overflow: hidden;
		clear: both;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
	
.google-maps2 {
        float: right;
        padding-bottom: 3%;
        height: 300px;
        overflow: hidden;
		text-align: right;
		clear: both;
    }
    .google-maps2 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height:100% !important;
    }	

/*=============FOOTER==========*/
#footer {
clear: both;
padding: 10px; 
background-color: transparent/* #000 */;
/* margin-top: -18px;
border-top: solid 1px #000; */
font: 11px arial, helvetica, sans-serif;
line-height: 18px;
text-align: right;
color: #000;	
}

/* #footer a:link{
color: #fff;
text-decoration: none;
} */

#footer a, #footer a:link { 
 color:  #000;   
 text-decoration: none;
} 

#footer a:visited { 
 color:  #000;   
 text-decoration: none;
} 

#footer a, #footer a:hover { 
 color: #ccc;
 text-decoration: underline;
} 

h3.copyright{
text-align: center;
}

#footer span.copy{
float: left;
text-align: left;
}

/* =====================FORMS AND TABLES============== */


/* Features	 */

table.listing { 
  width: 650px; 
  border-collapse: collapse;
background-color: transparent; 
}
/* alt rows */
table.listing tr:nth-of-type(odd) { 
background-color: transparent; 
}
table.listing th {
background-color: transparent;  
  color: #fff/* white */; 
  font-weight: bold; 
}
table.listing td, th { 
background-color:transparent ;
  padding: 6px; 
 /*  border: 1px solid #ccc;  */
  text-align: left; 
}

/* ================================================ */

/* CONTACT FORM  TABLE	 */

table.contact { 
  width: 100%; 
  border: solid 1px #000;
  border-collapse: collapse; 
}

table tr.alt{
background-color: #EBECEB;
}

/* =============BUTTONS============== */
	  
/* ==================Buy/Cart  button================ */
.bbutton{
		-moz-border-radius: 8px; 
		-webkit-border-radius: 8px;
		border-radius: 8px; 
		background: #248616; 
		border: 0;
		border: 2px solid/*  #fff */;
		border-color:#ccc #fff #fff #ccc;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 6px;
		color: #fff;
		display: inline-block;
		font-size: 12px;
		font-weight: bold;
		font-style: normal/* italic */;
		text-decoration: none;
		cursor: pointer;
		/* line-height: 20px; */
		font-family: Helvetica, Arial, sans-serif; 
		margin-left: 10px;
		}

.bbutton:visited{color: #fff;}		
	
input.bbutton:hover{
	  color: #fff;
	  background: #992D29;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.bbutton:active{
	  color: #fff;
	  background: #992D29; 
	  /*-moz-box-shadow: inset 0px 0px 0px 1px #fff;
	  -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
	  -box-shadow: inset 0px 0px 0px 1px #fff;*/}
/* ------------------------------------	 */  
	  .cbutton{
		-moz-border-radius: 8px; 
		-webkit-border-radius: 8px;
		border-radius: 8px; 
		background: #991921; 
		border: 0;
		border: 2px solid/*  #fff */;
		border-color:#ccc #fff #fff #ccc;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 6px;
		color: #fff;
		display: inline-block;
		font-size: 12px;
		font-weight: bold;
		font-style: normal/* italic */;
		text-decoration: none;
		cursor: pointer;
		/* line-height: 20px; */
		font-family: Helvetica, Arial, sans-serif; 
		/* margin-left: 10px; */
		}

.cbutton:visited{color: #fff;}		
	
input.cbutton:hover{
	  color: #fff;
	  background: #992D29;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.cbutton:active{
	  color: #fff;
	  background: #992D29; 
	  /*-moz-box-shadow: inset 0px 0px 0px 1px #fff;
	  -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
	  -box-shadow: inset 0px 0px 0px 1px #fff;*/}

	  /* ==================Big Go================ */
.gbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #7DC44D; 
		border: 0;
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 10px 20px;
		color: #000;
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		font-style: normal/* italic */;
		text-decoration: none;
		cursor: pointer;
		line-height: 20px;
		font-family: Helvetica, Arial, sans-serif; 
		}
		
input.gbutton:hover{
	  color: #fff;
	  background: #000;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.gbutton:active{
	  color: #fff;
	  background: #ccc; 
	  /*-moz-box-shadow: inset 0px 0px 0px 1px #fff;
	  -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
	  -box-shadow: inset 0px 0px 0px 1px #fff;*/}
	  
/* ======================================================== */
.nbutton{
		-moz-border-radius: 8px; 
		-webkit-border-radius: 8px;
		border-radius: 8px; 
		background:transparent; 
		border: 0;
		border: 1px solid/*  #fff */;
		border-color:#ccc #fff #fff #ccc;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 2px;
		color: #000;
		display: inline-block;
		font-size: 12px;
		font-weight: bold;
		font-style: normal/* italic */;
		text-decoration: none;
		cursor: pointer;
		/* line-height: 20px; */
		font-family: Helvetica, Arial, sans-serif; 
		margin-left: 3px;
		}

div.menucont.nbutton:visited{color: #fff;}		
	
div.menucont input.nbutton:hover{
	  color: #fff;
	  background: #992D29;
	  /* text-shadow: 0px 1px 0px #fff; */}

	div.menucont a:hover.nbutton:active{
	  color: #fff;
	  background: #992D29; 
	  /*-moz-box-shadow: inset 0px 0px 0px 1px #fff;
	  -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
	  -box-shadow: inset 0px 0px 0px 1px #fff;*/}
/* ------------------------------------	 */ 
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* ===================for 980px or less =======================*/
@media screen and (max-width: 1040px) {
/* h1{font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 18px; font-weight: 800;color:orange;} */	
#pagewrap {width: 94%;}
#products{display: none;}
#ufwus {	background: transparent; width: auto/* 81% */; padding: 1% 4%;}
/* #header {height: auto; /* background: yellow; */} */
/* #header img {max-width: 35%;height: auto;width: auto\4; ie8} */
h1 {line-height:30px;}

#sitemap {width: 290px;}
#reservation {width:200px; adding: 5px 20px;}
#tripadvisor {width: 290px;padding: 5px 20px;}

/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
		
	}	
/* Hide table headers (but not display: none;, for accessibility) */
	table.listing { 
  display: block; 
  width: 95%;
		Border: none;
		/* background: pink; */
}
	
	
	
	table.listing thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.listing tr { border: none/* 3px solid #000 */; }
	
	table.listing td { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 6px solid green; */ 
		position: relative;
		padding-left: 1%; 
	}
	
	table.listing td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		/* top: 6px;
		left: 6px; */
		width: 2%/* 20% */; 
		/* padding-right: 10px;  */
		white-space: nowrap;
		/* background-color: red; */
	}
	
	
	/*
	Label the data*/
	
	table.listing td:nth-of-type(1):before { content: ""; font-weight: bold;}
	table.listing td:nth-of-type(2):before { content: ""; font-weight: bold;}
	table.listing td:nth-of-type(3):before { content: ""; font-weight: bold; }
}
/*================ for 700px or less======================= */
@media screen and (max-width: 600px) {
#pagewrap {width: 94%}
#ufwus{width: auto;	float: none;clear: left;}
/* #header {background: transparent;padding: 1% 4%;height: auto;}  */
p.caption {display: none;}	
#keen{width:90%;text-align: left;}
}

/* ============for 480px or less =================*/
@media screen and (max-width: 480px) {


#ufwus {background: transparent;}

div.ls img {margin: 0;}
div.pt img {margin: 0;}

h1 {line-height:30px; text-align: center;}
div.phone{background: #000; height: 50px;  }
div.phone span{font-size: 25px;font-weight: 600; }

#products {
display: none;
/* width:100%;
overflow: hidden; */
}

#header {
/* padding-top: 10px;
 background: url(/images/logo.png) bottom left no-repeat #51A3E6;  */
 height: auto;
/* height: 45; */
}



#footer{text-align: center;}
#footer span.copy{/* float: none;  */text-align: center;}

.google-maps {margin-left: 20px;width:90%;}
.rslides1_nav {display: none;}
.rslides img {display: block;height: auto;width: 100%;margin-top: -10px;}
#keen{width:90%;text-align: left;}
  
}