/*
screen stylesheet for Ayutthaya Floating Market
created : 2009-06-14
last edited : 2010-07-01


dark brown #331C16
orange #FF6600

*/

/* -------------------------------------------------------- import reset css */
@import "../../screen_reset.css";


/* --------------------------------------------------------  general setting */

html, body {height: 100%; background: #331C16;}
body, #container {min-height: 100%;}
body {font-size: 86%; color: #FFFFFF;}
body, th, td, input, select, textarea {font-family: Tahoma, Georgia, Loma, Thonburi, Times, sans-serif;}

h1 {font-size: 1.4em; margin-bottom: 20px;}
h2 {font-size: 1.3em; margin-bottom: 20px;}
h3 {font-size: 1.2em; margin-bottom: 15px;}
h4 {font-size: 1.1em; margin-bottom: 15px;}
h5 {font-size: 1em; margin-bottom: 10px;}
h6 {font-size: 0.9em; margin-bottom: 10px;}

abbr, acronym {font-variant: small-caps;}
hr {border-bottom: 1px solid #FFFFCC;}
del  {text-decoration: line-through;}
ins {text-decoration: underline;}
strong {font-weight: bold;}
sub {vertical-align: sub; font-size: 0.7em;}
sup {vertical-align: super; font-size: 0.7em;}
pre, code, tt, xmp {font-family: monospace;}
blockquote {margin-left: 40px; margin-right: 40px;}
p {margin-bottom: 20px; font-size: 0.9em; line-height: 140%;}

.textcenter {text-align: center;}
.paginate {font-size: 0.9em;}
.quote {padding: 20px 20px 10px 30px; background: #FF6600 url("../images/bg_quote.gif") no-repeat;}
.red {color: #FF0033;}


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

a {text-decoration: none;}
a:link {color: #FF6600;}
a:visited {color: #FF9900;}
a:hover {color: #FF6633;}
a:active {color: #FF6600;}

.paginate {clear: both;}
.paginate a {padding: 0 3px;}
.paginate a:hover {background-color: #FF6600; color: #FFFFFF;}


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

table {width: 100%; border-collapse: collapse; font-size: inherit; font: 100%;}
th {font-weight: bold; text-align: center; vertical-align: middle;}
td {border: solid 1px #555555; padding: 2px 3px;}

th.vertical {text-align: center;}
td.number {text-align: right;}
tr.odd {background: #EFEFF1;}
tr.even {background: #F6F6FA;}


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

fieldset {}
legend {text-align: right;}
label {display: block; margin-bottom: 5px;}

input, select, textarea {border: 1px solid #BBBBBB; background: #FFFFCC;}
input:focus, textarea:focus {border: 1px solid #FFFFFF; background: #FFFF99;}

.button {
	border: 1px solid #CCCCCC;
	padding: 3px;
	background: #FF6600;
	color: #FFFFFF;
	font-size: 120%;
	cursor: pointer; cursor: hand;
}
.button:hover {background: #FF9900;}
.button:focus {background: #6666FF;}


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

#container {
	margin: 0 auto; padding: 20px;
	width: 920px; height: 560px;
	background: transparent url("../images/bg.jpg") no-repeat;
}

#header {}
#header h1 {
	width: 920px; height: 90px;
	margin: 0;
	text-indent: -7000px;
	background: #000000 url("../images/header.jpg") no-repeat;
}

#contentcontainer {clear: both; width: 880px; height: 360px; padding: 20px;}

#subcontent {float: left; width: 480px; height: 360px; overflow: auto;}

#content {float: right; width: 380px; height: 360px; overflow: auto;}
#content ul.subpagelist {font-size: 90%; padding-top: 20px; border-top: 1px solid #FFFFFF;}
#content ul.subpagelist li {margin-bottom: 10px; list-style: disc inside;}
#content p.address {text-indent: 0; font-size: 0.9em;}
#content p.address img {margin-top: 15px;}
#content p.description {font-size: 0.75em; text-indent: 0;}
#content h2 {clear: both; line-height: 120%;}
#content h3 {padding: 5px 110px; background: transparent url("../images/bg_head.png") no-repeat;}
#content h4 {margin: 0 20px 10px 20px;}
#content img {margin-bottom: 10px;}
#content ul {padding-bottom: 20px;}
#content li {}
#content li img {float: left; margin-right: 10px;}

ul.gallery {margin: 5px 0;}
ul.gallery li {display: inline; width: 100px; height: 100px; margin: 10px 10px 0 0;}

ul.calendarlist li {clear: left; height: 100px; margin-bottom: 20px;}

#calendar {width: 420px; margin: 0 auto;}
#calendar h3 {font-size: 2em;}
#calendar h4 {font-size: 1.5em;}
#calendar th {line-height: 2.7em;}
#calendar td {width: 60px; text-align: right; line-height: 2.3em;}

#videobox {margin: 30px 0 0 80px; width: 320px; height: 240px;}
#videotitle {width: 320px; margin: 5px 0 0 80px;}

#videolist {width: 350px; height: 200px;}
#videolist li {line-height: 150%;}

.weekend {color: #FF3300;}
.event1 {background: transparent url("../images/bg_event1.png") repeat;}
.event2 {background: transparent url("../images/bg_event2.png") repeat;}
.event3 {background: transparent url("../images/bg_event3.png") repeat;}
.event1 a, .event2 a, .event3 a {display: block;}

#sendmail #subcontent {margin-left: 50px; width: 400px;}
#sendmail #content {margin-top: 70px; width: 430px; height: 260px;}
#sendmail input {width: 320px; margin-bottom: 20px;}
#sendmail textarea {width: 380px; height: 194px; margin-bottom: 10px;}
#sendmail .button {width: 100px; margin: 0;}

#footer {
	width: 880px; height: 40px;
	padding: 0 20px;
	background: transparent url("../images/bg_footer.png") repeat-x;
}
#footer p {float: left; margin: 3px 0 0 0; font-size: 8px; color: #FFFF99; line-height: 10px;}
#footer img {float: right; margin-top: 3px;}

#webbadgebox {clear: both;}
#webbadgebox img {float: left; margin: 0 5px 0 0;}


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

#mainnav, #langnav {
	list-style-type: none;
	width: 920px; height: 30px;
	background: transparent url("../images/bg_mainnav.png") repeat-x;
	font-family: Tahoma, Georgia, Times, Garuda, serif;
}
#mainnav li, #langnav li {float: left; font-size: 14px; line-height: 30px;}
#mainnav li.current, #langnav li.current {font-style: italic;}
#mainnav a, #langnav a {display: block; padding: 0 10px; color: #FF9900;}
#mainnav a:hover, #langnav a:hover {color: #FF3300; background: #000000;}

#langnav li {float: right;}
/* -------------------------------------------------------- setting lightbox */

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

#lightbox {
	display: none; visibility: hidden;
	overflow: auto;
	z-index: 1010;
	position: absolute;
	top: 50%; left: 50%;
	margin: -170px 0 0 -250px; padding: 0;
	width: 500px; height: 300px;
	border: 6px solid #EC8000;
	text-align: left;
	background-color: #FFFFFF;
	color: #222222;
}

#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 {clear: both; padding-top: 20px; font-size: 0.95em; line-height: 140%;} /* span around user text */
.bbctext ul, .bbctext ol {list-style-position: outside; margin-left: 20px;}
.bbctext ul {list-style: circle;}
.bbctext li {font-size: 1em;}

.bbcunderline {text-decoration: underline;}
.bbcbig {font-size: 1.15em;}
.bbcsmall {font-size: 0.85em;}

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