/*
stylesheet for www.ayutthayafloatingmarket.com
main stylesheet for monitor and projection style
create 2009-04-20
edit 2009-05-24

2 column layout
brown #593127
orange #FF6600

*/

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


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

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

#container {margin: 0 auto; width: 960px; height: 580px; background: #593127 url("asset/bg_undercon.jpg") no-repeat;}

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: 20px;}

h1 {font-size: 1.6em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.75em;}

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: #FF3300;}
a:hover {color: #FF6600;}


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

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

caption {text-align: center;}

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


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

form {}

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

input.button, button {background: transparent url("../images/bg_button_submit.gif") no-repeat; cursor: pointer;}

textarea {height: 160px; font-size: inherit; font: 100%;}


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

#header {margin: 0 auto; width: 920px; height: 110px; background: transparent;}
#header h1 {text-indent: -6000em;}

#registerbox {float: right; width: 200px; height: 200px;}

#searchbox {clear: left; float: left; width: 750px; height: 80px;}


/* --------------------------------------------------- setting column layout */

#address {float: left; width: 320px; height: 360px; margin: 20px 0 0 40px; color: #FFFF99;}
#address h2 {font-size: 0.85em;}
#address h3 {font-size: 0.8em;}
#address h4 {font-size: 0.75em;}
#address p {font-size: 0.75em; text-indent: 0;}

#gallery {float: right; width: 560px; height: 450px; margin-top: 20px;}
#gallery ul {list-style: none;}
#gallery li {float: left; width: 100px; height: 100px; padding: 2px;}

#intro {width: 70%;  height: 360px; margin: 20px auto 0 auto; text-align: center; color: #FFFFFF;}

#content {margin: 0 auto; width: 900px; background-color: #FFFFFF;}

#maincontent {
	clear: both; 	float: left;
	padding: 10px 25px;
	width: 450px;
	background-color: #F0F0F0;
}
#maincontent img {margin-top: 5px;}
#maincontent li {list-style-type: square;}

#subcontent {
	float: right;
	width: 400px;
	margin-top: 5px;
	text-align: right;
	background: #F0F0F0 url("../images/bg_content.jpg") repeat-x;
}
#subcontent form, #subcontent p {margin-right: 25px; font-size: 0.9em;}


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

#mainnav {
	float: left;
	margin: 48px 100px 5px 5px;
	background-color: transparent;
}
#mainnav li {float: left; padding: 0 10px; list-style-type: none;}
#mainnav li.current {	font-weight: bold;}
#mainnav li a {color: #EEEEEE;}
#mainnav li a:hover {color: #F8981D;}

#footnav, #subnav {clear: both; margin: 0 auto; width: 900px; 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;}

#subnav {height: 20px; background: #74A5CD;}
#subnav li {font-size: 0.8em; line-height: 20px;}
#subnav a:hover {color: #FFCC33;}


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

#footer {
	float: left;
	width: 320px; height: 40px;
	background-color: transparent;
}
#footer p {display: inline; margin-left: 40px; font-size: 0.65em; line-height: 31px; color: #FFFF99;}
#footer img {display: block; margin-left: 40px; border: 0;} /* 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 {
	width: 100%;
	margin: : 10px;
	background-color: #DEDEDE;
	color: #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
}
#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: #EFD560; 
	color: #FF0000;
	font-weight: bold;
	cursor: pointer;
	cursor: hand;
}
#ajaxcalendarcontent {font-size: 0.8em;}
#ajaxcalendarcontent table {border-collapse: collapse;}
#ajaxcalendarcontent table th {background-color: #FFCC00;}
#ajaxcalendarcontent table th, #ajaxCalendar_content table td {border: 1px solid #BBBBBB;}
#ajaxcalendarcontent table a {display: block; background-color: #FFFFCC;}
#ajaxcalendarcontent 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;}

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

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