@import url(default.css);
@import url(fonts.css);
@import url(responsive.css);


/*==============================
  BASE - The underlying cogs of the site
==============================*/

/* Set the font-size(%) to prep for EM usage */
body {
  font-family: Arial, sans-serif;
  font-size: 87.5%; /* 14px */
  line-height: 1.8em; /* 25px */
  color: #5a5e61;
  margin: 0 auto;
  max-width: 2000px;
  position: relative;     
}

h1, h2, h3, h4, h5 {
  font-family: "LiberationSansRegular", sans-serif;
}
h1 {
  font-size: 2.214em; /* 30px */
  font-weight: normal;
}
h1 small {
  display: block;
  font-size: 0.5em; /* 7px */
  color: #5a5e61;
}
h2 {
  margin: 0 0 25px;
  font-size: 1.571em; /* 22px */
  line-height: 1.2em; /* 26px */
  font-weight: normal;
  color: #0DA5D0;
}

p {
  margin: 0 0 10px;
  font-size: 1em;
  color: #5a5e61;
}

a {
  color: #5A5E61;
  text-decoration: underline;  
}

a:hover {
  text-decoration: underline;
  color: #05a0cb;
}

::selection {
  background: #12A8D5; /* Safari */
  color: white;
}
::-moz-selection {
  background: #12a8d5; /* Firefox */
  color: white;
}

/*==============================
  LAYOUT - The section of the site that describes the layout
==============================*/

/*-------------
Global Styling 
-------------*/

#header_container, #blue_bar, #content, #footer, .container, #works_row0, #works_row1, #works_row2 {
  width: 960px;
  margin: 0 auto;
  position: relative;
}
#header_container { height: 170px; }

/* Header */
#header {
  height: 141px;
  background: white;
}
#logo {
  background: url(../images/logo.jpg);
  display: block;
  width: 410px; height: 145px;
  margin: 0;
  text-indent: -9999px;
  float: left;
  position: relative;
}
#logo a {
  display: block;
  width: 100%; height: 100%;
}
#hbc {
  margin-top: 33px;
  float: right;
}
#hbc p {
  margin-bottom:0;
  font-family: "LiberationSansRegular";
  font-size: 1.214em; /* 17px */
  text-align: right;
  color: #a2a0a0;
}
#hbc p.number {
  font-family: "LiberationSansRegular";
  font-size: 1.943em; /* 27px */
  color: #d72711;
}
#hbc p.email {
  margin-top: -2px;
  color: #d72711;
}

/* Navigation */
#nav_top_level {
  background: #ffffff;
  background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 100%); 
  background: -webkit-gradient(linear, left top, left bottom, 
              color-stop(0%,#ffffff), color-stop(100%,#f6f6f6)); 
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 100%);
  background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 100%); 
  background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 100%);
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( 
              startColorstr='#ffffff', endColorstr='#f6f6f6',
              GradientType=0 );
  width: 95%;
  margin: 0 auto;
  border: 1px solid #D2D2D2;
  border-radius: 3px;
  position: relative;
  top: -5px;
  z-index: 50;
  overflow: hidden;
}
#nav_top_level li {
  height: 58px;
  list-style: none;
  position: relative;
  float: left;
}
#nav_top_level a {
  display: block;
  padding: 19px 20px;
  color: #5a5e61;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #fff;
  text-shadow: 1px 1px 0 white;
  float: left;
  text-decoration: none;
}
#nav_top_level li.logout {
  float: right !important;
  border-left: 1px solid #E5E5E5;
}
#nav_top_level li.logout a {
  font-weight: bold;
  color: #d72711;
  float: right;
}

#nav_top_level a:hover { color: #05a0cb; }

#nav_top_level.stickNav {
  background: url(../images/stickyLogo.jpg) 1% 45% no-repeat white;
  width: 100%;
  margin: 0;
  position: fixed;
  left: 0; top: 0;
  text-align: center;
  border-radius: none;
  border-top: none;
  z-index: 9999;
  display: none;
}
#nav_top_level.stickNav li {
  display: inline-block;
  float: none;
}
#nav_top_level.stickNav a {
  display: inline-block;
  border: none;  
  float: none;
}

/* Masthead */

#masthead {
  background: #f5f5f5;
  width: 100%;
  min-height: 134px!important;
  border-top: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  text-align: center;
}
#masthead h1{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important;  
  margin: 0px;
  padding: 0px;
  margin-top: 63px;
  font-weight: normal;
    font-size: 2em; /* 34px */
    line-height: 1.2em;
    color: #111313; /* default colour */
}
#masthead h1 span, #coverage_checker label span{
  color: #0DA8D2;
}   

#login #masthead h1, #login_failed h1 {
  margin-top: 53px;
}


/* Page title */
#intro {
  padding: 18px 0 18px;
  text-align: center;
}
#intro h1 { 
  font-size: 1.571em; /* 22px */
  line-height: 1.2em; /* 26px */
  color: #0da5d0; 
}

/* Content layout */

#content { 
  padding: 40px 0 40px;
  overflow: hidden; 
}
#content_col1, #content_col2 {
  width: 450px;
}


/* Footer */

#tandc {
  text-decoration:underline !important;   
}

#accreditations {
  width: 100%; height: 120px;
  text-align: center;
}
#accreditations img { margin: 7px auto 0; }

#footer_container {
  width: 100%;
  padding-top: 25px;
  border-top: 1px solid #d8d8d8;
  font-size: 0.9em;
  color: #919191;
  padding-bottom: 50px;
  overflow: hidden;
}
#footer_container a{
  text-decoration: none;  
}

#footer h2 { font-size: 1.4em; }

#footer p { color: #919191; }
#footer p b {
  color: black;
  font-weight: normal;
}

#footer_copyright, #footer_contact, #footer_postcode {
  float: left;
  width: 310px; 
}
#footer_contact { margin: 0 15px; }

#footer_logo { margin-left: -15px; }

.us_ {
  text-align: right;
  font-size: 0.8em;
  display: block;
}
.us_ a{
  color: #919191; 
}
#footer_postcode label {
  display: block;
  width: 100px; height: 29px;
  padding-top: 7px;
  font-size: 0.9em;
  font-weight: bold;
  float: left;
}
#postcode_check {
  display: block;
  width: 200px; height: 36px;
  overflow: hidden;
  position: relative;
  float: left;
}
#postcode_check button {
  background: url(../images/button2.jpg);
  display: block;
  width: 41px; height: 36px;
  text-indent: -9999px;
  border: none;
  position: absolute;
  right: 0; top: 0;
  z-index: 5;
}
#postcode_check input {
  background: #e1e1e1;
  width: 149px; height: 24px;
  margin: 0; padding: 6px 10px;
  border: none;
  position: relative;
  top: 0;
  z-index: 3;
}
.post_ {
  height: 11px;
  margin-top: 20px;
}
.tw_, .fb_ {
  background: url(../images/tw_.jpg) left no-repeat;
  display: block;
  padding: 5px 0 5px 30px;
  color: #242829;
}
.fb_ { background: url(../images/fb_.jpg) 9px 50% no-repeat; }

/*-------------
Invoice page
-------------*/

#login_form {
  width: 210px;
  margin: 25px auto 5px;
}
#login_form input[type=text], #login_form input[type=password] {
  width: 200px !important;
}

#login_failed #content {
  text-align: center;
}

/*-------------
Invoice page
-------------*/

#invoices_table td.invoice_status {
  color: #D72711;
}
#invoices_table td.invoice_status.invoice_paid {
  color: #479B20 !important;
}
#invoices_table td.invoice_status.invoice_part_paid {
  color: #DE8704 !important;
}

#invoices_table .mobile_element {
  display: none;
}


/*==============================
  STATES - States of elements in layouts/modules
==============================*/

/* Helper states */
.left { float: left; }
.right { float: right; }

.column { float: left; }
.middlemargins { margin: 0 15px; }
.three { width: 310px; }

.no_bg { background: none !important; }

/* Buttons */
.button1 {
  background: #05a0cb;
  display: inline-block;
  padding: 7px 15px;
  color: white;
  text-decoration: none;
  border: none;
}
.button1:hover {
  background: #0b0c0d;
  color: white;
}
.button1:active { background: #d72711; }

.button3 {
  text-decoration: none;
  background: #19bbdc;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE5YmJkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNTgyYmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #19bbdc 0%, #0582bb 100%); 
  background: -webkit-gradient(linear, left top, left bottom, 
              color-stop(0%,#19bbdc), color-stop(100%,#0582bb)); 
  background: -webkit-linear-gradient(top,  #19bbdc 0%,#0582bb 100%); 
  background: -o-linear-gradient(top,  #19bbdc 0%,#0582bb 100%); 
  background: -ms-linear-gradient(top,  #19bbdc 0%,#0582bb 100%); 
  background: linear-gradient(to bottom,  #19bbdc 0%,#0582bb 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( 
              startColorstr='#19bbdc', endColorstr='#0582bb', 
              GradientType=0 ); 
  display: inline-block;
  margin-top: 10px; 
  padding: 9px 27px;
  font-size: 1.1em;
  font-weight: bold;
  color: white;
  border-radius: 3px;
  border-bottom: 3px solid #005c86;
}
.button3:hover {
  background: #0582bb; 
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA1ODJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOWJiZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #0582bb 0%, #19bbdc 100%); 
  background: -webkit-gradient(linear, left top, left bottom, 
              color-stop(0%,#0582bb), color-stop(100%,#19bbdc)); 
  background: -webkit-linear-gradient(top,  #0582bb 0%,#19bbdc 100%);
  background: -o-linear-gradient(top,  #0582bb 0%,#19bbdc 100%);
  background: -ms-linear-gradient(top,  #0582bb 0%,#19bbdc 100%); 
  background: linear-gradient(to bottom,  #0582bb 0%,#19bbdc 100%); 
      filter: progid:DXImageTransform.Microsoft.gradient( 
              startColorstr='#0582bb', endColorstr='#19bbdc',
              GradientType=0 ); 
  color: white;
  border-bottom: 2px solid #005c86;
}


/**
 * Custom VF bits	
 */

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}




.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}


.progress {
  overflow: hidden;
  height: 19px;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-bar-success {
  background-color: #5cb85c;
}

.progress-bar-warning {
  background-color: #f0ad4e;
}

.progress-bar-danger {
  background-color: #d9534f;
}

.graph {
	min-width: 310px; height: 400px; margin: 0 auto;
}


#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


.error {
	color: #ff0000;
	display: inline-block;
	padding: 10px 0;
}


#nav_top_level li.active {
	background-color: #f3f3f3;
}


.invoice {
	border: 1px solid #bbbbbb;
	border-radius: 10px;
	padding: 10px;
}

.btn {
    border: 1px solid #2AABD2;
    background-repeat: repeat-x;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075);
    background-image: linear-gradient(to bottom, #5BC0DE 0px, #31B0D5 100%);
    background-repeat: repeat-x;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-bolton {
	background-color: #428BCA;
border: 1px solid #2D6CA2;
    background-image: linear-gradient(to bottom, #428BCA 0px, #3071A9 100%);
    font-size: 16px;
    height: 75px;
    width: 75px;
}

.btn-bolton.active {
	background-color: #5CB85C;
	background-image: linear-gradient(to bottom, #5CB85C 0px, #449D44 100%);
	border-color: #4CAE4C;
}

.btn-submit {
    padding: 5px 10px;
}

.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

#ccform {
	-moz-box-sizing: border-box;
    border-radius: 6px;
    background-color: #F5F5F7;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

#ccform header {
	background: linear-gradient(#F5F5F7, #E9E9EA) repeat scroll 0 0 #F0F0F2;
    box-shadow: 0 1px 0 #FFFFFF;
    cursor: default;
    display: block;
    height: 100px;
    border-radius: 6px 6px 0 0;
}

#ccform header h3 {
	margin: 0;
	color: #0DA5D0;
}

#ccform header h5 {
	color: #D72711;
}

#ccform article {
	padding: 20px;
}

#ccform article select {
	border: 1px solid #CCCCCC;
	width: auto;
}

#ccform article form {
	margin-bottom: 0;
}

#ccform a.modal_close {
	background: url("/assets/images/close.png") no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 23px;
    right: 5px;
    position: absolute;
    top: 7px;
    width: 22px;
}

#ccform label {
    float: left;
    position: relative;
    top: 5px;
    width: 170px;
}

#ccform .has-error {
	border-color: #FF5C61 #FF7076 #FF7076;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0), 0 0 4px 0 rgba(255, 0, 0, 0.5);
    outline: medium none;
}

strong.highlight {
	color: #0DA5D0;
}

.payment-errors {
    color: #FF0000;
    display: inline-block;
    margin: 0 0 10px;
}