body {
  background:#2A508A url('/applications/cfms-dev/images/whitebluefade_grad1.png') top left repeat-x;
}

h1,h2,h3,h4,h5,h6 {
  /*color: #2A508A;*/
  font-weight:bold;
  font-family: inherit;
}

h1,h2 {
  /*text-transform: uppercase;*/
}

h1 {
  font-size:1.8em;
}
h2 {
  font-size:1.4em;
}
h3 {
  font-size:1.3em;
}
h4 {
  font-size:1.2em;
}
h5 {
  font-size:1.1em;
}
h6 {
  font-size:1em;
}

/* buttons */
/* texted in chrome, need to test in other browsers */
.button.undo, button.undo {
  color: #000000;
  padding: 2px 6px 3px;
  border: 2px outset buttonface;
  background-color: buttonface;
  font-size:13px;
}
.button.undo, button.undo, .button.undo:active, button.undo:active {
  border-color: buttonface;
  box-sizing: border-box;
  -webkit-appearance: button;
  -moz-appearance:    button;
  appearance:         button;
}
.button.undo:active, button.undo:active {
  border: 2px inset buttonface;
  background-color: buttonface;
}


/* end buttons */

#header, #nav, #main {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

body #main {
  background:#FFFFFF;
  padding:1em 0;
  min-height:600px;
  /*font-family: 'Times New Roman', Georgia, Verdana, Arial, Helvetica, sans-serif;*/
  font-family: sans-serif;
}
body #main.grey {
  background-color:#eeeeee;
}
.breadcrumbs {
  margin-top:1.25em;
}
.footer {
  padding-top:1.25em;
}
table {
  margin:0;
}
ul.accordion {
  margin:0;
}


.upper {
  text-transform: uppercase;
}

.bold {
  font-weight:700;
}
.bgwhite {
  background-color: #FFFFFF;
}

#header .banner img {
  width:100%;
  height:auto;
}

.fimg {
  font-size:14px;
}

.fimg img {
  width:auto;
  height:75px;
  margin:1em;
}

.fimg .border {
  padding:0 0.5em;
}

.fimg p {
  line-height:1.2;
}

.infowindow-highlight {
  color: red;
  font-weight: bold;
}

.infowindow-title {
  font-weight: bold !important;
  /*padding: 3px;*/
  min-width: 160px;
  height: 20px;
}

.alert-box.nobg {
  background-color:#EDEDED!important;
  color:#333333;
  border-width: 1px;
  padding:0.5em;
  text-align: center;
  font-size: 12px;
}

.big {
  font-size:175%;
}

/****************/
/* home */
/****************/
.home {
  padding-bottom: 1em;
}
.home h1{
  padding:0 0.5em 0.25em 0.5em;
  font-size:1.2em;
  margin:0;
  text-align: center;
}

.home h2 {
	font-size: 1em;
}

.home h3 {
  padding:0.25em 0.5em;
  font-size:0.9em;
  margin:0;
}
.tides {
	margin-top: 10px;
}

.tides h3 {
  text-decoration: underline;
}

.tide-data {
  padding-left:0.5em;
}

.tide-data p {
  font-size:0.8em;
  line-height: 1.5em;
  margin-bottom: 0;
}



#nws-alerts-home img {
  width:110px;
  /*max-width:130px;*/
  height:auto;
  float: left;
}

.nws-alert-msg {
  font-weight: bold;
  font-size: 90%;
  font-family: sans-serif;
}
.nws-alert-msg:before { 
	content: ' '; 
	/*display: block;*/ 
}


.nws a {
  /*padding:0.7em;*/
  white-space: nowrap;
}
/*.nws a .fi:before {
  position: static;
  display:block;
  font-size:6.5em;
  color:#CCCCCC;
}*/

/*.nws a.red .fi:before {
  color:#f04124;
}

.nws a.red:hover .fi:before {
  color:#FFFFFF;
}

.nws a.red:hover {
  background-color:#f04124;
}*/
.reduceTopMargin {
	margin-top: -6px;
}

h1.forecastHeader {
	font-size: 1em;
	font-family: sans-serif;
	padding: 0;
	margin: 0;
}
h2.updateTime {
	font-size: .7em;
	padding: 0;
	margin-bottom: 10px;
	font-family: sans-serif;
	color: #666;
	text-align: center;
}
table#winds{
	border: 0px; 
	padding-bottom: 10px; 
	margin: 10px 0;  
	border-collapse: collapse;
	width: 100%;
}
#forecast48hr {
  height:270px;
}
#moon-phase-div {
text-align: center !important;
margin-top: 10px;
}

#moon-phase-div h2{
text-align: center !important;
}

#moon-phase-div img {
  height:auto;
  width:100px;
}


.moontext {
  width: 100px;
  height: 100px;
  margin: 2px 20px;
  position: relative;
  float: left;
}

.lr p {
  font-family: 'Roboto', sans-serif;
  position: absolute;
  bottom: 1px;
  left: 60px;
  font-size: 14pt;
  font-weight: bold;
  color: white;
  margin: 0;
  text-shadow: 0.1em 0.1em 0.1em #000;
}

.comm, .comm select {
  font-size: 0.9em;
}

.comm select {
  margin: 0;
  height:auto;
  padding:0.25em;
}

/****************/
/* end home */
/****************/

/******************/
/*** navigation ***/
/******************/
.move-left .exit-off-canvas, .move-right .exit-off-canvas {
  background-color:rgba(0,0,0,0.3);
}
.contain-to-grid, .top-bar, .top-bar-section ul li, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section ul li:hover:not(.has-form) > a, .top-bar-section ul li, .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button), .top-bar.expanded .title-area {
  background-color:#2A508A;
}
.top-bar-section li:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover, .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
  background-color:#254677;
}

.top-bar.expanded .toggle-topbar a {
  color:#FFFFFF;
}

.top-bar.expanded .toggle-topbar a span::after {
  box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
}
/******************/
/* end navigation */
/******************/

/****************/
/* off-canvas */
/****************/
.left-off-canvas-toggle:before {
  color:#FFFFFF;
  font-size:2em;
  margin:0.2em 0 0 0.25em;
}

.left-off-canvas-menu, .left-off-canvas-menu .off-canvas-list {
  background-color:#FFFFFF;
}

.tab-bar, .right-off-canvas-menu {
  background-color:#2A508A;
}

.right-off-canvas-menu ul.off-canvas-list li a:hover {
  background-color: #008CBA;
}

.tab-bar-section img {
  height: 85%;
  width:auto;
}

.tab-bar {
  position:fixed;
  top:0;
  width: 100%;
  z-index: 99;
}

.move-left .tab-bar {
  left:-15.625rem;
}

.move-right .tab-bar {
  right:-15.625rem;
}

.move-left .inner-wrap {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  transition: none;
}

.move-right .inner-wrap {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  transition: none;
}

#site {
  position:relative;
}

.move-left #site {
  left: -15.625rem;
}

.move-right #site {
  right: -15.625rem;
}

.right-off-canvas-menu, .left-off-canvas-menu {
  position:fixed;
  height:100%;
  transition: none;
}

.move-left .right-off-canvas-menu {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  transition: none;
}

.move-right .left-off-canvas-menu {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
}

/****************/
/* end off-canvas */
/****************/

/******************/
/*** footer ***/
/******************/
#footer {
  padding:1em 0;
}
#footer, #footer a:hover {
  color:#FFFFFF;
  text-decoration: underline;
}
#footer a {
  color:#EDEDED;
}
#footer .sub-nav dd {
  margin:0;
  float:none;
  display:inline-block;
  font-weight: bold;
}

.copy p {
  font-size: 0.8em;
}

#footer .sub-nav {
  margin-bottom:0;
}

/******************/
/*** end footer ***/
/******************/

/****************/
/***** maps *****/
/****************/
.home-map {
  /*height:695px;*/
  /*height:617px;  removed 5/13/2016 */
  height: 677px;
}
.community-maplabels {
  font-family: Arial,sans-serif;
  font-weight:bold;
  font-size:10pt;
  color:black;
  text-shadow:0em 0em 0.4em white, 0em 0em 0.4em white, 0em 0em 0.4em white;
  padding-left:5px;
  padding-right:5px;
  width: 110px;
}
.flood-map {
  height:400px;
}
#floodmap-data .range-slider {
  height:19.3em;
  width:100%;
  padding:0;
  background:none;
  border:none;
  margin:0;
  bottom:-4px;
  margin-left:-18px;
}
#floodmap-data .range-slider-active-segment {
  background:none;
}
#floodmap-data .range-slider-handle {
  left:50%;
  background-color:#FFFFFF;
  -webkit-box-shadow: 0 0 3px #000000;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    0 0 3px #000000;   /* Firefox 3.5 - 3.6 */
  box-shadow:         0 0 3px #000000;   /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
body #floodmap-data table tbody tr td {
  padding:0.5em;
}
#floodmap-data .gradient {
  padding:0;
  text-align: center;
  border: 1px solid #CCCCCC;
  background: rgb(0,0,109); /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDA2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzJjMmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(0,0,109,1) 0%, rgba(44,44,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,109,1)), color-stop(50%,rgba(44,44,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(0,0,109,1) 0%,rgba(44,44,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(0,0,109,1) 0%,rgba(44,44,255,1) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(0,0,109,1) 0%,rgba(44,44,255,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(0,0,109,1) 0%,rgba(44,44,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00006d', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
#floodmap-data table td {
  text-align:center;
}

#floodmap-data b {
  font-size:11px;
}

.curmap {
  height:700px;
}

#map_canvas {
  min-height:400px;
}
/****************/
/*** end maps ***/
/****************/

/****************/
/***** tabs *****/
/****************/
.tabs {
  margin-top:0.8em;
}
.tabs a.button {
  margin: 0;
  color:#999999;
  background-color: #EDEDED;
  margin-bottom:-1px;
  border:1px solid #CCCCCC!important;
  padding:0.3em 20px;
}
.tabs a.button:hover {
   color:#666666;
 }
.tabs a.button:focus {
  outline:none;
}
.tabs .active a.button {
  /*background-color:#254677;*/
  background-color:#FFFFFF;
  border:1px solid #CCCCCC!important;
  border-bottom: none!important;
  color:#666666;
}
.tabs {
  white-space: nowrap;
  max-width:100%;
  overflow:auto;
  padding-left:2px;
  padding-bottom: 1px;
  position:relative;
  bottom:-2px;
}
.tabs-content .content {
  width:100%;
  overflow:hidden;
}

.tabs-content #tidal-data table {
  width:100%;
}

.highcharts-container {
  width:100%!important;
}
/****************/
/*** end tabs ***/
/****************/

.sidebar {
  font-family: Verdana, Arial;
  padding-right:0;
}

.sidebar, .sidebar p {
  font-size:13px;
}

.sidebar > .column {
  background-color: #eeeeee;
}

.mapcan .tab-bar {
  display:none;
}

.button i {
  float: left;
  font-size: 2em;
  margin-top: -9px;
  margin-left: 11px;
}

/****************/
/* large desktop */
/****************/
@media screen and (min-width: 800px) {
  .contain-to-grid .top-bar-section ul li > a {
    font-size:0.9em;
  }
}
/****************/
/* end large desktop */
/****************/

/****************/
/* desktop */
/****************/
@media screen and (min-width: 64em) {
  #header {
    margin-top:1em;
  }
  .home-right .border {
    margin-left:1em;
    padding-bottom: 1em;
  }
}
/****************/
/* end desktop */
/****************/

/****************/
/* medium */
/****************/
@media screen and (max-width: 64em) {
  #map_canvas {
    max-height:initial;
    min-height: initial;
  }
  .top-bar-section ul li > a {
    font-size: 0.7em;
  }
}
/****************/
/* end medium */
/****************/

/****************/
/* above small */
/****************/
@media screen and (min-width: 40em) {
  .border {
    border:1px solid #CCCCCC;
    /*padding:0.5em;*/
    /*background-color:#F0F0F0;*/
  }

  .highcharts-container {
    height:400px;
  }
  #tidal-data {
    max-height:500px;
    overflow:auto;
  }

  .home-left {
    width:45%;
  }
  .home-right {
    width:55%;
  }
}
/****************/
/* end above small */
/****************/

/****************/
/* small */
/****************/
@media screen and (max-width: 40em) {

  body {
    padding-top:45px;
  }

  #main {
    padding-top:61px;
  }

  #map_canvas {
    /*max-height:200px;*/
    min-height: initial;
  }
  #map_canvas.curmap {
    max-height: 700px;
  }

  #map_canvas .ctx {
    top:80px;
    width:60px;
  }

  #map_canvas .ctx div {
    width:100%;
  }
  #map_canvas .ctx img {
    width:100%;
    height:auto;
  }

  .highcharts-container {
    height:300px!important;
  }

  .small-4 .alert-box.nobg {
    padding:0.25em;
    font-size:0.7rem;
    margin:0.25em;
    min-height:11em;
  }

  #floodmap-data .range-slider {
    height: 15.7em;
  }

  .small-toggle {
    height:1.3em;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right:5.5em;
    position:relative;
  }
  .small-toggle:before {
    position:absolute;
    top:0;
    right:0;
    content: 'read more ▶';
    color: #2A508A;
    text-decoration: underlined;
    cursor:pointer;
  }
  .small-toggle.on {
    height:auto;
    overflow:visible;
    white-space: normal;
    padding-right:0;
  }
  .small-toggle.on:before {
    display:none;
  }

  .fimg a.left, .fimg a.right {
    float:none!important;
    width:50%;
    display:inline-block;
    text-align:center;
  }

  .tabs a.button {
    padding:1rem 0.5rem;
  }

  #moon-phase-div {
    margin: 1em 0;
  }
  #moon-phase-div img {
    float:left;
    height:auto;
    width:25%;
  }
  #moon-phase-div h2, #moon-phase-div h3 {
    width:74%;
    float:right;
  }
  .mapcan {
    display: none;
    /*position: fixed;*/
    left:0;
    top:0;
    height:100%;
    width:100%;
    z-index: 100;
  }
  .mapcan.modal {
    display:block;
  }

  .mapcan #map_canvas {
    position: fixed!important;
    top:45px;
    right:0;
    max-height:none;
    height:100%;
    width:100%;
    z-index:2;
    visibility: hidden;
  }
  .modal #map_canvas {
    visibility: visible;
  }
  .modal .tab-bar {
    position: fixed!important;
    z-index:99;
    top:0;
    right:0;
    display:block;
  }
  .move-right .modal .tab-bar, .move-right .modal #map_canvas {
    right:-15.625rem;
  }

  .modal .tab-bar .left-small a, .modal .tab-bar .right-small a {
    display:block;
  }
  .modal .tab-bar .left-small a:before, .modal .tab-bar .right-small a:before {
    color: #FFFFFF;
    font-size: 2em;
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
  }
  .modal .tab-bar .right-small a:before {
    padding:6px 0 0 0;
  }
  .modal .tab-bar .left-small a:before {
    margin-left:0;
  }

  .modal .tab-bar h1 {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: normal;
  }

  .fimg .border {
    padding: 1em;
  }

  .move-right .exit-off-canvas, .move-left .exit-off-canvas {
    position: fixed;
    width: 100%;
  }
  .move-right .exit-off-canvas {
    right: -15.625rem;
    left: auto;
  }
  .move-left .exit-off-canvas {
    left: -15.625rem;
    right: auto;
  }
  .f-topbar-fixed #main {
    margin-top: 45px;
  }

  #mset {
    font-size: 2.5em;
    margin-top: -9px;
    color: #CCCCCC;
  }
}
/****************/
/* end small */
/****************/

#WxWidget {
	min-height: 70px;
	margin-bottom: 20px;
}

.gm-style .gm-style-iw {
    font-size: 12px;
    font-weight: 300;
}

.windsTitle {
	font-weight:bold;
	text-align: center; 
	color: #333; 
	border-bottom: 1px solid #aaa;
}

#winds tr:nth-of-type(2n) { /* override foundation table row colorinng */
	background-color: #ffffff;
	/*border-bottom: 1px solid #ccc;*/
}
.windbarb-div {
	padding:5px; 
	border:0px red solid; 
	width:90px;
	font-size:10pt;
	/*border-right: 1px solid white;*/
	text-align: center;
	font-size: 9pt;
}

.time {

	font-size:.7em;
	/*background-color: white;*/
	text-align: center;
	line-height: 1em;
}

.nobreak {
		white-space: nowrap;
}