/** STYLE.CSS - CSS BASIC STYLESHEET - COPIED FROM CS_LEISURE SITE 19JUN06, ONLY BODY-BGD-COL CHANGED**/

/*
   This file was validated at http://jigsaw.w3.org/css-validator/ on:
   6th June 2006.
   No errors were reported, but there were several warnings:

    * Line : 47 (Level : 1) You have no color with your background-color : div.header
    * Line : 48 (Level : 1) You have no color with your background-color : div.mainbody
    * Line : 71 (Level : 1) You have no background-color with your color : a:link
    * Line : 72 (Level : 1) You have no background-color with your color : a:visited
    * Line : 73 (Level : 1) You have no background-color with your color : a:hover
    * Line : 74 (Level : 1) You have no background-color with your color : a:active
    * Line : 91 (Level : 1) You have no color with your background-color : ul.menubaritem li
    * Line : 93 (Level : 1) You have no color with your background-color : ul.menubaritem li a
    * Line : 96 (Level : 1) You have no color with your background-color : ul.menubaritem li a:hover
    * Line : 121 (Level : 1) You have no color with your background-color : div.directions h6
    * Line : 126 (Level : 1) You have no color with your background-color : div.note h6
    * Line : 133 (Level : 1) You have no color with your background-color : img.photo

*/

/** Main container elements **/
body{
 text-align:center;/*This ALONE centres the pagewrapper in IE6 quirks  mode*/
 margin:0;border:0px ridge #000000;padding:0;background-color:rgb(121,191,45);
 color:green;text-transform:none;font-style:italic;font-variant:normal;font-weight:bold;font-size:9pt;font-family:arial,sans-serif;
}
div.pagewrapper{
 margin:4px auto;/*This (auto left/right) ALONE centres the pagewrapper in FF*/
 text-align:left; /*reset text alignment as it should be*/
 width:792px; /*width WITHOUT borders (IE needs a box-model work-around)*/
 border:4px outset #79bf2d;/*N.B: IE inset/outset borders appear ridged #79bf2d*/
}
/* OVERRIDE THE ABOVE FOR IE QUIRKS MODE FIXES:
(IE6 REVERTS IF FIRST LINE IS NOT <!DOCTYPE ~~>
- GEOCITIES INSERTS CODE BEFORE <!DOCTYPE  ~~> AND SCREWS IT UP!)
1) IE quirks mode box-model - width INCLUDES border, so add border size
2) IE outset/inset borders appear ridged, so fake the effect we want*/
* html div.pagewrapper{
 width:800px;
 border-top:4px solid rgb(214,235,192);
 border-left:4px solid rgb(214,235,192);
 border-bottom:4px solid rgb(67,106,25);
 border-right:4px solid rgb(67,106,25);
}
div.header{width:100%;text-align:center;vertical-align:middle;clear:both;background-color:rgb(121,191,45);}
div.mainbody{width:100%;border-color:lime;clear:both;background-color:rgb(121,191,45);text-align:center;}
div.footer{}
div.footer p{font-size:8pt;text-align:center;}
div.footer img{border:0;}

/** Basic page elements **/
table{border-collapse:separate;border-spacing:0px;caption-side:bottom;empty-cells:show;table-layout:auto;margin:0;border-style:ridge;border-width:0px;border-color:white;background-color:rgb(121,191,45);padding:0;color:green;text-align:center;text-transform:none;font-style:italic;font-variant:small-caps;font-weight:bold;font-size:9pt;font-family:arial,sans-serif;}
td{width:100%;margin:0 0 0 0;border-style:ridge;border-width:0px;border-color:white;background-color:rgb(121,191,45);padding:0 0 0 0;color:green;text-align:left;text-transform:none;font-style:italic;font-variant:small-caps;font-weight:bold;font-size:9pt;font-family:arial,sans-serif;}
p{text-align:left;font-size:9pt;font-weight:normal;margin:5px;}
ul{font-size:9pt;font-weight:normal;margin:5px;text-align:left;}
li{font-size:9pt;font-weight:normal;margin:5px;text-align:left;}
dt{font-size:10pt;font-weight:bold;font-style:italic;margin:10px 5px 5px 25px;text-align:left;}
dd{font-size:9pt;font-weight:normal;font-style:italic;margin:5px 5px 5px 50px;text-align:left;}
h6{font-size:12pt;font-weight:bold;margin:5px;text-align:left;}
h5{font-size:14pt;font-weight:bold;margin:5px;text-align:left;}
h4{font-size:16pt;font-weight:bold;margin:5px;text-align:left;}
h3{font-size:18pt;font-weight:bold;margin:5px;text-align:left;}
h2{font-size:22pt;font-weight:bold;margin:5px;text-align:left;}
h1{font-size:24pt;font-weight:bold;margin:5px;text-align:left;}
hr{text-align:center;width:75%;}
em{font-weight:bold;font-style:normal;}

/** Links **/
a:link {color:blue;background-color:transparent;} /*unvisited link*/
a:visited {color:#ff4500;background-color:transparent;}  /*visited link*/
a:hover {color:yellow;background-color:transparent;}  /*mouse over link*/
a:active {color:red;background-color:transparent;}  /*selected link*/
a.external:after {content: url(http://www.geocities.com/cs_leisure/images/others/linkout.png)}

/** Header stuff **/

/*Header table*/
table.header{width:100%;text-align:center;vertical-align:middle;}
table.header td{width:33%;text-align:center;vertical-align:middle;}

/*Contact information*/
p.phonecontacts{margin-left:50px;text-align:left;}
p.emailcontacts{margin-left:50px;text-align:left;font-variant:normal;font-size:12pt;}/*Use lowercase for email address*/
p.postalcontacts{margin-left:0px;text-align:left;}

/*Menu bar*/
ul.menubaritem {float:left;width:99px;padding: 0; margin: 0; border-bottom: 0/*1px*/ solid green; font: 1em sans-serif;}
ul.menubaritem ul {display: none;width:99px;padding: 0; margin: 0; border-bottom: 0/*1px*/ solid green; font: 1em sans-serif;}
ul.menubaritem li {background: rgb(121,191,45);list-style-type: none; border: 1px solid green; /*border-width: 1px 1px 1px 1px;*/ position: relative; margin: 0; padding: 0;}
ul.menubaritem li.sub > a {font-weight: bold;}
ul.menubaritem li a {display: block; padding: 5px 7px; text-decoration: none;background: rgb(121,191,45);}
ul li:hover > ul {display:block;position:absolute;top: -1px; left: 100%;}
ul.menubaritem > li:hover > ul {width:99px;top:25px;left:0px;}
ul.menubaritem li a:hover {background:#ffa500;}

/** Mainbody stuff **/

/*Page title*/
h1.pagetitle{background-color:#ffa500;color:rgb(255,255,0);text-align:center;font-size:24pt;font-weight:bold;margin:0;border-width:0;padding:20px 0 20px 0;}

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

/*A standard horizontal menu with | separators*/
ul.horizontal{font-size:12pt;font-weight:bold;}
ul.horizontal li{display:inline;}

/*Lists - I don't want bullets or markers*/
ul{list-style-type:none;}

/*Brief description boxes with a title, an image, and some text*/
div.block{width:250px;/*background-color:yellow;*/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;}

/*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);text-align:center;}
div.directions p{margin:0;padding:2px 5px 2px 5px;font-variant:normal;}

/*Any general notes - a blueish outlined box*/
div.note{float:left;clear:none;width:200px;text-align:left;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);text-align:center;}
div.note p{margin:0;padding:5px;font-variant:normal;}

/*District maps (also Chumphon map)*/
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 #000000;background-color:#ffffff;padding:10px;}

/*Captioned photo (use in-line style to position, e.g.. style="float:right;clear:none;" )*/
/*N.B. CANNOT GET THIS TO WORK WITH A CENTRED IMAGE (THE DIV FILLS THE FULL PAGE WIDTH) SEE BELOW*/
div.photo {float:right;margin:5px;border:1px solid #000000;background-color:#ffffff;padding:10px;text-align:center;color:#000000;font-variant:normal;}
div.photo img {display:block;margin:0;border-width:0;padding:0;}

/*Captioned photo, centered (DON'T TRY TO FLOAT THIS - it stays centred in all Non-IE browsers)*/
/* "display:table;margin:5px auto;" solution for non-IE */
/* "width:480px;" workaround for IE (if img bigger, div expands, but caption is still limited to this size)*/
div.photo_centered {
float:none;
width:480px;/*Workaround for IE*/
display:table;
margin:5px auto;
border:1px solid #000000;
background-color:#ffffff;
padding:10px;
text-align:center;
color:#000000;
font-variant:normal;}

div.photo_centered img { display:block; margin:0; border-width:0; padding:0;}

/*Transport timetables*/
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;}

/**
 Reminder of CSL colours
  Normal orange = #ffa500
  CSL orange = rgb(242,94,21) #f25e15 ;
  CSL mid-green = rgb(121,191,45) #79bf2d ;
  CSL pale-green = rgb(159,255,159) #9fff9f ;
**/