/*
* 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: */
#outerWrap {
margin-top:expression(((offsetParent.offsetHeight-offsetHeight)/2)+'px'); }

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 0px; padding:0px 74px 0px 0px ; }

.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:#333333; 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-color:; 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:0px -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 .textColumn { }
.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; background:; 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 0px 8px; line-height:12px;}
.buyBlock .buttonBlock { padding:0px; 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: 0px;
	font-size: 22px;
	line-height:22px;
	height:18px;
	padding:6px 0 3px; background-color:;
	
}
.buyBlock .buttonBlock form {display: block; background-color:transparent; margin:0; padding:6px 0 1px;}
.buyBlock .buttonBlock a {display: block; background:; margin:0;}

.buyBlock button:hover, .buyBlock .button:hover {}
button.active, .button.active  {}

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 0px;}

.socialTools li.facebook a {background-position:0px 0px;  }
.socialTools li.facebook a:hover, .socialTools li.facebook a:active { background-color:rgba(54,96,159,1); background-color:#333; background-position:0px 0px;}

.socialTools li.pinterest a {background-position:0px -32px;}
.socialTools li.pinterest a:hover, .socialTools li.pinterest a:active {background-color:rgba(203,32,39,1); background-color:#333;background-position:0px -32px;}

form {background:;}

#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; background:;}
.buyBlock:first-child {margin-top:258px;}
.titleBlock:first-child {margin-top:376px;}

.container  { width: 1130px; }

.imageContainer {  height:592px; max-width:592px; }

.imageInfo {}
.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; }

.imageInfo {}
.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) {
body {}
header, .header, header .cell, .header .cell {display:none;}
.navCall button {top:0px; }
.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: 0px 0px 0px 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; }
.textContainer section { }

	}
	@media only screen and (min-width: 960px) and (max-width: 1102px) {
.container.text  {width:100%; max-width:1029px; min-width:720px; margin: 0px 0px 0px 0px; padding:0 44px 0 0px;  }
.textContainer { margin-right:30px; }
		}
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		}

	/* 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:0px; }
.cbp-spmenu {margin-top:0px;}

#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:0px; 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; }
.textContainer section {  }


		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
body { }
.navCall button {top:0px; }
.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:0px; 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:0px;  }
.textContainer section {  width:100%; height:auto; }
.textContainer section .narrowColumns {
column-count: 1;
   -moz-column-count: 1;
   -webkit-column-count: 1;
}
.container.text  {margin-bottom:0px;}

		}

	/* 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) {}


/* #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: "\0020"; 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: '\0020';
      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;
    }
