/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */
/* #Site Styles
================================================== */
/* test colours 
bu
#outerWrap { background:green;}

#mainstrip {background:rgba(101,251,183,0.5); background:blue;}
..container {background:red;}
imageContainer {background:rgba(245,128,241,0.57);}
.textContainer {background:blue;}
.imageCell {background:rgba(148,248,124,0.54);}
.imageInfo {background:rgba(255,10,14,0.4); background:red; }
 #breadCrumb {background:rgba(255,255,255,0.63);}
 */
.table {
    display: table
    }
.row {
    display: table-row
    }
.cell, #credits {
    display: table-cell
    }
img {
    max-width: 100%;
    height: auto
    }
body {
    text-align: center;
    background: url(../images/wall.jpg) center repeat;
    display: table;
    margin: 0;
    overflow-x: hidden
    }
html, body {
    height: 100%;
    width: 100%
    }
#siteContainer {
    clear: both;
    display: table-row;
    width: 100%
    }
header, .header {
    width: 100%;
    background-color: #fff;
    height: 20px;
    position: absolute;
    top: 0;
    display: table-row
    }
#outerWrap {
    /*border-top:80px; border-bottom:66px;*/
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    /* 
     height:660px;
    border:1px dashed #F407DD;
    */
    }
/* The IE fix: */
footer, .footer {
    clear: both;
    display: table-row;
    width: 100%;
    background: #fff;
    height: 20px
    }
#credits {
    text-align: right;
    padding: 0 8px;
    font-size: 10px;
    color: #ccc;
    line-height: 19px
    }
#credits a {
    color: #ccc;
    text-decoration: none
    }
#credits a:hover, #credits a:active {
    color: #999;
    text-decoration: underline
    }
.navCall button {
    position: absolute;
    top: 60px;
    left: 0
    }
.cbp-spmenu {
    margin-top: 60px
    }
#mainstrip {
    width: 100%
    }
.container {
    position: relative;
    width: 1030px;
    margin: 100px auto 0;
    padding: 0 74px 0 0
    }
.homelogo {
    position: absolute;
    right: -310px;
    bottom: 60px;
    overflow: hidden
    }
#breadCrumb, #logo {
    left: 90px
    }
#breadCrumb {
    width: 216px;
    text-align: left;
    position: absolute;
    margin: 0;
    z-index: 500
    }
#breadCrumb h2 {
    font-size: 26px;
    /**/
    line-height: 21px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    color: #808080
    }
#breadCrumb h2:first-child {
    color: #B2B2B2
    }
#breadCrumb h2:last-child {
    color: #333;
    font-weight: 700;
    margin-top: 16px
    }
#breadCrumb h2:first-child {
    margin-top: 0
    }
#breadCrumb h2 strong {
    display: block;
    font-size: 13px;
    line-height: 13px;
    margin-top: 4px
    }
#breadCrumb h2 strong span.imageName {
    color: #989898
    }
#logo {
    width: 216px;
    text-align: left;
    position: absolute;
    margin: -76px 0 0 0
    }
.siblingNav a {
    display: block;
    position: absolute;
    background-image: url(../images/siblingNavArrow.png);
    background-repeat: no-repeat;
    /**/
    margin-top: 194px;
    margin-left: 18px;
    margin-right: 18px;
    height: 72px;
    width: 50px
    }
.siblingNav a span {
    display: none
    }
a.previousSiblingArrow {
    left: 0;
    background-position: 0 -144px
    }
a.nextSiblingArrow {
    right: 0;
    background-position: 20px -360px
    }
a.previousSiblingArrow:hover {
    background-position: -1px -72px
    }
a.nextSiblingArrow:hover {
    background-position: 21px -288px
    }
.textContainer {
    height: auto;
    min-height: 492px;
    float: left;
    margin: 0 16px 0 306px;
    font-size: 13px;
    line-height: 13px;
    border-top: 1px solid #ccc
    }
.textContainer section {
    float: left;
    height: auto;
    min-height: 468px;
    width: 720px;
    padding: 24px 0 0;
    text-align: left
    }
.textContainer section .narrowColumns {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-gap: 20px;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px
    }
.loggedin .textContainer {
    width: 492px
    }
.loggedin .textContainer section {
    float: left;
    height: 468px;
    width: 492px;
    padding: 24px 0 0;
    text-align: left
    }
.imageContainer {
    display: table;
    height: 492px;
    float: left;
    margin: 0 16px 0 306px
    }
.imageCell {
    display: table-cell;
    vertical-align: bottom
    }
.contentBlock {
    background: #fff;
    padding: 16px;
    float: left;
    margin: 0 16px 0 306px;
    width: 460px;
    height: 460px
    }
.imageBlock {
    background: #fff;
    padding: 16px;
    max-width: 460px;
    max-height: 460px
    }
.imageBlock img {
    background: #ccc
    }
.edit .imageBlock a img {
    background: #ccc url(../images/icon-add.png) center center no-repeat;
    cursor: pointer
    }
.edit .imageBlock a:hover img {
    background: #999 url(../images/icon-add.png) center center no-repeat
    }
.edit .imageBlock a img {
    height: 460px
    }
.imageInfo {
    text-align: left;
    float: left;
    max-width: 216px
    }
.imageInfo h3, .imageInfo h3 textarea {
    font-weight: 500;
    text-transform: uppercase
    }
.buyBlock {
    width: 216px;
    height: 110px;
    margin-bottom: 8px;
    background: white
    }
.titleBlock {
    width: 200px;
    height: 200px;
    padding: 8px;
    background: white
    }
.editBlock {
    min-height: 268px;
    margin-bottom: 8px;
    width: 216px;
    font-size: 12px;
    box-sizing: border-box
    }
.buyBlock:first-child {
    margin-top: 158px
    }
.titleBlock:first-child {
    margin-top: 276px
    }
.editBlock label {
    margin-top: 10px;
    margin-bottom: 5px
    }
.editBlock textarea {
    padding: 3px
    }
.buyBlock h3 {
    padding: 6px 8px 0 8px;
    line-height: 12px
    }
.buyBlock .buttonBlock {
    padding: 0;
    margin: 0;
    height: 50px;
    text-align: center
    }
.buyBlock select {
    width: 200px;
    margin: 8px
    }
x.buttonBlock .button {
    border: none;
    display: block;
    width: 90px;
    cursor: pointer;
    margin: 0;
    font-size: 22px;
    line-height: 22px;
    height: 18px;
    padding: 6px 0 3px
    }
.buyBlock .buttonBlock form {
    display: block;
    background-color: transparent;
    margin: 0;
    padding: 6px 0 1px
    }
.buyBlock .buttonBlock a {
    display: block;
    margin: 0
    }
button.disabled, .button.disabled {
    background: #aaa;
    pointer-events: none
    }
a.button {
    text-decoration: none
    }
/* editing view of .titleBlock */
.loggedin .titleBlock {
    background: #ccc
    }
.loggedin textarea {
    border: none;
    padding: 3px;
    margin: 0;
    width: 100%;
    font-size: 12px
    }
.loggedin h3 {
    margin-bottom: 6px
    }
.loggedin h3 textarea {
    min-height: 20px;
    padding: 3px;
    margin: 0
    }
.loggedin .titleBlock h3 textarea {
    min-height: 20px
    }
.loggedin .titleBlock textarea {
    min-height: 159px;
    width: calc(100% - 6px)
    }
.loggedin input[type="submit"] {
    margin-top: 10px;
    background-color: #999;
    color: #fff
    }
.loggedin input[type="submit"]:hover {
    background-color: #666
    }
.editMenu {
    height: 18px;
    margin-top: -18px;
    position: absolute;
    width: 98%;
    text-align: center
    }
XX.textColumn h1 {
    margin-bottom: 6px
    }
.textColumn h1 textarea {
    min-height: 26px;
    padding: 0;
    margin: 0
    }
.textColumn h1 textarea {
    min-height: 26px
    }
.textColumn .textColumn textarea {
    min-height: 350px
    }
/* socialTools icons */
.socialTools {
    display: block;
    float: right;
    margin-top: -19px;
    margin-right: 3px
    }
.socialTools li {
    display: inline-block;
    padding: 0;
    margin: 0
    }
.socialTools li span {
    display: none
    }
.socialTools li a {
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 16px;
    width: 16px;
    background-color: #bbb;
    background-image: url(../images/icons-social.png);
    background-repeat: no-repeat;
    background-position: -32px 0
    }
.socialTools li.facebook a {
    background-position: 0 0
    }
.socialTools li.facebook a:hover, .socialTools li.facebook a:active {
    background-color: rgba(54, 96, 159, 1);
    background-color: #333;
    background-position: 0 0
    }
.socialTools li.pinterest a {
    background-position: 0 -32px
    }
.socialTools li.pinterest a:hover, .socialTools li.pinterest a:active {
    background-color: rgba(203, 32, 39, 1);
    background-color: #333;
    background-position: 0 -32px
    }
#adTag {
    position: absolute;
    top: 0;
    right: 0
    }
/* #Page Styles
================================================== */
/* Landscape */
.imageBlock img.landscape, .imageBlock iframe {
    width: 460px;
    max-height: 460px
    }
@media only screen and (min-width: 1600px) {
    .imageBlock img.landscape, .imageBlock iframe {
        width: 560px;
        max-height: 560px
        }
    }
@media only screen and (min-width: 1900px) {
    .imageBlock img.landscape, .imageBlock iframe {
        width: 680px;
        max-height: 680px
        }
    }
@media only screen and (max-width: 1103px) {
    .imageBlock img.landscape {
        max-width: 100%;
        max-height: 100%
        }
    }
@media only screen and (max-width: 768px) {
    .imageBlock img.landscape {
        max-width: 100%;
        height: auto
        }
    }
@media only screen and (max-width: 1103px) {
    x.imageBlock iframe {
        max-width: 100%;
        max-height: 100%
        }
    }
/* smaller stuff */
@media only screen and (max-width: 530px) {
    .imageBlock iframe {
        max-width: 100%;
        max-height: 100%;
        min-height: 300px
        }
    }
/*  Portrait  */
.imageBlock img.portrait {
    max-width: 460px;
    height: 460px
    }
@media only screen and (min-width: 1600px) {
    .imageBlock img.portrait {
        max-width: 560px;
        height: 560px
        }
    }
@media only screen and (min-width: 1900px) {
    .imageBlock img.portrait {
        max-width: 680px;
        height: 680px
        }
    }
@media only screen and (max-width: 1103px) {
    .imageBlock img.portrait {
        max-width: 100%;
        width: auto;
        height: 460px
        }
    }
@media only screen and (max-width: 767px) {
    .imageBlock img.portrait {
        max-width: 460px;
        height: auto;
        max-height: 460px
        }
    }
/* Square images */
.imageBlock img.square {
    width: 460px;
    height: 460px
    }
@media only screen and (min-width: 1600px) {
    .imageBlock img.square {
        width: 560px;
        height: 560px
        }
    }
@media only screen and (min-width: 1900px) {
    .imageBlock img.square {
        width: 680px;
        height: 680px
        }
    }
@media only screen and (max-width: 1103px) {
    .imageBlock img.square {
        max-width: 100%;
        height: auto;
        max-height: 100%
        }
    }
/* #Media Queries
================================================== */
/* large (devices and browsers) */
@media only screen and (min-width: 1600px) {
    .editBlock {
        min-height: 368px;
        margin-bottom: 8px
        }
    .buyBlock:first-child {
        margin-top: 258px
        }
    .titleBlock:first-child {
        margin-top: 376px
        }
    .container {
        width: 1130px
        }
    .imageContainer {
        height: 592px;
        max-width: 592px
        }
    .imageBlock, .imageBlock img {
        max-width: 560px;
        max-height: 560px
        }
    .edit .imageBlock a img {
        height: 560px
        }
    .textContainer {
        min-height: 592px;
        margin-right: 100px
        }
    .textContainer section {
        min-height: 560px;
        width: 720px
        }
    .siblingNav a {
        /**/
        margin-top: 244px
        }
    }
/* Super large (devices and browsers) */
@media only screen and (min-width: 1900px) {
    .editBlock {
        min-height: 488px;
        margin-bottom: 8px
        }
    .buyBlock:first-child {
        margin-top: 378px
        }
    .titleBlock:first-child {
        margin-top: 496px
        }
    .container {
        width: 1260px
        }
    .imageContainer {
        height: 712px;
        max-width: 712px
        }
    .imageBlock, .imageBlock img {
        max-width: 680px;
        max-height: 680px
        }
    .edit .imageBlock a img {
        height: 680px
        }
    .textContainer {
        min-height: 712px;
        margin-right: 236px
        }
    .textContainer section {
        min-height: 680px;
        width: 720px
        }
    .siblingNav a {
        /**/
        margin-top: 304px
        }
    }
/* Smaller than standard 1030 (devices and browsers) */
@media only screen and (max-width: 1103px) {
    header, .header, header .cell, .header .cell {
        display: none
        }
    .navCall button {
        top: 0
        }
    .cbp-spmenu {
        margin-top: 0
        }
    #logo {
        margin: 8px 0 0 0
        }
    .editBlock {
        margin-top: 100px;
        min-height: 110px;
        margin-bottom: 8px
        }
    .buyBlock:first-child {
        margin-top: 158px
        }
    .titleBlock:first-child {
        margin-top: 276px
        }
    .breadCrumb {
        margin: 0
        }
    .container {
        width: 84%;
        max-width: 812px;
        min-width: 724px;
        margin: 0 0 0 90px
        }
    .imageInfo {
        float: left
        }
    .imageContainer {
        float: right;
        margin: 0
        }
    .imageBlock {
        background: #fff;
        padding: 16px;
        max-width: 460px;
        max-height: 460px
        }
    .imageBlock img {
        max-width: 460px;
        max-height: 460px
        }
    .edit .imageBlock a img {
        min-height: 460px
        }
    .textContainer {
        float: right;
        margin: 0
        }
    }
@media only screen and (min-width: 960px) and (max-width: 1102px) {
    .container.text {
        width: 100%;
        max-width: 1029px;
        min-width: 720px;
        margin: 0 0 0 0;
        padding: 0 44px 0 0
        }
    .textContainer {
        margin-right: 30px
        }
    }
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    body {
        padding-top: 70px
        }
    .navCall button {
        top: 0
        }
    .cbp-spmenu {
        margin-top: 0
        }
    #breadCrumb, #logo, .container {
        width: 724px;
        margin: 0 auto;
        padding: 0
        }
    #breadCrumb, #logo {
        left: auto;
        position: relative
        }
    #breadCrumb {
        margin-bottom: 16px
        }
    #logo {
        margin-top: 16px
        }
    .editBlock {
        margin-top: 0;
        min-height: 210px;
        margin-bottom: 8px
        }
    .buyBlock:first-child {
        margin-top: 158px
        }
    .titleBlock:first-child {
        margin-top: 276px
        }
    .imageContainer {
        float: left;
        margin: 0
        }
    .imageInfo {
        float: right
        }
    .imageBlock {
        padding: 16px;
        margin: 0;
        max-width: 460px;
        max-height: 460px
        }
    .imageBlock img {
        max-width: 100%;
        max-height: 100%
        }
    .edit .imageBlock a img {
        min-height: 460px
        }
    .textContainer {
        float: left;
        margin: 0
        }
    }
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .navCall button {
        top: 0
        }
    .cbp-spmenu {
        margin-top: 0
        }
    #breadCrumb, #logo, .container {
        max-width: 492px;
        min-width: 432px;
        width: 88%;
        margin: 0 auto;
        padding: 0
        }
    #breadCrumb, #logo {
        left: auto;
        position: relative
        }
    #breadCrumb {
        margin-bottom: 16px;
        margin-top: 70px
        }
    #logo {
        margin-top: -76px
        }
    .editBlock {
        margin-top: 16px;
        min-height: 0;
        margin-bottom: 8px
        }
    .buyBlock:first-child {
        margin-top: 16px
        }
    .titleBlock:first-child {
        margin-top: 16px
        }
    .imageContainer {
        height: auto
        }
    .imageInfo {
        float: right
        }
    .imageBlock {
        float: left;
        padding: 16px;
        margin: 0
        }
    .siblingNav a {
        display: none
        }
    .textContainer {
        float: left;
        margin-bottom: 16px;
        height: auto
        }
    .textContainer section {
        height: auto;
        width: 492px
        }
    .textContainer section .narrowColumns {
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2
        }
    .container.text {
        margin-bottom: 76px
        }
    }
/* smaller stuff */
@media only screen and (max-width: 530px) {
    #breadCrumb, #logo, .container {
        width: 90%;
        max-width: 432px !important;
        min-width: 216px
        }
    .imageInfo {
        float: left
        }
    .imageContainer {
        float: left
        }
    .imageBlock {
        padding: 4px;
        margin: 0
        }
    #logo {
        margin-top: 16px
        }
    .textContainer {
        float: left;
        height: auto;
        margin-bottom: 0
        }
    .textContainer section {
        width: 100%;
        height: auto
        }
    .textContainer section .narrowColumns {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1
        }
    .container.text {
        margin-bottom: 0
        }
    }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/
/* #Clearing
================================================== */
/* Self Clearing Goodness 
    .container:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }*/
/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
.clearfix:before, .clearfix:after, .row:before, .row:after {
    content: " ";
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
    }
.row:after, .clearfix:after {
    clear: both
    }
.row, .clearfix {
    zoom: 1
    }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
    }