/*--------------------------------
เพิ่มการเรียกใช้ encoding ตัวอักษรของภาษา
--------------------------------*/
@charset "euc-jp";
/*-------------------------------- 
ปรับแต่งค่าเริ่มต้นของบาง TAG ของ (X)HTML 
--------------------------------*/
* {
	margin: 0;
	padding: 0; /* สั่งให้ค่า margin และ padding ของบาง TAG ที่มีค่า default อยู่ให้เป็น 0 */
}
body {
	/* กำหนดค่าการแสดงผลหลักของทั้งหน้า ให้เป็นไปตามคำสั่งของ Attribute นี้ */
	font-family: "MS PGothic", "MS Gothic", sans-serif, serif;
	font-size: 12px; /* คุณสามารถเปลี่ยนขนาดตัวหนังสือของทั้งหน้าเวปของคุณที่นี่ */
	color:#333333; /* คุณสามารถเปลี่ยน สีของตัวหนังสือของคุณได้ที่นี่ */
	background-color:#E4E4E4;
	/*background-image: url(../images/bg.gif);*/ /* คุณสามารถเปลี่ยนภาพพื้นหลัง หรือ เพิ่มสี background ของคุณได้ที่นี่ */
	
	/*--------------------------------------------------------------
	เปลี่ยนระยะห่างจากขอบเข้ามาด้านในได้ที่นี่ ในกรณีนี้หมายถึง 
	ขอบซ้าย และ ขวาเข้ามาข้างใน 0 ขอบบนเข้ามาข้างใน 0 และ ขอบล่างเข้ามาข้างใน 30 
	ตัวเลขตัวแรก คือ การกำหนดขอบจากด้านบน
	ตัวเลขตัวที่สอง คือ การกำหนดขอบจากด้านขวา
	ตัวเลขตัวที่สาม คือ การกำหนดขอบจากด้านล่าง
	ตัวเลขตัวสุดท้าย คือ การกำหนดขอบจากด้านซ้าย
	
	ในกรณีที่ ค่าของขอบเป็นค่าเดียวกันหมดสามารถเขียนด้วยตัวเลขตัวเดียว
	padding: 5px;
	
	ในกรณีที่ ขอบบนและล่างเป็นค่าที่เท่ากัน 1 ค่า และ ขอบซ้ายและขวามีค่าเท่ากันอีก 1 ค่า
	สามารถเขียนได้แบบนี้
	padding: 10px 15px; จะหมายถึง บนและล่างห่าง 10px ซ้ายและขวาห่าง 15px
	
	ในกรณีที่เราต้องการกำหนดค่าของขอบใด ขอบหนึ่งเพียงขอบเดียว สามารถเขียนบอกเฉพาะ
	โดยตรงเลยก็ได้ หรือ จะเขียนแบบตัวเลขก็ได้ เช่นกรณีที่กำหนดตอนนี้ คือ มีระยะห่างจาก
	ขอบล่างเข้ามา 30px สามารถเขียนได้ดังนี้
	padding-bottom: 30px; หรือ
	padding: 0 0 30px; หมายถึง ขอบบน 0 ชอบซ้ายขวา 0 ขอบล่าง 30px
	--------------------------------------------------------------*/
	padding: 0 0 30px; 
}
img {
	border: none; /* สั่งให้รูปภาพไม่มีเส้นขอบเกิดขึ้น ไม่ว่ากรณ๊ใดใด */
}

/*----------------
Class ที่ใช้ร่วมทุกหน้า
----------------*/
.clear {
	clear: both; /* เรียกใช้เมื่อมีการ float ซ้ายขวาเกิดขึ้น ให้วางไว้ต่อจาก การ float ซ้ายขวาเสร็จสิ้น */
}
span.pageactive { /* ส่วนนี้เป็นส่วนที่ใช้กับหน้าที่กำลังเปิดดูอยู่ */
	color: red;
	font-weight: bold;

}

/*-----------------------------
Attribute นี้ใช้คุมส่วนบนสุด (Header)
-----------------------------*/
h1#header {
	width: 763px; /* ปรับความสูง และ ความกว้างตามขนาด Layout ของคุณ */
	height: 84px;
	margin: 0 auto 0; /* สั่งให้แสดงผลส่วนนี้กลางจอ */
	clear: both;
}

/*-----------------------------
Attribute ต่อไปนี้ใช้คุมส่วน contents 
-----------------------------*/
div#contents {
	width: 763px; /* ปรับความกว้างตามขนาด Layout ของคุณ */
	margin: 0 auto; /* สั่งให้แสดงผลส่วนนี้กลางจอ */
	padding-bottom: 5px; /* สั่งให้มีระยะจากขอบล่างสุด 5 px คุณสามารถปรับตาม Layout ของคุณ ถ้าไม่มีลบบรรทัดนี้ออก */
	background-image: url(../images/bg2.gif); /* ปรับแก้สี เพิ่มภาพ background ของคุณได้ที่นี่ */
	clear: both;
}

/*---------------------
ส่วนของ Navigation ด้านบน
---------------------*/
div#navigation { /* ใช้ครอบ Navigation ทั้งซ้ายและขวา */
	width: 720px; /* ปรับแก้ความกว้าง ที่นี่ */
	margin: 0 auto;
	padding-bottom: 10px;
	clear: both;
}
	/*-----------------------------------------
	ส่วนของ Navigation ด้านซ้ายบน กรณีที่ใช้เป็นตัวหนังสือ
	-----------------------------------------*/
	#navigation p.home { /* ถ้า Home Navigation ของคุณเป็นตัวหนังสือ ให้เขียน p แล้วเรียก class นี้ไปใช้ */
		width: 100px;
		float: left;
		margin-top: 10px;		
	}
	
	
		#navigation p.home a { /* เปลี่ยนสีและลักษณะของ link ที่นี่ครับ */
		color: red;
		text-decoration: underline;
	}
	#navigation p.home a:hover { /* เปลี่ยนสีและลักษณะของ link ที่นี่ครับ */
		color: gray;
		text-decoration: none;
	}
	/*---------------------------------------
	ส่วนของ Navigation ด้านซ้ายบน กรณีที่ใช้เป็นรูปภาพ
	---------------------------------------*/	
	#navigation ul { /* ถ้า Home Navigation ของคุณเป็นรูปภาพ ให้เขียน ul li แล้วเรียก id นี้ไปใช้ */
		float: left;
		list-style: none;
		width: 71px; /* ปรับความกว้างให้เท่าขนาดภาพปุ่ม */
		height: 21px; /* ปรับความสูง ให้เท่าขนาดภาพปุ่ม */
	}
		#navigation li {
			float: left;
			text-indent: -9999px;
		}
		#navigation li a {
			display: block;
			width: 71px; /* ปรับความกว้างให้เท่าขนาดภาพปุ่ม */
			height: 21px; /* ปรับความสูง ให้เท่าขนาดภาพปุ่ม */
		}
		#navigation li#home a {
			background-image: url(../images/home.gif); /* เปลี่ยน path ภาพสถานะ ปรกติ ของ Home Navigation ที่นี่ */
		}
		#navigation li#home a:hover {
			background-image: url(../images/home2.gif); /* เปลี่ยน path ภาพสถานะ rollover ของ Home Navigation ที่นี่ */
		}
	/*-----------------------------------
	ส่วนนี้ควบคุม Page Navigation ทางด้านขวาบน 
	-----------------------------------*/
	#navigation p.pagenumber {
		width: 220px; 
		float: right;
		text-align: right;
		margin-top: 5px;
	}
		#navigation p.pagenumber a { /* แก้ไขค่าต่าง ๆ ของ link สถานะปรกติที่นี่ */
			color: blue;
			text-decoration:none;
			font-weight: bold;
		}
		#navigation p.pagenumber a:hover { /* แก้ไขค่าต่าง ๆ ของ link สถานะ RollOver ที่นี่ */
			color: gray;
			text-decoration: none;
			font-weight: bold;
			text-decoration: underline;
		}

/*---------------------------------
ส่วนนี้ควบคุม Page Navigation ทางด้านล่าง 
---------------------------------*/
div#nav_bottom { /* ใช้ครอบ Page Navigation ด้านล่าง */
	width: 720px; /* แก้ไขความกว้าง ที่นี่ */	
	margin: 0 auto;
	clear: both;
}
	div#nav_bottom p {
		text-align: right;
		padding-top: 5px;
	}
	div#nav_bottom p a { /* แก้ไขค่าต่าง ๆ ของ link สถานะปรกติที่นี่ */
		color: blue;
		text-decoration: none;
		font-weight: bold;
	}
	div#nav_bottom p a:hover { /* แก้ไขค่าต่าง ๆ ของ link สถานะ RollOver ที่นี่ */
		color: gray;
		text-decoration: underline;
		font-weight: bold;
	}

/*---------------------------------------
ส่วนนี้ควบคุม Layout ที่ใช้บรรจุเนื้อหา และ รายละเอียด
---------------------------------------*/
div.details { /* ใช้ครอบส่วนเนื้อหารายละเอียดทั้งหมด */
	width: 720px; /* สามารถแก้ไขความกว้างของตัวครอบได้ที่นี่ึ */
	margin: 0 auto 10px;
	padding-bottom: 10px;
	background:#E8E8E8;	
	clear: both;
	border-bottom: 1px dotted #FF9900;
}
div.details img { /* ควบคุมรูปภาพ ทางด้านซ้าย */
	width: 88px;
	float: left;
	margin: 10px 0 15px 15px;
}
div.detailsright { /* ควบคุมรายละเอียดทางด้านขวา */
	width: 550px; /* แก้ไขความกว้างที่นี่ */
	float: right;
	padding: 10px;
}
div.detailsright h2 {
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px;
}
div.detailsright h2 span {
	margin-left: 20px;
}
div.detailsright h2 a {
	color: #B22400;
	text-decoration: underline;
}
div.detailsright h2 a:hover {
	color: #B22400;
	text-decoration: none;
}
/*--------------
ส่วนนี้ควบคุม Footer
--------------*/
#footer {
	width: 763px; /* แก้ไขความกว้าง Footer ตาม Layout ของคุณที่นี่ */	
	margin: 0 auto;
	clear: both;
}
#w3c {
	width: 720px;
	margin: 10px auto 0;
}