/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 29-Apr-2015, 15:28:23
    Author     : Chris
*/
/*
        -- Colours
*/
html, body {
  width: 100%;
  height: 100%; }

html {
  background-color: #ECECEC;
  /*
  background-image: url("/Images/crest-50.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: scroll;
  */ }

#crest {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: -1; }

* {
  box-sizing: border-box;
  padding: 0 0;
  margin: 0 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 100; }

div, section, header, nav {
  float: left; }

#header-nav {
  background-color: #1E8BC3;
  width: 33%;
  min-height: 100vh;
  height: 100%;
  position: fixed;
  padding: 42px 0; }
  #header-nav * {
    color: #ECECEC; }
  #header-nav header {
    width: 100%; }
    #header-nav header .avatar-container {
      width: 100%;
      display: block;
      padding-bottom: 42px; }
      #header-nav header .avatar-container img {
        width: 80%;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        display: block; }
    #header-nav header h1 {
      text-align: center;
      font-size: 32pt; }
  #header-nav nav {
    width: 100%;
    text-align: center; }
    #header-nav nav ul {
      list-style: none;
      margin-top: 32px; }
      #header-nav nav ul li {
        font-size: 24pt;
        width: 100%;
        padding: 4px;
        display: inline-block; }
        #header-nav nav ul li a {
          text-decoration: none; }

section {
  width: 67%;
  float: right;
  min-height: 100vh;
  padding: 64px 0px; }
  section * {
    /*color: #829494; */
    color: black;
  }
  section article {
    width: 80%;
    max-width: 1100px;
    margin: 12px auto; }
    section article p {
      margin-bottom: 12px; }

footer {
  width: 100%;
  bottom: 24px;
  left: 0px;
  position: absolute; }
  footer img {
    width: 60%;
    max-width: 300px;
    margin: auto;
    display: block; }

h1.feature {
  font-size: 48px;
  text-align: center;
  margin-bottom: 48px; }

.chart {
  width: 100%;
  height: 520px;
  margin-bottom: 24px; }
  .chart .chart-title {
    height: 10%;
    width: 100%;
    text-align: center; }
  .chart .chart-rows {
    height: 90%;
    width: 100%; }
    .chart .chart-rows .row {
      height: 100%;
      width: 8.3333333333%;
      padding-right: 12px; }
      .chart .chart-rows .row .bar-container {
        height: 80%;
        width: 100%;
        position: relative; }
        .chart .chart-rows .row .bar-container .bar {
          background: #95A5A6;
          width: 100%;
          bottom: 0px;
          left: 0px;
          position: absolute;
          box-shadow: rgba(0, 0, 0, 0.2) 3px -3px 15px; }
          .chart .chart-rows .row .bar-container .bar .bar-text {
            transform: rotate(-90deg);
            color: #ECECEC;
            display: block;
            font-size: 26px;
            font-weight: bold; }
      .chart .chart-rows .row .bar-title {
        width: 100%;
        height: 20%;
        padding-top: 6px;
        text-align: center; }
    .chart .chart-rows.fat .row {
      width: 16.6666666667%; }
      .chart .chart-rows.fat .row .bar-text {
        font-size: 48px !important; }
    .chart .chart-rows.fat .bar-title {
      font-size: 32px; }

.table-container {
  width: 100%;
  margin-bottom: 24px; }
  .table-container .table-title {
    margin-bottom: 24px;
    text-align: center; }

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse; }
  table tr:nth-child(2n - 1) {
    background: #dfdfdf; }
  table tr.title-row {
    background: #1E8BC3; }
    table tr.title-row * {
      color: #ECECEC; }
  table tr th, table tr td {
    padding: 12px 4px;
    text-align: center; }
  table tr th {
    font-weight: bold;
    color: #1d88bf; }
    table tr th * {
      font-weight: bold; }
    table tr th.hospital {
      color: #1E8BC3; }
    table tr th.sideways {
      height: 110px;
      white-space: nowrap;
      width: 33px; }
      table tr th.sideways div {
        transform: translate(13px, 33px) rotate(300deg);
        width: 30px; }
        table tr th.sideways div span:before {
          content: " "; }

.kpi {
  width: 250px;
  height: 82.5px;
  padding: 6px;
  background-image: url(/Images/arrow-up-30.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-clip: padding-box;
  background-size: 20%; }
  .kpi.negative {
    background-image: url(/Images/arrow-down-30.png); }
  .kpi.time {
    background-image: url(/Images/clock-30.png);
    background-size: 16%;
    background-position-x: 98%;
    background-position-y: 6px; }
  .kpi.patient {
    background-image: url(/Images/patient-30.png);
    background-size: 16%;
    background-position-x: 98%;
    background-position-y: 6px; }
  .kpi .kpi-title {
    width: 100%;
    height: 50%; }
  .kpi .kpi-value, .kpi .kpi-change {
    width: 50%;
    height: 50%;
    display: table; }
    .kpi .kpi-value span, .kpi .kpi-change span {
      display: table-cell;
      vertical-align: bottom; }
  .kpi .kpi-change {
    text-align: right; }

#header-kpis {
  width: 100%;
  margin-top: 32px; }
  #header-kpis .kpi {
    background-color: #2198d5;
    clear: both;
    float: none;
    margin: 12px auto; }

.island {
  float: none;
  clear: both;
  width: 80%;
  margin: 32px auto;
  height: 120px; }
  .island .island-text {
    width: 70%; }
  .island .island-image {
    width: 30%; }
    .island .island-image img {
      max-width: 100%;
      max-height: 100%; }

.form {
  width: 100%; }
  .form .question-group {
    width: 100%;
    margin-bottom: 48px; }
    .form .question-group .question-group-title {
      text-align: center;
      width: 100%; }
      .form .question-group .question-group-title h2 {
        font-size: 32px;
        margin-bottom: 18px; }
  .form .question {
    width: 100%;
    padding: 12px; }
    .form .question .question-label-container {
      width: 40%;
      padding-right: 24px;
      padding-top: 8px;
      text-align: right; }
      .form .question .question-label-container label {
        font-size: 24px; }
    .form .question .question-answer-container {
      width: 50%; }

input, select, textarea {
  background: #95A5A6;
  padding: 12px;
  border: none;
  /*width: 100%;*/
  /*color: #ECECEC;*/
  color: white;
  font-size: 16px;
  outline: none;
  transition: box-shadow 1s ease;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px; }
  input:focus, select:focus, textarea:focus {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px; }
  input.small, select.small, textarea.small {
    width: 64px; }
  input[type="button"], input[type="submit"], select[type="button"], select[type="submit"], textarea[type="button"], textarea[type="submit"] {
    text-align: center;
    width: auto;
    background: #1E8BC3;
    float: right; }
  input[type="number"], select[type="number"], textarea[type="number"] {
    position: relative; }
    input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, select[type="number"]::-webkit-outer-spin-button, select[type="number"]::-webkit-inner-spin-button, textarea[type="number"]::-webkit-outer-spin-button, textarea[type="number"]::-webkit-inner-spin-button {
      background: #FFF;
      width: 1em;
      border-left: 1px solid #BBB;
      opacity: .5;
      /* shows Spin Buttons per default (Chrome >= 39) */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0; }

textarea {
  height: 86px; }

@media (max-width: 481px) {
  #header-nav {
    position: relative;
    float: right;
    width: 100%; }

  section {
    width: 100%; }

  footer, #header-kpi {
    display: none; }

  .form .question {
    padding: 6px; }
    .form .question .question-label-container {
      width: 100%;
      text-align: left; }
    .form .question .question-answer-container {
      width: 100%; } }
@media (min-width: 482px) and (max-width: 1024px) {
  #header-nav {
    position: relative;
    float: right;
    height: auto;
    min-height: initial;
    width: 100%; }
    #header-nav img {
      width: 40% !important; }
    #header-nav nav ul li {
      width: 32%; }

  section {
    width: 100%; }

  footer, #header-kpis {
    display: none; } }
@media (min-width: 1280px) {
  section article {
    margin-left: 75px; } }
.w-0 {
  width: 0%; }

.w-5 {
  width: 5%; }

.w-10 {
  width: 10%; }

.w-15 {
  width: 15%; }

.w-20 {
  width: 20%; }

.w-25 {
  width: 25%; }

.w-30 {
  width: 30%; }

.w-35 {
  width: 35%; }

.w-40 {
  width: 40%; }

.w-45 {
  width: 45%; }

.w-50 {
  width: 50%; }

.w-55 {
  width: 55%; }

.w-60 {
  width: 60%; }

.w-65 {
  width: 65%; }

.w-70 {
  width: 70%; }

.w-75 {
  width: 75%; }

.w-80 {
  width: 80%; }

.w-85 {
  width: 85%; }

.w-90 {
  width: 90%; }

.w-95 {
  width: 95%; }

.w-100 {
  width: 100%; }

@media only screen and (max-width: 481px) {
  .palm-w-0 {
    width: 0%; }

  .palm-w-5 {
    width: 5%; }

  .palm-w-10 {
    width: 10%; }

  .palm-w-15 {
    width: 15%; }

  .palm-w-20 {
    width: 20%; }

  .palm-w-25 {
    width: 25%; }

  .palm-w-30 {
    width: 30%; }

  .palm-w-35 {
    width: 35%; }

  .palm-w-40 {
    width: 40%; }

  .palm-w-45 {
    width: 45%; }

  .palm-w-50 {
    width: 50%; }

  .palm-w-55 {
    width: 55%; }

  .palm-w-60 {
    width: 60%; }

  .palm-w-65 {
    width: 65%; }

  .palm-w-70 {
    width: 70%; }

  .palm-w-75 {
    width: 75%; }

  .palm-w-80 {
    width: 80%; }

  .palm-w-85 {
    width: 85%; }

  .palm-w-90 {
    width: 90%; }

  .palm-w-95 {
    width: 95%; }

  .palm-w-100 {
    width: 100%; } }
@media only screen and (min-width: 480px) and (max-width: 1024px) {
  .lap-w-0 {
    width: 0%; }

  .lap-w-5 {
    width: 5%; }

  .lap-w-10 {
    width: 10%; }

  .lap-w-15 {
    width: 15%; }

  .lap-w-20 {
    width: 20%; }

  .lap-w-25 {
    width: 25%; }

  .lap-w-30 {
    width: 30%; }

  .lap-w-35 {
    width: 35%; }

  .lap-w-40 {
    width: 40%; }

  .lap-w-45 {
    width: 45%; }

  .lap-w-50 {
    width: 50%; }

  .lap-w-55 {
    width: 55%; }

  .lap-w-60 {
    width: 60%; }

  .lap-w-65 {
    width: 65%; }

  .lap-w-70 {
    width: 70%; }

  .lap-w-75 {
    width: 75%; }

  .lap-w-80 {
    width: 80%; }

  .lap-w-85 {
    width: 85%; }

  .lap-w-90 {
    width: 90%; }

  .lap-w-95 {
    width: 95%; }

  .lap-w-100 {
    width: 100%; } }
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  .desk-w-0 {
    width: 0%; }

  .desk-w-5 {
    width: 5%; }

  .desk-w-10 {
    width: 10%; }

  .desk-w-15 {
    width: 15%; }

  .desk-w-20 {
    width: 20%; }

  .desk-w-25 {
    width: 25%; }

  .desk-w-30 {
    width: 30%; }

  .desk-w-35 {
    width: 35%; }

  .desk-w-40 {
    width: 40%; }

  .desk-w-45 {
    width: 45%; }

  .desk-w-50 {
    width: 50%; }

  .desk-w-55 {
    width: 55%; }

  .desk-w-60 {
    width: 60%; }

  .desk-w-65 {
    width: 65%; }

  .desk-w-70 {
    width: 70%; }

  .desk-w-75 {
    width: 75%; }

  .desk-w-80 {
    width: 80%; }

  .desk-w-85 {
    width: 85%; }

  .desk-w-90 {
    width: 90%; }

  .desk-w-95 {
    width: 95%; }

  .desk-w-100 {
    width: 100%; } }
@media only screen and (min-width: 1281px) {
  .desk-wide-w-0 {
    width: 0%; }

  .desk-wide-w-5 {
    width: 5%; }

  .desk-wide-w-10 {
    width: 10%; }

  .desk-wide-w-15 {
    width: 15%; }

  .desk-wide-w-20 {
    width: 20%; }

  .desk-wide-w-25 {
    width: 25%; }

  .desk-wide-w-30 {
    width: 30%; }

  .desk-wide-w-35 {
    width: 35%; }

  .desk-wide-w-40 {
    width: 40%; }

  .desk-wide-w-45 {
    width: 45%; }

  .desk-wide-w-50 {
    width: 50%; }

  .desk-wide-w-55 {
    width: 55%; }

  .desk-wide-w-60 {
    width: 60%; }

  .desk-wide-w-65 {
    width: 65%; }

  .desk-wide-w-70 {
    width: 70%; }

  .desk-wide-w-75 {
    width: 75%; }

  .desk-wide-w-80 {
    width: 80%; }

  .desk-wide-w-85 {
    width: 85%; }

  .desk-wide-w-90 {
    width: 90%; }

  .desk-wide-w-95 {
    width: 95%; }

  .desk-wide-w-100 {
    width: 100%; } }
/* mb - add to sass file later */
.form-horizontal {
  /*border: thick solid red;*/
  clear: both;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  float: left; }

.form-group {
  clear: both;
  padding: 5px; }

.control-label {
  float: left;
  width: 20em; }

.text-box {
  float: right; }

.btn {
  clear: both; }

.theQuestion {
  width: 20em; }

#formButtons {
  clear: both; }

dl {
  padding: 10px;
  width: 100%;
  overflow: hidden; }

dt {
  padding: 5px;
  float: left;
  width: 50%; }

dd {
  padding: 5px;
  float: left;
  width: 50%; }

/*vehicle search*/
#vehicleDetails {
  clear: both;
  width: 95%; }

.detailLine {
  clear: both;
  width: 90%;
  border-bottom: thin dashed grey; }

@media only screen and (max-width: 361px) {
  /*phone portrait*/
  #answersPart {
    border: thin groove grey;
    width: 100%; }

  .questionAnswerWrapper {
    clear: both;
    width: 100%;
    padding: 10px;
    padding-bottom: 25px; }

  .theQuestion {
    padding-bottom: 2px; }

  .theQuestion label {
    font-weight: bold; }

  .answerHeader {
    padding: 2px;
    clear: left;
    width: 50%; } }
@media only screen and (max-width: 640px) {
  /*phone landscape*/
  #answersPart {
    border: thin groove grey;
    width: 100%;
    margin-top: 20px; }

  .questionAnswerWrapper {
    clear: both;
    width: 100%;
    padding: 20px;
    padding-bottom: 35px;
    border-top: 1px dotted grey; }

  .theQuestion {
    padding-bottom: 10px; }

  .answerBlock {
    width: 100%; }

  .theAnswer {
    width: 100%; }

  .theQuestion label {
    font-weight: bold; }

  .answerHeader {
    padding: 2px;
    clear: left;
    width: 50%; }

  .answerHeader, .answerCheckbox {
    padding: 5px; } }
@media only screen and (min-width: 860px) {
  /*and (max-width: 960px) {*/
  /*tablet landscape 7''*/
  #answersPart {
    border: thin groove grey;
    padding: 10px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px; }

  .questionAnswerWrapper {
    clear: both;
    width: 100%;
    padding: 20px;
    padding-bottom: 50px;
    border-top: 1px dotted grey; }

  .theQuestion {
    padding-bottom: 25px; }

  .theQuestion label {
    font-weight: bold; }

  .answerCheckbox {
    position: relative;
    top: 30px; }

  .comments {
    left: -75px; }

  .good {
    left: -23px; }

  .fair {
    left: -20px; }

  .repair {
    left: -43px; } }
@media only screen and (max-width: 1280px) {
  /*tablet landscape 10''*/ }

/*# sourceMappingURL=style.css.map */


#videowrapper{
    width:100%;
    padding: 20px;
}

#videowrapper span{
    clear:both;
    float:left;
    padding-bottom: 10px;
}

#videowrapper video {
    clear: both;
    float: left;
}

#video{
    /* hide the original video element to save screen estate */
    /*width: 0px !important;
    height: 0px !important;
    visibility: hidden;*/
}