header, footer, article, section, hgroup, nav, figure, aside { display: block; }
figure {
margin:0;
padding:0;
}


.double-text-box-height {

    height: 50px;
    width: 242px;
    border-color: #cccccc;
}

.triple-text-box-height {

    height: 75px;
    width: 242px;
    border-color: #cccccc;
}

body{
	margin:0;
	font:14px/43px 'RobotoRegular',Arial,Helvetica,sans-serif;
	color:#2d2d2d;
	background:#fff;
	min-width:1024px;
	-webkit-text-size-adjust:100%;
}
input[type="submit"],
input[type="text"],
textarea,
input[type="search"]{
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
input[type="submit"]:hover{cursor:pointer;}
img {
	border-style:none;
	vertical-align:top;
	max-width:100%;
}
a{
	text-decoration:none;
	color:#000;
}
a:hover {text-decoration:underline;}
input,
textarea,
select {
	/*font:100% Tahoma, Geneva, sans-serif;*/
        font:100% 'RobotoRegular', Arial, Helvetica, sans-serif;
	vertical-align:middle;
	color:#000;
}
form, fieldset {
	margin:0;
	padding:0;
	border-style:none;
}
#header{
	padding:13px 29px 10px 13px;
	overflow:hidden;
	background:#082e52;
	border-bottom:2px solid #000;
	position:relative;
	z-index:100;
}



#name-tag{
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
}
.gridTitle
{
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 27px;
	color: #000;
}
.grid
{
	clear:both;
	margin-bottom: 20px;
	margin-top: 20px;
	height: auto;
}
.logo{
	float:left;
	font-size:18px;
	line-height:20px;
	color:#fff;
	text-transform:lowercase;
	font-weight:400;
	margin:0;
        font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
}
#header a{color:#fff;}
.nav{
	float:right;
	font-size:15px;
	line-height:19px;
        margin-bottom: 0px;
}

#timetxt{
    font-size:38px!important;
    font-family:'RobotoLight', Arial, Helvetica, sans-serif!important;
}

#datetxt{
    font-size:25px!important;
    font-family:'RobotoThin', Arial, Helvetica, sans-serif!important;
}

.nav ul{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}
.nav li{
	float:left;
	margin:0 0 0 27px;
	position:relative;
}
.nav li:first-child{font-weight:300;}
.nav li:before{
	position:absolute;
	left:-15px;
	top:4px;
	width:2px;
	height:13px;
	background:#d5d8dd;
	content:"";
}
.nav li:first-child:before{display:none;}
#topbar{
width:100%;
padding:0px 20px 72px 22px;
z-index:90;
left:0;
top:0;
bottom:0;
background:#121212;
border-right:1px solid #000;
float: left;
height: 76px;
}

.temperature{
    padding: 11px 17px 0px 17px!important;
    width: 83%;
}

.tide-height-m{
    font-size:26px!important;
    margin-left:2px;
}

.time{
font-size:37px;
line-height:41px;
color:#bfbfbf;
text-align:center;
font-weight:300;
margin-bottom: 35px;
padding: 0 10px 0 0;
}

.menu-item{
    line-height: 25px;
}

.temperature h2{
    font-family:'RobotoMedium', Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.temperature span.title{
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
    font-size:15px;

}

ul.temperature-list li div.tidetitle{
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
    font-size:18px;
}

ul.temperature-list li div.tidetime{
    font-size:16px;
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
}

ul.temperature-list li div.tideheight{
    font-size:36px;
    letter-spacing: -2px;
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
}

.time time{
display:block;
font-size:25px;
line-height:29px;
font-weight:100;
padding: 2px 0 0 6px;
}
.side-nav{
font-size:12px;
line-height:0px;
margin:0 -20px 29px -23px;
width: 100%;
float:left;
}
.side-nav ul{
list-style:none;
margin:0;
padding:0;
position:relative;
text-transform:uppercase;
border-top:2px solid #000;
float:left;
}
.side-nav li{
border-bottom:2px solid #000;
position:relative;
margin-bottom:3px;
float:left;
}
.side-nav li:after,
.side-nav ul:before{
position:absolute;
bottom:-5px;
left:0;
right:0;
content:"";
height:1px;
z-index:10;
float:left;
}
.side-nav ul:before{
bottom:auto;
top:-1px;
float:left;
}
.side-nav a{
display:block;
color:#fff;
padding:24px 32px 22px;
}
.side-nav .active{
background:#2e2e2e;
text-decoration:none;
border-bottom: 1px solid #FFFFFF;
}
.side-nav a:hover{
background:#2e2e2e;
text-decoration:none;
border-bottom: 1px solid #FFFFFF;

}
#sidebar .button{
display:block;
text-align:center;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#12487c;
color:#fff;
margin-bottom: 27px;
padding:14px 10px;
text-transform:uppercase;
}
#sidebar .button:hover
{
text-decoration:none;
background:#082e52;
}
#sidebar .button.style-2{background:#082e52;}
.temperature{
color:#bfbfbf;
background:#242424;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin-bottom: 27px;
padding: 13px 10px 17px 25px;
line-height: 90%;
}
.temperature h2{
font-size:18px;
line-height:24px;
font-weight:500;
margin:0 0 0px;
margin-bottom:3px;
}
.temperature .title{
display:block;
font-size:14px;
margin-bottom: 20px;
text-transform:uppercase;
}
.temperature .tidetitle{
font-size: 16px;
	text-transform: uppercase;
	color: #bfbfbf;
        margin-bottom:4px;
}
.temperature .tidetime{
font-size: 16px;
	color: #bfbfbf;
}
.temperature .tideheight{
font-size: 26px;
color: #bfbfbf;
margin-top: 7px;
}
.temperature-list{
list-style:none;
margin:0;
padding:0;
font-size:20px;
line-height:24px;
font-weight:300;
overflow:hidden;
}
.temperature-list li{
float:left;
margin-left:41px;
}
.temperature-list ul{
width: 42px;
}
.temperature-list li:first-child{margin:0;width: 52px;}
.temperature-list span{
font-size:44px;
line-height:48px;

}
.temperature-list span em{
position:relative;
left:-3px;
font-style:normal;
}
.copyright{
position:absolute;
left:23px;
bottom:44px;
font-size:15px;
line-height:19px;
color:#787878;
z-index:10;
}
.container{
margin: 0 0 0 20px;
padding: 0 30px 48px 0;
}
.form{
border-bottom:1px solid #f2f2f2;
padding:0 0 21px;
margin:0 0 20px;
}
.form select{
float:left;
margin: 0 2.8% 0 0;
width: 198px;
font:20px/24px 'Roboto', Arial, Helvetica, sans-serif;
color:#000;
height: 47px;
}
/* hide original element */
.jcf-hidden {
display: block !important;
position: absolute !important;
left: -9999px !important; /* change to right: -9999px on RTL sites */
}
/* custom select styles */
.select-area {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background:#e7eaee;
position: relative;
overflow: hidden;
cursor: default;
height: 47px;
font-size:20px;
line-height:24px;
float: left;
margin: 0 2.8% 0 0;
}
.select-area.select-active{
background:#082e52;
color:#fff;
}
.select-area .center {
float: left;
margin-right: 53px;
overflow: hidden;
padding: 10px 7px 10px 16px;
white-space: nowrap;
}
.select-area .select-opener {
position: absolute;
height: 47px;
width: 52px;
right: 0;
top: 0;
z-index:10;
background:#e7eaee;
border-left:2px solid #fff;
-webkit-border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;
}
.select-area.select-active .select-opener{background:#082e52;}
.select-area .select-opener:after{
position:absolute;
left:17px;
top:18px;
height:0;
width:0;
border-style:solid;
border-color:#000 transparent transparent;
border-width:10px 9px 0;
content:"";
}
.select-area.select-active .select-opener:after{border-color:#fff transparent transparent;}
.select-options {
position: absolute;
overflow: hidden;
z-index: 2000;
width:260px !important;
padding:2px 0 0;
}
.select-options .default{display:none;}
.select-options .drop-holder {
overflow: hidden;
height: 1%;
padding:0;
background: #082e52;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.select-options ul {
list-style: none;
padding:5px;
overflow:hidden;
margin: 0;
width: 250px;
}
.select-options ul li {
width: 100%;
float: left;
}
.select-options ul a {
text-decoration: none;
padding:14px 10px;
display: block;
cursor: default;
color: #fff;
height: 1%;
float:left;
width:230px;
position:relative;
background:#082e52;
}
.select-options .item-selected a {
text-decoration: none;
color: #000101;
background:#e1e4e8;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
/* select options optgroup example styles */
.select-options .optgroup {
clear: both;
}
.select-options .optgroup strong {
display: block;
padding: 5px;
}
.select-options .drop-list{width:260px !important;}
.select-options .optgroup ul a {
padding-left: 30px;
}
/* custom scrollbars styles */
.scrollable-area-wrapper {
position: relative;
overflow: hidden;
width: 100%;
}
.scrollable-area-wrapper .hscrollbar,
.scrollable-area-wrapper .vscrollbar {
position: absolute;
top: 0;
right: 0;
width: 10px;
}
.scrollable-area-wrapper .hscroll-left,
.scrollable-area-wrapper .vscroll-up,
.scrollable-area-wrapper .hscroll-right,
.scrollable-area-wrapper .vscroll-down {
display:none;
}
.scrollable-area-wrapper .hscroll-line,
.scrollable-area-wrapper .vscroll-line {
width: 10px;
float: left;
}
.scrollable-area-wrapper .hscroll-slider,
.scrollable-area-wrapper .vscroll-slider {
background: #0e4f8c;
width: 10px;
height: 20px;
}
.scrollable-area-wrapper .hscrollbar {
position: static;
height: 20px;
top: auto;
}
.scrollable-area-wrapper .hscroll-line {
height: 20px;
width: auto;
}
.form .link{
float:left;
position:relative;
color:#2d2d2d;
letter-spacing: -1px;
font-family:Arial, Helvetica, sans-serif;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding: 12px 38px 11px 19px;
}
.form .link:hover{
background:#082e52;
color:#fff;
text-decoration:none;
}
.form .link:after{
position:absolute;
background:url(../images/sprite.png) no-repeat;
width: 16px;
height: 16px;
right: 12px;
top: 17px;
content:"";
}
.form .link:hover:after{
background-position:0 -124px;
}
.form .search-holder{
border:1px solid #7b7b7b;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
float:right;
width:32.6%;
position:relative;
padding:0 0 0 14px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.form .search-holder .holder{overflow:hidden;}
.form .select-holder,
.form .tags-container {overflow:hidden;}
.form input[type="submit"]{
float:left;
padding:0;
margin: 13px 5px 0 0;
font-size:0;
line-height:0;
overflow:hidden;
text-indent:-9999px;
background:url(../images/sprite.png) no-repeat -19px 0;
width: 20px;
height: 20px;
border:0;
}
.form input[type="search"],
.form input[type="text"]{
float:left;
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:45px;
padding:11px 10px 11px 5px;
background:none;
border:0;
margin:0;
font:19px/24px 'Roboto', Arial, Helvetica, sans-serif;
color:#000;
outline:none;
}
.form  ::-webkit-input-placeholder {color:#000;}
.form ::-moz-placeholder {
color:#000;
opacity: 1;
}
.form :-moz-placeholder {color:#000;}
.block{margin-top:3px;}
.block:first-child,
.form + .block{margin-top:24px;}
.block header{
overflow:hidden;
margin-bottom: 22px;
}
.block h1{
font-size:23px;
line-height:27px;
color:#000;
font-weight:400;
margin:0;
padding: 20px 0 0;
}
.block header h1{float:left;}
.block h1 span{font-weight:300;}
.button-list{
float:right;
list-style:none;
margin:0;
padding:0;
}
.button-list li{
float:left;
margin-left:12px;
}
.button-list a{
display:block;
overflow:hidden;
text-indent:-9999px;
background:url(../images/sprite.png) no-repeat 0 -25px;
width: 47px;
height: 47px;
}
.button-list .location{background-position:0 -74px;}
.block .box{
height:423px;
border:1px solid #7b7b7b;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

     .map{
	    -webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		 border-color: #7b7b7b;
		 overflow: hidden;
		 font: 14px/20px 'RobotoRegular', Arial, sans-serif;
    }
    table th {
    box-shadow: 0 0 0 0;
    height: 47px;
    border-bottom: 1px solid #7b7b7b;
    font: 14px/20px 'RobotoRegular', Arial, sans-serif;
  }



  table td[role="gridcell"]{
      border-bottom: 1px solid #b9bec4;
  }

  a.k-link{
      font-size:15px;
      font-family: 'RobotoMedium', Arial, sans-serif;
  }

  table{
      border-radius: 5px;
    -moz-border-radius: 5px;
  }

  #container {
  text-align: justify;
  min-width: 600px;
  height:47px;
  background-color:#f6f6f6;
  margin-bottom:10px;
}
#subDiv {
  width: 150px;
  height: 28px;
  display: inline-block;
  margin-top: 10px;
}
#container:after {
  content: '';
  width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
  display: inline-block;
}

.listbutton {
   display:block;
   background: url('/images/But_List.png')  0 0 no-repeat;;
   height: 47px;
   width: 47px;
   float: left;
   margin-left: 5px;

}
.lightGrayUnCheckbutton {
   display:block;
   background: url('/images/lightGrayUnchecked.png')  0 0 no-repeat;;
   height: 27px;
   width: 26px;
   float: left;
    margin-left: 10px;

}
.lightGrayCheckbutton {
   background: url('/images/lightGrayChecked.png')  0 0 no-repeat;;


}
.checkboxImage
    {
		float: left;
		height: 27px;
		margin-right: 0;
		width: 26px;
    }
.checkboxText
    {
    	float:left;
    	 padding-left: 20px;
    	 padding-top: 4px;
	     border-style: none;
	     border-width: 0px 0px 0px 0px;
	     font: 14px/20px 'RobotoRegular', Arial, sans-serif;
    }
.mapbutton {
   display:block;
   background: url('/images/But_Map.png')  0 0 no-repeat;;
   height: 47px;
   width: 47px;
   float: left;
    margin-left: 10px;

}
.listbuttonActive {
   background: url('/images/But_List_Pressed.png')  0 0 no-repeat;;
}
.mapbuttonActive {
   background: url('/images/But_Map_Pressed.png')  0 0 no-repeat;;

}
.hideDiv{visibility: hidden}

.k-tooltip{
   background: red !important; //specify tooltip color

   width: 300px; //specify tooltip width
   height: 300px; //specify tooltip height
}

 .gridtime{
	    font: 20px 'RobotoMedium', Arial, sans-serif;
	    color: #008c28;
    }
   .gridCommtime{
	    font: 20px 'RobotoRegular', Arial, sans-serif;
	    color: #000;
    }
    .gridCommdate{
	    font: 12px 'RobotoRegular', Arial, sans-serif;
	    color: #000;
    }
  .griddate{
	    font: 12px 'RobotoRegular', Arial, sans-serif;
	    color: #008c28;
    }
	.gridOverDue{
	    font: 12px 'RobotoMedium', Arial, sans-serif;
	    color: #FFF;
    }
  .gridOverDueText{
	    font: 20px 'RobotoRegular', Arial, sans-serif;
	    color: #FFF;
    }
    .MINOVERDUE
    {
	    font: 20px 'RobotoRegular', Arial, sans-serif;
	    color: #FFF;
    }
.warningLine
{
	 background-color: #ffa656;
}
.warningLine .gridtime
{
	 color: #000;
}
.warningLine .griddate
{
	 color: #000;
}
.errorLine
{
	 background-color: #ff5640;
}
.errorLine .gridtime
{
	 color: #000;
}
.errorLine .griddate
{
	 color: #000;
}
.row-hover .actionBar
{
		     visibility: visible;
		     height: 22px;
		     width: 86px;

}
.actionBar
{
	background: url('/images/actionButton.png')  0 0 no-repeat transparent;;
	 visibility:hidden;
}
 .click {
 	background: url('/images/actionButtonHover.png')  0 0 no-repeat transparent ;;

}
.topline
{
	   height: 28px; width: 109px;

}
.popover-inner
{
	background-color: #d4d7da;
}
.popover-content
{
	padding: 9px 3px;
}
.popover
{
border-radius:3px 3px 3px 3px;
background-color: #d4d7da;
box-shadow:none;
}
.popover.bottom .arrow:after
{
  border-bottom-color: #d4d7da;

}
.arrow
{
  border-bottom-color: #d4d7da;
}

.radioOffText
{
font-family: 'RobotoRegular', Arial, sans-serif;
font-size: 22px;
color: #c4c7ca;
padding-top:2px;
}
.radioOnText
{
color: #1475cf;
}
.k-grid-content
{
	overflow: visible;
}
.formline
{
	width: 500px;
	clear: both;

}
.formHeader
{
	padding-bottom:0px;
	font-size: 24px;
	float:left;
		width: 370px;

}
.formField
{
	padding-bottom:0px;
	padding-right: 45px;
	float:left;

}
.formFieldReadOnly
{
font-family: 'RobotoLight', Arial, sans-serif;

	padding-bottom:47px;
	font-size: 16px;
	padding-right: 45px;

}
.formFieldBottom
{
	padding-bottom:0px;
	padding-right: 45px;
	float:left;
}
padding-bottom
.k-textbox {
    background-color: #FFFFFF;
    border: 1px solid #C8C8C8;
    color: #777777;
    font-size: 23px;
    height: 50px;
    margin: 0 0 1px;
    width: 329px;
}
.k-textbox:focus {
    border: 1px solid #FEC938;
    outline: medium none;
}
.blueButtonText
{
	color: #FFFFFF;
	font-family: 'Roboto',Arial,Helvetica,sans-serif;
	font-size: 19px;
	text-align: center;
	text-transform: uppercase;
}



.blueButton{
	background-color: #1475CF;
	border-radius: 5px 5px 5px 5px;
	height: 40px;
	width: 132px;
	margin-right:10px;
	cursor: pointer;
}
.greyButtonText
{
	font-family: 'Roboto', Arial, Helvetica, sans-serif;;
	font-size: 24px;
	text-transform: uppercase;
	color: #fff;
	padding-top: 18px;
	text-align:center;
}



.greyButton{
	width: 310px;
	height: 60px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #bbbec2;
}
.greyMenuButton{
	width: 190px;
	height: 60px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #d4d7da;
	color: black;
  cursor: pointer;
}
.greyMenuButton:hover{

	background-color: #88929c;
	color: white;
}
textarea
{
	width: 190px;;
	height: 191px;
}
.notification
{
	width: 978px;
	height: 47px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #d7e0d5;
	margin-bottom:5px;
}

.notification .function
{
	font-size: 19px;
	text-transform: uppercase;
	color: #000;
	padding-left: 20px;
	padding-top: 16px;
	float: left;
}
.notification .detail
{
	padding-left: 10px;
	padding-top: 16px;
	font-size: 16px;
	color: #000;
	float: left;
}
.notification .button
{
	width: 140px;
	height: 31px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #529140;
	float:right;
	margin-right:7px;
	margin-top:8px;
	cursor: pointer;
}
.notification .button .title
{
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	padding-top:8px;
	text-align: center;
}


.contact
{
	width: 978px;
	border: 1px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: white;
	margin-bottom:5px;
	border-style: solid;
	border-color: #e8e8e8;
	margin-top: 15px;
}
.contact .alt
{
clear: both;
background-color:#fafafa;
height: 66px;
}
.contact .row
{
clear: both;
background-color:white;
height: 66px;
}
.contact .name
{
margin-top: 5px;
margin-left: 5px;
	font-size: 19px;
	color: #000;

	float: left;
}
.contact .detail
{
margin-top: 5px;
margin-left: 5px;
	font-size: 16px;
	color: #000;
	text-align: left;
	float: right;
	width: 500px;
}

.delete-message {
    width: 300px;
}

.delete-button {
	float:right;	
}

.delete-yes, .delete-no {
	display: inline-block;
	padding: 2px 5px 2px 5px;
}