/*
* 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
================================================== */

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

.main-content {
	margin-top: 30px;
	padding-top: 30px;
}

/*Typography*/


h1, h2, h3, h4, h5, h6, p {
	font-family: 'Special Elite', cursive;
}

p {
	font-size: 16px;
	line-height: 26px;
}

li {
	line-height: 1.4 !important;
}

.text-box-full {
	margin: 20px 20px 20px 30px;
}

.hidden {display: none;}


.right {
	float: right;
	margin: 10px;
}

.small-print {
	font: 12px/20px 'Special Elite', cursive;
	text-align: right;

}

.contact-title {
	margin-top: 50px;
}

a.large {
	font: 28px/38px 'Special Elite', cursive!important;
}

a#large {
	font: 20px/38px 'Special Elite', cursive!important;
}

a.x-large {
	font: bold 32px/40px 'Special Elite', cursive;
}

/*Backgrounds*/

body {
	background: #f5f5f5 url('../images/news-bg.jpg') repeat left top;
}

.info-card {
	background: #f5f5f5 url('../images/card-texture.jpg') repeat left top;
	-moz-box-shadow: 1px 1px 2px #807e7e;
	-webkit-box-shadow: 1px 1px 2px #807e7e;
	box-shadow: 1px 1px 2px #807e7e;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-transform: rotate(2deg); 
	-moz-transform: rotate(2deg); 
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg); 
	z-index: 10;
	}
	
.notepaper {
	background: #f5f5f5 url('../images/lined-paper.jpg') repeat left top;
	-moz-box-shadow: 1px 1px 2px #807e7e;
	-webkit-box-shadow: 1px 1px 2px #807e7e;
	box-shadow: 1px 1px 2px #807e7e;
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg); 
	z-index: 2;
	margin-top: 20px;
}

.paper-panel {
	background: url('../images/parchment-bg.jpg') repeat left top;
	-moz-box-shadow: 2px 2px 2px #2f2d2d;
	-webkit-box-shadow: 2px 2px 2px #2f2d2d;
	box-shadow: 2px 2px 2px #2f2d2d;
	max-width: 100%;
	height: auto;
	padding-bottom: 30px;
	z-index: 20;
}
.circled {
	background: url('../images/circle-bg-sml2.png') no-repeat left top;
	height: 140px;
}

.circle-small {
	background: transparent url('../images/circle-bg-sml.png') no-repeat left top;
	height: 50px;
	max-width: 100%;
	padding-left: 10px;
	padding-top: 10px;
}


.housekeeping {
background: url('../images/housekeeping-lg.png') no-repeat left top;
-webkit-transition: all .2s ease-in-out;
height: 210px;
margin-top: 40px;
-webkit-transform: rotate(-4deg); 
-moz-transform: rotate(-4deg); 
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg); }

.housekeeping:hover { -webkit-transform: scale(1.1); }


.section-break {
	margin: 0;
}

section.spaced {
	margin-top: 60px;
}
/*Header*/

header {
	padding: 40px 40px 0px 20px;
}


a.home-button {
	opacity: 1;
	float: right;
	margin-right: 20px;
}

a.home-button:hover {
	opacity: 1;
}

hr {
border: solid #000;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
height: 0;}

/*Navigation*/

nav li {
	float: left;
	height: 100px;
}
	

ul.main-nav{margin:0px 0px 20px 0px; padding:0; list-style:none; clear:both;}
	
ul.main-nav li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:18px; margin-bottom: 0px;}

ul.main-nav li:nth-child(7n) {
margin-right: 0px;
}
	
.main-nav li a{background:url('../images/nav-sprite.png') no-repeat; width:100%; height:100%; display:block; 
}
			

.main-nav li.michelle{width:120px; height:100px;}
.main-nav li.michelle a{background-position: 0px 0px;}
.main-nav li.michelle a:hover{background-position: 0px -100px;}
.main-nav li.michelle a.selected{background-position: 0px -100px;}

.main-nav li.projects{width:120px; height:100px;}
.main-nav li.projects a{background-position: -120px 0px;}
.main-nav li.projects a:hover{background-position: -120px -100px;}
.main-nav li.projects a.selected{background-position: -120px -100px;}
				
.main-nav li.gigs{width:120px; height:100px;}
.main-nav li.gigs a{background-position: -240px 0px;}
.main-nav li.gigs a:hover{background-position: -240px -100px;}
.main-nav li.gigs a.selected{background-position: -240px -100px;}			
		
.main-nav li.media{width:120px; height:100px;}
.main-nav li.media a{background-position:-360px 0px;}
.main-nav li.media a:hover{background-position:-360px -100px;}
.main-nav li.media a.selected{background-position:-360px -100px;}

.main-nav li.latest{width:120px; height:100px;}
.main-nav li.latest a{background-position:-480px 0px;}
.main-nav li.latest a:hover{background-position:-480px -100px;}
.main-nav li.latest a.selected{background-position:-480px -100px;}

.main-nav li.shop{width:120px; height:100px;}
.main-nav li.shop a{background-position:-600px 0px;}
.main-nav li.shop a:hover{background-position:-600px -100px;}
.main-nav li.shop a.selected{background-position:-600px -100px;}

.main-nav li.contact{width:120px; height:100px;}
.main-nav li.contact a{background-position:-720px 0px;}
.main-nav li.contact a:hover{background-position:-720px -100px;}
.main-nav li.contact a.selected{background-position:-720px -100px;}




nav select {
  display: none;
  width: 90%;
  margin-left: 15px;}

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
  .home-button     { display: none; }
  .right-side {border-left: 0px solid #fff;}
}



/*Sub Nav*/

ul.sub-nav{margin:0px 0px 30px 0px; padding:0; list-style:none; clear:both;
}
	
.sub-nav li{overflow:hidden; text-indent:0px; display:inline;
	margin-right:10px;
	text-align: center;
	 clear: right;
	 font: 18px/22px 'Special Elite', cursive;
	 
 }
	
.sub-nav li a{background:url('../images/sub-nav-sprite.png') no-repeat; width:100%; height:100%; display:block; text-decoration: none; clear: both; padding-top: 150px;
}
			
.sub-nav li.projects {width:140px; height:210px;}
.sub-nav li.projects a{background-position: 0px 0px;}
.sub-nav li.projects a:hover{background-position: 0px -210px;}
.sub-nav li.projects a.selected{background-position: 0px -210px;}
			
	
.sub-nav li.news {width:140px; height:210px;}
.sub-nav li.news a{background-position: -140px 0px;}
.sub-nav li.news a:hover{background-position:-140px -210px;}
.sub-nav li.news a.selected{background-position:-140px -210px;}
				
.sub-nav li.videos {width:140px; height:210px;}
.sub-nav li.videos a{background-position: -280px 0px;}
.sub-nav li.videos a:hover{background-position:-280px -210px;}
.sub-nav li.videos a.selected{background-position:-280px -210px;}


ul.sub-nav a {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
 
ul.sub-nav li:nth-child(even) a {
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
 
ul.sub-nav li:nth-child(3n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: 3px;
}

/*Images*/

.display-image-ccw{
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg); 
	z-index: 20;
}

.display-image-cw{
	-webkit-transform: rotate(3deg); 
	-moz-transform: rotate(3deg); 
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg); 
	z-index: 10;
}

.display-image-lft {
	text-shadow: 0 0 1px;
	display: block;
	left: -30px;
}
.display-block-setright {
	position: relative;
	left: 750px;
	top: -70px;
}

.display-block-setleft {
	position: relative;
	left: 140px;
	top: -90px;
}

.display-block-sethigh {

position: relative;
left: 50px;
top: 30px;
	
}

.project-image {
	border: 10px solid #f7f6f5;
	-moz-box-shadow: 2px 2px 2px #adaaaa;
	-webkit-box-shadow: 2px 2px 2px #adaaaa;
	box-shadow: 2px 2px 2px #adaaaa;
	margin-top: 40px;
}

.float-left {
	float: left;
	margin: 4px;
}

.float-right {
	float: right;
	margin: 4px;
}


.right-side {
	border-left: 1px dashed #4a3823;
}

.shadow {
	-moz-box-shadow: 2px 2px 2px #2f2d2d;
	-webkit-box-shadow: 2px 2px 2px #2f2d2d;
	box-shadow: 2px 2px 2px #2f2d2d;
}

img.blog-image {
	padding: 10px;
	border: 1px solid #333;
}

li.border img {
	outline: 3px solid #fff;
}


/*Blockquotes*/

blockquote {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom:  0px;
	font: 16px/20px 'Special Elite', cursive;
	color: #4a3823;
	padding: 10px 10px 0px 10px;
	border: 0px;
}

cite {
	margin-left: 0px;
	font: 16px/16px 'Special Elite', cursive;
	color: #4a3823;
	padding: 0px 0px 0px 0px;
	margin-left: 20px;
}

/*Reviews Articles*/

article {
	margin: 0 40px 20px 20%;
	}
article header h2 {
	margin: 0 0 15px 0;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.3;
	}
article aside {
	float: left;
	width: 20%;
	margin-left: -25%;
	font-size: 18px;
	line-height: 1.3em;
	color: #000;
	}
@media screen and (max-width: 700px) {
	article aside {
		float: none;
		width: auto;
		margin: 0 0 20px 0;
		line-height: 1.5;
		}
	}
article p {
	margin: 0 0 20px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
	}
article footer {
	font-size: 14px;
	color: #999;
	margin-top: 0px;
	margin-bottom: 40px;
	}				

/*Links*/

a {
	text-decoration: none;
	colour: #4a3823;
}

a:hover {
	color: #ac5f0b;
}



/*Lists*/

ul.media-list li{
	display: inline-block;
	padding-left: 10px;
	padding-top: 20px;
}

ul.social-list li {
	margin-top: 40px;
	display: inline;
}

a.download {
	font-size: 28px!important;
}

/*Forms*/

#contact-form {
	margin-top: 50px;
}

form-title {
	clear: both;
}

label {
	font-size: 18px;
	padding-bottom: 10px;
	padding-top: 10px;
}

label.typewriter {
	font: 16px/22px 'Special Elite', cursive;
}

input.email {
	color: #433004;
}
input, textarea {
	width: 350px !important;
	display:1lock;
   font: 16px/22px 'Special Elite', cursive;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   margin-bottom: 25px;
   background: transparent;
   border: 1px solid #726349;
   height: 40px;
}

input:focus, textarea:focus {
	border:1px solid #ffffff;
}


textarea {
	height: 150px;
}

#mce-EMAIL {
	background-color: #f2efe7;
	-moz-box-shadow: 1px 1px 1px #545450;
	-webkit-box-shadow: 1px 1px 1px #545450;
	box-shadow: 1px 1px 1px #545450;
	border: 0px solid #333;
	opacity: 0.8;
	-webkit-border-radius: 0px;
	border-radius: 0px;

}

/*Buttons*/
	  
	  
	  input[type="submit"] {
	  width:228px;
	  height:40px;
	  background: none;
	  border:none;
	  margin-top:20px;
	  cursor:pointer;
	  font: 20px "Special Elite", cursive;
	  text-align: left;
  }
	  
	 input[type="submit"]:hover {
	  color: #daaf66;
  }

/*Tables*/

.paper-content {
	padding: 40px 10px 50px 30px;
}


td {
	font-size: 16px;
	line-height: 34px;
	padding-right: 25px;
}

th {
	text-align: left;
	font-size: 16px;
	line-height: 34px;
	text-transform: uppercase;
	padding-right: 25px;
	font-weight: bold;
}


/*Tabs*/

ul.tabs {
		display: block;
		margin: 0 20px 0px 20px;
		padding: 10;
		border-bottom: none; }
	
	ul.tabs li {
		display: block;
		width: auto;
		height: 60px;
		padding: 60;
		float: left;
		margin-bottom: 0; 
		margin-right: 3px;		
	}
	
	ul.tabs li a {
		display: block;
		text-decoration: none;
		width: auto;
		height: 50px;
		padding: 10px 30px 20px 30px;
		line-height: 30px;
		border: none;
		font-size: 18px;
		max-width: 100%;
		height: auto;
		background: url('../images/small-paper-light.png') repeat-y left top;
	}
	
	
		
	ul.tabs li a:hover {
		height: 50px;
		position: relative;
		border-top: #fff solid 0px;
		border-left: #fff solid 0px;
		border-right: #fff solid 0px;
		margin: 0 0 0 0px;
		background-size: 100% 40px;
		max-width: 100%;
		height: auto;
		background: url('../images/small-paper-light.png') repeat-y left top;

	}
	
	ul.tabs li a.active {
		height: 50px;
		position: relative;
		border-top: #fff solid 0px;
		border-left: #fff solid 0px;
		border-right: #fff solid 0px;
		margin: 0 0 0 0px;
		background-size: 100% 40px;
		background: url('../images/small-paper.jpg') repeat-y left top;
		max-width: 100%;
		height: auto;
		padding-bottom: 20px;
		-moz-box-shadow: 1px -1px 1px #77776c;
		-webkit-box-shadow: 1px -1px 1px #77776c;
		box-shadow: 1px -1px 1px #77776c;
	}
		
		
		
	ul.tabs li:first-child a.active {
		margin-left: 0;
	}
	
	ul.tabs li:first-child a {
		border-width: 0px;
}

	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }
	
	
	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }
	  
	  #tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7, #tab8, #device-accordion {
	  	padding-top: 20px;
	  	background: transparent;
	  	min-height: 650px;
	  }
	  
	 ul.tabs li a {
	 	font-size: 20px;
	 	}
	

/*Blog*/

li.post-tag-list {
	float:  left;
}

li.post-tag-list:after {
		content: '\0000a0|\0000a0'; }
}

li.sidebar-tag-list {
	height: 15px;
}



ul.slats li {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #eee;
	}
ul.slats li:last-child {
	margin: 0;
	padding: 0;
	border-bottom: none;
	}
ul.slats li h4 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.1;
	}
ul.slats li h4 a img {
	float: left;
	margin: 0 10px 0 0;
	padding: 4px;
	border: 1px solid #eee;
	}
	
ul.slats li h3 a:hover img {
	background: #eee;
	}
	
	
ul.slats li span.meta {
	display: block;
	font-size: 12px;
	color: #5a5a5a;
	padding-top:  20px;
	}	


ul.tags {
	width: 100%;
	}
ul.tags li a {
	display: block;
	padding: 0px 8px;
	}
ul.tags li a span.meta {
	color: #000;
	}		
	

/*Events Listing*/

ul.event-listing li {
	margin: 5px 0 10px 0;
	padding: 5px 0 10px 0;
	border-bottom: 1px dashed #000;
	}
	
ul.event-listing li:last-child {
	margin: 0;
	padding: 0;
	border-bottom: none;
	}

ul.event-listing li p {
	font-size: 18px;
	line-height: 1.4;
	color: #000;
	}
	
ul.event-listing li span.details {
	display: block;
	font-size: 18px;
	color: #6c6767;
	line-height: 1.4;
	}			
				
				
/*Video Embeds*/

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}		

/*Footer*/

footer {
	margin-top: 50px;
}


/*Mail Chimp*/

#mc-embedded-subscribe-form {
	background: none;
}

.sign-up {
	float: left;
}

#mc_embed_signup input.button {
	background: #f5f5f5 url('../images/cream_dust.jpg') no-repeat left top;
	font: 18px/22px 'Special Elite', cursive;
	color: #653e0b;
	width: 30% !important;
	-moz-box-shadow: 1px 1px 1px #8c8686;
	-webkit-box-shadow: 1px 1px 1px #8c8686;
	box-shadow: 1px 1px 1px #8c8686;
}

#mc_embed_signup input.button:hover {
	background: #f5f5f5 url('../images/cream_dust.jpg') no-repeat left top;
	font: 18px/22px 'Special Elite', cursive;
	color: #ed7f33;
}

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}


.scale {
	max-width: 100%; }
	
	
@media screen and (max-width: 1024px) { /* Specific to this particular image */
	img.bg {
		left: 50%;
		margin-left: -512px;   /* 50% */
	}
}


#mc_embed_signup input {
	border: 3px solid #333;
}


.top-padding {
	padding-top: 30px;
}


/* #Page Styles
================================================== */

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

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

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

	/* 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; }
*/