@import url('opensans.css');

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body
{
    background-color: #fff;
    font-size: .85em;
    font-family: 'Open Sans';
    font-weight: 500;
    color: #333;
	text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

a, a:visited, a:link
{
	color: #000000;
	text-decoration: none;
}

a:hover
{
	color : #5eb5e1;
}

p
{
    margin-bottom: 20px;
    line-height: 1.3em;
}

a img
{
	border : 0px solid #000000;
}

hr
{
    border-top: 1px solid #ccc;
    border-right: 0px solid #000;    
    border-bottom: 0px solid #000;    
    border-left: 0px solid #000;    
    margin: 10px 0 10px 0;
    padding: 0px;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h1 a, h1 a:visited, h1 a:active, h1 a:hover
{
	font-family: 'Open Sans';
	font-size: 1.4em;
	text-decoration: none;
	padding-bottom : 15px;
}

h2, h2 a, h2 a:visited, h2 a:active, h2 a:hover, .touchChooseTD, .kvhPPS
{
	font-size: 1.2em;
	font-weight: 700;
	font-family: 'Open Sans';
	text-decoration: none;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

h3, h3 a, h3 a:visited, h3 a:active, h3 a:hover
{
    font-size: 1.1em;
	font-weight: 700;
	font-family: 'Open Sans';
	text-decoration: none;
	margin: 15px 0 8px 0;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */

#footer, #subFooter
{
    padding: 0;
    text-align: right;
    line-height: normal;
    margin: 0;
    clear: both;
    font-size: 8px;
}

#footer
{
    padding: 10px 0;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

input, textarea 
{
    border: 0px solid #CCC;
    background : #f2f2f2;
    color: #333;
    padding: 4px;
    font-family: 'Open Sans';
}

.trOdd input, .trOdd textarea {
    background : #fff;
}

textarea 
{
    font-family: 'Open Sans';    
    font-size: .95em;
}

input[type="submit"], input[type="image"], .submitLink
{
    font-family: 'Open Sans';
    border : 0px solid #ffffff;
    font-weight : bold;    
    color: #000000;
    vertical-align: middle; 
    margin: 0 0 2px 0;
    background-color: transparent;
}

input[type="checkbox"], input[type="radio"]
{
    border: 0px solid white;       
    background-color:Transparent;
}

.submitLinkLegend
{
    font-family: 'Open Sans';
    font-weight : bold;    
    color: #000000;
    padding-right: 10px;
}

input.file
{
    border: 0px solid #fff;
    background-color: Transparent;    
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 0px #e8eef4;
}

table td 
{
  border: solid 0px #e8eef4;
}

td img, th img
{
	vertical-align: middle;	
    margin: 0 0 2px 0;
}

#selectedParamaterBox td, #selectedParamaterBox th,
#selectedArticleBox td, #selectedArticleBox th,
#additionalArticleInfoBox td, #additionalArticleInfoBox th,
#selectedOrderBox td, #selectedOrderBox th,
#selectedCustomerBox td, #selectedCustomerBox th,
#selectedContractBox td, #selectedContractBox th,
#selectedSupplierBox td, #selectedSupplierBox th
{
  padding: 8px 8px 8px 8px;   
}

.trEven td
{
	background-color: #fff;
	border : 0px solid #ccc;
	text-align: center;
	vertical-align: middle;
}

.trOdd, .trEven
{
	vertical-align: top;    
}

.trOdd td
{
	background-color: #efefef;
	border : 0px solid #ccc;
	text-align: center;
	vertical-align: middle;
}

.trHighlight td
{
    background-color: #5eb5e1;
}

.headerRows
{
    width: 620px;
    border: 0px solid #fff;
    border-bottom: 1px solid #ccc;
}

table th
{
    /*background-image: url(/Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    color : #fff;
    width: 100%;
    text-align: center;
}

#systemStatusErrorTable th
{
    background-image: url(/Content/Images/tr_back_red.gif);
    background-repeat: repeat-x;
    /*background-color: #f8a600;*/
    color : #fff;
    width: 100%;
    text-align: center;    
}

.tableForm
{
    
}

#canvas-holder1 {
        width: 300px;
        margin: 20px auto;
    }
#canvas-holder2 {
    width: 100%;
}
#chartjs-tooltip {
    opacity: 1;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 3px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.chartjs-tooltip-key{
   	display:inline-block;
   	width:10px;
   	height:10px;
}

/* MISC  
----------------------------------------------------------*/

#mainContainer, #mainContainerVertical
{
    width: 1294px;   
    margin: 0 auto; 
}

#printContainer
{
    width: 790px;   
    margin: 0 auto; 
}

#contentContainer
{
    min-height: 570px;
    width: 1200px;
    margin: 10px 0 0 0;
}

#header
{
    text-align: left;   
    margin : 10px auto; 
    margin-bottom: 10px;
    height: 50px;
}

#showHeader
{
    background-image: url(../../Content/Images/showHeader.png);
    background-repeat: no-repeat;
    width: 270px;
    height: 28px;
    position: absolute;
    margin: -10px 0 0 890px;
    z-index: 200;
    padding: 2px 0 0 10px;
    cursor: pointer;
}

#headerPrint
{   
    width: 900px;
    text-align: left;   
    margin : 20px auto; 
    margin-bottom: 20px;
}

#header ul, #headerPrint ul
{
    padding: 0;
    margin: 0;
    line-height: 1em;    
    font-size: .9em;
}

#header li, #headerPrint li
{
    /*display: inline; */
    list-style: none;
    padding: 4px 25px 8px 25px;
}

#header li a
{
	color: #747474;    
}

#header li a:hover, #sysParamterMenu li a:hover
{
	color: #5eb5e1;    
}

#headerPrint li a
{
    color: #fff;
}

#headerPrint li a:hover
{
	color: #fff;    
}

#footer, #additionalInfoView, #detailInformationView
{
    margin : 40px 0 0 0;
}

.errors li
{
    color: #e20513;
	font-size: .8em;
	font-weight: 600;
	list-style-image: url(../../Content/Images/info.png);
	vertical-align: middle;   
}

.errors
{
    padding: 0 0 0 30px;   
}

.loginTBL
{
    margin: 25px 0;    
}


#ajaxGraphics
{    
    text-align: right;
    margin: 66px 0 0 110px;
    position: absolute;
    width: 1124px;
}
    
.logout
{
    text-align: right;
    margin: 44px 2px 0 51px;
    font-weight: 600; 
    font-size: 9px;
    position: absolute;
    width: 1122px;
}

#login
{
    float: left;    
    width: 680px;  
    padding-top: 60px;
}

#menu
{
    float: left;
    position: absolute;
    z-index: 100;
    color: #747474;  
}

#menu ul
{
    padding: 8px 0 0 0;
}

#logo
{
    text-align: right; 
    float: right; 
    height: 25px;
    width: 1294px;
    position: absolute;
}

#loginName
{
    text-align: right; 
    clear: both;    
}

.dContainer, .sdContainer
{
    width: 184px;
    margin: 0;   
    min-height: 900px;
    float: left;
}

.dContainerTD
{
    width: 550px;
    margin: 0;  
}

.sdContainer
{
    width: 550px;
}

.sdContainerTD
{
    width: 548px;
    margin: 0;  
}

.infoContainerTD
{
    width: 518px;
    margin: 0;  
}

.weekDropDiv
{
    width: 100px;
    font-weight: 600;
    float: left;
    padding: 8px 2px 8px 2px; 
    margin: 7px 2px 4px 2px;
}

.inactiveDrop
{
    background-color: #efefef; 
    background-image: none;
    color: #cccccc;
    width: 100px;    
    padding: 8px 2px 8px 2px; 
    margin: 7px 2px 4px 2px;
}

.onlyScreenDisplay
{ }

.onlyPrintDisplay
{
    display: none;
}

.label
{
    font-size: .9em;
	background-color: transparent;
	border : 0px solid #fff;
	text-align: left;
	padding: 2px;
	margin: 0;
}

.labelSmall
{
    font-size: .9em;
	background-color: transparent;
	border : 0px solid #fff;
	text-align: left;
	padding: 2px 2px 0 2px;
	margin: 0;
}

.tableForm tr
{
    padding: 0px;
    margin: 0px;
}

#parameterInfoBackground
{
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    width: 100%; 
    height: 400%; 
    background-color: #111; 
    opacity: .6;
    filter:alpha(opacity=60);
}

#parameterInfo
{
    display: none;
    position: fixed; 
    z-index: 200; 
    top: 140px;
    margin: 0 235px 0 0;
    padding: 10px 35px 25px 35px; 
    width: 1205px; 
    height: 598px; 
    background-color: #fff;  
}

#parameterInfoContentBox
{
    width: 1200px; 
    height: 590px;
    margin: 20px auto; 
    overflow: auto;
}
    
#parameterInfoContent h3
{
    margin-bottom: 15px;
}

.small
{
    font-size: .9em;  
}

.commentary
{
    color: #000;
}

.red
{
    font-weight: 600;
    color: #e20513;    
}

.grey
{
    color: #bcbcbc;    
}

.inactiveType, .inactiveShipType
{
    /*background-image: url(../../Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.systemStatusError
{
    background-image: url(../../Content/Images/tr_back_red.gif);
    background-repeat: repeat-x;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.clearWeekHeaderBox
{
    background: none;
    width: 78px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
}

.inactivePos
{
    /*background-image: url(../../Content/Images/tr_back_grey.gif);
    background-repeat: repeat-x;*/
    background-color: #A9A9A9;
    width: 155px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
    color: #fff;
}

.activePos
{
    /*background-image: url(../../Content/Images/tr_back.gif);
    background-repeat: repeat-x;*/
    background-color: #1483C7;
    width: 155px;
    font-weight: 600;
    text-align: center;
    float: left; 
    padding: 8px 2px 8px 2px; 
    margin: 4px 2px 4px 2px;
    color: #fff;
}

#sysParameterMenu li
{
    list-style: none;
    padding: 5px 0 5px 0;
    font-weight: 600;    
}

#sysParameterMenu
{
    margin: 15px 0; 
    padding: 0;
}

/*########## Billing ##############*/

#address
{
	height:	100px;
	width: 420px;
	float: left;
	margin: 20px 0 35px 15px;
	padding: 5px;
}

#guideAddress
{
	height: 100px;
	width: 250px;
	margin: 80px 0 35px 540px;
	padding: 5px;
	text-align: center;
	font-size: 1.15em;
}

#billingLogo
{
	height: 120px;
	width: 440px;
	float: left;
	text-align: right;
	vertical-align: top;
	padding: 0;
	margin: 0 0 0 200px;
}

#guideLogo
{
	height: 120px;
	width: 400px;
	float: left;
	text-align: left;
	vertical-align: top;
	padding: 0;
	margin: -60px 0;
}

#billingContent
{
	clear: both;
	width: 800px;
	margin: 300px 15px 0 15px;
	padding-top: 45px;
	font-size: 1em;
}

#billingContent table
{
	 border-collapse: collapse;
	 width: 100%;
	 line-height: 1.4em;
}


.replaceable
{
	min-height: 730px;
	width: 174px;
	background-color: #ddd;
	margin: 64px 0 0 4px;
	position: absolute;
	z-index: 8000;
	opacity: .6;
    filter:alpha(opacity=60);
	text-align: center;
	padding: 10px 0 0 0;
	font-size: .85em;
	font-weight: 600;
}

.removable
{
	height: 50px;
	width: 178px;
	background-color: #0082d2;
	color: #000;
	margin: 0;
	position: absolute;
	z-index: 8500;
	opacity: .6;
    filter:alpha(opacity=60);
	text-align: center;
	padding: 10px 0 0 0;
	font-size: .85em;
	font-weight: 600;
}

.lineseparator
{
	min-height: 800px;
	width: 5px;
	background-color: #0082d2;
	color: #000;
	margin: -10px 0 0 -5px;
	position: absolute;
	z-index: 8500;
	opacity: .6;
    filter:alpha(opacity=60);
	font-size: .85em;
	font-weight: 600;
}

.customerComment, .bookingComment
{ }

#showTotalListBox
{
    background-color: #fff; 
    width: 460px; 
    position: fixed; 
    margin: 110px 0 0 540px; 
    border: 1px solid #ccc;
}

#showTotalListBox h3
{
    margin-left: 20px;    
}

#showTotalListBox ul
{
    padding: 0;
    margin: 10px 0px 10px 20px;    
}

#showTotalListBox li
{
    list-style-type: none;
    padding: 4px;
    margin: 0 0 4px 0;    
}

.activeLi
{    
    background-color: #5eb5e1;   
}

.level{
	width: auto;
}

.level_1{
	margin: 5px 0px 6px 0px;
}

.level_2{
	margin: 5px 0px 6px 37px;
	display: none;
}

.level_3{
	margin: 5px 0px 6px 74px;
	display: none;
}

.scrollLevel{
	margin: 0 0 0 5px;
	float: left;
	cursor: pointer;
}

p {
	font-size: 1.2em;
	padding: 1px 0 1px 10px;
	width: auto;
	/*height: 30px;*/
	vertical-align: middle;
	display: table-cell;
	font-size: .9em;
}

p.article{
	font-size: 1.2em;
	width: auto;
	padding-left: 0px;
	/*height: 30px;*/
	vertical-align: middle;
	display: table-cell;
	font-size: .9em;
}

div.article{
	display: none;
	width: auto;
	/*height: 30px;*/
}

div.article_1{
	margin: 5px 20px 5px 33px;
	padding: 4px 0 4px 4px;
} 

div.article_2{
	margin: 5px 20px 5px 71px;
	padding: 4px 0 4px 4px;
}

div.article_3{
	margin: 5px 20px 5px 108px;
	padding: 4px 0 4px 4px;
}

.groupSel
{
}

.treeBox
{
	height: auto;
	max-height: 400px;
	overflow-y: auto;    
}

.totalBox
{    
	height: auto;
	max-height: 400px;
	overflow-y: auto;  
}

.expressBG
{
    background-color: #fd2702;    
}

.expressColor
{
    color: #fd2702;    
}

.customerAddressBox
{
    float: left; 
    width: 220px; 
    margin: 0 10px 0 0; 
    line-height: 1.3em;
    padding: 8px;
    cursor: pointer;
    min-height: 150px;
}