/** ALTERNATIVE.CSS - A MORE STANDARD LAYOUT **/

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

    * Line : 40 (Level : 2) Redefinition of margin-top : dt
    * Line : 54 (Level : 1) You have no background-color with your color : a:link
    * Line : 55 (Level : 1) You have no background-color with your color : a:visited
    * Line : 56 (Level : 1) You have no background-color with your color : a:hover
    * Line : 57 (Level : 1) You have no background-color with your color : a:active
    * Line : 61 (Level : 1) You have no color with your background-color : div.pagewrapper
    * Line : 62 (Level : 1) You have no color with your background-color : div.header
    * Line : 63 (Level : 1) You have no color with your background-color : div.mainbody
    * Line : 64 (Level : 1) You have no color with your background-color : div.footer
    * Line : 71 (Level : 1) You have no color with your background-color : table.header
    * Line : 71 (Level : 2) Redefinition of width : table.header
    * Line : 72 (Level : 1) You have no color with your background-color : table.header td
    * Line : 72 (Level : 2) Redefinition of width : table.header td
    * Line : 81 (Level : 1) You have no color with your background-color : div#menubar
    * Line : 85 (Level : 1) You have no color with your background-color : ul.menubaritem
    * Line : 86 (Level : 1) You have no color with your background-color : li.sub
    * Line : 104 (Level : 1) You have no color with your background-color : div.block
    * Line : 111 (Level : 1) You have no color with your background-color : div.directions h6
    * Line : 116 (Level : 1) You have no color with your background-color : div.note h6
    * Line : 123 (Level : 1) You have no color with your background-color : img.photo
    * Line : 128 (Level : 1) You have no color with your background-color : div.photo_centered img
    * Line : 128 (Level : 1) You have no color with your background-color : div.photo_centered img
*/

/** ENSURE THE DEFAULTS ARE WHAT WE EXPECT ! **/

body{margin:0;border:0px ridge #000000;padding:0;background-color:rgb(159,255,159);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;}
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;margin-top:10px;font-style:italic;clear:both;margin:5px;}/*clears the image float from the preceding dd*/
dd{font-size:9pt;font-weight:normal;font-style:italic;margin:5px;}
h6{font-size:12pt;font-weight:bold;margin:5px}
h5{font-size:14pt;font-weight:bold;margin:5px}
h4{font-size:16pt;font-weight:bold;margin:5px;}
h3{font-size:18pt;font-weight:bold;margin:5px;}
h2{font-size:22pt;font-weight:bold;margin:5px;text-align:left;}
h1{font-size:24pt;font-weight:bold;margin:5px;}
hr{text-align:center;width:75%;}
em{font-weight:bold;font-style:normal;}

/** AND THEN SET UP OUR SPECIAL STYLES **/

/*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/csl_photos/images/others/linkout.png)}

/*Div containers for main page elements*/
div.pagewrapper{float:none;clear:none;width:800px;border:2px ridge #000000;background-color:#ffffff;}
div.header{float:none;clear:none;width:800px;border:2px ridge #ff0000;background-color:#fff0f0;}
div.mainbody{position:relative;left:150px;float:none;clear:none;width:650px;border:2px ridge #00ff00;background-color:#f0fff0;}
div.footer{float:none;clear:both;width:800px;border:2px ridge #0000ff;background-color:#f0f0ff;}
div.footer p{font-size:8pt;text-align:center;}
div.footer img{border:0;}

/** Header stuff **/

/*Header table*/
table.header{float:none;clear:none;width:100%;border:2px ridge #ff7f00;background-color:#ff7f70; width:100%;text-align:center;vertical-align:middle;}
table.header td{float:none;clear:none;width:100%;border:2px ridge #ff7f00;background-color:#ff7f70; 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*/
/** NOT YET WORKING PROPERLY **/
div#menubar{float:left;clear:left;width:150px;border:2px ridge #ffffc0;background-color:#ffe0e0;}
ul{margin:0px 0px 0px 0px;border-width:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
li{margin:5px 5px 5px 5px;border-width:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
ul{list-style-position:inside;list-style-image:none;list-style-type:none;}
ul.menubaritem{border:2px ridge #ff00ff;background-color:#ffc0ff;}
li.sub{border:2px ridge #00ffff;background-color:#c0ffff;}

/** 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{float:none;clear:right;width:100%;border:1px solid #ffff00;background-color:#fffff0;}
div.block h2{float:right;text-align:center;font-size:12pt;font-weight:bold;margin:5px}
div.block img{float:left;}
div.block p{text-align:left;}

/*Directions for getting somewhere - a yellowish outlined box*/
div.directions{float:none;clear:right;width:100%;border:1px solid rgb(210,145,45);background-color:rgb(247,236,164);color:rgb(210,145,45);}
div.directions h6{margin:0;background-color:rgb(238,198,115);text-align:center;}
div.directions p{margin:0;padding:2px 5px 2px 5px;}

/*Any general notes - a blueish outlined box*/
div.note{float:none;clear:right;width:100%;border:1px solid rgb(0,0,128);background-color:rgb(208,249,228);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;}

/*District maps (also Chumphon map)*/
img.map {float:none;clear:right;margin:5px;}

/*Large photos (use in-line style to position, e.g. style="float:right;clear:none;" )*/
img.photo {float:none;clear:right;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)*/
div.photo,div.photo_centered {float:none;clear:right;border:1px solid #000000;background-color:#ffffff;padding:10px;text-align:center;color:#000000;}
div.photo img,div.photo_centered img {display:block;margin:0;border-width:0;padding:0;}

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