/*
main stylesheet for monitor and projection style
create 2007-09-21
edit 2007-11-30

green #009933
yellow #EFD560

*/

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


/* -------------------------------------- setting typography and general tag */

html, body {height: 100%;}
body, th, td, input, select, textarea {font: 100%/1.25 Tahoma, Thonburi, "Lucida Grande", Loma, sans-serif;}

#container {min-height: 100%; margin: 15px auto; width: 900px; background: #FFFFFF;}

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 30px;}
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; font-size: 0.8em}
p.promo {text-align: right; font-weight: bold;}
p.description {margin-left: 14px; font-size: 0.75em;}
p.paginate {clear: both; margin: 15px 5px 10px 10px; font-size: 0.8em}

h1 {font-size: 1.75em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em; margin: 4px 12px;}
h4 {font-size: 1em; margin: 4px;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.7em;}

ol {list-style-type: decimal;}
ul {list-style-type: disc;}
li {font-size: 1em;}
.remark li {font-size: 0.8em; line-height: 19px;}

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

a {text-decoration: none; color: #DD5511;}
a:hover {color: #009933;}


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

table {width: 96%; margin:10px auto; font-size: inherit;}

caption {text-align: center;}
thead {}
tbody {}
tfoot {}

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


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

form {}
fieldset {border: 1px solid #888888; margin: 10px 25px 0 0;}
legend {text-align: right;}
label {}

input, select, textarea {
	width: 350px;
	background: #FFFFFF;
	border: 1px solid #888888;
}
fieldset input, fieldset select, fieldset textarea {width: 310px;}
input.button, button {
	display: block;
	width: 130px; height: 30px;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
	background: #FF9900;
	border: 1px solid #444444;
	cursor: pointer;
	cursor: hand;
}
input.button:hover, button:hover {color: #FF6600; background: #FFFFCC;}
input.buttondate {width: 21px; height: 20px; border: 0; background: transparent; cursor: pointer; cursor: hand;}
input.disable {background: #EDEDED; border: 1px solid #FFFFFF; color: #333333;}
textarea {height: 80px;}

.medium {width: 120px; display: inline;}
.short {width: 75px; display: inline;}
.threedigit {width: 30px;}
.box {width: 21px;}
.small {width: 100px; height: 70px; display: inline;} /* for small textarea */
.big {width: 350px; height: 110px;} /* for big textarea */
.inlinechoice {display: inline; width: 20px; border: 0; background: transparent;} /* for radio and checkbox element */
.inlinetext {display: inline;} /* for radio and checkbox text label */
.right {text-aligh: right;}
.confirm {margin-top: 10px;}

.bigform {margin: 8px auto; width: 85%; font-size: 0.8em;} /* form in general use  */
.bigform input, .bigform select, .bigform textarea {margin-bottom: 4px;}
.bigform label {display: block;}
.bigform .inline {display: inline;}
.bigform .box {margin-bottom: 0;}


/* ------------------------------------------------------ setting navigation */
#mainnav {
	clear: both;
	margin: 0 auto;
	width: 900px;
	background: transparent;
}
#mainnav ul {margin-left: 4px;}
#mainnav li {
	list-style-type: none;
	display: inline;
	padding: 5px;
	font-size: 1.1em;
	background: transparent;
}
#mainnav li.current {color: #66CC66; background: #EDEDED;}
#mainnav li a {color: #DD5511;}
#mainnav li a:hover {color: #009933;}

/* #subnav {margin: 40px 0 4px 25px;}  */
#subnav {margin: 20px 0 4px 25px;}
#subnav ul {list-style-position: outside; list-style-image: url("../images/bullet_subnav.gif");}
#subnav li {font-size: 0.85em; line-height: 20px;}
#subnav li.current {font-weight: bold;}
#subnav a:hover {color: #009933;}


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

#footer {
	clear: both;
	margin: 0 auto;
	width: 900px; height: 60px;
	background: transparent;
}
#footer p {float: left; margin: 4px; font-size: 0.7em; line-height: 20px; color: #555555;}
#footer img {float: right; padding: 8px 4px 0 0;} /* izzisoft webbutton */


/* ------------------------------------------------------------ setting ajax */

#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=60);
}

#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 {
	width: 100%;
	margin: 10px;
	background-color: #DEDEDE;
	color: #FFFFFF;
	font-weight: bold;
	cursor: pointer;
}
#lightbox h4 {}
#lightbox p {}
#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: #FFFFFF;
	opacity: .85;
	filter: alpha(opacity=85);
}
#ajaxCalendar_closebutton {
	/*display: none; visibility: hidden;*/
	overflow: auto;
	padding-left: 10px;
	background-color: #AAAAAA; /* #EFD560 */
	color: #FF0000;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
}
#ajaxCalendar_content {font-size: 0.8em;}
#ajaxCalendar_content table {border-collapse: collapse;}
#ajaxCalendar_content table th {background-color: #FFCC00;}
#ajaxCalendar_content table th, #ajaxCalendar_content table td {border: 1px solid #BBBBBB;}
#ajaxCalendar_content table a {display: block; background-color: #FFFFCC;}
#ajaxCalendar_content table a:hover {background-color: #EFD560;}


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

.bbctext {font-size: 0.8em;}
.bbcunderline {text-decoration: underline;}
.bbcbig {font-size: 1.1em;}
.bbcbigtext {font-size: 1.1em;}
.bbcsmall {font-size: 0.75em;}
.bbcsmalltext {font-size: 0.9em;}

ul.bbclist {list-style: square; list-style-position: outside; margin-left: 20px;}
ol.bbclist {list-style: decimal;}
.bbclist {font-size: 0.8em;}

.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;}


/* ---------------------------------------------------------- setting 16 box */

#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15, #box16 {float: left; width: 220px; height: 220px; margin: 4px 0 0 4px; background: transparent;}

#box1 {background: #EFD560;}

#bigbox {float: right; width: 444px; height: 668px; margin: 4px 4px 0 0; background: #EFD560;}
#bigbox table h4 {font-weight: bold;}
#bigbox table {border-collapse: collapse;}
#bigbox table th {background-color: #EECC66; font-size: 0.9em;}
#bigbox table tr.odd {background-color: #FFFFDD;}
#bigbox table tr.even {background-color: #FFFFBB;}
#bigbox table td, #bigbox table th {border: 1px solid #FFFFFF; padding: 3px;}
#bigbox table td {text-align: right; font-size: 0.8em;}
#bigbox table.twocolumns {margin-bottom: 4px;}
#bigbox table.twocolumns td {font-size: 1em; border: 0; text-align: left; padding-left: 0;}

#bigbox p {margin: 5px 12px;}

#bigbox ol, #bigbox ul {list-style-position: outside; margin-left: 26px;}
#bigbox ul {list-style-image: url("../images/bullet_bigbox.gif");}

#bigbox ul.gallery {width: 416px; margin: 8px auto;}
#bigbox ul.gallery li {
	list-style: none;
	float: left;
	width: 100px; height: 100px;
	margin: 0 4px 4px 0;
	background: #FFFF66;
	text-align: center;
}

#bigbox dl {margin: 5px 12px;} /* for promotion page */
#bigbox dt {font-size: 0.9em;}
#bigbox dd {font-size: 0.8em; margin-bottom: 20px;}
#bigbox dd .bbclist {font-size: 1em;}