/* ToucanPirates.net CSS Styling Page (July 2009) */

/* !HTML RESET */

html, body, h1, h2, h3, p, ul, li, form {
	border: 0;
	margin: 0;
	padding: 0;
}

p, li {
	color: moccasin;
	font-size: 12px;
	}

a {
	color: silver;
	text-decoration: none;
	text-shadow: 1px 1px 1px black;
	outline: none;
	}
	
a:hover {
	color: orange;
	}
	
.center {
	text-align: center;
	}

img, a img {
	border: 0;
	}

/* !     BODY STYLE */

body {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	background: url(pix/woodtile3_darkest.jpg) fixed black repeat 0 0;
	}

/* !     CONTAINER STYLE */

#container {
	display: block;
	width: 800px;
	margin: auto;
	}

/* !     URL STYLE */

#url a {
	display: block;
	margin: auto;
	text-align: center;
	font-size: 12px;
	color: gold;
	font-style: italic;
	margin: 7px 0 1px;
	}

#url a:hover {
	color: orange;
	}

/* !     HEADER STYLE */

#header p.knotline{
	display: block;
	width: 499px;
	height: 57px;
	margin: 0 auto -6px;
	background: url(pix/knotline.gif) no-repeat 0 0;
	}
	
#header p.logo {
	display: block;
	width: 450px;
	height: 67px;
	margin: -3px auto 1px;
	background: url(pix/piratelogo.gif) no-repeat 0 0;
	text-indent: -9999px;
	}

/* !     NAVIGATION STYLE */

#nav p {
	font-size: 20px;
	text-align: center;
	font-style: italic;
	font-weight: bold;
	color: gold;
	text-shadow: 1px 1px 1px black;
	margin-top: 2px;	
	}

#nav ul {
	display: block;
	width: 460px;
	height: 20px;
	margin: 8px auto 6px;
	}
	
#nav li {
	display: block;
	float: left;
	width: 110px;
	margin-right: 5px;
	list-style: none;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	}

/* hilite the link for the current page */

body#home_page #hpage,
body#tale_page #tpage,
body#clips_page #cpage,
body#purchase_page #ppage {
	color: orange;
	}


/* !     CONTENT STYLE */

#content {
	display: block;
	width: 600px;
	margin: auto;
	padding-top: 15px;
	border-top: 1px solid gray;
	}

#content p.intro {
	font-size: 17px;
	margin-bottom: 15px;
	width: 600px;
	text-align: center;
	color: #e6e6e6;
	font-weight: bold;
	text-shadow: 1px 1px 1px black;
	}
	
#content p {
	font-size: 13px;
	text-indent: 5px;
	margin-bottom: 10px;
	line-height: 17px;
	}

#content p span {
	color: gold;
	}

/* !     REVIEW QUOTE STYLE */

#content .quote {
	display: block;
	width: 450px;
	margin: auto;
	padding: 10px 10px 0;
	border: 1px solid orange;
	margin-bottom: 10px;
	}

#content .quote p {
	color: silver;
	font-style: italic;
	font-size: 12px;
	line-height: 15px;
	}

#content .quote p.source {
	font-size: 10px;
	color: moccasin;
	font-style: normal;
	text-align: center;
	}
	
#content .quote p.source span {
	font-size: 12px;
	color: gold;
	}

/* !     CONTENT IMAGE STYLES */

#content p#peeking {
	display: block;
	width: 125px;
	height: 87px;
	float: left;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: -3px;
	background: url(pix/bs_peeking.jpg) no-repeat 0 0;
	}

#content p#concertina {
	display: block;
	width: 133px;
	height: 150px;
	float: left;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: -3px;
	background: url(pix/tp_concertina.gif) no-repeat 0 0;
	}

#content p#bass {
	display: block;
	width: 143px;
	height: 227px;
	float: right;
	margin-left: 10px;
	margin-top: 2px;
	margin-bottom: -3px;
	background: url(pix/tp_bass.gif) no-repeat 0 0;
	}

#content p#banjo {
	display: block;
	width: 152px;
	height: 138px;
	float: left;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: -3px;
	background: url(pix/tp_banjo.gif) no-repeat 0 0;
	}

#content p#jollyroger {
	display: block;
	width: 115px;
	height: 94px;
	float: left;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: -3px;
	background: url(pix/jollyroger.jpg) no-repeat 0 0;
	}

#content p#bscover {
	display: block;
	width: 224px;
	height: 141px;
	float: left;
	margin: 2px 10px -3px 0;
	background: url(pix/bsboarding.jpg) no-repeat 0 0;
	}

#content p#sc_rowing {
	display: block;
	width: 224px;
	height: 141px;
	float: left;
	margin: 2px 10px -3px 0;
	background: url(pix/sc_rowing.jpg) no-repeat 0 0;
	}

#content p#bt_pirate {
	display: block;
	width: 224px;
	height: 141px;
	float: left;
	margin: 2px 10px -3px 0;
	background: url(pix/bt_pirate.jpg) no-repeat 0 0;
	}



/* !     DISPLAYBOX STYLE (main page) */

#displaybox {
	display: block;
	width: 680px;
	height: 226px;
	margin: 20px auto;
	}

.albumbox {
	display: block;
	float: left;
	width: 226px;
	height: 232px;
	}

.albumtitle {
	display: block;
	float: left;
	width: 224px;
	font-size: 16px;
	text-align: center;
	}

.albumtitle span {
	font-size: 14px;
	color: moccasin;
	}

.year {
	font-size: 10px;
	font-style: italic;
	text-align: center;
	margin: 3px 0 6px;
	}
	
.artwork a {
	display: block;
	float: left;
	width: 224px;
	height: 141px;
	text-indent: -9999px;
	margin-bottom: 7px;
	}

.artwork a#bsartwork {
	background: url(pix/bsboarding.jpg);
	}
	
.artwork a#scartwork {
	background: url(pix/sc_rowing.jpg);
	}
	
.artwork a#btartwork {
	background: url(pix/bt_pirate.jpg);
	}

.artwork a#all3album {
	background: url(pix/all3_album.jpg);
	}
	
.blurb {
	font-size: 12px;
	text-align: center;
	margin: 5px;
	}

.blurb span {
	color: silver;
	}
	
/* !     CLIPBOX STYLE (audio clips page) */	
	
.clipbox {
	display: block;
	width: 550px;
	min-height: 143px;
	margin: 0 auto 8px;
	}
	
.cliptitle {
	display: block;
	width: 323px;
	float: left;
	margin: auto;
	font-size: 17px;
	margin-bottom: 15px;
	margin-top: 7px;
	text-align: center;
	font-weight: bold;
	}

.cliptitle span {
	font-size: 14px;
	color: moccasin;
	}

.clipbox li {
	font-size: 12px;
	list-style: none;
	text-align: center;
	text-indent: 0;
	}

.clipbox li span {
	font-size: 9px;
	font-style: italic;
	font-weight: thin;
	}

/* !     MORE CLIPBOX STYLE (purchase page) */

.clipbox form { /* style the paypal rollover button */
	display: block;
	float: right;
	width: 72px;
	height: 68px;
	margin-right: 25px;
	margin-top: 3px;
	}
	
#purchase_page .cliptitle { /* shorten album title box */
	width: 215px;
	padding-left: 10px;
	margin-top: 11px;
	}
	
#purchase_page .clipbox li { /* left-align the description box on the purchase page only */
	text-align: left;
	padding-left: 234px;
	}

#purchase_page .clipbox li span { /* style the price tag */
	font-size: 13px;
	color: gold;
	}
	
/* !     ALBUM PAGE STYLE */

form.center { /* styles the buyit doubloon on the album pages */
	margin: -10px 0 10px;
	}
	
/* !     FOOTER STYLE */

#footer {
	display: block;
	width: 600px;
	height: 30px;
	clear: both;
	margin: 10px auto;
	padding: 15px;
	font-size: 11px;
	text-align: center;
	font-style: italic;
	color: gold;
	border-top: 1px solid gray;
	}