/*
Styles for the PurGood Organics Web Site
Site Designed and Developed by Rhaya Shilts www.rhaya.com
*/


/* ------------- UNIVERSAL ------------- */

* {margin:0; padding:0; }

* html ul li a {height:1em;}

html,body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #625026;
line-height: 160%;
text-align:center;
background: #ffffff;
}

/* ------------- LAYOUT ------------- */

#frame {
width:787px;
margin:0 auto;
text-align:left;
}

#header {
height: 110px;
width:787px;
}

#headerleft {
background:url(images/template/logo.gif) no-repeat;
height: 110px;
width:230px;
display: block;
text-indent: -9999px;
float:left;
}

#headerleft a {
height: 110px;
width: 230px;
left: 0;
top:0;
display: block;
text-indent: -9999px;
position:relative;
overflow:hidden;
}

#headerright {
height: 110px;
width:557px;
float:left;
}



/* ------------- TOP RIGHT NAVIGATION ------------- */

ul#toprightnav {
list-style-type:none;
width:170px;
margin:10px 0 0 387px;
}

li#viewshopping {
width:170px;
height:20px;
background: url(images/template/toprightnav/viewshopping.gif) no-repeat;
}

li#viewshopping a {
display:block;
width:170px;
height:20px;
position:relative;
left:0;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#checkout {
width:170px;
height:20px;
background: url(images/template/toprightnav/checkout.gif) no-repeat;
}

li#checkout a {
display:block;
width:90px;
height:20px;
position:relative;
left:80px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}


li#viewshopping a:hover { background: url(images/template/toprightnav/viewshoppinghover.gif) no-repeat; width:170px; position:static;}
li#checkout a:hover { background: url(images/template/toprightnav/checkouthover.gif) no-repeat; width:170px; position:static;}

/* ------------- TOP RIGHT NAVIGATION WITH PAYPAL------------- */

ul#toprightnavwide {
list-style-type:none;
width:200px;
margin:10px 0 0 357px;
}

li#viewcart {
width:200px;
height:20px;
}

/* -------------  MAIN NAVIGATION ------------- */

#mainnav {
background:url(images/template/mainnavbg.gif) no-repeat;
height: 29px;
width:785px;
}

ul#nav_main {
list-style-type:none;
position:relative;
width: 785px;
height: 29px;
top: 0;
left: 0;
}

li#ourstory {
position:absolute;
left: 10px;
width:101px;
height:29px;
background: url(images/template/nav/ourstory.gif) no-repeat;
}

li#ourstory a {
display:block;
width:101px;
height:29px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#whypurgood {
position:absolute;
left: 121px;
width:133px;
height:29px;
background: url(images/template/nav/whypurgood.gif) no-repeat;
}

li#whypurgood a {
display:block;
width:133px;
height:29px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#ourproducts {
position:absolute;
left: 265px;
width: 130px;
height:29px;
background: url(images/template/nav/ourproducts.gif) no-repeat;
}

li#ourproducts a {
display:block;
height:29px;
width: 130px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#wholesale {
position:absolute;
left: 405px;
width: 106px;
height:29px;
background: url(images/template/nav/wholesale.gif) no-repeat;
}

li#wholesale a {
display:block;
height:29px;
width: 106px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#press {
position:absolute;
left: 522px;
width: 64px;
height:29px;
background: url(images/template/nav/press.gif) no-repeat;
}

li#press a {
display:block;
height:29px;
width: 64px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#contactus {
position:absolute;
left: 596px;
width: 110px;
height:29px;
background: url(images/template/nav/contactus.gif) no-repeat;
}

li#contactus a {
display:block;
height:29px;
width: 110px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#blog {
position:absolute;
left: 717px;
width: 55px;
height:29px;
background: url(images/template/nav/blog.gif) no-repeat;
}

li#blog a {
display:block;
height:29px;
width: 55px;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
}

li#ourstory a:hover { background: url(images/template/nav/ourstoryhover.gif) no-repeat; }
li#whypurgood a:hover { background: url(images/template/nav/whypurgoodhover.gif) no-repeat; }
li#ourproducts a:hover { background: url(images/template/nav/ourproductshover.gif) no-repeat; }
li#wholesale a:hover { background: url(images/template/nav/wholesalehover.gif) no-repeat; }
li#press a:hover { background: url(images/template/nav/presshover.gif) no-repeat; }
li#contactus a:hover { background: url(images/template/nav/contactushover.gif) no-repeat; }
li#blog a:hover { background: url(images/template/nav/bloghover.gif) no-repeat; }





/* ------------- PAGE TITLES ------------- */


#pagetitle {
height: 72px;
width:785px;
}

#pagetitle h1.ourstory {
height: 72px;
width:785px;
background: url(images/pagetitle/ourstory.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.whypurgood {
height: 72px;
width:785px;
background: url(images/pagetitle/whypurgood.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.ourproducts {
height: 72px;
width:785px;
background: url(images/pagetitle/ourproducts.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.wholesale {
height: 72px;
width:785px;
background: url(images/pagetitle/wholesale.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.press {
height: 72px;
width:785px;
background: url(images/pagetitle/press.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.contactus {
height: 72px;
width:785px;
background: url(images/pagetitle/contactus.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.terms {
height: 72px;
width:785px;
background: url(images/pagetitle/terms.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.privacy {
height: 72px;
width:785px;
background: url(images/pagetitle/privacy.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.thankyou {
height: 72px;
width:785px;
background: url(images/pagetitle/thankyou.gif) no-repeat;
text-indent:-9999px;
display:block;
}

#pagetitle h1.home {
height: 72px;
width:785px;
background: url(images/pagetitle/home.gif) no-repeat;
text-indent:-9999px;
display:block;
}


/* ------------- CONTENT ------------- */

#contentcontainer {
width:785px;
border:solid 1px #8cc63f;
}

#content {
width:745px;
padding:0 20px 2px 20px;
min-height:300px;
height:auto !important;
height:300px;
}

#contenthome {
width:745px;
padding:0 20px 0 20px;
}


#content p, #contenthome p {
margin:0 0 18px 0;
}

#content a, #contenthome a {
color:#00afdb;
}

#content a:hover, #contenthome a:hover {
color:#8cc63f;
}

#content ol {
margin: 15px 0 18px 24px;
}

#content ul {
margin: 15px 0 18px 24px;
}

#content li {
margin: 0 0 8px 0;
}


hr {
border:none 0;
border-top:1px solid #cde6ab;
height:1px;
margin:0 0 18px 0;
}


#content h1 {
margin:0 0 12px 0;
color:#8cc640;
font-size:24px;
font-weight:normal;
}


#content h2 {
margin:0 0 8px 0;
font-size:14px;
font-weight:normal;
}

#content h2.productname {
margin:0 0 16px 0;
font-size:24px;
font-weight:bold;
}

.productprice {
margin:0;
font-size:18px;
font-weight:bold;
}

.smalltext {
font-size:11px;
line-height: 150%;
}

.alignright {float: right;}

.alignleft {float: left}

.productsingle {
border:solid 1px #dedbd2;
float: left;
margin:0 20px 20px 0;
}

.presslogo {
border:solid 1px #dedbd2;
}

/* ------------- PRODUCT STYLES ------------- */

.productsingle {
border:solid 1px #dedbd2;
float: left;
margin:0 20px 20px 0;
}

#productcontainer {
width:172px;
border:1px solid #beb7a6;
float: left;
margin:0 13px 13px 0;
padding:1px;
}

#productcontainer p {
margin:10px 0 10px 0;
text-align:center;
line-height:150%
}

.smallproductimg {
border:1px solid #beb7a6;
}

/* ------------- FORM ------------- */


label{
float: left;
width: 114px;
text-align:left;
margin:0 6px 0 0;
}

input, textarea{
width: 200px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 100px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin: 5px 0 0 126px;
width: 90px;
} 


/* ------------- FOOTER ------------- */

#footer {
text-align:center;
font-size:11px;
margin:4px 0 10px 0;
}

#footer a {
color:#8cc640;
text-decoration:none;
}

#footer a:hover {
color:#8cc640;
text-decoration:underline;
}