html { height: 100%;  }
body { height: 100%; margin: 0; padding: 0; background-color:#f0fff0 }

/*      Content area layout      */

.header-title {
padding-left:75px;
text-align:center;
}

.header-title-center {
text-align:center;
}

.center-bold-title {
font-weight:bold;
text-align:center;
margin-left:auto;margin-right:auto;
}

.a_and_p_header-title {
text-align:center;
font-weight:bold;
font-size:18px;
}

.site-address {
font-weight:bold;
font-size:18px;
}


/* The following to make the controls on coastline map page have no space above/below buttons  */
.ui-field-contain, .ui-mobile fieldset.ui-controlgroup {
margin:0px
}
.ui-field-contain, .ui-mobile fieldset.ui-field-contain {
margin:0px
}

/*	This is to make text wrap in the locations list.  2nd item is attempt to indent-align wrapped text unsuccessful
							might try unordered list and insert own numbers     */
.ui-link-inherit {white-space: normal !important; overflow: visible !important;}
.ui-listview, .ui-li {list-style-position: outside !important;}
/*	This does same - make text wrap - for items in credits details under per-site.  paragraphs under li items   */
.ui-li-desc  {white-space: normal !important; overflow: visible !important;}

.ui-content {
padding-top:5px;
}

.home-welcome2 {
font-weight:bold;
text-align:center;
font-size:18px;
}

.bold-title18 {
font-weight:bold;
text-align:left;
font-size:18px;
}

.home-welcome {
font-weight:bold
}

.prose {
clear:both;
}

.a_and_p_prose {
text-align:center;
width:90%;
display:block;margin-left:auto;margin-right:auto;
}

.show_pop_btn {
float:right;
}

.pop_prose {
text-align:center;
width:90%;
display:block;margin-left:auto;margin-right:auto;
}

.audio-track {
font-size:18px;
font-weight:bold;
text-align:center
}


.looplist .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .looplist .ui-li-static.ui-li-has-thumb  {
   min-height: 10px;
    padding-left: 35px;
}
.looplist .ui-li-thumb {
   margin-left: 7px;
   margin-right:7px;
   margin-top:4px;
}

/*        For Services / Essentials pages    */

.content-container
{
/*	margin-left:5px;	*/
	float:left;
	width: 90%;
}
.clear-both {clear:both;}
/*  	.trywidth {float:left; } 	*/

.content-left
{
	clear: both;
	float: left;	
	width: 50%;	
	padding: 2px 0 0 10px;
	margin: 0 0 0 0%;
	display: inline;
}

.content-left h2 { margin: 0; }

#aside-right
{
	float: right;
/*	width: 70px;	*/
	padding: 2px 0;
	margin: 0 3% 0 0;
	display: inline;
}


img.floatRight { 
    float: right; 
    margin: 8px 8px 8px 25px;
}

img.floatLeft { 
    float: left; 
    margin: 10px;
    width:50px
}

/*   Old sections    */

.demo-stmt {
font-weight:bold;
display:none
}

.development {
font-weight:bold;
display:none
}

.source-notes {
display:none
}

.followup {
display:none
}

.block_indent1 {
margin-left:1em;
}


/*  CSS for map controls     */
.my_location_button {
border-style:solid;
background-color:white;
border-Width:2px;
cursor:pointer;
text-align:center;
/*  CSS for the inner text DIV     */
font-family:"Arial,sans-serif";
font-size:12px;
padding-left:4px;
padding-right:4px;
}
.my_location_button img {
/*    default to size of image     width:??px;   */
}
.recenter_button {
border-style:solid;
background-color:white;
border-Width:2px;
cursor:pointer;
text-align:center;
/*  CSS for the inner text DIV     */
font-family:"Arial,sans-serif";
font-size:12px;
padding-left:4px;
padding-right:4px;
}
.recenter_button img {  width:10px;  }

/*    Default for classes/regions that may be sized by device     */
.screen_size_A {display:none;}
.screen_size_B {display:none;}
.screen_size_C {display:none;}
.screen_size_D {display:none;}
.screen_size_E {display:none;}
.screen_size_F {display:none;}
.screen_size_G {display:none;}
.screen_size_H {display:none;}
.screen_size_I {display:none;}
.screen_size_J {display:none;}
.screen_size_K {display:none;}
.screen_size_L {display:none;}
.screen_size_M {display:none;}
.screen_size_N {display:none;}
.screen_size_O {display:none;}

.ui-dialog .ui-header  {margin: 2% auto 0px auto; }   /*  top  right bottom  left  */
.ui-dialog .ui-content {margin: 0px auto 0px auto; }    /*  top  right bottom  left  */
.ui-dialog .ui-footer  {margin: 0px auto 5% auto; }   /*  top  right bottom  left  */

/*  	Height needed on map canvases, or they do not show.  Height=0          */
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 550px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 300px}

.laptop-prose {display:none;}
.mobile-only {display:block}
.home_photo .ui-content{padding:0}
.home_photo img{padding-top:1px;padding-bottom:12px;display:block;margin-left:auto;margin-right:auto}

/*    removed *** items 12/31/11 - trying to solve resize wile loading issue; all make no diff on iPod touch 4  */
/* *** .photoview .ui-content{padding:0}  */
/*    remove height:240   from img  below    for problem of photos large after linking from map  */
.cht_top_photo img{padding-top:0px;height:150px;display:block;margin-left:auto;margin-right:auto}
.photoview img{padding-top:0px;display:block;margin-left:auto;margin-right:auto}
.QRlogoview img{height:240px;padding-top:5px;display:block;margin-left:auto;margin-right:auto}
/* *** .videoview video{width:320;height:240;padding-top:5px;display:block;margin-left:auto;margin-right:auto}  */
/* *** .mapview{width:600px;height:400px;padding-top:5px;border:1px solid #777;overflow:hidden;display:block;margin-left:auto;margin-right:auto}  */

.PRphotoview1 img{padding-top:0px;display:block;float:right;width:100px}


/*   Media Queries below:  css-tricks.com/snippets/css/media-queries-for-standard-devices/         */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width :320px) and (max-device-width :480px)
{
.screen_size_A {display:block;}

.laptop-prose {display:none;}
.cht_top_photo img{padding-top:0px;height:150px}
.home_photo .ui-content{padding:0}
.home_photo img{width:100%;display:block;margin-left:auto;margin-right:auto}
.photoview .ui-content{padding:0}
.photoview img{width:100%;padding-top:5px}
.PRphotoview1 img{padding-top:0px;display:block;float:right;width:50px}
.videoview .ui-content{padding:0}
.videoview video{width:100%;padding-top:5px}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 300px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 300px}
}


/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-device-width : 480px)
{
.home_photo .ui-content{padding:0}
.home_photo img{width:30%;display:block;margin-left:auto;margin-right:auto}
.screen_size_B {display:block;}
.ui-dialog .ui-header  {  max-width: 420px; } 
.ui-dialog .ui-content {  max-width: 420px; }
.ui-dialog .ui-footer  {  max-width: 420px; }
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 350px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 200px}
}


/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
.screen_size_C {display:block;}
.ui-dialog .ui-header  {  max-width: 275px; } 
.ui-dialog .ui-content {  max-width: 275px; }
.ui-dialog .ui-footer  {  max-width: 275px; }

}

/* Tablet - something bigger than phone (portrait and landscape) ----------- */
@media only screen and (min-device-width :481px) and (max-device-width :1024px)
{
.screen_size_L {display:block;}
.home_photo .ui-content{padding:0}
.home_photo img{width:50%;display:block;margin-left:auto;margin-right:auto}
}

/* Tablet - something bigger than phone (landscape) ----------- */
@media only screen
and (min-device-width : 481px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.screen_size_M {display:block;}
.home_photo .ui-content{padding:0}
.home_photo img{width:30%;display:block;margin-left:auto;margin-right:auto}
}


/* Tablet - something bigger than phone (portrait) ----------- */
@media only screen
and (min-device-width : 481px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.screen_size_N {display:block;}
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width :768px) and (max-device-width :1024px)
{
.screen_size_D {display:block;}

.photoview .ui-content{padding:0}
.photoview img{width:50%;padding-top:5px;display:block;margin-left:auto;margin-right:auto}
.videoview .ui-content{padding:0}
.videoview video{width:50%;padding-top:5px;display:block;margin-left:auto;margin-right:auto}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 825px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 725px}
}


/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.screen_size_E {display:block;}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 575px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 500px; width: 500px}
}


/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.screen_size_F {display:block;}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 825px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 725px}
}


/* Desktops and laptops -----------  web tips say min-width:1224px, but change to any device (not window) wider than tablet landscape 1024+ */
@media only screen and (min-device-width :1025px)
{
.screen_size_G {display:block;}
.home_photo .ui-content{padding:0}
.home_photo img{width:25%;display:block;margin-left:auto;margin-right:auto}
.laptop-prose {display:block;}
.mobile-only {display:none}
/*  CSS for map controls     */
.my_location_button {
border-style:solid;
background-color:white;
border-Width:2px;
cursor:pointer;
text-align:center;
/*  CSS for the inner text DIV     */
font-family:"Arial,sans-serif";
font-size:12px;
padding-left:4px;
padding-right:4px;
}
.my_location_button img {
width:40px;
}

.home-welcome2 {display:none}
.photoview .ui-content{padding:0}
.photoview img{padding-top:5px}
.videoview .ui-content{padding:0}
.videoview video{width:50%;padding-top:5px;display:block;margin-left:auto;margin-right:auto}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 550px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 500px}
.ui-dialog .ui-header  {  max-width: 800px; } 
.ui-dialog .ui-content {  max-width: 800px; }
.ui-dialog .ui-footer  {  max-width: 800px; }

}
/* Large screens ----------- */
@media only screen and (min-width :1824px){
.screen_size_H {display:block;}
.home_photo .ui-content{padding:0}
.home_photo img{width:25%;display:block;margin-left:auto;margin-right:auto}
.laptop-prose {display:block;}
.mobile-only {display:none}
.photoview .ui-content{padding:0}
.photoview img{padding-top:5px}
.videoview .ui-content{padding:0}
.videoview video{width:50%;padding-top:5px;display:block;margin-left:auto;margin-right:auto}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 600px; }
div#HTpop_map_canvas, #ess_pop_map_canvas { height: 500px}
}
/* iPhone 4 ----------- */
/*  ***  .mapview{width:350;height:300;padding-top:5}      removed below; where came from?    */
/* *** .photoview .ui-content{padding:0}
.cht_top_photo img{padding-top:0px;height:150px}
.photoview img{width:100%;padding-top:0px}
.PRphotoview1 img{padding-top:0px;display:block;float:right;width:50px}
.videoview .ui-content{padding:0}
.videoview video{width:350;height:300;padding-top:5px}  */

@media only screen and (-webkit-min-device-pixel-ratio :1.5),only screen and (min-device-pixel-ratio :1.5)
{
.screen_size_I {display:block;}
.laptop-prose {display:none;}
div#HTmap_canvas, #loop_map_canvas, #coastline_map_canvas, #OVmap_canvas, #Monomoymap_canvas, #AHMmap_canvas, #Nick_map_canvas  { height: 300px; }
}

/* iPhone 4    Landscape    --------- */
@media only screen and (-webkit-min-device-pixel-ratio :1.5) and (orientation : landscape),only screen and (min-device-pixel-ratio :1.5) and (orientation : landscape)
{
.screen_size_J {display:block;}
div#HTpop_map_canvas { height: 200px;}
div#ess_pop_map_canvas { height: 200px;}
.ui-dialog .ui-header  {  max-width: 420px; } 
.ui-dialog .ui-content {  max-width: 420px; }
.ui-dialog .ui-footer  {  max-width: 420px; }
}

/* iPhone 4    Portrait    --------- */
@media only screen and (-webkit-min-device-pixel-ratio :1.5) and (orientation : portrait),only screen and (min-device-pixel-ratio :1.5) and (orientation : portrait)
{
.screen_size_K {display:block;}
.ui-dialog .ui-header  {  max-width: 275px; } 
.ui-dialog .ui-content {  max-width: 275px; }
.ui-dialog .ui-footer  {  max-width: 275px; }
}

/*  Begin CapeTides.com Widget Style Sheet   */
.cape-tides {margin-left: auto;margin-right:auto;color: #000000;background-color: #FFFFFF;border: 1px solid #000000;}