/*
main stylesheet for monitor and projection style
tpma2000.org
create 2007-08-15
edit 2008-03-12

3 columns mainnav(170px) + maincontent(400px) + subcontent(230px) = 800px
*/

/* ---------------------------------- import reset screen components onto it */
@import "../../screen_reset.css";


/* -------------------------------------- setting typograpgy and general tag */

html, body {height: 100%;}
body, th, td, input, select, textarea {font: 100%/1.35 Tahoma, "Lucida Grande", Thonburi, Loma, sans-serif;}
body {background: #FFFFFF url("../images/bg_body.jpg") top left repeat-x;}

#container {min-height: 100%; margin: 0 auto; width: 800px;}

pre, code, kbd, samp, tt, xmp {font-family: monospace; line-height: 99%;}
abbr, acronym {font-variant: small-caps; letter-spacing: 0.1em;}
blockquote {margin: 0 40px;}
del  {text-decoration: line-through;}
ins {text-decoration: underline;}
em {font-style: italic;}
strong {font-weight: bold;}
sub {vertical-align: sub; font-size: 0.75em;}
sup {vertical-align: super; font-size: 0.75em;}
p {margin: 5px 0 15px 0; text-indent: 24px;}
.address {text-indent: 0; margin-left: 10px;}
.description, .paginate {clear: left; font-size: 0.7em; text-indent: 0;}
.paginate .current {padding: 0 2px; background: #FFFFFF; color: #000000;}
.paginate a {padding: 0 2px; }
.paginate a:hover {background: #FFFF66;}

h1 {font-size: 1.55em;}
h2 {font-size: 1.45em;}
h3 {font-size: 1.25em;}
h4 {font-size: 1em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.7em;}

ol {list-style-type: decimal;}
ul {list-style-type: disc;}
li {}

hr {border: none; margin-top: 20px; background-color: #FF9966; color: #FF9966; width: 94%; height: 1px;}

a {text-decoration: none; color: #3300FF;}
a:hover {color: #33CCFF;}

/* ----------------------------------------------------------- setting table */

table {width: 90%; margin:1em auto; font-size: inherit; font: 100%;}

caption {text-align: center;}

th, td {border: 1px solid #DADADA;}
th {text-align: center;}
th.vertical {text-align: right;}


/* ------------------------------------------------------------ setting form */

form {}
fieldset {}
legend {text-align: right;}
label {margin-left: 10px;}

input, select, textarea {
	width: 180px;
	background: #FFFFFF url("../images/bg_input.jpg") repeat-x;
	border: 0;
}
input.button, button {
	margin-top: 5px;
	text-align: center;
	font-weight: normal;
	color: #FFFFFF;
	background: #CC3333;
	border: 1px solid #FFFFFF;
	cursor: pointer;
	cursor: hand;
}
input.button:hover, button:hover {background: #FF0000; font-weight: bold;}
textarea {height: 160px;}

.medium {width: 200px; border: 1px solid #FFCC33;}
.short {width: 70px;}
.box {width: 14px;}
.small {width: 100px; height: 100px; display: inline;} /* for small textarea */
.big {width: 450px; height: 300px;} /* for big textarea */

.bigform {} /* form in general use  */
.bigform input, .bigform select, .bigform textarea {margin-bottom: 10px;}
.bigform label {display: block;}
.bigform .box {margin-bottom: 0;}

.inline {display: inline;}

#contactus {}
#contactus h4 {margin-left: 30px;}
#contactus label {display: block; margin: 10px 0 0 30px;}
#contactus input {margin-left: 30px; width: 310px; border: 1px solid #DDDDDD;}
#contactus textarea {margin-left: 30px; width: 310px; border: 1px solid #DDDDDD;}
#contactus input:focus, #contactus textarea:focus {border: 1px solid #FF0000;}
#contactus input.button {display: block; margin-left: 30px; width: 100px; border: 1px solid #FFFFFF;}


/* ---------------------------------------------------------- setting header */

#header {margin: 0 auto; width: 800px; height: 82px; border-bottom: 8px solid #CC0000;}
#header img {float: left;} /* logo */
#header h1 {clear: left; float: left; width: 500px; color: #FFFFFF;}


/* -------------------------------------------------- setting content column */

#content {float: right; width: 630px; background: #8A8A8A;}
#branding {margin: 10px; width: 610px; height: 150px;}

#maincontent {
	clear: both;
	float: left;
	margin-left: 10px;
	width: 400px;
	background: transparent;
}
#maincontent h2 {
	width: 380px; height: 34px;
	padding-left: 10px;
	background: #FFFFFF;
}
#maincontent img {margin-top: 5px;}
#maincontent li {list-style-type: square;}
#maincontent .contentbox {width: 380px; margin-top: 10px; padding: 5px; background: #FFFF99;}
#maincontent .contentbox h3 {width: 370px; padding-left: 10px; color: #FFFFFF; background: #CC0033;}

#subcontent {
	float: right;
	margin: 34px 10px 0 0;
	width: 210px;
	background: transparent;
}
#subcontent .contentbox {width: 200px; margin-top: 10px; padding: 5px; background: #FFCC99;}
#subcontent .contentbox h3 {width: 190px; padding-left: 10px; color: #FFFFFF; background: #FF0033;}

.contentbox p {font-size: 0.9em; border-bottom: 1px dotted #FF0000;}
.contentbox p.description {border: none; margin-left: 30px; font-size: 0.8em;}
.contentbox h4, p.date {display: inline;}
p.date {font-size: 0.75em; border: none;}

#searchbox {width: 200px; margin-top: 10px; padding: 5px; background: #000066;}
#searchbox label {color: #FFFFFF;}

#contentlist {width: 600px; margin-top: 10px; padding: 5px; background: #FFFF99;}
#contentlist ul {margin-bottom: 0;} /* general list */
#contentlist ul li {list-style-type: none; float: left; width: 590px; margin: 5px;}
#contentlist ul img {float: left; margin: 0 10px 10px 0;}
#contentlist ol {} /* member list */
#contentlist h3 {font-size: 0.9em; border-bottom: 1px solid #666666;}
#contentlist h4 {display: inline; font-size: 0.9em;}
#contentlist p {font-size: 0.8em; text-indent: 0;}

#contentdetail {
	width: 600px;
	margin-top: 10px; padding: 5px;
	background: #FFFF99;
	color: #000000;
}
#contentdetail h3 {width: 600px; margin-top: 5px; font-size: 1em; font-weight: bold;}
#contentdetail .date {font-size: 0.9em;}

.gallery {margin: 10px 10px; width: 600px;}
.gallery li {
	list-style-type: none;
	display: inline;
	margin: 0 10px 20px 0;
}
.gallery li img {margin: 0; padding: 0;}

.download {margin: 10px;}
.download li {display: block; list-style-type: disc; font-size: 0.9em;}

#memberlist li {border-bottom: 1px solid #666666;}
#memberlist li img {float: right;}


/* -------------------------------------------------- setting all navigation */

#langnav {float: right; margin-top: 20px; height: 20px;}
#langnav li {
	list-style: none;
	float: left;
	width: 64px; height: 22px;
	margin-right: 10px;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	color: #FFCC00;
	background: #77AAAA;
}
#langnav li.current {background: #CC0000;}
#langnav li a:link, #langnav li a:visited, #langnav li a:active {color: #FFFFFF; font-weight: normal;}
#langnav li a:hover {color: #FFFF00; font-weight: bold;}

.mainnav1 a {background: transparent url("../images/bg_menubutton_1.jpg") 170px 0;}
.mainnav1 a:hover {background: transparent url("../images/bg_menubutton_1.jpg") top left no-repeat;}
.mainnav2 a {background: transparent url("../images/bg_menubutton_2.jpg") 170px 0;}
.mainnav2 a:hover {background: transparent url("../images/bg_menubutton_2.jpg") top left no-repeat;}
.mainnav3 a {background: transparent url("../images/bg_menubutton_3.jpg") 170px 0;}
.mainnav3 a:hover {background: transparent url("../images/bg_menubutton_3.jpg") top left no-repeat;}
.mainnav4 a {background: transparent url("../images/bg_menubutton_4.jpg") 170px 0;}
.mainnav4 a:hover {background: transparent url("../images/bg_menubutton_4.jpg") top left no-repeat;}
.mainnav5 a {background: transparent url("../images/bg_menubutton_5.jpg") 170px 0;}
.mainnav5 a:hover {background: transparent url("../images/bg_menubutton_5.jpg") top left no-repeat;}
.mainnav6 a {background: transparent url("../images/bg_menubutton_6.jpg") 170px 0;}
.mainnav6 a:hover {background: transparent url("../images/bg_menubutton_6.jpg") top left no-repeat;}
.mainnav7 a {background: transparent url("../images/bg_menubutton_7.jpg") 170px 0;}
.mainnav7 a:hover {background: transparent url("../images/bg_menubutton_7.jpg") top left no-repeat;}
.mainnav8 a {background: transparent url("../images/bg_menubutton_8.jpg") 170px 0;}
.mainnav8 a:hover {background: transparent url("../images/bg_menubutton_8.jpg") top left no-repeat;}
.mainnav9 a {background: transparent url("../images/bg_menubutton_9.jpg") 170px 0;}
.mainnav9 a:hover {background: transparent url("../images/bg_menubutton_9.jpg") top left no-repeat;}
.mainnav10 a {background: transparent url("../images/bg_menubutton_10.jpg") 170px 0;}
.mainnav10 a:hover {background: transparent url("../images/bg_menubutton_10.jpg") top left no-repeat;}
.mainnav11 a {background: transparent url("../images/bg_menubutton_11.jpg") 170px 0;}
.mainnav11 a:hover {background: transparent url("../images/bg_menubutton_11.jpg") top left no-repeat;}
.mainnav12 a {background: transparent url("../images/bg_menubutton_12.jpg") 170px 0;}
.mainnav12 a:hover {background: transparent url("../images/bg_menubutton_12.jpg") top left no-repeat;}

#mainnav {float: left; width: 170px; background: #FFFFFF;}
#mainnav li {
	list-style: none;
	float: left;
	width: 170px; height: 32px;
	margin-top: 2px;
	font-weight: bold;
	line-height: 32px;
	color: #111111;
}
#mainnav li a {display: block; height: 32px; padding-left: 4px; color: #777777;}
#mainnav li a:hover {color: #111111;}
#mainnav img {margin: 10px auto 5px auto;} /* ad banner */
#mainnav li.current {background: #8A8A8A !important; padding-left: 4px;}

#footnav, #subnav {clear: both; margin: 0 auto; width: 800px; height: 28px; background: #88C4E9;}
#footnav li, #subnav li {list-style-type: none; float: left; margin-left: 20px; font-size: 0.85em; line-height: 28px;}
#footnav li.current, #subnav li.current {list-style: none; font-weight: bold;}
#footnav a, #subnav a {color: #FFFFFF;}
#footnav a:hover {color: #FF3300;}


/* ---------------------------------------------------------- setting footer */

#footer {
	clear: both;
	margin: 0 auto;
	width: 800px; height: 60px;
	background: #FFFFFF;
}
#footer p {display: inline; margin-left: 170px; font-size: 0.7em; line-height: 31px; color: #555555;}
#footer img {float: left; margin-left: 170px;} /* izzisoft webbutton */


/* -------------------------------------------------------- setting lightbox */

#lightboxbg {
	display: none; visibility: hidden;
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	z-index: 1000;
	background-color: #444444;
	opacity: .70;
	filter: alpha(opacity=70);
}

#lightbox {
	display: none; visibility: hidden;
	position: absolute;
	top: 50%; left: 50%;
	margin: -180px 0 0 -300px; padding: 0.75em;
	width: 600px; height: 400px;
	border: 0.75em solid #FF3300;
	text-align: left;
	background-color: #FFFFFF;
	color: #222222;
	z-index: 1010;
	overflow: auto;
}

#lightbox .closebutton {
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#lightbox h4 {margin-left: 10px; font-weight: bold;}
#lightbox p {text-indent: 0; margin-left: 10px; font-size: 0.9em;}
#lightbox li {list-style-type: none; display: inline;}

#lightboxgallery li {list-style-type: none; width: 100px; height: 100px; margin: 10px 10px;}

#ajaxcalendar {
	display: none; visibility: hidden;
	z-index: 2000;
	width: 200px;
	background-color: #BBBBBB;
	opacity: .85;
	filter: alpha(opacity=85);
}
#ajaxcalendar .closebutton {
	display: none; visibility: hidden;
	overflow: auto;
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#ajaxcalendarcontent {font-size: 0.8em;}
#ajaxcalendarcontent table {border-collapse: collapse;}
#ajaxcalendarcontent table th, #ajaxcalendarcontent table td {border: 1px solid #BBBBBB;}
#ajaxcalendarcontent table th {background-color: #FFCC00;}
#ajaxcalendarcontent table a {display: block; background-color: #FFFFCC;}
#ajaxcalendarcontent table a:hover {background-color: #EFD560;}


/* ------------------------------------------------------------------ bbcode */

.bbctext {margin: 15px 10px 10px 10px; font-size: 0.9em;}
.bbctext ul {list-style: square !important; list-style-position: outside; margin-left: 20px;}

.bbcunderline {text-decoration: underline;}

.bbcwhite {color: #FFFFFF;}
.bbcblack {color: #000000;}
.bbcred {color: #FF0000;}
.bbcblue {color: #CCFFFF;}
.bbcyellow {color: #FFFF00;}
.bbcorange {color: #FF9966;}
.bbcgreen {color: #99FF66;}
.bbccyan {color: #333399;}
.bbcviolet {color: #CC00FF;}
.bbcpink {color: #FF99FF;}
.bbcgrey {color: #666666;}
.bbcbrown {color: #993300;}