﻿body {
/* background-image: url(/images/logo_emboss.png), url(/images/background_fill.png);
background-position: bottom right, top left ;
background-repeat:  no-repeat, repeat-y;  */
/*background: url(/images/background_fill.jpg) top left repeat-y ;*/
/* background-size: 100%;
background-position: 50% 50%; 
background-repeat: no-repeat;*/
background-color: #BDC355;
font: 12px Helvetica, Arial, sans-serif;
line-height: 20px;
color: #000;
padding-bottom: 60px;
-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/ttback2.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:  #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: #72992E/* #0CA4DE */;
-webkit-box-shadow: inset 0 0 3px silver;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #72992E/* #0CA4DE */;
}
/*=============VIDEO CONTAINER==========*/
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
		
/* #Typography
================================================== */
	h1, h5, h6 {
	color: #000;
	font-family: arial, verdana, helvetica,sans-serif;
	font-weight: normal; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #000; }
	h1 { font-size: 26px; /* line-height: 22px; margin-bottom: 2px; */} 
	h2{
	font-size:14px;
	font-family: arial, verdana, helvetica,sans-serif;
	color: #374378;
/* 	line-height: 21px; */
	}	
/* 	h2 {font-weight: bold; font-size: 14px; color: #000; line-height: 20px; margin-bottom: 2px;} */
	h3 { font: bold 12px Helvetica, Arial, sans-serif;color:#9A0020; }
	h4 { 
	font: bold 14px 'Open Sans', sans-serif;
	color:  #0090C2 /* #000 */;
	margin-bottom: 10px; 
	}
	h5 { font-size: 11px; line-height: 12px; /* margin-bottom: 10px; */color: #89142F; font-weight: bold;}
	h6 { font-size: 10px; text-align: center; }

/* #Links
================================================== */
	a, a:visited { color:#000 ; text-decoration: underline;  }/*links in the text*/
	a:hover, a:focus { color: #9A0020; 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; }
	
/* #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: 2px; 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: 100px; 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_twitter { background: url('/images/social/social_twitter.png') no-repeat; }
	.social_youtube { background: url('/images/social/social_youtube.png') no-repeat; }
	/*.social_pinterest { background: url('/images/social/social_pinterest.png') no-repeat; }
	
	 .social_rss { background: url('../images/social/social_rss.png') no-repeat; }
	.social_vimeo { background: url('../images/social/social_vimeo.png') no-repeat; }
	.social_googleplus { background: url('../images/social/social_googleplus.png') no-repeat; }
	.social_linkedin { background: url('../images/social/social_linkedin.png') no-repeat; }
    
	.social_flickr { background: url('../images/social/social_flickr.png') no-repeat; }
	.social_donate { background: url('../images/social/social_donate.png') no-repeat; }	*/	
	.social_youtube { background: url('../images/social/social_youtube.png') no-repeat; }
	 

/* STRUCTURE */

#pagewrap {
/* padding: 5px; */
position: relative;
width: 960px;
margin: auto;
padding-top: 10px;
/* border: solid 1px #fff; */
background: #fff;
border-right: solid 10px #90C13A;
border-left: solid 10px #90C13A;
border-bottom: solid 10px #90C13A;
-webkit-box-shadow: 0 8px 6px -6px #7F7F7F;
-moz-box-shadow: 0 8px 6px -6px #7F7F7F;
 box-shadow: 0 8px 6px -6px #7F7F7F; 
z-index: 5;
}

#header {
position: relative;
background-color: #fff;
background-image: url(/images/headflower.jpg), url(/images/hdwords.png);
background-position: bottom right, bottom left;
background-repeat: no-repeat;
height: auto;
border-bottom: solid 1px #000;
width: 1000px;
margin: auto;
 -webkit-box-shadow: 0 8px 6px -6px #7F7F7F;
-moz-box-shadow: 0 8px 6px -6px #7F7F7F;
 box-shadow: 0 8px 6px -6px #7F7F7F; 
 z-index: 20;
}




.space{
height: 3px;
}

#header img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
border: none;
}


/* _____________________UFWUS_______________________ */
#ufwus {
width: 90%;
float: left;
padding: 0px 25px;
/* margin-top: -10px; */
background: #fff;
}

#ufwus p.message{
color: #9A0020;
font-weight: bold;
}

#ufwus img {
margin: 3px 10px;
border: none;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

#ufwus img.noborder {
border: none;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* #middle {
	width: 294px; Account for margins + border values 
	float: left;
	padding: 5px 5px;
	margin: 0px 5px 5px 5px;
}*/



/*=============NEWS==========*/
#news {
background: url(/images/newsflower.jpg) top left no-repeat #fff;
margin-top: -6px;
border-left: solid 1px #000;
width: 230px;
padding: 5px 45px;
float: left;
height: 400px; 
overflow: auto;
}

p.newsheading{
margin-top: 0;
/* background-color: #FACB00; */
padding: 3px;
color: #000;
font-family: arial,helvetica,sans-serif;
font-size: 30px;
font-weight: bold;
text-align: left;
}

#news p.title{
font: bold 1.00em verdana,arial,helvetica,sans-serif;
/* line-height: 1.50em; */
color: #000;
/* border-bottom: solid 2px #76828A; */
}

#news p.summary{
font: 0.90em verdana,arial,helvetica,sans-serif;
line-height: 1.30em;
color: #000;
/* border-bottom: solid 2px #76828A; */
}

p.event{/*for the event title*/
font: bold 1.20em verdana,arial,helvetica,sans-serif;
color: #22375F;
margin: 0;
/* border-bottom: solid 2px #76828A; */
}

div.event p.sum{
font: bold 0.90em verdana,arial,helvetica,sans-serif;
color: #22375F;
}

h5.teaserheadline {/*  border-bottom: 1px solid #ddd; */ padding-bottom: 9px; color: #000; font-size: 13px; line-height: 13px; font-weight: bold; font-style: normal; margin-bottom: 13px; text-transform: uppercase; }

hr.newhr{
clear: left;
border: dotted 1px #ccc;
}

a img {border:none}

/* Flaired edges, by Tomas Theunissen */
		
hr.flaired {
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.flaired:before {
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;    
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

input.read{/* for readonly inputs */
background-color: transparent/*  #EBECEB */;
border: none;
}



/*=============FOOTER==========*/
#footer {
/* clear: both;*/
padding: 6px 15px 0 15px; 
background-color: #669A3F;
/* margin-top: -18px;
border-top: solid 1px #000; */
padding-right: 10px;
font: bold 11px arial, helvetica, sans-serif;
text-align: right;
color: #fff;
clear: both;	
}

/* #footer a:link{
color: #fff;
text-decoration: none;
} */

#footer a, #footer a:link { 
 color:  #fff;   
 text-decoration: none;
} 

#footer a:visited { 
 color:  #fff;   
 text-decoration: none;
} 

#footer a, #footer a:hover { 
 color: #ccc;
 text-decoration: underline;
} 




h3.copyright{
text-align: center;
}

#footer span.copy{
float: left;
}

/* =====================FORMS============== */
/* VIEW ORDER	 */

table.view { 
  width: 100%; 
  border-collapse: collapse; 
}
/* alt rows */
table.view tr:nth-of-type(odd) { 
 /*  background: #eee;  */
}
table.view th { 
  background: #4F575A/* #333 */; 
  color: #fff/* white */; 
  font-weight: bold; 
}
table.view td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

/* STOCKISTS TABLE	 */

table.listing { 
  width: 100%; 
  border-collapse: collapse; 
}
/* alt rows */
table.listing tr:nth-of-type(odd) { 
 /*  background: #eee;  */
}
table.listing th { 
  background: #4F575A/* #333 */; 
  color: #fff/* white */; 
  font-weight: bold; 
}
table.listing td, th { 
  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============== */
.mbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #9A0020/* #777 */; 
		border: 0;
		border-bottom: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding-left: 10px; padding-right: 10px; padding-top: 0; padding-bottom: 0;
		color: #fff;
		display: inline-block;
		font-size: 11px;
		font-weight: normal;
		font-style: italic;
		text-decoration: none;
		cursor: pointer;
		line-height: 20px;
		font-family: Helvetica, Arial, sans-serif; }
		
a.mbutton:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
	  color: #000;
	  background: #FACB00;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a.mbutton:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]: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;*/}

	  
/* ==================Green button================ */
.ybutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #7DC44D/* #777 */; 
		border: 0;
		border-bottom: 1px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding-left: 10px; padding-right: 10px; padding-top: 0; padding-bottom: 0;
		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.ybutton:hover{
	  color: #fff;
	  background: #000;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.ybutton: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;*/}
	  
/* ==================Bank  button================ */
.bbutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #F8C100; 
		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.bbutton:hover{
	  color: #fff;
	  background: #000;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.bbutton: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;*/}

	  /* ==================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;*/}
	  
	  
	  	  /* ==================BUTTON================ */
.abutton{
		-moz-border-radius: 3px; 
		-webkit-border-radius: 3px;
		border-radius: 3px; 
		background: #fff; 
		border: 0;
		border: 2px solid #444;
		/* text-shadow: 0px 1px 0px #444; */
		padding: 2px 7px;
		color: #000;
		display: inline-block;
		font-size: 11px;
		font-weight: bold;
		font-style: normal/* italic */;
		text-decoration: none;
		cursor: pointer;
		line-height: 20px;
		font-family: Helvetica, Arial, sans-serif; 
		}
		
.abutton:hover{
	  color: #fff;
	  background: #669A3F;
	  /* text-shadow: 0px 1px 0px #fff; */}
		
input.abutton:hover{
	  color: #fff;
	  background: #669A3F;
	  /* text-shadow: 0px 1px 0px #fff; */}

	a:hover.abutton: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)  {

	/* 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 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.listing tr { border: 1px solid #ccc; }
	
	table.listing td { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 6px solid green; */ 
		position: relative;
		padding-left: 30%; 
	}
	
	table.listing td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 20%; 
		padding-right: 10px; 
		white-space: nowrap;
		/* background-color: red; */
	}
	
	/*
	Label the data
	*/
	table.listing td:nth-of-type(1):before { content: "Suburb:"; font-weight: bold;}
	table.listing td:nth-of-type(2):before { content: "Shop:"; font-weight: bold;}
	table.listing td:nth-of-type(3):before { content: "Phone:"; font-weight: bold; }
	table.listing td:nth-of-type(4):before { content: "State:"; font-weight: bold;}
	/* table.listing td:nth-of-type(5):before { content: "Phone:"; font-weight: bold;} */
	
	/* ====================view order=============*/ 
	table.view thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.view tr { border: 1px solid #ccc; }
	
	table.view td { 
		/* Behave  like a "row" */
		border: none;
		/* border-bottom: 6px solid green; */ 
		position: relative;
		padding-left: 30%; 
	}
	
	table.view td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 25%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	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;} */
} 

/* ===================for 980px or less =======================*/
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#ufwus {
		width: 81%;
		padding: 1% 4%;
	}

	#news{
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
		border-left: none;
		border-top: solid 2px #000;
		background: #fff;
	}

	/* #header,  */#footer {
		padding: 1% 4%;
	}
	
	/* #header {
	background: #E2EEF5;
	height: auto;
	padding: 1% 4%;
	} */
#header {
background-color: #fff;
background-image: url(/images/headflower.jpg), url(/images/smhdwords.png);
background-position: bottom right, bottom left;
background-repeat: no-repeat;
width: 95%;
padding: 1% 2%;
height: auto;
}	


	
.socialholder { float: right; width: 100px; text-align:center; margin-right: 0; padding-right: 0; margin-top: 15px; background: transparent; }
	
	
/* #header {
background-color: #E2EEF5;
background-image: url(/images/discount.png), url(/images/hdwordsm.png);
background-position: bottom right, center bottom;	
padding: 1% 4%;
height: auto;
} */
/* ===============SITEMAP====== */

#sitemap p.left{
/* text-align:left; */
margin-left: 0;
text-align: left;
float:left;
font: 0.90em verdana, arial, helvetica, sans-serif;
 color:  #fff; 
 line-height: 2.2em;
/*  background: pink; */
}

#sitemap span.heading{
margin-left: 3%;
font: bold 1.3em verdana, arial, helvetica, sans-serif;
color: #fff;
}

#sitemap p.right{
font: bold 2.0em verdana, arial, helvetica, sans-serif;
 color:  #fff; 
 line-height: 1.8em;
float:right;
text-align:right;
margin-right: 30px;
/* background: yellow; */
}

#sitemap span.eadd{
font: 0.7em verdana, arial, helvetica, sans-serif;
 color:  #fff; 
}

#sitemap p.centered{
font: 0.90em verdana, arial, helvetica, sans-serif;
 color:  #fff; 
 line-height: 1.8em;
/* text-align:center; */
margin-left: 20%;
text-align: left;
/* background: orange; */
}	

}


/*================ for 700px or less======================= */
@media screen and (max-width: 600px) {

	#ufwus {
		width: auto;
		float: none;
		clear: left;
	}
	
	#products {
		width: auto;
		float: none;
		background: #fff;
	}
	
#header {
background-color: #fff;
/* background-image: url(/images/discount.png), url(/images/hdwordsm.png);
background-position: bottom right, center bottom;	 */
padding: 1% 4%;
height: auto;
width: 95%;
} 
	
.socialholder { float: right; width: 100px; text-align:center; padding-right: 2px; margin-top: 15px; background: transparent; }	
}

/* ============for 480px or less =================*/
@media screen and (max-width: 480px) {

#header {
width: 95%;
height: auto;
}

	
	h1 {
		font-size: 2em;
	}
	

/* #header {
width: 95%;
background: #fff;
height: auto;
margin-bottom: 5px;
} */	
	
/* #header {
background-color: #E2EEF5;
background-image: url(/images/discountsm.png);
background-position: top right;	
height: auto;
}  */

#ufwus {
	background: #fff/* transparent */;
}
#news{
	background: #fff;
}

#sitemap{
display: none;
}
/* #header,  */#ufwus, #middle, #news {
	margin-bottom: 5px;
}

.socialholder { float: right; width: 100px; text-align:center; padding-right: 2px; margin-top: 5px; /* background: red; */ }


  
}







