/* 	Shane Seminole Mielke
	2Advanced Studios
*/
/**********************************************************************************
GENERAL LAYOUT
**********************************************************************************/

html body {
	margin: 0px;
	padding: 0px;
	background-color: #000000;
	font: normal 18px Verdana, Helvetica, Arial, sans-serif;
	color: #6fa2a3;
	text-align: left;
	background-position: top;
	background-repeat: no-repeat;
	}
	html body.home{
		background-image: url(../assets/images/mobile/header_about-wide.jpg);
		}
	html body.about{
		background-image: url(../assets/images/mobile/header_contact-wide.jpg);
		}
	html body.work {
		background-image: url(../assets/images/mobile/header_work-wide.jpg);
		}
	html body.contact {
		background-image: url(../assets/images/mobile/header_contact-wide.jpg);
		}
	html body.portfolio {
		background-image: url(../assets/images/mobile/header_portfolio-wide.jpg);
		}

	img {border-style: none;}
	
	a:link {color: #d3fbfe; font-weight: bold; text-decoration: none;}
	a:visited {color: #d3fbfe; font-weight: bold; text-decoration: none;}
	a:hover {color: #edc955; font-weight: bold; text-decoration: none;}
	a:active {color:#d3fbfe; font-weight: bold; text-decoration: none;}
	
	.clearboth { clear: both; }

/**********************************************************************************
NAVIGATION
**********************************************************************************/
	#wrapper {
		width: 100%;
		overflow: hidden;
	}
	#container {
		max-width: 1024px;
		margin: 0 auto;
		padding: 0;
		position: relative;
		}
		
	#header {
		width: 100%;
		height: 80px;
		margin: 0 auto;
		padding: 0;
		background-color: #000;
		position: relative;
		z-index:12;
		}
		a.logo_cont {
			float: left;
			display: block;
			margin: 15px 0 0 15px;
			padding: 0 18px 18px 18px;
			background-color: #000;
			}
		.logo {
			height: 3.5em;
			}
		
		#nav {
			max-width: 450px;
			margin: 25px 0 0 0;
			padding: 0; 
			text-align: right;
			float: right;
			font: normal 24px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			position:relative;
			white-space: nowrap;
			overflow: hidden;	
			}
			#nav  ul {
				margin: 0; 
				padding: 0; 
				list-style: none outside;
				position: relative;
				}
			#nav ul li {
				display: inline;
				margin: 0 25px 0 0;
				padding: 0; 
				vertical-align: middle;
				}
			#nav ul li a {
				color: #9ff9fa;
				text-decoration: none;
				}
			#nav ul li a:hover {
				color: #edc955;
				}
			#nav ul li.active a {
				color: #edc955;
				}
		
/**********************************************************************************
CONTENT AREA
**********************************************************************************/

	#banner {
		max-width: 980;
		min-width: 500px;
		height: 350px;
		margin: 0px;
		padding: 0px;
		}	
		#arrow_left{
			display: block;
			float: left;
			margin: 50px 0px 0px 0px;
		}
		#animations{
			display: block;
			float: left;
			margin: 0px;
			padding: 0px;
			max-width: 420px;
			height: 350px;
			overflow: hidden;
			position: relative;
			z-index:1;
		}
		#arrow_right{
			display: block;
			float: right;
			margin: 50px 0px 0px 0px;
		}
		a.changepage {
			display: block;
			margin: 0px;
			padding: 0px;
			width: 100px;
			height: 100px;
			text-indent: -9999px;
			border-style: none;
			}
		
	#content {
		width: 100%;
		margin: 0px auto 0px auto;
		padding: 0px;
		}	
			
		.phone {
			margin: -5px 0px 10px 0px;
			padding: 0px 10px 0px 10px;
			float: right;
			background-color: #000;
			color: #fff;
			color: #edc955;
			font: normal 32px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			text-align: center;
			position: relative;
			z-index: 10;
			}
			.phone a{
				opacity: 0;
				color: #fff;
				cursor: text;
				}
			.portfolio #content .phone {
				margin-top: -43px;
				}
		
		#subtitle {
			width: 50%;
			margin: -15px 0 5px 0px;
			padding: 0 5px 0 15px;
			float:left;
			position: relative;
			background-color: #000;
			position: relative;
			z-index: 9;
			/*
			color: #d3fbfe;
			*/
			color: #edc955;
			font: normal 64px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			text-align: left;
			white-space: nowrap;
			overflow: hidden;
			}
			#subtitle span {
				opacity: 0;
			}
				
		#info {
			margin: 0 0 0 15px;
			position:relative;
		}
			
		.subtitle_small {
			font: normal 36px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			margin: 30px 0px 0px 0px;
			padding: 0px;
			color: #edc955;
			}
			
		.map_container {
			background-position: left;
			background-repeat: no-repeat;
			background-image: url(../assets/images/mobile/contact_map2.jpg);
		}
			
		#col1 {
			float: left;
			width: 465px;
			display: block;
			margin: 0px 50px 25px -15px;
			padding: 0px;
			}
			.home #col1 {
				margin: 10px 50px 25px 0px;
			}
		#col2 {
			float: left;
			width: 465px;
			display: block;
			margin: 0px 0px 25px 0px;
			padding: 0px;
			}
			.home #col2 {
				margin-top: -33px;
			}
			.home .subtitle_small {
				margin: 0px;
				}
		.subcontent a.address {
			font-weight: normal;
			color: #6fa2a3;
			text-decoration: none;
			}
	#twitter {
		width: 95%;
	}
	.twitter_feed{
		padding: 10px;
		background-color: #161a1a;
		overflow: auto;
		width: 100%
		}
		.twitter_feed img {
			display: block;
			float: left;
			}
		.twitter_feed span {
			width: 85%;
			display: block;
			float: left;
			}
	
	#footer {
		min-height: 50px;
		margin: 50px auto 0px auto;
		padding: 0px;
		background-color: #000;
		}
		.social {
			display: block;
			margin: 10px;
			float: right;
			}
			.social  ul {
				margin: 0; 
				padding: 0; 
				list-style: none outside;
				}
			.social ul li {
				display: inline;
				margin: 0 5px 0 0;
				vertical-align: middle;
				}
				
			.social img {
				width: 32px;
			}
				
			.social a{
				opacity: 1;
				}
				
			.social a:hover{
				opacity: .7;
				}
		
		.copyright {
			display: block;
			margin: 10px;
			font-size: 10px;
			color: #666666;
			text-align: left;
			float: left;
			}
		.copyright a {
			font-size: 12px;
			font-weight: bold;
			}
			
	#floor {
		display: block;
		width: 100%;
		height: 256px;
		margin: 0px 0px 0px 0px;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		}
		.home #floor {
			margin: 25px 0px 0px 0px;
			background-image: url(../assets/images/mobile/footer_about.jpg);
		}
		.about #floor {
			margin: 25px 0px 0px 0px;
			background-image: url(../assets/images/mobile/footer_contact.jpg);
		}
		.work #floor {
			margin: 25px 0px 0px 0px;
			background-image: url(../assets/images/mobile/footer_work.jpg);
		}
		.contact #floor {
			margin: 25px 0px 0px 0px;
			background-image: url(../assets/images/mobile/footer_contact.jpg);
		}	
		
		.portfolio #floor {
			background-image: url(../assets/images/mobile/footer_portfolio-wide.jpg);
		}
		
/**********************************************************************************
WORK SECTION
**********************************************************************************/	
		#portfolio_feed {
			width: 980px;
			margin: 25px 0px 50px 0px;
			height:180px;
			position:relative;
		}
			.project_arrow {
				width: 50px;
				margin: 0px;
				padding: 0px;
				float: left;
				}
			#project_container {
				height:275px;
				width:855px;
				overflow:hidden;
				margin: 0px;
				padding: 0px;
				float: left;
			}
			
				#project_imgs {
					float:left;
					display:inline;
					margin:0px;
					padding:0px;
					width: 8000px;
					height: 200px;
					
					-webkit-transition-property: -webkit-transform;
					-webkit-transition-duration: 0.5s;
					-webkit-transition-timing-function: ease-out;
					-webkit-transform: translate3d(0px,0px,0px); 
				}
				#project_imgs a {
					float: left;
				}
				#project_imgs img {
					padding:0px;
					margin: 0px;
					
					-webkit-transform: translate3d(0px,0px,0px); 
				}
				.projectItem {
					float: left;
					width: 280px;
					margin: 0px 7px 0px 0px;
					font-weight: bold;
					color: #fff;
				}

/**********************************************************************************
PORTFOLIO
**********************************************************************************/			
	.portfolio #header {
		}
		
	.portfolio #content {
		min-height:800px;
		margin-top: 80px;
		padding: 0px;
		}
	.mobilenav {
		display: none;
		}
	.flashnav {
		display: block;
		}
		
	.portfolio .project_header {
		margin: 0px;
		padding: 10px;
		background-image: url(../assets/images/mobile/bg_content.png);
		}
		div.header_title{
			margin: 0px;		
			max-width:700px;
			position:relative;
			font: normal 28px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
				/*
				font-size: 14pt;
				font-weight: normal;
				*/
			color: #fff;
			}
		div.header_links{
			margin: 0px;
			font-size: 10pt;
			font-weight: normal;
			color: #666;
			}
			div.header_links a{
				margin: 0px;
				font-size: 10pt;
				font-weight: normal;
				}
	
	.portfolio .project_links {
		display: block;
		max-width: 900px;
		margin: 0px auto 0px auto;
		font-size: 10pt;
		font-weight: bold;
		color: #666;
		}
		div.project_links a{
			font-size: 10pt;
			font-weight: normal;
			}
		.project_links .year {
			width: 210px;
			min-height: 150px;
			margin: 14px 7px 20px 7px;
			position: relative;
			float: left;
			}
		
	.portfolio .project_thumbs {
		display: block;
		max-width: 900px;
		margin: 0px auto 40px auto;
		}
		.portfolio .thumbnail {
			width: 210px;
			height: 130px;
			margin: 14px 7px 0px 7px;
			position: relative;
			float: left;
			overflow: hidden;
			}
			.project_item {
				display: block;
			}
			div.thumbnail a.project_detail {
				opacity: 0; /* revealed on hover with jQuery */
				/* IE hack
				filter: alpha(opacity = 0);
				*/
				position: absolute;
				top: 0px;
				left: 0px;
				width: 210px;
				height: 130px;
				margin: 0;
				padding: 10px;
				font-size: 8pt;
				font-weight: bold;
				text-decoration: none;
				color: #fff;
				background: url(../assets/images/mobile/rollover_thumb.gif) no-repeat top left;
				}
			div.thumbnail a.project_detail strong {
				display: block;
				width: 190px;
				margin: 0;
				font-size: 12pt;
				font-weight: bold;
				color: #ffd564;
				font-family: titilliumtext22LRegular, Helvetica, Arial, sans-serif;
				}
			div.thumbnail a.project_detail em {
				display: block;
				position: absolute;
				bottom: 25px;
				left: 8px;
				margin: 0 0 3px 0;
				font-size: 10pt;
				font-weight: normal;
				font-style: normal;
				color: #8f9797;
				}
			
	#sideNav {
		width:70px;
		float: left;
		}
		#sideNavMenu {
			position:absolute;
			background-image: url(../assets/images/mobile/quicknav/bg_quicknav.png);
			background-repeat: repeat-y;	
			margin: 10px 0px 0px 0px;
			padding: 10px;
			z-index:1;
		}

	.portfolio .project {
		display: block;
		width: 840px;
		margin: 0px 0px 0px 70px;
		background-image: url(../assets/images/mobile/bg_content.png);
		float: left;
		}
		.portfolio .pLogo {
			display: block;
			width: 100px;
			height: 40px;
			margin: 10px;
			padding: 0px;
			float: left;
			}
		
		.portfolio .pDescription {
			margin: 5px 10px 0px 0px;
			padding: 0px;
			height: 40px;
			float: left;
			}
			.pDescription .title {
				margin: 0px;
				padding: 0px;
				font: normal 24px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
				/*
				font-size: 14pt;
				font-weight: bold;
				*/
				color: #FFFFFF;
				}
			.pDescription .role {
				font-size: 10pt;
				color: #abbdc0;
				}
		
		.portfolio .pView {
			display: block;
			margin: 10px 10px 0px 0px;
			float: right;
			}
			.pView a.viewproject {
				display: block;
				margin: 0px;
				padding: 0px;
				width: 140px;
				height: 40px;
				text-indent: -9999px;
				background: transparent url(../assets/images/mobile/btn_viewproject.jpg) no-repeat 0 0;
				border-style: none;
				}
				.pView a.viewproject:hover {
					background-position: -140px 0px;
					}
	
		.portfolio .project_inner{
			display: block;
			margin: 0px 10px 10px 10px;
			padding: 10px;
			background-image: url(../assets/images/mobile/bg_content.png);
			}
			
		.pDivider { 
			display: block;
			width: 800px;
			height: 10px;
			}
			
		.pBack { 
			display: block;
			float: left;
			margin: 0px 0px 0px 20px;
			padding: 0px;
			font-size: 14px;
			font-weight: bold;
			color: #666;
			}
			
		.pTop { 
			display: block;
			float: right;
			margin: 0px 20px 0px 0px;
			padding: 0px;
			font-size: 14px;
			font-weight: bold;
			color: #666;
			}
			
		.pTop a,
		.pBack a{
			font-size: 14px;
			font-weight: normal;
			}
	

/**********************************************************************************
LEGAL
**********************************************************************************/
			
	html body.legal{
		font: normal 12px Verdana, Helvetica, Arial, sans-serif;
		line-height: 20px;
		background-position:top;
		background-image: url(../assets/images/mobile/header_legal.jpg);
		}
	html body.legal #container {
		max-width: 480px;
	}
	html body.legal #banner {
		height: 140px;
	}
	html body.legal #header {
		height: 60px;
	}
	html body.legal #content {
		max-width: 440px;
	}
	html body.legal a.logo_cont {
			margin-left: 0px;
			}
	html body.legal #subtitle {
			font: normal 48px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			}
	html body.legal #nav {
			width: 150px;
			font: normal 14px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			}
	
			

/**********************************************************************************
IPHONE

@media screen and (max-device-width: 480px){		
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 800px) {
@media only screen and (max-device-width: 480px), only screen and (max-device-width: 800px) {
@media only screen and (max-device-width: 480px), only screen and (max-width: 1000px) {
@media only screen and (min-device-width : 320px) and (max-device-width : 1000px) {
	, only screen and (max-device-width: 854px)
@media only screen and (max-device-width: 480px), only screen and (device-width: 854px) {
**********************************************************************************/

@media screen and (max-device-width: 480px) {

html {
	width: 480px;
	}
	
	html body.home{
		background-image: url(../assets/images/mobile/header_about-iphone.jpg);
		}
	html body.about{
		background-image: url(../assets/images/mobile/header_contact-iphone.jpg);
		}
	html body.work {
		background-image: url(../assets/images/mobile/header_work-iphone.jpg);
		}
	html body.contact {
		background-image: url(../assets/images/mobile/header_contact-iphone.jpg);
		}
	html body.portfolio {
		background-image: url(../assets/images/mobile/header_portfolio.jpg);
		}

	#header {
		height: 40px;
		}   
		a.logo_cont {
			margin: 4px 0 0 0;
			padding: 0px;
			}
		.logo {
			height: 2em;
			}
		#nav {
			width: 250px;
			margin: 5px 5px 0 0;
			padding: 0px;
			font: normal 22px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
			}
			#nav ul li {
				margin: 0 10px 0 0;
				}
	
	#banner {
		display: block;
		float: left;
		margin: 0px;
		padding: 0px;
		width: 480px;
		height: 180px;
		margin-top: -19px;
		}
		#arrow_left{
			margin-top: 0px;
		}
		#animations {
			width: 280px;
			height: 180px;
		}
		#arrow_right{
			margin-top: 0px;
		}
		a.changepage {
			height: 180px;
			}
		
	.phone {
		margin: -10px 0px 10px 0px;
		font: normal 24px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
		}
		
		.phone a{
			color: #fff;
			}
			
	#subtitle {
		width: 50%;
		margin: -15px 0 10px 0px;
		padding: 0 5px 0 15px;
		font: normal 48px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
		}
		#info {
			width: 480px;
			margin: 0 0 0 15px;
			position:relative;
		}
		
			.home #col1 {
				margin: 0px 0px 15px 0px;
			}
		.subcontent {
			font-size: 24px;
			margin-bottom: 15px;
			}
			
		#col2 {
			margin-top: 0px;
			margin-left: 0px;
		}
			.home #col2 {
				margin-top: 0px;
			}
		
		.home .subtitle_small {
			margin-top: 10px;
			}
			
		.twitter_feed span {
			width: 85%;
			}
			
		.social {
			width: 100%;
			margin: 0px;
			padding: 0px;
			float: none;
			text-align: center;
		}
		.social ul {
			margin: 0 0 30px 45px;
			}
		.social ul li {
			margin: 0 35px 0 0;
			}
		.social img {
			width: 64px;
		}
		
	.copyright {
		width: 100%;
		margin: 10px 0px 0px 0px;
		padding: 0px;
		float: none;
		text-align: center;
		font-size: 9px;
		}
	.copyright a {
		font-size: 12px;
		}
		
		
	/**********************************************************************************
	IPHONE - WORK SECTION
	**********************************************************************************/	
		#portfolio_feed {
			width: 400px;
			margin: 20px auto 0px auto;
		}
				#project_container {
					width: 280px;
				}

	/**********************************************************************************
	IPHONE - PORTFOLIO SECTION
	**********************************************************************************/	
	.portfolio #content {
		width: 100%;
		min-height:500px;
	}
	.portfolio #header {
		width: 100%;
		}
	.mobilenav {
		display: block;
		}
	.flashnav {
		display: none;
		}
		
	.portfolio .project_thumbs {
		width: 100%;
		padding: 10px;
		}
		.portfolio .thumbnail {
			margin: 10px;
			}
		
	.portfolio .project {
		display: block;
		min-height:600px;
		width: 100%;
		margin: 20px 0px 0px 0px;
		background-image: url(../assets/images/mobile/bg_content.png);
		float: left;
		}
		.pDescription .title {
			font-size: 28px;
			margin: 5px 0px 0px 0px;
			}
		.pDescription .role {
			display: none;
			}
		.portfolio .pView {
			display: none;
		}
		
	.portfolio .project_inner img{
		width: 440px;
	}
		
	.portfolio .project_links {
		font-size: 24pt;
		font-weight: normal;
		}
		.portfolio .project_links {
			display: none;
		}
		div.header_title{
				font-size: 46px;
			}
			.portfolio .archives {
				display: none;
			}
			
		.pTop { 
			font-size: 18px;
			}
			
		.pTop a,
		.pBack a{
			font-size: 18px;
			}
			
	#sideNav {
		display:none;
		}
	.portfolio #footer {
		background-color: #000709;
	}
	.portfolio #floor {
		background-image: url(../assets/images/mobile/footer_portfolio.jpg);
	}	
}


/**********************************************************************************
IPAD
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 800px) {
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-width: 1024px) {
	
	html {
	width: 1024px;
	}
**********************************************************************************/
	
	
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

	html body.home{
		background-image: url(../assets/images/mobile/header_about-ipad.jpg);
		}
	html body.about{
		background-image: url(../assets/images/mobile/header_contact-ipad.jpg);
		}
	html body.work {
		background-image: url(../assets/images/mobile/header_work-ipad.jpg);
		}
	html body.contact {
		background-image: url(../assets/images/mobile/header_contact-ipad.jpg);
		}
	html body.portfolio {
		background-image: url(../assets/images/mobile/header_portfolio.jpg);
		}	
	#info {
		width: 980px;
		}	
	.portfolio #content {
		width: 100%;
	}
	.portfolio #header {
		width: 100%;
		}
	.mobilenav {
		display: block;
		}
	.flashnav {
		display: none;
		}
	#nav {
		width: 300px;
		margin-right: 15px;
		font: normal 28px titilliumtext22LRegular, Helvetica, Arial, sans-serif;
		}
		#nav ul li {
			margin: 0 10px 0 0;
			}
	
	#banner {
		display: block;
		float: left;
		margin: 0px;
		padding: 0px;
		width: 1024px;

		height: 230px;
		}	
		#animations {
			height: 230px;
		}
}