@charset "utf-8";
/* CSS Document */

/*General style */
body {
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size:small;
	color: black;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-color: #cc0000;
	/*white-space: pre; Note: I try to use PRE tag to keep all space format but it doesn't work on IE while it is work on Firefox but I have to use BR tag to get text to a new line. So better not use it */
}

/* Division Style */
#container {
	width: 960px;  
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
/*	text-align: left; this overrides the text-align: center on the body element. */
}


#header{
	margin: 2em 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 7px 5px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#main{
	border:solid;
	border-color:#000000;
	background-color:#FFFFFF;

}

#footer { /*fomat for homepage bottom background only*/
	padding: 2px 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-color:#FFFFFF;
	white-space:pre;
	font-size:11px;
	text-align:center
	
}

#productMenu{
	list-style-type: none;
	background-color: #FFCCCC;
	padding: 5px;
	clear: left;
	height: 35px;
	width: 150px;
}





div.menu{
	background:#AD2A24;
	margin:0;
	padding:0;
}

div.menu a{/*The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. */
	color:#FFFFFF;
	background:#ffffff;
	text-decoration:none;
	text-align:left;
	font-size:12px;
	line-height:23px;
	font-family: Arial,Verdana, Helvetica, sans-serif;
	white-space: pre;
	padding:5px 5px;/*padding top&bottom and then left&right*/
}

div.menu a:link{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:active{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:visited{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:hover{
	color:#FFFFFF;
	background:#D65C60;
}
/*end menu rollover effect setting*/



#infoBar {
	text-align:right;
	padding: 8px 20px 0px 0px;/*format by clock wise start from top > right > bottom and then left*/
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333333;
	white-space:pre
}


/* Class style */
.noGapPlease{/*Try to get rid of  mysterious whitespace between the div but Not Work ah!*/
	border-width:0;
	border-spacing:0;
	margin:0;
	padding:0;
	

}

.SolidBorder{
	border:thin solid;
	border-color:#AFDDAE; 
	color:#003366;
	margin:0;
}
	
/*font&header format*/

h1{
	font-size:22px;
	color: #333333;
}
h2{
	font-size:18px;
	color: #333333;
}
h3{
	font-size:16px;
	color: #333333;
}
h4{
	font-size:12px;
	color: #333333;
}
h5{
	font-size:11px;
	color: #333333;
}
h6{
	font-size:9px;
	color: #333333;
}

p{text-align:justify;
color:#444444;
}

.red{
	color:#990000
}

.white{
	color:#FFFFFF;}

a.white:link{
	color:#FFFFFF;}

.yellow{
	color:#FFCC33
}

.smaller{font-size:smaller
}

.bold{font-weight:bolder
}

.greybg{background-color:#CCCCCC}


/*link format*/
a:link{
	color:#996666;
}
a:visited{
	color:#663333;
}
a:hover{
	color:#993333;
}
a.naked{
	text-decoration:none;
	font-weight:bold;
}

/* the gallery effect in recipe page*/
div.recipe
{
  margin: 15px;
  border: 1px solid #CC0000;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
  text-shadow:#003399;
  color:#990033;
  font-weight:bold
}	
div.recipe img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.recipe a:hover img {border: 1px solid #0000ff;}