@import url("base.css");
@import url("skeleton.css");
@import url("styles.css");

/* #Standard Stuff
================================================== */  
.float-left,
.float-right {
  display:inline;
}

.float-left {
  float:left
}

.float-right {
  float:right;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.small {
  font-size:10px;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.button:hover,
button:hover,
.button:visited,
button:visited,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  border:none;
  border-radius: 0;
  color:#FFF;
  background:#888;
  font-weight:normal;;
  width:119px;
  padding-right:0;
  padding-left:0;
  text-shadow: none;
  font-size:14px;
  text-align:center;
}

body.theatres .button-highlight,
body.theatres .side-form,
.button.button-blue,
button.button-blue {
  background-color:#00A2E6;
}


body.theatres .side-form,
body.care .side-form {
  border:none;
}

body.care .button-highlight,
body.care .side-form,
.button.button-green,
button.button-green {
  background-color:#84BD00;
}

body.theatres .side-form .button-highlight,
body.care .side-form .button-highlight {
  background:#eb397f;
}

body.theatres .side-form .button-highlight:hover,
body.care .side-form .button-highlight:hover {
  background:#888;
}

body.theatres .side-form *,
body.care .side-form * {
  color:#FFF;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background:#000;
}

ul,
ul li {
  list-style-type: disc;
}

ul li {
  font-size:16px;
  clear:both;
  padding-left:15px;
  margin-left:15px;
  display: list-item;
}

/* #Site Layout
================================================== */
html, body {
  margin:0;
  padding:0;
}

header {
}

header h1, header h1 a {
  display:inline;
  float:left;
}

header h1 {
  line-height:42px;
  margin:0;
}

header h1 a {
  padding:90px 0 25px 0;
  width:339px;
  height:42px;
  display:block;
}


header div.links {
  padding-top:90px;
  display:inline;
  float:right;
  width:450px;
}

header nav.contact,
header nav.social {
 display:inline;
 float:right;
}

header nav.contact span {
  margin-right:20px;
  display:block;
  text-align:right;
  font-size:16px;
}

nav.social a {
  margin-left:8px;
  font-size: 22px;
}

nav.social a:first-child {
  margin:0;
}

nav#main {
  height:90px;
  background:#888;
  clear:both;
  overflow:hidden;
}

nav#main div.items {
  display:inline;
  float:right;
}

nav#main a {
  display:inline;
  float:left;
  color:#FFF;
  font-size:17px;
  line-height:46px;
  margin-top:40px;
  margin-left:40px;
}

nav#main a:last-child {}

nav#main a:hover,
nav#main a.active {
  border-bottom:4px solid #00A2E6;
}

nav#main h2 {
  line-height:90px;
  color:#FFF;
  float:left;
}

section#splash article {
  min-height:500px;
  padding:40px 0 20px 0;
  background-size: cover;
  background-position: center;
}

section#splash article h2 {
  color: #FFF;
  font-size: 40px;
}

section#content {
  min-height:400px;
  padding:20px 0 20px 0;
  background-imabuttonge:url('../img/bg-circle-grey.png');
  background-position:bottom left;
  background-repeat: no-repeat;
}

body.blue section#content {
  background-image:url('../img/bg-circle-blue.png');
}

body.green section#content {
  background-image:url('../img/bg-circle-green.png');
}

footer {
  background: #666;
  padding-top:30px;
  min-height:135px;
}

footer nav.additional {
  margin-left:30px;
}

footer nav.social {
  margin-left:30px;
}

footer nav.social a i,
footer nav a:visited i {
  color:#1F1F1F;
}

footer *,
footer a,
footer a:visited {
  color:#CCC;
}

footer nav.badges a {
  display:inline-block;
  margin-right:15px;
}

footer nav.badges img {
  opacity: 0.5;
}

footer a:hover {
  color:#00a2e6;
}

/* #Home
================================================== */
div#intro {
  padding:100px 0 100px 0;
}

div#intro article {
  text-align: center;
}

div#intro article p {
  padding:0 20px 0 20px;
}

div#intro article i.icon {
  margin-bottom:50px;
}

div.specialism-panel {
  width:70%;
  margin:0 auto;
  padding:20px 20px 0 20px;
  background:#00A2E6;
}

div.specialism-panel.care {
  background:#84BD00;
}

div.specialism-panel h3,
div.specialism-panel p {
  color:#FFF;
}

i.icon {
  display: inline-block;
  width:110px;
  height:110px;
}

i.icon-blue {
  background-image:url('../img/icon-blue.png');
}

i.icon-green {
  background-image:url('../img/icon-green.png');
}

i.icon-person {
  background-image:url('../img/icon-person.png');
}

div#intro article .button {
  width:150px;
}

/* #Home Walk
================================================== */
div#walk {
  background-image:url('../img/bg-walk.jpg');
  background-size:cover;
  padding:40px 0 40px 0;
}

div#walk h2 {
  color:#000;
  margin-bottom:30px;
}

div#walk p {
  color:#FFF;
}

div#walk div.download-wrapper {
  background:rgba(255,255,255,.2);
  padding:30px;
  display:inline-block;
}

div#walk div.download-wrapper h2 {
  color:#FFF;
  font-size: 22px;
  line-height:26px;
  text-align: right;
  margin:0 10px 20px 0;
}

div.download-wrapper form.application-pack div.success,
div.download-wrapper form.submitted div.fields {
  display:none;
}

div.download-wrapper form.submitted div.success {
  display:block;
}

div#walk .home-form div.cell {
  float:right;
  width:420px;
}

div#walk .home-form input[type=text] {
  margin-right:10px;
  float:right;
  width:300px;
}

div#walk .home-form button {
  width:192px;
  margin:0 10px 0 10px;
  text-transform: none;
}

div#walk .home-form p.instructions {
  margin:0  10px 20px 10px;
}

div#walk .home-form input {
  color:#000;
  background:rgba(255,255,255,.7);
}

div#walk .home-form label {
  color:#FFF;
}

/* #Home Testimonials
================================================== */
div#testimonials {
  padding:160px 0 50px 0;
  min-height:360px;
}

div#testimonials-slick-wrapper {
  width:80%;
  margin:0 auto;
}

div#testimonials article {
  text-align: center;
  margin:0 auto 0 auto;
}

section#content #testimonials ul,
section#content #testimonials ul li {
  list-style-type:none;
}

section#content #testimonials ul li {
  clear:none;
  padding-left:0;
  margin-left:2px;
  display: inline-block;
}

/* #Home Clients
================================================== */
div#clients {
  padding:50px 0 100px 0;
  min-height:120px;
}

div#clients-slick-wrapper article {
  text-align: center;
  margin:0 auto 0 auto;
}

img.client-logos {
  margin:0 auto;
  display:block;
}

/* #Page
================================================== */
section#content.content-page {
  padding:100px 0 50px 0;
}

section#content.content-page div.content {
  padding-right:100px;
}

.side-form {
  padding:10px;
  border:1px solid #888;
  margin-bottom:50px;
}

.side-form h5 {
  text-align: right;
}

.side-form div.cell {
  float:none;
}

.side-form input[type=text],
.side-form input[type=text]:hover,
.side-form input[type=text]:focus {
    width:170px;
    margin-bottom:0;
    float:right;
    background:#FFF;
    color:#000;
}

.side-form form {
  margin-bottom:0;
  display:inline-block;
}

.side-form form p {
  text-align: right;
}

.side-form button,
.side-form a.button {
  background:#eb397f;
}

.side-form button {
  margin:10px 0 0 0;
 }

.side-form .button {
  margin-bottom: 0;
}

.side-form .button-green {
  margin-left:10px;
}

/* #Contact
================================================== */
section#content.content-contact {
  padding:100px 0 50px 0;
  background:none;
}

#form-contact {
  display:inline;
  float:right;
}

#form-contact input,
#form-contact textarea {
  width:300px;
  float:right;
}

#form-contact label {
  text-align: right;
  margin-right:20px;
 }

#form-contact textarea {
  height:160px;
}

/*
section#map {
  height:400px;
  background-image:url('../img/bg-map.jpg');
  background-size: cover;
}
*/
section#map iframe {
  width:100%;
  height:400px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* #Slick
================================================== */
.slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 2px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  padding:0;
  text-indent: -30px;
  overflow:hidden;
  background: #CCC;
}

.slick-dots li.slick-active button {
  background:#00a2e6;
}


/* #Jobs
================================================== */
table.jobs a.button,
table.jobs a.button:visited,
table.jobs a.button:hover {
  width:100px;
}

table.jobs th {
  position: relative;
  font-weight:700;
  text-align:left;
  border-bottom:4px solid #888;
  font-size:16px;
  height:50px;
  line-height:50px;
}

table.jobs tr {
  border-bottom:1px solid #777;
}

table.jobs th,
table.jobs th a {
  color:#4C4C4C;
}

table.jobs td {
  padding:30px 0 30px 0;
  vertical-align: middle;
}

table.jobs strong {

}

table.jobs td.details .button {
  margin-left:20px;
}

table.jobs div.filter {
  float:right;
  width:380px;
}

table.jobs div.filter a {
  float:right;
  text-align:right;
  position:relative;
}

table.jobs div.filter a i {
  background:#888;
  color:#FFF;
  font-size: 12px;
  margin-right:10px;
  padding:4px;
  line-height:12px;
  height:12px;
  width:12px;
  text-align:center;
  display:inline-block;
}

table.jobs div.filter a {
  width:140px;
}

table.jobs div.filter a ul {
  position:absolute;
  right:0;
  top:50px;
  background:#EEE;
  z-index:99;
  width:200px;
  margin:0;
  padding:0;
  border-top:4px solid #888;
  display:none;
}

table.jobs div.filter a ul,
table.jobs div.filter a ul li {
  text-align:right;
}

table.jobs div.filter ul li {
  border-bottom:1px solid #CCC;
  list-style:none;
  padding:10px 5px 10px 5px;
  margin:0;
}

table.jobs div.filter a ul li:hover {
  background:#CCC;
}

table.jobs div.filter a:hover ul {
  display:block;
}

div.job-application {
  background-color:#E5E5E5;
  background-image:url('../img/bg-circle-white.png');
  background-position: bottom right;
  background-repeat:no-repeat;
  padding:25px 15px;
}

div.job-application form  {
  display:inline-block;
  width:100%;
  margin:0;
}

div.job-application form div.instructions,
div.job-application form div.fields {
  width:50%
}

form div.fields {
  float:left;
}

div.job-application form div.instructions {
  float:right;
}

div.job-application form div.instructions p{
  padding-left:20px;
}

div.job-application form input,
div.job-application form input:focus,
div.job-application form input:hover {
  width:238px;
  float:right;
}

div.job-application form label {
  color:#4C4C4C;
}

div.job-application button {
  margin:0;
}

div.job-application div.cell {
  margin:0;
}

/* #About Us
================================================== */
article.staff {
  margin-bottom:40px;
}

article.staff div.staff-wrapper {
  display:inline-block;
  padding-right:340px;
  background-position: bottom right;
  background-repeat:no-repeat;
  min-height:300px;
  border-bottom:4px solid #00a2e6;
}

  /* #Forms
  ================================================== */
div.cell {
  display: inline-block;
  float:left;
  width:100%;
  clear:both;
  margin:5px 0 0 0;
}

div.messages {
  display:block;
  width:100%;
}

div.messages p {
  color:#F00;
  margin:0 0 10px 0;
}

div.messages p.success {
  color:#000;
}

fieldset {
  margin:0;
}

label {
  display:inline;
  float:left;
  font-size:15px;
  line-height:20px;
  height:20PX;
  padding:6px;
  font-weight:100;
  color:#00A2E6;
}

input[type="text"], input[type="password"], input[type="email"], textarea, select,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus {
  border:none;
  border-radius:0;
  height:22px;
  padding:4px;
  background:#B7B7B7;
  box-shadow:none;
}

button,
button:hover {
  float:right;
  border:none;
  color:#FFF;
  text-shadow:none;
  text-align:center;
}

button:hover {
  background:#888;
}

label.file-upload {
  position: relative;
  overflow: hidden;
  width:166px;
  padding:6px;
  font-size:14px;
  background:#FFF;
  text-align:center;
  float:right;
}


label.file-upload span {
  color:#000;
}

label.file-upload:hover {
  background:#888;
}

.file-upload input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

/* #Get in touch
================================================== */
.get-in-touch-wrapper p {
  font-size: 13px;
}

.get-in-touch-wrapper a {
  color:#000;
}

.get-in-touch-wrapper nav.social {
 text-align:right;
}

.radius {
  border-radius:10px;
}

/* #Media Queries
================================================== */

    /* Bigger than standard 1280 (devices and browsers) */
    @media only screen and (min-width: 1280px) {

      .container {
        width:1200px;
        min-width:1200px;
      }

      .container .one-third.column { width:380px; }
      .container .two-thirds.column { width:780px;}
      .container .seven.columns { width:420px }
      .container .eight.columns { width: 580px; }

      #intro.container .one-third.column {
        width:390px;
        margin:0 5px 0 5px;
      }

      p {
        font-size: 16px;
      }

      p.small {
        font-size: 13px;
      }

      h2 {
        font-size:34px;
      }

      .side-form input[type=text],
      .side-form input[type=text]:hover,
      .side-form input[type=text]:focus {
        width: 240px;
      }

      label.file-upload {
        width: 236px;
      }

      #form-contact input,
      #form-contact textarea {
        width: 360px;
      }

      header nav.contact span {
        display:inline-block;
        text-align:left;
      }
    }

    /* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

      header {
        background: none;
      }

      header h1 a,
      header div.links {
        padding-top:30px;
      }

      header nav.contact span {
        display:inline-block;
        text-align:left;
      }

      div#walk .home-form div.cell {
        width:300px;
      }

      div#walk .home-form input[type="text"] {
        width:auto;
      }

      div#walk .home-form button {
        margin:10px 0;
      }

      img.client-logos {
        width:100%;
      }

      .side-form button {
        width:99px;
      }

      .side-form input[type=text],
      .side-form input[type=text]:hover,
      .side-form input[type=text]:focus {
        width: 200px;
      }

      table.jobs th {
        font-size:14px;
      }

      table.jobs div.filter {
        width:260px;
      }

      table.jobs div.filter a {
        width:110px;
      }

      div.job-application form input,
      div.job-application form input:focus,
      div.job-application form input:hover {
        width:173px;
      }

      div.job-application form label {
        padding-left:0;
      }

      div.job-application form div.instructions p {
        padding-top:26px;
      }

      #form-contact input, #form-contact textarea {
        width:260px;
      }

      h5 {
        font-size:16px;
      }
    }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

      header h1 a {
        line-height:38px;
      }

      header h1 a.logo img {
        width: 100%;
      }

      header h1 a, header div.links {
        padding:15px 0 15px 0;
        font-size:12px;
      }

      nav#main h2 {
        display:none;
      }

      nav#main a {
        margin-left:30px;
      }

      div#intro article {
        margin-bottom:50px;
      }

      footer p.address {
        display:none;
      }

      section#content.content-page div.content {
        padding:0;
      }
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}