/* Is the following needed: @charset "utf-8"; */
/* CSS Document for the English Garden Salon site in Japanese */

body {
	background-color: #232323;
	}
	
#wrapper {
	width: 800px;
	/* Is the following necessary */
	height: auto;
	margin: auto;
	border: 0px;
	padding: 0px;
	}

/* HEADER */

#header {
	height: 143px;
	margin: 0px;
	border: 0px;
	padding: 0px;
	background-color: #232323;
	/* Is the CSS the best place to put the logo?
	   (it does allow for the flag to b eadded
		background: url(img/header.jpg) no-repeat top left; */
	}

#menu {
	/* The id is only for "ul" and "li" and does nothing for the "div" object.
	Is the following recommended as good programming practice?
	It does not seem necessary  */
	}

#menu ul {
	margin: 0px;
	border: 0px;
	padding: 0px;
	list-style-type: none;
	}

#menu li{
	float: left;
	}

/* FOOTER */

#footer {
	margin-bottom: 3px;
	border: 0px;
	padding: 0px;
	text-align: center;
	}

#index {
	margin-bottom: 3px;
	border: 0px;
	padding: 15px;
	background: #d4d9df;
	font: 14px "MS PGothic", Osaka, san-serif;
	}

/* HOME PAGE */

#home_jp {
	/* Why can`t I remove the following, I thought the height
	   should be adjusted for the image and div "home_content" */
	/* Remove the following later */
	height: 1150px; /* 1050px - 1150px - 1350px*/
	margin: 0px;
	border: 0px;
	padding: 0px;
	background-color: #ffffff;
	}

#home_en {
	/* Why can`t I remove the following, I thought the height
	   should be adjusted for the image and div "home_content" */
	/* Remove the following later */
	height: 1330px; /* 1250px - 1330px - 1450px */
	margin: 0px;
	border: 0px;
	padding: 0px;
	background-color: #ffffff;
	}
	
#home_content{
	width: 450px;
	margin: 0px;
	border: 0px;
	padding: 0px;
	float: left;
	}

#home_event_jp {
	width: 425px;
	margin-left: 30px;
	margin-top: 35px;
	border: 1px solid #cccccc;
	padding: 5px;
	/* Add "MSP go-shi-kku" later */
	font: 14px "MS PGothic", Osaka, san-serif;
	line-height: 21px;
	color: #232323;
	}
	
#home_event_en {
	width: 380px;
	margin-left: 30px;
	margin-top: 30px;
	border: 1px solid #cccccc;
	padding: 5px;
	/* Add "MSP go-shi-kku" later */
	font: 12px "MS PGothic", Osaka, san-serif;
	line-height: 21px;
	color: #232323;
	}
	
#home_event_title_jp {
	font: 14px "MS PGothic", Osaka, san-serif;
	font-weight: bold;
	color: #232323;
	}
	
#home_event_title_en {
	font: 14px "MS PGothic", Osaka, san-serif;
	font-weight: bold;
	color: #232323;
	}
	
#home_detail {
	margin: 20px 20px 20px 32px;
	border: 0px;
	padding: 0px;
	font: 12px "MS PGothic", Osaka, san-serif;
	line-height: 18px;
	color: #232323;
	}

#home_side {
	width: 10px;
	margin-left: 500px;
	margin-top: 0px;
	border: 0px;
	padding: 10px;
	}

/* EVENTS (Finishing School) */

#event {
	margin: 0px;
	border: 0px;
	padding: 30px 70px 30px 70px;
	background-color: #ffffff;
	font: 14px "MS PGothic", Osaka, san-serif;
	color: #232323;
	line-height: 1.5em;
	}

#event_text {
	padding-left: 20px;
	}

/* PROFILE (Lecturers) */

#profile {
	margin: 0px;
	border: 0px;
	padding: 30px;
	background-color: #ffffff;
	font: 14px "MS PGothic", Osaka, san-serif;
	color: #232323;
	line-height: 1.5em;
	}

#profile h2 {
	background-color:#D7DCE1;
	line-height:1.75em;>
	}

#profile h3 {
	font-size:16px;
	font-weight:bold;>
	}

#profile h4 {
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;>
	}

	
/* ACCESS */

#access {
	height: 725px;
	margin: 0px;
	border: 0px;
	padding: 30px;
	background-color: #ffffff;
	font: 14px "MS PGothic", Osaka, san-serif;
	color: #232323;
	line-height: 1.5em;
	}

/* ENQUIRY (Applications) */

#enquiry {
	height: 850px;
	/* The application form height is in the "iframe" command on the page code */
	margin: 0px;
	border: 0px;
	padding: 40px;
	/* Why does the page move right only if I set the padding to 30px? */
	background-color: #ffffff;
	}

/* SHOP */

#shop1 {
	/* Why is the height below calculated automatically 
	   but not for the home or other pages?
	   Also the web page aligns more to the right for some reason */
	height: 450px;
	width: 740px;
	margin: 0px;
	border: 0px;
	padding: 30px;
	background-color: #ffffff;
	font-size: 25px;
	float: left;
	}
#shop2 {
	/* Why is the height below calculated automatically 
	   but not for the home or other pages?
	   Also the web page aligns more to the right for some reason */
	height: 325px;
	width: 740px;
	margin: 0px;
	border: 0px;
	padding: 30px;
	background-color: #ffffff;
	font-size: 25px;
	float: left;
	}

/* MEDIA */

#media {
	/* Why is the height below calculated automatically 
	   but not for the home or other pages?
	   Also the web page aligns more to the right for some reason */
	margin: 0px;
	border: 0px;
	padding: 30px;
	background-color: #ffffff;
	font-size: 20px;
	}