@import url(//fonts.googleapis.com/css?family=Aclonica); /* import from google.com/fonts Aclonica, no http so works with https a */
/* General and Smartphone CSS below (Mobile First) */
header, nav, footer, main, article, aside, figcaption {display:block} 
/* Why above: the end </ tag of a block element, such as div and p tags, forces a line break in the visible text */
/* older web browsers do not read structured html5 tags as block level elements which have widths, heights, and margin top and bottom */
/* inline elements do not have widths, heights, and margin top and bottom */

/* === COMMON and MAIN TAG SELECTORS === */

/* * {box-sizing: border-box;} */
/* Commented out Line above: all elements are sized to include padding and border */
html {padding:0; margin:0} /* to set all browsers the same, because they have different defaults. */
body {width:98%; margin:0 1%; background-color:#CDE7FE;}

h1, .signature {color:#003BA9; font:normal 1.9em "Comic Sans MS"; font-family:"Comic Sans MS", Aclonica; text-shadow:2px 1px #999; text-align:center; line-height:1.2;}
h2 {color:#004ECF; font-size:1.6em}
h3 {color:#003BA9} /* dark blue */

p, blockquote {font:bold 1.1em "Trebuchet MS", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 
color:#003BA9} /* dark blue */

a {color:#003BA9}
a:hover {color:#CE4B2F}
/* Note img Height and Width no longer in HTML. Max- So that image does not become huge on large monitor. */
img {max-width:100%; height:auto} 

nav {width:98%; margin:0 auto; padding-top:6px} 
nav ul {margin:0; padding:0} /* no padding for mobile design for rwd */
nav li{list-style:none;	padding-bottom:10px;}
nav a {display:block; /* vertical for smaller screens */
	margin:1px auto;
	text-decoration:none; text-align:center;
	border:2px solid #006; color:#FFFFCC;
	font:bold 22px/48px 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 bottom, #003399, #0066FF);	
    border-radius:12px 12px 12px 12px;
    /* 	        hshadow, vshadow, blur spread color */
}
nav a:hover {color:#FFCC00}
nav .selected {color:#909090; cursor:none}

footer {clear:both; width:100%; /* needed for iPad */
text-align:center; padding:12px 0px;
color:#FFFFCC; background-color:#3399FF} /* light blue */
footer a {color:#FFFFCC}
footer a:hover {color:#FFCC00}

main ul {list-style-image:url('images/bulletSailboat.gif'); margin-left:6%}
main li {color:#003BA9; font-size:1.2em; padding-left:2%}

aside {font: normal bold 14px arial, helvetica, sans-serif;
	margin-top:12px; text-align:center;	color:#6796C1; /* facebook blue */}
/* Note: I had to make div text color same as gallery bg color so "null" did not show in IE */	

.special {color: #CE4B2F}

/* === ID SELECTORS === */
#wrapper {background-color:#FFFFFF; margin-top:4px;
          border-radius:12px 12px 12px 12px;
        /*              TL   TR   BR  BL*/
}

#page_content {margin-left:8px; margin-right:8px}

#social {width:auto; padding-top:24px; padding-left:24px}
#social img {box-shadow:0px 4px 8px #606060}
#social a:hover {background-color:#0066CC; box-shadow:0px 10px 20px #003399}

/* === CLASSES === */
.button, .button a { /* need other for PayPal */
	display:block; /* needed for smaller screens */
	height:54px; width:300px; margin:1px auto;
	text-decoration:none; text-align:center;
	border:2px solid rgb(0, 0, 102); color:#FFFFCC;
	font:bold 24px/48px 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);
	background-color: #567BA9; /* slate blue used if CSS3 effect does not work */
	background:linear-gradient(to bottom, #003399, #0066FF);
	/*rounded corners */ 
    border-radius:12px 12px 12px 12px;
    /*            TL   TR   BR   BL*/
}

.button a:hover {color:#FFCC00;	background:linear-gradient(to top, #003399, #5066FF)} 
.button:hover {color:#FFCC00; background:linear-gradient(to top, #003399, #5066FF)} /* need 2nd for PayPal */

.smallbutton {
	border:2px solid rgb(0, 0, 102); color:#FFFFCC;
	font:bold 24px/48px Arial, Helvetica, sans-serif; 
	background-color: #567BA9;
	background:linear-gradient(to bottom, #003399, #0066FF);
	border-radius:12px 12px 12px 12px;
}
.smallbutton a:hover, .button:hover {color:#FFCC00; background:linear-gradient(to top, #003399, #5066FF)} 

.roundShadow {		/* for images */ 
  -webkit-border-radius:12px 12px 12px 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius:12px 12px 12px 12px; 
          border-radius:12px 12px 12px 12px;
        /*              TL   TR   BR   BL*/
             box-shadow:2px 2px 2px rgb(0, 0, 0);}      

.surroundGallery {width:300px; margin:2em auto; text-align:center}

.required {color:#E90000; font-weight:bold}

.formText {font:bold 18px Arial, Helvetica, sans-serif;	color:#004ECF; text-align:right}

.inputBox {width:215px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12pt;
    border-top:1px solid #004ECF;
    border-bottom:2px solid #004ECF;
    border-left:1px solid #004ECF;
    border-right:2px solid #004ECF;
    padding-left:8px;}

.bigger {font-size:1.2em; color:#003B90}
.smaller {font-size:.7em}

/* Mobile Portrait */
@media only screen and (max-width:479px) { 
header {background-image:url('images/HeaderBG.jpg'); background-repeat:no-repeat; background-size:100% 100%} /* over nav for smartphone */
nav a {height:54px; width:50%;}
} /* --- Close Mobile Portrait */

/* === Mobile Landscape */
@media only screen and (min-width:480px){ 
header {background-image:none}
nav {height:54px; margin:0 auto; padding-top:16px; margin-top:16px;}
nav li {float:left; padding-right:6px} /* float:left will produce horizontal nav without typical nav a display:inline-block */
nav ul {margin-left:4px}
nav a {display:inline-block; height:48px; width:100px; border:2px solid #006; color:#FFFFCC;}
nav a:hover {background:linear-gradient(to top, #003399, #5066FF);}

main {clear:both}
main li {font-size:1.5em;}

#masthead {padding-top:25%; background-image:url('images/Header1000-4.jpg'); 
background-repeat:no-repeat;
background-size:cover; background-position:center center; position:relative;
   box-shadow:0px 2px 2px 1px black; border-radius:12px 12px 0px 0px;
} /* padding-top:25% works if the image is 1000 x 250 where height is 25% of the width */

#page_content {margin-left:12px; margin-right:8px}

} /* --- Close Mobile Landscape */

@media only screen and (min-width:480px) and (max-width: 574px){ 
.hide {display:none} /* hide nav Blog link for some smaller screens */
}

/* === Tablet and iPad */
@media only screen and (min-width: 600px) and (max-width: 939px){  /* Normally about 659 */
body {background-image:url('images/bgsm.jpg')}
h2 {font-size:x-large}
nav a {width:108px}
#wrapper {margin-top:10px; margin-bottom:10px;
    border-radius:12px 12px 0px 0px;
    /*            TL   TR   BR  BL*/
    box-shadow:2px 2px 2px 1px rgb(0, 0, 0);
    /*        hshadow, vshadow, blur spread color */
} 
.inputBox {width:300px;}
.hide {display:inline}
} /* --- Close Tablet and iPad Media 600px === */

/* === Desktop and Widescreen */
@media only screen and (min-width:940px){
body, main, aside, #wrapper, #page_content, #social {box-sizing:border-box;} /* include padding and border in element's total width and height, NOT Margin */   
body {width:940px; margin:auto; margin-top:12px; background-image:url('images/bg.jpg')}
nav a {padding:0px 8px;}

#wrapper {margin-top:0px;}
#page_content {float:left; width:60%; padding-left:14px}
aside {width:37%; float:right; text-align:center;}
.hide {display:none} /* hide nav Blog link if two columns */
} /* --- Close Desktop and Widescreen */