* {
    margin:0;
    padding:0;
}
body {
	font-size:90%;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	background-color:#cc0000;
	color:#333333;
}

a {
	color:#990000;
	text-decoration:none;
}
a:focus, a:hover, a:active {
	color:#000000;
	text-decoration:underline;
}

div#outer {
    margin:10px auto;
	width:94%;
    min-width:760px;
    max-width:1024px;
    background-color:#fff;
	border: 2px solid #000;
}

#header {
    background: transparent url(../images/sushi-hk.jpg) no-repeat;
	background-position:center;
	height:200px;
	padding:2px 0 0 0;
}
#header h1 {
	display:none;
}


hr {display:none;}

h1, h2, h3, h4 {
font-weight:normal;
}

h1 {
font-size: 160%;
}

h2 {
font-size: 140%;
}

h3 {
font-size: 120%;
font-weight:bold;
color:#666666;
}

h4 {
font-size: 110%;
font-weight:bold;
padding: 4px 0 0 0;
}

/** Navigation **/
#navlist
{
margin: 20px 0 0 0;
padding-left: 20px;
list-style: none;
line-height:120%;
font-size:92%;
}

#navlist li 
{
padding-left: 16px;
padding-bottom: 6px;
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .2em;
}
span.mini
{
font-size:82%;
}

p.mini {
font-size:72%;
padding:0 0 0 10px;
margin:0;
}


/** Content Containers **/
#sub, #right {
	font: 100%/140% Arial, Verdana, Helvetica, sans-serif;
	margin-bottom:1em;
}

/******
div#sub is an extra wrapper, which allows the center column to come first in the source. 
#sub is floated left, with #center -the content column- nested within and floated to the right.
concept from http://www.positioniseverything.net/piefecta-rigid.html
******/
#sub {
	width:74%;
	float:left;
	position:relative;
}

/***
Containers should be named according to what they contain. not where they sit in the layout.
To make identifying each column more simple, I have named them according to their position.
***/
#center {
	width:65%;
	float:right;
	padding-top:30px;
}
#left {
	width:33%;
	float:left;
	/* the following 3 declarations are for design purposes only - not required for layout */
	padding:10px 0 10px;
}

	.left-content {
	padding:10px;
	}

#right {
	width:25%;
	float:right;
	background-color:#ffffff;
}
 
 /** Main Col Contents **/
#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}

/** Left Col Contents**/
#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

/** Right Col Contents **/
#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}


/** Forms **/
form {
	margin:1em 0;
}
legend {
	font:bold 1.1em/1.5 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#3A4F3B;
}
input.txt {
	width:98%;
	margin:0 auto .5em;
	border:2px solid #A5ACB2;
	background:#fff;
}
input.btn {
	background:#BED2B8 url(img/btn.gif) repeat-x;
	padding:.1em;
	width:7em;
	float:right;
	color:#fff;
	font:bold 1em/1.4 "Lucida Bright", Georgia, Times, serif;
	cursor:pointer;
}
input:focus, input.focus {
	border-style:inset;
}
label {
	margin-top:.5em;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	padding:1em 0 1em 0;
	font-size:72%;
	background-color:#ccc;
}
#footer p {
	text-align: center;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

.leftimg {
float:left;
margin:0 2px 1px 0;
padding:4px;
}
.rightimg {
float:right;
margin:0 0 1px 2px;
padding:4px;
}

.box-find-sushi {
padding:10px 2px;
text-align:center;
background-color:#eee;
}

.box-share {
padding:10px 2px 2px 2px;
background-color:#def9c6;
}

.box-glossary {
padding:10px 2px;
text-align:center;
background-color:#edd8a9;
}

.box-glossary p {
text-align:left;
padding:10px 10px 2px 10px;
font-size:92%;
line-height:110%;
}

blockquote {
padding-left: 20px;
font-size:92%;
}