/*
********************************

TROJAN RECORDS  - trojanMain.css
Browser(s): All

Written by Elliot Jay Stocks
Created: 01.09.2006
Last modified: 08.02.2007

********************************
*/



	/* BEGIN clearing hack 
	(http://www.positioniseverything.net/easyclearing.html) */

	.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
	.clearfix { display:inline-table }
	
	/* BEGIN hide from IE-mac \*/
	* html .clearfix { height: 1% }
	.clearfix { display: block }
	/* END hide from IE-mac */

	/* END clearing hack */




/* BASICS */

* { margin:0; padding:0 }
html, body { padding:0 }
body { background:#000; margin:-10px 0 20px 0; text-align:center }

body, p, h1, h3, h4, h5, input, select, textarea, li, td { font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; color:#fff }
body, p, li { font-size:0.82em; line-height:1.67em } /* I'm using EMs to correct the display of the fonts on a PC */
/* Backed-up old font sizes: { font-size:10px; line-height:18px } */
input, select, textarea, form p { font-size:10px }
h3 { font-size:12px; line-height:16px; font-weight:bold; margin:0 0 14px 0  }
h4 { font-size:0.82em; line-height:0.82em; font-weight:normal; margin:0 0 10px 0 }
h5 { font-size:14px; line-height:18px; font-weight:bold }
p { margin:0 0 14px 0 }
td { font-size:10px; line-height:12px }
strong { font-weight:bold; margin:0; padding:0 }

hr { height:1px; border:none; background:url(../images/common/hrDot01.gif); margin:14px 0 14px 0; clear:both }
div#columnExtras hr { width:180px; margin:0 0 4px 0 }
/* hr { height:0; border-top:1px solid #000; border-right:none; border-bottom:none; border-left:none; clear:both } */

p.welcomeMessage { padding:10px; border:1px solid #000 }
html>body p.welcomeMessage { background:url(../images/common/semiTransparent.png) }





/* LINKS */

* a { position:relative } /* Hack to get links displaying over a PNG background */

a { color:#fede8e; text-decoration:none }
a:hover, a:active { text-decoration:underline }

a img { border:none }

a.moreLink { background:#265526; border-top:1px solid #000; border-bottom:1px solid #000; padding:4px 10px 5px 10px; margin:16px 0 30px 0; font-size:0.82em; line-height:1.67em }
div#columnTeaser a.moreLink, div#columnExtras a.moreLink { width:160px }
div#columnMain a.moreLink { width:348px }





/* RSS BUTTONS */

a.RSSbutton { background:url(../images/common/rss.gif) top left no-repeat; text-indent:-9999px; display:block; width:16px; height:16px; margin:-35px 0 0 0; float:right }





/* LAYOUT at its most basic */

div#pageContainer { background:url(../images/common/mainBackground04.jpg) top center repeat-y }

div#contentContainer { width:840px; margin:-10px auto 0 auto; padding:56px 0 0 0; text-align:left; background:url(../images/common/header04.jpg) top center no-repeat }

div.column { float:left; padding:6px 10px 10px 10px }
h2.columnExtrasHeadline { margin-top:30px }

div#columnTeaser { padding:6px 10px 10px 36px; width:180px } 	/* 200px - (2 x 10px padding) = 180px (also: 36px EXTRA PADDING to move all columns over to the right) */
div#columnMain { width:368px } 									/* 390px - (2 x 10px padding) - 2px border = 368px */
div#columnExtras { width:180px } 								/* 200px - (2 x 10px padding) = 180px */

div#footer { clear:both }

div.column, div#header { position:relative } /* These DIVs are positioned 'relative' so that other elements can be ABSOLUTELY positioned inside them */





/* HEADER */

div#header { height:170px }

h1 a { position:absolute; width:370px; height:110px; top:0; left:30px; margin:0; padding:0; text-indent:-9999px }

a#trojanRadioLauncher, a#shopLauncher { position:absolute; top:0; line-height:14px; font-size:10px; line-height:13px }
a#trojanRadioLauncher { width:100px; height:45px; right:230px; padding:45px 70px 20px 25px; color:#fff }
a#shopLauncher { width:113px; height:53px; right:20px; padding:40px 60px 20px 22px; color:#000 }





/* NAVIGATION */

ul#nav { position:absolute; width:800px; bottom:49px; left:30px; margin:0; padding:0 }
ul#nav li { float:left; list-style-type:none }
ul#nav li a { height:41px; display:block; position:absolute; top:0; text-indent:-9999px }

li#navNews a, li#navShop a, li#navArtists a, li#navLive a, li#navFans a, li#navLinks a, li#navForum a, li#navAbout a { background:url(../images/common/navBG02.jpg) }

/*  

Measurements for the nav image replacement:

	The distance from the top to the...
	
	initial state = 0
	rollover state = 41px
	selected state = 82px

	The distance from the far-left to the...
	
	news button = 0
	shop button = 71px
	artists button = 139px
	live button = 223px
	fans button = 286px
	links button = 353px
	forum button = 424px
	about button = 504px
	
*/

li#navNews a 						{ background-position:0 0; width:71px; left:0 }
li#navNews a:hover					{ background-position:0 -41px }
body#pageNews li#navNews a 			{ background-position:0 -82px }

li#navShop a 						{ background-position:-71px 0; width:68px; left:71px }
li#navShop a:hover					{ background-position:-71px -41px }
body#pageShop li#navShop a 			{ background-position:-71px -82px }

li#navArtists a 					{ background-position:-139px 0; width:84px; left:139px }
li#navArtists a:hover				{ background-position:-139px -41px }
body#pageArtists li#navArtists a 	{ background-position:-139px -82px }

li#navLive a 						{ background-position:-223px 0; width:63px; left:223px }
li#navLive a:hover					{ background-position:-223px -41px }
body#pageLive li#navLive a 			{ background-position:-223px -82px }

li#navFans a 						{ background-position:-286px 0; width:67px; left:286px }
li#navFans a:hover					{ background-position:-286px -41px}
body#pageFans li#navFans a 			{ background-position:-286px -82px }

li#navLinks a 						{ background-position:-353px 0; width:71px; left:353px }
li#navLinks a:hover					{ background-position:-353px -41px }
body#pageLinks li#navLinks a 		{ background-position:-353px -82px }

li#navForum a 						{ background-position:-424px 0; width:80px; left:424px }
li#navForum a:hover					{ background-position:-424px -41px }
body#pageForum li#navForum a 		{ background-position:-424px -82px }

li#navAbout a 						{ background-position:-504px 0; width:73px; left:504px }
li#navAbout a:hover					{ background-position:-504px -41px }
body#pageAbout li#navAbout a 		{ background-position:-504px -82px }





/* SECTION HEADINGS */

div#columnTeaser h2, div#columnExtras h2 { width:180px }
div#columnMain h2 { width:368px }
form#signUpBox h2 { display:none }

h2 { text-indent:-9999px; height:22px; margin:0 0 14px 0; border-bottom:1px solid #fff }
h2#heading-shoppingBasket { margin:30px 0 0 0 }

/* 

NOTE: The following section headings are defined using 
'html>body h2#ID-name' in order to compensate for IE.

Although the PNG hack for IE is contained in 'trojanIE.css', 
IE will still display the opaque version if the elements 
below are not defined using this parent / child method.

*/

/* News */
html>body h2#heading-latestNews 			{ background:url(../images/common/heading-latestNews.png) top left no-repeat }
html>body h2#heading-newsHeadlines 			{ background:url(../images/common/heading-newsHeadlines.png) top left no-repeat }
html>body h2#heading-featuredArtist 		{ background:url(../images/common/heading-featuredArtist.png) top left no-repeat }
html>body h2#heading-calendar 				{ background:url(../images/common/heading-calendar.png) top left no-repeat }
html>body h2#heading-monthlyCompetition 	{ background:url(../images/common/heading-monthlyCompetition.png) top left no-repeat }
html>body h2#heading-selectedNewsStory	 	{ background:url(../images/common/heading-selectedNewsStory.png) top left no-repeat }
html>body h2#heading-upcomingReleases	 	{ background:url(../images/common/heading-upcomingReleases.png) top left no-repeat }

/* Shop */
html>body h2#heading-searchTheShop 			{ background:url(../images/common/heading-searchTheShop.png) top left no-repeat }
html>body h2#heading-latestOffers 			{ background:url(../images/common/heading-latestOffers.png) top left no-repeat }
html>body h2#heading-featuredRelease 		{ background:url(../images/common/heading-featuredRelease.png) top left no-repeat }
html>body h2#heading-newReleases 			{ background:url(../images/common/heading-newReleases.png) top left no-repeat }
html>body h2#heading-shoppingBasket 		{ background:url(../images/common/heading-shoppingBasket.png) top left no-repeat }
html>body h2#heading-shopNews 				{ background:url(../images/common/heading-shopNews.png) top left no-repeat }

/* Artists */
html>body h2#heading-artistsAZ 				{ background:url(../images/common/heading-artistsAZ.png) top left no-repeat }
html>body h2#heading-artistGallery 			{ background:url(../images/common/heading-artistGallery.png) top left no-repeat }
html>body h2#heading-relatedReleases 		{ background:url(../images/common/heading-relatedReleases.png) top left no-repeat }

/* Fans */
html>body h2#heading-trojanForum 			{ background:url(../images/common/heading-trojanForum.png) top left no-repeat }
html>body h2#heading-mailbag 				{ background:url(../images/common/heading-mailbag.png) top left no-repeat }
html>body h2#heading-QA 					{ background:url(../images/common/heading-QA.png) top left no-repeat }
html>body h2#heading-memorobilia 			{ background:url(../images/common/heading-memorabilia.png) top left no-repeat }
html>body h2#heading-wallpapers				{ background:url(../images/common/heading-wallpapers.png) top left no-repeat }

/* About */
html>body h2#heading-contactUs 				{ background:url(../images/common/heading-contactUs.png) top left no-repeat }
html>body h2#heading-labelBios 				{ background:url(../images/common/heading-labelBios.png) top left no-repeat }
html>body h2#heading-about			 		{ background:url(../images/common/heading-about.png) top left no-repeat }

/* This is a special one: */
html>body h2#heading-newInTheShop 			{ background:url(../images/common/heading-newInTheShop.png) top left no-repeat }
h2#heading-newInTheShop 					{ width:164px; height:41px; border-bottom:none }






/* FORMS */

fieldset { border:none; margin:0; padding:0 }
input, textarea { padding:0 0 0 2px; float:none }
input.textInput { width:140px; height:14px; float:left; border:1px solid #b8a479; background:#fff url(../images/common/textFieldBG.gif) fixed top left repeat-x; color:#666 }
input.formButton { float:right; font:9px/12px 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; color:#fede8e; background:#333; height:16px; border:1px solid #000 }
select { border:1px solid #000; color:#666; margin:0; padding:0 }
a.linkInForm { float:left; font-size:9px }

form#quicksearchBox { position:absolute; width:182px; bottom:22px; right:33px; padding:0 }
form#quicksearchBox input.textInput { width:126px; border-color:#000; margin:0 4px 0 0 }

form#signUpBox { width:144px; padding:0; margin:32px 0 0 20px }
form#signUpBox input.textInput { margin:4px 0 4px 0 }
form#signUpBox p { color:#000; line-height:14px; margin:0 }
form#signUpBox a { color:#630 }
form#signUpBox a.linkInForm { margin:-3px 0 0 0 }

form#searchShopBox { margin:0 0 30px 0 }
form#searchShopBox input.textInput { border-color:#000; margin:4px 0 0 0; width:130px }
form#searchShopBox input.formButton { margin:4px 0 0 0 }
form#searchShopBox select { width:180px }

form#contactUs { margin:0 0 30px 0 }
form#contactUs input.textInput, textarea { border-color:#000; margin:4px 0 0 0; width:176px }
form#contactUs input.formButton { margin:4px 0 0 0 }
form#contactUs textarea { height:100px; border:1px solid #000; background:#fff url(../images/common/textFieldBG.gif) fixed top left repeat-x; color:#666; overflow:auto }






/* RELEASE DETAILS */

div.releaseDetails { margin:0 10px 10px 0; padding:0; float:left }
div.releaseDetailsFull h4 { font-size:14px; line-height:18px; font-weight:bold }

img.packshot { float:left; margin:0 10px 0 0; border:1px solid #000; width:75px; height:75px }
img.packshotLarge { float:left; margin:0 10px 0 0; border:1px solid #000 }

ul.buyOptions li { list-style-type:none; margin:0 0 5px 0 }

/* I edited this bit for the new US buttons on 29.05.2007 */
a.buyButton-cd, a.buyButton-vinyl, a.buyButton-download, a.buyButtonUS-cd, a.buyButtonUS-vinyl, a.buyButtonUS-download { width:75px; height:19px; display:block; text-indent:-9999px; margin:0; padding:0 }
a.buyButton-cd 			{ background:url(../images/common/buyButton-cdUK.gif) top left no-repeat }
a.buyButton-vinyl 		{ background:url(../images/common/buyButton-vinylUK.gif) top left no-repeat }
a.buyButton-download 	{ background:url(../images/common/buyButton-downloadUK.gif) top left no-repeat }
a.buyButtonUS-cd 		{ background:url(../images/common/buyButton-cdUSA.gif) top left no-repeat }
a.buyButtonUS-vinyl 	{ background:url(../images/common/buyButton-vinylUSA.gif) top left no-repeat }
a.buyButtonUS-download 	{ background:url(../images/common/buyButton-downloadUSA.gif) top left no-repeat }

div.releaseAccompaniment { margin:0 0 0 172px }
div.releaseAccompaniment h4 { font-size:10px; line-height:12px; font-weight:bold }
div.releaseAccompaniment p { font-size:10px; line-height:12px }

div.releaseAccompanimentFull { margin:-23px 0 0 172px }
div.releaseAccompanimentFull h4 { font-size:10px; line-height:12px; font-weight:bold }
div.releaseAccompanimentFull p { font-size:10px; line-height:12px }

br.fullDescription { clear:both; height:20px; border:1px solid red }






/* SHOPPING BASKET */

div#shoppingBasket { width:170px; margin:0; padding:5px 5px 5px 5px }
html>body div#shoppingBasket { background:url(../images/common/semiTransparent.png) top left repeat }

table#basketContents { width:170px; border:none }
table#basketContents td.basketItem { font-weight:bold; width:150px; padding:0 5px 10px 0 }
table#basketContents td.basketQty { font-weight:bold; width:10px }
table#basketContents td.basketTotal { font-weight:bold; padding:20px 0 0 0 }
a.basketRemove { float:right; margin:-11px 0 0 0; width:9px; height:9px; display:block; text-indent:-9999px }
html>body a.basketRemove { background:url(../images/common/removeFromBasket.png) top left no-repeat }

a#shoppingBasketFooter { margin:0 0 30px 0 }






/* SPECIFIC CLASSES */

img.thumbnail { float:left; margin:0 10px 5px 0; border:1px solid #000 }
img.galleryThumb { width:75px; height:75px; margin:0 5px 5px 0; border:1px solid #000 }
img.podInline { width:180px; height:70px; margin:0 }
img.podSolo { width:180px; height:70px; margin:0 0 26px 0 }
p.articleBeginning:first-line { text-transform:uppercase }
p.newsHeadlines { font-size:0.82em; line-height:1.2em; margin:0 0 10px 0 }
p.mailbag { background:url(../images/common/mailbagIcon.gif) top left no-repeat; padding:0 0 0 40px }
ul.alphaList li { list-style:none; display:inline; font-size:0.82em; line-height:1.67em }
ul.artistList { margin:-10px 0 0 20px }
div.artistLinks { float:left; width:180px; margin:0 0 10px 0 }
div.artistLinks ul { margin:-10px 0 20px 20px }

img.columnBottomFix { margin:-50px 0 -50px 0; width:1px; height:1px; clear:both }

div.calendar { float:left; margin:0 10px 10px 0 }

p.fullListing { float:right }
br.afterFullListing { clear:both }





/* PAGINATION */
/* This is meant to replicate the look of the green 'more' links, but it's a DIV to allow for links inside it */

div.pagination { width:160px; background:#265526; border-top:1px solid #000; border-bottom:1px solid #000; padding:4px 10px 5px 10px; margin:16px 0 30px 0; height:16px }
div.pagination p { float:left }
div.pagination ul { float:right }
div.pagination li { float:left; list-style:none; margin:0 0 0 6px }
div.pagination p, ul, li { margin:0; border:0; font-size:11px }

div#columnMain div.pagination { width:348px }






/* FOOTER */

div#footer { width:798px; height:50px; padding:50px 20px 0 20px }

html>body div#footer { background:url(../images/common/footer01.png) }

p#footerLinks { float:left; font-size:9px; color:#999 }
p#whatIsRSS { float:right; font-size:9px; background:url(../images/common/rssIcon01.gif) 0 2px no-repeat; text-indent:22px; height:20px }