﻿body { background-color: #FFFFCC; font-family: verdana; font-size: 81%; color: #623100; margin: 0; padding: 0; }

h1 { font-family: Tahoma, Arial; font-size: 160%; margin: 15px 0 10px 0; font-weight: normal; }
h2 { font-family: Tahoma, Arial; font-size: 140%; margin: 0 0 10px 0; font-weight: normal; }
h3 { font-family: Tahoma, Arial; font-size: 130%; margin: 0 0 10px 0; font-weight: normal; }
h4 { font-family: Tahoma, Arial; font-size: 110%; margin: 0 0 10px 0; font-weight: normal; }
h5 { font-family: Tahoma, Arial; font-size: 100%; margin: 0 0 10px 0; font-weight: normal; }
p { padding: 0 0 10px 0; line-height: 1.4em; }

a { font-weight: bold; text-decoration: underline; color: #B75B00;}
a:hover { color: #402000;}

#MainWrapper { width: 980px; background-color: #402000; margin: 0 auto 0 auto; background-image: url(/images/mainBG.gif); background-repeat: repeat-y; padding: 0; overflow: hidden; }
#InnerWrapper { width: 960px; margin: 0 auto 0 auto; background-color: #ffffff; }

#Logo { position: absolute; z-index: 99; margin: 36px 0 0 40px; border: 2px solid #bb7d58; }

#HeaderContainer { height: 275px; border-bottom: 2px solid #573b19; } 
#Header { clear: both; width: 960px; height: 275px; }
#Header .headerImage { position: absolute; }

#Content { width: 660px; margin: 0 auto 0 auto; float: left; }
#PaymentContent { width: 920px; margin: 20px; float: left; }

#MainNav { float: left; width: 260px; }
#MainNav ul { margin: 10px 20px 0 10px; padding: 5px 0 0 0; }
#MainNav ul li { list-style-type: none;}
#MainNav ul li a { color: #623100; font-size: 110%; font-family: Arial; display: block; line-height: 2em; text-decoration: none; padding-left: 15px; }
#MainNav ul li a.selected { color: #B75B00; }
#MainNav ul li a:hover { color: #623100; background-image: url(/images/nav-bg.gif); background-repeat: repeat-x; }
#MainNav ul li a.selected:hover { color: #B75B00; }
#MainNav ul ul { margin: 0 20px 0 10px; }

#FairtradeLogo  { padding: 26px; }
#FairtradeLogo  img {border: 1px solid #402000; }

#Footer { width: 980px; height: 10px; margin: 0 auto 10px auto; }
#FooterLinks { width: 980px; Margin: 0 auto 0 auto; padding: 0 0 10px 0; text-align: center;  }
#FooterLinks ul { margin: 0; padding: 0; }
#FooterLinks li { margin: 0; padding: 0 12px 0 12px; display: inline; list-style-type: none;}
#FooterLinks a {color: #402000; font-weight: normal; text-decoration: none; font-size: 85%; }

#ProductList { }
#ProductList h3 { }
#ProductList .twoPerRow .item {float: left; width: 300px; height: 225px; overflow: hidden; padding: 10px; }
#ProductList .threePerRow .item {float: left; width: 200px; height: 225px; overflow: hidden; padding: 10px; }
#ProductList .item img { border: 1px solid #402000; }
#ProductList .desc { font-size: 75%; }
#ProductList .price { padding: 10px 5px 0 0; text-align: right; font-size: 90%; font-weight: bold; }
#ProductList .types { float: left; padding-top: 10px; }

.clear { clear: both; height: 0px; visibility: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
.contentImageLeft { float: left; margin: 12px 15px 10px 0px; border: 1px solid #402000; clear: left; }

table.formTable { width: 450px; }
table.formTable td { vertical-align: top; width: 50%; padding: 5px 3px 5px 0; }
table.formTable td.right { text-align: right; }

table.dataGrid { width: 100%; margin: 10px 0 10px 0; }
table.dataGrid th { text-align: left; background-color: #B75B00; padding: 5px; color: #ffffff; }
table.dataGrid td { padding: 5px; border-bottom: 1px solid #bb7d58; }
table.dataGrid tr.alt { background-color: #ffffcc; }
table.dataGrid td.footer { background-color: #573b19; padding: 5px; color: #ffffff; font-weight: bold; }
table.dataGrid .right { text-align: right; }
table.dataGrid .center { text-align: center; }

.button { border: 1px solid #663300; color: #663300; background-color: #FFFFCC; font-size: 100%; font-weight: bold; }
.textbox { border: 1px solid #663300; color: #663300; background-color: #FFFFCC; }
input.textbox { width: 250px; }
textarea.textbox { margin-bottom: 5px; width: 250px; }

.errorText { color: #CC0000; font-weight: bold; }