/*  
Theme Name: Joker's Pack
Theme URI: http://elliotjaystocks.com
Description: The Joker's Pack theme
Version: 2.0
Author: Elliot Jay Stocks
Author URI: http://elliotjaystocks.com
*/



/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100% }
q:before, q:after { content:''}
a { text-decoration:none }


/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a img { border:none } /* Gets rid of IE's blue borders */
img { border:10px solid #fff; outline:1px solid #ccc }


/* Typography */
body, h4, h5, p, li, dt, dd, th, td, label, input, textarea { font:10px/18px 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; color:#999 }
h2 { font-weight:bold; color:#fff; margin:40px 0 0 0 }
h2 span { color:#333 }
p, div.content ul { margin:0 0 20px 0 }
input, textarea { color:#000 }
dl { margin:20px 0 40px 380px; position:relative }
dt { color:#333; position:absolute; left:-104px; width:100px; text-align:right }
a { color:#fff; text-decoration:none }
div.content a:hover { color:#fff; border-bottom:4px solid #900 }
div.content ul li { list-style:disc; margin:0 0 0 30px }


/* Layout */
body { background:#000 url(images/body02.gif) top center no-repeat; text-align:center }
div.wrapper { text-align:left; margin:0 auto; padding:160px 40px 106px 40px; width:600px; min-height:200px; background:url(images/wrapperBottom02.gif) bottom center no-repeat; position:relative }
body.news div.wrapper { padding:120px 40px 106px 40px }
h1 a { background:url(images/h1-02.gif); width:305px; height:28px; text-indent:-9999px; display:block; position:absolute; top:32px; left:40px }
a.contact { background:url(images/contactButton02.gif) 0 0; width:40px; height:72px; text-indent:-9999px; display:block; position:absolute; top:160px; left:-20px }
a.contact:hover { background-position:-40px 0 }
a.backToTheList { background:url(images/backToTheList.gif); width:95px; height:8px; text-indent:-9999px; display:block; position:absolute; bottom:77px; left:40px }
div.content a.backToTheList:hover { border:none }
a.credit { background:url(images/creditButton.gif); width:263px; height:8px; text-indent:-9999px; display:block; position:absolute; bottom:77px; right:40px }

/* Navigation */
ul.nav { width:424px; height:32px; position:absolute; top:100px; right:40px }
ul.nav li a { height:32px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none }
li.about a, li.news a, li.awards a, li.showreel a, li.films a, li.music a, li.promos a, li.corporates a { background:url(images/nav02.gif) }

/*  
Measurements for the nav image replacement:

	The distance from the top to the...

	up state = 0
	rollover state = 32px
	rollover state = 64px

	The distance from the far-left to...

	about = 0
	news = 40px
	awards = 77px
	showreel = 127px
	films = 190px
	music videos = 227px
	promos = 304px
	corporates = 353px

	The width of...

	about = 40px
	news = 38px
	awards = 51px
	showreel = 64px
	films = 38px
	music videos = 77px
	promos = 50px
	corporates = 71px
*/

li.about a 							{ background-position:0 0; width:40px; left:0 }
li.about a:hover					{ background-position:0 -32px }
body.about li.about a				{ background-position:0 -64px }

li.news a 							{ background-position:-40px 0; width:38px; left:40px }
li.news a:hover						{ background-position:-40px -32px }
body.news li.news a					{ background-position:-40px -64px }

li.awards a 						{ background-position:-77px 0; width:51px; left:77px }
li.awards a:hover					{ background-position:-77px -32px }
body.awards li.awards a				{ background-position:-77px -64px }

li.showreel a 						{ background-position:-127px 0; width:64px; left:127px }
li.showreel a:hover					{ background-position:-127px -32px }
body.showreel li.showreel a			{ background-position:-127px -64px }

li.films a 							{ background-position:-190px 0; width:38px; left:190px }
li.films a:hover					{ background-position:-190px -32px }
body.films li.films a				{ background-position:-190px -64px }

li.music a 							{ background-position:-227px 0; width:77px; left:227px }
li.music a:hover					{ background-position:-227px -32px }
body.music li.music a				{ background-position:-227px -64px }

li.promos a 						{ background-position:-304px 0; width:50px; left:304px }
li.promos a:hover					{ background-position:-304px -32px }
body.promos li.promos a				{ background-position:-304px -64px }

li.corporates a 					{ background-position:-353px 0; width:71px; left:353px }
li.corporates a:hover				{ background-position:-353px -32px }
body.corporates li.corporates a		{ background-position:-353px -64px }