@font-face {
	font-family: HelveticaNeue;
	src: url('fonts/HelveticaNeue.ttf');
}

@font-face {
	font-family: HelveticaNeue;
	font-weight: bold;
	src: url('fonts/HelveticaNeueBold.ttf');
}

@font-face {
	font-family: HelveticaNeue;
	font-weight: 200;
	src: url('fonts/HelveticaNeueLight.ttf');
}


html, body {
	font-family: HelveticaNeue, sans-serif;
	font-size: 12px;
	margin: 0px;
	height: 100%;
	background: #031b30 url(images/main-bg.png) repeat-x left top;
	color: #656565;
}

a {
	text-decoration: none;
	-webkit-transition: color .25s ease-out;
}

a:focus {
	outline: none;
}

img {
	border: none;
}

#notsafari {
	display: none;
	padding: 20px 20px 18px 20px;
	text-align: center;
	color: #000;
	font-size: 15px;
	border-bottom: 5px solid #ccc;
	background-color: #fff;
}

#notsafari a {
	color: #888;
	text-decoration: underline;
}

#notsafari a:hover {
	text-decoration: none;
}

.holder {
	text-align: center;
	min-width: 1078px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
}

.container {
	position: relative;
	margin: 0 60px;
	height: auto !important;
	min-height: 100%;
	min-width: 1078px;
	background: #b4b4b4 url(images/behind-color-top.png) repeat-x left top;
}

.logo-holder {
	position: absolute;
	z-index: 4;
	width: 100%;
	min-width: 1078px;
	height: 68px;
	background: transparent url(images/behind-color-top.png) repeat-x left top;
}

.logo {
	height: 68px;
	background: transparent url(images/color-top.png) no-repeat left top;
}

.logo h1 {
	text-indent: -99999px;
	width: 392px;
	height: 68px;
	margin: 0;
	padding: 0;
	background: transparent url(images/logo.png) no-repeat left center;
}

.nav {
	position: absolute;
	z-index: 5;
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 1078px;
	list-style-type: none;
}

.nav li {
	float: right;
	font-size: 13px;
	padding-top: 27px;
	margin-left: 50px;
}

.nav li a {
	color: #fff;
	text-shadow: 0 0 2px #000;
}

.nav li a:hover {
	color: #aaa;
}

.subnav {
	position: absolute;
	z-index: 4;
	top: 68px;
	width: 100%;
	height: 53px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #000 url(images/sub-nav-bg.png) repeat-x top left;
}

.subnav li a {
	float: left;
	height: 21px;
	font-size: 11px;
	color: #b8b8b8;
	margin: 16px 0px 0 8px;
	padding: 5px 10px 0 10px;
	text-shadow: #000 0 0 3px;
	text-transform: capitalize;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: url(images/subnav-item-bg-right.png), url(images/subnav-item-bg-left.png);
	background-position: top right, top left;
}

.subnav li a:hover {
	color: #fff;
	background-image: url(images/subnav-item-bg-right-over.png), url(images/subnav-item-bg-left-over.png);
}

.subnav li.active a {
	background-image: url(images/subnav-item-bg-right-down.png), url(images/subnav-item-bg-left-down.png);
}

.subnav li.active a:hover {
	color: #b8b8b8;
}

.content-wrap {
	position: absolute;
	width: 100%;
	min-height: 100%;
	min-width: 1078px;
	top: 0;
	background-color: #b4b4b4;
	background-image: url(images/shade-bottom-left.png), url(images/shade-bottom-right.png);
	background-position: left bottom, right bottom;	
	background-repeat: no-repeat
}

.content {
	float: left;
	width: 100%;
	position: relative;
	height: auto !important;
	min-height: 100%;
	margin-top: 122px;
	padding-bottom: 70px;
	background-color: transparent;
	background-image: url(images/shade-top-left.png), url(images/shade-top-right.png);
	background-position: left top, right top;	
	background-repeat: no-repeat
}

#spacer {
	min-height: 100px; 
}

/* ITEMS */

.item {
	display: none;
	float: left;
	width: 142px;
	margin: 30px 30px 30px 40px;
	
}

.item .apptastic {
	display: none;
	position: absolute;
	z-index: 6;
	margin: -23px 0 0 96px;
	width: 74px;
	height: 74px;
	background: transparent url(images/apptastic.png) no-repeat left top;	
}

.item .overlay {
	position: absolute;
	display: none;
	margin: 0;
	width: 128px;
	height: 128px;
	padding: 5px;
	font-size: 22px;
	font-weight: bold;
	text-shadow: 0 0 2px #000;
	color: #fff;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background: transparent url(images/item-overlay.png) repeat left top;
	z-index: 5;
}

.overlay .title {
	-webkit-transition: all 0.55s ease-out;
}

.overlay:hover .title {
	-webkit-transform: scale(1.2);
}

@-moz-document url-prefix()
{
.item .overlay  { margin-left: -71px; }
}

.item .overlay .title {
	display: block;
	margin-top: 30px;
	font-size: 13px;
	font-weight: normal;
}

.item .overlay .bar {
	display: block;
	margin: 12px auto 9px auto;
	width: 101px;
	padding: 1px 0 0 1px;
	height: 10px;
	background: transparent url(images/meter-bg.png) no-repeat left top;	
}

.item .overlay .filler {
	float: left;
	height: 9px;
	background: transparent url(images/meter-bar-bg.png) no-repeat left top;	
}

.item .overlay .tip {
	float: left;
	width: 4px;
	height: 9px;
	background: transparent url(images/meter-bar-tip.png) no-repeat left top;	
}

.item .cover {
	position: absolute;
	display: block;
	width: 138px;
	height: 138px;
	background: transparent url(images/item-cover.png) no-repeat left top;
}

.item .image {
	display: block;
	width: 128px;
	height: 128px;
	padding: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
	-webkit-box-shadow: 0 1px 6px #777;
	-moz-box-shadow: 0 1px 6px #777;
	box-shadow: 0 1px 6px #777;
	overflow: hidden;
	background: #ccc;
}

.item .image.black {
	background: #000;
}

.item h3 {
	font-size: 15px;
	font-weight: bold;
	color: #202020;
	padding: 0;
	margin: 7px 0 1px 0;
}

.item h4 {
	font-size: 13px;
	font-weight: 200;
	padding: 0;
	margin: 0;
	text-transform: capitalize;
}

.item h3 a {
	color: #202020;
}

.item h4 a {
	color: #494a4b;
}

.item h3 a:hover, .item h4 a:hover {
	color: #656565;
}

/* FOOTER */

.footer {
	position: absolute;
	z-index: 1;
	bottom: 0;
	min-width: 1078px;
	width: 100%;
	background-color: #031b30;
}

.footer-inner {
	width: 100%;
	text-align: left;
	height: 70px;
	overflow: hidden;
	font-size: 11px;
	color: #4b6378;
}

.footer-inner a {
	color: #85a1ba;
}

.footer-inner a:hover {
	color: #fff;
}

.footer p.left, .footer p.right {
	margin: 28px 0 20px 3px;
	padding: 0;
	float: left;
}

.footer p.right {
	margin-right: 3px;
	margin-left: 0;
	padding: 0;
	float: right;
}

/* POPUP */

.popup {
	display: none;
	position: absolute;
	z-index: 10;
	right: 0px;
	top: 41px;
	width: 435px;
}

.popup.submit {
	right: 140px;
}

.popup .top {
	height: 30px;
	width: 435px;
	background: transparent url(images/popup-top.png) no-repeat left bottom;	
}

.popup .inner {
	width: 365px;
	padding: 12px 35px 37px  35px;
	margin: 0;
	background: transparent url(images/popup-bg.png) no-repeat left bottom;	
}

.popup p {
	margin: 0;
	padding: 0;
}

.popup fieldset {
	border: 0;
	margin-top: 25px;
}

.popup .text {
	width: 95px;
	padding: 5px 8px;
	margin-right: 10px;
	color: #555;
	font-family: HelveticaNeue, sans-serif;
}

/* SHADING */

.shade-top-left {
	position: absolute;
	z-index: 1;
	margin: 0;
	width: 225px;
	height: 226px;
	top: 121px;
	background: transparent url(images/shade-top-left.png) no-repeat left 1px;	
}

.shade-bottom-left {
	position: absolute;
	z-index: 2;
	margin: 0;
	width: 225px;
	height: 226px;
	bottom: 70px;
	background: transparent url(images/shade-bottom-left.png) no-repeat left 1px;	
}

.shade-holder {
	position: absolute;
	z-index: 1;
	bottom: 70px;
	min-width: 1078px;
	width: 100%;
}

.shade-bottom-right {
	width: 100%;
	height: 226px;
	background: transparent url(images/shade-bottom-right.png) no-repeat right bottom;	
}