html {
    background-color: rgb(57, 62, 73);
    margin: 0;
    padding: 0;
}
    
body {
    background-color: #FFFFFF;
    font-size: .85em;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
	line-height: 1.3em;
	color: rgb(90,90,90);
}

.frame 
{
     background-color: #ffffff;
}

a {
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    color: rgb(36,184,214);
    text-decoration: underline;
}

header 
{
    background: rgb(57,62,73);
}

header, footer, hgroup,
nav, section {
    display: block;
}

.header-content
{
    position: relative;
    max-width: 960px;
    overflow: auto;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.signout { margin-right: 15px; font-size: 1.2em; width: 76px; top: 0px; right: 0px; display: block;}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear {
     clear: both;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #24b6d6;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }

Label.checkboxPadding { padding-left: 25px;}
input[type='checkbox'] { float:left; padding-top: 0px;}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    background: #fff; 
    max-width: 960px;
}

#body {
    clear: both;
    padding-bottom: 25px;
    background-color: rgb(57, 62, 73);
}

    .main-content {
        padding: 10px 10px 0px 10px;
        min-height: 410px;
        background: #ffffff;
    }
    
header .content-wrapper {
    padding-top: 10px; 
    padding-left: 20px;
}
 
header .number {
    font-weight: bold;
    width: 160px;
    clear: both;
    bottom: 0px;
    right: 0px;
    float: right;
}

header .content-wrapper {
    padding-top: 20px; 
}

footer {
    clear: both;
    background-color: rgb(57, 62, 73);
    font-size: 1em;
    height: 100px;
    color: #fff;
    
}

.mobile-footer-margin
{
    margin-bottom: 50px;
}

footer a:visited, footer a:hover, footer a 
{
    font-size: 1em;
    color: #fff;    
}

.footer.ui-link  
{
    color: #fff;
}

 .linkPadding    { padding: 12px 10px 0px 0px; }

/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
    background-color: #ff9933;
}

    .featured .content-wrapper {
        background-color: #ffffff;
        margin-top: 50px;
        color: #fff;
        padding: 20px 40px 30px 40px;
    }
    
      .featured .mobile-content-wrapper 
        {
            background-color: #FFFFFF;
            padding: 10px;
        }

      .featured .mobile-content-wrapper hgroup.title h1, .featured .mobile-content-wrapper hgroup.title h2, .featured .mobile-content-wrapper hgroup.title h3
      {
          color: #24b6d6;
      }
        
        /* ------- Header background colour for larger mobile/tablet device (to match with logo) ----------- */
 
        @media only screen and (min-device-width: 603px) and (max-device-width: 1024px) 
        {
            .featured .mobile-content-wrapper 
            {
                background-color: #FF7F00;
            }
        }

        .featured hgroup.title h1, .featured hgroup.title h2, .featured hgroup.title h3 {
            color: #fff;
        }

        .featured p {
            font-size: 1.1em;
        }

/* page titles */
hgroup.title {
    margin-bottom: 10px;
}

hgroup.title h1, hgroup.title h2, hgroup.title h3 {
    display: inline;
}

hgroup.title h2 {
    font-weight: normal;
    margin-left: 3px;
}

/* features */
section.feature {
    width: 300px;
    float: left;
    padding: 10px;
}

/* login page */

#loginForm {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 10px 0px 10px;
}

 #loginForm h2, h3 { padding-bottom: 8px; }
 
    #loginForm .validation-error {
        display: block;
        margin-left: 15px;
    }

    #loginForm .validation-summary-errors ul {
        margin: 0;
        padding: 0;
    }

    #loginForm .validation-summary-errors li {
        display: inline;
        list-style: none;
        margin: 0;
    }
    
      /*ensures jquery mobile buttons are not broken*/
    #loginForm input[type="submit"].ui-btn-hidden,
    #loginForm input[type="button"].ui-btn-hidden,
    #loginForm button.ui-btn-hidden
    {
        border: 0px;
        width: 96%;
    }

#logoutForm {
    display: inline;
}

.ui-tooltip {
     max-width: 400px !important;
     min-width: 100px !important;
     overflow-wrap: break-word !important;
     word-wrap: break-word !important;
}

.tooltipStyle 
{
    color: #34495E !important;
}

/* forms */
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

    fieldset legend {
        display: none;
    }

    fieldset ol {
        padding: 0;
        list-style: none;
    }

        fieldset ol li {
            padding-bottom: 5px;
        }

label {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 0.9em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
        background-color: #fff;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: rgb(223, 178, 43);
        font-weight: bold;
        border: none;
        cursor: pointer;
        font-size: 1.2em;
        padding: 10px;
        border-radius: 6px;
        color: #fff;
        width: 200px;
        margin-left: 10px;
    }
    
    input[type="submit"].defined,
    input[type="button"].defined,
    button.defined {
        background-color: rgb(36, 106, 205);
    }
    
    input[type="submit"]:hover,
    input[type="button"]:hover,
    button:hover {
        background-color: rgb(223, 178, 43);
    }
    
    input[type="submit"].defined:hover,
    input[type="button"].defined:hover,
    button.defined :hover {
        background-color: rgb(36, 106, 205);
    }
    
    /*ensures jquery mobile buttons are not broken*/
    input[type="submit"].ui-btn-hidden,
    input[type="button"].ui-btn-hidden,
    button.ui-btn-hidden
    {
        border: 0px;
        width: 100%;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */

.error {
    color: #E50000;
    font-weight: bold;
}

.status-message      { font-weight: bold; float: right; padding-right: 20px;}
.status-message ul   { list-style-type: none; margin-left:0px; padding: 0px;} 
.status-error        { color: #E50000; }
  
/* styles for validation helpers */
.field-validation-error {
    color: #E50000;
    font-weight: bold;
}

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

input.input-validation-error {
    border: 1px solid #e50000;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e50000;
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 10px;
}

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


/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/* Booking Display */

.bookingHead {
    width: auto;
    margin: 6px 0px 6px 0px;
    background-color: rgb(90,90,90);
    color: rgb(220, 214, 198);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.bookingSection { display: inline-block; width: 100%; }
.bookingHead a { padding-bottom: 2px; color: #fff; text-decoration: none; font-weight: normal; }
.display-div { margin: 10px; width: 47%; float: left;}
.display-div .displayItem { padding: 5px 0px 5px 0px; }
.multiple-display {overflow: auto; margin-top: 4px; }
.multiple-display-border {border-bottom: 1px solid gray;}


 /* Specific displays
    ----------------------------------------------------------*/
    
  div#cost-summary .display-div { margin: 10px 10px 0 10px; width: 20%; float: left;}
  .wide-cost { width: 36% !important; } /* having to override the 20% width for non hidden receipt scenario */
  
  div#trip-summary label, div#trip-summary span { float: left; margin-right: 20px; }
  div#trip-summary span { margin-top: 2px;}
  
        @media only screen and (max-width: 750px) 
        {
              div#trip-summary label, div#trip-summary span { clear:both; margin-bottom: 0px;}
        }
  
  div#passenger-summary .display-div { margin-bottom: 0px; min-height: 100px;}
  div#passenger-summary .display-wide-address-div { width: 100%; margin-bottom: 0px; clear: both; }
  div#passenger-summary .display-wide-address-div label { width: auto !important;} /* having to override the 20% width for non hidden marketing */
  
  #addressLine1 { margin-left: 5px; margin-bottom: 5px;}
  
  #address .address-bar { font-weight: bold; padding: 5px 0px 5px 0px; }
  #address .display-div { margin-bottom: 10px; }
  #address input[type="text"] { width: 160px; float: left; margin-left: 10px; margin-right: 10px; }
  #address #phone-address label { float: left; width: 170px; padding-top: 5px;}
  /* Added to hide address and phone number  */
  #address #phone-address { display: none; }

 .arrow-down {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin: 5px;
	border-top: 10px solid #fff;
}

/* General */

    .info-bar  {
    padding: 5px; 
    background-color: rgb(90,90,90); 
    border-radius: 6px; 
    min-height: 40px; 
    overflow: auto;
    color: #fff;
  }
  
  .mini-info-bar 
  {
     margin: 5px 0px 0px 0px; 
     background-color: rgb(90,90,90); 
     padding: 6px; 
     border-radius: 6px; 
     overflow: auto;
     color: #fff;
     font-size: 1.3em;
  }
  
  .info-bar span       {font-size: 1.3em; float: left; padding: 13px;} 
  
  .info-bar .tab        
  {
    background:none;
    border-radius: 0px;
    float:right; 
    transition:color 1s;
    -webkit-transition:color 1s; /* Safari */
    color: #fff;
    font-size: 1.5em;
    padding: 0px 10px 0px 10px;
    margin: 12px;
    text-decoration: none;
    width: auto;
    font-family: Calibri, "Segoe UI", Verdana, Helvetica, Sans-Serif;
  }
  
  .info-bar .tab:hover   
  {
      color:#33CCFF;
      background:none;
  }
  
  .whiteSpaceWrap      { white-space: pre-line;}
  .checkboxLabel       { display:inline; }
  .checkboxLabel label { float:left; }
  .button-margin       { margin: 8px 5px 0px 0px; }
  .message-margin      { margin: 20px 0px 30px 0px;}

/* Grid Display */

div.table                                      { clear:both; overflow: hidden; margin: 5px;}
div.table div.row                              { clear:both; overflow: hidden; line-height: 25px; border-bottom: 1px dotted #BDC3C7;}
div.table div.row div.cell                     { float: left; padding: 4px; word-wrap: break-word;}
div.table div.row div.selector                 { width: 30px; overflow: hidden; padding: 1px;}
div.table div.row:hover                        { background-color: rgb(220, 214, 198);}

.headerRow                                     { background: #FF7F00; color: #fff; padding: 2px 5px 2px 5px; border-radius: 4px;}

div#receipts div.row div.cell                  { height: auto; min-height: 1px; }  
div#receipts div.col1                          { width: 120px; } 
div#passengers div.row div.cell                { padding: 0px 2px 0px 2px; height: auto; min-height: 1px; }

/*all columns except col5, and not headerRow*/
div#passengers div.row div.cell.col1,
div#passengers div.row div.cell.col2,
div#passengers div.row div.cell.col3,
div#passengers div.row div.cell.col4
{ padding: 9px 0px 0px 4px; }

div#receipts div.row div.cell.col1,
div#receipts div.row div.cell.col2
{ padding: 9px 0px 0px 4px; }

div#receipts-display { width: 50%; float: left; margin-right: 15px; }

div#receipts div.row input[type="submit"]       { width: 50px; font-size: 0.9em; }

div#passengers div.col1                         { width: 16%; } 
div#passengers div.col2                         { width: 16%; } 
div#passengers div.col3                         { width: 16%; } 
div#passengers div.col4                         { width: 16%; } 
div#passengers div.col5                         { width: 16%; } 
div#passengers div.col5                         { width: 16%; } 

 /* Credit card charges
    ----------------------------------------------------------*/
    
.chargeDisplay 
{
    display: none;
}

.chargeDisplay p
{
    font-size: 1.2em;
}

 /* iframe
    ----------------------------------------------------------*/
    
    iframe {
       overflow:hidden;
       margin: 0 auto;
       display: block;
    }

    /* IE border fix on image */
    
    .no-border {
        border: 0px;
    }