*{padding:0; margin:0; border-spacing:0; font-family: Helvetica, Arial, sans-serif; }
a { color:black; text-decoration:none; }
body { 
  background-image: url("p/pweb/wetdeck5.jpg");
  background-repeat: no-repeat;
	background-size:100% 330px;
  font:62.5%/1.2 Helvetica, Arial, sans-serif; 
  background-color:#f5f5f5;
}

/* ------------------------- TOP -------------------------- */

.top_menu { 
  line-height:40px;
  background-color:#2e3311;
  opacity:0.8; 
  text-align:center;
  font-size:12px;
  border-bottom:1px solid #273600;
}

.top_menu_ul {
  display:inline-block; /* search form same so side-by-side */
  list-style-type: none;
  text-align: center;
}
.top_menu_ul li { display:inline; margin-right:30px;}
.top_menu_ul li a {
  font-size:14px;
  letter-spacing:4px;
  text-decoration: none;
  color: white;
}

.form-wrapper {
  padding-top:0px; 
  width:330px; 
  display:inline-block;
} /* the search box css is at the end of this file */

.top_container {
  max-width:985px; /* same as main_container */
  margin:0 auto;  /* center it */
  position:relative; /* so we can push the image up under the menu */
  top:-30px;
  z-index:-1; /* under the search menu on small screens */
}

.top_container img {
  display:block;
  max-width:80%; /* so it resizes down when window gets smaller */
  max-height:280px;  /* but we dont want it getting too big */ 
  margin:0 auto; /* center it */
  padding-right:25%; /* but a little to the left */
}

/* ------------------------- CONTACT BOX -------------------------- */
.top_contact {
  position:absolute; /* lined up within the top container */
  top:40px; /* down from the top out from under the menu */
  right:10px; /* align it roughly with the right side of the top container */
  width:250px;
  height:170px;
  padding: 5px 10px 10px 10px;
  line-height:40px;
	font-size:14px;
  color:white;
  text-decoration:none;
  background-color:#2e3311;
  opacity:0.8; 
}

.middle_contact {
  display:none; /* activated in css_small */
  position:relative;
  margin:0 auto;
  margin-top:10px;
  text-align:center; 
  width:250px;
  height:170px;
  padding: 5px 10px 10px 10px;
	font-size:14px;
  color:white;
  text-decoration:none;
  background-color:#2e3311;
}

.top_contact_line {
  overflow:auto;
  border:none;  
  border-bottom:2px dotted #fff;
  color:white;
  font-size:14px;
  text-decoration:none;
  padding:4px 0 4px 0;
  text-align:center;
}

.top_contact_line img { float:left; padding:0px; margin:0px; }
.top_contact_phone { font-size:32px; text-decoration:bold; }
.top_contact_text { line-height:20px;} 
.top_contact_line a { color:white; text-decoration:none; }
.top_contact_line a:hover { color:lightgrey;  text-decoration:none; }

.rnd_shaddow {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow:    5px 5px 5px 0px rgba(0, 0,0, 1);
  box-shadow:         5px 5px 5px 0px rgba(0, 0, 0, 1);
}


/* ------------------------- Timber Sections Scroller -------------------------- */

.scroller {
  position:relative; /* because the image is pushed up we need to push this up too */
  top:-30px;
  border-top:1px solid #273600; 
  height:180px;
  background-color:#2f340f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4d6215), to(#2b380a));
  background-image: -webkit-linear-gradient(top, #4d6215, #2b380a);
  background-image: -moz-linear-gradient(top, #4d6215, #2b380a);
  background-image: -ms-linear-gradient(top, #4d6215, #2b380a);
  background-image: -o-linear-gradient(top, #4d6215, #2b380a);
  background-image: linear-gradient(top, #4d6215, #2b380a); 
}

.scroller_bottom {
  position:relative; top:-31px;
  z-index:-1;
	background-image: url("p/pweb/bottom_gradient.png");
	background-repeat: no-repeat;
	background-size: 100% 10px;
	height:45px;
}

table.scroller_top {
  margin:0px auto;
  font-size: 15px;
  line-height: 8px;
	letter-spacing:1px;
	color:white;
  margin-top:15px; 
  margin-bottom:10px;
  width:800px;
  border-bottom:2px solid white;
  padding:0px;
}

table.scroller_top a { text-decoration:none; color:white; }
img.st_hidden { visibility:hidden; width:15px; height:15px; }

.scroller_after {
  margin:0px auto; 
	background-image: url("p/pweb/bottom_shaddow.png");
	background-repeat: no-repeat;
	background-size: 100% 25px;
	height:25px;
	width:980px;
}


/* ------------------------- Carousel -------------------------- */

		/**
		* Carousel with image and text, custom skinned scrollbar
		**/
		#carousel-image-and-text {
			width: 938px; 
			height: 166px;
			margin: 0 auto;	
			background-color:white;
		}
		#carousel-image-and-text .arrow-holder {
			height: 155px;
			background-color:white;
		}		
		#carousel-image-and-text .touchcarousel-item {
			width: 134px;  /* was 135 but had the item pushed down problem in chrome - temp fix */
			height: 135px;
		  margin: 5px;
      border: 1px solid #5f6820;	
		  padding: 5px;
/*      padding-right: 5px;  /* chrome (1920x1080) 5=pushed down, 4.4=ok. edge 5=ok, 4.4=pushed down */
		}
		#carousel-image-and-text .item-block {
			width: 135px;
			height: 135px;
			display: block;
		}
		#carousel-image-and-text .item-block img {
			width: 135px;
			height: 135px;		
			border: 0;
		}
		#carousel-image-and-text .item-block {			
			text-decoration: none;
			color: inherit;			
		}					
		#carousel-image-and-text .item-block h4 {
      margin-top:-23px;			
		  text-align:center;
      background-color: rgba(0,0,0,0.65); /* so opacity doesnt affect the text - css3 only */
      z-index:1;
      position:absolute; /* required */
			font: bold 13px/20px Helvetica, Arial, sans-serif; 
			color: #FFF;
			width: 135px;
			height: auto;	
		}

  	#carousel-image-and-text .item-block:hover h4 {	
			color:lightgrey; 		
		}
	
		#carousel-image-and-text .scrollbar-holder {
			background: #CED7DB;
			bottom: 2;
			height: 4px;
			left: 0;
			right: 0;
		}
		#carousel-image-and-text .scrollbar {
			background-color: #45a8ce !important;
			bottom: 0;
			margin-top:-200px;
		}

/* ------------------------- MIDDLE -------------------------- */

.main_container {
/* main data is fixed width centered */ 
  max-width:985px; /* main articles are 730 wide, specials to the right are 250 wide */
  margin: 0 auto;
  position:relative;
}
.info_container { 
  max-width:730px; /* articles will resize down from this on smaller screens */
  float:left;
}
.specials_container {
  position:absolute;
  right:0;
  width:250px;
  z-index:10;
}

.mid_heading {
  margin:10px 10px 10px 0px;  
  padding:4px;
  width:200px;
  height:17px;
  background-color:#2f340f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#799121), to(#3c4b06));
  background-image: -webkit-linear-gradient(top, #799121, #3c4b06);
  background-image: -moz-linear-gradient(top, #799121, #3c4b06);
  background-image: -ms-linear-gradient(top, #799121, #3c4b06);
  background-image: -o-linear-gradient(top, #799121, #3c4b06);
  background-image: linear-gradient(top, #799121, #3c4b06);  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border
  -radius: 3px;
  font-size: 14px;
	letter-spacing:1px;
	line-height:17px;
	color:white;
	vertical-align:top; 
}

.mid_heading img {
  height:11px;
  margin-top:3px;
  margin-left:10px;
}

/* ------------------------- info items --------------------------- */


.info { width:100% }

.calendar{
  position:relative;
  float:left;
  margin-left:-20px;
  z-index:10;
	width:60px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 18px/40px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
}
	
.calendar em{
	display:block;
	font:normal bold 11px/20px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4d6215), to(#2b380a));
  background-image: -webkit-linear-gradient(top, #4d6215, #2b380a);
  background-image: -moz-linear-gradient(top, #4d6215, #2b380a);
  background-image: -ms-linear-gradient(top, #4d6215, #2b380a);
  background-image: -o-linear-gradient(top, #4d6215, #2b380a);
  background-image: linear-gradient(top, #4d6215, #2b380a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #273600;
}

.infoimg {
  width:100%;
  margin-top:-40px;
  z-index:0;
}

/*  background-color:#663320;  SET IN THE PAGE */
.infoheading {
  margin-top:-52px;
  padding:10px 10px 10px 10px;
  opacity:0.8;
  color:white;
  font-size:25px;
  font-weight:bold;
}  

/*  background-color:#c99e74;  SET IN THE PAGE */
.infobody {
  padding:10px; 
  font-size:12px;
  color:black;
}
  

/* ------------------------- Big List -------------------------- */

.big_list { 
  text-align:center; /* center the inline-block divs */
  clear:left; /* pushes it to the bottom */ 
} 
.biglist_cat {
  font: 12px/16px Arial;
  color: #333333;
  text-align:center;
  width:146px;
  display:inline-block;
  vertical-align:top;   /* affects inline-block */
  margin:2px;
}
.biglist_cat h4 {
  font: bold 16px/16px Arial;
  color: #333333;
  margin: 10px 0 10px;
}
.biglist_cat ul { 
  text-align:left; 
  list-style-type:none; 
}
.biglist_cat li {
  padding:7px;
  background-color:#DDDDDD;
  margin:2px 0px 10px 0px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.biglist_cat ul.sub_ul {
  list-style:disc inside;
  margin-top:10px;
}
.biglist_cat ul.sub_ul li { margin:2px; padding:7px; }
.biglist_cat ul.sub_ul a { color: #333333; }
.biglist_cat a { text-align:left; color:black; text-decoration:none; }
.biglist_cat a:hover { color:#2e3311; }
.biglist_cat img { padding-top:10px; height:80px;}


/* ------------------------- specials -------------------------- */

.specials_data {
  height:auto; /* set on document load to the height of the info div so it will scroll */
  overflow:hidden; 
  border:1px solid #e5e8e1;  
  padding:5px;
  background-color:#ebeee5; /* slightly off-white */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}  

.specials_table {
  border-top:1px dotted grey; 
}
.specials_table td { 
  border-bottom:1px dotted grey;
  padding:5px;
  margin-right:7px;
}
.specials_content { margin:0 auto; width:236px; }
.specials_content img { float:left; height:80px; width:80px;}
.specials_text { float:left; padding:5px; width:138px; }
.specials_text h4, .specials_text h3, .specials_text p { 
  border:0;
  width:138px; 
  color:black;
  font: bold 13px/20px Helvetica, Arial, sans-serif;
  text-align:center;
}		
.specials_text p { font-weight: normal;  color: #555; }

div.arrow {
  margin:auto;  
  margin-top:10px;
  text-align:center;
}


/*----------------------- bottom --------------------------- */

.bottom {
	background-image: url("p/pweb/woodgrain_bw2.jpg");  
  background-repeat: repeat-x;
  margin:20px 0px 20px 0px;
  padding:10px 0px 10px 0px;
  width:100%;
  float:clear; /* pushes it down to the bottom */
  text-align:center;
  color:black;
  font-size: 10px;
}

.bottom_table {
  margin-left:auto;
  margin-right:auto;
  border:0;
  font-size:12px;
  font-weight:bold;
  line-height:18px;
  background-color:white;
  opacity:0.8;    
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.bottom_table td {
  padding-right:20px;
  padding-left:20px;
}
.bottom_table h3 {
  margin-bottom:5px;
}


/* ------ NEW SEARCH ------ http://speckyboy.com/ */

.form-wrapper input {
    width: 220px;
    height: 13px;
    padding: 8px 5px;
    font-weight: bold;
    font-size: 15px; /* 'lucida sans', 'trebuchet MS', 'Tahoma'; */
    border: 0; 
    border-radius: 3px 0 0 3px; 
}
.form-wrapper input:focus { outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic;}
.form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic;}
.form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic;}    
.form-wrapper button {
    overflow: visible; 
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    margin-top:4px;
    cursor: pointer;
    height: 29px;
    width: 100px;
    font: bold 15px/30px; /* 'lucida sans', 'trebuchet MS', 'Tahoma'; */
    letter-spacing:2px;
    color: #fff;
    text-transform: uppercase;
    background: #4d6215; /* #d83c3c; */
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   
.form-wrapper button:hover{ background: #e54040;}   
.form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; outline: 0; }
.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #4d6215 transparent;
    top: 7px;
    left: -6px;
}
.form-wrapper button:hover:before{ border-right-color: #e54040;}
.form-wrapper button:focus:before, .form-wrapper button:active:before{border-right-color: #c42f2f;}      
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
  border: 0;
  padding: 0;
}    

/* ------------------------- CONTACT PAGE -------------------------- */
/*######## Smart Green http://www.sanwebe.com/2013/10/css-html-form-styles ########*/
.smart-green {
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background:#F8F8F8; 
    padding: 30px 30px 10px 30px;
    font: 12px Arial, Helvetica, sans-serif; 
    color: #666666;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.smart-green h1 {
    font: 22px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px 0px 15px 40px;
    display: block;
    margin: -30px -30px 0px -30px;
    color:white;
    background:#4D6215; /* #9DC45F; */
    text-shadow: 1px 1px 1px #949494; 
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-bottom:1px solid #89AF4C;
}
.smart-green h1>span { text-shadow:none; display: block; font-size: 12px; color:white; }
.smart-green label { display: block; margin: 0px 0px 5px;}
.smart-green label>span { float: left; margin-top: 10px; color: #5E5E5E;}
.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea {
    color: #555555;
    height: 30px;
    line-height:15px;
    width: 100%;
    padding: 0px 0px 0px 10px;
    margin-top: 2px;
    border: 1px solid #E5E5E5;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    font: normal 14px/14px Arial, Helvetica, sans-serif;
}
.smart-green textarea{ height:100px; padding-top: 10px;}
.smart-green .button {
    background-color:#4d6215; /* #9DC45F; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-border-radius: 5px;
    border: none;
    padding: 10px 25px 10px 25px;
    color: white;
    text-shadow: 1px 1px 1px #949494;
}
.smart-green .button:hover { background-color:#80A24A;}