@charset "utf-8";
/* ================================
# Cascading Style Sheets Document
# ================================
# Title : local.css
# Author : Mr. Anuluck Nantajan
# Email : anuluck@minddezign.com
# URL : www.minddezign.com
# Description : CSS Structure modify layout
# Created : 2008-08-01
# Last modified : 2008-08-22
# Copyright : MindDezign 2008.
# ================================ */

/* ######### CSS Structure: Body ######### */
body {
	margin: 0px;
	padding: 0px;
	background: #393939 url(../images/theme/bg-body.png) repeat-x;
	font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #333333;
}
/* ######### CSS Structure: Header ######### */
#wrapper-header {
	width: 778px;
	height: 153px;
	margin: 0px auto; /* top & bottom, right & left */
}
/* ######### CSS Structure: Logo ######### */
#logo-header {
	float: left;
	padding: 85px 0px 0px 0px;
}
#logo-header h1 {
	margin: 0px;
	/*text-transform: lowercase; /* แปลงเป็นตัวพิมพ์เล็ก*/
	letter-spacing: -2px; /* ช่องไฟ */
	font-size: 3em;
	font-weight: bold;
	color: #FFFFFF;
}
#logo-header h1 a {
	text-decoration: none;
	color: #FFFFFF;
}
#logo-header a {
	text-decoration: none;
	color: #FFFFFF;
}
/* ######### CSS Structure: Menu tip ######### */
#menu-top {
	float: right;
}
#menu-top ul {
	margin: 0px;
	padding: 110px 0px 0px 0px;
	list-style: none;
}
#menu-top li {
	display: inline; /* แสดงตามแนวนอน */
}
#menu-top a {
	display: block;
	float: left;
	margin-left: 20px;
	text-decoration: none;
	font-size: 1.0em;
	color: #FFFFFF;
}
#menu-top a:hover, .page-active a {
	border-bottom: 2px solid #FFFFFF;
}
/* ######### CSS Structure: Page ######### */
#wrapper-page {
	background: #FFFFFF url(../images/theme/bg-page.png) repeat-x left bottom;
}
#page {
	width: 778px;
	margin: 0px auto;
	padding: 30px 0px;
}
/* ######### CSS Structure: Content ######### */
#wrapper-content {
	float: left;
	width: 510px;
}
.topic-title h2 {
	font: 1.82em normal;
	letter-spacing: -1px;
	border-bottom: 1px dashed #333333;
}
/* ######### CSS Structure: Sidebar ######### */
#wrapper-sidebar {
	float: right;
	width: 240px;
}
#wrapper-sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#wrapper-sidebar li {
	margin-bottom: 20px;
}
#wrapper-sidebar li ul {
	margin-top: 10px;
}
#wrapper-sidebar li li {
	margin: 0px;
	padding: 5px 0px;
	background: url(../images/icon/line_dot.png) repeat-x left bottom;
}
#wrapper-sidebar li li a {
	padding-left: 21px;
	background: url(../images/icon/bullet_black.png) no-repeat 1px 50%;
}
#wrapper-sidebar h2 {
	font-size: 1.6em;
	padding-left: 20px;
	background: url(../images/icon/sport_tennis.png) no-repeat left center;
}
#wrapper-sidebar a {
	color: #333333;
	text-decoration: none;
}
#wrapper-sidebar a:hover {
	text-decoration: underline;
}
#wrapper-sidebar-calendar-event {
	margin-bottom: 20px;
}
#wrapper-sidebar-calendar-event a:hover {
	text-decoration: none;
}
/* ######### CSS Structure: Footer ######### */
#wrapper-footer {
	background: #393939;
}
#footer {
	width: 778px;
	margin: 0 auto;
	padding-top: 30px;
	color: #FFFFFF;
	text-align: center;
}
#footer a {
	color: #FFFFFF;
}
#footer #copyright {
	padding: 5px 0px;
	color: #FFFFFF;
}
#footer #copyright a {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #C8C8C8;
}
#footer #copyright a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #C8C8C8;
}
#footer #legal {
	padding: 5px 0px;
	color: #FFFFFF;
}
#footer #legal a {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #C8C8C8;
}
#footer #legal a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #C8C8C8;
}
/* ######### CSS Structure: Module index ######### */
.wrapper-index {
	padding-top: 10px;
	height: 245px;
}
.wrapper-index p {
	padding: 3px 0px;
}
/* ######### CSS Structure: Module portfolio ######### */
.wrapper-portfolio {
	padding-top: 10px;
}
.wrapper-portfolio p {
	padding: 3px 0px;
}
.wrapper-portfolio .portfolio-meta-date {
	float: right;
	padding: 0px 62px 5px 0px; /* top, right, bottom, left */
	color: #C6C6C6;
	line-height: normal;
}
.wrapper-portfolio .portfolio-meta-img {
	border: 1px solid #E5E5E5;
	padding: 5px;
	background-color: #F9F9F9;
}
.wrapper-portfolio .hr-line-dashed {
	margin: 8px 0 0 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #333333;
}
.wrapper-portfolio a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-portfolio a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-portfolio a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
/* ######### CSS Structure: Module about ######### */
.wrapper-about {
	padding-top: 10px;
}
.wrapper-about p {
	padding: 3px 0px;
}
.wrapper-about ul {
	margin: 2px 0px 0px 10px;
}
.wrapper-about ul li {
	margin: 2px 0px 0px 10px;
	list-style-type: disc;
}
.wrapper-about ul li li {
	list-style-type: circle;
}
.wrapper-about ul li li li {
	list-style-type: square;
}
.wrapper-about ol {
	margin: 2px 0px 0px 10px;
}
.wrapper-about ol li {
	margin: 2px 0px 0px 14px;
	list-style-type: decimal;
}
.wrapper-about ol li li {
	list-style-type: upper-roman;
}
.wrapper-about ol li li li {
	list-style-type: upper-alpha;
}
.wrapper-about a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-about a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-about a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
/* ######### CSS Structure: Module contact ######### */
.wrapper-contact {
	padding-top: 10px;
}
.wrapper-contact p {
	padding: 3px 0px;
}
.wrapper-contact .hr-line-dashed {
	margin: 5px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #333333;
}
.wrapper-contact form {
	margin: 0px;
	padding: 0px;
}
.wrapper-contact form label {
	font-weight: bold;
}
.contact-input {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 17px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.contact-textarea {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 15px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
/* ######### CSS Structure: Module admin ######### */
.wrapper-admin {
}
.wrapper-admin p {
	padding: 3px 0px;
}
.wrapper-admin a {
	color: #666666;
	text-decoration: none;
}
.wrapper-admin a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #666666;
}
.wrapper-admin form {
	margin: 0px;
	padding: 0px;
}
.wrapper-admin form fieldset {
	margin: 0px auto;
	padding: 2px 10px 10px 10px;
	border: 1px solid #5e5e5e;
}
.wrapper-admin form legend {
	padding: 2px 5px;
	font-size: large;
	font-family: Georgia, Tahoma, Verdana, sans-serif;
	color: #5e5e5e;
}
.wrapper-admin form label {
	font-weight: bold;
}
.admin-input-login {
	background-image: url(../images/theme/bg-input.png);
	background-repeat: repeat-x;
	background-position: center;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 17px;
	vertical-align : middle;
	color: #333333;
	cursor: pointer;
}
.admin-input {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 17px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.admin-file {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	margin-top: 2px;
	padding: 3px;
	color: #000000;
	cursor: pointer;
}
.admin-textarea {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 15px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.admin-button {
	border: 1px solid #999999;
	margin: 5px 0px;
	color: #333333;
	height: 22px;
	cursor: pointer;
	background-image: url(../images/theme/bg-button.png);
	background-repeat: repeat-x;
}
.admin-button-edit {
	width: 40px;
	height: 22px;
	border: 1px solid #FFFFFF;
	background-color: #666666;
	color: #FFFFFF;
	cursor: pointer;
}
.admin-select {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 25px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.admin-radio {
	vertical-align : middle;
	cursor: pointer;
}
.admin-img-thumbnail {
	border: 1px solid #E5E5E5;
	padding: 5px;
	background-color: #F9F9F9;
}
/* ######### CSS Structure: Report & Filter ######### */
.wrapper-report fieldset {
	margin: 0px auto;
	padding: 2px 10px 10px 10px;
	border: 1px solid #5e5e5e;
}
.wrapper-report legend {
	padding: 2px 5px;
	font-size: large;
	font-family: Georgia, Tahoma, Verdana, sans-serif;
	color: #5e5e5e;
}
/* ######### CSS Structure: Module calendar event ######### */
.wrapper-calendar-event {
	padding-top: 10px;
}
.calendar-event {
	width: 510px;
	margin: 2px;
	color: #333333;
	text-align: center;
}
.calendar-event td {
	text-align: center;
	vertical-align: top;
}
.calendar-event td a {
	text-decoration: none;
	/*font-weight: bold;*/
	display: block;
}
.calendar-event td a:link, td a:visited {	
	color: #333333;
}
.calendar-event td a:hover, td a:active {
	color: #CCCCCC;
}
.calendar-event-header-year-now {
	color: #333333;
	font-weight: bold;
	height: 25px;
}
.calendar-event-month {
	margin: 2px;
}
.calendar-event-month td {
	border: 1px solid #DFDFDF;
}
.calendar-event-month td a {
	/*background-color: #e3e3e3;*/
	display: block;
	background-image: url(../images/theme/bg-mark-calendar-event-true.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.calendar-event-month-name {
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	background-color: #5e5e5e;
	height: 22px;
}
.calendar-event-month-name table {
	border: none;
}
.calendar-event-month-name td {
	border: none;
}
.calendar-event-month-name td a {
	background: none;
}
.calendar-event-month-day-name {
	color: #DFDFDF;
	text-align: center;
	font-weight: bold;
	background-color: #747474;
}
.calendar-event-today {
	color: #FFFFFF;
	text-align: center;
	/*font-weight: bold;*/
	background: #9F9F9F;
}
/* ######### CSS Structure: Component calendar event info ######### */
.wrapper-calendar-event-info {
	width: 580px; /* ขนาดของ ThickBox ค่า Default จะกว้างไม่เกิน 580px หากเกินจะเกิดสกอร์บาร์ */
}
.wrapper-calendar-event-info p {
	padding: 3px 0px;
}
.wrapper-calendar-event-info ul {
	margin: 2px 0px 0px 10px;
}
.wrapper-calendar-event-info ul li {
	margin: 2px 0px 0px 10px;
	list-style-type: disc;
}
.wrapper-calendar-event-info ul li li {
	list-style-type: circle;
}
.wrapper-calendar-event-info ul li li li {
	list-style-type: square;
}
.wrapper-calendar-event-info ol {
	margin: 2px 0px 0px 10px;
}
.wrapper-calendar-event-info ol li {
	margin: 2px 0px 0px 14px;
	list-style-type: decimal;
}
.wrapper-calendar-event-info ol li li {
	list-style-type: upper-roman;
}
.wrapper-calendar-event-info ol li li li {
	list-style-type: upper-alpha;
}
.wrapper-calendar-event-info a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-calendar-event-info a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-calendar-event-info a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
.table-calendar-event-info {
	color: #333333;
}
.td-calendar-event-info-date {
	color: #666666;
	font-size: large;
}
.td-calendar-event-info-subject {
	color: #333333;
	font-weight: bold;
	background-color: #e1e1e1;
	border: 1px #666666 dashed;
}
.calendar-event-info-detail {
	padding: 10px 0 10px 0;
	border-bottom: 1px #333333 dashed;
}
/* ######### CSS Structure: Module news and events ######### */
.wrapper-news-events {
	padding-top: 10px;
}
.wrapper-news-events p {
	padding: 3px 0px;
}
.wrap-news-events-content {

}
.wrap-news-events-content-img {
	float: left;
	width: 175px;
}
.wrap-news-events-content-data {
	float: right;
	width: 325px;
}
.wrapper-news-events .hr-line-dashed {
	margin: 8px 0 8px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #333333;
}
.wrapper-news-events .news-meta-img {
	border: 1px solid #E5E5E5;
	padding: 5px;
	background-color: #F9F9F9;
}
.wrapper-news-events .news-meta-date {
	color: #888888;
	line-height: normal;
}
.wrapper-news-events a:link {
	color: #666666;
	text-decoration: none;
	border-bottom: 1px dashed #666666;
}
.wrapper-news-events a:visited {
	color: #666666;
	text-decoration: none;
	border-bottom: 1px dashed #666666;
}
.wrapper-news-events a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
.news-events-select {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 25px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
/* ######### CSS Structure: Module news and events info ######### */
.wrapper-news-events-info {
	padding-top: 10px;
}
.wrapper-news-events-info p {
	padding: 3px 0px;
}
.wrapper-news-events-info .news-info-date {
	color: #888888;
	line-height: normal;
}
.wrapper-news-events-info .news-info-title {
	font-size: large;
}
.wrapper-news-events-info .hr-line-dashed {
	margin: 5px 0 5px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #888888;
}
.wrapper-news-events-info ul {
	margin: 2px 0px 0px 10px;
}
.wrapper-news-events-info ul li {
	margin: 2px 0px 0px 10px;
	list-style-type: disc;
}
.wrapper-news-events-info ul li li {
	list-style-type: circle;
}
.wrapper-news-events-info ul li li li {
	list-style-type: square;
}
.wrapper-news-events-info ol {
	margin: 2px 0px 0px 10px;
}
.wrapper-news-events-info ol li {
	margin: 2px 0px 0px 14px;
	list-style-type: decimal;
}
.wrapper-news-events-info ol li li {
	list-style-type: upper-roman;
}
.wrapper-news-events-info ol li li li {
	list-style-type: upper-alpha;
}
.wrapper-news-events-info a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-news-events-info a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-news-events-info a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
/* ######### CSS Structure: Module blog ######### */
.wrapper-blog {
	padding-top: 10px;
}
.wrapper-blog p {
	padding: 3px 0px;
}
.wrap-blog-content {

}
.wrapper-blog .hr-line-dashed {
	margin: 8px 0 8px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #333333;
}
.wrapper-blog .blog-info-title {
	font-weight: bold;
}
.wrapper-blog .blog-info-title a:link {
	color: #333333;
	text-decoration: none;
	border-bottom: none;
}
.wrapper-blog .blog-info-title a:visited {
	color: #333333;
	text-decoration: none;
	border-bottom: none
}
.wrapper-blog .blog-info-title a:hover {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}


.wrapper-blog .blog-meta-date {
	color: #888888;
	line-height: normal;
}
.wrapper-blog a:link {
	color: #666666;
	text-decoration: none;
	border-bottom: 1px dashed #666666;
}
.wrapper-blog a:visited {
	color: #666666;
	text-decoration: none;
	border-bottom: 1px dashed #666666;
}
.wrapper-blog a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
.blog-select {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 25px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
/* ######### CSS Structure: Module blog info ######### */
.wrapper-blog-info {
	padding-top: 10px;
}
.wrapper-blog-info p {
	padding: 3px 0px;
}
.wrapper-blog-info .blog-info-date {
	color: #888888;
	line-height: normal;
}
.wrapper-blog-info .blog-info-title {
	font-size: large;
}
.wrapper-blog-info .hr-line-dashed {
	margin: 5px 0 5px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px dashed #888888;
}
.wrapper-blog-info .hr-line-solid {
	margin: 5px 0 5px 0;
	width: 100%;
	height: 1px; 
	border: none;
	border-top: 1px solid #888888;
}
.wrapper-blog-info ul {
	margin: 2px 0px 0px 10px;
}
.wrapper-blog-info ul li {
	margin: 2px 0px 0px 10px;
	list-style-type: disc;
}
.wrapper-blog-info ul li li {
	list-style-type: circle;
}
.wrapper-blog-info ul li li li {
	list-style-type: square;
}
.wrapper-blog-info ol {
	margin: 2px 0px 0px 10px;
}
.wrapper-blog-info ol li {
	margin: 2px 0px 0px 14px;
	list-style-type: decimal;
}
.wrapper-blog-info ol li li {
	list-style-type: upper-roman;
}
.wrapper-blog-info ol li li li {
	list-style-type: upper-alpha;
}
.wrapper-blog-info a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-blog-info a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-blog-info a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}
/* ######### CSS Structure: Module blog comment ######### */
.wrapper-blog-comment {
	padding-top: 10px;
}
.wrapper-blog-comment p {
	padding: 3px 0px;
}
.wrapper-blog-comment form {
	margin: 0px;
	padding: 0px;
}
.wrapper-blog-comment form fieldset {
	margin: 0px auto;
	padding: 2px 10px 10px 10px;
	border: 1px solid #5e5e5e;
}
.wrapper-blog-comment form legend {
	padding: 2px 5px;
	font-size: large;
	font-family: Georgia, Tahoma, Verdana, sans-serif;
	color: #5e5e5e;
}
.wrapper-blog-comment form label {
	font-weight: bold;
}
.comment-input {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 17px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.comment-textarea {
	background-color: #5e5e5e;
	border: 1px solid #DFDFDF;
	padding: 3px;
	height: 15px;
	vertical-align : middle;
	color: #FFFFFF;
	cursor: pointer;
}
.wrapper-display-comment {
	margin: 0 0 20px 0; /* top, right, bottom, left */
	padding: 10px;
	border: 1px solid #CACACA;
	background-color: #F7F7F7;
	color: #333333;
}
.wrapper-blog-comment a:link {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-blog-comment a:visited {
	color: #888888;
	text-decoration: none;
	border-bottom: 1px dashed #888888;
}
.wrapper-blog-comment a:hover {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px dashed #000000;
}