/***********************************************************
INDEX
***********************************************************/
/* common colors to use
hex		r	g	b		desc				target
BBC3DF	187	195	223		gray-blue			carousel
DADFF6	?	?	?		light gray-blue		some text bodies, lighter than carousel
1E2A6C	30	42	108 	dark/deep blue		toolbars/sidebar
2E4496	46	68	150 	dark blue			variation of above dark blue, maybe for sidebar?
9FA9E5	159	169	229		light blue			highlight text in toolbar/sidebar

*/
/*TOOLTIP for JQUERY TOOLS*/
div.tooltip{
	display:none;
	/*background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);*/
	padding:4px 8px;
	width:300px;
	font-size:11px;
	color:black;
	border:2px solid #2E4496;
	background-color:#DADFF6;
	border-radius:5px;
	position:relative;
	z-index:100;
}
/*DHTML TOOLTIP (DDRIVETIP)*/
#dhtmltooltip{
	position: absolute;
	border:2px solid #2E4496;
	border-radius:5px;
	padding:4px 8px;
	background-color:#DADFF6;
	color:black;
	font-size:11px;
	visibility: hidden;
	z-index: 1000000;
}

@font-face { font-family: weathericons; src: url("../fonts/weathericons-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/weathericons-regular-webfont.ttf"); }
/*@font-face { font-family: icofont; src: url("../fonts/icofont.eot?#iefix") format('embedded-opentype'), url("../fonts/icofont.ttf"); }*/

/*GLOBAL LINKS*/
/*a:visited{
	color:blue;
}
a:active{
	color:blue;
}
a{
	color:blue;
}*/
/*GLOBALS*/
body {
	/*F
	background-image:url('../../images/background_gradient1.png');
	background-repeat: repeat-x;

	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:12px;*/
	/*background: #9FA9E5;
	background-image: url('../img/body_background.jpg');
	background-repeat: repeat-x;*/
	padding: 0;
	margin: 0;
	overflow-x:auto;
}
.wait, .wait * { cursor: wait !important; }
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
table{
	border-spacing:0;
	padding:0;
	margin:0;
	/*font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:12px;*/
}

td{
	vertical-align:middle;
	text-align:left;
	padding:0;
	/*border:1px solid black;*/
}

form{
	margin:0;
}

div{
	/*border:1px solid black;*/
	/*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:12px;*/
	margin:0;
}

ul{
	margin:0;
	padding:0;
}

.ec{
	/*element center*/
	margin-left:auto;
	margin-right:auto;
}

.tc{
	/*text align center*/
	text-align:center;
}
.tr{
	/*text align right*/
	text-align:right;
}
.tl{
	/*text align left*/
	text-align:left;
}

.border{
	border: 1px solid black;
}

.w100{
	width:100%;}

.justify{
	text-align:justify;
}

iframe.acframe{
	width:890px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
	/*height:500px;*/
	margin-top:5px;
	height:600px;
	/*display:none;*/
}

/*TABLEs*/


table.bodytable{
	/*width:1200px;*/
	width: 100%;
}

table.ec{
	margin-left:auto;
	margin-right:auto;
}

/*TDs*/
td.menu_content_ads{
	background:white;
}
td.sidebars{
	width:170px !important;
	/*padding-top:1px;*/
	/*background-image:url('../img/bar-gradient.png');*/
	/*background:#33CCFF;*/
	background:#2E4496;
}

td.sidebartop{
	width:170px !important;
	/*background: transparent url("../img/blockdefault.png") center center repeat-x;*/
	background: #1E2A6C;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	/*border-right:1px solid blue;*/
	border-left:1px solid #aaa;
	color:white;
}

td.sidebartopright{
	width:170px;
	/*background: transparent url("../img/blockdefault.png") center center repeat-x;*/
	background: #1E2A6C;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	/*border-right:1px solid blue;*/
	border-right:1px solid #aaa;
	color:white;
}

td.sidebar_register{
	width:170px;
	/*background: transparent url("../img/blockdefault.png") center center repeat-x;*/
	background: #1E2A6C;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	/*border-left:1px solid blue;*/
	/*border-left:1px solid #aaa;*/
	cursor:pointer;
	color:white;
}

td.sidebar_register:hover{
	/*background: transparent url("../img/blockactive.png") center center repeat-x;*/

	color: #9FA9E5;
}

td.footercell{
	/*background: transparent url("../img/blockdefault.png") center center repeat-x;*/
	background: #1E2A6C;
	vertical-align:middle;
	text-align:center;
	/*border:1px solid black;*/
	padding:3px;
	color: white;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}

td.contentcell{
	/*width:820px !important;*/
	width:1030px !important;
}

td.tr{
	text-align:right;
}

td.tl{
	text-align:left;
}

td.tc{
	text-align:center;
}

td.tab_border{
	border: 1px solid #6666FF;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	padding:5px;
	text-align:center;
	font-weight:bold;
}

td.tabs{
	/*background-color:#5DF;*/
	background-color:#1E2A6C;
	cursor: pointer;
	color:white;
}

td.tabs:hover{
	/*background-color:#AFF;*/
	background-color:#2E4496;
}

td.activetab{
	/*background-color:#AFD;*/
	background-color:#BBC3DF;
	color:#1E2A6C;
	border-bottom:0;
}

td.tabscontent{
	/*border-bottom:1px solid black;*/
	border-left:1px solid black;
	border-right:1px solid black;
	/*border-bottom-left-radius: 5px;*/
	/*border-bottom-right-radius: 5px;*/
	padding:10px 2px;
	/*height:400px;*/
	/*background: #AFD;*/
	background: #BBC3DF;
	margin-left: 1px;
	margin-right: 1px;
	z-index: 5;
}

td.tabimgs{
	width:350px;
	border-radius:10px;
	border:2px solid black;
	cursor: pointer;
}

td.tabimgs:hover{
	border:2px solid blue;
}

/*DIVs*/
div.cancel{
	border:1px solid red;
	color:red;
	font-weight:bold;
	cursor:pointer;
	border-radius:3px;
	padding:1px 2px;
	text-align:center;
	display:inline-block;
	font-size:9px;
}
div.cancel:hover{
	background-color:yellow;
}

div.noscript{
	border:3px solid red;
	padding:5px 10px;
	font-weight:bold;
	color:red;
	font-size:1.4em;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}

div.ctitle{
	font-weight:bold;
	color: #1E2A6C;
	font-size:2em;
	text-align:center;
	width:99%;
}

div.companyname{
	font-size:15px;
	color: #2E4496;
	font-weight:bold;
	text-align:right;
}
div#params{
	font-size:12px;
	text-align:right;
	display: inline-block;
	padding-left:10px;
	padding-top:1px;
	cursor:pointer;
}
div#paramMenu {
	line-height: 1.15;
	top: 40px;
	border:1px solid black;
	z-index:1020;
	right:-348px;
	position:fixed;
	background:rgba(0,0,0,0.75);
	visibility:visible;
	text-align:left;
	font-size:16px;
	color:white;
	overflow-y:auto;
	max-height: calc(100% - 165px);
	font-family: weathericons, icofont, Arial, sans-serif;
	padding-right:20px;
}

div.paramIcons{
	position: relative;
	top: 10px;
	width:20px;
	margin-left:auto;
	margin-right:auto;
	padding-left:2px;
	padding-right:20px;
	text-align: center;
	font-family: weathericons, icofont, sans-serif;
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
span.icofont {
	font-family: icofont, sans-serif;
}
div.optionIcons{
	width:20px;
	margin-left:auto;
	margin-right:auto;
	padding-left:2px;
	padding-right:10px;
	float: left;
	text-align: center;
	font-family: weathericons, sans-serif;
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

div.selectedIcon {
	color: #49fb35;

}

div#optionsMenu {
	border:1px solid black;
	z-index:99999;
	top:55%;
	right:0px;
	position:fixed;
	/*background:rgba(30,42,108,0.75);*/
	background:rgba(0,0,0,0.75);
	visibility:visible;
	text-align:left;
	font-size:16px;
	color:white;
	font-family: weathericons, sans-serif;
	/**overflow-x:hidden;**/

}

div.sidebartitle{
	background: #1E2A6C;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	color:white;
	margin-top:10px;
}

div.sidebartitle_link{
	background: #1E2A6C;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	color:white;
	margin-top:10px;
	cursor:pointer;
	line-height:170%;
}
div.sidebartitle_link:hover{
	background: #6777D5;
}

div.border{
	border: 1px solid #000;
}

div.maincontent{
	width:100%;
	/*padding:1px 2px;*/
}

div.textheader{
	/*color:#8A00B8;*/
	color:#1E2A6C;
	font-weight:bold;
	font-size:15px;
}
div.justify{
	text-align:justify;
}

div.tabtitle{
	width:275px;
	padding:5px;
	font-weight:bold;
	color:#1E2A6C;
	font-size:18px;
	margin-left:auto;
	margin-right:auto;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border:1px solid black;
	border-bottom:0;
}
div.portlist{
	position:absolute;
	top: 30px;
	left: 225px;
	padding:4px 0px;
	z-index:99999;
	display:none;
}
span.menuHeader {
	font-weight: bold;
}
div.slide_menu{
	border:1px solid black;
	z-index:99999;
	top:36px;
	position:fixed;
	background:rgba(30,42,108,0.90);
	visibility:visible;
	left:-450px;
	text-align:left;
	font-size:16px;
	color:white;
	overflow-x:hidden;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
}
div.slide_menu span:hover {
	color: rgba(255,255,102,1);
}
div#accountMenu{
	border:1px solid black;
	z-index:99999;
	top:36px;
	position:fixed;
	background:rgba(30,42,108,0.90);
	visibility:visible;
	left:-999px;
	text-align:left;
	font-size:16px;
	color:white;
	overflow-x:hidden;
	padding-bottom: 10px;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
}

div#tropicalMenu{
	border:1px solid black;
	z-index:99999;
	top:36px;
	position:fixed;
	background:rgba(30,42,108,0.90);
	visibility:hidden;
	left:135px;
	text-align:left;
	font-size:16px;
	color:white;
	overflow-x:hidden;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
}
div#Options{
	border:1px solid black;
	z-index:99999;
	top:36px;
	position:fixed;
	background:rgba(30,42,108,0.90);
	visibility:hidden;
	left:180px;
	text-align:left;
	font-size:16px;
	color:white;
	overflow-x:hidden;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
}

li.menulink {
	margin-left: 10px;
}

.ui-menu {
	z-index: 10000 !important;
}

div#divMenuIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}
div#divAccountIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 45px;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}
div#divRegionIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 90px;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}
div#divTropicalIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 135px;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}
div#divOptionsIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 180px;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}
div#divPortReportsIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-right-radius: 1em;
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: left;
	position: absolute;
	top: 0;
	left: 225px;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}

div#divParamsIcon {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-left-radius: 1em;
	padding: 2px;
	cursor: pointer;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 40px;
	height: 30px;
	border: 1px solid rgba(8, 8, 8, 0.5);
}

/*SPANs*/
span.blue{
	font-weight:bold;
	color:blue;
}
span.red{
	font-weight:bold;
	color:red;
}
span.green{
	font-weight:bold;
	color:green;
}

span.footer{
	padding-left:25px;
	padding-right:25px;
}
span.footer a{
	color:white;
}

span.tab_border{
	border: 1px solid #000;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	padding:5px;
}

span.tabs{
	background-color:#5DF;
	cursor: pointer;
}

span.tabs:hover{
	background-color:#AFF;
}

span.activetab{
	background-color:#AFD;
}

/***********************************************************
INPUTS
***********************************************************/

/***********************************************************
ADS
***********************************************************/
td.adverts{
	cursor:pointer;
	/*color:blue;*/
	color:white;
	font-weight:bold;
	font-size:10pt;
	border: 1px solid transparent;
	border-spacing:1px;
	border-radius: 5px;
	padding:5px 0px;
	text-align:center;
}

td.adverts:hover{
	/*border: 1px solid blue;*/
	border: 1px solid #9FA9E5;
	color:#9FA9E5;
}
div.marad{
	cursor:pointer;
	color:white;
	font-weight:bold;
	font-size:10pt;
	border: 1px solid transparent;
	border-spacing:1px;
	border-radius: 5px;
	padding:5px 0px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	position:relative;
	z-index:5
}

div.marad:hover{
	border: 1px solid #9FA9E5;
	color: #9FA9E5;
}

div.adhead{
	font-size:9pt;
	border-bottom:2px solid blue;
	color:purple;
}

div.ec{
	/*element center*/
	margin-left:auto;
	margin-right:auto;

}

div.tc{
	/*text align center*/
	text-align:center;

}

span.adsub{
	font-size:8pt;
}
.fontsmall {
	font-size: 8pt;
}

/***********************************************************
MENU
***********************************************************/
.menutitle{
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
	border-top:1px solid #aaa;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding-bottom:3px;
	font-size:12px;
	background:#33CCFF;
	font-weight:bold;
	color:#000;
	/*issues with getting this width to line up 100% properly...*/
	/*width:178px;*/
	/*width:99.5%;*/
}
div.menudiv {
	top: 36px;
	position:absolute;
	left: 90px;
	width: 240px;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
	font-size: 16px;
	border: 1px solid black;
	z-index: 99999;
}
div.legend{
	padding:0;
	margin:0;
	position:absolute;
	right:0;
	text-align:right;
}
img.legend{
	padding:0;
	margin:0;
	vertical-align:top;
	text-align:right;
}
.tier1 {
	width: 230px;
}

/* Tier 1 */
.menudiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%; /* Width of Menu Items */
/*border-bottom: 1px solid #aaa;*/
/*background:#33CCFF;*/
color:white;
background:rgba(30,42,108,0.90);
font-weight:bold;
text-align:left;
z-index:10;
line-height:170%;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
}

.menudiv ul li{
position: relative;
}

/*Tier 2 level menu items */
.menudiv ul li ul{
position: absolute;
width: 270px;
top: 0;
visibility: hidden;
}

/*Tier 3 level menu items */
/*
.menudiv ul li ul li ul{
position: absolute;
width: 260px;
top: 0;
visibility: hidden;
}
*/

/* Sub level menu links style */
.menudiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
/*color: black;*/
color:white;
text-decoration: none;
/*background: #fff;*/
padding: 1px 5px;
border-bottom: 1px solid #aaa;
cursor: pointer;
}

.menudiv ul li a:visited{
color:white;
}

.menudiv ul li a:hover{
/*background-color: #3366FF;*/
color:#9FA9E5;
/*color:#33FFCC;*/
}
div#menutropics a:hover{
	/*background-color: #3366FF;*/
	color: rgba(255,255,102,1);
	/*color:#33FFCC;*/
}

.menudiv .subfolderstyle{
background: url('../img/arrow_list.png') no-repeat center right;
}


/* Holly Hack for IE \*/
* html .menudiv ul li { float: left; height: 1%; }
* html .menudiv ul li a { height: 1%; }
/* End */

/***********************************************************
LOGINBOX
***********************************************************/

div.login_link{
	text-decoration: underline;
	color: blue;
	cursor: pointer;
	font-size: 20px;
}

table.loginbox-border{
	/*border: 1px solid #3FB7EB;*/
	border: 1px solid #aaa;
	width:290px;
	padding:0;
	margin-left:auto;
	margin-right:0;
	border-spacing:0;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

table.loginbox-border table{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

td.loginbox-header{
	/*background: #BADAE8;*/
	background: #1E2A6C;
	/*width: 110px;*/
	padding-left:7px;
	font-weight:bold;
	color:white;
	font-size: 12px;
}
td.loginbox-forgotpassword{
	height: 20px;
	padding-right:5px;
	text-align:right;
	/*font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;*/
	font-size: 10px;
	background: #DFE7EB;
}
td.loginbox-main{
	text-align:left;
	/*background: #DFE7EB;*/
	background: #BBC3DF;
	/*width: 125px;*/
	padding-left:10px;
	vertical-align: top;
	/*font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;*/
}
td.loginbox-buttons{
	text-align:right;
	background: #DFE7EB;
	/*width: 125px;*/
	padding-left:0px;
	/*padding-right:20px;*/
	vertical-align: middle;
	/*font-family: "Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;*/
}
input.loginbutton{
	cursor:pointer;
	background-color:lightblue;
	border: 1px solid black;
	height:21px;
	color:black;
	font-size:11px;
	font-weight:bold;
}
input.logintext{
	width:100px;
	font-size:11px;
}

/***********************************************************
TOOLBAR
***********************************************************/
.toolbar{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
overflow: hidden;

/*
border-top: 1px solid black;
border-bottom: 1px solid black;
*/
/*border-width: 1px 0;*/
/*background: transparent url("../img/blockdefault.png") center center repeat-x;*/
background: #1E2A6C;
}

.toolbar li{
display: inline;
}

.toolbar li a{
float: left;
color: white;
padding: 2px 8px;
text-decoration: none;
/*border-right: 1px solid blue;*/
border-right: 1px solid #aaa;
cursor: pointer;
}

.toolbar li a:visited{
color: white;
}

.toolbar li a:hover, .toolbar li .current{
color: #9FA9E5;
/*background: transparent url("../img/blockactive.png") center center repeat-x;*/
}

/***********************************************************
TOOLTIP (OBS)
***********************************************************/

table.mouseover{
	width:325px;
	height:100%;
	background-color:rgb(50,50,50);
}
table.mainover{
	width:325px;
	background-color:darkgray;
}
td.titlecell{
	background-color:darkgray;
	font-size:12px;
	font-weight:bold;
	color:black;
	text-align:center;
}
td.datecell{
	background-color:darkgray;
	font-size:11px;
	font-weight:bold;
	border-bottom:2px solid black;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color:black;
	text-align:center;
}
td.bodycell{
	background-color:lightblue;
	font-size:11px;
	text-align:left;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	color:black;
}
td.bodycellwind{
	background-color:gray;
	font-size:12px;
	text-align:center;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight:bold;
	color:white;
}
/**
Maps stuff
**/
span.unloadedf{
	font-weight:bold;
	color: #999;
}

span.loadedf{
	font-weight:bold;
	color: #1E2A6C;
	cursor:pointer;
	border-spacing:1px;
}

span.loadedf:hover{
	color: #00F;
	border:1px solid blue;
}

table.jumptab{
	border: 1px solid black;
	background-color: #AAA;
	border-radius:5px;
	/*padding:1px;*/
}

/* new css style for timebar table */

table.timebar{
	border-radius:5px;
	margin-bottom:10px;
	border-spacing:0px 10px;
}

table.timebar tr{
	background-color: #AAA;
	border: 1px solid black;
}

td.unloadedf{
	font-weight:normal;
	color: white;
	text-align: center;
	border: 1px solid transparent;
	font-size:11px;
	border: 1px solid transparent;
	cursor:pointer;
}
td.unloadedf:hover{
	/*border: 1px solid #555;*/
	color: #7FFF00;
}

td.loadedf{
	font-weight:normal;
	/**color: #7FFF00;
	background: #1e6c39;
	*/
	cursor:pointer;
	border: 1px solid transparent;
	/*border-radius:4px;*/
	font-size:11px;
	text-align:center;
	
}

td.loadedf:hover{
	color: #7FFF00;
}

/*td.loadedf:hover{
	color: #9FA9E5;
	border:1px solid #9FA9E5;
}*/

td.selectedf{
	color: #7FFF00;
	background: #1e6c39;
	/*border-radius:4px;*/
}

/* new styles attempt... */
div.timebar{
	text-align:center;
	/*
	//margin-top:15px;
	font-weight:bold;
	margin-bottom:1px;
	*/
}

div.timerow{
	display:inline-block;
	font-size:14px;
	color: #888;

}

td.timeframe{
	/*padding:1px 1px;*/
	cursor:pointer;
	padding-left:2px;
	padding-right:2px;
	vertical-align: bottom;
	font-size:11px;
}

div.unloadedf{
	border: 1px solid transparent;
}

div.unloadedf:hover{
	border: 1px solid #555;
}

div.loadedf{
	color: #FFF;
	background: #1E2A6C;
}

div.loadedf:hover{
	color: #9FA9E5;
	/* border:1px solid #9FA9E5; */
}

div.selectedf{
	color: #FFF;
	background: #2E4496;
	border: 1px solid #FFF;
}

div.daybar{
	display:none;
	color:white;
	position:absolute;
	/*margin-top:-27px;*/
	text-align:center;
	font-weight: bold;
	background: rgb(40,44,47);
	/*margin-left: -1.5em;*/
	/*
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
	*/
	line-height:80%;
	font-size:12px;
	z-index:1;

}
div.daybar_bot{
	color:black;
	position:absolute;
	margin-top:2px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	line-height:80%;
	font-size:11px;
	z-index:1;
}
.dayCell {
	background: rgba(68, 72, 74, 0.75);
	text-align: center;
	padding: 2px 2px 2px 2px;
	color:white;
	font-weight:bold;
	font-size: 0.6em;
	border-left: 1px solid rgba(255,255,255,0.8);
}
div.hourDiv {
	display:none;
	position:absolute;
	background-color:rgba(30, 42, 108, 0.95);
	height:29px !important;
	width:46px !important;
	color:white;
	vertical-align: middle;
	border-radius: 5px;
	padding-top:5px;
	font-size: 12px;
	z-index:2001;
}

div.hourDiv:after {
	content:'';
	position: absolute;
	top: 100%;
	left: 0px;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-top: solid 5px rgba(30, 42, 108, 0.95);
	border-left: solid 5px transparent;
	border-right: solid 5px transparent;
}
div.hourDivSelected {
	display: block;
}
.timebar_custom {
	background: rgba(182,182,182,0.5) !important;
}

/*************/
div#map {
	margin-left: auto;
	margin-right: auto;
}
div#mapcontrols {
	position: absolute;
	padding: 1px;
	background: rgba(255,255,255,0.75);
	border-top-right-radius: 1em;
	border: 1px solid rgba(0,0,0,0.5);
}
input.mapbutton{
	border:1px solid #9FA9E5;
	color:white;
	background: #1E2A6C;
	border-radius:10px;
}
input.mapbutton:hover{
	/*color: #9FA9E5;*/
	background: #2E4496;
}

select.mapselect{
	
	border:1px solid #1E2A6C;
	/*
	border:1px solid #9FA9E5;
	color:white;
	background: #1E2A6C;
	*/
	font-size: 11px;
	color:#1E2A6C;
	background: white;
	border-radius:10px;
}

select.mapselect:hover{
	/*color: #9FA9E5;*/
	/*background: #2E4496;*/
	background: #BBC3DF;
}


div.maptools{
	position:absolute;
	margin-left:895px;
	margin-top:75px;
	color:white;
	z-index:10;
	width:40px;
	text-align:center;
}
div.maptools img{
	opacity:0.4;
	cursor:pointer;
}
div.maptools img:hover{
	opacity:1;
}
img.pancursor{
	cursor:url(../img/pancursor.png) 16 14, url(img/pancursor.png) 16 14, default;
}
img.zoomincursor{
	cursor:url(../img/zoomincursor.png), url(img/zoomincursor.png), default;
}
img.zoomoutcursor{
	cursor:url(../img/zoomoutcursor.png), url(img/zoomoutcursor.png), default;
}
/*TROPICALS*/
div.basin{
	margin-top:30px;
	width:350px;
	/*border:1px solid black;*/
	margin-left:auto;
	margin-right:auto;
}

div.basintitle{
	display:inline-block;
	margin-left:5px;
	padding: 2px 10px;
	background-color:#1E2A6C;
	color:white;
	font-size:1.4em;
	font-weight:bold;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	cursor:pointer;
}
div.basintitle:hover{
	background-color:#2E4496;
}
div.basinbody{
	border-radius:5px;
	border: 2px solid #1E2A6C;
	background-color: #DADFF6;
}
div.nostorms{
	background-color:green;
	color:lightblue;
	font-size:1.25em;
	padding:2px;
}
table.tropmain{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}
div.storminfo{
	padding:5px;
	border:1px solid black;
	border-radius:5px;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:5px;
}
div.storminfo div{
	text-align:center;
}
div.storminfo div.sub{
	font-weight:bold;
}
div.storminfo table{
	border-top:2px solid blue;
	padding-top:2px;
	width:100%;
}
div.storminfo table img{
	cursor:pointer;
	border:2px solid transparent;
}
div.storminfo table img:hover{
	border:2px solid blue;
}
div.storminfo th{
	text-align:center;
	text-decoration:underline;
}
div.storminfo th.left{
	width:150px;
}
div.depression{
	background-color:lightgreen;
	color:black;

}
div.depression div.name{
	color:#2E4496;
	font-size:1.35em;
	font-weight:bold;
	cursor:pointer;
}
div.depression div.name:hover{
	text-decoration:underline;
}
div.storm{
	background-color:orange;
	color:black;
	padding:3px;
}
div.storm div.name{
	color:#2E4496;
	font-size:1.35em;
	font-weight:bold;
	cursor:pointer;
}
div.storm div.name:hover{
	text-decoration:underline;
}
span.bold{
	font-size:1.2em;
	font-weight:bold;
}
div.hurricane{
	background-color:red;
	color:yellow;
	padding:3px;
}
div.hurricane div.name{
	color:#DADFF6;
	font-size:1.35em;
	font-weight:bold;
	cursor:pointer;
}
div.hurricane div.name:hover{
	text-decoration:underline;
}
table.stormdetails td{
	text-align:left;
	width:25%;
	padding: 1px 1px 15px 0px;
}
table.stormdetails td.field{
	text-decoration:underline;
}
table.stormdetails td.value{
	font-weight:bold;
}

td.stormlinks{
	text-align:center;
}
td.stormlinks span{
	color:blue;
	margin-left:6px;
	margin-right:6px;
	font-weight:bold;
	cursor:pointer;
}
td.stormlinks span:hover{
	text-decoration:underline;
}
#advisoryTracking {
	display:none;
	position: fixed;
	z-index: 500;
	background-color: rgb(40, 44, 47);
	color: white;
}
#forecastTracking {
	display:none;
	position: fixed;
	z-index: 500;
	background-color: rgb(40, 44, 47);
	color: white;
}
/*PIRATE STYLES*/
div.piratemouse{
	width:300px;
	font-size:10px;
	text-align:center;
}
div.piratemouse div{
	/*title*/
	font-size:13px;
	font-weight:bold;
	color:red;
	text-align:center;
}
div.ptitle{
	font-size:1.5em;
	font-weight:bold;
	border-bottom:2px solid #2E4496;
	text-align:left;
	margin-top:15px;
}
div.red{
	color:red;
}
div.orange{
	color:#C29100;
}
div.attacktitle{
	text-align:left;
	font-size:1.1em;
	font-weight:bold;
}
div.tborderred{
	border-bottom:2px solid red;
}
div.bborderred{
	border:2px solid red;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	border-top:0;
}
div.tborderorange{
	border-bottom:2px solid #C29100;
}
div.bborderorange{
	border:2px solid #C29100;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	border-top:0;
}
div.attackcontainer{
	width:95%;
	margin-top:8px;
	margin-right:auto;
	margin-left:20px;
	border:1px solid transparent;
}
div.attackdetails{
	margin-left:80px;
	padding:2px 4px;
}
div.piratemessage{
	display:none;
	font-weight:bold;
	text-align:center;
}
div.no_cyclones_text{
	position: absolute;
	width: 965px;
	margin-top: 340px;
	text-align: center;
	font-size: 30px;
	color: white;
	font-weight: bold;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	text-align: center;
	vertical-align: middle;
	text-shadow: #000 0.1em 0.1em 0.2em;
}
/*SUB ACCOUNT*/
.sub_acct_table{
	margin-left: auto;
	margin-right: auto;
	width: 98%;
	text-align: center;
	padding: 5px;
	font-size: 14px;
}
.sub_account_container{
	overflow: auto;
	border: 1px solid black;
	width: 600px;
	height: 600px;
}
.sub_account_names{
	font-size: 12px;
	width: 100%;
}
.sub_account_names td, .sub_account_names th{
	text-align: left;
}
.even_row{
	background-color: #E3E3E3;
}
.odd_row{
	background-color: white;
}
.even_row td, .odd_row td{
	padding: 3px;
}
.new_acct_container{
	border: 1px solid black;
	width: 300px;
	padding: 10px;
	text-align: center;
}
.new_acct_container input{
	width: 170px;
}
.new_acct_container select{
	width: 176px;
}
#sub_acct_submit_new, #sub_acct_help{
	background-color: #2E4496;
	color: white;
	border: 1px solid grey;
	cursor: pointer;
	width: 75px;
	margin-left: auto;
	margin-right: auto;
}
/*.sub_acct_help_container{
	border: 0px dotted black;
	margin-top: 50px;
	font-size: 18px;
	text-align: center;
	width: 225px;
	padding: 5px;
}*/
.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid yellow; 
	z-index:999;
	
}
.arrow-left2 {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right:10px solid yellow; 
	z-index:999;
	
}
div#new{
	background-color:yellow;
	padding-left:2px;
	padding-right:2px;
	position:absolute;
	right: 0px;
	top:7px;
	color:black;
	font-weight:bold;
	box-shadow: 0px 4px 5px 1px black;
	padding-top:2px;
	padding-bottom:2px;
}
div#new2{
	background-color:yellow;
	padding-left:2px;
	padding-right:2px;
	position:absolute;
	right: 24px;
	top:6px;
	color:black;
	font-weight:bold;
	box-shadow: 0px 4px 5px 1px black;
	padding-top:2px;
	padding-bottom:2px;
}
div#producttab_60m{
	background-color: rgba(215, 215, 0, 0.75) none repeat scroll 0 0;
	color: #1E2A6C;
}
.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
}

/* Main menu settings */
#centeredmenu {
	clear:both;
	float:left;
	margin:0;
	padding:0;
	border-bottom:1px solid #000; /* black line below menu */
	width:100%;
	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; /* Menu font */
	font-size:60%; /* Menu text size */
	z-index:1000; /* This makes the dropdown menus appear above the page content below */
	position:relative;
}

/* Top menu items */
#centeredmenu ul {
	margin:0;
	padding:0;
	list-style:none;
	float:right;
	position:relative;
	right:50%;
}
#centeredmenu ul li {
	margin:0 0 0 1px;
	padding:0;
	float:left;
	position:relative;
	left:50%;
	top:1px;
}
#centeredmenu ul li a {
	display:block;
	margin:0;
	padding:.6em .5em .4em;
	font-size:12px;
	line-height:12px;
	text-decoration:none;
	background: rgba(30,42,108,0.75);
	color: white;
	font-weight:bold;
	border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
	color:#fff;
	background:#000;
}
#centeredmenu ul li a:hover {
	background:#36f; /* Top menu items background colour */
	color:#fff;
	border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
	background:#36f; /* Top menu items background colour */
	color:#fff;
	border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
	display:none; /* Sub menus are hiden by default */
	position:absolute;
	top:24px;
	left:0;
	right:auto; /*resets the right:50% on the parent ul */
	width:auto; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
	left:-7px;  /*resets the left:50% on the parent li */
	margin:0; /* Reset the 1px margin from the top menu */
	clear:left;
	width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
	font-size:1em;
	font-weight:normal; /* resets the bold set for the top level menu items */
	background:#eee;
	color:#444;
	line-height:1.4em; /* overwrite line-height value from top menu */
	border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
	cursor: pointer;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
	background:#36f; /* Sub menu items background colour */
	color:#fff;

}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
	left:auto; /* reset left:0; value */
	right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
	display:block; /* Show the sub menus */
}

div#unitshelp{
	background:rgba(30,42,108,0.75);
	position: absolute;
	right:15px;
	margin-top:-20px;
	padding: 2px;
	font-weight: bold;
	color: white;
}
.selectstyle {
	position: relative;
	display: inline-block;
}
.selectstyle:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -1.5px;
	right: 7px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: white;
}
.selectstyle select {
	color: white;
	display: inline-block;
	position: relative;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 1px 18px 1px 0px;
	border: 1px solid;
	border-radius: 5px;
	background: rgba(0,0,0,0);
	font-size: 13px;
}
.selectstyle select::-ms-expand {
	display: none;
}

.selectstyle select:focus {
	outline: transparent;
	background:black;
}
.selectstyle select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
.selectstyle select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
.select-style-white {
	position: relative;
	display: inline-block;
	color: black;
}
.select-style-white:before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	margin-top: -5.5px;
	right: 7px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-top-color: black;
}
.select-style-white select {
	color: #505050;
	display: inline-block;
	position: relative;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 5px 22px 5px 7px;
	border: 1px solid;
	border-radius: 5px;
	background: transparent;
	max-width: 125px;
	font-size: 11px;
	cursor:pointer;
}
.select-style-white select::-ms-expand {
	display: none;
}

.select-style-white select:focus {
	outline: transparent;
}
.select-style-white select:-moz-focusring {
	color: black;
	text-shadow: 0 0 0 #000;
}
.select-style-white select:-moz-focusring {
	color: black;
	text-shadow: 0 0 0 #000;
}
.switch {
	position: relative; width: 30px;
	user-select:none; -moz-user-select:none; -ms-user-select: none;
	display:inline-block;
}
.switch-checkbox {
	display: none;
}
.switch-label {
	display: block; overflow: hidden; cursor: pointer;
	border: 2px solid #999999; border-radius: 25px;
}
.switch-inner {
	display: block; width: 200%; margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}
.switch-inner:before, .switch-inner:after {
	display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
	font-size: 14px; color: white;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.switch-inner:before {
	content: "";
	padding-left: 10px;
	background-color: #34C264; color: #FFFFFF;
}
.switch-inner:after {
	content: "";
	padding-right: 10px;
	background-color: #EEEEEE; color: #999999;
	text-align: right;
}
.switch-switch {
	display: block; width: 12px; margin: 1.5px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 12px;
	border: 2px solid #999999; border-radius: 25px;
	transition: all 0.3s ease-in 0s;
}
.switch-checkbox:checked + .switch-label .switch-inner {
	margin-left: 0;
}
.switch-checkbox:checked + .switch-label .switch-switch {
	right: 0px;
}

nav {

	border-radius: 0px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #fff;
	display: block;
	/*margin: 0px 4px 0px 4px;*/
	overflow: hidden;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 12px;
	 background: rgb(49,126,255);
background: -moz-linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(30,42,108,1) 58%);
background: -webkit-linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(30,42,108,1) 58%);
background: linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(30,42,108,1) 58%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#317eff",endColorstr="#1e2a6c",GradientType=1); 
	/*width: 90%;*/
}

nav ul {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid transparent;
}

nav ul li {
	display: inline-block;
	list-style-type: none;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

nav > ul > li > a {
	color: #fff;
	display: block;
	line-height: 34px;
	padding: 0 10px;
	text-decoration: none;
}

nav > ul > li > a:visited {
	color: #fff;
	display: block;
	line-height: 34px;
	padding: 0 10px;
	text-decoration: none;
}
nav > ul > li > a > .caret {
	border-top: 4px solid #aaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;

	-webkit-transition: color 0.1s linear;
	-moz-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
	transition: color 0.1s linear;
}

nav > ul > li > div.closed {display:none;}
nav > ul > li > div.open {display:block;}

nav > ul > li:hover {
	background-color: rgb( 40, 44, 47 );
}

nav > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}

nav > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}

nav > ul > li > div {
	background-color: rgb( 40, 44, 47 );
	border-top: 0;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;

	visibility: hidden;
	z-index: 10000000;

	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

nav > ul > li > div ul > li {
	display: block;
}

nav > ul > li > div ul > li > a {
	color: #fff;
	display: block;
	padding: 10px 22px;
	text-decoration: none;
}

nav > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}
/*nav > ul > li.hovering:hover > div {*/
/*	display: block;*/
/*	opacity: 1;*/
/*	visibility: visible;*/
/*}*/

nav ul {
	margin: 0;
	padding: 0;
}

nav ul li {
	display: inline-block;
	list-style-type: none;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

nav > ul > li > a > .caret,
nav > ul > li > div ul > li > a > .caret {
	border-top: 4px solid #aaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;

	-webkit-transition: color 0.1s linear;
	-moz-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
	transition: color 0.1s linear;
}

nav > ul > li > div ul > li > a > .caret {
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-left: 4px solid #f2f2f2;
	margin: 0 0 0 8px;
}


nav > ul > li:hover {
	background-color: rgb( 40, 44, 47 );
}

nav > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}

nav > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}

nav > ul > li > div ul > li:hover > a > .caret {
	border-left-color: rgb(255,255,255);
}

nav > ul > li > div,
nav > ul > li > div ul > li > div {
	background-color: rgb( 40, 44, 47 );
	border-top: 0;

	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 165px;
	visibility: hidden;

	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

nav > ul > li > div ul > li > div {
	background-color: rgb( 40, 44, 47 );

	box-shadow: inset 2px 0 5px rgba(0,0,0,.15);
	margin-top: -42px;
	right: -165px;
}

nav > ul > li:hover > div,
nav > ul > li > div ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}

nav > ul > li > div ul > li,
nav > ul > li > div ul > li > div ul > li {
	display: block;
	position: relative;
}

nav > ul > li > div ul > li > a,
nav > ul > li > div ul > li > div ul > li > a {
	color: #fff;
	display: block;
	padding: 10px 22px;
	text-decoration: none;
}

nav > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}

.show{
	display:block;
	opacity:1;
	visibility:visible;
}

#generate{
	border: 2px solid;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
}
#generate:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#portHelp{
	color:yellow;
	border: 2px solid yellow;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
}

#portHelp:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#tropicalHelp{
	color:yellow;
	border: 2px solid yellow;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
	width: 44px;
	padding: 0px;
	display: inline-block;
	font-size: 12px;
	margin-top: -2px;
	vertical-align: middle;
	font-weight:bold;
	position: absolute;
	bottom: 4px;
}
.lihelp{
	color:yellow;
	border: 2px solid yellow;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
	margin:3px;
	width: 70px;
	margin-left: 24px;
	text-decoration: none;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.lihelp:hover{
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#tropicalHelp:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#siteHelp{
	color:yellow;
	border: 2px solid yellow;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;

}
#zoomMap {
	color:white;
	border: 2px solid white;
	padding: 2px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
}
#siteHelp:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#siteHelp2:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#zoomMap:hover, #generatemaps:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#zoombarInputs{
	width: 485px;
	margin-top:-15px;
	display:block;
}
#zoombarMenu{
	position: fixed;
	top: 40px;
	left: -425px;
	z-index: 993;
	width: 425px;
	font-size: 10px;
	height: 235px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid rgba(0,0,0,0.85);
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
}
#portCancel{
	border: 2px solid;
	padding: 6px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
	margin-top:1em;
}
div#userdetails{
	position:fixed;
	right:8px;
	top:6px;
}
#vesselname{
	color: yellow;
	font-weight:bold;
	font-size:11px;
}
div#compname{
	display: inline-block;
	z-index: 500;
	color: rgba(0,0,0,1);
	font-size: 13px;
	padding: 1px 0px 1px 0px;
	text-align:left;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background: rgba(255,255,255,1);

	font-weight: bold;
	margin-left:10px;
	width:90%;
}
div#shipinfodiv{
	position: absolute;
	display: inline;
	left: -14px;
	z-index: 500;
	font-size: 10px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
	width:190px;
	top:270px;
	margin-top: -7px;
	margin-left: 18px;
}
div#shippopupdiv{
	position: absolute;
	display: inline;
	left: -18px;
	z-index: 500;
	font-size: 10px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
	top:295px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: -7px;
	margin-left: 18px;
	width: 225px;
}

div#hoverCPAlineinfodiv{
	position: absolute;
	display: inline;
	left: 350px;
	z-index: 500;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
	width:220px;
	/**top: 555px;**/
	bottom:300px;
}
div#pastAISDisclaimer{
	position: fixed;
	display: inline;
	left: -19px;
	top: 420;
	z-index: 500;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
	width: 390px;
}
div#maplayerInfo{
	position: fixed;
	top: 50%;
	right: 9px;
	z-index: 500;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);

	font-weight: bold;
	cursor: pointer;
}
div#obsinfodiv{
	position: absolute;
	top: 250px;
	display: inline;
	left: -19px;
	width: 245px;
	z-index: 500;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);

	font-weight: bold;
}
div#frontsinfodiv{
	position: absolute;
	top: 285px;
	display: inline;
	left: -15px;
	width: 400px;
	z-index: 500;
	font-size: 10px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);
	font-weight: bold;
}
div#quakesinfodiv{
	position: absolute;
	top: 355px;
	display: inline;
	left: -15px;
	width: 300px;
	z-index: 500;
	font-size: 10px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	color: white;
	background: rgba(0,0,0,0.75);

	font-weight: bold;
}
.nohover{
	cursor: context-menu;
}
.nohover:hover {
	background-color: transparent;
}
#modelDescription{
	text-align: center;
	bottom:0px;
	font-weight:bold;
	font-size:14px;
	z-index:500;
	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.bs-tooltip-auto {
	z-index: 10000 !important;
}
div#voyageInfo{
	position: fixed;
	top: 55px;
	display: inline;
	right: 1px;
	z-index: 1020;
	color: rgba(0,0,0,1);
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background: rgba(255,255,255,1);

}
div#legendInfo{
	position: fixed;
	bottom: 55px;
	display: inline;
	right: 1px;
	z-index: 1020;
	color: rgba(0,0,0,1);
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.85);
	padding: 1px 8px 1px 8px;
	text-align:left;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background: rgba(255,255,255,1);

}
#beta_message{
	font-weight: bold;
	color: black;
	text-align: center;
	font-size: 20px;
	margin: 30px;
}

#beta_message #understand_button{
	cursor: pointer;
	width: 150px;
	background-color: #18ADED;
	color: white;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

table#pf_toolbar_container{
	width: 100%;
}
table#pf_toolbar_container th{
	padding: 6px 4px 2px 4px;
	border-bottom: 1px solid #444444;
	border-right: 1px solid #444444;
	text-align: center;
}
table#pf_toolbar_container td{
	padding: 2px 4px 2px 4px;
	border-bottom: 1px solid #444444;
	border-right: 1px solid #444444;
	text-align: center;
}
table#goto_container{
	width: 100%;
}
table#goto_container th{
	padding: 8px 4px 2px 4px;
	border-bottom: 1px solid #444444;
	border-right: 1px solid #444444;
	text-align: center;
}
table#goto_container td{
	padding: 2px 4px 2px 4px;
	border-bottom: 1px solid #444444;
	border-right: 1px solid #444444;
	text-align: center;
}
/*Routes*/
#vp_routes_container{
	/*
	width: 225px;
	max-width: 225px;
	max-height: 246px;
	*/
	width:100%;
	text-align: center;
	padding-top: 2px;

}
#route_info_wrapper{
	/*height: 246px;*/
	padding-bottom:5px;
	position: relative;
	color: white;
	margin-top: -2px;
	font-weight:bold;
}
#route_info_wrapper input{
	background: transparent;
	color:#FFFF66;
	font-weight:normal;
	border-bottom: 1px solid white;
	border-top: transparent;
	border-left: transparent;
	border-right: transparent;
}
#route_info_wrapper textarea{
	background: transparent;
	color: white;
	border: 1px solid white;
}
#voyages_tab{
	border:1px solid black;
	text-align:center;
	position:absolute;
	z-index:5000;
	background:white;
	width:600px;
	height:190px;
	overflow-y:scroll;
	display:none;
	margin-left:-305px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#route_info_wrapper textarea{
	width: 95%;
}

.points_tab{
	display: inline-block;
	cursor: pointer;
	color: #39FF14;
	font-weight:bold;
	font-size:11px;
}
.route_points{
	display:inline-block;
	width:100%;
	color:white;
	background: rgb(26,26,26);
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	font-size: 10px;
}
li.point > span{
	margin-left: 13px;
}

.points_active_tab{
	display:none;
}
.route_info_wrapper{
	display: none;
}
#vp_info{
	position:fixed;
	display:none;
	z-index: 999;
	font-size: 10px !important;
}
#vp_points{
	width: 215px;
}
#vp_info > div {
	font-size: 10px !important;
}
#climo_vp_info{
	width: 200px;
	position:fixed;
	display:none;
	background: rgba(0,0,0,0.75);
	z-index: 499;
}
#vp_compare{
	position:fixed;
	display:none;
	background: rgba(0,0,0,0.75);
	z-index: 1000;
	color:white;
	top:35px;
	left:215px;
	overflow-y:scroll;
}
.search_loading_img{
	display: none;
	z-index: 1005;
	position: absolute;
	margin-left: -15px;
	margin-top: 3px;
	vertical-align: middle;

}
div.vp_container{
	margin-bottom:3px;
	text-align: center;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.vp_container input[type='button']{
	width: 95%;
}
.vp_container input[type='button'],
#userinput_container input[type='button'],
#userinput_container input[type='submit'],
#make_primary button{
	color: white;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	border: 0px;
	padding: 3px 5px;
	border-radius: 5px;
	border: 1px solid #CCCCCC;
	margin: 2px;
	cursor: pointer;

	/*CSS Gradient*/
	background: #62a0c9;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzYyYTBjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzMzODFiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzA5NzFiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTcxYjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #62a0c9 1%, #3381b2 49%, #2460BF 52%, #2460BF 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#62a0c9), color-stop(49%,#3381b2), color-stop(52%,#2460BF), color-stop(100%,#2460BF));
	background: -webkit-linear-gradient(top,  #62a0c9 1%,#3381b2 49%,#2460BF 52%,#2460BF 100%);
	background: -o-linear-gradient(top,  #62a0c9 1%,#3381b2 49%,#2460BF 52%,#2460BF 100%);
	background: -ms-linear-gradient(top,  #62a0c9 1%,#3381b2 49%,#2460BF 52%,#2460BF 100%);
	background: linear-gradient(to bottom,  #62a0c9 1%,#3381b2 49%,#2460BF 52%,#2460BF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62a0c9', endColorstr='#2460BF',GradientType=0 );
}
.vp_container input[type='button']:hover,
#userinput_container input[type='button']:hover,
#userinput_container input[type='submit']:hover,
#make_primary button:hover{
	color: #FFFFAD;
}
#make_primary{
	display: none;
	text-align: center;
	width: 100%;
}
#userinput_container{
	height: 164px;
}
select.vp_select{
	text-align:center;
	vertical-align: text-top;
}
#points_container{
	position: relative;
	color: white;
	border-top-left-radius:0px;
	margin-top: -2px;
	padding: 3px 0px;
	overflow-y: hidden;
	background:rgba(0,0,0,0.75);
}
#vp_ship{
	width: 125px;
	margin-left: 5px;
}
#vp_header{
	background:rgba(0,0,0,0.75);
  max-width: 215px;
}
#vp_ships_div{
	color: white;
	padding-top:4px;
	padding-left: 5px;
}
#gotoShip{
	width: 135px;
}

#vp_voyages{
	border-bottom: 1px solid white;
	padding-left: 5px;
	color: white;
	padding-top:4px;
	padding-bottom: 3px;
}
.backgroundWhite{
	width: 125px;
	display: inline-block;
	background: white;
	margin-left: 5px;
	border-radius: 5px;
}
#vp_voyage{
	width:125px;
	margin-left: 3px;
}
/*Icons*/
div.icons_container{
	/*
	margin-left: auto;
	margin-right: auto;
	*/
	padding: 2px 0px;
	margin:2px;
	border: 1px solid black;
	border-radius: 5px;
	background-color: rgb(62,66,68);
	color: white;
}
/*
div.iconbg1{
	background-color: #2460BF;
}
div.iconbg2{
	background-color: #2460BF;
}
*/
/*
#icons_container td{
	text-align: center;
}
*/
#addpoint_container, #upload_container{
	position: absolute;
	z-index: 999;
	display: none;
	background:rgba(0,0,0,0.95);
	border: 1px solid black;
	width: 80%;
	color:white;
	/*height: 100px;*/
}
#addpoint_container input{
	width: 50px;
}
#upload_container{
	width: 85%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#upload_container input[type='file']{
	font-size: 10px;
	margin-bottom: 5px;
}
#upload_help{
	display: none;
	position: absolute;
	z-index: 1000;
	background-color: black;
	color: white;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	cursor: help;
	width: 350px;
}
#add_manually_help{
	display: none;
	position: absolute;
	z-index: 1000;
	background-color: black;
	color: white;
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	cursor: help;
	width: 350px;
}

/*User Input*/
#vp_user_input_container{
	border: 2px solid #2460BF;
	width: 225px;
	height: 246px;
	margin-top: 5px;
	text-align: center;
}
*[name='userinput_points']{
	font-size: 20px;
	color: white;
	cursor: pointer;
}
*[name='userinput_back_method']{
	background: #028CD6;
	padding: 3px;
	color: white;
	display: inline-block;
	font-size: 10px;
	width: 125px;
	cursor: pointer;
}
.userinput_contianer{
	display: none;
}

div.ssmargin{
	margin: 1px 2px;
}
img.iconalttsize{
	width:15px;
	height:15px;
}
img.click_able{
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 5px;
}
div.VPButton{
	border: 2px solid white;
	padding: 2px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
	color:white;
	width:140px;
	background: rgb(62,66,68);
	margin-left:auto;
	margin-right:auto;
	font-size:10px;
	margin-bottom:6px;
}
.VPButton:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
div.VPButtonRed{
	border: 2px solid white;
	padding: 2px;
	cursor: pointer;
	border-radius: 1em;
	text-align: center;
	color:white;
	width:140px;
	background: rgb(255,0,0);
	margin-left:auto;
	margin-right:auto;
	font-size:10px;
	margin-bottom:6px;
}
.VPButtonRed:hover {
	color: rgb( 40, 44, 47 );
	background-color: rgb( 255, 255, 255);
}
#top_timebar_wrapper{
	float:left;
}
#loading_indicator{
	position:fixed;
	top:75px;
	left:45%;
	vertical-align: middle;
	border: 1px solid rgba(40,44,47,0.75);
	z-index:999;
	background:rgba(255,255,255,0.8);
	text-align:center;
	padding:3px 8px 3px 8px;
	border-radius:10px;
}
.leaflet-container {
	background: #888;
}
.leaflet-popup-content-wrapper{
	background: rgba(40,44,47,0.85);
	color:white;
}
.leaflet-popup-tip{
	background: rgba(40,44,47,0.85);
	color:white;
}
table#vp_comparison_table{
	border: 1px solid rgba(40,44,47,0.75);
	width:310px;
	font-size:10px;
}
table#vp_comparison_table td{
	width:77px;
}
tr.altrow{
	background: rgba(128,128,128,0.75);
}
.optgroupLabels{
	background-color: rgba(0,0,0,0.1);
	color:white;
	font-weight: bold;
}
.nl {
	border: 2px solid #ffffff;
	border-radius: 30px;
	height: 16px;
	width: 16px;
	animation: pulsate 2s ease-out;
	animation-iteration-count: 1;
	animation-delay: 1s;
	opacity: 0.0;
	pointer-events: none;
}
.pointer{
	cursor: pointer;
}
@keyframes pulsate {
	0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
	50% {opacity: 1.0;}
	100% {-webkit-transform: scale(1.5, 1.5); opacity: 0.0;}
}

.green-ring {
	border: 3px solid #39FF14;
	height: 28px;
	width: 28px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	/*-webkit-animation: pulsate 2s ease-out;
	-webkit-animation-iteration-count: infinite;*/
	/*opacity: 0.0*/
	z-index: 11 !important;
}
.orange-ring {
    border: 3px solid orange;
    height: 28px;
    width: 28px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    /*-webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;*/
    /*opacity: 0.0*/
    z-index: 11 !important;
}
.yellow-ring {
	border: 3px solid yellow;
	height: 28px;
	width: 28px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	/*-webkit-animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;*/
	/*opacity: 0.0*/
	z-index: 11 !important;
}
.red-ring {
	border: 3px solid #ea1136;
	height: 28px;
	width: 28px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	/*-webkit-animation: pulsate 2s ease-out;
	-webkit-animation-iteration-count: infinite;*/
	/*opacity: 0.0*/
	z-index: 11 !important;
}
.linkspan{
	color: #1AAAFF;
	cursor: pointer;
	text-decoration: underline;
}
.presetTitle{
	font-size:10px;
}
.paramTitle{
	font-weight:bold;
	color:rgba(150,150,255,1);
}
.closeParam{
	cursor: pointer;
	float: right;
	margin-right: 20px;
	color: red;
	border-radius: 30px;
	border: 1px solid red;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
}

.selectHaz{
	background: rgb( 40, 44, 47 );
	font-weight:bold;
}
#multiItinTracking{
	top: 115px;
	left: 50%;
	width:30em;
	margin-left:-15em;
	margin-top:-2em;
	background: rgb(40,44,47);
	position:fixed;
	z-index:500;
	border:1px solid #999999;
	border-radius:5px;
	color:white;
	padding:1px 2px;
}
#multiItinShipName{
	font-size: 1.25em;
	padding: 3px 4px;
}
div.mapPort{
	/*color:#e6e6e6;*/
	color:#fff;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	/*font-family:"Source Serif Pro";*/
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	/*font-size:11px;*/
	font-size:12px;
	text-align:center;
	z-index: 10 !important;
}
div.capestraits{
	color:#fff;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:10px;
	text-align:center;
	font-weight:bold;
	z-index: 9 !important;
	line-height:10px;
}
#contourCanvas{
	display:none;
	position:absolute;
	top: -60px;
	left: -193px;
	z-index: 65;
}
div.tropLabels{
	color:#e6e6e6;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	font-size:14px;
	font-weight:bold;
}
.updatedStorm{
	background:yellow;
	font-weight:bold;
	color:black !important;
}
.newStorm{
	background:purple;
	font-weight:bold;
}
.waitingUpdateStorm{
	background:orange;
	color:black !important;
	font-weight:bold;
}
.oldStorm{
	background: #fc0000;
	font-weight:bold;
}
.popupLink{
	color:#00b6ff !important;
	text-decoration: underline;
	cursor:pointer;
}
.popupObLink{
	color:#00b6ff !important;
	text-decoration: underline;
	cursor:pointer;
}
.whitehr{
	color:white;
	background-color: white;
	height: 1px;
	margin: 3px 0;
	border: none;
}
div.shiplabel{
	text-align:left !important;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
div.shiplabel_white{
	color: white !important;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
div.shiplabel_yellow{
	color: yellow !important;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
div.shiplabel_orange{
	color: orange !important;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
table.shipLinePopup td{
	padding: 2px 4px;
	border-bottom:1px solid #777;
	border-right: 1px solid #777;
	text-align:right;
	vertical-align: top;
}
table.shipLinePopup tr td:first-child{
	border-left: 1px solid #777;
}

table.shipLinePopup tr:first-child td{
	border-top: 1px solid #777;
	text-align:center;
}
#siteChanges{
	font-weight: bold;
	color: black;
	text-align: center;
	font-size: 20px;
	margin: 30px;
}

#siteChanges #understand_siteChanges_button{
	cursor: pointer;
	width: 150px;
	background-color: #18ADED;
	color: white;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}
#siteChangesLatest{
	font-weight: bold;
	color: black;
	text-align: center;
	font-size: 20px;
	margin: 30px;
}

#siteChangesLatest #understand_siteChangesLatest_button{
	cursor: pointer;
	width: 150px;
	background-color: #18ADED;
	color: white;
	font-size: 16px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}
.liSection{
	border-top: 1px solid rgba(255,255,255,0.5);
	margin-top: 3px;
}
.portReportSection{
	padding-top: 10px;
}
.ui-timepicker-wrapper{
	z-index: 99999999 !important;
}
#pastVoyageTrackerDivWrapper{
	top: 110px;
	left: 43%;
	width:48em;
	margin-left:-15em;

	padding:5px;
	margin-top:-2em;
}
#pastVoyageShipSelDiv{
	display:inline-block;
}
.pastVoyageShipSelDivCompare{
	display: none;
}
.pastVoyageTrackerOverlay{
	background: rgba(0,0,0,0.75);
	position:fixed;
	z-index:500;
	font-size: 11px;
	border:1px solid #999999;
	border-radius:5px;
	color:white;

	padding:1px 2px;

	display:none;
}

.shipNotifySpan{
	background-color:yellow;padding:3px 8px 3px 8px;border:1px solid black;border-radius:1em;margin-left:3px;
}
.shipNotifySpan:hover{
	background-color: white;
}

/* Tooltip container */
.tooltipnew {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltipnew .tooltiptext {
	visibility: hidden;
	position: absolute;
	width: 120px;
	top: 100%;
	left: 50%;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
	background-color: #555;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltipnew .tooltiptext::after {
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipnew:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
.tooltipnewbottom {
	position: relative;
	display: inline-block;
}
.tooltipnewbottom .tooltiptextbottom {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
}

.tooltipnewbottom .tooltiptextbottom::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}
.tooltipnewbottom:hover .tooltiptextbottom {
	visibility: visible;
	opacity: 1;
}


#pastVoyageTrackerHeader{
	font-size:17px;
	margin-bottom:5px;
	border-bottom:1px solid white;
	color:white;
	font-weight:bold;
	text-align: center;
	padding-bottom:2px;
}

#pastVoyageDetailsWrapper{
	display:none;
	position:absolute;
	bottom:75px;
	max-height:250px;
	overflow-y:hidden;
	overflow-x: hidden;
	width: 275px;
	z-index: 400;
	left:10px;
	text-align: center;
	background-color: #000;
}

table#pastVoyageDetailsTable tr{
	display:block;
}
table#pastVoyageDetailsTable tbody{
	display:block;
	height: 200px;
	overflow:auto;
}
table#pastVoyageDetailsTable th:first-child{
	width:90px;
}
table#pastVoyageDetailsTable td:first-child{
	width:90px;
}
table#pastVoyageDetailsTable th {
	text-align: center;
	padding:2px !important;
	width:52px;
	vertical-align: bottom;
}
table#pastVoyageDetailsTable td {
	text-align: center;
	padding:2px !important;
	width:52px;
}
td.highlight {
	background-color: white !important;
	color: black !important;
}
td.hide{
	display:none;
}
th.hide{
	display:none;
}

table#tropicalPortsCPATable tr{
	display:block;
}
table#tropicalPortsCPATable tbody{
	display:block;
	max-height: 110px;
	overflow:auto;
}
table#tropicalPortsCPATable th:first-child div{
	width:85px;
}
table#tropicalPortsCPATable td:first-child{
	width:90px;
	padding:2px !important;
}
table#tropicalPortsCPATable th{
	text-align: center;
	width:65px;
	padding:2px !important;
}
table#tropicalPortsCPATable th div{
	text-align: left;
	width:50px;
}
table#tropicalPortsCPATable td {
	text-align: center;
	padding:2px !important;
	width:45px;
}

table#tropicalShipsCPATable tr{
	display:block;
}
table#tropicalShipsCPATable tbody{
	display:block;
	max-height: 110px;
	overflow:auto;
}
table#tropicalShipsCPATable th:first-child div{
	width:85px;
}
table#tropicalShipsCPATable th:first-child{
	width:90px;
}
table#tropicalShipsCPATable td:first-child{
	width:90px;
}
table#tropicalShipsCPATable th{
	text-align: center;
	width:50px;
	padding:2px !important;
}
table#tropicalShipsCPATable th div{
	text-align: left;
	width:50px;
}
table#tropicalShipsCPATable td {
	text-align: center;
	padding:2px !important;
	width:45px;
}
.tropicalTrackingOverlay{
	background: rgb(40,44,47);
	position:fixed;
	z-index:500;

	border:1px solid #999999;
	border-radius:5px;
	color:white;

	padding:1px 2px;

	display:none;
}
.multiItinTracking{
	background: rgb(40,44,47);
	position:fixed;
	z-index:500;

	border:1px solid #999999;
	border-radius:5px;
	color:white;

	padding:1px 2px;

	display:none;
}
thead.fixedHeader tr{
	display:block;
}
tbody.scrollContent{
	display:block;
	overflow: auto;
	width: 100%;
}
table#calcpoints_table{
	font-size:10px;
}
#calcpoints_table tbody{
	height: 172px;
}
.btn-primary {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}
.btn-primary:hover{
	color: #fff;
	background-color:#0069d9;
	border-color: #0062cc;
}
.btn-mapdashboard {
	color: #fff;
	background-color: #1E2A6C;
	border-color: #1E2A6C;
	border-radius: 0px;
	background-repeat: no-repeat !important;
}
.btn-mapdashboard:hover{
	color: #fff;
	background-color:#0069d9;
	border-color: #0062cc;
}

button.active{
	color: #fff;
	background: rgb(49,126,255);
	background: -moz-linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(40, 89, 191,1) 58%);
	background: -webkit-linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(40, 89, 191,1) 58%);
	background: linear-gradient(180deg, rgba(49,126,255,1) 0%, rgba(40, 89, 191,1) 58%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#317eff",endColorstr="#2859BF",GradientType=1);
}
.btn {
	margin-bottom: 0;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.btn-dashboard {
	margin-bottom: 0;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 0px solid transparent;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	padding: 4px 12px;
	font-size: 10px;
	font-weight:bold;
	line-height: 1.42857143;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.btn-success {
	padding:2px 4px;
	color: #fff;
	font-weight:bold;
	background-color: #28a745;
	border-color: #28a745;
}
.btn-success:hover{
	color: #fff;
	background-color:#218838;
	border-color: #1e7e34;
}
.btn-secondary{
	padding:2px 4px;
	color: #fff;
	background-color: #868e96;
	border-color: #868e96;
}
.btn-secondary:hover{
	color: #fff;
	background-color: #727b84;
	border-color: #6c757d;
}
#calculated_trigger{
	margin-left:20px;
	font-size:9px;
}
#edit_trigger{
	margin-left: 20px;
	font-size:9px;
}
#vpTools{
	margin-left:20px;
	font-size:9px;
	display: inline-block;
}
#route_info_table td{
	padding: 1px 0px 2px 0px;
}
#vpToolsDiv{
	position:absolute;
	color:white;
	background:rgb(26,26,26);
	left:88px;
	width:125px;
	z-index: 999999;
	padding-top:5px;
	border: 1px solid black;
	display:none;
}
#vpToolsDiv ul li {
	display: inline-block;
	list-style-type: none;
	cursor: pointer;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	width:100%;
}
#vpToolsDiv ul li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}
#vpToolsDiv ul li > a {
	color: #fff;
	display: block;
	padding: 5px 5px;
	text-decoration: none;
}
div#vpTools > .caret {
	border-top: 4px solid #fff;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;

	-webkit-transition: color 0.1s linear;
	-moz-transition: color 0.1s linear;
	-o-transition: color 0.1s linear;
	transition: color 0.1s linear;
}
#exportComparisonTable{
	position:absolute;
	margin-left:26px;
	margin-top:2px;
	cursor:pointer;
}
#vpTitle{
	color:white;
	font-size:13px;
	padding-top:2px;
	padding-left:2px;
	font-weight:bold;
}
tr.evenRow{
	background:rgba(255,255,255,0.25);
}
nav > ul > li > a{
	color: white !important;
}
td.green{
	cursor:pointer;
	background-color:#CCFFCC !important;
	font-weight:bold;
	width:16px;
	padding:2px !important;
	font-size:10px;
	text-align:center;
}
td.red{
	cursor:pointer;
	background-color:#ff7575 !important;
	font-weight:bold;
	width:16px;
	padding:2px !important;
	font-size:10px;
	text-align:center;
}
td.orange{
	cursor:pointer;
	background-color:#FFCC66 !important;
	font-weight:bold;
	width:16px;
	padding:2px !important;
	font-size:10px;
	text-align:center;
}
td.yellow{
	cursor:pointer;
	background-color:#FFFF99 !important;
	font-weight:bold;
	width:16px;
	padding:2px !important;
	font-size:10px;
	text-align:center;
}
.led-box {
	height: 12px;
	width: 100%;
	margin: 0px auto !important;
}

.led-box p {
	font-size: 12px;
	text-align: center;
	margin: 1em;
}

.led-red {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	background-color: #F00;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.25) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 8px;
	-webkit-animation: blinkRed 0.5s infinite;
	-moz-animation: blinkRed 0.5s infinite;
	-ms-animation: blinkRed 0.5s infinite;
	-o-animation: blinkRed 0.5s infinite;
	animation: blinkRed 0.5s infinite;
	margin: 0px auto !important;
}
/*
@-webkit-keyframes blinkRed {
	from { background-color: #F00; }
	50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
	to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
	from { background-color: #F00; }
	50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
	to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
	from { background-color: #F00; }
	50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
	to { background-color: #F00; }
}
@-o-keyframes blinkRed {
	from { background-color: #F00; }
	50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
	to { background-color: #F00; }
}
@keyframes blinkRed {
	from { background-color: #F00; }
	50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #ff1313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
	to { background-color: #F00; }
}*/

.led-yellow {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	background-color: #FF0;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.25) 0 -1px 7px 1px, inset #ffe710 0 -1px 9px, #FF0 0 2px 8px;
	-webkit-animation: blinkYellow 1s infinite;
	-moz-animation: blinkYellow 1s infinite;
	-ms-animation: blinkYellow 1s infinite;
	-o-animation: blinkYellow 1s infinite;
	animation: blinkYellow 1s infinite;
	margin: 0px auto !important;
}

/*@-webkit-keyframes blinkYellow {
	from { background-color: #FF0; }
	50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
	to { background-color: #FF0; }
}
@-moz-keyframes blinkYellow {
	from { background-color: #FF0; }
	50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
	to { background-color: #FF0; }
}
@-ms-keyframes blinkYellow {
	from { background-color: #FF0; }
	50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
	to { background-color: #FF0; }
}
@-o-keyframes blinkYellow {
	from { background-color: #FF0; }
	50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
	to { background-color: #FF0; }
}
@keyframes blinkYellow {
	from { background-color: #FF0; }
	50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
	to { background-color: #FF0; }
}*/

.led-green {
	margin: 0 auto;
	width: 12px;
	height: 12px;
	background-color: #ABFF00;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.25) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 8px;
	margin: 0px auto !important;
}

.led-blue {
	margin: 0 auto;
	width: 24px;
	height: 24px;
	background-color: #24E0FF;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
	margin: 0px auto !important;
}
tr.heavyWx{
	background: #ff7575 !important;
}
tr.modHeavyWx{
	background: #FFCC66 !important;
	color:#3D3D3D;
}
tr.rowSelected td{
	background-color: #B4D5FE !important;
}
table.featureInfo{
	border: none !important;
	width: 100%;
}
table.featureInfo th{
	background: none !important;
}
table.featureInfo th{
	display:none;
}
table.featureInfo th:nth-child(2){
	display:block;
}
table.featureInfo td{
	display:none;
}
table.featureInfo td:nth-child(2){
	display:block;
	border:2px solid white;
}
.yellowBG{
	background-color: yellow;
	color: black;
}
#ecmwfCopyright{
	position: fixed;
	bottom: 63px;
	font-size: 10px;
	background: rgba(44,47,44,0.85);
	color: white;
	z-index: 1001;
	left:30px;
	padding:5px;
	display:none;
}

.grayIcon{
	background: rgba(180,180,180,0.8);
	border: 1px solid gray;
	border-radius: 10px;
}


/* 2. Position the presetBar between them */
#presetBar {
  position: absolute;
  top: 50px;              /* same as #topMenu height */
  bottom: 220px;           /* same as #bottomMenu height */
  right: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: flex-end;          /* keep buttons hugging right edge */
	/*gap: clamp(0.75rem, 1.5vw, 1.75rem); /* consistent vertical spacing */
	gap: 4%;
  padding: clamp(0.5rem, 1vw, 1rem) 0;
  z-index: 999;
}

/* 3. Style each button responsively */
.preset-btn {
  position: relative;            /* for the absolute badge inside */                /* fill the container’s width */
  padding-right: clamp(0.5rem,2.5vw,2.75rem) !important;          /* room for the badge */
  font-size: clamp(0.75rem, 0.9vw, 1.35rem) !important;
  text-align: right;
  background: rgba(33,37,41,0.67) !important;
  color: #fff !important;
  border-radius: 50px;
  border: none;
	padding-left:0.5em;
	padding-top:0px;
	padding-bottom:0px;
}

/* The circular icon badge */
.mapPreset {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(20px, 2.5vw, 40px);
  aspect-ratio: 1;               /* keeps it a perfect circle */
  font-size: clamp(0.75rem, 1.25vw, 1.5em);

  border: 2px solid #fff;
  border-radius: 50%;
  background: rgb(30,42,108);
  color: #fff;
}
/* 1. Container stretches between top & bottom menus */
#modelSelect {
  position: absolute;
  bottom: 70px;   /* same as your fixed top menu height */
  right: clamp(0.25rem, 0.5vw, 0.5rem);
  padding: clamp(0.25rem, 0.5vw, 0.5rem);
  background: rgba(0, 0, 0, 0.75);
  overflow-y: auto;
  z-index: 1000;
}

/* 2. Title */
.model-select__title {
  margin: 0 0 clamp(0.25rem, 0.5vw, 0.5rem);
  font-size: clamp(0.6rem, 0.9vw, 1rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* 3. Each selector group fills the width */
#modelSelect .modelSelects {
  width: 100%;
}

/* 4. Spacing between groups */
#modelSelect .modelSelects + .modelSelects {
  margin-top: clamp(0.125rem, 0.25vw, 0.375rem);
}

/* 5. Label text & padding */
#modelSelect .modelSelects .input-group-text {
  font-size: clamp(0.5rem, 0.8vw, 1rem);
  padding: clamp(0.125rem, 0.25vw, 0.25rem);
}

/* 6. Select width, font & padding */
#modelSelect .modelSelects .form-select {
  font-size: clamp(0.5rem, 0.8vw, 1rem);
  padding: clamp(0.25rem, 0.5vw, 0.25rem)
           clamp(0.25rem, 0.5vw, 0.5rem);
}