/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.hammetthouse.com/
   TEMPLATE NAME:  Hammett House
   DATE:           Oct-16th-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background: #f2f0e9 url('images/bg.gif') repeat-x;
} 

/* ----------Centered Container Or the Layout--------------------- */

#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 960px;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
#contact label {
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
color: #8f6d31;
}
 
#contact input, textarea   {
width: 20em;
border: 1px solid #777;
font: 10pt 'Century Gothic', arial, Sans-Serif;
color: #38202c;
padding: 5px;
margin-bottom: 20px;
border: 1px solid #bab2a4;
}
 
#contact .button {
width: 91px;
border: 0px;
cursor: auto;
margin-bottom: 15px;
}

/* --------------HEADER------------- */

#header {
height: 200px;
background: url('images/header_pics.png') top right no-repeat;
}

/* --------------LOGO IN HEADER *always use this*------------- */

.logolink {
background-image: url('/images/logo.png');
background-repeat: no-repeat;
height: 200px;
width: 285px;
float: left
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.png);  width: 285px;  height: 200px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */

/* --------------TOPNAV------------- */

.images {
height: 72px;
}

.images a { float: left; }

#swap01 {background-image: url(/images/nav_home.gif);  width: 89px;  height: 64px; }
#swap02 { background-image: url(/images/nav_menu.gif); width: 72px;  height: 64px; }
#swap03 { background-image: url(/images/nav_desserts.gif); width: 95px;  height: 64px; }
#swap04 { background-image: url(/images/nav_seasonings.gif); width: 225px;  height: 64px; }
#swap05 { background-image: url(/images/nav_aboutus.gif); width: 107px;  height: 64px; }
#swap06 { background-image: url(/images/nav_press.gif); width: 72px;  height: 64px; }
#swap07 { background-image: url(/images/nav_directions.gif); width: 112px;  height: 64px; }
#swap08 { background-image: url(/images/nav_contact.gif); width: 136px;  height: 64px; }


.rollover { display: inline; } /* Allow setting widths and heights */
.rollover img { height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
}

#main .content {
padding: 28px 20px 20px 20px;
margin: 0px;
margin-right: 0px;
min-height: 170px; 
height: auto !important; 
}

.welcome {
background: url('/images/home_welcome.gif') no-repeat;
height: 25px;
width: 401px;
padding-bottom: 20px;
}

#main h1 {
color: #78002d;
font: 20pt 'Century Gothic', arial, Sans-Serif;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}

#main h2 {
color: #78002d;
font: bold 11pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
}

#main .goldheader {
color: #8f6d31;
font: 16pt times new roman;
letter-spacing: 1px;
}



#main p {
font: 10pt 'Century Gothic', arial, Sans-Serif;
color: #2b0018;
line-height: 22px;
padding-bottom: 17px;
}

#main a {
color: #78002d;
}

#main .leftimg {
float: left;
margin: 0px 20px 20px 0px;
border: 1px solid #b2911a;
}

#main .flash {
float: left;
margin: 0px 20px 20px 0px;
border: 1px solid #b2911a;
}


#main .borderimg {
float: right;
margin: 0px 20px 20px 20px;
border: 1px solid #b2911a;
}

#main ul.bullet{
padding: 5px 15px 0px 15px;
}

#main .bullet li{
background: url(/images/ornament.gif) no-repeat;
padding-left: 20px;
list-style-type: none;
display: block;
padding-top: 0px;
color: #78002d;
}

#main .bullet li a{
color: #78002d;
text-decoration: underline;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
padding-top: 15px;
}

#main .bullet li a:hover{ /*hover state CSS*/
color: #78002d;
}

#main .note{
font: 8pt 'Century Gothic', arial, Sans-Serif;
color: #8f6d31;
font-style: italic;
margin-top: 75px;
width: 960px;
}

#main .red{
color: #78002d;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
}





/* --------------MAIN THREE BLOCKS----------------*/

#threeblocks {
height: 100%;
height: auto;
min-height: 100%;
clear: both;
margin-top: 15px;
}

#threeblocks a {
color: #dad1bf;
}

#threeblocks p {
padding: 48px 25px 0px 30px;
color: #dad1bf;
font-weight: bold;
line-height: 13px;
font-size: 8pt;
}

#threeblocks .catering {
float: left;
width: 285px;
height: 214px;
margin-right: 20px;
padding: 0px;
clear:right;
background: url(/images/block_1.jpg) no-repeat; 
}


#threeblocks .specials {
float: left;
width: 285px;
height: 214px;
margin-right: 20px;
padding: 0px;
clear:right;
background: url(/images/block_2.jpg) no-repeat; 
}


#threeblocks .desserts {
float: left;
width: 285px;
height: 214px;
margin: 0px;
padding: 0px;
clear:right;
background: url(/images/block_3.jpg) no-repeat; 
}



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

.clear {
clear: both;
}

#footer, .push { 
clear: both;
width: 100%;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background: #78002d url('/images/footerbg.gif') repeat-x;
height: 95px;
height: auto;
margin-top: 30px;
}

#footer .content { 
width: 960px; 
margin: 0 auto; 
position: relative; 
text-align:center;
height: 95px;
font: 10pt 'Century Gothic', arial, Sans-Serif;
color: #8b734c
}

#footer p {
padding: 45px 0px 0px 0px
}

#footer ul {
margin: 5px 0px 0px 0px;
padding: 0px;
}

#footer li {
display: block;
list-style-type: none;
}

#footer li a {
color: #c2a77a;
text-decoration: none;
padding: 0px;
font: 8pt 'Century Gothic', arial, Sans-Serif;
}

#footer li a:hover {
text-decoration: underline;
}


/* --------------PRESS------------- */


#press{
} 

#press .left { 
float: left;
width: 400px;
margin-bottom: 15px;
} 

#press .right { 
float: right;
width: 400px;
margin-bottom: 15px;
} 

#press .videoleft { 
float: left;
width: 450px;
margin-bottom: 25px;
margin-right: 15px;
height: 328px;

} 

#press .videoright { 
float: left;
width: 450px;
margin-bottom: 25px;
height: 328px;
} 



#press .videoclip { 
float: left;
margin-right: 15px;
width: 330px;
} 


#press .pic { 
float: left;
border: 1px solid #b2911a;
margin-right: 25px;
width: 100px;
text-align:center;
} 

#press .desc { 
float: left;
font: 10pt 'Century Gothic', arial, Sans-Serif;
width: 225px;
line-height: 14px;
margin-top: 10px;
color: #2b0018;
} 

#press .videodesc { 
float: left;
font: 10pt 'Century Gothic', arial, Sans-serif;
width: 105px;
line-height: 14px;
margin-top: 10px;
color: #2b0018;
} 

#press .title { 
float: left;
font: bold 12pt 'Century Gothic', arial, Sans-serif;
color: #8f6d31;
letter-spacing: 1px;
width: 225px;
margin-top: 10px;
} 

#press .videotitle { 
float: left;
font: bold 12pt 'Century Gothic', arial, Sans-serif;
color: #8f6d31;
letter-spacing: 1px;
width: 105px;
margin-top: 10px;
} 


#pressLG {
text-align: center;
}

#pressLG img{
margin: 0px 20px 20px 0px;
border: 1px solid #b2911a;
}

#pressLG .button {
width: 8em;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
color: #fff;      
background: #aa9370;
padding: 8px;
border: 1px solid #aa9370;
cursor: auto;
margin-bottom: 15px;
}


/* --------------SEASONINGS------------- */

#seasonings {
} 

#seasonings .left { 
float: left;
width: 450px;

} 

#seasonings .right { 
float: right;
width: 450px;

} 


#seasonings .pic { 
float: left;
border: 1px solid #b2911a;
width: 200px;
} 

#seasonings .desc { 
float: right;
font: 10pt 'Century Gothic', arial, Sans-serif;
width: 225px;
line-height: 14px;
margin-top: 10px;
color: #2b0018;
height: 225px;



} 

#seasonings .title { 
float: right;
color: #78002d;
font: bold 11pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 225px;


} 

#seasonings input{
}

/* --------------DESSERTS------------- */

#desserts {
} 

#desserts .left { 
float: left;
width: 450px;
} 

#desserts .right { 
float: right;
width: 450px;
} 


#desserts .pic { 
float: left;
margin-right: 25px;
} 

#desserts .desc { 
float: left;
font: 10pt 'Century Gothic', arial, Sans-serif;
width: 400px;
line-height: 14px;
margin-top: 2px;
margin-bottom: 20px;
color: #2b0018;
} 

#desserts .title { 
float: left;
color: #8f6d31;
font: 16pt times new roman;
letter-spacing: 1px;
width: 400px;
margin-bottom: 20px;

} 

#desserts .name { 
float: left;
color: #78002d;
font: bold 11pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 400px;

} 


/* --------------MENU------------- */

#menu {
} 

#menu .section { 
float: left;
color: #8f6d31;
font: 16pt times new roman;
letter-spacing: 1px;
width: 960px;
height: 24px;
background: url('images/linebg.gif') repeat-x;
margin-bottom: 20px;
margin-top: 30px;
} 

#menu .sectiondetail { 
float: left;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
width: 960px;
margin-bottom: 20px;
color: #193203;
} 

#menu .sectiondetail a{ 
color: #36670a;
text-decoration: underline;
} 



#menu .left { 
float: left;
width: 450px;
} 

#menu .right { 
float: right;
width: 450px;

} 


#menu .itemleft { 
float: left;
width: 425px;
margin-bottom: 20px;
} 

#menu .itemright { 
float: right;
width: 425px;
margin-bottom: 20px;

} 


#menu .name { 
float: left;
color: #78002d;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 340px;
} 


#menu .desc { 
float: left;
font: 10pt 'Century Gothic', arial, Sans-Serif;
width: 340px;
line-height: 14px;
margin-top: 2px;
margin-bottom: 40px;
color: #2b0018;
} 

#menu .comment { 
float: left;
font: 10pt 'Century Gothic', arial, Sans-Serif;
width: 340px;
margin-top: 2px;
color: #8f6d31;
} 


#menu .price{ 
float: right;
color: #78002d;
font: bold 10pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 85px;
text-align: right;

} 

#menu .addon{ 
float: right;
color: #78002d;
font: bold 8pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 85px;
text-align: right;
} 


#menu .categories { 
float: left;
color: #8f6d31;
font: 16pt times new roman;
letter-spacing: 1px;
margin-bottom: 20px;
} 

#menu .categories a{ 
color: #8f6d31;
text-decoration: underline;
margin-bottom: 20px;

} 

#menu .categories a:hover{ 
color: #78002d;
text-decoration: underline;
} 


#menu hr {
	color: #8f6d31;
	height: 1px;
	width: 960px;
	padding-bottom: 50px;
	padding-top: 0px;
}



/* --------------DAILY SPECIALS------------- */

#specials { 
float: left;
width: 900px;
} 


#specials .title { 
float: right;
color: #8f6d31;
font: 16pt times new roman;
letter-spacing: 1px;
width: 500px;
margin-top: 20px;
} 

#specials .desc { 
float: right;
font: 10pt 'Century Gothic', arial, Sans-Serif;
width: 500px;
line-height: 14px;
margin-top: 10px;
color: #2b0018;
} 

#specials .date { 
float: left;
color: #78002d;
font: bold 11pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
width: 300px;
margin-top: 20px;
} 

#specials .right { 
float: right;
width: 500px;
padding-right: 100px;
} 


/* --------------CALENDAR------------- */
#calendar { 
color: #8f6d31;
font: 10pt 'Century Gothic', arial, Sans-Serif;
text-align: left;
} 

#calendar .month { 
color: #f2f0e9;
font: bold 12pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 40px;
} 

#calendar .day { 
color: #f2f0e9;
font: bold 11pt 'Century Gothic', arial, Sans-Serif;
letter-spacing: 1px;
line-height: 25px;
} 



#calendar .soup { 
color: #193203;
font:  10pt 'Century Gothic', arial, Sans-Serif;
} 

#calendar .soup a{ 
color: #193203;
font: 10pt 'Century Gothic', arial, Sans-Serif;
} 





/* ----- Customer Cart TABLES ---------- */
#awscustomertables table{margin: 1em; border-collapse: collapse;}
#awscustomertables td{ padding: .3em; border: 1px #F2F2F2 solid; }
#awscustomertables th{ padding: .3em; border: 1px #F2F2F2 solid; background: #F2F2F2; }