/* 

STYLE SHEET FOR [HIROZEN]
Created by [CANDICE OBAYASHI]

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images

Notes

*/



/* --------- 1. defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
		background-color: #5a4000;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-weight: normal;
		text-decoration: none;
		}
		
/*  --------- 2. structure  --------- */


		
#wrapper {
		background: #ffffff;
		width: 899px;
		border: 0;
		margin: 0% auto;
		}
		
#header01 {
		background-image: url(images/header_01.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header02 {
		background-image: url(images/header_02.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header03 {
		background-image: url(images/header_03.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header04 {
		background-image: url(images/header_04.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header05 {
		background-image: url(images/header_05.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header06 {
		background-image: url(images/header_06.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
#header07 {
		background-image: url(images/header_07.jpg);
		background-repeat: no-repeat;
		width: 899px;
		height: 140px;
		}
		
		
		
		
#logo {
		width: 414px;
		position: relative;
		margin-left: 29px;
		top: 15px;
		border: none;

		}
		

#nav {
		border: none;
		margin: 0px;
		}
		
		
		
#subnavBar {
		border: none;
		width: 899px;
		height: 22px;
		padding-left: 16px;
		background-image: url(images/subnav_bar.jpg);
		background-repeat: no-repeat;
		}
		
#indexContent{
		background-color: #ffffff;
		height: 467px;
		width: 899px;
		}
		
#content {
		border: none;
		background-color: #ffffff;
		margin-top: 40px;
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 10px;
		}
		
#menuHeader{
		display: block;
		padding-bottom: 10px;
		}
		
#divLeft{
		display: inline;
		float: left;
		width: 321px;
		padding-right: 50px;
		
		}
		
.leftImg {
		padding-bottom: 40px;
		}
		
#menuRight{
		display: inline;
		float: left;
		width: 400px;
		margin-bottom: 50px;
		}
		
table{
		text-align: left;
		border-collapse: collapse;
		
		}
		
td, th {
		padding-top: 3px;
		padding-bottom: 3px;
		}
		
td{		
		vertical-align: top;
		}
		
		
.darkTxt {
		color: #291e0a;
		}
		
.foodCol {
		width: 350px;
		padding-right: 10px;
		}
		

		
.priceCol {
		width: 40px;
		}
		
.rollCol{
		width: 310px;
		padding-right: 10px;
		}
		
.rollPrices{
		width: 80px;
		}

#subTable{
		margin-left: 10px;
		}
		
#subColLeft, #subColRight{
		width: 180px;
		}
		

		
#twoColLeft, #twoColRight{
		display: inline;
		float: left;
		width: 175px;
		}
		
#twoColLeft{
		padding-right: 20px;
		}

.smallCol{
		width: 150px;
		}
		



#footer {
		clear: both;
		width: 899px;
		height: 26px;
		padding-top: 8px;
		background-color: #291f0a;
		font: 10px, Arial, Verdana, Helvetica, sans-serif;
		text-align: center;
		color: #d7d8c5;
		border: 0;
		}
		


	/* float-clearing rules */
	
br.clear {
		clear: both;
		}

.separator {
		clear: both;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}

.clearFix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
		}		
		
/* ---------- 3. links and navigation ---------- */

* :focus { outline: 0; }

a img { border: none; }

A:link, A:visited {color: #8bb23b; font-weight: normal; text-decoration: none; }
A:hover, A:active {color: #669900; font-weight: normal; text-decoration: none; }

#nav {
		background: url(images/nav.jpg) no-repeat;
		width: 899px;
		height: 27px;
		margin: 0;
		padding: 0;
		border: 0;
		}
		
#nav span {
display: none;
}

#nav li, #nav a {
height:27px;
display:block;
}

#nav li {
float: left;
list-style: none;
display: inline;
}

#nav-01 {width: 225px; }
#nav-02 {width: 225px; }
#nav-03 {width: 225px; }
#nav-04 {width: 224px; }

#nav-01 a:hover {background:url(images/nav.jpg) 0px -27px no-repeat;}
#nav-02 a:hover {background:url(images/nav.jpg) -225px -27px no-repeat;}
#nav-03 a:hover {background:url(images/nav.jpg) -450px -27px no-repeat;}
#nav-04 a:hover {background:url(images/nav.jpg) -675px -27px no-repeat;}

#nav-01-on {width: 225px; background:url(images/nav.jpg) 0px -27px no-repeat;}
#nav-02-on {width: 225px; background:url(images/nav.jpg) -225px -27px no-repeat;}
#nav-03-on {width: 225px; background:url(images/nav.jpg) -450px -27px no-repeat;}
#nav-04-on {width: 224px; background:url(images/nav.jpg) -675px -27px no-repeat;}

#subnav ul{list-style-type: none; padding-left: 0; margin-left: 0;}
#subnav li {display: inline; font-size: 10px; line-height:21px; vertical-align: 50%; }
#subnav a:link, #subnav a:visited {color: #efe82e; font-weight: bold; text-decoration: none; }
#subnav, #subnav a:hover, #subnav a:active {color: #ffffff; font-weight: bold; text-decoration: none; }



#logo a, #logo a:link, #logo a:visited, #logo a:hover, #logo a:active {color: #0b3300;}
		



/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		color: #291e0a;
		}
		
p{
		font-size: 11px;
		line-height: 14px;
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-weight: normal;
		text-decoration: none;
		margin-top: 0px;
		text-indent: 0;
		}	

h1, h2, h3 {
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-weight: normal;
		text-decoration: none;
		margin-bottom: 15px;
		}
		
h1 {
		font-size: 18px;
		line-height: 26px; 
		}

h2 {
		font-size: 16px;
		line-height: 24px;
		}

h3 {
		font-size: 12px;
		line-height: 18px; 
		}
		
		
		
		
ul{
		font-family: Arial, Verdana, Helvetica, sans-serif;
		font-weight: normal;
		text-decoration: none;
		list-style-type: none;
		}
	
.menuSections {
		text-weight: bold;
		font-size: 14px;
		padding-bottom: 10px;
		color: #4a483d;
		}
		
.foodItem{
		font-size: 12px;
		line-height: 14px;
		}
		
.foodDesc{
		font-size: 10px;
		line-height: 12px;
		color: #4a483d;
		}

/* ---------- 5. images ---------- */


#imageContainer1 {
		float: left;
		width: 321px;
		height: 467px;
		margin-right: 1px;
		
		}


#imageContainer2 {
		float: left;
		width: 577px;
		height: 467px;
		
		}