/*This style sheet controls screen widths 320px - 480px. */

/*this stops text size from increasing when you turn your iphone from vertical to horizontal */
html, body, form, header, section, footer, fieldset, p, div, h1, h2, h3, h4, h5, h6, ul, blockquote {  
-webkit-text-size-adjust:none;  
}  

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

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

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

#logo {
padding: 11px 0px 5px 6px;
}

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

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

nav li { 
padding: 3px 8px 5px 8px;	
}

#main-content {
clear: both;
}

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

#main-content img {
float: none;
width: 98.5%;
max-width: 140px;
margin-left: 0;
margin-bottom: 5px;
}

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

#main-content h1 {
padding: 5px 10px 6px 10px;
}

blockquote {
padding-right: 10px;
}


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

#main-content section .slide {
float: none;
width: 98.5%;
max-width: 140px;
max-height: 99px;
display: block;
margin-left: 0;
margin-bottom: 5px;
}

/*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: 140px;
max-height: 99px;
}

#main-content section .flashaltimage {
float: none;
width: 100%;
max-width: 140px;
max-height: 99px;
display: block;
}

/*contols about page */

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

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

#about-main-content img {
float: none;
width: 98.5%;
max-width: 140px;
margin-left: 0;
margin-bottom: 5px;
}

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

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

#about-main-content h2 {
padding-top: 5px;
}