/*
  default.css
  ===========
  Default CSL stylesheet, validated at http://jigsaw.w3.org/css-validator/ on:
   
    
  02 Aug 08 V00.01 validated: valid CSS 2.1, no errors or warnings were reported
  15 Aug 08 V00.02 validated: Congratulations! No Error Found. This document validates as CSS level 2.1!
  19/22 Aug 08 Added @media print{} rules and started fixing the print styling for Firefox 3.0.
  22 Aug 08 V00.03 validated: Validates as CSS level 2, 2.1 and 3 (many errors if trying to validate as CSS level 1).
  17 May 09 V01.00 validated: "Congratulations! No Error Found. This document validates as CSS level 2.1 !"
  3/4 Jun 09 changed the pop-up menu to use specificity
  05 Jun 09 V01.01 validated: "Congratulations! No Error Found. This document validates as CSS level 2.1 !" 


IE-VERSION-SPECIFIC STYLING:
============================

The following is a list of all the IE-specific styling in this file

Ref  5  5.5  6   7       Element
=== === === === ===  ===============
[1]  Y   Y   Y   -   div.pagewrapper   Semi-transparent background effect doesn't work {OK in IE7}
[2]  Y   Y   Y   -   h1.pagetitle   Semi-transparent background effect doesn't work {OK in IE7}
[3]  Y   Y   Y   Y   div.pagewrapper   Manually configured outset border effect 
[4]  Y   Y   -   -   div.pagewrapper   Box model bug fix (include padding and border in width/height).
[5]  Y   Y   Y   -   div.pagewrapper   Workaround to put a gap between the top of the pagewrapper and the text
...[6]&[7] removed...
[8]  Y   Y   Y   -   div.photo_centered   Workaround to 'shrink-wrap' the div (N.B. caption restricted to this width)
...[9]&[10] removed...
[11] bottom page margin

Notes:
[1] and [2] (Semi-transparent background effect) also require non-standard styling (see nonstandard.css)

*/



/** GENERIC STYLES  **/
/* Basic tags */
body{
 text-align:center;
 margin:0;
 border:0px ridge #000;
 padding:0;
 background:#9fff9f url(../images/backgrounds/body.jpg) no-repeat fixed bottom left;
 color:#006f00;
 text-transform:none;
 font-style:normal;
 font-variant:normal;
 font-weight:bold;
 font-size:9pt;
 font-family:verdana,arial,sans-serif;
}
@media print{body{background:#ffffff;color:#000000;font-family:Georgia,"Times New Roman", serif;}}

ul{
 list-style-type:none;
}

/* font stuff... */
h6, h5, h4, h3, h2, h1{
 margin:5px;
 text-align:left;
}

p, ul, li, dd{font-weight:normal;}

h6, h5, h4, h3, h2, h1, dt{font-weight:bold;}

p, ul, li, dd{font-size:9pt;}
dt, h6{font-size:12pt;}
h5{font-size:14pt;}
h4{font-size:16pt;}
h3{font-size:18pt;}
h2{font-size:22pt;}
h1{font-size:24pt;}

div{font-weight:normal;font-size:9pt;} /* the div in footer seems bold, bigger, left aligned */

dt{
 font-style:italic;
 margin:10px 5px 5px 25px;
}

dd{
 font-style:italic;
 margin-left:50px;
}

hr{
 text-align:center;
 width:75%;
}

em{
 font-weight:bold;
 font-style:normal;
}

/* Links */
a:link{
 color:#00f;
 background-color:#8fbf4f;
}
a:visited{
 color:#f25e15;
 background-color:#8fbf4f;
}
a:hover{
 color:#ff0;
 background-color:#8fbf4f;
}
a:active{
 color:#f00;
 background-color:#8fbf4f;
}
a.external:after{
 content: url(../images/others/linkout.png)
}
@media print{
 a:link, a:visited{color:blue;background:white;text-decoration:underline;}
 a.external:after{content:" (" attr(href) ") ";font-size:90%;}
}

.alert{margin:auto;width:95%;border:2px solid #000;background-color:#ff0;font: bold normal normal 10px Verdana, sans-serif;color:#000;text-align:center;}
@media print{.alert{display:none;}}

.browsercheck{margin:auto;width:95%;border:2px solid #fff;background-color:#f00;font: bold normal normal 10px Verdana, sans-serif;color:#fff;text-align:center;}
.browsercheck a:link,.browsercheck a:visited,.browsercheck a:hover,.browsercheck a:active{background-color:#f00;}


/**  MAIN STRUCTURAL BLOCKS  **/
div.pagewrapper{
 margin:4px auto 768px auto;
 text-align:left;
 width:792px;
 border:4px outset #79bf2d;
 background:#8fbf4f url(../images/backgrounds/pagewrapper.jpg) no-repeat fixed bottom left;
 color:#006f00;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[1]  Semi-transparent background effect doesn't work {OK in IE7}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Until I get the AlphaImageLoader working for IE5 use a solid background */
#IE5 div.pagewrapper{
 background: #79C942 none no-repeat fixed bottom left;
}
/* Use iepngfix.htc solution (see nonstandard.css) for IE5.5 and IE6 */
#IE55 div.pagewrapper,#IE6 div.pagewrapper{
 background:transparent url(../images/backgrounds/pagewrapper-ie55-6.png) repeat-y fixed top left;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[3]  Manually configured outset border effect
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#IE5 div.pagewrapper,#IE55 div.pagewrapper,#IE6 div.pagewrapper,#IE7 div.pagewrapper{
 border-top:4px solid #CCE6AF;
 border-left:4px solid #CCE6AF;
 border-bottom:4px solid #4A751C;
 border-right:4px solid #4A751C;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[4]  Box model bug fix (include padding and border in width/height).
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#IE5 div.pagewrapper,#IE55 div.pagewrapper{
 width:800px;
}
@media print{
 div.pagewrapper{margin:0;border:0;width:100%;background:#ffffff;color:#000000;}
 #IE5 div.pagewrapper#IE55 div.pagewrapper,#IE6 div.pagewrapper,#IE7 div.pagewrapper{border-top:0;border-left:0;border-bottom:0;border-right:0;width:100%;background:#ffffff;}
}


div.header{
 width:100%;
 text-align:center;
 vertical-align:middle;
 clear:both;
}

div.mainbody{
 width:100%;
 clear:both;
 text-align:left;
}

div.footer{
position:relative;width:100%;height:auto;
clear:both;float:none;
margin:5px 0 0 0;border-top:1px solid #888;padding:0;
}


div.clearfloats{
 clear:both;
 float:none;
}


/** ELEMENTS IN DIV.HEADER **/
div.header div.block{
 margin:0;
 width:33%
}

/*Logo rollover link*/
a.rollover {
 display:block;
 float:left;
 border-width:0;
 width:200px;
 height:144px;
 background: url("../images/rollovers/logo.png") 0 0 no-repeat;
}
a.rollover:hover {
 background-position: 0 -144px;
}
a.rollover:active {
 background-position: 0 0;
}
a.rollover img{display:none;}
@media print{
 a.rollover {background:white;margin:0;border:0;padding:0;}
 a.rollover img{display:inline;margin:0;border:0;padding:0;}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[5]  Workaround to put a gap between the top of the pagewrapper and the text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#IE5 div.header div.block p,#IE55 div.header div.block p,#IE6 div.header div.block p,#IE7 div.header div.block p{
 margin:0;padding:0;padding-top:12px;
}

/** Drop-down and Pop-up menus - Basics**/
div.header li{display:block;float:left;}
div.header li li{float:none;}
div.header ul{list-style-type:none;margin:0;border:0;padding:0;}
div.header li{width:97px;height:30px;text-align:center;}
div.header ul,div.header li{position:relative;}
div.header li ul{top:0px;left:0px;}
div.header li li ul{top:0px;left:100px;}
div.header ul ul{display:none;}
div.header li:hover ul{display:block;}
div.header li:hover li:hover ul{display:block;}
div.header li:hover li ul{display:none;}
div.header li:hover ul{position:absolute;top:31px;left:-1px;}
div.header li:hover li:hover ul{position:absolute;top:5px;left:97px;}
div.header li{background:#79bf2d;}
div.header li{border:1px solid #080;}
div.header li:hover ul{z-index:2;}
div.header li:hover li:hover ul{z-index:3;}
div.header li:hover li:hover li:hover ul{z-index:40;}
/* Extra level */
div.header li:hover li:hover li:hover ul{display:block;}
div.header li:hover li:hover li:hover ul{position:absolute;top:5px;left:97px;}
div.header li:hover li:hover li ul{display:none;}
/* Links inside */
div.header li a{display:block;height:100%;font:1em sans-serif;text-decoration:none;font-weight:bold;background:#79bf2d;color:#00f;}
div.header li a:hover {background:#ffa500;color:#ff0;}

@media print{
 div.header ul{display:none;width:12%;}
 div.header li{ background: #ffffff; color:#000000; border: 1px solid #000000; }
 div.header li a{font-weight:normal;color:#000000;}
}


/* ELEMENTS IN DIV.MAINBODY **/
/*Page title*/
h1.pagetitle{
 width:100%;
 text-align:center;
 font-size:24pt;
 font-weight:bold;
 margin:0;
 border-width:0;
 padding:20px 0;background:#c69f27 url(../images/backgrounds/h1.jpg) no-repeat fixed bottom left;
 color:rgb(255,255,0);
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[2]  Semi-transparent background effect doesn't work {OK in IE7}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* Until I get the AlphaImageLoader working for IE5 use a solid background */
#IE5 h1.pagetitle{
 background: #E5B427;color:rgb(255,255,0);
}
/* Use iepngfix.htc solution (see nonstandard.css) for IE5.5 and IE6 */
#IE55 h1.pagetitle,#IE6 h1.pagetitle{
 background:transparent url(../images/backgrounds/h1-ie55-6.png) repeat-y fixed top left;color:rgb(255,255,0);
}
@media print{
 h1.pagetitle{width:99%;border-width:1px;border:3px solid #ff8000;background:white;color:black;}
}


/*Brief description boxes with a title, an image, and some text*/
div.block{
 width:250px;
 margin:5px;
 float:left;
 clear:none;
 text-align:center;
}
div.block h2{
 text-align:center;
}
div.block ul{
 list-style-type:disc;margin:0px;
}
div.block li{
 margin:0px;
}
@media print{div.block{width:31%;margin:1%}}

/*Directions for getting somewhere - a yellowish outlined box*/
div.directions{
 margin:5px;
 border:1px solid rgb(202,128,86);
 background-color:rgb(255,239,189);
 padding:0;
 color:rgb(202,128,86);
}
div.directions h6{
 margin:0;
 background-color:rgb(228,183,137);
 color:rgb(202,128,86);
 text-align:center;
}
div.directions p{
 margin:0;
 padding:2px 5px 2px 5px;
 font-variant:normal;
}
div.directions a:link{
 color:#00f;
 background-color:rgb(255,239,189);
}
div.directions a:visited{
 color:#ffa500;
 background-color:rgb(255,239,189);
}
div.directions a:hover{
 color:#ff0;
 background-color:rgb(255,239,189);
}
div.directions a:active{
 color:#f00;
 background-color:rgb(255,239,189);
}
@media print{
 div.directions{background:white;color:black;border:3px solid rgb(202,128,86);}
 div.directions h6{background:white;color:black;border-bottom:3px solid rgb(202,128,86);}
 div.directions a:link,div.directions a:visited{color:blue;background:white;}
}

/*Any general notes - a blueish outlined box*/
div.note{
 margin:5px;
 border:1px solid rgb(0,0,128);
 background-color:rgb(208,249,228);
 padding:0;
 color:rgb(9,86,166);
}
div.note h6{
 margin:0;
 background-color:rgb(127,182,221);
 color:rgb(9,86,166);
 text-align:center;
}
div.note p{
 margin:0;
 padding:5px;
 font-variant:normal;
}
div.note a:link{
 color:#00f;
 background-color:rgb(208,249,228);
}
div.note a:visited{
 color:#ffa500;
 background-color:rgb(208,249,228);
}
div.note a:hover{
 color:#ff0;
 background-color:rgb(208,249,228);
}
div.note a:active{
 color:#f00;
 background-color:rgb(208,249,228);
}


div.note h6 a:link{
 color:#00f;
 background-color:rgb(127,182,221);
}
div.note h6:visited{
 color:#ffa500;
 background-color:rgb(127,182,221);
}
div.note h6 a:hover{
 color:#ff0;
 background-color:rgb(127,182,221);
}
div.note h6:active{
 color:#f00;
 background-color:rgb(127,182,221);
}
@media print{
 div.note{background:white;color:black;border:3px solid rgb(0,0,128);}
 div.note h6{background:white;color:black;border-bottom:3px solid rgb(0,0,128);}
 div.note a:link,div.note a:visited{color:#0000ff;background:white;}
}

/*Various maps - inset effect*/
img.map {
 float:right;
 margin:5px;
 border:3px inset rgb(121,191,45);
}

/*Large photos (use in-line style to position, e.g. style="float:right;clear:none;" )*/
img.photo {
 margin:5px;
 border:1px solid #000;
 background-color:#fff;
 color:#000;
 padding:10px;
}

/*Floated photo with border and caption*/
div.photo, div.photo_left {
 float:right;
 margin:5px;
 border:1px solid #000;
 background-color:#fff;
 Padding:10px;
 text-align:center;
 color:#000;
 font-variant:normal;
}
div.photo_left {
 float:left;
}
div.photo img, div.photo_left img {
 display:block;
 margin:0;
 border-width:0;
 padding:0;
}

/*Centered photo with border and caption*/
div.photo_centered {
 float:none;
 display:table;
 margin:5px auto;
 border:1px solid #000;
 background-color:#fff;
 padding:10px;
 text-align:center;
 color:#000;
 font-variant:normal;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ IE-VERSION-SPECIFIC STYLING ~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~[8]  Workaround to 'shrink-wrap' the div (N.B. caption restricted to this width)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#IE5 div.photo_centered, #IE55 div.photo_centered, #IE6 div.photo_centered{
 width:480px;
}
div.photo_centered img{
 display:block;
 margin:0;
 border-width:0;
 padding:0;
}

/*Transport timetables*/
div.timetable{
 float:left;
 clear:none;
 margin:20px;
 width:40%;
}
table.timetable{
 border-width:1px;
 border-style:outset;
}
table.timetable td{
 text-align:center;
 border-width:1px;
 border-style:inset;
 padding:5px;
 width:20%;
}
table.timetable h6{
 text-align:center;
}
table.timetable h5{
 text-align:center;
 margin-bottom:0;
}

/*Strip of thumbnail photos*/
div.thumbstrip{
 clear:both;
 text-align:right;
}
div.thumbstrip img{
 border-width:0;
}

/*Horizontal menu on one row*/
ul.horizontal{
 font-size:12pt;
 font-weight:bold;
}
ul.horizontal li{
 display:inline;
}

/*An 'asterisk' like link in a heading*/
span.linkinheading{
 font-size:9pt;
 font-weight:normal;
 vertical-align:super;
}


/** ELEMENTS IN DIV.FOOTER **/
div.footer img.tatlogo{clear:none;float:right;}
div.footer img.htmllogo,div.footer img.csslogo{clear:left;float:left;}
div.footer p,div.footer div{margin:0;padding:0;text-align:center;}
div.footer img{margin:0;border:0;padding:0;}
.printonly {display:none;}
@media print{.webonly{display:none;}}
@media print{.printonly{display:block;}}
/* Top Of Page link */
a.totop{display:block;clear:right;float:right;border:1px outset #00f;}
a.totop:hover{border:1px inset #00f;}
/* The noscript validation fix */
div.footer div p{display:inline;}




/** FOR LAYERMAP.HTM ONLY **/

/*Layer map layer positioning styles*/
div.underlay {
 position:absolute;
 top:0px;
 left:0px;
 background-color:rgb(255,239,189);
 color:#000;
 width:640px;
 height:480px;
}
div.layer {
 position:absolute;
 top:0px;
 left:0px;
}
div.layer_controls {
 position:absolute;
 top:50px;
 left:10px;
}
p.layer_footnote {
 position:absolute;
 top:480px;
 left:10px;
 font-size:8pt;
}
p.layer_footnote img{
 float:left;
}


/*** For incorporating Thai scipt into English text ***/
span.thai{font: bold normal normal larger arial, sans-serif;color:#000;}
dd span{display:block;}

/*** For SWF slideshow support ***/
div.photo img.printonly {display:none;}
@media print{div.photo img.printonly{display:block;}}
@media print{div.photo object{display:none;}}