/************************************************************************
	CSS Document // Master
	Vital Records
	Created by Salt Design - http://www.saltdesign.org.uk
	
	1 - UNIVERSAL STYLES
	
	2 - UNIVERSAL STRUCTURAL ELEMENTS
		2A - HEADER
		2B - FOOTER
		3C - SITEWIDE
	 
	3 - STRUCTURAL ELEMENTS
		3A - HOME
		3B - RELEASES
		3C - RELEASE
		3D - CONTACT
		3E - LINKS
	
	4 - COMMON ELEMENTS
	
	5 - UNIVERSAL FONT STYLES
	
************************************************************************/





/************************************************************************
	1 - UNIVERSAL STYLES
************************************************************************/

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #585C68;
	background: #000 url('../_images/common/vital-records-background.jpg') no-repeat center bottom;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
}

html {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #585C68;
	margin: 0;
	padding: 0;
	height: 100%;
}

body#home {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #585C68;
	background: #000 url('../_images/home/vital-records-background.jpg') no-repeat center bottom;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	height: 100%;
}

body#video {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #585C68;
	background: #000;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 19px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FFF;
	margin: 0;
}

h2 {
	font-size: 19px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FC0303;
	margin: 0 0 10px 0;
}

h4 {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -0.02em;
	color: #333;
	margin: 0 0 10px 0;
}

p {
    font-size: 13px;
	line-height: 16px;
	color: #B3B3B3;
	margin: 0 0 8px 0;
}
a, a:visited,
p a, p a:visited  {
    color: #FC0303;
	text-decoration: none;
	outline: none;
}
a:hover, a:active, a:focus,
p a:hover, p a:active, p a:focus {
	color: #FFF;
	text-decoration: none;	
}

hr {
	border: 0;
	border-top: 1px solid #333;
	height: 1px;
	background: none;
	margin: 8px 0 8px 0;
}
* html hr { /* IE6 */
	margin: 0 0 8px 0;
}
* + html hr { /* IE7 */
	margin: 0 0 8px 0;
}

img {
	border: 0px;
}

.clearfix {
	clear: both;
}



/************************************************************************
	2 - UNIVERSAL STRUCTURAL ELEMENTS
************************************************************************/

#top { /* Reference for Skip to Top */
	position: absolute;
	left: -9999px;
	top: -50px;
}

.wrapper {
	width: 1028px;
	margin: 50px auto 30px auto;
}

/****** -- 2A HEADER [STRAT] -- ******/

.header {
	height: 130px;
	padding: 0 14px 0 14px;
}

/* .header h3 {
	font-size: 15px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FC0303;
	margin: 24px 0 0 0;
}
.header h3 a, .header h3 a:visited {
    color: #FFF;
	text-decoration: none;
}
.header h3 a:hover, .header h3 a:active, .header h3 a:focus {
	color: #FFF;
	text-decoration: none;
} */

.logo {
	float: left;
	width: 140px;
	height: 93px;
}

.navigation {
	float: left;
	width: 820px;
	margin: 32px 0 0 36px; /* without padding on main menu margin: 34px 0 0 40px; */
}

/* --- MAIN MENU --- */
ul.nav { position: relative; margin: 0; padding: 0; text-transform: uppercase; font-size: 12px; }
ul.nav li { position: relative; list-style: none; float: left; display: inline; margin: 0 32px 0 0; padding: 2px 4px 8px 4px; }
ul.nav li a { position: relative; text-decoration: none; color: #808080; }
ul.nav li:hover a, ul.nav li a.on:hover { color: #FFF; }
ul.nav li a.on { color: #FFF; }

ul.nav li#releases:hover, ul.nav li#releases a:active,
ul.nav li#releases a.on:hover, ul.nav li#releases a.on:active { position: relative; text-decoration: none; color: #FFF; background: #FC0303; }

/****** -- SUB MENU -- ******/
ul.nav li ul { position: absolute; top: 22px; left: 0; width: 621px; margin: 0; padding: 2px 0 2px 2px; background: #FC0303; } /* Add 69px for each new release */
ul.nav li ul li { width: 67px; height: 60px; margin: 0 2px 0 0; padding: 0; text-align: left; list-style: none; }
ul.nav li ul li a { font-size: 13px; line-height: 21px; width: auto; margin: 0; padding: 0; }

/****** -- HIDE/SHOW -- ******/
ul.nav ul { display: none; }
ul.nav li:hover ul { display: block; }
/* ---^ MAIN MENU ^--- */

/****** -- 2A HEADER [END] -- ******/



/****** -- 2B FOOTER [START] -- ******/

.footer {
	padding: 0 14px 20px 14px;
	margin: 30px 0 0 0;
}

.credits {
	font-size: 10px;
	line-height: 11px;
	color: #808080;
	margin: 0;
}

.credits a, .credits a:visited { color: #FC0303; }

.credits a:hover { color: #FFF; }

/****** -- 2B FOOTER [START] -- ******/



/****** -- 2C SITEWIDE [START] -- ******/

.message {
	background: #FC0303;
	padding: 10px;
	margin: 0 14px 20px 14px;
}

/****** -- 2C SITEWIDE [END] -- ******/



/************************************************************************
	3 - STRUCTURAL ELEMENTS
************************************************************************/

/****** -- 3A HOMEPAGE [START] -- ******/

.home-wrapper {
	width: 180px; /* 220 */
	height: 260px; /* 300 */
	margin: 120px auto 50px auto;
	padding: 20px;
	text-align: center;
	background: url('../_images/home/vital-records-enter-page-background.png') repeat 0 0;
}

.home-logo {
	width: 180px;
	height: 119px;
	margin: 0 0 40px 0;
}

/* .home-wrapper h1 {
	font-size: 19px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FC0303;
	margin: 0 0 40px 0;
} */

.home-wrapper h2 {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #999;
	margin: 0 0 50px 0;
}
.home-wrapper h2 a, .home-wrapper h2 a:visited {
    color: #999;
	text-decoration: none;
}
.home-wrapper h2 a:hover, .home-wrapper h2 a:active, .home-wrapper h2 a:focus {
	color: #FFF;
	text-decoration: none;	
}

.video-wrapper {
	width: 660px; /* 220 */
	height: 380px; /* 300 */
	margin: 120px auto 50px auto;
	/* padding: 0 80px 0 80px; */
	text-align: center;
	/* background: url('../_images/home/vital-records-video-logo.jpg') no-repeat 0 280px; */
}

#video-player {
	width: 640px;
	height: 360px;
	margin: 0 0 10px 0;
	padding: 2px;
	border: 1px solid #4D4D4D;
}

#video-player-no-border {
	width: 640px;
	height: 360px;
	margin: 0 0 10px 0;
	padding: 2px;
}

#vimeo-player {
	width: 640px;
	height: 360px;
	margin: 0 0 10px 0;
	padding: 2px;
	border: 1px solid #4D4D4D;
}

body#video a, body#video a:visited,
body#video p a, body#video p a:visited  {
    font-size: 11px;
	color: #4D4D4D;
	text-decoration: none;
	outline: none;
}
body#video a:hover, body#video a:active, body#video a:focus,
body#video p a:hover, body#video p a:active, body#video p a:focus {
	color: #666;
	text-decoration: none;	
}

/****** -- 3A HOMEPAGE [END] -- ******/



/****** -- 3B RELEASES [START] -- ******/

/* --- FEATURED RELEASES --- */
.featured-releases {
	height: 250px;
	margin: 0 14px 8px 14px;
	padding: 1px;
	background: #4D4D4D;
}

.feature-release {
	height: 250px;
	background: #000;
}
.feature-title {
	float: left;
	width: 258px;
	margin: 10px 10px 0 10px;
}
.feature-artwork {
	float: left;
	width: 280px;
	margin: 0 20px 0 0;
}
.feature-description {
	float: left;
	width: 400px;
	margin: 20px 20px 10px 0;
}
/* ---^ FEATURED RELEASES ^--- */

.releases {
	padding: 0 0 0 14px; /* no right margin for .release see below */
}

.release {
	float: left;
	width: 326px;
	height: 292px;
	padding: 1px;
	background: #4D4D4D;
	margin: 0 8px 8px 0;
}

.release h1 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FFF;
	margin: 0;
}

.release h2 {
	font-size: 18px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FC0303;
	margin: 0 0 4px 0;
}

/* --- FLOATING DIVS --- */
ul.control { 
  	list-style-type: none;
  	position: relative;
  	display: block;
  	margin: 0;
  	padding: 0;
}
ul.control li { 
  	display: inline;
}
ul.control li a {
  	position: relative;
  	display: block;
}
ul.control li a span.float { 
  	margin-top: -9000px; 
  	margin-left: -9000px;
  	position: absolute;
  	cursor: pointer;
}
ul.control li a:hover span.float, ul.control li a:focus span.float, ul.control li a:active span.float {
  	display: block;
  	width: 310px; /* 326 */
  	height: 109px; /* 110 */
  	padding: 8px;
	background: url('../_images/common/release-hover-background.png') repeat-y 0 0;
  	cursor: pointer;
}

ul.control li a.product { 
  	width: 326px;
 	height: 292px;
  	margin: 0;
}
ul.control li a.product:hover span.float, ul.control li a.product:focus span.float, ul.control li a.product:active span.float {
  	margin-top: -125px;
  	margin-left: 0;
}
/* FOR IE7 NEED TO SUBTRACT THE WIDTH AND HEIGHT OF THE FLOAT FROM THE IMAGE. ISN'T IE JUST USELESS! */
* + html ul.control li a.product:hover span.float, 
* + html ul.control li a.product:focus span.float, 
* + html ul.control li a.product:active span.float {
	margin-top: 167px;
	margin-left: -330px;
}
/* ---^ FLOATING DIVS ^--- */

/****** -- 3B RELEASES [END] -- ******/



/****** -- 3C RELEASE [END] -- ******/

.release-content {
	padding: 0 14px 0 14px;
}

.left-column {
	float: left;
	width: 140px;
	margin: 0 40px 0 0;
}

.centre-column {
	float: left;
	width: 370px;
	margin: 0 30px 0 0;
}

.right-column {
	float: left;
	width: 420px;
	margin: 0;
}

.back-to-releases {
	background: url('../_images/common/back-to-releases-arrow.jpg') no-repeat 0 0;
	font-size: 12px;
	padding: 0 0 0 14px;
}

.release-image {
	width: 368px;
	height: 330px;
	padding: 1px;
	background: #4D4D4D;
}

.view-artwork {
	width: 370px;
	height: 20px;
	background: url('../_images/common/view-artwork.jpg') no-repeat 0 0;
}

.price {
	font-size: 19px;
	font-weight: normal;
	letter-spacing: -0.04em;
	color: #FFF;
	margin: 0;
}

.shipping {
	font-size: 12px;
	color: #FC0303;
	text-transform: uppercase;
}

/****** -- 3C RELEASE [END] -- ******/



/****** -- 3D CONTACT [START] -- ******/

/****** -- 3D CONTACT [END] -- ******/



/****** -- 3E LINKS [START] -- ******/

.right-wide-column {
	float: left;
	width: 820px;
	margin: 0;
}

/****** -- 3E LINKS [END] -- ******/



/************************************************************************
	4 - COMMON ELEMENTS
************************************************************************/

.buttons {
	width: auto;
	height: 24px;
	margin: 0 0 50px 0;
}

.more-info {
	float: left;
	width: 68px;
	height: 24px;
	margin: 0 12px 0 0;
	background: url('../_images/common/more-info.png') no-repeat 0 0;
}

.listen {
	float: left;
	width: 58px;
	height: 24px;
	margin: 0 12px 0 0;
	background: url('../_images/common/listen.png') no-repeat 0 0;
}

.paypal-add-to-basket {
	float: left;
	width: 99px;
	height: 24px;
	margin: 0 12px 0 0;
}

.paypal-view-basket {
	float: left;
	width: 88px;
	height: 24px;
	margin: 0 12px 0 0;
}

.add-to-basket {
	float: left;
	width: 99px;
	height: 24px;
	margin: 0 12px 0 0;
	background: url('../_images/common/add-to-basket.png') no-repeat 0 0;
}

.view-basket {
	float: left;
	width: 88px;
	height: 24px;
	margin: 0 12px 0 0;
	background: url('../_images/common/view-basket.png') no-repeat 0 0;
}

.buy-mp3 {
	float: left;
	width: 111px;
	height: 24px;
	margin: 0 12px 0 0;
	background: url('../_images/common/buy-mp3-version.png') no-repeat 0 0;
}

.more-info:hover, .listen:hover, .add-to-basket:hover, .view-basket:hover, .buy-mp3:hover {
	background-position: 0 -24px;
}



/************************************************************************
	5 - UNIVERSAL FONT STYLES
************************************************************************/

.white {
	color: #FFFFFF;
}

.light-grey {
	color: #B3B3B3;
}

.red {
	color: #FC0303;
}

.smallline {
	font-size: 12px;
	color: #808080;
}

.artwork {
	font-size: 12px;
	color: #EBEBEB;
}

.massive {
	font-size: 58px;
	line-height: 50px;
	letter-spacing: -0.06em;
	color: #FFF;
}