/* -----------------------------------
Site:       Colonel Ricketts Hard Cider
CSS author: Phil Glatfelter, based on css from Russ Weakley at Max Design - his 3 column fixed width layout.
Updated:	Nov 5, 2010
Updated by: Date here
----------------------------------- */


/* -----------------------------------
simple reset
----------------------------------- */

body { margin: 20px; padding: 0pt; font: 100%/1.4 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif; color: rgb(68, 68, 68); background: none repeat scroll 0% 0% #410000; }

h1,h2,h3,h4,h5,h6 { margin: 0pt 0pt 1em; line-height: 1.1; }

h2,h3 { color: #3e1c1a; }

h2 { font-size: 150%; }

h3 { font-size: 115%; }

h4 { font-size: 118.75%; line-height: 1.3em;}

h5 { font-size: 112.5%; color: #b26604; line-height: 1.3em;}

h6 { font-size: 90%; line-height: 1.3em;}

p { color: #000; line-height: 1.4em; font-size: 90%; margin: 0pt 0pt 0.8em; }

img { border: 1px solid #000; }

table {
border-collapse: collapse;
width: 490px;
border: 1px solid #410000;
margin-bottom: 1em;
}

thead {
background-color: #880000;
 }
 
thead th
{
padding: 0.3em 1em;
text-align: left;
color: #fff;
}
  
tr
{
vertical-align: text-top;
}

th, td
{
padding: 0.3em 1em 0.3em 1em;
text-align: left;
border: 1px solid #410000;
}

td 
{
background-color: #f9fdec;
}

table h4
{
margin-top: 0;
padding-top: 0;
 }

table p
{
font-size: 80%;
}

caption
{
text-align: left;
padding: 0.5em 0 0.2em 0;
font-size: 130%;
color: #6d4d01;
font-weight: bold;
border: none;
}
 
.semidry
{
background-color: #6d4d01;
color: fff;
}
  
.semisweet
{
background-color: #440000;
color: fff;
}
  
.sweet
{
background-color: #880000;
color: fff;
}
   
.widehead
{
background-color: #ebd7a4;
color: #410000;
padding: 0.3em 0.5em 0.3em 1em;
}

.white
{
color: #fff;
font-weight: bold;
 }

/* -----------------------------------
layout
----------------------------------- */

#container
{
margin: 0 auto;
width: 940px;
background: #f9fdec;
}

/* -----------------------------------
header
----------------------------------- */

#header
{
position: relative;
background: #f9fdec url(../images/GlassesForHeadC980x300p.jpg) no-repeat;
padding: 20px 20px 20px 25px;
}

#header h1
{
margin: 0;
padding: 0 0 0;
}

#header h1 img { display: block; border: none;}

#header h2
{ 
position: absolute;
right: 0;
top: 9.3em;
font-size: 1.3em;
text-align: right;
padding: 0 1em 0 0;
color: #410000;
}
 
 /* -----------------------------------
primary vaigation
----------------------------------- */

#navigation
{
float: left;
background: #410000;
padding-left: 15px;
width: 925px;
border-top: 10px solid #410000;
}

#navigation ul
{
margin: 0;
padding: 0 0 0 185px;
}

#navigation li
{
font-size: 85%;
display: inline;
}

#navigation a
{
float: left;
margin: 0 2px 0 0;
background: #860000 url(../images/SpriteNavA160_160_300x5p.gif) no-repeat -320px 0;
color: #fff;
text-decoration: none;
}

#navigation span
{
display: block;
padding: 6px 15px;
background: url(../images/SpriteNavA160_160_300x5p.gif) no-repeat top right;
}
 
#navigation li a:hover { color: #fff; background-color: #b10f12; }

/* -----------------------------------
content
----------------------------------- */

#content-container
{
float: left;
width: 940px;
background: #f9fdec;
}

#content-container h2, h3
{
color: #6d4d01;
margin: 0 0 0.3em 0;
}

#content
{
position: relative;
float: left;
width: 490px;
padding: 20px 0;
margin: 0 0 0 30px;
}

#content h4
{
font-size: 90%;
color: #410000;
margin: 1em 0 0.3em 0;
padding: 0;
}

/* -----------------------------------
section navigation
----------------------------------- */

#section-navigation
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}

#section-navigation ul
{
margin: 0;
padding: 0;
}

#section-navigation li
{
display: inline; 
}

#section-navigation a
{
display: block;
margin: 4px 0 0;
color: #fff;
background: #410000 url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat -980px 0;  
text-decoration: none;  
}

#section-navigation span
{
display: block;
padding: 7px 10px;
background: url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat -1140px 100%;   
}

#section-navigation a:link, #section-navigation a:visited
{
color: #fff;
}

#section-navigation a:hover { color: #b26604; }

#section-navigation img
{
margin-top: 1em;
margin-bottom: 0.3em;
}
 
#section-navigation h3 { margin: 0.5em 0 0.3em 0; font-size: 80%;} 

#section-navigation h4
{
font-size: 100%;
color: #b26604;
margin: 1em 0 0.3em 0;
padding: 0;
}

#section-navigation p
{
font-size: 80%;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#section-navigation p span
{
margin: 0;
padding: 0;
color: #860000;
font-weight: bold;
 }
 

/* -----------------------------------
aside
----------------------------------- */

#aside
{
float: right;
width: 150px;
padding: 20px 0;
margin: 0 30px 0 0;
display: inline;
margin-top: 10px;
}

#aside h3 { margin: 0 0 0.3em 0; } 

#aside h4
{
font-size: 90%;
color: #410000;
margin: 1em 0 0.3em 0;
padding: 0;
}

#aside p
{
font-size: 80%;
}

#aside ul
{
font-size: 80%;
margin: 0;
padding-left: 14px;
}



/* -----------------------------------
footer
----------------------------------- */

#footer
{
clear: both;
background-color: #410000;
height: 1%;
margin: 0 0 0;
padding: 10px 0;
color: #fff;
font-size: 80%;
text-align: center;
}

#footer li
{
display: inline;
margin: 0 15px 0 0;
}

#footer a:link, #footer a:visited { color: #fff; }

/* -----------------------------------
classes
----------------------------------- */

.clear
{
clear: both;
}

.structural
{
position: absolute;
left: -500em;
}
 
 .align-left
{
float: left;
margin: 0 15px 10px 0;
}

 .align-right
{
float: right;
margin: 0 0 0 15px;
}

.fixedimage
{
position: absolute;
right: 160px;
top: 300px;
width: 300px;
height: 300px;
border: none;
}

#home #navigation .home a,
#tour #navigation .tour a,
#products #navigation .products a,
#directions #navigation .directions a,
#buy #navigation .buy a,
#about #navigation .about a {
background-color: #f9fdec;
color: #000;
cursor: default;
}

.box
{
float: left;
width: 490px;
margin: 0 0 15px;
background: #E3E3B9 url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat 0 0;
}

.box h5
{
color: #b26604;
margin-bottom: 0.5em;
}

.box h3
{
font-size: 105%;
margin: 0 0 0.2em 0;
color: #260609;
}

.box p
{
font-size: 85%;
}

.box span
{
color: #880000;
}

.box a:link, a:visited
{
color: blue;
text-decoration: underline;
}

.inner
{
float: left;
width: 460px;
padding: 15px;
background: url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat -490px 100%;
 }
 
#aside .box 
{
width: 150px;
background: #FFC125 url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat -1300px 0;
}
 
#aside .inner
{
width: 120px;
background: url(../images/Spritef9fdec1600px5p_490_490_160_160_150_150p.gif) no-repeat -1450px 100%;
}
  
.strong
{
font-weight: bold;
}

#content .special, #section-navigation .special
{
margin-top: 10px;
}

#section-navigation .noround a
{
background: none;
text-decoration: none;
color: blue;
}

#section-navigation .noround a:hover
{
color: purple;
}