<style>
		

		
		body{
		background:url(../images/light_tile.jpg);
		}
		
		#content{ 
		width:610px;
		margin:0 auto;
		padding:0;
		padding-top:150px;
		padding-bottom:-150px;
		height:500px;
				
	}
		
		
		#rationale{
			background:#FFF;
			float:left;
			width:300px;
			height:440px;
			padding:10px;
		}
		
	#rationale h4{
	font-family:'Helvetica', sans-serif;
	font-weight:700;
	font-style:none;
	text-shadow:none;
	border-bottom:2px solid #999999;
	padding-bottom:5px;	
	line-height:100%; 
	letter-spacing:0.26em; 
	color:#000; 
}

#rationale p{
	font-family:'Helvetica', sans-serif;
	font-weight:400;
	font-size:11px;

	padding-top:5px;
	color:#000;
}

#rationale a:link{
	text-decoration:none;
	color:rgb(102,102,102);
}

#rationale a:visited{
	text-decoration:none;
	color:#000;
}
#rationale a:hover{
	text-decoration:none;
	color:rgb(102,102,102);
}
			
		#project{
		float:right;
		width:300px;
		height:500px;
		}
		
		#navigation{
			height:50px;
			width:300px;
			float:left;
			margin-top:10px;
		}
		
		#previous{
		background:#000;
		height:50px;
		width:50px;
		float:left;	
		}
		
		#previous p{
		font-family:'Helvetica', sans-serif;
		font-weight:700;
		font-size:40px;
		margin-top:-2px;
		color:#fff;
		text-align:center;
		}
		
		#previous:hover{
		background:#222;
		-webkit-transition: background-color 500ms linear;
		-moz-transition: background-color 500ms linear;
		-o-transition: background-color 500ms linear;
		-ms-transition: background-color 500ms linear;
		transition: background-color 500ms linear;
		}
		
		#work{
		background:#000;
		height:50px;
		width:180px;
		float:left;
		margin-left:10px;	
		}
		
		#work p{
		font-family:'Helvetica', sans-serif;
		font-weight:900;
		font-size:15px;
		margin-top:16px;
		color:#fff;
		text-align:center;
		}
		
		#work:hover{
		background:#222;
		-webkit-transition: background-color 500ms linear;
		-moz-transition: background-color 500ms linear;
		-o-transition: background-color 500ms linear;
		-ms-transition: background-color 500ms linear;
		transition: background-color 500ms linear;
		}
		
		#next{
		background:#000;
		height:50px;
		width:50px;
		float:right;
		}
		

		#next:hover{
		background:#222;
		-webkit-transition: background-color 500ms linear;
		-moz-transition: background-color 500ms linear;
		-o-transition: background-color 500ms linear;
		-ms-transition: background-color 500ms linear;
		transition: background-color 500ms linear;
		}
		
		#next p{
		font-family:'Helvetica', sans-serif;
		font-weight:700;
		font-size:40px;
		margin-top:-2px;
		color:#fff;
		text-align:center;
		}
		
		
		
		
		
		
		
		
		
		
		
		
		

						
		.details{ margin:15px 20px;
		 }	
		
		.details h4{ font:600 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
		    line-height:160%; 
			color:#fff; 
			text-shadow:1px 1px 0 rgb(0,0,0); 
			
			}
		
		.details p{ font:300 9px 'Lucida Grande', Tahoma, Verdana, sans-serif;
		   color:#aaa;
		   text-shadow:1px 1px 0 rgb(0,0,0);
		   }
		   
		   .mosaic-block a{
			   text-decoration:none;
		   }
		

					
		header{
		position:fixed;
		z-index:10;
		background:#000;
		width:100%;
		height:100px;
	}
	
			

	
	#filter{
		background:rgb(255,255,255);
		width:830px;
		margin:0 auto;
		height:15px;
		margin-bottom:5px;
		text-align:center;
		padding:1px;
	}
	
	#filter p{
	font-family:'Helvetica', sans-serif;
	font-size:11px;
	font-weight:700;
	font-style:none;
	text-shadow:none;
	padding-bottom:-5px;	
	line-height:100%; 
	letter-spacing:0.26em; 
	color:#000; 	
	}
	
	#filter a{
	font-family:'Helvetica', sans-serif;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.16em; 
	color:rgb(51,51,51);
	text-decoration:none;
	}
	
	#filter a:hover{
	color:rgb(153,153,153);
	}
	
	#filter a:visited{
	color:rgb(51,51,51);
	}
	
	
	#logo{
	background:url(../images/cruiselogo.png);
	float:left;
	margin-top:-6px;
	width:110px;
	height:60px;
	}
	#logo:hover{
	background:url(../images/cruiselogo_hover.png);
	width:110px;
	height:60px;
	}
	
	#mintees{
	background:url(../images/mintees.png);
	width:23px;
	height:32px;
	float:left;
	margin-right:15px;
	
	}
	
	#mintees:hover{
	background:url(../images/mintees_hover.png);
	width:23px;
	height:32px;
	}
	
	#dribbble{
	background:url(../images/dribbble.png);
	width:32px;
	height:32px;
	float:left;
	margin-right:15px;
	}
	
	#dribbble:hover{
	background:url(../images/dribbble_hover.png);
	width:32px;
	height:32px;
	}
	
	#facebook{
	background:url(../images/facebook.png);
	width:32px;
	height:32px;
	float:left;
	margin-right:15px;
	}
	
	#facebook:hover{
	background:url(../images/facebook_hover.png);
	width:32px;
	height:32px;
	}
	
	#instagram{
	background:url(../images/instagram.png);
	width:32px;
	height:32px;
	float:left;
	}
	
	#instagram:hover{
	background:url(../images/instagram_hover.png);
	width:32px;
	height:32px;
	
	}


	
	nav{
	float:left;
	list-style:none;
	padding-top:5px;
	padding-left:25px;
	
	}
	
	#headerwrap{
	margin-top:25px;
	padding-left:25px;	
	}
	
	#headerlinks{
		margin-top:5px;
		float:right;
		padding-right:25px;

	}
	
	#headerlinks img{
		padding-left:5px;
	}
	
	* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}

    .footer, .push{
    clear: both;
    }


.push{
height:100px;
width:100%;
}


#footercontentwrapper{
width:840px;
height:250px;
margin:0 auto;


}

.footercontent{

width:260px;
height:235px;
float:left;
padding:10px;	
margin:10px 10px 0px 10px;
}

.footer{
background:#000;
width:100%;
height:250px;


}

.footer h4{
	font-family:'Helvetica', sans-serif;
	font-weight:700;
	font-style:none;
	text-shadow:none;
	border-bottom:2px solid #999999;
	padding-bottom:5px;	
	line-height:100%; 
	letter-spacing:0.26em; 
	color:#fff; 
}

.footer p{
	font-family:'Helvetica', sans-serif;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.16em; 
	padding-top:5px;
	color:#fff; 
}

.footercontent a:link{
	text-decoration:none;
	color:rgb(255,255,255);
}

.footercontent a:visited{
	text-decoration:none;
	color:rgb(255,255,255);
}
.footercontent a:hover{
	text-decoration:none;
	color:#999999;
}

.mosaic-block{
	border-style:none;
}

@media(max-width:768px){ /*IPAD/TABLET*/
		#filter{
		background:rgb(255,255,255);
		width:630px;
		margin:0 auto;
		height:30px;
		margin-bottom:5px;
		text-align:center;
		padding:1px;
		
	}
	
		#filter p{
	font-family:'Helvetica', sans-serif;
	font-size:11px;
	font-weight:700;
	font-style:none;
	text-shadow:none;
	padding-bottom:-5px;	
	line-height:100%; 
	letter-spacing:0.26em; 
	color:#000; 
	line-height:120%;
	}
	
	#filter a{
	font-family:'Helvetica', sans-serif;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.16em; 
	color:rgb(51,51,51);
	text-decoration:none;
	line-height:120%;
	}
		
		#content{ 
		width:610px;
		margin:0 auto;
		padding:0;
		padding-top:150px;	
		}
		
		#headerlinks{
		display:none;
		}
		
		.footer{
		background:#000;
		width:100%;
		height:250px;
		}
		
		#footercontentwrapper{
		width:630px;
		height:250px;
		margin:0 auto;
		}

		.footercontent{
		width:200px;
		height:235px;
		float:left;
		padding:10px;	
		margin:5px 5px 0px 5px;
		}	
	}
	
	@media(max-width:563px){ /*IPHONE*/
		#content{ 
		width:300px;
		margin:0 auto;
		padding:0;
		padding-top:40px;
		padding-bottom:500px;
		}
		
		#rationale{
		background:#FFF;
		float:left;
		width:300px;
		height:440px;
		padding:10px;
		}
		
		#project{
		float:left;
		width:300px;
		height:500px;
		}
		
		#navigation{
		height:50px;
		width:300px;
		float:left;
		margin-top:10px;
		margin-bottom:40px;
		}
		
/*		#previous{
		background:#000;
		height:50px;
		width:50px;
		float:left;	
		}
		
		#next{
		background:#000;
		height:50px;
		width:50px;
		float:right;
		}
		
		#work{
		background:#000;
		height:50px;
		width:180px;
		float:left;
		margin-left:10px;	
		}
		
		*/
		
		.push{
		height:500px;
		width:100%;
		}
		
		
		
		#filter{
		background:rgb(255,255,255);
		width:200px;
		margin:0 auto;
		height:60px;
		margin-bottom:5px;
		text-align:center;
		padding:1px;
		
	}
	
	#filter p{
	font-family:'Helvetica', sans-serif;
	font-size:11px;
	font-weight:700;
	font-style:none;
	text-shadow:none;
	padding-bottom:-5px;	
	line-height:100%; 
	letter-spacing:0.26em; 
	color:#000; 
	line-height:120%;
	}
	
	#filter a{
	font-family:'Helvetica', sans-serif;
	font-weight:400;
	font-size:11px;
	letter-spacing:0.16em; 
	color:rgb(51,51,51);
	text-decoration:none;
	line-height:120%;
	}
		
		#logo{
		background:url(../images/cruiselogo.png);
		margin-top:10px;
		width:110px;
		height:60px;
		}
		
		nav{
		text-align:center;
		}
		
			#headerwrap{
		padding-left:110px;	
		}
		
		header{
		position:static;
		z-index:10;
		margin-top:-25px;
		background:#000;
		width:100%;
		height:160px;
		}
				
		#headerlinks{
		display:none;
		}
		
		.footer{
		background:#000;
		width:100%;
		height:620px;
		}
		
		#footercontentwrapper{
		width:200px;
		height:600px;
		margin:0 auto;
		}

		.footercontent{
		width:200px;
		height:200px;
		float:left;

		}	
	}
	
	
		
		</style>
		
		
		
		
