/*This is the generic style sheet. */

* { margin: 0; padding: 0;}

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}

html {
background: #ffffff url(../images/bg2.gif);
background-repeat: repeat-x;
}

body { 
font: 16px/1.4 "pt-sans", Calibri, "Helvetica Neue", Arial, sans-serif ;
color: #535342;
}

html, body, #page-wrap { 
/*This makes the white page-wrap extend to the bottom of the browser. */
height: 100%;
}

footer, header, nav, section {
display: block;
}

/*The page wrap id below is used to centre the page. */

#page-wrap {
width: 960px;
margin: 0px auto 10px;
background: white;
}

/*Header, which contains navigation, starts here. */

header {
background: #006d82;
background-repeat: no-repeat;
background-position: 90px 0px;
position: relative;
height: 134px;
}


header h1 {
position: absolute;
top: 47px;
right: 10px;
letter-spacing: 2px;
font-weight: normal;
}

#logo {
padding: 20px 0px 0px 10px;
}

h1 {
font: 20px "PT Sans", Calibri, "Helvetica Neue", Arial, sans-serif;
color: white;
}

/*Navigation starts here. */

nav { 
margin: 25px 0px 10px 10px;	
}

nav ul {
list-style: none;
}

nav li { 

/* Top left corner */
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
	
/* Top right corner*/
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;

/* Opacity */
opacity: 0.7;
					
background: white;
float: left;
margin: 0px 6px 0px 0px;
padding: 5px 20px 3px 20px;	
}

nav li.active, nav li:hover{
opacity: 1.0;		
}

nav a { color: #000; text-decoration: none; }
nav a:hover { text-decoration: underline; }

/*Main content starts here. */

#main-content {
display: block;
padding: 0px 0px 10px 0px;
}

section {
padding: 10px 10px 0px 0px;
background: white;
}

section img {
padding: 0px 10px 0px 10px;
float: left;
}

/*Below is some test code for inserting a swf rather than an image. remove is not used. */

section .slide {
width: 98.5%;
max-width: 700px;
margin: 0;
padding: 0px 10px 10px 10px;
float: left;
}

#main-content a:link {  
color              : #006d82;
background         : none;
text-decoration    : none;
}

#main-content a:visited {  
color              : #006d82;
background         : none;
text-decoration    : underline;
}

#main-content a:hover {  
color              : #006d82;
background         : none;
text-decoration    : underline;
}

#main-content a:active {  
color              : #006d82;
background         : none;
text-decoration    : underline;
}


/*In all other style sheets, apart from small mobile, I've included an additional style called .slide2. I've explained what it does in those style sheets. But it isn't needed in this style sheet. Can't work out why. */

.flashaltimage {
width: 100%;
max-width: 700px;
max-height: 495px;
display: block;
padding: 0px 0px 0px 0px;
}

#main-content h1 {
font-size: 20px;
font-weight: bold;
color: #999999;
padding: 14px 10px 10px 10px;
}

h2 {
font-size: 20px;
font-weight: bold;
color: #006d82;
}

h3 {
font-size: 16px;
font-weight: bold;
}

#main-content p {
padding-top: 10px;
}

blockquote {
padding-top: 10px;
padding-right: 400px;
padding-bottom: 10px;
font-weight: bold;
}

/*Footer starts here. */

footer {
padding: 0px 0px 10px 10px;
}

footer p {
font-size: 12px;
padding: 0px 0px 0px 10px;
}


/*Makes images in content area shrink in smaller screen sizes*/

.floatleft, .floatright {
width: 98.5%;
max-width: 700px;
display: block;
margin: auto auto 1.5em;
}

/*To stop parent container collapsing when containing floating elements. Add class called clearfix to parent container*/

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.clearfix {
min-height:1px;
}


/*Tip: If you use position absolute, the parent of it needs to have position relative*/

/*controlling the about us page*/

#about-main-content h2, #about-main-content h3, #about-main-content p, #about-main-content blockquote, #about-main-content ul {
padding-left: 371px;
}

#about-main-content img {
width: 98.5%;
max-width: 350px;
display: block;
}

#about-main-content {
display: block;
padding: 0px 0px 10px 0px;
}

#about-main-content ul {
padding-top: 10px;
padding-left: 391px;
}

#about-main-content p {
padding-top: 10px;
padding-right: 10px;
}

/*controlling the contact page*/

#contact-main-content {
display: block;
padding: 0px 0px 10px 0px;
}

#contact-main-content h2, #contact-main-content h3, #contact-main-content p, #contact-main-content blockquote, #contact-main-content ul {
padding-left: 10px;
}

#contact-main-content p {
padding-top: 10px;
}

#contact-main-content ul {
padding-top: 10px;
padding-left: 40px;
}