/* @override http://shacked.ocupopdev.com/css/style.css */


/* Global Elements
----------------------------------------------------------------------------------------------------*/

body { 
	background:url(../img/shacked-bg.png);
	border-top:22px solid #000;
	font-size:100%;
	font-family:"Georgia", serif;
	}
	

#wrapper {
	width:auto;
	margin:0 auto;
	max-width:1000px;
	}	
	
article {
	padding-bottom:50px;
	}
	
h1 {
	font-weight:normal;	
	margin-left:6px;
	padding:0;
	letter-spacing:-2px;
	}
	
h1.biggie {
	font-family:"futura-pt";
	font-weight:700;
	font-size:68px;
	margin:-16px 0 0 0;
	padding:0;
	text-transform:uppercase;
	}
	
h1.homeh1 {
	width:326px;
	float:left;
	}
	
h1.centr {
	text-align:center;
	}
	
.about-intro p, .about-intro h2 {
	width:300px;
	float:left;
	margin-left:25px;
	}
	

	
#about-surf {
	border:1px solid #000;
	float:left;
	margin-right:50px;
	margin-bottom:100px;
	}
	
.introhr {
	height:0;
	border-top:1px solid #000;
	padding-bottom:20px;
	}
	
h2 {
	font-size:28px;
	font-weight:bold;	
	margin-left:6px;
	margin-bottom:12px;
	padding:0;
	font-style:italic;
	}
	
h3 {
	font-size:20px;
	font-weight:bold;	
	margin-left:6px;
	margin-bottom:12px;
	padding:0;
	font-style:italic;
	}
	
a.trigger {
	font-size:1em;
	color:#000;
	text-decoration:none;
	margin:6px;
	display:block;
	position: relative;
	padding:0;
	}
	
a.trigger img {
	position:absolute;
	top:0;
	right:0px;
	-webkit-transition: -webkit-transform 300ms ease-in-out;
	-moz-transition: -moz-transform 300ms ease-in-out;
	-ms-transition: -ms-transform 300ms ease-in-out;
	-o-transition: -o-transform 300ms ease-in-out;
	transition: transform 300ms ease-in-out;
	}
	
a.trigger:active img, a.trigger img.active
{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
	
p {
	font-size:.875em;
	line-height:1.3125em;
	margin:0 6px 12px;
	font-style:italic;
	padding:0;
	}	
	
p.far {
	width:65%;
	float:right;
	}
	
li {
	font-size:.875em;
	line-height:1.3125em;
	margin:0 6px 12px;
	font-style:italic;
	list-style-type:disc;
	margin-left:70px;
	}

.sectionhr {
    margin:0;
    height:0;
    color:#c6c6c6;
    background-color:#c6c6c6;
    border-bottom:1px solid #fff;
    margin-top:-50px;
    z-index:1;
    position:relative;
    }
	
#logo {
	width:72px;
	margin:40px auto;
	display:block;
	}
	
.section-header {
	margin-bottom:44px;
	}
	
	
	
#logotype {
	max-width:100%;
	display:block;
	margin:28px auto;
	}
	
	
.pages {
	padding:0 0;
	position:relative;
	}
	
#appnav {
	width:400px;
	height:50px;
	margin:0 auto;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	}
	
#staffnav {
	width:400px;
	height:50px;
	margin:0 auto;
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	}
	
#appnavcontainer {
	background:rgba(0,0,0,0.1); /*url('/img/black20.png'); */
	height:100px;
	}
	
#staffnavcontainer {
	background:rgba(0,0,0,0.1); /* url('/img/black20.png'); */
	height:100px;
	}
	
.app-wrapper {
	background:#fff;
	float: left;
	width: 1000px;
	}
	
.icon-nav {
	width:50px;
	height:50px;
	margin:0 7px;
	}
	
.icon-nav {
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.bioOuter {
  width: 1000px;
  overflow: hidden;
}	

.bioInner {
  width: 10000px;
  position: relative;
}

.biobox {
	background:#fff;
	height:332px;
	float: left;
	width: 1000px;
	}
	

	
.biocontent {
	padding:23px 38px;
	}
	
.biophoto {
	height:332px;
	width:332px;
	float:left;
	background:#000;
	margin-right:38px;
	}
	
.biolabel {
	text-align:center;
	width:200px;
	margin:0px auto;
	display:none;
	/* margin-top:-10px; */
	font-size:16px;
	font-style:italic;
	font-weight:bold;
	color:rgb(0,0,0);
	}
	
.app-layout {
	padding:20px;
	}
	
.app-layout p {
	font-size:22px;
	line-height:34px;
	}
	
.left p, .left ul {
	margin-left:60px;
	}
	
.right p, .right ul {
	margin-right:60px;
	}
	
.app-layout li {
	font-size:22px;
	line-height:34px;
	margin:0;
	padding:0;
	margin-bottom:18px;
	}
		
.app-header {
	background:#000;
	margin:0;
	padding:0;
	}
	
.app-header h1 {
	color:#fff;
	}
	
.app-footer {
	margin-bottom: 50px;	
}

.app-footer-img {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}
	
.port img {
	max-width:250px;
	}
	
.port.ipad img {
	max-width:400px;
	}
	
.port.center img {
	max-width:70%;
	margin-left:15%;
	}
	
.port.iphone.left {
	float:left;
	width:33%;
	}
	
.port.ipad.left {
	float:left;
	width:50%;
	}
	
.port.ipad.right {
	float:right;
	width:50%;
	}
	
.iphone img {
	margin:0 30px;
	}
	
.app-narrative {
	padding-top:70px;
	}

.app-narrative p {
    color:rgba(0,0,0,0.7);
    }
    
.app-narrative li {
    color:rgba(0,0,0,0.7);
    }
	
.app-narrative.right {
	float:right;
	width:65%;
	}
	
.app-narrative.ipad.right {
	float:right;
	width:50%;
	}
	
.app-narrative.ipad.left {
	float:left;
	width:50%;
	}
	
.port.iphone.right {
	float:right;
	width:33%;
	}	
	
.app-narrative.left {
	float:left;
	width:65%;
	}

.app-narrative.left h2 {
    margin-left:60px;
}

.app-narrative.center {
    margin-top:-140px;
	max-width:70%;
	margin-left:15%;
	}
	
.app-narrative-stacked {
	height:700px;
	background:url('/img/iphone-stack.png');
	background-repeat:no-repeat;
	background-position:80% 80%;
	}
	
.stacked {
	position:absolute;
	bottom:0;
	right:0;
	}
	
.ruler {
	border-bottom:1px solid #000;
	height:0px;
	background:transparent;
	margin:0;
	padding:0;
}
	
.trigger {
	font-size:24px;
	}

.trigger img {
	position:absolute;
	right:6px;
	top:10px;
	}


#about article, #founders article, #work article, #contact article, #blog article {
	display:none;
	margin-top:16px;
	}


#blog {
	}

#blog #slideshow {
	width:auto;
	height:1000px;
	}

	
#blog #slideshow div {
	width:auto;
	height:auto;
	}
	
#blog #slideshow div img {
	margin-bottom:16px;
	}
	
#blog #slideshow div h3 {
	display:none;
	}
	
#nav {
	width:200px;
	height:30px;
	margin:10px auto;
	}

#nav li {
	list-style-type:none;
	margin:0 5px;
	padding:0;
	float:left;
	}

	
#nav li a {
	display:block;
	height:30px;
	width:30px;
	background:#000;
	}
	
footer {
	height:315px;
	background:url(../img/footer-bg.jpg);
	margin-top:45px;
	}
	
	


/* work styles */

.appscontainer-outer {
  overflow: hidden;
  width: 1000px;
  
}

.appscontainer-inner {
  width: 20000px;
  position: relative;
}



/* footer styles */
	
#footercontainer {
	max-width:1000px;
	margin:0 auto;
	padding-top:30px;
	}
	
#socials {
	width:350px;
	float:left;
	}
	
#copy {
	width:350px;
	float:left;
	color:#fff;
	}	
	
#footernav {
	width:70px;
	float:right;
	}
	
#footernav li {
	list-style-type:none;
	margin:0;
	padding:0;
	}

#footernav a {
	color:#fff;
	text-decoration:none;
	}
	
#footerhr {
	width:100%;
	height:0;
	border-top:1px solid #D4D4D4;
	margin:10px 0;
	}

#footerappnav {
    margin-top:10px;
    }

.footer-icon-nav {
	width:50px;
	height:50px;
	margin:0 7px;
	}
	
.about-intro h2 a {
	font-size:18px;
	line-height:18px;
	color:#000;
	}
	
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}