/*
Theme Name: Pinepac
Theme URI: http://pinepac.co.nz/
Description: The theme for the Pinepac website
Version: 1.0
Author: David Organ
Author URI: http://webcraft.co.nz/
Tags: custom header, fixed width

This theme was designed and developed by
Dave Organ whose blog you will find at http://webcraft.co.nz/
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/* Global Styles */

body {
height: 100%;
background-image: url(images/body.jpg);
background-repeat:repeat-x;
background-position: bottom;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #333;
}

h1 {
padding: 0px 0px 5px 0px;
color: #20874c; /* pp green */
text-transform: capitalize;
font-size: 24px;
}

h2 {
padding: 0px 0px 5px 0px;
color: #20874c; /* pp green */
font-size: 20px;
}

h3 {
padding: 0px 0px 5px 0px;
color: #20874c; /* pp green */
font-size: 16px;
}

h5 {
padding: 5px 0px 5px 0px;
color: #000;
font-size: 20px;
font-weight: normal;
text-align:  center;
}

p {
padding: 5px 0px 5px 0px;
font-size: 14px;
line-height: 18px;
}

li {
font-size: 14px;
line-height: 18px;
list-style: disc;
}

a {
color: #20874c; /* pp green */
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

strong {
font-weight: bold;
}

small {
color: #999;
}

/* Layout Styles */

#container {
width: 960px;
margin: 0 auto;
padding: 0px 20px 20px 20px;
background-color: #fff;
}

#header {
position: relative;
width: 960px;
height: 120px;
}

#logo {
float: left;
width: 276px;
height: 95px;
margin: 12px 0px;
}

#top {
float: right;
width: 367px;
height: 40px;
}

#search {
float: left;
width: 190px;
height: 26px;
padding: 4px 0px 10px 7px;
margin-right: 10px;
background-color: #20874c; /* pp green */
}


input.searchInput {
float: left;
width: 141px;
height: 26px;
padding: 0px 4px;
margin-top: 3px;
border: none;
font-size: 14px;
}

input.homeSearchBtn {
float: left;
width: 26px;
height: 26px;
margin-top: 3px;
margin-left: 6px;
border: none;
background-color: #20874c; /* pp green */
background-image: url(images/searchIcon.png);
background-repeat: no-repeat;
cursor: pointer;
}

#login {
float: left;
width: 160px;
height: 40px;
background-color: #20874c; /* pp green */
}

ul#topMenu {
width: 160px;
height: 40px;
}

ul#topMenu li{
float: left;
list-style: none;
height: 16px;
padding: 0px;
margin: 10px 0px 0px 0px;
}

ul#topMenu li:first-child {
border-right: 1px solid #fff;
}

ul#topMenu li a {
height: 14px;
padding: 0px 9px;
margin: 0px;
color:#fff;
font-size: 14px;
}

ul#topMenu li a:hover {
text-decoration: underline;
}

/* Start of main menu styles */

#menu {
width: 960px;
height: 40px;
background-color: #20874c; /* pp green */
position: relative;
z-index: 9999;
}

#menu ul#nav {
width: 960px;
height: 40px;
}

#menu ul#nav li {
float: left;
position:relative;
list-style: none;
}

#menu ul#nav li.current_page_item a{
color: #20874c; /* pp green */
background-color: #fff;
}

#menu ul#nav li a {
display: block;
color: #fff;
height: 29px;
font-size: 16px;
padding: 11px 22px 0px 22px;
}

#menu ul#nav li a:hover {
color: #20874c; /* pp green */
background-color: #fff;
}

#nav ul{
position:absolute;
display:none;
width: 300px;
top:40px;
margin-right: 0px;
padding:0px 0px;
list-style-type:none;
list-style-position:outside;
text-align: left;
color: #20874c; /* pp green */
}

#nav a{
display:block;
padding:0px;
text-decoration: none;
}

#nav li ul li {
width: 280px; 
margin: 0px 0px;
padding: 0px 0px;
line-height: 15px;
color: #20874c; /* pp green */
background-color: #fff;

}

#nav li ul li a {
float:left;
width: 270px;
height: 20px;
margin: 0px;
padding: 5px 0px 0px 10px;
font-size: 14px;
background-image: none;
background-color: #fff;
text-align: left;
color: #20874c; /* pp green */
border-bottom: 1px #ccc solid;
}

#menu ul#nav li ul li a:hover {
color: #333;
background-color: #fff; 
}

#menu ul#nav li ul li a {
color: #20874c; /* pp green */
}

#menu ul#nav li ul li.current_page_item a {
color: #333;
background-color: #fff;
}

#nav ul ul{ 
top:auto;
}	

#nav li ul ul {
left: 200px;
margin: 0px; /* Gap between drop down menus */
padding: 0px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}

#nav li:hover ul, #nav li li:hover ul,
#nav li.hover ul, #nav li li.hover ul  {
display:block;
}

#nav li ul li ul li, #nav li ul li ul li a { /* hides 3rd tier nav */
display: none;
}

/* End Of Top Menu Styles */


#content {
margin: 15px 0px;
}

/* start of homepage styles */

#banner {
width: 960px;
height: 290px;
background-image: url(/wp-content/themes/pinepac/images/banner.jpg);
background-repeat: no-repeat;
}

#promoContent {
clear: both;
width: 960px;
} 

.promo {
float: left;
width: 310px;
height: 160px;
background-color: #ccc;
}

.promoMid {
float: left;
width: 310px;
height: 160px;
margin: 0px 15px;
background-color: #ccc;
}

.promoImg {
width: 310px;
height: 128px;
}

.promoTitle {
width: 310px;
height: 32px;
background-image: url(images/boxTitle.jpg);
background-repeat: no-repeat;
}

.promoTitle h2 {
color: #fff;
font-size: 16px;
padding: 5px 10px;
}

.promoTitle a:hover h2{
text-decoration: underline;
}

#lowerContent {
clear: both;
width: 960px;
padding: 15px 0px;
}

#homeContent {
float: left;
width: 465px;
min-height: 400px;
padding: 0px 15px 0px 0px;
}  

#rightContent {
float: left;
width: 465px;
padding: 0px 0px 15px 14px;
border-left: 1px solid #20874c; /* pp green */
}

#accountTools {
width: 461px;
height: 116px;
background-image: url(/wp-content/themes/pinepac/images/account.jpg);
background-repeat: no-repeat;
background-position: center;
}

#accountToolsHeading {
clear: both;
width: 441px;
height: 20px;
padding: 5px 10px 5px 10px;
}

#myAccount {
float: left;
width: 210px;
height: 75px;
padding: 0px 10px;
}

#myAccount h3, #tradeClub h3 {
padding: 0px;
}

#tradeClub {
float: left;
width: 210px;
height: 75px;
padding: 0px 10px;
}

p.accountText {
width: 160px;
margin-left: 60px;
font-size: 12px;
padding: 0px;
}

#blog {
width: 441px;
height: 280px;
margin: 15px 0px;
padding: 10px;
}

a.postIcon {
display: block;
float: left;
width: 80px;
margin: 5px 10px 0px 0px;
}

.newsblock:first-child {
border: none;
}

.newsblock {
padding: 0px 0px 10px 0px;
margin-bottom: 10px;
border-bottom:  1px solid #20874c; /* pp green */
}

.entry {
float: left;
width: 351px;
padding: 0px;
margin: 0px;
}

/* end of homepage styles */

/* ########################################## */

/* start of page styles */ 

#pageleft {
float: left;
width: 285px;
min-height: 500px;
padding: 0px 35px 20px 0px;
}

.pageleftContent {
width: 285px;
padding: 0px 0px 20px 0px;
}

.pageleftContent p{
padding: 10px 10px 10px 10px;
}

.pageleftHeading {
width: 285px;
height: 35px;
background-color: #20874c; /* pp green */ 
}

.pageleftHeading h2 {
padding: 7px 10px;
color: #fff;
font-size: 16px;
}

.pageleftHeading h2 a{
color: #fff;
}

ul#subnav {
padding: 10px 10px 10px 10px;
}

ul#subnav li {
padding: 5px 0px;
font-size: 16px;
list-style: none;
}

ul#subnav li.current_page_item a{
text-decoration: underline;
}

ul#subnav li ul {
padding: 5px 10px 0px 20px;
margin-bottom: -5px;
}

ul#subnav li.current_page_item ul li a{
padding: 5px 0px;
font-size: 16px;
list-style: none;
text-decoration: none;
}

#pageright {
float: left;
width: 640px;
min-height: 650px;
padding: 0px 0px;
}

.categoryBlock {
padding: 10px 0px;
border-bottom:  1px solid #737373; /* light grey border */
}

a.postIconCat {
float: left;
width: 110px;
padding-top: 5px;
}

.categoryText {
float: left;
width: 530px;
}


/* end of page styles */ 

.clear {
clear: both;
}

#footer {
width: 960px;
margin: 0 auto;
border-top: 5px solid #20874c; /* pp green */ 
}

#contact {
float: left;
width: 465px;
height: 200px;
padding: 10px 15px 0px 0px;
}

ul#contactList {
width: 465px;
padding: 10px 15px 0px 0px;
}

ul#contactList li {
float: left;
width: 425px;
list-style: none;
}

ul#contactList li.typeRow {
width: 40px;
color: #20874c; /* pp green */ 
}

#quickLinks {
float: left;
width: 465px;
height: 200px;
padding: 10px 0px 0px 15px;
}

ul#linkList {
width: 465px;
padding: 10px 0px 0px 0px;
}

ul#linkList li{
float: left;
width: 232px;
list-style: none;
}

ul#linkList li a {
color: #333;
}

ul#linkList li a:hover {
color: #20874c; /* pp green */ 
}


#copyright {
width: 1000px;
margin: 0 auto;
padding: 5px 0;
text-align: right;
color: #fff;
}

#copyright a{
color: #fff;
}

#copyright a:hover {
text-decoration: underline;
}

/* !Image Styles */
p img {
padding: 4px;
max-width: 100%;
}

/*	Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
padding: 4px;}

img.alignright {
padding: 4px;
margin: 10px 0 5px 10px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 10px 10px 5px 0;
display: inline;
}

img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}
/* End Images */