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

body {
background-color: #9F8479;

/* background: url(/images/background.jpg) top left no-repeat #2B3A27;
background-size: 100%; */
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 13px;
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 left;
background-repeat: no-repeat;
background-size: 100%;}

/* =====================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
================================================== */
	h6 {color: #000;	font-family: 'Open Sans', sans-serif;font-weight: normal; }
	h6 a { font-weight: inherit; color: #000; }
	
	h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 700;color:#000;}
	h1 a { font-weight: inherit; color: #003482; }
	
	p.promote {font: 22px verdana,arial,helvetica,sans-serif;
	color: #B13500;line-height: 28px;  margin-bottom: 2px;text-align: center;} 
		
	h2{	font: bold 14px trebuchet ms,verdana,arial,helvetica,sans-serif;
	color: #000;}	
	h3 { color: #000; font-family: 'Open Sans', sans-serif; color:#003482; font-weight: 600;}
	h3 a { font-weight: inherit; color: #003482; }
	/* 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: #fff;	font-family: 'Open Sans', sans-serif;font-weight: bold; font-size: 14px; padding: 4px 5px;}
	h4 a { font-weight: inherit; color: #000; }
	
	
	

/* #Links
================================================== */
	a, a:visited { color:#000 ; text-decoration: underline;  }/*links in the text*/
	a:hover, a:focus { color: #787878; 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-weight: 600; font-size: 12px; text-decoration: none; color: #000;} 
	#keen a:visited {font-size: 12px; 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=============== */
	
		
/* #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: 1.5em; margin-bottom: 6px; } /* XXXXXXXXXXXXXXXXXXXXXXX lineheight was 18px */	
	
	
	/* ===============SOCIAL ICONS=============================== */
.socialholder { float: right; width: 100px; text-align:center; padding-right: 10px; margin-top: 15px; 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_ebay { background: url('/images/social/social_ebay.png') no-repeat; }
	.social_facebook {background: url('/images/social/social_facebook.png') no-repeat; }
	/* ebay icon below is different */
	.socialicons li a.ebay { float: left; width: 60px; 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, a.ebay{ background-position:bottom; }
	
/* ========================STRUCTURE===================== */
#pagewrap {width: 960px;margin: 0px auto;border: solid 1px #000;background: #C2C4B6;}

#header {background: url(/images/flag.jpg) top right no-repeat #C2C4B6; height: auto;}
#header img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}

#ufwus {
width: 650px;
float: left;
padding: 0px 15px;
/* margin-top: -10px; */
background: transparent;
}

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


#pics {
margin-top: -20px;
width: 270px;
/* padding: 5px 15px 5px 5px; */
float: left;
background: transparent;
border-right: solid 1px #000;
}

#pics img.withborder{
border: solid 1px #000;
max-width: 100%;height: auto;width: auto\9; /* ie8 */
}

#pics p{
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 1.0em;
font-weight: 700;
text-align: center;
}

/*=============FOOTER==========*/
#footer {
text-align: right;
padding: 6px 15px 6px 15px ;/*  */
background-color: #F8B400;
padding-right: 10px;
font: bold 11px arial, helvetica, sans-serif;
color: #000;
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: #787878; text-decoration: underline;} 
#footer span.foot{background-color: #F8B400; float: right;}

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


#keen{width: 960px; margin: 0px auto;
/* Fallback for web browsers that don't support RGBa */
    background-color: rgb(255, 255, 255);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.4);
}
#keen a, #keen a:link {text-align: center; font-weight: 600; font-size: 12px; text-decoration: none; font-weight: 700;color: #000;} 
#keen a:visited {font-size: 12px; text-decoration: none; color: #000; text-decoration: none;} 
#keen a, #keen a:hover {color: #ccc; text-decoration: underline;} 
#keen p{text-align: center;color: #000;font-family:'Open Sans', sans-serif;font-size: 12px; font-weight: 700;}

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

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

/* =========100 point table in page=========== */

table.page { 
  width: 100%; 
  border-collapse: collapse; 
  background: transparent;
}
/* alt rows */
table.page tr:nth-of-type(odd) { 
 background: #DADAD2;
}
table.page th { 
  background: #262616; 
  color: #fff; 
  font-weight: bold; 
}
table.page td, th { 
  padding: 6px; 
  border-right: 1px solid #000; 
  border-left: 1px solid #000; 
  text-align: left; 
}

table.page tr.end{ 
  border-bottom: 1px solid #000; 
}
/* =============BUTTONS============== */
.gbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #4F5243; 
		border: 0;
		border: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		/* padding: 5px 20px; */
		padding: 3px 8px 3px 8px; 
		color: #fff;
		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: #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 and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
table, thead, tbody, th, td, tr {display: block;}


/* =========100 point table in page=========== */
	table.page thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.page tr { border: 1px solid #ccc; }
	
	table.page td { 
		/* Behave  like a "row" */
		border-right: 1px solid #ccc;
		/* border-bottom: 6px solid green; */ 
		position: relative;
		padding-left: 30%; 
	}
	
	table.page td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 25%; 
		padding-right: 2px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	table.page td:nth-of-type(1):before { content: "Doc Type:"; font-weight: bold;} 
	table.page td:nth-of-type(2):before { content: "Points:"; font-weight: bold;}

.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: 91%; padding: 1% 4%;}
#footer {padding: 1% 4%;	}
p.caption {display: none;}
#header {background: #fff;padding: 1% 4%;height: auto;} 
#pics{display: none;}
#keen{width: 100%; margin: 0px 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; 
}

#gallery, div.pic {
min-height: 200px/*auto 230px */;
 width: 210px; /* 250px */
 clear: both;
}




.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.copy{width: 960px;margin: 0 auto;color: #B13500;}
}
/*================ 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;}	
}

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

#header {background:transparent;height: auto;}
h1 {font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 700;color:#000;}
h1 a { font-weight: inherit; color: #000; }
#ufwus {background: transparent;}
div.contactform{
/* 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;}

.price{
 display: block;
 list-style: none;
 text-align: right;
 font: bold 10px verdana, arial, helvetica, sans-serif; 
 color: #000;
}
div.ls img {
margin: 0;
}

div.pt img {
margin: 0;
}

div.cleartop{
height:2px; 
background: blue;
/* visibility:hidden;  */
margin-top:10px;
clear: both;
}
.socialholder { float: right; width: 100px; text-align:center; padding-right: 10px; margin-top: 2px; background: transparent; }

#pics {display: none;}

#keen{width: 100%; margin: 0px auto;

}
