/*  
Theme Name: Studio Ghibli
Theme URI: http://www.madman.com.au/studioghibli/
Description: Stylesheet for Studio Ghibli Collection
Author: Simon O'Shea
Author URI: http://www.madman.com.au/
*/

@import url(css/reset.css);
@import url(css/jwbox.css);

* {
	margin: 0;
	padding: 0;
	outline: none;
}
html {
	color: #999;
}
body {
	font: 13px/24px Georgia, serif;
}
header, section, aside, footer {
	display: block;	
}
h1 {
	text-indent: -9999px;
	background: url(images/header-strip.png) 0 0 no-repeat;
	width: 996px;
	height: 36px;
	z-index: 2;
	position: relative;
}
h2 {
	margin: 0 0 18px 0;
}
h2 a:hover {
	color: #999;
	text-decoration: none;
}
h2, blockquote {
	color: #c29c31;
	font: bold 23px/33px Georgia, sans-serif;
	letter-spacing: 0;
	padding: 0;
}
h2.discreet {
	color: #999;
}
h2.hidden {
	color: #fff;	
}
h3 {
	padding: 14px 12px 12px 14px;
}
h4 {
	color: #fff;
	padding: 0 0 10px 19px;
}
p {
	color: #999;
	padding: 0;
	margin: 0 0 22px 0;
}
a {
	color: #c29c31;
	text-decoration: none;
}
a:hover {
	color: #888;
	text-decoration: underline;
}
a img, img {
	border: none;
}
body blockquote {
	color: #999;
	margin: 0 0 14px 0;
}
cite {
	font-style: normal;
	float: left;
}
.center {
	text-align: center;
}
.left {
	float: left;
	margin: 0 20px 10px 0;
}
.right {
	float: right;
	margin: 0 0 10px 20px;
}
.clear {
	clear: both;
}
.invisible {
	display: none;
}
::selection {
	background: #f5f5f5;
	}
::-moz-selection {
	background: #f5f5f5;
}


/* MAIN */

#container {
	margin: 0 auto;
	width: 1020px;
}


/* HEADER */

header {
	width: 996px;
	height: 330px;
	margin: 30px auto 42px auto;
}
#collection header {
	background: url(images/hero-collection.jpg) 0 30px no-repeat;
}
#news header {
	background: url(images/hero-news.jpg) 0 30px no-repeat;
}
#books header {
	background: url(images/hero-manga.jpg) 0 30px no-repeat;
}
nav {
	background: url(images/nav_bg.png) 0 0 no-repeat;
	_background: #333;
	width: 996px;
	height: 40px;
	margin: 254px 0 0 0;
	display: block;
}
nav ul {
	list-style: none;
}
nav li {
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	line-height: 40px;
	margin: 0;
	float: left;
}
nav li a {
	color: #fff;
	height: 40px;
	display: block;
	_display: inline; /* ie fix */
	padding: 0 22px;
	_padding: 12px 22px; /* ie fix */
	text-decoration: none;
}
nav li a.on {
	background: #005ea1;
	text-decoration: none;
}
nav li a:hover {
	background: #143d76;
	color: #fff;
	text-decoration: none;
}
li.trailer {
	width: 524px;
	float: right;
}


nav li ul {
	visibility: hidden;
	position: absolute;
}
nav li:hover ul,
nav li a:hover ul {
	visibility: visible !important;
	position: absolute;
	top: auto;
	left: auto;
	height: 120px;
	display: block;
	z-index: 1;
}
.subnav {
	width: 200px;
	float: left;
	z-index: 1;
}
body .subnav li {
	line-height: 30px;
	font-size: 12px;
	text-transform: none;
	background: #eee;
	text-align: left;
	clear: both;
}
body .subnav li a {
	color: #666;
	padding: 0 22px;
	height: 32px;
	min-width: 240px;
	z-index: 10;
	cursor: pointer;
	z-index: 1;
}
body .subnav li a:hover {
	color: #fff
}

/* HOME */

#home nav {
	background: none;
	margin: 0;
	position: relative;
	top: -40px;
	z-index: 2;
}
#home header img {
	position: relative;
	top: -6px !important;
	width: 996px;
	height: 300px;
	float: left;
	z-index: 1 !important;
}
#home .pics {
	width: 996px;
	height: 294px;
	overflow: hidden;
}
/*
#home header {
	background: url(images/hero-home.jpg) 0 30px no-repeat;
}
*/
#hero_nav {
	position: relative;
	float: right;
	z-index: 3;
}
#hero_nav #prev {
	background:url(images/arrow_prev.png) 0 0 no-repeat;
	width: 41px;
	height: 40px;
	text-indent: -9999px;
	display: block;
	float: left;
}
#hero_nav #prev:hover,
#hero_nav #prev:active {
	background-position: 0 -40px;
}
#hero_nav #next {
	background:url(images/arrow_next.png) 0 0 no-repeat;
	width: 41px;
	height: 40px;
	text-indent: -9999px;
	display: block;
	float: left;
}
#hero_nav #next:hover,
#hero_nav #next:active {
	background-position: 0 -40px;
}
#intro, #synopsis {
	width: 472px;
	float: left;
	margin: -6px 0 30px 12px;
}
#intro h2 {
	font-size: 22px;
	margin: 0;
}
#intro h2.discreet {
	margin: 0 0 24px 0;
}
#intro p {
	text-align: justify;
	margin: 0;
}
#windows {
	width: 996px;
	margin: 0 auto;
	height: 124px;
	clear: both;
}
#windows img {
	margin: 0 22px 0 0;
}
#windows .last {
	margin-right: 0;
}


/* COLLECTION */

#collection nav li a.on {
	background: #475544;
}
#collection nav li a:hover {
	background: #8c8535;
}
#titles {
}
#titles img {
	display: block;	
}
#titles li {
	list-style: none;
	float: left;
	margin: 0 13px 28px 12px;
	_margin: 0 11px;
}
#titles a {
	width: 230px;
	height: 148px;
	overflow: visible;
	display: block;
}


/* COLLECTION: INDIVIDUAL TITLES */

#synopsis p {
	margin: 0 0 24px 0;
}
.quotes {
	width: 472px;
	_width: 460px; /* ie fix */
	min-height: 236px;
	float: left;
	margin: -6px 0 30px 58px;	
}
.quotes li {
	list-style: none;
}
.nextlink {
	color: #ababab;
	float: right;
	font-style: italic;
	margin: -53px 10px 0 0;
}
.thumbs {
	width: 996px;
	margin: 0 auto 38px auto;	
}
.product {
	width: 498px;
	_width: 485px;
	min-height: 220px;
	display: block;
	float: left;
	margin: 0 0 42px 12px;
}
.product img {
	float: left;
	margin: 0 22px 0 0;
}
.product h2 {
	margin: 0 0 14px 0;
}
.product ul {
	margin: 0 0 16px 0;
	padding: 0 20px 0 0;
	float: right;
	width: 302px;
	_width: 290px;
}
.product ul.noslick {
	float: left;
}
.product li {
	font-size: 11px;
	line-height: 16px;
	list-style: none;
}
li.special {
	margin: 0 0 4px 0;
}
li.indent {
	list-style: inside disc;
}
.links {
	width: 996px;
	/* height: 121px; */
	display: block;
	margin: 0 auto;
	clear: both;
}
.links img {
	/* width: 498px; */
	height: 121px;
	display: block;
	float: left;
	margin: 0 0 26px 0;
}


/* NEWS */

#news nav li a.on {
	background: #1d306a;
}
#news nav li a:hover {
	background: #354880;
}
#news #articles {
	width: 468px;
	float: left;
	margin: 0 16px 0 0;
}
h3#comments {
	margin: 0 0 0 12px;
	padding: 0 0 40px 0;
	border-bottom: 1px solid #EEEEEE;
}
#commentform {
	margin: 0 0 0 12px;
}
#commentform textarea {
	width: 456px;
}
.commentlist {
	list-style: none;
	margin: 0 0 0 12px;
}
.commentlist li {
	border-bottom: 1px solid #EEEEEE;
	padding: 20px 0 0 0;
}
.commentlist cite {
	float: none;
}
.commentmetadata {
	margin: 0 0 12px 0;
}
.avatar {
	float: right;
}


/* MANGA */

#books nav li a.on {
	background: #00a7ab;
}
#books nav li a:hover {
	background: #0c9;
}


/* CATALOGUE & NEWS ITEMS */

.catalogue {
	width: 480px;
	float: left;
	margin: 0 16px 0 0;
}
.catalogue p {
}
.slick {
	float: left;
}
.post {
	border-bottom: #eee solid 1px;
	margin: 0 0 40px 12px;
}
.entry {
	margin: 0 0 0 92px;
}
#news .entry {
	margin: 0 0 0 0;
}
.moreinfo,
.ordernow {
	width: 95px;
	height: 25px;
	display: block;
	float: left;
	text-indent: -9999px;
	margin: 0 20px 14px 0;
}
.moreinfo {
	background: url(images/moreinfo.png) 0 0 no-repeat;
}
.ordernow {
	background: url(images/ordernow.png) 0 0 no-repeat;
}
.postmetadata {
	clear: both;
	margin: 0 0 12px 0;
}
#news .postmetadata {
	border-top: 1px solid #eee;
	padding: 10px 0 0 0;
}
.pagination {
	margin: 0 0 40px 0;
}
.pagination li {
	font-size: 16px;
	list-style: none;
	display: inline;
	margin: 0 10px;
}
.pagination li a {
	color: #666;
}


/* SIDEBAR */

aside {
	width: 485px;
	float: left;
	margin: 0 0 0 38px;
}
#promo .arrietty a {
	position: relative;
	top: -144px;
	left: 20px;
	margin: 0 3px 0 0;
}
#promo .whisper a {
	position: relative;
	top: -40px;
	left: 388px;
	margin: 0 3px 0 0;
}
#promo .laputa a, #promo .yamadas a
{
	position: relative;
	top: -62px;
	left: 40px;
	margin: 0 3px 0 0;
}
li.pagenav {
	list-style: none;
	text-align: right;
}


/* FOOTER */

footer {
	border-top: 1px solid #c29c31;
	border-top-style: dotted;
	width: 996px;
	margin: 28px auto 22px auto;
	clear: both;
}
footer .logo {
	float: right;
	margin: 0 0 0 28px;
}
.copyright {
	width: 600px;
	display: block;
	padding-top: 22px;
	margin: 0;
}
.copyright li {
	font-size: 10px;
	line-height: 14px;
	list-style: none;
}