@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,600,600italic,300italic);
/*
Theme Name: Skyworld Poly
Author: Chris Williams
Author URI: http://www.arris.com.au/
Description: The theme for Skyworld Polycarb Website
Version: 0.1
*/
/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*********************
PADDING
*********************/
/*********************
COLORS
*********************/
/*********************
TYPOGRAPHY
*********************/
.text-left {
  text-align: left; }

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

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

/*********************
TRANSITION
*********************/
/* USAGE: @include transition(all 0.2s ease-in-out); */
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*/
body {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #525760;
  background-color: #ebeced;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 300; }

header #logo {
  padding: 10px; }

header, #main, footer {
  text-align: left; }

H1, H2, H3, H4 {
  margin: 0;
  font-weight: 600;
  color: #0074c8; }

h1 {
  font-size: 1.45em; }

h2 {
  font-size: 1.24em; }

h3 {
  font-style: italic; }

h3, h4 {
  margin-bottom: 0.3em; }

b, strong {
  font-weight: 600; }

td {
  vertical-align: top; }

p {
  margin: 0 0 0.8em 0; }

a {
  text-decoration: none;
  color: #389cd9; }

img {
  border: 0;
  max-width: 100%;
  height: auto !important; }

hr {
  height: 2px;
  border: 0;
  background-color: #0074c8;
  margin: 10px 0; }

img.alignright {
  margin-left: 10px;
  float: right; }

img.alignleft {
  margin-right: 10px;
  float: left; }

img.alignnone {
  margin-right: 10px;
  margin-bottom: 10px; }

/* header styles */
header {
  background-color: white; }

#slider {
  display: none;
  position: relative;
  z-index: 0; }

.logotitle {
  display: none; }

/* content styles */
#main {
  background-color: white; }

#content {
  padding: 10px;
  text-align: left; }

.home h1.pagetitle {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 0.5em; }

.home .storycontent {
  font-size: 1.3em; }

#fancybox-wrap, #fancybox-content, #fancybox-title {
  box-sizing: content-box; }

div[id*='gallery-'] {
  margin: 0; }

div[id*='gallery-'] .gallery-item {
  margin-bottom: 4px;
  margin-top: 0px;
  max-width: 100%; }

div[id*='gallery-'] .gallery-item img {
  max-width: 100%;
  height: auto !important; }

div[id*='gallery-'] .gallery-caption {
  display: none; }

div#fancybox-title {
  width: auto;
  background-color: white;
  text-align: left;
  box-sizing: content-box;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 10px;
  margin-top: 10px; }

/* search page styles */
/* multi-column styles */
.one-half img, .one-third img {
  max-width: 100%;
  height: auto !important; }

/* Footer */
footer {
  background-color: #3e424a;
  color: white; }

footer .wrapper {
  padding: 10px; }

footer p {
  margin: 0; }

footer a {
  color: #389cd9; }

footer h1 {
  color: white;
  font-weight: 600;
  font-size: 1.3em; }

/*
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*/
@media only screen and (min-width: 601px) {
  header {
    vertical-align: middle; }

  header img {
    vertical-align: middle; }

  .logotitle {
    display: inline;
    border-left: 1px solid #ebeced;
    vertical-align: middle;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 22px;
    padding: 5px 20px; }

  #slider {
    display: block;
    position: relative;
    z-index: 0;
    max-width: 100%; }

  .home h1.pagetitle {
    font-size: 1.8em; } }
/*
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 769px) {
  hr {
    height: 4px; }

  /* gallery styles */
  div[id*='gallery-'] .gallery-item {
    float: left;
    margin-left: 9px;
    width: 32.5%; }

  /* multi-column styles */
  .one-half, .one-third {
    float: left;
    padding-left: 10px; }

  .first {
    padding-left: 0; }

  .one-half {
    width: 50%; }

  .one-third {
    width: 32.3%; }

  footer .contacts {
    float: right;
    text-align: left; } }
/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1200px) {
  body {
    font-size: 14px; }

  hr {
    margin: 30px 0; }

  /* desktops*/
  img.alignnone {
    margin-right: 10px;
    margin-bottom: 10px; }

  .wrapper, #main {
    width: 1200px;
    margin: auto; }

  /* header styles */
  header #logo {
    padding: 30px 10px 30px 30px; }

  #slider {
    display: block; }

  /* nav styles */
  nav {
    float: right; }

  /* content styles */
  #main {
    background-color: white;
    box-shadow: 0 6px 6px 0px #333; }

  #content {
    padding: 30px; }

  #content h1 {
    margin: 0.6em 0; }

  #content h1.pagetitle {
    margin-top: 1.4em; }

  .home h1.pagetitle {
    margin-top: 1.4em; }

  /* multi column styles */
  .one-third {
    width: 33.33%; }

  /* gallery styles */
  div[id*='gallery-'] .gallery-item {
    width: 32.8%; }

  /* footer styles */
  footer .wrapper {
    padding: 30px; } }