/* stylesheet for Basil Package Design */

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body{ line-height: 1; }
blockquote, q{ quotes: none; }
table{ border-collapse: collapse; border-spacing: 0; }
header, nav, article, footer, address, section, aside{ display: block; }

body{ background: #474747 url(../images/navigation.jpg) top center repeat-x; color: #fff; font: 12px arial, helvetica, sans-serif; }
a:link, a:visited, a:active { color: #fff; }
a:hover { text-decoration: none;  color: #b4d75f; }
#container{ width: 1000px; padding: 0 100px; margin: 0 auto; background: url(../images/logo.jpg) top right no-repeat; }
#home #container{ background: url(../images/home.jpg) top left no-repeat; }

nav{ float: left; width: 600px; }
nav ul li{ list-style-type: none; display: block; float: left; }
nav ul li a{ display: block; float: left; height: 25px; padding: 20px 20px 5px; font: bold 16px Arial, hevetica, sans-serif; }
nav ul li a:link,
nav ul li a:visited{ color: #fff; text-decoration: none; }
nav ul li a:hover,
nav ul li a:active{ background: #fff; color: #474747; }
nav ul li#active a:link,
nav ul li#active a:visited{ color: #b4d75f; }
nav ul li#active a:hover,
nav ul li#active a:active{ color: #b4d75f; background-color: transparent; cursor: default; }

header h1{ float: right; width: 300px; height: 165px; text-indent: -9999px; }
#home header h1{ width: 525px; height: 325px; float: none; }
#home header h1{ clear: both; float: left; }
#home header p{ font: 24px Arial, hevetica, sans-serif; color: #b4d75f; padding-top: 125px; }
#home header p strong{ color: #fff; font-weight: normal; }

#page_body{ clear: left; padding: 25px 0 25px 25px; }
#home #page_body{ border-top: 1px solid #9d9d9d; }

h2{ font: 30px Georgia, Times, "Times New Roman", serif; color: #b4d75f; }
h3{ font: bold 18px Times, "Times New Roman", Georgia, serif; color: #b4d75f; margin: 5px 0 10px; }
#page_body p,
#page_body ul,
#page_body ol{ font: 14px/1.5em arial, helvetica, sans-serif; margin-bottom: 15px; }
#page_body li,
#page_body dd{ margin-left: 20px; }

section{ float: right; width: 625px; padding: 25px 0 75px 50px; border-left: 1px solid #9d9d9d; }

aside{ float: left; width: 200px;  padding: 25px; }

#three{ clear: both; }
#three .column{ width: 255px; height: 500px; padding: 10px; margin-right: 30px; margin-bottom: 5px; float: left; border: 4px solid #5c654a; }
html>body #three .column{ height: auto; min-height: 500px; max-height: 500px; }
#three .last{ margin-right: 0; }
.column p,
.column li{ font-size: 11px !important; line-height: 1.25em !important; }

.add input { border: none; display: block; float: right; background: #fbfbfb; padding: 5px; margin-top: -24px; font: bold 14px Georgia, Times, "Times New Roman", serif; }
.add a:link,
.add a:visited{ color: #474747; text-decoration: none; border: 2px solid #fbfbfb; }
.add input:hover,
.add a:active{ background: #b4d75f; border-color: #b4d75f; }

footer{ color: #aaa; padding: 25px;  }

.clear{ clear: both; }

#products { width: 75%; }

a.product-grouping { 
    display: block; 
    color: #ffffff; 
    font-size: 14pt; 
    text-decoration: none; 
    float: left; 
    margin: 20px; 
    border: 1px solid #cccccc;
    padding: 5px;
    height: 70px;
    width: 170px;
    text-align: center;
}

a.product-grouping:hover { background: #666666; color: #b4d75f; border: 1px solid #b4d75f; }

img.left { float: left; margin-right: 5px; }
img.right { float: right; margin-left: 5px; }
img.border { border: 4px solid #5c654a; background: #fff; padding: 5px; }
img.thumbnail { max-width: 250px; }

label { display: block; font-weight: bold; }

.product-special { border: 4px solid #5c654a; padding: 5px; text-align: center; float: left; width: 200px; height: 150px; margin: 10px; }
.product-special a { text-decoration: none; }