body {
background:#555;
font-family:Verdana, Arial, Helvetica, sans-serif
}

#content {
position: relative;
background:#fbf5db url(./img/mast.jpg) no-repeat top left;
margin:0 auto;
min-height:800px;
overflow:hidden;
padding-bottom:200px;
padding-top:1px;
width:800px
}

#content a {
color:#95a105;
text-decoration:none
}

#content a.pdf {
color:#5f5f5f;
font-weight:400;
margin-left:1em;
text-decoration:none
}

#content a.pdf:hover {
background-color:#d4e161
}

#content a:hover {
text-decoration:underline
}

#content a:visited {
color:#5f5f5f
}

#content address {
font-style: normal;
color:#5f5f5f;
font-size:11px;
line-height:20px;
margin:21px 166px
}

#content h1 {
color:#e79801;
font-size:48px;
margin:50px 166px 21px
}

#content h2 {
color:#95a105;
font-size:12px;
font-weight:700;
margin:21px 166px -11px
}

#content h3 {
margin-left:166px;
margin-right:166px
}

#content img {
margin:21px 166px
}

#content img.imgRight {
display:inline;
float:right;
margin:5px 163px auto 21px
}

#content p {
color:#5f5f5f;
font-size:11px;
line-height:20px;
margin:21px 166px
}

/*---- sIFR ---*/
.sIFR-flash {
margin:0;
padding:0;
visibility:visible !important
}

.sIFR-ignore {
visibility:visible !important
}

.sIFR-replaced {
visibility:visible !important
}

.sIFR-replaced div.sIFR-fixfocus {
float:none;
letter-spacing:0;
margin:0;
overflow:auto;
padding:0
}
.sIFR-active h1{
    	visibility: hidden;
    }
.sIFR-unloading .sIFR-flash {
visibility:hidden !important
}

.sIFR-alternate {
display:block;
height:0;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:0
}

.sIFR-dummy {
height:0;
margin-left:42px;
width:0;
z-index:0
}

/* here's where things get ugly five classes. my only excuse is it is simple: each picture is a different width the alternatives are more involved */
li.about a {
background:url(./img/about.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:75px
}

li.about a.active {
background-position:-75px 0
}

li.about a:hover {
background-position:-75px 0
}

li.contact a {
background:url(./img/contact.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:106px
}

li.contact a.active {
background-position:-106px 0
}

li.contact a:hover {
background-position:-106px 0
}

li.deals a {
background:url(./img/deals.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:120px
}

li.deals a.active {
background-position:-120px 0
}

li.deals a:hover {
background-position:-120px 0
}

li.cooking a {
background:url(./img/cooking.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:120px
}

li.cooking a.active {
background-position:-120px 0
}

li.cooking a:hover {
background-position:-120px 0
}

li.directions a {
background:url(./img/directions.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:90px
}

li.directions a.active {
background-position:-90px 0
}

li.directions a:hover {
background-position:-90px 0
}

li.menus a {
background:url(./img/menus.jpg) no-repeat 0 0;
display:block;
float:left;
height:37px;
overflow:hidden !important;
width:80px
}

li.menus a.active {
background-position:-80px 0
}

li.menus a:hover {
background-position:-80px 0
}

#demoalign {
   list-style: none;
   width: 470px;
   margin: -1em auto 6em auto;
   line-height: 0
}
#demoalign li {
   float: left;	/* get rid of this and the images will align at the bottom instead of the top */
   display: inline;
   margin-left: 50px;
/*	border: 1px solid #666 */
}
#content li img {
	margin: 0;
	padding: 0;
}

#demoalign li.first-child {
   margin-left: 0
}

#cafemovie { display: block; width: 425px; margin: 0 auto }
/* navigation, this get's ugly, sorry */
ul#navigation {
background:#9fb02f url(./img/navbackground.gif);
clear:both;
display:block;
height:38px;
margin-top:157px;
overflow:hidden;
padding-left:166px;
width:634px
}

ul#navigation li {
display:inline
}

#storefront  {
float: right;
position: absolute; 
right: 0; 
margin: 0;
padding: 0;
top: 246px
}