/*This style sheet controls screen widths 481px - 795px. */

#page-wrap {
width: 100%;
max-width: 700px;
}

#page-wrap {
width: 100%;
max-width: 790px;
margin: 0px auto 10px;
background: white;
}

header {
position: static;
background: #006d82;
height: 158px;
}

header h1 {
top: 30px;
left: 10px;
padding-left: 10px;
padding: 3px 0px 7px 14px;
letter-spacing: 2px;
font-weight: normal;
color: white;
position: inherit;
}

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

#logo img {
width: 98.5%;
max-width: 399px;
display: block;
}

nav { 
margin: 14px 0px 0px 14px;	
}

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

nav li { 
padding: 5px 20px 6px 20px;
}

section{
display: block;
}

#main-content section {
border-bottom: 1px dotted #006d82;
}

#main-content h1 {
padding: 14px 10px 16px 10px;
}

#main-content {
clear: both;
}

.floatleft, .floatright {
margin-bottom: 11px;
}

blockquote {
padding-right: 100px;
}

/*This stops the copy flowing round the photo. */

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

/*This controls the about page. */

#about-main-content {
clear: both;
}

#main-content img {
width: 98.5%;
max-width: 250px;
display: block;
clear: both; /*I've added this because when two images are used in the content area, they sit next to each other unless I say 'clear both'. */
}

/*This style is for swfs. remove is swfs not used */

#main-content section .slide {
width: 98.5%;
max-width: 250px;
max-height: 177px;
padding-bottom: 10px;
}

/*Strangely, I've had to create two classes (.slide and .slide2) in the object lines in the swf code because browsers running on a Power PC don't recognise the class in the second object line. But browsers running on Intel Macs need the class in the second object line. This doesn't bode well for testing in Windows!*/

#main-content section .slide2 {
width: 100%;
max-width: 250px;
max-height: 177px;
}

#main-content section .flashaltimage {
width: 100%;
max-width: 250px;
max-height: 177px;
}

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

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

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

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