@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

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

.stickybackground { position: fixed; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; 
background-image: url(/images/background.jpg);
background-position: top right;
background-repeat: no-repeat;}

/* background-image: url(/images/right.jpg), url(/images/left.jpg);
background-position: top right, top left;
background-repeat: no-repeat;} */

/* =====================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: #999999 rgb (153,153,153) /* #1D393D rgb (29,57,61)  */;
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: #5275B0 rgb (82,117,176);
-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: #5275B0;
-webkit-box-shadow: inset 0 0 3px silver;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #5275B0 /* #1D393D rgb (29,57,61)  */;
}

		
/* #Typography
================================================== */
	h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif; 	font-size: 1.6em;font-weight: 600;line-height: 1.5em;color: #19374F;/* {font:1.6em verdana,arial,helvetica,sans-serif;color:#19374F;} */}

	/* {font:1.6em verdana,arial,helvetica,sans-serif;color:#19374F;} */
	h1 a { font-weight: inherit; color: #19374F; }
	
	h1.center { color: #19374F; font: 1.6em verdana,arial,helvetica,sans-serif;color:#19374F; text-align: center;}
	h1.center a { font-weight: inherit; color: #19374F; }
	
	/* p.promote {font: 22px verdana,arial,helvetica,sans-serif;
	color: #B13500;line-height: 28px;  margin-bottom: 2px;text-align: center;}  */
		
	h2{font: bold 0.95em verdana,arial,helvetica,sans-serif;color: #2B6088;}
	h2 a { font-weight: inherit; color: #2B6088; }	
	
	h3 { font: bold 0.85em trebuchet ms,verdana,arial,helvetica,sans-serif;color: #19374F;}
	h3 a { font-weight: inherit; color: #19374F; }
	
	h3.center { color: #000; font: 1.6em verdana,arial,helvetica,sans-serif;color:#19374F; text-align: center;}
	h3.center a { font-weight: inherit; color: #19374F; }
	
	h3.smallcenter {
	font: bold 0.85em trebuchet ms,verdana,arial,helvetica,sans-serif;color: #19374F; text-align:center;
	}
	h3.smallcenter a { font-weight: inherit; color: #19374F; }
	
	/* h4 {font: 13px 'times new roman', times, serif;color: #000;font-style: italic;	line-height: 18px;}
	h4 a { font-weight: inherit; color: #1D393D; } */
	
	h4 {background-color: #8B1C2D; color: red;	font-family: 'Open Sans', sans-serif;font-weight: bold; font-size: 14px; padding: 4px 5px;}
	h4 a { font-weight: inherit; color: red; }
	
	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: #A6CD4E; 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 a, #keen a:link {text-align: center; font-size: 10px; text-decoration: none; color: #fff;} 
	#keen a:visited {font-size: 10px; text-decoration: none; color: #fff; 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: #fff;font-family:'Open Sans', sans-serif;font-size: 10px;}
		
/* #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: 6px; } /* XXXXXXXXXXXXXXXXXXXXXXX lineheight was 18px */	
	
	
	/* ===============SOCIAL ICONS=============================== */
.socialholder { float: right; /*width: 60px; text-align:center; padding-right: 6px;*/ margin-top: 25px; 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: 60px; 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_facebook {background: url('/images/social/social_facebook.png') no-repeat; }
	.social_googleplus { background: url('/images/social/social_googleplus.png') no-repeat; }*/ 

	/*============Google maps===================*/ 
 .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
/* ========================STRUCTURE===================== */
#pagewrap {width: 1040px;margin: 0px auto;border: solid 1px #fff;background: #fff;}

#header {background:#fff;padding: 3px 0;height: auto ;}
#header img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}

/* ==============================BOXES================ */
#boxcontainer{
height: 113px;
/* background-color: red; */
text-align: center;
clear: right;
}
.boxes {/* 1/8 page */
    /* float: left; */
	display:inline-block;
	margin:0 auto;
	margin-right: 6px;
    width: 300px;
	height: 113px;
/*background-color: orange #08151E ;*/
border: solid 1px #000;
  }
  
.boxes img{
border: none;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.boxes img:hover
{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}

div.greenbox{
position: relative;
width: auto;
height: 60px;
background: url(/images/slogan.png) top right no-repeat #A6CD4E;
padding: 5px 0 0 5px;
margin: -8px 0 5px 0;
}

.greenbox img:hover
{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}


p.title {
text-align: left;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 0;
color: #000;
}  

/* =========================ufwus======================== */
#ufwus {padding: 0px 25px;background: transparent; /* min-height: 400px; */ clear: both;}
#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 */}

/* ================TESTIMONIALS================ */
hr.testhr{border-bottom: dotted 1px #0090C2;}

#ufwus p.testtitle{color: #0090C2}

a img {border:0}

hr.spacer{border: none;border-top: 1px dotted #ccc;color: #ffffff;background-color: #ffffff;
clear: left;}

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

div.copy{
width: 960px;
margin: 0 auto;
color: #B13500;
}

/*=============FOOTER==========*/
div.footspace{
clear: left;
padding: 6px 15px 0 15px; 
background: #A6CD4E;
/* margin-top: -18px;
border-top: solid 1px #000; */
font: bold 11px arial, helvetica, sans-serif;
text-align: right;
color: #fff;	
}

#footer {
margin: 0 auto;
/* padding: 6px 15px 6px 15px; */ 
text-align: right;
background: #A6CD4E;
padding: 5px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 12px;font-weight: 800;color:#000;
height: 30px;
clear: both;
}
#footer a, #footer a:link {color:  #000; text-decoration: none;} 
#footer a:visited { color: #000; text-decoration: none;} 
#footer a, #footer a:hover { color: #000; text-decoration: underline;} 
#footer span.foot{background-color: #000; float: right;}

#footer span{
float: left;
font: bold 0.90em verdana, arial, helvetica, sans-serif;
 color:  #000;   
} 


p.copyright{font: bold 10px arial,helvetica,sans-serif; color: #fff; text-align: left;}

/* =======================FORMS============== */

/* CONTACT & BOOKING FORM  TABLE	 */
table.contact {width: 100%;border: solid 1px #000;border-collapse: collapse;}
table tr.alt{background-color: #D7EAB2;}
table tr.mainfill{color: #fff;font-weight: bold;background-color: #262616;}


/* =============BUTTONS============== */
.gbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #8DB433; 
		border: 0;
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		/* padding: 5px 20px; */
		padding: 3px 8px 3px 8px; 
		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: #000;
	  background: #ccc;
	  /* 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;*/}

a.gbutton, a.gbutton:visited { color:#fff ; text-decoration: none;  }/*links in the text*/
a.gbutton:hover, a.gbutton:focus { color: yellow; text-decoration: none;}	  
	  
	  

.mbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #CEE39E/* #C9D9DA */; 
		border: 0;
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 4px 8px;
		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; 
		}
		
input.mbutton:hover{
	  color: #000;
	  background: #ccc;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.mbutton: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;*/}


	  
.ybutton{
border:1px solid #CCCCCC; -webkit-border-radius: 0px; -moz-border-radius: 0px;border-radius: 0px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 1px 5px 1px 5px; text-decoration:none; display:inline-block;/* font-weight:bold; */ color: #4A4A4A;
 background-color: #F7F5F6; background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F5F6), to(#DDDDDD));
 background-image: -webkit-linear-gradient(top, #F7F5F6, #DDDDDD);
 background-image: -moz-linear-gradient(top, #F7F5F6, #DDDDDD);
 background-image: -ms-linear-gradient(top, #F7F5F6, #DDDDDD);
 background-image: -o-linear-gradient(top, #F7F5F6, #DDDDDD);
 background-image: linear-gradient(to bottom, #F7F5F6, #DDDDDD);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F7F5F6, endColorstr=#DDDDDD);
}

.ybutton:hover{
 border:1px solid #000;
 background-color: #E0E0E0; background-image: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#BDBBBC));
 background-image: -webkit-linear-gradient(top, #E0E0E0, #BDBBBC);
 background-image: -moz-linear-gradient(top, #E0E0E0, #BDBBBC);
 background-image: -ms-linear-gradient(top, #E0E0E0, #BDBBBC);
 background-image: -o-linear-gradient(top, #E0E0E0, #BDBBBC);
 background-image: linear-gradient(to bottom, #E0E0E0, #BDBBBC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#E0E0E0, endColorstr=#BDBBBC);
}

	 /*  Delete Button */
	 .delbutton{
		-moz-border-radius: 1px; 
		-webkit-border-radius: 1px;
		border-radius: 1px; 
		background: #8B1C2D; 
		border: 0;
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 2px 5px 2px 5px; 
		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; 
		}
		
input.delbutton:hover{
	  color: #fff;
	  background: #000;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.delbutton: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;*/}

	  
	  
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media only screen /* ipad mini landscape */
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
#pagewrap {width: 94%;}
}
/* ============================================= */
@media 
only screen and (max-width: 1024px)  {
table, thead, tbody, th, td, tr {display: block;}
#pagewrap {width: 94%;}
#ufwus {	width: 90%; padding: 1% 4%;}
#footer {padding: 1% auto/* 4% */;	}
p.caption {display: none;}
#header {background: #fff;/* padding: 1% 2%; */height: auto;} 


	/*
	Label the data
	*/
	table.view td:nth-of-type(1):before { content: "Qty:"; font-weight: bold;} 
	table.view td:nth-of-type(2):before { content: "Item:"; font-weight: bold;}
	table.view td:nth-of-type(3):before { content: "Price:"; font-weight: bold; }
	
	table.view td:nth-of-type(4):before { content: "Total:"; font-weight: bold;}
/* 	table.listing td:nth-of-type(5):before { content: "Total:"; font-weight: bold; color: red;} */

.socialholder { float: right; width: 100px; text-align:center; padding-right: 10px; margin-top: 5px; background: transparent; }


} 

/* ===================for 980px or less =======================*/
@media screen and (max-width: 980px) {
	
#pagewrap {width: 94%;}
#ufwus {	width: 90%; padding: 1% 4%;}
#footer {padding: 1% auto/* 4% */;	}
p.caption {display: none;}
#header {background: #fff;padding: 1% 4%;height: auto;} 

div.contactform{
float: left;
width:250px;
height:200px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color:#B13500;
padding: 2px;
font: 1.0em verdana, arial, helvetica, sans-serif;
color:  #fff; 
}

.cbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background-color: #1D393D; 
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 4px 20px; 
		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; 
		}
		
input.cbutton:hover{color: #fff;background: #B13500;}
a:hover.cbutton:active{color: #fff;background: #ccc;}

div.greenbox{background: #A6CD4E;}

.boxes {/* 1/8 page */
    float: left;
	display:inline-block;
	margin:3px;
    width: 260px;
	height: auto;
	/* 	clear: both; 
background-color: yellow;  */
  }
  
 
}
/*================ for 700px or less======================= */
@media screen and (max-width: 600px) {
#ufwus{width: auto;	float: none;clear: left;}
#header {background: #fff;padding: 1% 4%;height: auto;} 
p.caption {display: none;}	

div.greenbox{
background: #A6CD4E;
}
h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 12px /* 0.90em */; font-weight: 200;color: red;}

}

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

#header {background:#fff;height: auto;}

h2{font: bold 0.85em;}
div.space{height: 4px;}
h1.center{font: 0.90em;}
h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 0.90em ; font-weight: 200;color:  #19374F; text-align: center; line-height: 1.1;}

#ufwus {background: transparent;}
#ufwus p{font-size: 11px;} 
div.testimonialform{
/* float: left; */
width:250px;
height:250px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color:#B13500;
padding: 2px;
font: 1.0em verdana, arial, helvetica, sans-serif;
color:  #fff; 
}
#ufwus, #middle{margin-bottom: 5px;}
p.caption {display: none;}
.rslides1_nav {display: none;}

.boxes {/* 1/8 page */
    float: left;
	display:inline-block;
	margin:3px;
    width: 260px;
	height: auto;
	/* clear: right; */
/* 	background-color: yellow;  */
  }

div.greenbox{
background: #A6CD4E;
}
.socialholder { float: right; width: 100px; text-align:center; padding-right: 10px; margin-top: 2px; background: transparent; }

#footer{height: auto;}

}