﻿body
{
background-color: #ffffcc;	/** Provides correct colour background when page overflows div#container **/
font-family: georgia, verdana, arial, helvetica, sans-serif;
}


                       /** DIVISION styling **/


div#container		/** Provides a parent element which hugs the viewable browser window used to position child elements (breaks in IE6) **/
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-width: 25em;
min-height: 15em;	/** IE6 work around follows....
width: 770px;		...setting container width and height fixes element confusion / muddling in IE6..
height: 550px;		... end of IE6 fudge **/
}

div#header		/** Div at top of page contains other divs for logo, header links and curve image **/
{
z-index: 4;
position: absolute;
top: 0;
left: 0;
height: 20%;
min-height: 3em;	/** Prevents headerlinks and logo from vanishing **/
width: 100%;
min-width: 28em;	/** Prevents wrapping of headerlinks and logo **/
}

div#headerleft		/** Div inside header contains logo **/
{
z-index: 6;
position: absolute;
left: 0;
right: 10%;
width: 90%;
height: 100%;
background-color: #008080;

}

div#headerright		/** Div inside header contains curve image **/
{
z-index: 5;
position: absolute;
left: 90%;
right: 0;
width: 10%;
height: 100%;
}

div#left		/** Div at left of page contains other divs for navigation list and curve image **/
{
z-index: 2;
position: absolute;
top: 20%;
left: 0;
width: 20%;
min-width: 7em;		/** To prevent navbar from wrapping **/
height: 80%;			
min-height: 21em;	/** To prevent navbar list items from overflowing out of left column design **/
}

div#lefttop		/** Div inside left contains navigation list **/
{
z-index: 1;
position: absolute;
top: 0;
width: 100%;
height: 80%;
background-color: #008080;
}

div#leftbottom		/** Div inside left contains curve image **/
{
z-index: 0;
position: absolute;
top: 80%;
width: 100%;
left: 0;		/** required for positioning of curve image **/
right: 0;		/** required for positioning of curve image **/
height: 20%;
}

div#main		/** Div beneath header and to right of 'left' div. This is where all page specific content is displayed **/
{
position: absolute;
top: 20%;
bottom: 0;
left: 20%;
right: 0;
width: 80%;
height: 80%;
background-color: #ffffcc;
}

div#map			/** styling for google maps code on **/
{
margin-left: 5%;
margin-top: 1%;
width: 90%;
height: 65%;
}


                      	/** IMAGE styling **/


img#imgheaderlogo
{
z-index: 6;
float: left;
width: 65%;
height: 80%;
margin-top: 1%;
border: none;		/** remove border from image added in by anchor **/
}

img#headcurve
{
width: 100%;
height: 100%;
}

img#leftcurve
{
width: 100%;
height: 100%;
}

img#mainseccurve
{
top: 0;
left: 0;
height: 5em;
}

img.titleimg
{
width: 23%;
float: right;
padding-bottom: 1%;
padding-left: 2%;
margin-right: 5%;
}

img.mainimgportright
{
width: 30%;
float: right;
padding-top: 2%;
margin-left: 2%;
margin-bottom: 2%;
padding-right: 2%;
vertical-align: top;
}

img.mainimglandright
{

width: 47%;
float: right;
padding-top: 2%;
margin-left: 2%;
margin-bottom: 2%;
padding-right: 2%;
vertical-align: top;
}

img.mainimglandleft
{
width: 47%;
float: left;
padding-top: 2%;
padding-left: 2%;
margin-right: 2%;
margin-bottom: 2%;
vertical-align: top;
}

img.mainimgportleft
{
width: 30%;
float: left;
padding-top: 2%;
padding-left: 2%;
margin-right: 2%;
margin-bottom: 2%;
vertical-align: top;
}


img.panoramic
{
width: 90%;
margin-top: 2.5%;
margin-left: 5%;
margin-bottom: 1%;
}

img.smallimglandright
{

width: 28%;
float: right;
margin-left: 2%;
margin-bottom: 2%;
padding-right: 2%;
vertical-align: top;
}

img.smallimglandleft
{
width: 28%;
float: left;
padding-left: 2%;
margin-right: 2%;
margin-bottom: 2%;
vertical-align: top;
}


                       /** NAVIGATION styling **/


ul#headerlinks
{
z-index: 6;
float: right;
margin-right: -7%;
}

li.headerlinks
{
display: inline;
font-size: 100%;
color: #ffffff;

}

a.headerlinks:link {color: white; text-decoration: none;}
a.headerlinks:visited {color: white; text-decoration: none; font-style: italic;}
a.headerlinks:hover {color: #ffd700; text-decoration: underline;}
a.headerlinks:active {color: black; text-decoration: none;}

ul#navbarul
{
z-index: 3;
list-style: none;
margin-left: 1%;

padding: 0px;
}
a.navbarli:link {color: white; text-decoration: none;}
a.navbarli:visited {color: white; text-decoration: none; font-style: italic;}
a.navbarli:hover {color: #ffd700; text-decoration: underline;}
a.navbarli:active {color: black; text-decoration: none;}


                       /** PARAGRAPH and SPAN styling **/


p#maintitle
{
display: inline;
margin-top: 1%;
margin-left: 5%;
text-align: center;
color: #008080;
font-weight: bold;
font-size: 150%;
}

p#maintext
{
margin-left: 12%;
margin-right: 5%;
padding-bottom: 1%;
text-align: justify;
}

p#maintext2
{
clear: both;
margin-left: 12%;
margin-right: 5%;
text-align: center;
}

p#footnote
{
position: fixed;

right: 0%;
bottom: 0%;
text-align: right;
font-size: 55%;
}

p.smalltext
{
font-size: 60%;
}


p#disclaimer
{

position: absolute;
left: 5%;
bottom: 0%;
text-align: left;
font-size: 65%;
color: #008080;
}

p.commentleft
{
margin-left: 12%;
margin-right: 25%;
padding-bottom: 1%;
text-align: left;
clear: left;
}

p.commentright
{
margin-left: 32%;
margin-right: 5%;
padding-bottom: 1%;
text-align: right;
clear: right;
}

span.comment
{
font-style: italic;
font-weight: 100;
}

span.weightyright
{
float: right;
font-family: Bradley Hand ITC;
font-weight: bold;
}

span.weightyleft
{
float: left;
font-family: Bradley Hand ITC;font-weight: bold;
}

span.righty
{
float: right;
}

span.underline
{
text-decoration: underline;
}


                       /** LISTS styling (non-navigation) **/


ul.maintextul
{
margin-top: 2%;
margin-left: 12%;
list-style-type: circle;
list-style-position: outside;
}

li.maintextli
{
margin-bottom: 1%;
}

dl.maintextdl
{
margin-top: 2%;margin-left: 12%;
}

dt.maintextdt
{
font-weight: bold;
margin-bottom: 1%;
}

dd.maintextdd
{
margin-bottom: 1%;
}



                       /** ANCHOR styling **/

a.email:link {color: #008080; text-decoration: none;}
a.email:visited {color: #008080; text-decoration: none; font-style: italic;}
a.email:hover {color: #008080; text-decoration: underline;}
a.email:active {color: black; text-decoration: none;}

a.standardlink:link {color: #008080; text-decoration: none;}
a.standardlink:visited {color: #008080; text-decoration: none; font-style: italic;}
a.standardlink:hover {color: #008080; text-decoration: underline;}
a.standardlink:active {color: black; text-decoration: none;}


                       /** TABLE and INPUT styling **/


table.tariff
{
margin-top: 3%;

margin-left: 15%;
width: 70%;
}

th.tariff
{
text-align: center;
}

td.tariff
{
text-align: center;}

table.enquiry
{

position: absolute;

top: 30%;
left: 5%;
width: 80%;
font-size: 95%;
border: none;}

td.enquiryleft
{
text-align: left;
border: none;
}

td.enquiryright

{
text-align: right;
border: none;
}

td.enquirycenter
{
text-align: center;
border: none;
}

form.enquiry
{
font-size: 90%;
}

.freetext	/** class for form inputs**/
{
margin-top: 0.25%;
}

select.list
{
margin-top: 0.25%;
}

input.clear
{
background-color: #f97575;
border-style: ridge;
margin-top: 0.25%;

}

input.submit
{
background-color: #669966;
border-style: ridge;
margin-top: 0.25%;
}
