/*	First, the things that are on every page: links, background, header, and navigation. */

* {
	border: 0;
	margin: 0;
}

html { min-width: 1241px; }

hr {
	height: 2.5em;
	background-image: url(/images/hr.png);
	background-repeat: repeat-x;
	background-position: center;
	margin: 0 auto 0 auto;
	width: 95%;
	z-index: 5;
}

body {
	background: #000 url(/images/background.jpg) no-repeat center top;
	width: 1241px;
	margin: 0 auto 0 auto;
	font-family: monospace;
	height: 100%;
	color: #945707;
	line-height: 2em;
}

a {
	color: #f6980f;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

h1 {
	text-indent: -1000em;
	width: 860px;
	height: 110px;
	margin: 55px 0 45px 190px;
}

h1 a {
	display: block;
	height: 100%;
}

#navigation {
	width: 150px;
	margin: 0 20px 0 -10px;
	float: left;
}

#navigation li {
	margin-bottom: 10px;
	display: block;
	width: 206px;
	height: 94px;
}

/* This just pushes the bottom two down so they'll be in
	front of the "External Links" box. */

#shop { margin-top: 61px; }

#navigation li a {
	display: block;
	height: 94px;
	text-indent: -1000em;
}

#gallery a { background-image: url(/images/gallery.jpg); }

#contact a { background-image: url(/images/contact.jpg); }

#info a { background-image: url(/images/info.jpg); }

#shop a { background-image: url(/images/shop.jpg); }

#journal a { background-image: url(/images/journal.jpg); }

/*	Each background image is twice as wide as the actual navigation
	button; when it is active, or the mouse rolls over it, it just
	moves over to show the active portion. (This prevents a flicker
	from the browser loading a new image.) */

.active a { background-position: 206px 0;}

#navigation li a:hover { background-position: 206px 0; }

/*	Each "content" div is the main area in the centre of each page.
	They're all different sizes, but each has a "scroll" div in it
	to make it scroll if the contents are too large. First, index
	stuff and the scroll declaration: */

#index_content {
	text-align: center;
	background-image: url(/images/index_content.jpg);
	float: left;
	width: 438px;
	height: 301px;
	padding: 50px;
	margin-left: 100px;
	margin-top: 56px;
}

#scroll {
	overflow: auto;
	height: 100%;
}

#index_content p {
	margin-bottom: 1em;
}

/*	This is the random portrait. The div provides the frame,
	so each image just has to be the picture itself. */

#portrait {
	float: left;
	width: 327px;
	height: 368px;
	background-image: url(/images/frame.jpg);
	margin-left: 20px;
	margin-top: 20px;
}

#portrait img {
	margin: 36px 0 0 39px;
}

/*	Gallery: */

#gallery_content {
	background-image: url(/images/gallery_content.jpg);
	float: left;
	width: 714px;
	height: 508px;
	padding: 60px 40px 60px 60px;
	margin-left: 50px;
	margin-top: -25px;
	position: relative;
	/* Total size: 814 x 628 */
}

/*	If you would like more images to fit in the box without scrolling,
	decrease the margin amount below: */

#gallery_content img {
	display: block;
	float: left;
	margin: 12px;
}

#gallery_content p {
	font-size: small;
	position: absolute;
	text-align: center;
	width: 85%;
	top: 30px;
}


/*	Contact: */

#contact_content {
	background-image: url(/images/contact_content.jpg);
	float: left;
	width: 469px;
	height: 380px;
	padding: 50px;
	margin-left: 80px;
	margin-top: 50px;
	/* Total size : 569 x 480 */
}

#contact_content p {
	text-align: center;
	margin-bottom: 1em;
}

#email {
	text-indent: -1000em;
	width: 180px;
	height: 15px;
	margin: 0 auto 0 auto;
}


#email a {
	background-image: url(/images/email.png);
	display: block;
	height: 100%;
}

#email a:hover {
	background-position: 180px 0;
}

#grey_witch_contact {
	margin-left: 35px;
	margin-top: 10px;
}


/*	Info. The content div of every subpage is of the class "info_content",
	but each has its own id as well. Generic (class-level) stuff first.*/

.info_content {
	background-image: url(/images/info_content.jpg);
	float: left;
	width: 741px;
	height: 534px;
	padding: 80px 50px 50px 50px;
	margin-left: 53px;
	margin-top: -26px;
}

.info_content h2, h3 {
	text-indent: -1000em;
	background-repeat: no-repeat;
	width: 90%;
}

.info_content h2 {
	height: 28px;
	margin: 1em auto 2em auto;
	background-position: center;
}

.info_content h3 {
	height: 20px;
	margin: 2em 0 1.5em 20px;
}

.column {
	width: 48%;
	float: left;
}

#linkback {
	position: absolute;
	top: 225px;
	font-size: small;
}

/*	Default info page: */
	
#default {
	width: 641px;
	height: 464px;
	padding: 100px;
}

#default p {
	margin: 1em 0 5em 45px;
}

#default h3 {
	margin: 20px 0 0 25px;
	width: 250px;
}

#faqs { background-image: url(/images/titles/faqs.png); }

#things_to_know { background-image: url(/images/titles/things_to_know.png); }

#tutorials { background-image: url(/images/titles/tutorials.png); }

#media { background-image: url(/images/titles/media.png); }

/* FAQs: */

#queue_faq #scroll p, #commission_faq #scroll p, #costume_faq #scroll p {
	margin: 1em 20px 1em 20px;
}

#queue_faq p.question, #commission_faq p.question, #costume_faq p.question {
	color: #ac4711;
}

#queue_faq p.answer, #commission_faq p.answer, #costume_faq p.answer {
	padding-left: 50px;
}

#queue_faq_title { background-image: url(/images/titles/queue_faq.png); }

#commission_faq_title { background-image: url(/images/titles/commission_faq.png); }

#costume_faq_title { background-image: url(/images/titles/costume_faq.png); }

/* Care Instructions, TOS, and links: */

#care_instructions #scroll p, #tos #scroll p, #links #scroll p {
	margin: 1em 20px 1em 20px;
}

/* Care titles... */
#care_instructions_title { background-image: url(/images/titles/care_instructions.png); }

#cleaning { background-image: url(/images/titles/cleaning.png); }

#wear { background-image: url(/images/titles/wear.png); }

#storage { background-image: url(/images/titles/storage.png); }

#maintenance { background-image: url(/images/titles/maintenance.png); }


/* TOS titles... */
#tos_title { background-image: url(/images/titles/tos.png); }

#deadlines { background-image: url(/images/titles/deadlines.png); }

#measurements_subheading { background-image: url(/images/titles/measurements_subheading.png); }

#payment { background-image: url(/images/titles/payment.png); }

#warranty { background-image: url(/images/titles/warranty.png); }

#shipment { background-image: url(/images/titles/shipment.png); }

#cancellation { background-image: url(/images/titles/cancellation.png); }

#exclusivity { background-image: url(/images/titles/exclusivity.png); }

#style { background-image: url(/images/titles/style.png); }

/* Links titles... */
#links_title { background-image: url(/images/titles/links.png); }

#website_credits { background-image: url(/images/titles/website_credits.png); }

#costume_resources { background-image: url(/images/titles/costume_resources.png); }

#personal_links { background-image: url(/images/titles/personal_links.png); }

/* Measurements (styles and title): */

#measurements_title { background-image: url(/images/titles/measurements.png); }

#measurements #scroll p {
	color: #662b0b;
}

#measurements .category {
	margin: .5em 0 .5em 50px;
}

#measurements #pdf {
	text-align: center;
	margin: 0;
}

#measurements #intro {
	margin: 0 0 .5em 10px;
}

#measurements ul, #tos ul {
	list-style-image: url(/images/bullet.png);
	margin-left: 60px;
}

/* Customer gallery: */

#customer_gallery h2 {
	margin: 10px 0 0 0;
}

#customer_gallery #scroll {
	width: 85%;
	margin: 0 auto 0 auto;
}

#customer_photos { background-image: url(/images/titles/customer_photos.png); }

#customer_gallery #customer_videos {
	background-image: url(/images/titles/customer_videos.png);
	margin-top: 90px;
}

#customer_gallery img { margin-right: 5px; }

#customer_gallery #scroll p {
	margin: -15px 0 10px 0;
	padding-left: 40px;
}

/* Duct tape dummy: */

#dtd_title {
	background-image: url(/images/titles/dtd.png);
	margin: .5em 0 1em 0;
}

#dtd img {
	margin: 20px 0 0 20px;
}