body {
font-family : Verdan, Geneva, sans-serif;
font-weight: normal;
font-style: italic;
font-size : 12px;
line-height : 23px;
background-color: #f68428;
color: #404040;
margin : 0;
padding : 0;
-webkit-text-size-adjust: 100%; /* attempt to stop android text resizing */
}

html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
html * {
max-height:1000000px;   /* attempt to stop android font boosting */
}
body * {
max-height: 1000000em;  /* attempt to stop android font boosting */
}

/* colour and size of alt type and alignment */
img {
border : 0;
padding : 0;
font-weight: normal;
font-size : 10px;
line-height : 14px;
color : #aaaaaa;
vertical-align : top;
}





/* TOP NAV */

#topbar-container {
position : relative;
max-width : 100%;
margin : 0 auto;
text-align : left;
vertical-align : top;
top : 0;
left : 0px;
z-index: 20;
}

div.fixednav-background {
display: block;
position: fixed;
top: 0;
height: 36px;
width: 100%;
background-color: #f68428;
z-index: 20; 
}


#topnav-container {
position : relative;
max-width : 980px;
margin : 0 auto;
text-align : left;
vertical-align : top;
top : 0;
left:0;
z-index: 25;
}



/* fixed header */

div.fixedheader {
position: fixed;
left: 0;
right: 0;
top: 0; 
z-index: 25; /* or even higher to prevent guarantee overlapping */
}

div.relativecontent {
margin: 0 auto;
position: relative;
max-width: 980px;
z-index: 25;
}

div.navinner {
display: block;
position: relative;
max-width: 980px;
margin: 0 auto;
background-color: #f68428;
z-index: 25;}

div.nav {
display : block;
position : relative;
top: 0;
vertical-align : top;
margin : 0 0 0 490px;
font-size: 14px;
font-weight: bold;
padding: 9px 0 0 0;
z-index : 25;
}
p.nav {
margin: 0;
padding: 0;
}



/* fixed top white panel */

div.logo-fixedheader {
position: fixed;
left: 0;
right: 0;
top: 36px; 
z-index: 25; 
}

div.logo-relativecontent {
margin: 0 auto;
position: relative;
max-width: 980px;
z-index: 25;
}

div.whitetop {
display : block;
position: relative;
max-width: 980px; 
min-height: 115px;
margin: 0 auto;
background-color: #ffffff;
z-index : 25;
}

div.logographic {
display : block;
position: relative;
max-width: 600px;
height: 78px;
float: right;
background-color: #ffffff;
z-index : 25;
}

div.logographic-small {
display : none;
}

div.logo {
display : block;
position: relative;
float: left;
width: 327px; 
padding: 57px 0 0 50px;
margin: 0; 
background-color: #ffffff;
z-index : 25;
}

div.logo-small {
display : none;

}

div.logotype {
display : block;
position: relative;
float: left;
top: 0px;
padding : 4px 0 0 10px;
margin : 0px;
z-index : 25;
}




div.navcontainer {
display : block;
position: fixed;
top: 0px;
left:0;
margin: 0 auto;
z-index: 25;
}

#nav-wrapper {
position: relative;
width : 100%;
margin : 0px auto;
left:0;
z-index: 25;
}

#nav-wrapper-header {
position: relative;
width : 100%;
left:0;
margin : 0px auto;
}   

#nav {
padding: 9px 0 0 0;
left:0;
margin: 0 0 0 510px;
}



p.nav {
vertical-align : top;
text-align : left;
padding : 0;
margin : 0;
}

.nav ul {
list-style-type:none;
margin:0;
padding:0;
}

.nav li {
display:inline;
padding:0px 22px 0px 0px;
margin:0;
}




/* MAIN CONTAINER */

#container {
position : relative;
max-width : 980px;
margin : 0 auto;
text-align : left;
vertical-align : top;
top : 0px;
left : 0px;
z-index: 1;
}


/* overall wrapper */

div.maincontentcontainer {
display : block;
position: relative;
width: 100%;
top: 0px;
margin: 0 auto;
height : 100%;
background-color: #ffffff;
z-index: 4;
}


/* section wrappers */

#wrapper-home {
width : 100%;
height : 100%;
background-color: #ffffff;
z-index: 4;
}

#wrapper-aboutus {
width : 100%;
height : 100%;
background-color: #ffffff;
z-index: 4;
}

#wrapper-contact {
width : 100%;
height : 100%;
background-color: #ffffff;
z-index: 4;
}

#wrapper-footer {
width : 100%;
height : 100%;
background-color: #ffffff;
z-index: 4;
}


#wrappergrey {
width : 100%;
height : 100%;
background-color: #636466;
z-index: 4;
}



/* individual sections */

#wrapper-header-home {
width : 100%;
margin : 0px auto;
}   

#wrapper-header-aboutus {
width : 100%;
margin : 0px auto;
}   

#wrapper-header-contact {
width : 100%;
margin : 0px auto;
}   

#wrapper-header-footer {
width : 100%;
margin : 0px auto;
}  

#home {
width : 50%;
background-color: #ffffff;
padding : 58px 0 50px 0;
float:left;
padding-top: 176px;
}

#aboutus {
width : 50%;
background-color: #ffffff;
padding : 20px 0 50px 0;
float:left;
}

#our-aim {
width : 50%;
background-color: #ffffff;
padding : 8px 0 50px 0;
float:left;
}

#contact {
width : 50%;
background-color: #ffffff;
padding : 20px 0 50px 0;
float:left;
}



#contact-boat {
width : 50%;
background-color: #ffffff;
padding : -200px 0 50px 0;
float:left;
}

#footer-left {
width : 50%;
background-color: #ffffff;
padding : 10px 0 30px 0;
float:left;
margin: 0;
}

#footer-right {
width : 50%;
background-color: #ffffff;
padding : 10px 0 30px 0;
float:left;
margin: 0;
}


#our-services {
width : 100%;
margin : 0px auto;
padding : 0px 0 50px 0;
}  


div.services-head {
width : 100%;
padding : 20px 0 10px 0;
}

#column1 {
float: left;
max-width: 30%;
}

#column2 {
float: left;
max-width: 30%;
}

#columnright {
float: right;
max-width: 40%;
}




/* text */

p.copy {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 23px;
text-align: left;
color: #404040;
border-right: 2px solid #f8b57e;
padding : 0 50px 0 50px;
margin : 0;
}

p.copyright {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 23px;
text-align: left;
color: #404040;
padding : 0 50px 0 50px;
margin : 0;
}

p.copywhite {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 28px;
text-align: left;
color: #ffffff;
padding : 0 50px 0 50px;
margin : 0;
}

p.footer-left {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 23px;
text-align: left;
color: #404040;
padding : 0 0 0 50px;
margin : 0;
}

p.footer-right {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 23px;
text-align: left;
color: #404040;
padding : 0;
margin : 0;
}


ul {
list-style-type: disc;
list-style-position: inside;
color: #ffffff;
margin: 0 0 0 1em;
}


.pride {
font-weight: normal;
font-style: italic;
font-size: 17px;
line-height: 23px;
text-align: left;
color: #f68428;
padding :0;
margin: 0;
}

.just-call {
font-weight: normal;
font-style: italic;
font-size: 15px;
line-height: 21px;
text-align: left;
color: #f58426;
margin: 0;
padding : 0;
}

.telephone {
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 23px;
text-align: left;
color: #f58426;
margin: 0;
padding : 0;
}

.services-subheads {
font-weight: normal;
font-style: italic;
font-size: 14px;
line-height: 23px;
text-align: left;
color: #ffffff;
margin : 0;
}

#toporangetype {
display: block;
position : relative;
float: right;
z-index: 4;
width: 50%;
margin: 0 auto;
padding : 190px 0 0 0;
}


p.toporangetype {
font-weight: normal;
font-style: italic;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #f68428;
padding :0;
margin: 0;
}

.line-break-orange {
display: block;
}

.line-break {
display: none;
}

.line-break-nav {
display: none;
}

h1 {
font-weight: normal; !important;
font-size: 22px;
line-height: 30px;
color: #f68428;
padding : 0 0 0 50px;
margin : 0px;
}

.h1 {
font-weight: normal; !important;
font-size: 22px;
line-height: 30px;
color: #f68428;
padding : 0 0 0 50px;
margin : 0px;
}

h2 {
font-weight: normal; !important;
font-size: 14px;
line-height: 18px;
color: #f68428;
padding : 0px;
margin : 0px;
}



a.anchor-home {
    display: block;
    position: relative;
    top: -1000px;
}

a.anchor-services {
    display: block;
    position: relative;
    top: -170px;
}

a.anchor-about-us {
    display: block;
    position: relative;
    top: -170px;
}

a.anchor-contact {
    display: block;
    position: relative;
   top: -170px;

}


/* clear fix */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
/*http://nicolasgallagher.com/micro-clearfix-hack/*/





/* images container */

div.imagescontainer {
display: block;
position : relative;
top: 0;
background-color: #ffffff;
z-index: 4;
}

div.pictures {
position : relative;
max-width: 100%;
background-color: #ffffff;
}

div.pics {
float: left;
max-width: 33.333333333%;
}

div.boat {
display:table-cell; 
text-align:center;
padding-top: 50px;
}



.picwidth {
max-width: 100%;
}


div.clearpics {
clear: both;
}


#map {
width: 100%;
height: 240px;
padding: 0;
}
    

.copy a {
color: #f58426;
text-decoration:underline; 
}
.copy a:visited { 
color: #f58426;
text-decoration:underline; 
}
.copy a:hover { 
color: #404040;
text-decoration:underline; 
}
.copy a:focus { 
color:  #404040;
text-decoration:underline; 
}
.copy a:active { 
color: #404040;
text-decoration:underline; 
}


.copyright a {
color: #f58426;
text-decoration:underline; 
}
.copyright a:visited { 
color: #f58426;
text-decoration:underline; 
}
.copyright a:hover { 
color: #404040;
text-decoration:underline; 
}
.copyright a:focus { 
color:  #404040;
text-decoration:underline; 
}
.copyright a:active { 
color: #404040;
text-decoration:underline; 
}


.footer-left a {
color: #f58426;
text-decoration:underline; 
}
.footer-left a:visited { 
color: #f58426;
text-decoration:underline; 
}
.footer-left a:hover { 
color: #404040;
text-decoration:underline; 
}
.footer-left a:focus { 
color:  #404040;
text-decoration:underline; 
}
.footer-left a:active { 
color: #404040;
text-decoration:underline; 
}


/* links top nav */

.nav a {
color:  #ffffff;
text-decoration:none; 
}
.nav a:visited { 
color:  #ffffff;
text-decoration:none; 
}
.nav a:hover { 
color: #404040;
text-decoration:none; 
}
.nav a:focus { 
color: #404040;
text-decoration:none; 
}
.nav a:active { 
color: #404040;
text-decoration:none; 
}





@media screen and (max-width: 979px) {

div.logo {
padding: 0px 0 0 50px;
}

div.whitetop {
min-height: 165px;
}


div.logotype {
float: none;
padding : 130px 0 0 50px;

}



#home {
padding-top: 198px;
}

#toporangetype {
padding : 212px 0 0 0;
}


a.anchor-services {
    top: -192px;
}

a.anchor-about-us {
    top: -192px;
}

a.anchor-contact {
   top: -192px;
}


}


@media screen and (max-width: 875px) {

div.nav {
margin : 0 0 0 50px;
}

div.logotype {
float: none;
padding : 130px 0 0 50px;
}

div.logo { 
padding: 0 0 0 50px;
max-height: 57px; 
}

div.whitetop {
min-height: 165px;
}

#home {
padding-top: 220px;
}

#toporangetype {
padding : 270px 0 0 0;
}

p.toporangetype {
padding :0 40px 0 40px;
margin: 0;
}

.line-break-orange {
display: none;
}

#columnright {
max-width: 35%;
padding: 0 20px 0 0;
}

a.anchor-services {
    top: -220px;
}

a.anchor-about-us {
    top: -220px;
}

a.anchor-contact {
   top: -220px;
}

}




@media screen and (max-width: 650px) {

#column1 {
float: none;
max-width: 100%;
}

#column2 {
float: none;
max-width: 100%;
}

#columnright {
float: none;
max-width: 100%;
}


}



@media screen and (max-width: 602px) {


div.fixednav-background {
min-height: 36px;
}

div.logo-fixedheader {
position: relative;
left: 0;
right: 0;
top: 36px; 
z-index: 8; 
}


div.nav {
margin : 0 0 0 30px;
font-size: 13px;
}

.nav li {
padding:0px 12px 0px 0px;
}

div.whitetop {
min-height: 0px;
background-color: none;
}


div.logographic {
background-color: none;
float: left;
padding: 0 0 0 0;
z-index : 8;
}

div.logo {
float: none;
width: 327px; 
padding:0 0 0 30px;
background-color: none;
z-index : 6;
}

div.logotype {
float: none;
top: 0px;
padding : 76px 0 0 30px;
margin : 0px;
z-index : 8;
}

p.copy {
padding : 0 30px 0 30px;
border-right: none;
}

p.copyright {
padding : 0 30px 0 30px;
}

p.copywhite {
padding : 0 30px 0 30px;

}

p.footer-left {
padding : 0 0 0 30px;
}

p.footer-right {
padding : 0 0 0 30px;
}

#home {
width : 100%;
float:none;
padding : 50px 0 0 0;
}

#toporangetype {
float: none;
width: 100%;
margin: 0 auto;
padding : 0px 0 30px 0;
}

p.toporangetype {
font-size: 16px;
line-height: 22px;
text-align: left;
color: #f68428;
padding : 20px 30px 0 30px;
margin: 0;
}

.pride {
font-size: 16px;
line-height: 22px;
}

h1 {
padding : 0 0 0 30px;
}

.h1 {
padding : 0 0 0 30px;
}

#aboutus {
width : 100%;
background-color: #ffffff;
padding : 20px 0 0px 0;
float:none;
}

#our-aim {
width : 100%;
background-color: #ffffff;
padding : 8px 0 30px 0;
float: none;
}

ul {
list-style-type: disc;
list-style-position: inside;
color: #ffffff;
margin: 0 0 0 -0.5em;
}

#our-services {
padding : 0px 0 20px 0;
}  

#contact {
width : 100%;
padding : 20px 0 0px 0;
float: none;
margin: 0;
z-index: 10;
}

div.boat {
display:table-cell; 
text-align:center;
padding-top: 0px;
}

#contact-boat {
width : 100%;
padding : 20px 0 20px 0;
float:none;
margin: 0;
}

#footer-left {
width : 100%;
padding : 10px 0 0 0;
float: none;
}

#footer-right {
width : 100%;
padding : 10px 0 30px 0;
float: none;
}

a.anchor-about-us {
top: -50px;
}

a.anchor-services {
    top: -50px;
}


a.anchor-contact {
   top: -50px;
}


}






@media screen and (max-width: 415px) {

.line-break {
display: block;
}

}


@media screen and (max-width: 357px) {

div.nav {
margin : 0 0 0 20px;
font-size: 12px;
}

.nav li {
padding:0px 8px 0px 0px;
}

div.logographic {
display : none;
}
div.logo {
display : none;
}


div.logographic-small {
display : block;
position: relative;
width: 460px;
height: 63px;
left: 0;
z-index : 6;
padding: 0px 0 0 0;
margin: 0;
}



div.logo-small {
display : block;
position: relative;
width: 298px;
height: 46px;
left: 20px;
margin: 0;
padding:0;
z-index : 6;
}

div.logotype {
float: none;
top: 0px;
padding : 0px 0 0 20px;
margin : 0px;
z-index : 6;
}

p.copy {
padding : 0 30px 0 20px;
}

p.copyright {
}

p.copywhite {
padding : 0 30px 0 20px;

}

p.footer-left {
padding : 0 0 0 20px;
}

p.footer-right {
padding : 0 0 0 20px;
}

p.toporangetype {
padding :20px 20px 0 20px;
}

div.pics {
float: none;
max-width: 320px;
height: 206;
padding: 0 0 10px 0;
}

}