header, nav, footer, article, section, aside, figure, figcaption {display:block; width:100%}

body {width:100%; margin:auto; font-family:Verdana, Geneva, Arial, helvetica, sans-serif;
	background-color:#114779} /* dark blue */

h1 {font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px; color:#900; text-align:left;
	margin-top:0px; margin-bottom:10px;}

h2 {font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#114779; text-align:left} /* background color blue */

p {font-size:18px; text-align:left}

a {color:#A00; font-weight:bold}
a:hover {color:#114779} /* background color blue */

img {max-width:100%; height:auto} 

figure {width:98%; margin:auto; text-align:center}
figcaption {margin-bottom:1.2em}

hr {color:#114779; background-color:#114779; width:90%; height:2px; border:0} 

table {border:2px solid #114779; font-size:16px; margin:2%} /*background blue */

#wrapper {}
#google_translate_element {float:left; width:50%; height:48px}
#animate {background-image:url('images/SF_Anim.gif'); height:48px;
background-repeat:no-repeat; background-position:right; background-size:40% 100%} /* X Y */
#container {text-align:center; background-color:#FFF}

ul{list-style-image:url('images/sailboatIconRed.png')}

nav {width:100%; margin:0 auto; padding-top:2px; background-image:url('images/TwoSunfish.jpg'); background-repeat:no-repeat; background-position:center} 
nav ul {margin:0; padding:0} /* no padding for mobile design for rwd */
nav li{list-style:none;	padding-bottom:3px}
nav a {
	display:block; /* needed for smaller screens */
	height:44px; width:32%;	margin:1px auto;
	text-decoration:none; text-align:center;
	border:2px solid #006; color:#FFF; 
	font-variant:small-caps; letter-spacing:1px;
	font:bold 18px/38px Arial, Helvetica, sans-serif; 
	/* 48px after forward slash is line-height and centers vertically */
	text-shadow: 1px 1px 2px rgb(0, 0, 0);
    box-shadow:2px 2px 2px rgb(0, 0, 0);
	/*         L-R T-B blur color */
	background-color:#567BA9; /* slate blue used if CSS3 effect does not work */
	background:linear-gradient(to top, #131360, #6699CC)}
nav li a:hover {color:#FFF; background:linear-gradient(to bottom, #131360, #6699CC)}
nav .selected {color:#CCC; background:linear-gradient(to bottom, #131360, #6699CC)}

header {display:none}

section {width:96%; margin:0px; padding:2%; float:left;
	text-align:justify; vertical-align:top;
	color:#333; background-color:#FFF;
	font-size:14px; font-family:Arial, Helvetica, sans-serif}
aside {width:96%; margin:0px; padding:2%; float:left;
	text-align:center; vertical-align:top;
	color:#000; background-color:#E8F5FF;
	font-size:14px; font-family:Arial, Helvetica, sans-serif}
#RotateHeader {display:block; width:100%; margin:0 auto; position:absolute}
footer {width:96%; margin:0px; padding:2%; text-align:center;
	clear:both; font-family: Arial, Helvetica, sans-serif;
	color:#FFF; background-color:#0F3A64} /* dark blue */
footer a {color:#FFF; font-size:18px}
footer a:hover {color:#C00}
footer p {font-size:12px}

#weatherWidgetWrapper {width:400px; margin:auto} /* 450 was width of weather widget with 4 days */

.button {
	padding:12px 8px; margin:1px auto;
	text-decoration:none; text-align:center;
	border:2px solid #006;
	color:#FFF; font-variant:small-caps; font-family:Arial, Helvetica, sans-serif;
	font:bold 26px/48px; letter-spacing:2px;
	/* 48px after forward slash is line-height and centers vertically */
    box-shadow:2px 2px 2px rgb(0, 0, 0);
	/*         L-R T-B blur color */
	background-color:#567BA9; /* slate blue used if CSS3 effect does not work */
	background:linear-gradient(to bottom, #131360, #6699CC);	
    border-radius:6px}
.button a{padding:12px 8px; text-decoration:none; color:#FFF;}
.button a:hover, .button:hover {color:#FFCC00; background:linear-gradient(to top, #131360, #6699CC)} 

.special {font-weight:bold; color:#114779} /* background color blue */

.photoFrame {
	width:270px;	
	max-width:800px;
	margin:24px;
	border:1px #AC0000 solid;
	background-color:#FFF;
	padding:8px;
	clear:both;
	
    box-shadow: 3px 10px 20px #333F63;
 /* box-shadow: x (shift to right) y (shift to bottom) blur (how far blur shadow is spread) color; */          
    border-radius:0px 16px 0px 16px;}

.inputBox {font-family: Arial, Helvetica, sans-serif;
    border-top: 1px solid #114779;
    border-bottom: 2px solid #114779;
    border-left: 1px solid #114779;
    border-right: 2px solid #114779}

.formText {text-align:right; font-weight:bold; color:#114779} /* background blue */

.required, .heading {color:#A00; font-weight:bold}

.signature {font-family:"Lucida Calligraphy", Script; font-weight:bold; font-style:italic;}

.rateItem {text-align:left; color:#114779; padding-left:6px; font-weight:bold} /* needed for Rates page */

.txtred {font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:14px; color:#A00; font-weight:bold}

.answer {color:#009; font-weight:bold} /* on Rates page */

.smaller {font-size:.8em}
.small {font-size:.3em}

.center {text-align: center}

@media only screen and (min-width:360px){
.photoFrame {width:300px}
}

@media only screen and (min-width:480px){
.photoFrame {width:90%}
nav a {font-size:16px}
}

@media only screen and (min-width:600px){
body {max-width:900px}
nav {background-image:none; background:linear-gradient(to bottom, #131360, #6699CC); padding-top:0}
nav ul {margin:auto;}
nav li {display:inline; margin-left:-5px}
nav a {display:inline; padding:8px; font-size:18px;{letter-spacing:0;
font-variant:small-caps; border-right:1px solid #006; border-left:1px solid #69C;}
} /* / media 600 */

@media only screen and (min-width:640px){
nav a {font-size:20px}
header {display:block; background-image:url('images/HeaderAll.jpg'); background-repeat:no-repeat; background-position:center; background-size:100% 100%;
height:330px; position:relative; margin-top:-0px}
section {width:54%}
aside {width:38%; float:right} 
}

@media only screen and (min-width:768px){
nav a {letter-spacing:2px; font-size:22px}
};;