@charset "utf-8";
/* CSS Document */
/* Need to hold picture down in 1st width mobile (500 - 700px)
	margin-left: auto;
	margin-right: auto;
	max-width:500px; */
/* Begin Homepage CSS */
.pageContent {  /* Used in most web pages as Container for all Page Content with Gray BG  */
	padding: 0;
	background-color:#fff;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border:0px;}
.pageWhite { /* Provides white background for content of most pages  */
	padding: .25em 1em 1em 0;
	border:0px solid #777;}
H1{
	width:100%;
	margin:0 0 .25em 0;
	padding: 0;
  color: #3b678a; 
  text-transform :uppercase;
  font-size: 1em;}
.doubleCol {visibility:visible; display:inline;}
.singleCol {visibility:hidden; display:none;}
.wrapLeft {
	clear: both;
	float: left;
	width: 68%;}
.wrapRight {
	float: right;
	width: 31%;}
.imageDivider {
	display: block;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	max-width:90%;}
#HPShip {
	float: left;
	width: 100%;
	border:0;
	max-width:515px;}
#HPNews {
	clear:both;
	float:left;
	width:100%;
 	padding:.5em 0;
	max-width:515px;}
#podGCT {
	clear: both;
	width: 246px;
	margin:.25em auto 0 auto;
	z-index:1;} 
#podGCT img {
	z-index:1}
#podGCT p {text-align:center;}
#podGCT a {text-decoration:none; color: #3b678a;}
.image-GCTMap {
	clear:both;
	display: block;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:.25em;
	max-width:100%;}
.GCTButton {
	padding: .5em .5em .7em .5em;
	margin: 0 1em 0 0;
	height: 27px;
	background-image: url(http://www.kline.com/images/homepage/GCT-Buttons.gif);
	background-repeat: no-repeat;  
	font-size: .8em;
	color:#fff;
	border:0;}
#Apps {
	display:block;
	position:relative;
	width: 246px;
	margin:.25em auto 0 auto;
	font-size: 1em;}
.imageApps {
	display:block;
	position:relative;
	margin-bottom:.15em;
	width:246px;
	height:30px;
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Off.gif);
	background-repeat: no-repeat;  
	font-size:.97em;
	text-decoration:none;}
a.imageApps {padding-left:.5em; padding-top:.5em;}
a.imageApps:hover {
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Hover.gif);
	background-repeat: no-repeat;  }
/*   Style for Application Popups   */
.imageAppsDrop {
	display: block;
	position:relative;
	margin-bottom:.25em;
	width:	246px;
	height: 35px;
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Off);
	background-repeat: no-repeat;  
	font-size: .97em;}
li.imageAppsDrop {padding: 0 0 .1em .5em;}
a.imageAppsDrop {
	display: block;
	position:relative;
	padding: .5em 0 .1em .5em;
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Hover.gif);
	background-repeat: no-repeat;  
	font-size: .97em;
	text-decoration: none;}
a.imageAppsDrop:hover {
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Hover.gif);
	background-repeat: no-repeat;}
a.extendDrop {
	display:block;
	position:relative;
	margin-bottom:.15em;
	width:246px;
	height:30px;
	font-size:.97em;
	text-decoration:none;
	padding:.5em 0 0 .5em;}
a.extendDrop:hover, a.extendDrop:active, a.extendDrop:focus {
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Hover.gif);
	background-repeat: no-repeat;  }
li:last-of-type {margin-bottom:0;}
/*   Style for application bar popups  */
ul.pageSub{
	position:relative;
	display:block;
	width:246px;
	background-image: url(http://www.kline.com/images/homepage/Apps-Bar-Multi-Color-Off.gif);
	background-repeat: no-repeat;  
	float:left;}
ul.pageSub,ul#pageSub ul{  /*  background of entire list attributes  */
	margin-left:0;
	list-style:none;
	padding:0;}
ul.pageSub ul{              /* Positioning for 1st level sub menus, outside border sub menu listing */
	visibility:hidden;
	position:absolute;
	left:25%;
	top:1.5em;
	background-color:#b2c5dc;
	padding:0;
	line-height:1.25em;
 }
ul.pageSub li:hover>ul{
	visibility:visible;
	opacity:1;  /*  Fully visible */
	-webkit-transition-delay:0s; /*   delay: time to appear fully */
	-moz-transition-delay:0s;
	-ms-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;}
ul.pageSub li{
	display:block;
	position:relative;
	white-space:nowrap;}
ul.pageSub li li{
	margin:0;
	padding:.5em;
	background-color: b2c5dc;
	background-image: -webkit-gradient(linear, left top, right top, from(#8f9eb1), color-stop(0.25, #b2c5dc), color-stop(0.5, #c1d3ea), color-stop(0.75, #b2c5dc), to(#8f9eb1));
	background-image: -webkit-linear-gradient(top, #8f9eb1, #b2c5dc, #c1d3ea, #b2c5dc, #8f9eb1);
	background-image: -ms-linear-gradient(top, #8f9eb1, #b2c5dc, #c1d3ea, #b2c5dc, #8f9eb1);
	background-image: -o-linear-gradient(top, #8f9eb1, #b2c5dc, #c1d3ea, #b2c5dc, #8f9eb1);	
	background-image: -moz-linear-gradient(top, #8f9eb1, #b2c5dc, #c1d3ea, #b2c5dc, #8f9eb1);
	border:1px solid #777;
	z-index:999;
}
ul.pageSub li li:hover {
	background-color:#ccc;
	background-image: -webkit-gradient(linear, left top, right top, from(#aaaaaa), color-stop(0.25, #cccccc), color-stop(0.5, #eeeeee), color-stop(0.75, #cccccc), to(#aaaaaa));
	background-image: -webkit-linear-gradient(top, #aaaaaa, #cccccc, #eeeeee, #cccccc, #aaaaaa);
	background-image: -ms-linear-gradient(top, #aaaaaa, #cccccc, #eeeeee, #cccccc, #aaaaaa);
	background-image: -o-linear-gradient(top, #aaaaaa, #cccccc, #eeeeee, #cccccc, #aaaaaa);
	background-image: -moz-linear-gradient(top, #aaaaaa, #cccccc, #eeeeee, #cccccc, #aaaaaa);
  background-repeat: repeat-x;
  border-right: 1px solid #777;}
}
ul.pageSub li:hover>ul{
	visibility:visible;
	opacity:1;  /*  Fully visible */
	-webkit-transition-delay:0s; /*   delay: time to appear fully */
	-moz-transition-delay:0s;
	-ms-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
	}
ul.pageSub li:active, ul#pageSub li:focus{
	outline-style:none;}
ul.pageSub li li:a{
	display:block;
	vertical-align:middle;
	margin-left: .5em;
	padding: 0 .25em 0 0;
	text-align:left;
	text-decoration:none;
	}
ul.pageSub a:hover,ul#pageSub a.pressed{ /* Affects all LI's every level  */
	color:#000090;}
/* END  Style for CarCar RoRO Schedule Popups  */
#advisoryMsgs {  /* Used for Homepage Advisories and Announcements Scroll Box  */
	clear: none;
	padding: 0;
	float: left;
	margin-left:.25em;
	width: 100%;
	Overflow: auto;}
ul#arrowList { 
	list-style-image: url(http://www.kline.com/images/arrows-sm.gif); 
	margin-bottom: 0;
	margin-left:1.15em;}
#specMsg{
	clear:both;
	display:block;
  position:relative;
	margin-left: auto;
	margin-right:auto;
  left:0.00%;
  width:95%;
  overflow:hidden;
	text-align:left;}
.errormsg {
    COLOR: #0000FF;
    FONT-WEIGHT: bold;
		FONT-FAMILY:Verdana,Arial,Helvetica,Sans-Serif;}
.fields {
	font-size: 10pt;
	background-color: #FFFFFF;
	border-color: #CCCCCC;}
html {-webkit-text-size-adjust: 100%;}
.smallMenu {visibility:hideen; display:none;}
.lgeMenu {visibility:visible; display:inline;}
@media screen and (min-width: 550px){
#advisoryMsgs {
	height:195px;
	Overflow-y:scroll;
	Overflow-x:hidden;}
#HPShip {
	float:left;
	width:100%;
	padding:.25em;
	border:0;}
.shipShowLg {visibility:visible; display:inline;}
.shipShowMd {visibility:hidden; display:none;}
.hpNewsLeftDIV {visibility:visible; display:block;}
.hpNewsFullDIV {visibility:hidden; display:none;}
#HPNews {
	clear: none;}
.image-center {
	position: relative;
	z-index: auto;}
.fieldText {
  FONT-WEIGHT: normal;
  FONT-SIZE: .9em;
	background-color: #eeeeee;
	width: 85%;}
textarea {
	resize: none;
	overflow: auto;}
.instruct {
  display: block;
	FONT-SIZE: .8em;
	padding: 2%;
	text-algin: left;
	color: #777777;}
.GCTButton {
	padding: .5em .5em .7em .5em;
	margin: 0 1em 0 0;
	height: 27px;
	background-image: url(http://www.kline.com/images/homepage/GCT-Buttons.gif);
	background-repeat: no-repeat;  
	font-size: .8em;
	color:#fff;
	border:0;}
.GCTButton:hover {
	background-image: url(http://www.kline.com/images/homepage/GCT-Buttons-Hover.gif);
	background-repeat: no-repeat;  
	color:#000;}
#specMsg {
	clear:both;
	display:none;
	margin:0 .5em;
  position:relative;
  float:left;
  overflow:hidden;
  left:0.00%;
  width:98%;
	text-align:left;}
}