
/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, section, aside, nav, article {
	display: block;
}

body {
	-webkit-print-color-adjust:exact;
	margin: 0 auto;
	padding: 0px 0px;
	width: 1200px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #ffffff;
   /* min-height: 100%;*/
}

#conteiner {
	/*min-height: 1000px;*/
	/*background: #ccc;*/
}

H1 {margin: 15px 0px 15px 0px; color: #000000; font-family: Arial, Times New Roman; font-size: 26px;font-weight:normal; text-align: center;}
H2 {margin: 5px 0px 3px 0px; font-size: 24px; font-family: Cambria, Times New Roman; color: #000000; font-weight:normal}
H3 {margin: 20px 0px 5px 0px; font-size: 18px; font-family: Arial, Times New Roman; color: #02569a; font-weight:normal; line-height: 1.1; text-align: left}
H4 {margin: 15px 0px 5px 0px; color: #02569a; font-family: Arial, Times New Roman; font-size: 16px; text-align: left; margin-bottom: 10px; font-weight: normal;}
H5 {margin: 3px 0px 3px 0px; font-size: 12px; font-family: Tahoma; color: #808080; font-weight:normal; line-height: 1.2; text-align: center}
H6 {margin: 3px 0px 3px 0px; font-size: 10px; font-family: Tahoma; color: #000000; font-weight:normal; line-height: 1.2; text-align: left}

hr {
	margin: 0px;
	border: 0px;
	padding-left: 20px;
	width: 1180px;
	height: 1px;
	background: #e6e6e6;
}

img {
	border: 0px;
}

strong {
	color: #02569a;
}

ul {
	margin: 0px;
	padding-left: 0px;
	list-style-type: square;
}
li {
	font-family: Tahoma, Times New Roman, Arial;
	color: #808080;
	font-size: 14px;
	font-weight:normal;
	line-height: 1.6;
}
li a{}
li a:hover{}


label {
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:justify;
	padding-left: 0px;
    padding-right: 20px;
}


/*
p {
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:justify;
	padding-left: 0px;
    padding-right: 0px;
}
*/

.margin-top-15 {
	margin-top: 15px !important;
}

p.center {
	text-align:center;
}
/*
p.footer {
	margin: 0px;
	font-size: 10px;
	font-weight:normal;
	text-decoration: none;
	font-family: Tahoma, Time New Roman, Arial;
	color: #808080;
	line-height: 1.4;
	text-align:center;
	padding-left: 20px;
    padding-right: 20px;

}
p.copyright {
	margin: 0px;
	font-size: 11px;
	font-weight:normal;
	text-decoration: none;
	font-family: Tahoma, Time New Roman, Arial;
	color: #ccc;
	line-height: 1.2;
	text-align:right;
	padding-left: 20px;
    padding-right: 20px;

}
.copyright a {
	font-size: 11px;
	font-weight:normal;
	text-decoration: none;
	font-family: Tahoma, Time New Roman, Arial;
	color: #ccc;
}
.copyright a:hover {
	font-size: 11px;
	font-weight:normal;
	text-decoration: none;
	font-family: Tahoma, Time New Roman, Arial;
	color: #000;
}
*/

#offline_message {
	display: table;
	position: relative;
	width:1000px;
	height: 30px;
	padding-top: 10px;

	border: 1px solid #ff0000;
	font-size:10px;
	color:#000000;
	font-family: arial;
	font-size: 12px;
	font-weight:bold;
	text-align: center;
	background: #ffcccc;

}

#loading {
	display:table;
	width:31px;
	height:31px;
	border:0px solid black;
	position:relative;
	top:50%;
	left:50%;
	padding:2px;
	background: url(../images/ajax-loader.gif) 0px 0px no-repeat;
}

thead{
    background-color:white;
}

.back-to-top {
	position: fixed;
	bottom: 2em;
	right: 0px;
	text-decoration: none;
	color: #ffffff;
	background-color: rgba(2, 86, 154, 0.80);
	font-size: 12px;
	padding: 1em;
	display: none;
	z-index: 10;
}

.back-to-top:hover {
	background-color: rgba(2, 165, 218, 0.80);
}


/****************** Login Form Header ************************/

#login_message {
	display: table;
	position: relative;
	margin: 0 auto;
	width:1000px;
	height: 30px;
	padding-top: 10px;

	border: 1px solid #ff0000;
	font-size:10px;
	color:#ff0000;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	background: #ffcccc;

}

#login_form_header {
	position: relative;
	margin: 0 auto;
    width:1000px;
    overflow: hidden;

	margin-top: 0px;
	margin-bottom: 0px;
	height: 150px;
	padding-bottom: 20px;
}

#login_form_header img {
	position: relative;
	left: 50%;
    margin-left: -150px;
	margin-top: 20px;
	margin-bottom: 0px;
	top: 0;
	right: 0;
	width: 300px;
	height: 67px;
}


/****************** Login Form ************************/

#login_form {
	position: relative;
	margin: 0 auto;
	clear:both;
    width:1000px;
    /*float:left;*/
    padding-top: 0px;
	background-color:#ffffff;
}

.contact_text {
	width: 220px;
	padding:5px;
	border: 1px solid #78b1d4;
	font-size:10px;
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}
.contact_text:focus {
	outline: none;
	background: #ffffff;
}

label.error {
	font-weight:normal;
	font-size:11px;
	color:#ff0000;
	text-align:left;
	width:60px;
	padding-left:0px;
}
.contact_submit {
	width: 232px;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #0093dd;
}
p.info {
	clear: both;
	/*width: 100;
	height: 20px;*/
	font-size: 11px;
	text-align: center;
	padding-top: 0px;
	color: green;
}
.cf_blank {
	clear:both;
    width:284px;
    float:left;
    padding-top: 20px;
	background-color:#ffffff;
}
.cf_label {
    width:100px;
    float:left;
    padding-top: 22px;
	background-color:#ffffff;
}
.cf_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:justify;
}
/*p.cf_label {
	text-align: right;
	padding-top: 0px;
}*/

.cf_input {
	float:left;
    width:616px;
    padding-top: 20px;
	background-color:#ffffff;
}


.form_date {
	padding:5px;
	border: 1px solid #02569a;
	/*font-size:10px;*/
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}

.form_date:focus {
	outline: none;
}

.form_date_time {
	padding:5px;
	border: 1px solid #02569a;
	/*font-size:10px;*/
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}

.form_date_time:focus {
	outline: none;
}


/****************** Top ************************/

#top {
	position: relative;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 1200px;
	height: 50px;
	background:#ffffff;
}

#top_logo {
	clear:both;
    width:200px;
    float:left;
    padding-top: 0px;
	background:#ffffff;
}

#top_logo img {
	position: relative;
	margin-top: 10px;
	margin-bottom: 0px;
	top: 0;
	right: 0;
	/*width: 1000px;
	height: 80px;*/
}

#top_header {
    width:550px;
    float:left;
    padding-top: 0px;
	background:#ffffff;
	font-size: 18px;
	color: #0093dd;
}

#top_logo_right {
    width:50px;
    float:left;
    padding-top: 0px;
	font-size: 10px;
	color: #0093dd;
}
#top_picker{
	width:100px;
	float:left;
	padding-top: 0px;
	font-size: 10px;

}

#top_right {
    width:400px;
    float:left;
    padding-top: 0px;
}


/****************** Navigation - Top menu ************************/

#top_menu {
	position: relative;
	/*float:left;*/
	clear: both;
	width: 400px;
	height: 30px;
	/*background: url("../images/2013_nav_background_01.png");*/
	/*z-index: 9999;*/
	padding-top: 0px;
	padding-right: 0px;
}

#top_menu ul {
	margin: 0;
	position:absolute;
	right:0px;
	/*width: 200px;*/
	list-style: none;
}
#top_menu ul li {
	float:left;
	margin-left: 0px;
	/*width: 100px;*/
	/*position: relative;*/
	list-style: none;
}
#top_menu ul li a {
	display: block;
	font-size: 11px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #cccccc;
	/*background: url("../images/topmenu_button_01.png") top right repeat-x;*/
	padding-left: 13px;
	padding-right: 12px;
}
#top_menu ul li a:hover {
	color: #cccccc;
	/*background: url("../images/topmenu_button_02.png") top right repeat-x;*/
}

#top_menu ul li.selected a {
	color: #cccccc;
	/*background: url("../images/topmenu_button_02.png") top right repeat-x;*/
}

#top_menu ul li.unselected a {
	color: #cccccc;
	/*background: url("../images/topmenu_button_01.png") top right repeat-x;*/
}


/****************** Top - User login ************************/

#user_id {
	clear:both;
    width:400px;
    height: 20px;
    padding: 0px;
    font-size: 11px;
	text-align: left;
	background:#ffffff;
}

#user_id p {
	font-size: 11px;
	text-align: right;
	padding: 0px;
}

/****************** Navigation - menu fleet vessel details ************************/

#tabs {
	position: relative;
	clear: both;
	width: 1200px;
	height: 30px;
	background-color:#ffffff; /* #0093dd */
	border-bottom: 1px solid #e6e6e6;
}

#tabs ul {
	margin: 0 auto;
	width: 1200px;
	list-style: none;
}

#tabs ul li {
	float: left;
}

#tabs ul li a {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #02569a;
	background-color:#ffffff;
	padding-left: 20px;
	padding-right: 20px;
}

#tabs ul li a:hover {
	color: #000000;
	/*background-color:#e6e6e6;*/
	/*border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;*/
}

#tabs ul li.selected a {
	color: #000000;
	/*background-color:#e6e6e6;*/
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
}

/****************** Navigation - menu measures ************************/

#menu_measures {
	position: relative;
	clear: both;
	width: 1200px;
	height: 30px;
	background-color:#ffffff; /* #0093dd */
	border-bottom: 1px solid #e6e6e6;
}

#menu_measures ul {
	margin: 0 auto;
	width: 1200px;
	list-style: none;
}

#menu_measures ul li {
	float: left;
}

#menu_measures ul li a {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #02569a;
	background-color:#ffffff;
	padding-left: 20px;
	padding-right: 20px;
}

#menu_measures ul li a:hover {
	color: #000000;
	/*background-color:#e6e6e6;*/
	/*border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;*/
}

#menu_measures ul li.selected a {
	color: #000000;
	/*background-color:#e6e6e6;*/
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
}

/****************** Navigation - page menu ************************/

#page_menu {
	/*position: relative;*/
	clear: both;
	width: 1200px;
	height: 30px;
	background-color:#ffffff; /* #0093dd */
	/*text-align: center;*/
	padding-bottom: 20px;
}

#page_menu ul {
	display: table;
	margin: 0 auto;
	/*width: 1200px;*/
	list-style: none;
	/*align: center;*/
}

#page_menu ul li {
	float: left;
	border-right: 1px solid #ffffff;

}

#page_menu ul li a {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color:#02569a;
	padding-left: 20px;
	padding-right: 20px;
}

#page_menu ul li a:hover {
	color: #ffffff;
	background-color:#02a5da;
}

#page_menu ul li.selected {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color:#02a5da;
	padding-left: 20px;
	padding-right: 20px;
}

#page_menu ul li.pages_of {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #02569a;
	background-color:#ffffff;
	padding-left: 20px;
	padding-right: 20px;
}

#page_menu ul li.not_active {
	display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #cccccc;
	background-color:#02569a;
	padding-left: 20px;
	padding-right: 20px;
}


/****************** Navigation - menu ************************/

#menu {
	position: absolute;
	left: 0;
	top: 70px;
	width: 100%;
	height: 50px;
	/*background: url("../images/2013_nav_background_01.png");*/
	background-color:#02569a; /* #0093dd */
}

	#menu ul {
		margin: 0 auto;
		width: 1200px;
		list-style: none;
	}

		#menu ul li {
			float: left;
		}

			#menu ul li a {
				display: block;
				/*margin-right: 20px;
				width: 140px;*/
				font-size: 14px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
				color: #fff;
				/*background: url("../images/2013_menu_button_01.png") 0 0 repeat-x;*/
				background-color:#02569a;
				padding-left: 25px;
				padding-right: 25px;
			}

				#menu ul li a:hover {
					color: #ffffff;
					/*background: url("../images/2013_menu_button_02.png") 0 0 repeat-x;*/
					background-color:#02a5da;
				}

			#menu ul li.selected a {
				color: #fff;
				/*background: url("../images/2013_menu_button_02.png") 0 0 repeat-x;*/
				background-color:#02a5da;
			}


/****************** Navigation - graphs ************************/

#graphsnav {
	/*position: relative;*/
	/*width: 650px;*/
	height: 25px;
	/*background: url("../images/2013_nav_background_01.png");*/
	/*z-index: 9999;*/
	padding-top: 0px;
}

#graphsnav ul {
	margin: 0;
	/*width: 650px;*/
	list-style: none;
}
#graphsnav ul li {
	float:left;
	margin-left: 20px;
	width: 100px;
	/*position: relative;*/
	list-style: none;
}
#graphsnav ul li a {
	display: block;
	width: 200px;
	height: 25px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	/*background: url("../images/topmenu_button_01.png") top right repeat-x;*/
	background: #02569a;
	padding-left: 13px;
	padding-right: 12px;
}
#graphsnav ul li a:hover {
	color: #fff;
	/*background: url("../images/topmenu_button_02.png") top right repeat-x;*/
	background: #02569a;
}
#graphsnav ul li.selected a {
	color: #fff;
	/*background: url("../images/2013_menu_button_02.png") 0 0 repeat-x;*/
	background-color:#02a5da;
}



/****************** Conteiner ************************/

#conteiner {
	display: table;
	position: relative;
	margin-top: 70px;
	width: 1200px;
	height: 600px;
}

#error_message {
	display: table;
	position: relative;
	margin: 0 auto;
	width:1200px;
	height: 30px;
	padding-top: 10px;
	margin-bottom: 10px;

	border: 1px solid #ff0000;
	font-size:10px;
	color:#ff0000;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	background: #ffcccc;

}

#ok_message {
	display: table;
	position: relative;
	width:1200px;
	height: 30px;
	padding-top: 10px;
	margin-bottom: 10px;

	border: 1px solid #008000;
	font-size:10px;
	color:#008000;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	background: #ccffcc;

}

#warning_message {
	display: table;
	position: relative;
	width:1200px;
	height: 30px;
	padding-top: 10px;
	padding-bottom: 10px;

	border: 1px solid #ff0000;
	font-size:10px;
	color:#ff0000;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	background: #ffcccc;

}

#warning_message strong {
	color:#ff0000;
}

#pdf_link {
	display: table;
	position: relative;
	width:1180px;
	height: 30px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;

	border: 1px solid #aaaaaa;
	font-size:16px;
	color:#555555;
	font-family: arial;
	font-size: 12px;
	text-align: left;
	text-decoration: none;
	background: #ffffff;
}

#pdf_link img {
	vertical-align: middle;
}

#pdf_link a {
	text-align: left;
	font-size:16px;
	font-weight: normal;
	text-decoration: none;
	color: #555555;
}

#pdf_link:hover {
	border: 1px solid #02569a;
	color: #02569a;
}

#list_tab {
    width: 1200px;
    cellpadding: 1px;
    cellspacing: 1px;
}

#tab_header {
    width: 1200px;
    font-family: arial;
	font-size: 12px;
	text-align: center;
	color:#ffffff;
	padding: 0px;
	background: #02569a; /*0, 147, 221; 105, 192, 235*/
}

#tab_header img {
    margin: 0px;
	padding: 0px;
	vertical-align: middle;
}

.tab_header {
	width: 1200px;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	color:#ffffff;
	padding: 0px;
	background: #02569a; /*0, 147, 221; 105, 192, 235*/
}

.tab_header img {
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}
#tab_header span
{
	padding:2px;
}

#tab_content {
    width: 1200px;
    font-family: arial;
	font-size: 12px;
	text-align: left;
	color: #808080;
	padding: 0px;
}

#tab_content:hover {
	background: #69c0eb; /* #69c0eb */
	/*background: #e6e6e6;*/
	/*background: #cccccc;*/
	color: #000000;
}

#tab_content_group {
	width: 1200px;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	color: #808080;
	padding: 0px;
}


#tab_content_group:hover {
	background: #69c0eb; /* #69c0eb */
	/*background: #e6e6e6;*/
	/*background: #cccccc;*/
	color: #000000;
}


.tab_content {
	width: 1200px;
	font-family: arial;
	font-size: 12px;
	text-align: left;
	color: #808080;
	padding: 0px;
}

.tab_content:hover {
	background: #69c0eb; /* #69c0eb */
	/*background: #e6e6e6;*/
	/*background: #cccccc;*/
	color: #000000;
}
.tab_content_group {
	width: 1200px;
	font-family: arial;
	font-size: 12px;
	text-align: center;
	color: #808080;
	padding: 0px;
}
.tab_content_group p
{
	cursor: pointer;
}

.tab_content_group:hover {
	background: #69c0eb; /* #69c0eb */
	/*background: #e6e6e6;*/
	/*background: #cccccc;*/
	color: #000000;
}

.td_list_row {
	padding-left: 5px;
}

.td_list_row img {
	vertical-align:text-top;
}

.td_list_row a {
	display: block;
	font-weight:bold;
	text-decoration: none;
	color: #02569a;
}

.td_list_row a:hover {
	color: #ffffff;
}

.td_list_row_center {
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
}

.td_list_row_center img {
	display: block;
    margin: 0 auto;
	vertical-align:text-top;
}

.td_list_row_center a {
	display: block;
	font-weight:bold;
	text-decoration: none;
	color: #02569a;
}

.td_list_row_center a:hover {
	color: #ffffff;
}

.td_list_row_center_ok {
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
	color: #808080;
}

.td_list_row_center_not_ok {
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
	color: #ff0000;
}


/****************** Form ************************/

.form_input {
	/*width: 220px;*/
	padding:5px;
	border: 1px solid #02569a;
	/*font-size:10px;*/
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}

.form_input:focus {
	outline: none;
	/*outline: 1px dashed #000;*/
}

.select_div {
	overflow:hidden; /* this hides the select's drop button */
	float:left;
	display: inline-block; /* make this fake elements inline block */
	position:relative; /* we need to move the element without effecting the doc flow */
    /*top:0.75em;  /* we're moving it slightly down for alignment purposes */
    padding:0px;
    margin:0;
    background: white url("../images/formelements-select.png") no-repeat bottom right;
    /* this is the new drop button, in image form */
    width:20em; border-radius:0px;
    height:27px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.2);*/
    border: solid 1px #02569a;
}

.select_div.ship_category {
	width: 228px;
}

.select_div.ship_class {
	width: 140px;
}

.select_div.monitoring_method {
	width: 400px;
}

.small_select_div {
	overflow:hidden; /* this hides the select's drop button */
	float:left;
	display: inline-block; /* make this fake elements inline block */
	position:relative; /* we need to move the element without effecting the doc flow */
    /*top:0.75em;  /* we're moving it slightly down for alignment purposes */
    padding:0px;
    margin:0;
    background: white url("../images/formelements-select.png") no-repeat bottom right;
    /* this is the new drop button, in image form */
    width:9em; border-radius:0px;
    height:27px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.2);*/
    border: solid 1px #02569a;
}
.form_select {
     width:115% /* this percentage effectively extends the drop down button out of view */;
    background-color:transparent /* this hides the select's background making any styling visible from the div */;
    background-image:none;
    -webkit-appearance: none /* this is required for Webkit browsers */;
    border:none;
    box-shadow:none;
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
    font-family: arial;
    font-size: 12px;
    color:#555555;
}

.form_select:focus {
	outline: none;
}

.select_label {
    /*width:100px;*/
    float:left;
    padding-bottom: 5px;
	background-color:cccccc;
}

/*
input[type="radio"],
input[type="checkbox"] {
    position: absolute; left: -999em;
}*/

.form_label {
	font-size: 13px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color:#808080;
	line-height: 1.4;
	float:left;
	/*padding-top: 0px;*/
}

.form_checkbox {
    position: absolute; left: -999em;
}

.form_checkbox + label:before {
	content:''; /* this is generated content*/
    display: inline-block; /* make this fake elements inline block */
    position:relative; /* we need to move the element without effecting the doc flow */
    top:0px;  /* we're moving it slightly down for alignment purposes */
    left:-2px; /* we're moving it slightly to the left */
    width:25px; height:25px; /* the width and height of the fake elements */
    background-image:url("../images/formelements.png"); /* the background image sprite */
    vertical-align: middle;
}

.form_checkbox + label:before {
	background-position: 0 -25px;
}
.form_checkbox:checked + label:before {
	background-position: 0 0 ;
}

.form_radio {
	position: absolute; left: -999em;
}

.form_radio + label:before {
	content:''; /* this is generated content*/
    display: inline-block; /* make this fake elements inline block */
    position:relative; /* we need to move the element without effecting the doc flow */
    top:0.00em;  /* we're moving it slightly down for alignment purposes */
    left:-2px; /* we're moving it slightly to the left */
    width:25px; height:25px; /* the width and height of the fake elements */
    background-image:url("../images/formelements.png"); /* the background image sprite */
}

.form_radio + label:before {
	background-position: -25px -25px;
}
.form_radio:checked + label:before {
	background-position: -25px 0;
}
.map_data_button
{
	display:inline-block;
	width: 48%;
	float:left;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	margin-left: 1px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #02569a;
	cursor: pointer;
}
.map_data_button_selected
{
	display:inline-block;
	width: 48%;
	float:left;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	margin-left: 1px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #02a5da;
	cursor: pointer;
}
.map_data_button_alarmed
{
	display:inline-block;
	width: 48%;
	float:left;
	height: 25px;
	border: 0px;
	color: #ff0000;

	text-align: center;
	padding-top: 0px;
	margin-left: 1px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #02569a;
	cursor: pointer;
}
.map_data_container
{
	display:table;
	height:25px;
	width:100%;

}
.form_submit {
	width: 200px;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #02569a;
	cursor: pointer;
}


.form_submit:disabled {
	background: #B5B5B5;
	cursor: default;
}

.form_submit_inactive {
	width: 200px;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #B5B5B5;
	cursor: default;
}

.form_button_1 {
	width: 200px;
	height: 26px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	background: #02569a;
	cursor: pointer;
}

.edit_button {
    display: block;
    margin: 0 auto;
    float: left;
	width: 16px;
	height: 16px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Action-edit-icon-16x16.png) no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.edit_button_blocked {
	display: block;
    margin: 0 auto;
    float: left;
	width: 16px;
	height: 16px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Actions-dialog-cancel-icon-16x16.png) 0px 0px no-repeat;
	/*cursor: pointer;*/
	text-indent:-999px;
}

.log_button {
	display: block;
    margin: 0 auto;
    float: left;
	width: 16px;
	height: 16px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Devices-phone-icon-16x16.png) 0px 0px no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.delete_button {
	display: block;
    margin: 0 auto;
    float: left;
	width: 16px;
	height: 16px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Actions-edit-delete-icon-16x16.png) 0px 0px no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.prev_button {
	width: 24px;
	height: 24px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Actions-go-previous-view-icon-24x24.png) 0px 0px no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.next_button {
	width: 24px;
	height: 24px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Actions-go-next-view-icon-24x24.png) 0px 0px no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.add_button {
	width: 24px;
	height: 24px;
	border: 0px;
	padding-top: 0px;
	background: url(../images/icons/Add-icon-24x24.png) 0px 0px no-repeat;
	cursor: pointer;
	text-indent:-999px;
}

.graph_button {
	float: right;
	width: 32px;
	height: 32px;
	border: 1px;
	margin-left: 10px;
	background: transparent;
	cursor: pointer;
	/*text-indent:-999px;*/
}

/****************** Custom File upload ************************/

div.custom_file_upload {
	width: 320px;
	height: 20px;
	margin: 30px 0px;
	display: inline;
}

input.file {
	width: 220px;
	height: 17px;
	border: 1px solid #02569a;
	border-right: 0;
	color: #888;
	padding: 5px;

	/*
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	*/

	outline: none;
}

div.file_upload {
	width: 120px;
	height: 24px;
	background: #02569a;
	/*
	background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
	background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
	*/
	display: inline;
	position: absolute;
	overflow: hidden;
	cursor: pointer;

	/*
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	*/

	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding-top: 5px;
}
div.file_upload:before {
	content: 'Przeglądaj...';
	position: absolute;
	left: 0; right: 0;
	text-align: center;

	cursor: pointer;
}

div.file_upload input {
	position: relative;
	height: 30px;
	width: 250px;
	display: inline;
	cursor: pointer;
	opacity: 0;
}

/****************** Content ************************/

#content {
    padding-bottom: 10px;
}

.content_info_left {
	float:left;
	width: 80%;
	vertical-align: text-bottom;
}
.content_info_right {
	float:left;
	width: 20%;
	vertical-align: text-bottom; /*text-bottom*/
}

.content_info_right img {
	vertical-align: text-bottom;
}

#content_list {
	clear: both;
    padding-bottom: 40px;
}

.content_header {
    width:1200px;
    height: 25px;
    /*float:left;*/
    padding-top: 4px;
    padding-left: 20px;
	/*background-color:#e6e6e6;*/
}

#map {
	width: 1200px;
	height: 500px;
	overflow: hidden;
}

#map-canvas {
	float: left;
	width: 900px;
	height: 500px;
}
#mapas {
	float: left;
	width: 800px;
	height: 260px;
}

#map-aside {
	float: left;
	width: 300px;
	height: 500px;
}

#map-copyright
{
	font-size: 10px;
	font-family: Arial;
	white-space: nowrap;
	background-color: white;
	opacity: 0.6;
	padding-bottom: 2px;
	padding-right: 2px;
	padding-top: 1px;
	padding-left: 2px;
}


#map-data {
	/*float: left;*/
	overflow:auto;
	width: 300px;
	height: 450px;
	padding-left: 10px;
}
#map-data table{
	width:300px;
}
#map-data td{
	text-decoration:none;
	width:50%;
}
#map-data a{
	text-decoration: none;
}
#map-elevation {
	/*float: left;*/
	width: 300px;
	height: 50px;
	padding-left: 10px;
}
#WindCtrl {
	padding-top: 6px;
}

/****************** Vessel Content ************************/

#vessel_content {
    padding-bottom: 10px;
}

#vessel_content header{
	float: left;
	width: 600px;
	padding-bottom: 10px;
}

#vessel_info {
	float: left;
	padding-top: 20px;
    padding-bottom: 10px;
    width: 600px;
    /*background: #e6e6e6;*/
}

#vessel_info p{
	margin: 0px;
	font-size: 12px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.2;
	text-align:right;
}

#blue {
	color: #02569a;
}

#show_help {
	float: left;
	padding-top: 20px;
    padding-bottom: 10px;
    width: 600px;
    /*background: #e6e6e6;*/
}

/****************** Content header ************************/

#content_header {
    padding-bottom: 10px;
}

#content_header header{
	float: left;
	width: 1150px;
	padding-bottom: 10px;
}

#show_help {
	float: left;
	padding-top: 5px;
    padding-bottom: 0px;
    width: 50px;
    /*height: 22px;*/
    /*background: #e6e6e6;*/
}

/****************** Popup ************************/

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

/****************** Tooltip ************************/

.popup-help {
  /*text-transform: uppercase;
  background: #ececec;
  color: #555;*/
  cursor: help;
  /*font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;*/
  position: relative;
  text-align: center;
  /*width: 40px;*/
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.popup-help .tooltip {
  background: #1496bb;
  bottom: 190%;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 16px;
  color: #fff;
  display: block;
  left: 50%;
  margin-left: -62px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 15px;
  pointer-events: none;
  position: absolute;
 width: 100px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popup-help .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

/* CSS Triangles - see Trevor's post */
.popup-help .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px; /* #1496bb */
  bottom: -9px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.popup-help:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .popup-help .tooltip {
  display: none;
}

.lte8 .popup-help:hover .tooltip {
  display: block;
}




/****************** Tooltip for links ************************/



.popup-help-a {
	/*text-transform: uppercase;
      background: #ececec;
      color: #555;*/
	cursor: pointer;
	/*font-family: "Gill Sans", Impact, sans-serif;
      font-size: 20px;
      margin: 100px 75px 10px 75px;
      padding: 15px 20px;*/
	position: relative;
	text-align: center;
	/*width: 40px;*/
	-webkit-transform: translateZ(0); /* webkit flicker fix */
	-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.popup-help-a .tooltip-a {
	background: #1496bb;
	bottom: 190%;
	font-family: "Gill Sans", Impact, sans-serif;
	font-size: 16px;
	color: #fff;
	display: block;
	left: 50%;
	margin-left: -62px;
	margin-bottom: -15px;
	opacity: 0;
	padding: 15px;
	pointer-events: none;
	position: absolute;
	width: 100px;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;
	-ms-transition: all .25s ease-out;
	-o-transition: all .25s ease-out;
	transition: all .25s ease-out;
	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popup-help-a .tooltip-a:before {
	bottom: -20px;
	content: " ";
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 100%;
}

/* CSS Triangles - see Trevor's post */
.popup-help-a .tooltip-a:after {
	border-left: solid transparent 10px;
	border-right: solid transparent 10px;
	border-top: solid #1496bb 10px; /* #1496bb */
	bottom: -9px;
	content: " ";
	height: 0;
	left: 50%;
	margin-left: -13px;
	position: absolute;
	width: 0;
}

.popup-help-a:hover .tooltip-a {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .popup-help-a .tooltip-a {
	display: none;
}

.lte8 .popup-help-a:hover .tooltip-a {
	display: block;
}














/****************** Name ************************/

#vessel_name {
	padding-top: 0px;
    padding-bottom: 20px;
    width: 1200px;
    /*background: #e6e6e6;*/
}

#vessel_name hr {
	clear: both;
	margin: 0px;
	border: 0px;
	padding-left: 20px;
	width: 1200px;
	height: 1px;
	background: #cccccc;
}

#vessel_name p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.2;
	text-align:left;
}

#blue {
	color: #02569a;
}

#vessel_name header{
	float: left;
	width: 600px;
}

/****************** Title ************************/

#title {
	clear: both;
	padding-top: 10px;
    padding-bottom: 10px;
    /*background: #e6e6e6;*/
}

#title hr {
	margin: 0px;
	border: 0px;
	padding-left: 20px;
	width: 1200px;
	height: 1px;
	background: #02569a;
}

/****************** Last Update ************************/

#last_update {
	padding-top: 0px;
    padding-bottom: 0px;
    float: left;
    width: 600px;
    /*background: #02569a;*/
}

#last_update p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.2;
	text-align:right;
}

/****************** Content Form ************************/

#add_content {
	clear:both;
    width:1200px;
    float:left;
    padding-top: 0px;
	background-color:#ffffff;
}

#edit_room {
	clear:both;
    width:1200px;
    float:left;
    padding-top: 0px;
	background-color:#ffffff;
}

.content_form_row {
	display: table;
	clear:both;
    width:1200px;
    height: 40px;
}

.content_form_row_center {
	display: table;
	clear:both;
    width:100%;
    height: 40px;
    text-align: center;
}

.content_form_row_login {
	display: none;
}

.content_form_row_cron {
	display: none;
}

.content_form_row_modbus {
	display: none;
}

.content_form_row_exec {
	display: none;
}

#voyage_year {
	display: none;
}

#voyage_id {
	display: none;
}

#reports_date_range {
	display: none;
	padding-top: 20px;
    padding-bottom: 0px;
}

.content_form_sep {
    display: table-cell;
    /*float:left;*/
	text-align: center;
	width: 20px;
	/*background-color:#ff0000;*/
}

.content_check {
	display: table-cell;
    /*float:left;*/
	/*text-align: center;*/
	width: 200px;
}

.content_input {
	display: table-cell;
	float:left;
	vertical-align:middle;
	padding-right: 20px;
}

.content_input.ship_efficiency {
	margin-top: 12px;
}
/*
.room_blank {
	clear:both;
    width:284px;
    float:left;
    padding-top: 20px;
	background-color:cccccc;
}
.room_label {
    width:200px;
    float:left;
    padding-top: 22px;
	background-color:cccccc;
}
.room_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #000000;
	line-height: 1.4;
	text-align:right;
}
*/
.content_label {
    width:200px;
    float:left;
    padding-top: 2px;
    padding-right: 10px;
	/*background-color:cccccc;*/
}

.content_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:right;
}

.content_label.ship_class {
	width: 150px;
}

.content_label.city, .content_label.postcode {
	width: 138px;
}

.content_label.ship_efficiency {
	width: 250px;
}

.content_label.surname {
	width: 63px;
}

.content_label.email {
	width: 38px;
}

.content_label.eedi {
	width: 300px;
}

.double_content_label {
    width:850px;
    float:left;
    padding-top: 2px;
    padding-right: 10px;
	background-color:cccccc;
}

.double_content_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:right;
}

.short_content_input {
	display: table-cell;
	float:left;
	vertical-align:middle;
	padding-right: 20px;
}

.short_content_label {
    /*width:200px;*/
    float:left;
    padding-top: 2px;
    padding-right: 10px;
	background-color:cccccc;
}

.short_content_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:right;
}

.short_content_label_left {
    /*width:200px;*/
    float:left;
    padding-top: 2px;
    padding-right: 10px;
	background-color:cccccc;
}

.short_content_label_left p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:left;
}

.short_content_label_left strong{
	color: #808080;
}

.content_title {
    width:1180px;
    height: 25px;
    /*float:left;*/
    padding-top: 4px;
    padding-left: 20px;
	/*background-color:#e6e6e6;*/
}

.content_title p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #02569a;
	line-height: 1.4;
	text-align:left;
}

/****************** Data ************************/

#average_signals {
	padding-bottom: 20px;
}

.data_row {
	display: table;
	padding: 0px;
	font-size: 14px;
	width: 1200px;
	height: 90px;
}
.data_row_header {
	display: table;
	padding: 0px;
	font-size: 16px;
	font-weight: normal;
	color: #02569a;
	text-align: left;
	width: 820px;
	height: 50px;
	padding-top: 10px;
	/*background: #c8c8c8;*/
}
.data_row_sep {
	display: table;
	padding: 0px;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	width: 820px;
	height: 40px;
	/*background: #c8c8c8;*/
}
.data_col {
	display: table-cell;
	font-size: 14px;
	text-align: left;
	color: #02569a;
	width: 240px;
	height: 90px;
	padding-left: 0px; /*20*/
	vertical-align:middle;
}
.data_sep {
	display: table-cell;
	text-align: center;
	width: 20px;
}

.data_value {
	display: table-cell;
	font-size: 24px;
	text-align: center;
	font-weight: bold;
	color: #808080; /*#808080*/
	width: 170px;
	height: 60px;
	padding-left: 0px;/*25*/
	vertical-align:middle;
	background: #ffffff;
	border: 1px solid #e6e6e6;
}
.data_unit{
	display: table-cell;
	font-size: 16px;
	text-align: center;
	font-weight: normal;
	color: #02569a;
	width: 70px;
	height: 60px;
	vertical-align:middle;
	background: #ffffff;
	border-right: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
}

/****************** Date Range Form ************************/

#date_range {
	padding-top: 20px;
    padding-bottom: 0px;
}

.date_range_form_row {
	display: table;
	clear:both;
    width:1200px;
    height: 40px;
}

.date_range_form_sep {
    display: table-cell;
	text-align: center;
	width: 20px;
}

.date_range_input {
	display: table-cell;
	float:left;
	vertical-align:middle;
}

.date_range_label {
    width:50px;
    float:left;
    padding-top: 2px;
    padding-right: 10px;
	background-color:cccccc;
}

.date_range_label p{
	margin: 0px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:right;
}

/****************** Tooltip ************************/

.wrapper {
  /*text-transform: uppercase;
  background: #ececec;
  color: #555;*/
  background-color:#02569a;
  cursor: help;
  /*font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;*/
  position: relative;
  /*text-align: center;*/
  /*width: 40px;*/
  /*-webkit-transform: translateZ(0); /* webkit flicker fix */
  /*-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 16px;
  color: #fff;
  display: block;
  left: 50%;
  margin-left: -112px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 15px;
  pointer-events: none;
  position: absolute;
 width: 200px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -9px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}


/****************** Popup ************************/

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

/****************** Footer input ************************/

.footer_label {
	width: 120px;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	font-family: Arial, Tahoma, Times New Roman;
	color: #808080;
	line-height: 1.4;
	text-align:right;
	float:left;
	padding-top: 2px;
}

.footer_input {
	/*width: 220px;*/
	padding:5px;
	border: 1px solid #808080;
	/*font-size:10px;*/
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}

.footer_input:focus {
	outline: none;
}

.footer_submit {
	width: 200px;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	background: #808080;
	cursor: pointer;
}

/****************** Footer ************************/

.footer {
	position: absolute;
	clear: both;
	left: 0px;
	width: 100%;
	margin-top: 40px;
}
@media print{
	.footer{
		display: none ;
	}
}

.footer_wrap {
	padding: 10px;
	background-color: #ffffff;
	font-size: 16px;
	/*box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);*/
}

.footer_wrap.style1 {
	clear: both;
	padding: 25px;
	background-image: none;
	background-color: #ffffff;
	border-top: 1px solid #808080;
}

.footer_wrap.style1 img {
	/*padding-top: 40px;
	color: #2d8cdf;*/
	text-align: center;
}

.footer_wrap.style2 {
	clear: both;
	background-image: none;
	background-color: #2d2d2d;
	border-top: 0px solid #808080;
}

.footer_wrap.style2 h2 {
	padding-top: 40px;
	color: #000000;
	text-align: center;
}

.footer_wrap.style3 {
	clear: both;
	background-image: none;
	background-color: #000000;
}

.footer_wrap.style3 footer {
	margin: 0px auto;
	width: 1200px;
	font-family: Helvetica, Tahoma, Arial;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	text-align: right;
	color: #ffffff;
	padding: 0px;
}

.footer_wrap.style3 footer p {
	margin: 0px;
	padding: 0px;
	font-weight:normal;
}



.footer_systems {
	margin: 0 auto;
	width: 1200px;
	text-align: center;
}

.footer_box {
	margin: 0 auto;
	max-width: 240px;
	float: left;
	/*background-color: #ccc;*/
	border: 0px solid #808080;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer_box img {
	margin: 0px;
	max-width: 30%;

}

.footer_box h2 {
	margin: 0px;
	font-family: Tahoma, Arial;
	font-size: 14px;
	font-weight:normal;
	text-decoration: none;
	/*line-height: 1.4;*/
	text-align:center;
	color: #000000;
}

.footer_box p {
	margin: 0px;
	font-family: Tahoma, Arial;
	font-size: 13px;
	text-decoration: none;
	/*line-height: 1.0;*/
	text-align:center;
	color: #808080;
}

.footer_box a {
	margin: 0px;
	text-decoration: none;
}


.footer_info {
	margin: 0 auto;
	width: 1200px;
	font-family: Helvetica, Tahoma, Arial;
	font-size: 16px;
	font-weight:normal;
	text-decoration: none;
	text-align: left;
}

.footer_info h3 {
	margin: 0px;
	font-size: 16px;
	color: #bbbbbb;
	padding-top: 20px;
}

.footer_info p {
	margin: 0px;
	font-size: 14px;
	color: #999999;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer_info a {
	margin: 0px;
	text-decoration: none;
	color: #bbbbbb;
}



/*
footer {
	position: absolute;
	clear: both;
	left: 0;
	width: 100%;
	background: #e6e6e6;
}

	footer div {
		display: table;
		margin: 0 auto;
		padding: 5px 0;
		width: 1200px;
		color: #777;
	}

		footer div section {
			display: table-cell;
		}

		footer div #quick_message {
			font: 10px Arial, sans-serif;
		}

		footer div #contact {
			line-height: 18px;
			font: 12px Arial, sans-serif;
		}

		footer div #copyright {
			font: 10px Arial, sans-serif;
			text-align: right;
			line-height: 15px;
			color: #818181;
		}

	footer h3 {
		color: #818181;
	}

	footer a {
		color: #999;
		text-decoration: none;
	}

		footer a:hover {
			color: #FFF;
			text-decoration: none;
		}

	footer ul {
		margin: 0 0 0 40px;
		list-style: square;
		color: #565656;
	}

		footer ul li a {
			display: block;
		}
*/



.highcharts-contextbutton
{
	x:-110px;
}
.highcharts-contextmenu{

	width: 200px;}

.popup-modal-dismiss, .popup-modal-dismiss3
{
	min-width: 70px;
	text-align:center;
	color: #FFFFFF;
	background-color:#02569a;
	text-decoration: none;
	display:inline-block;
}

.popup-modal-dismiss2, .popup-modal-dismiss4
{
	min-width: 70px;
	text-align:center;
	color: #FFFFFF;
	background-color:#02569a;
	text-decoration: none;
	display:inline-block;
	float: right;
}

/* USER GRAPHS  */
.populate_graph
{
	display: inline-block;
	align-content: center;
	width: 0px;
	height: 0px;
}

.chart1_user
{

	height: 0px;
	margin: auto;
	float:left;

}

.graphs_list
{
	width: 25%;
	float:left;
	height:600px;
}

/* Fleet groups */
.left_side_help
 {
	 float:left;
	 width:25%;


 }
.left_side_help hr
{
	margin: 0px;
	border: 0px;
	padding-left: 20px;

	width: 85%;
	height: 1px;
	background: #e6e6e6;
}
.left_side_help_group
{

	height: 230px;
	overflow-y: auto;


}
.right_side_data
{
	float:left;
	width:75%;


}
.right_side_table
{
	table-layout: auto;
	width:100%;
	border: 1px;

}
.right_side_table td
{
	min-width: 70px;
	padding:4px;
}
.right_side_table th
{
	min-width: 40px;
	padding:4px;
}

.right_side_table a
{
	text-decoration: none;
	color:#808080;
}
.right_side_table a:hover
{
	text-decoration: none;
	color:#000000;
}
.right_side_table_text_button {
	margin-left: 5px;
	margin-right:5px;
	width: 100px;
	height: 25px;
	border: 0px;
	color: #ffffff;
	text-align: center;
	padding-top: 0px;
	font-family: arial;
	font-size: 12px;
	font-weight: bold;
	/*background: url(../images/kontakt_button.png) 0px 0px no-repeat;*/
	background: #02569a;
	cursor: pointer;
}

.right_side_table_text_button:disabled {
	background: #cccccc;
	cursor: default;
}
.right_side_table_form_input {
	width: 100px;
	padding:5px;
	border: 1px solid #02569a;
	/*font-size:10px;*/
	color:#808080;
	font-family: arial;
	font-size: 12px;
	background: #ffffff;
}

.right_side_table_form_input:focus {
	outline: none;
	/*outline: 1px dashed #000;*/
}
#ship1
{
	color:#000000
}
#ship2
{
	color:#FF0000
}
#ship3
{
	color:#00FF00
}
#ship4
{
	color:#0000FF
}

#table_container
{
	width:100%;
	display: block;
	position: relative;
	margin-top: 10px;
	max-width: 1200px;
	//height: 600px;
	overflow-x:scroll;
	//overflow-y: visible;
}



ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;

	position: relative;
	clear: both;
	width: 1200px;
	height: 30px;
	background-color:#ffffff; /* #0093dd */
	border-bottom: 1px solid #e6e6e6;
}
ul.tabs li{
	background: none;
	//color: #222;
	display: inline-block;
	padding: 0 20px;
	cursor: pointer;
	float: left;

	//display: block;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #02569a;
}

ul.tabs li.current{
	color: #000000;
	/*background-color:#e6e6e6;*/
	border-top: 1px solid #e6e6e6;
	border-left: 1px solid #e6e6e6;
	border-right: 1px solid #e6e6e6;
	background-color: #ffffff;
}

.tab-content{
	display: none;
//	background: #ededed;
	padding: 15px;
}

.tab-content.current{
	display: inherit;
}

input[type="text"]:disabled {
	border-color: #cccccc;
	cursor: default;
}
