body {	font-family: "Segoe UI", Arial, Helvetica, sans-serif; background-color:#ffffff;font-size:11px; color:Black; text-align:justify;margin:0;padding:0}
a:hover { text-decoration: none; }

h1 { font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	text-transform: uppercase; }
h2 { font-size: 14px; }
h2.bigger {	font-size: 18px; }
h3 { margin: 0px;padding: 0px;font-size: 11px}

#logindisplay { float:right;font-size: 1.0em;display: block;text-align: right;margin: 10px 0 10px 0;color: Black;}
#logindisplay ul { margin: 0px;padding: 0px;list-style: none;	text-align: center;}
#logindisplay li { display: inline;}
a img {border:none}
a:link, a:visited { color: Black;text-decoration:underline }
p {margin:10px 0 5px 0}
span.strike {text-decoration: line-through}

/* IE8 hack to get it to apply margin auto centering to element inside this one */
#wrap {width:100%}

/* Header */
#header {padding:0px 0 12px 0;height:35px;border-bottom: 1px solid #EF7500}
#header #logo {width:96%;margin:0 auto;padding:0}
#header img.logo {margin-top:0px}
#header #logo #lang {width:100px;float:right;height:35px;margin-right:60px}

/* Content Area */
#main {width:96%;margin:0 auto;clear:both}

#content {width:100%;float:left;padding:10px 0 10px 0}

#content pre {font-family:Verdana, Arial, sans-serif;margin:15px 0 15px 0;line-height:0.9em;font-size:0.9em;color:#010ACE}
#content #list {width:200px;float:left}

/* Sidebar */
#sidebar {width:250px ;float:right;padding:30px 5px 25px 10px}
#sidebar ul {list-style:none}
#sidebar h2  {font-size:1.2em;margin:25px 0 12px 0;color:#7A0A17}
#sidebar img {margin-right:3px}
#sidebar form {padding:5px 0 10px 0;text-align:center}

/* Footer */
#footer {background: #444444 repeat-x;color:#ffffff;font-size:11px;font-family:Verdana, Arial, sans-serif}
#footer a {padding: 0px 10px;color:#ffffff;text-decoration:underline}
#footer p {margin:0 0 5px 0}

#footer p.axe img {margin-bottom:-7px}
#foot {width:900px;margin:0 auto;height:25px;line-height:1.1em;padding:0 10px 0 10px}
#foot #left {width:900px;float:left;padding-top:5px}
#foot #right {width:250px;float:right;text-align:right;padding-top:10px}
#footer ul { margin: 0px;padding: 0px;list-style: none;	text-align: center;}
#footer li { display: inline;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
.clearfix {display: inline-block}
* html .clearfix {height: 1%}
.clearfix {display: block}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error, .error { color: #ff0000;}
.field-validation-valid { display: none; }

.input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; }

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}
 
.valid { }

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.editor, .editorLogon, .editorWide
{
    margin: 0.6em 0 0 0;
}

.editor label, .editorLogon label, .editorWide label { 
  float: left; 
  width: 160px; 
  text-align: right;
  margin-top: 5px
} 

.editorLogon label {
    width: 80px
}

.editorWide label {
    width: 320px
    
}

.RadioButton
{
    padding-top: 1px;
    margin-left:160px;
}

.RadioButton label 
{
    margin-left: 4px;
    float:none;
    width:200px;
    vertical-align: top
}
 
.editor select,.editorWide select { 
  width: 80px;
  margin: 0 0 0 10px;
} 

.editor input, .editorLogon input, .editorWide input { 
  margin: 0 0 0 10px;
} 

.editor input[type="checkbox"], .editorWide input[type="checkbox"] { 
  margin: 5px 0 0 10px;
} 

.CheckBoxList 
{
    margin-left:160px
}

.CheckBoxList input[type="checkbox"] { 
  margin: 5px 0 0 10px;
} 

.CheckBoxList label 
{
    margin-left: 4px;
    margin-right: 50px;
} 

.editorWide textarea, .editor textarea { 
  margin: 0 0 0 10px;width:750px;height:100px
}

.editor .TextAreaFixed 
{
    margin: 0 0 0 10px;width:750px;height:100px
}

.editorWide .TextAreaFixed 
{
    margin: 0 0 0 10px;width:500px;height:100px
}


.editor .MessageBody
{
    margin:0 0 0 10px; width:750px;height:80px
} 

.display-field, 
.editor-field {
    margin: 0.25em 0 0 0;
}

.tri-state {    width: 6em;
}


/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%}
#wrap {min-height: 100%}
#main {overflow:auto; padding-bottom: 25px;}  /* must be same height as the footer */
#footer {position: relative; margin-top: -25px; /* negative value of footer height */ height: 25px;clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

.leftDiv { float:left;margin-right:10px}
.rightDiv { float:right;font-size: 1.0em;display: block;text-align: right;margin: 10px;color: Black;}
.topPadding { padding-top:10px }
.buttonDiv { padding-left:130px; padding-top:10px }
.dateEdit { width:75px }
.timeEdit { width:40px }
.decimalEdit { width:110px;text-align:right }
.decimalEditSmall { width:75px;text-align:right }

.ProgressItem, .ProgressItemActive { padding:5px; margin-left:5px;border:1px solid Black;height: 42px;text-align: left}
.ProgressItemActive
{
    background-color: #FFFFFF;
    color: #000000;
    font-weight: bold;
}
.ProgressItem { color: #808080; background-color: #C0C0C0}
.ProgressItemTitle { font-size: 1.2em}
.ProgressWrapper
{
    width: 100%;
    float: left;
    position: relative;
    padding: 5px 0 0 0;
    height: 60px;
}
.WizardDataPane { margin-left:63px;min-height:400px }

.ProgressIcon { float:left;padding-left:5px;padding-right:5px;width:48px}
.clear { clear:both}

.SubmitButtonDiv { padding-top:10px;padding-right:10px;margin-left:170px }
.SubmitButtonDivRight { float:right }
.SubmitButton {
    height: 30px;
    width: 100px;
    font-size: 1em;
    border: 1px solid #989898;
    color: #222;
    font-family: Segoe UI;
}
fieldSet { margin: 10px 0 0 0;border-style:none;padding:0px }
fieldSet Legend { border-bottom:1px solid #EF7500; width:100%; color:#EF7500;font-size:large;padding:0px;margin:0px }
.labelReadOnly { width:158px;margin-right:10px;float:left;text-align:right;padding:1px}
.textReadOnly { font-weight:bold;padding: 1px 1px 1px 170px;text-align: left }
.textReadOnlyNoLabel { font-weight:bold;padding: 1px 1px 1px 1px }
.labelWideReadOnly { width:348px;margin-right:10px;float:left;text-align:right;padding:1px}
.textWide, .textWideReadOnly { font-weight:bold;padding: 1px 1px 1px 330px }
.textWide { font-weight: normal;padding-top: 5px }
.multiLineReadOnly { font-weight:bold;border: 1px solid black;padding:1px}
.SubLegend,.SubLegendLarger { padding-left:170px;padding-top:6px;font-weight: bold;text-align: left}
.SubLegendLarger { font-size:larger}
.buttontext { padding-left:1em;padding-right:1em}
.LeftMarginDiv { margin-left:170px }
.tdNumber { text-align: right;font-weight: bold}
.tdNumberTotal { text-align: right;font-weight: bold;text-decoration: underline}
.tabContent { font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size:11px }


#wrap
{
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxNCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGJkYmRiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #ffffff 14%, #dbdbdb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#ffffff), color-stop(100%,#dbdbdb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 14%,#dbdbdb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 14%,#dbdbdb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 14%,#dbdbdb 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 14%,#dbdbdb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-8 */

}

#insheader {padding:1px;border-bottom:1px solid #EF7500;height: 35px }
#headerleft, #insheaderleft {margin:0 auto;padding:0;float:left}
#insheaderleft {width: 600px}
#headerleft {width: 500px}
#insheaderright { float:right;display: block;text-align: right}
#insheadertitle { font-size: 1.4em;padding: 0;margin: 0;white-space: nowrap;overflow: hidden}
#insheadersub {font-size:1em}
#insheaderlogo {width:32px;float:left;margin-right: 5px;margin-top: 2px}

#centeredProgress {margin-left:auto;margin-right:auto;width:400px;display:block;margin-top:50px;font-size:1.5em}
#progressBox { width: 400px; height: 100px; border: 1px solid black; text-align: center;font-size: 16px; font-weight: bold; }
#startLogo {margin-left:auto;margin-right:auto;width:640px;display:block;margin-top:50px;font-size:1.5em}
#startLogo2 {margin-left:auto;margin-right:auto;width:800px;display:block;margin-top:50px;font-size:1.5em}

.testresult { margin-left:5px;padding:2px;border:1px solid Black }
.shortPass { background-color:Red }
.badPass  { background-color:Yellow }
.goodPass  { }
.strongPass  { background-color:Green }
.GridDiv { }
.GridDivIPad { -webkit-overflow-scrolling: touch;height:440px }
.TaskWrapper,.MessageWrapper,.ProxyWrapper,.ProxyWrapperGreen,.TaskWrapperYellow, .TaskWrapperRed
{
    border: 1px solid #D6D3D6;
    background-color: #F4F4F4;
    position:relative
}
.TaskWrapperYellow, .TaskWrapperRed
{
    margin-bottom: 2px;
    margin-right: 0px;
    padding: 4px;
    width: 150px;
    background-color: #FFFFCC;
    text-align: left
}
.TaskWrapperYellow, .TaskWrapperRed {
    text-align: center;
    vertical-align: middle;
    height: 30px;
    line-height: 25px;
}
.ButtonWrapper 
{
    margin-bottom:2px;
}
.ButtonWrapper button
{
    font-size:11px;width:160px
}

.MessageA { margin-left:15px }
.MessageQ { padding:2px }
.TaskWrapper
{
    margin-bottom: 2px;
    margin-right: 0px;
    padding: 4px;
    width: 150px;
    background-color: #FFFFCC;
    text-align: left
}
.ProxyWrapper,.ProxyWrapperGreen
{
    margin-bottom: 2px;
    margin-right: 0px;
    padding: 4px;
    width: 170px;
    background-color: #F7967B    
}
.ProxyWrapperGreen 
{
    background-color: #8CC739
}

.ViewTypeWrapper 
{
    position:relative;float:left;margin-right:1px;margin-bottom:1px
}

.ViewType, .ViewTypeSelected
{
    padding: 0px 8px 0px 8px;
    margin-bottom:2px;
    margin-right:2px;
    background-color: #292829;
    color: #fcfcfc;
    text-align:center;    
    height:30px;
    font-size:12px;    
    display:table-cell;
    vertical-align:middle;
}
.ViewTypeSelected
{
    font-weight:bold;
    font-size:1.1em;
}

.LinkSpan {  
  position:absolute;  
  width:100%; 
  height:100%; 
  top:0; 
  left: 0; 
 
  /* edit: added z-index */ 
  z-index: 1; 
}    

.NumericTextBoxSmall { width : 75px }
.NumericTextBox { width : 120px }

.CaptionRow { font-size:1.2em; font-weight: bold }

.ViewRequestActionPane { float:left;width:180px;margin-top:70px }
.ViewRequestDataPane { margin-left:190px }
.ViewRequestWrapper { float:left;width:100% }

.ViewInsActionPane { float:left;width:160px;margin-top:70px }
.ViewInsDataPane { margin-left:170px }
.ViewInsWrapper { float:left;width:100% }

#Grid .HeaderCell, #ShippingPositionGrid .HeaderCell, .GridDiv div .HeaderCell { height:35px }
#GridUnNumber .RowCell,#Grid .RowCell, #ShippingPositionGrid .RowCell, .GridDiv div .RowCell  { padding-bottom:2px;padding-top:2px}

/*Admin-Tool*/
#MailGrid .RowCell, #UserGrid .RowCell, #LoggingGrid .RowCell { padding-bottom:6px;padding-top:6px}

.ListTitle { font-size:1.5em; float:left }

#radioViewTypes .RadioButton { float:left }
#radioViewTypes { }


/*InfoTiles*/
#infotiles { border:1px solid #D6D3D6 }
.infoTableCell, .infoTableCellGreen, .infoTableCellRed, .infoTableCellYellow { vertical-align:top;border:1px solid black;padding: 2px;width: 268px;height:130px;position: relative; }
.infoTableCell ul, .infoTableCellGreen ul, .infoTableCellRed ul, .infoTableCellYellow ul { margin: 0px;padding: 0px;list-style: none;}


.InfoTile { float:left;width:276px;height: 139px }
.infoTableCell
{
    background-color: #D6E3E7;
}
.infoTableCellGreen
{
    background-color: #8CC739;
}
.infoTableCellRed
{
    background-color: #F7967B;
}
.infoTableCellYellow
{
    background-color: #F7F3BD;
}

.infoTileSubHeader, .infoTileHeader, .infoTileText { width: 230px }
.infoTileText { font-size:0.9em;margin-top: 2px;text-align: left }
.infoTileSubHeader, .infoTileHeader { font-size:1.2em;text-align: left }
.infoTileSubHeader {height: 2.7em;overflow: hidden}
.infoTileTasks {float:right;width:231px;margin-top: 2px;text-align: left}

.ListFilterPadding { padding-left:190px }
.ListFilterNoPadding {}
.CommandLinkIcon, .CommandLink, .CommandLinkSea, .CommandLinkAir, .CommandLinkTruck, .CommandLinkContainer, .CommandLinkBox, .CommandLinkFlood, .CommandLinkRoad, .CommandLinkLiability, .CommandLinkFolklift, .CommandLinkPlug { width : 165px;margin-bottom:2px }
.UserListActionPane { float:left;width:190px }
.DesktopActionPane { float:left;width:180px }
.DesktopDataPane { margin-left:190px;min-height:400px }
.DesktopWrapper { float:left;width:100% }
#commands .AccordionPane { padding:5px }

table#documentList, table#statusHistory, table#linedTable {
    border-collapse: collapse;
}
#documentList td, #documentList th,#statusHistory td,#statusHistory th, #linedTable td, #linedTable th {
    border: 1px solid #D6D3D6;
    padding:3px
}
#documentList tr:first-child th,#statusHistory tr:first-child th, #linedTable tr:first-child th {
    border-top: 0;
}
#documentList tr:last-child td, #statusHistory tr:last-child td, #linedTable tr:last-child td {
    border-bottom: 0;
}

#documentList tr td:first-child,
#documentList tr th:first-child,
#statusHistory tr td:first-child,
#statusHistory tr th:first-child,
#linedTable tr td:first-child,
#linedTable tr th:first-child {
    border-left: 0;
}

#documentList tr td:last-child,
#documentList tr th:last-child,
#statusHistory tr td:last-child,
#statusHistory tr th:last-child,
#linedTable tr td:last-child,
#linedTable tr th:last-child,
.noRightBorder {
    border-right: 0;
}
#documentList table td, #documentList table th,#statusHistory table td, #statusHistory table th, #linedTable table td, #linedTable table th { border-style:none;padding:0 }

.tdLeftPadding { padding-left:2px }

.breadCrumb { font-size:14px;padding: 3px 0 8px 0 }

.statusTextArea { width:100%; margin:-4px; border-width:1px;border-style: dotted;background-repeat:no-repeat;background-position:center }

.errorBox{line-height:1.5em;margin: 0;color:#BF3513;padding:20px 10px 20px 100px;background:#fff9f7 url(/images/error.gif) 40px 50% no-repeat;border:1px solid #fbdacf;font-size: 1.2em;}
.successBox{line-height:1.5em;margin:0;margin-bottom: 10px; color:#6f904d;padding:20px 10px 20px 100px;background:#fafff7 url(/images/success.gif) 40px 50% no-repeat;border:1px solid #dbeed1;font-size: 1.2em;}
.warningBox{line-height:1.5em;margin: 0;margin-bottom: 10px; color:#b57e02;padding:20px 10px 20px 100px;background:#FFFCEF url(/images/notice.gif) 40px 50% no-repeat;border:1px solid #eadeac;font-size: 1.2em;}
.noticeBox{line-height:1.5em;margin:0 ;margin-bottom: 10px; color:#b57e02;padding:20px;text-align:center;background:#FFFCEF;border:1px solid #eadeac;font-size: 1.2em;}
.infoBox{line-height:1.5em;margin:0;margin-bottom: 10px; color:#4e678b;padding:20px 10px 20px 100px;background:#f0f7ff url(/images/info32.png) 40px 50% no-repeat;border:1px solid #b3d5f7;font-size: 1.2em;}

.CommandLinkSea > .ui-icon-sea { 
    background-image: url(/images/ShipXXS.png) !important;
    margin-left: 10px
}
.CommandLinkAir > .ui-icon-air { 
    background-image: url(/images/AeroplaneXXS.png) !important;
    margin-left: 10px
}

.CommandLinkFlood > .ui-icon-flood { 
    background-image: url(/images/FloodXXS.png) !important;
    margin-left: 10px
}

.CommandLinkLiability > .ui-icon-liability { 
    background-image: url(/images/LiabilityXXS.png) !important;
    margin-left: 10px
}

.CommandLinkRoad > .ui-icon-road { 
    background-image: url(/images/RoadXXS.png) !important;
    margin-left: 10px
}


.CommandLinkTruck > .ui-icon-truck  
{
    background-image: url(/images/TruckXXS.png) !important;
    margin-left: 10px
}

.CommandLinkContainer > .ui-icon-container  
{
    background-image: url(/images/ContainerXXS.png) !important;
    margin-left: 10px
}

.CommandLinkBox > .ui-icon-box { 
    background-image: url(/images/BoxXXS.png) !important;
    margin-left: 10px
}

.CommandLinkFolklift > .ui-icon-folklift { 
    background-image: url(/images/FolkliftXXS.png) !important;
    margin-left: 10px
}

.CommandLinkPlug > .ui-icon-plug { 
    background-image: url(/images/PlugXXS.png) !important;
    margin-left: 10px
}


.FirstCommandLinkDiv { padding: 70px 0 0 20px }
.CommandLinkDiv { padding: 10px 0 0 20px }
#ServiceRating { margin-left: 170px}
.Map { width:400px;height:200px }
.MediumMap { width:500px;height:300px }
.LargeMap { width:950px;height:500px }

.datePickerDiv label, .datePickerDiv input, .datePickerDiv button
{
    padding: 0.2em;
    margin: 0.1em 0.1em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

#frameContainer3 
{
    padding: 40px 10px 12px 0;
    position: fixed;
    top: 360px;
    left: 220px;
    right: 25px;
    bottom: 25px;
    min-width: 200px;
    }

#frameContainer2
{
    padding: 40px 10px 12px 0;
    position: fixed;
    top: 60px;
    left: 220px;
    right: 25px;
    bottom: 25px;
    min-width: 200px;
    }

#frameContainer 
{
    padding: 40px 10px 12px 0;
    position: fixed;
    top: 110px;
    left: 30px;
    right: 25px;
    bottom: 25px;
    min-width: 200px;
    }
    
    
iframe#frame1 { width: 100%;height: 100% }    

#tabs { 
    padding: 0px; 
    background: none; 
    border-width: 0px; 
} 
#tabs .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    font-size: 0.9em;
    height: 28px
} 
#tabs .ui-tabs-panel { 
    background: white; 
    border-width: 0px 1px 1px 1px; 
    font-size: 0.9em
}

.tdRight, .tdRightNumber { text-align: right;vertical-align: top}
.tdRightNumber { white-space: nowrap}
.tdCenter { text-align: center;vertical-align: top}
.tdLeft { text-align: left;vertical-align: top}
.commandDiv { font-size: 10px;font-family: Segoe UI}

.documentcheckboxes ul, .documentcheckboxes li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.margin-top-05 {
    margin-top: 0.5em;
}

.margin-top-10 {
    margin-top: 1.0em;
}

.margin-top-15 {
    margin-top: 1.5em;
}

.margin-top-20 {
    margin-top: 2.0em;
}

.margin-top-25 {
    margin-top: 2.5em;
}

.margin-top-30 {
    margin-top: 3.0em;
}

.margin-bottom-05 {
    margin-bottom: 0.5em;
}

.margin-bottom-10 {
    margin-bottom: 1.0em;
}

.margin-bottom-15 {
    margin-bottom: 1.5em;
}

.margin-bottom-20 {
    margin-bottom: 2.0em;
}

#progessBar {
    width: 100%
}

progress[value] {
    width: 300px;
    height: 20px;
}