.iphone {
	position: absolute;
	left: 50%;
	top: 0px;
	width: 190px;
	height: 353px;
	background: url(../images/iphone_metra_map.png);
	margin-top: 33px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 160px;
}

.headline {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
	font-variant: normal;
	letter-spacing: -0.05ex;
	line-height: 20px;
}

.title {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #ffffff;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

.color {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #999999;
	line-height: 15px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

.copy {
	padding: 0px 5px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #999999;
	line-height: 15px;
	letter-spacing: 0.0ex;
	font-weight: normal;
	font-variant: normal;
	text-decoration: none;
}
.date {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #454545;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

.names {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #999999;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

.city {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

.small_grey {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 6px;
	color: #4c4c4c;
	line-height: 9px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
}
.proj_white {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
}
.proj_grey {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 9px;
	color: #4c4c4c;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: normal;
	font-variant: normal;
}
.proj_comp {
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: normal;
	font-variant: normal;
}

a:link {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}
a:visited {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}
a:hover {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #ffffff;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}
a:active {
	padding: 0px 0px 0px 0px;
	font-family: "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 12px;
	letter-spacing: 0.0ex;
	font-weight: bold;
	font-variant: normal;
	text-decoration: none;
}

#appssection{
	width: 0px;
	height: 0px;
	display: block;
}

#newssection{
	width: 0px;
	height: 0px;
	display: block;
}

#aboutsection{
	width: 0px;
	height: 0px;
	display: block;
}

/* Gallery styles */

#main{
	margin:0px, 0px, 0px, 0px;
	text-align:left;
	width:960;
	position:relative;
}

#gallery{
	border: 0px;
	background: #000000;
	width:960px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:408px;
	width:725px;
	margin-right:0px;
	border: 0px;
	/* jQuery changes the width later on to the sum of the widths of all the slides. */

	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	width:230px;
	height:408px;
	background:#000000;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:230px;
	display:inline-block;
	list-style:none;
	height:42px;
	overflow:hidden;
	background: #000000;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background: #222222;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background: #151515;
}

li.act a{
	cursor:default;
}


li a{
	height:42px;
	padding-top:0px;
}

a img{
	border:none;
}
