/* 
	The basics
*/

html {
	font: medium/1.5 Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
	color: #333;
	background-color: #eee;
}

body {
	margin: 32px auto 64px auto;
	padding: 20px 30px 12px 30px;
	min-width: 700px;
	max-width: 1350px;
	width: 90%;
	background-color: #fff;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 2px 2px 2px #333;
	-webkit-box-shadow: 2px 2px 2px #333;
	box-shadow: 2px 2px 2px #333;
	border: 1px solid #ccc;
}

article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object {
	display: block;
}

video {
	margin-top: 4px;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 12px 0 0 0;
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
}

h2 {
	margin: 24px auto 0 0;
	font-size: 1.125em;
}

h2 + p {
	margin-top: 0;
}

h3 {
	font-size: 1em;
}

h3 + p {
	margin-top: 0;
}

p {
	text-align: justify;
}

p.right {
	text-align: right;
}

p.indent {
	margin-left: 32px;
}

div.highlight {
	margin: 12px 32px;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
}

div.highlight p {
	margin: 8px;
	text-align: left;
	font-style: italic;
}

p.note {
	margin-top: 0;
	font-size: small;
}

/* Date in Book of Junk Mail Ailments list */
p.listFooter {
	margin-top: 0;
	font-style: italic;
}


/*
	Navigation
*/

/* Global links */
#global {
	position: relative;
	float: right;
	margin: -44px 4px 0 4px;
	font-size: small;
}

#global ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#global ul li {
	float: right;
	margin: 0 0 0 8px;
}

#global ul li a {
	text-decoration: none;
}


/* Crumbs */
#crumbs {
	float: left;
	margin: 4px 0 8px 0;
	font-size: small;
	clear: left;
}

#crumbs ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#crumbs ul li {
	float: left;
	margin-right: 8px;
	margin-bottom: 0;
}

#crumbs ul li a {
	text-decoration: none;
}

span.continue {
	font-size: small;
	font-style: italic;
}

/* Navigation other than <nav> (i.e. pagination) */
p[ role="navigation"] {
	margin: 0;
	font-size: small;
}

a {
	color: #cc0000;
}

/* FAQs */
a[ href^="#q"] {
	text-decoration: none;
}

/* YouTube videos */
iframe {
	margin-top: 12px;
}

/* Prevent ugly wrapping of links in footer: */
footer p a {
	display: inline-block;
}

/* Needed for normal lists but needs to be removed for menu lists */
li {
	margin-bottom: 8px;
}


/*
	Header
*/

header {
	clear: left;
}

header.mast {
	position: relative;  /* Allows absolute positioning of nav */
	background-image: url(_l/logo.jpg);
	background-position: right;
	background-repeat: no-repeat;
	height: 194px;
	border-bottom: 2px solid #333;
}

header.mast hgroup {
	margin-right: 200px;
}

header.mast h1 {
	font-size: 2em;
	color: #c00;
	margin: 0;
	text-transform: uppercase;
}

header.mast h2 {
	font-size: 1.25em;
	margin: 0;
}

header.mast a {
	text-decoration: none;
}

header.mast nav {
	position: absolute;
	right: 200px;
	bottom: 0;
	left: 0;
	/* margin: 110px 200px 0 0; */
}

header.mast nav ul {
	width: 90%;
	margin: 0;
	padding: 0;
	list-style: none;
}

header.mast nav ul li {
	float: left;
	margin-right: 24px;
	margin-bottom: 0;
	font-weight: bold;
	text-transform: uppercase;
}

header.mast nav ul li a {
	text-decoration: none;
}

header h1 a {
	color: #333;
	text-decoration: none;
}

header p {
	font-size: small;
	font-style: italic;
}

article {
	margin: 20px 0;
}

article header h1 {
	text-align: left;
	font-size: 1.5em; /* 24px */
	text-transform: uppercase;
	border-bottom: 1px dotted #ccc;
}

article header hgroup h1 {
	margin-top: 0;
	font-size: 1.5em;
}

article header hgroup h2 {
	font-size: 1.25em;
	border-bottom: none;
	text-transform: none;
	margin: 0;
	line-height: 1.25em;
}

article > p:nth-child(2) {
	font-weight: bold;
}

article > p:nth-child(2)::first-letter {
	font-size: 3.75em;
	float: left;
	line-height: .85em;
}

article section footer {
	border: none;
	margin-bottom: 32px;
}

article section footer p {
	margin: 4px 0;
}

article section footer.shop {
	float: left;
	margin: 4px 0 32px 0;
	padding: 4px;
	border: 1px solid #999;
	background-color: #f7f7f7;
}

article section footer ul {
	margin: 0;
	padding: 0;
}

article section footer ul li {
	list-style-type: none;
}

article section footer ul li h2 {
	margin-top: 12px;
}

article section footer ul li h2 + p {
	margin-top: 0;
}

article section footer ul li p {
	font-style: normal;
}

article footer {
	margin-top: 16px;
	border-top: 3px double #333;
	border-bottom: 3px double #333;
	clear: left;
}

article footer p {
	margin: 4px;
	font-style: italic;
}

article footer .left {
	float: left;
	width: 50%;
}

article footer .right {
	float: left;
	width: 50%;
}

article footer .left p {
	text-align: left;
}

article footer .right p {
	text-align: right;
}

article aside {
	float: right;
	width: 250px;
	margin: 16px 0 24px 24px;
	padding: 8px 0;
	border-top: 3px double #333333;
	border-bottom: 3px double #333333;
	clear: both;
}

article aside.infoBox {
	font-size: 95%;
	font-style: italic;
}

article aside.old {
	float: none;
	width: auto;
	margin: 16px;
	padding: 8px;
	background-color: #c00;
	color: #fff;
	border: none;
}

article aside.old p {
	font-weight: bold;
	text-align: center;
	margin: 0;
}

article aside h1 {
	font-size: 1.125em;
	margin: 0;
}

article aside h2 {
	font-size: 1em;
	margin-top: 24px;
}

article aside h1 + p,
article aside h2 + p {
	margin-top: 0;
}

article aside ul {
	float: left;
	width: 250px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

article aside ul li {
	border-bottom: 1px dotted #cccccc;
	padding-left: 5px;
	margin-bottom: 0;
}

article aside ul li.block {
	padding: 5px;
}

article aside ul li:first-child {
	border-top: 1px dotted #cccccc;
}

article aside ul li:hover {
	background-color: #e7e7e7;
}

article aside ul li a {
	display: block;
	text-decoration: none;
}

article aside ul li a:hover {
	background-color: #e7e7e7;
}

article aside footer {
	border-bottom: 1px solid #cccccc;
}

article aside footer p {
	font-size: .85em;
	font-style: italic;
	text-align: right;
	margin-bottom: 0;
}

article section {
	margin: 16px 0;
}

article section header h1 {
	font-size: 1.25em;
	margin: 24px 0 0;
	border-bottom: none;
}

article section header h1 + p {
	margin-top: 0;
}

article section header + p,
article section header + aside,
article section header + aside + p {
	margin-top: 0;
}

article section h2 {
	font-size: 1.125em;
}

/* More than one article (home page) */
article + article {
	margin-top: 48px;
}

section.list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure {
	float: left;
	margin: 12px 4px 12px 0;
	border: 1px solid #ccc;
}

figure.right {
	float: right;
	margin: 12px 0 12px 12px;
}

figcaption {
	background-color: #f7f7f7;
	text-align: center;
	font-style: italic;
	padding: 6px;
}


aside {
	margin: 10px 0;
	border-top: 3px double #333;
	border-bottom: 3px double #333;
}

div#colophon {
	position: fixed;
	width: 100%;
	height: 48px;
	background-color: #fff;
	opacity: .9;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 hack */
	filter: alpha(opacity = 90); /* IE 5-7 hack */
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ccc;
}

div#colophonInner {
	width: 90%;
	margin: 4px auto;
	padding: 0;
	clear: both;
}

div.left, div.right {
	float: left;
	width: 50%;
}

div#colophonInner .right {
	text-align: right;
}

div#colophonInner .right form {
	margin: 0;
	padding: 0;
}

div#colophon p {
	font-size: .85em;
	margin: 5px 0 0 0;
}

/* Junk Buster App - mostly needs left align */
section object {
	margin: 12px 0;
}

/* Junk Buster App - drop in div and centre */
div object {
	margin: 12px auto;
}

/* Stickers (with buttons) - centered */
div.centreStickers {
	width: 580px;
	margin: 12px auto;
}

img {
	border: none;
}

img.leftFloat {
	float: left;
	margin: 0 8px 0 0;
}

div.box {
	width: 700px;
	margin: auto;
}

/* .productsLarge = @media */
div.products, div.productsLarge {
	float: left;
	width: auto;
}

/* Colophon buttons */
ul.colophonButtons {
	list-style: none;
	padding: 0;
	margin: 8px 0;
}

ul.colophonButtons li {
	float: left;
	text-align: center;
	padding: 0;
	margin-right: 10px;
	padding: 0 8px;
	background-color: #ffffff;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.colophonButtons li:hover {
	background-color: #cc0000;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.colophonButtons li a {
	display: block;
	text-decoration: none;
}

ul.colophonButtons li a:hover {
	color: #fff;
	text-shadow: 2px 2px 2px #333;
}


/* Buttons */
ul.buttons {
	float: left;
	list-style: none;
	padding: 0;
	margin: 12px 16px 12px 0;
}

ul.buttons li {
	width: 125px;
	text-align: left;
	padding-left: 8px;
	margin-bottom: 0;
	background-color: #ffffff;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.buttons li:hover {
	background-color: #cc0000;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.buttons li a {
	display: block;
	text-decoration: none;
}

ul.buttons li a:hover {
	color: #fff;
	text-shadow: 2px 2px 2px #333;
}


/* Buttons for labels */
ul.labels {
	list-style: none;
	padding: 0;
	margin: 10px 0;
}

ul.labels li {
	float: left;
	text-align: left;
	padding: 0 10px;
	background-color: #ffffff;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.labels li:hover {
	background-color: #cc0000;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

ul.labels li a {
	display: block;
	text-decoration: none;
}

ul.labels li a:hover {
	color: #fff;
	text-shadow: 2px 2px 2px #333;
}

ul.labels li:first-child {
	padding: 0 5px 0 0;
	border-radius: none;
	-moz-border-radius: none;
	font-weight: bold;
}

ul.labels li:first-child:hover {
	background-color: #fff;
	border-radius: none;
	-moz-border-radius: none;
}


/*
	Forms
*/

form {
	margin: 0;
}

form fieldset {
	margin: 16px 0 32px 0;
	padding: 8px 16px 16px;
	border: 1px solid #999;
	border-radius: 4px;
	-moz-border-radius: 4px;
}

form fieldset legend {
	color: #333;
	font-size: large;
	font-weight: bold;
	padding-bottom: 4px;
}

form label {
	display: block;
	font-weight: bold;
	margin: 16px 0 2px 2px;
}

form label + p {
	margin-top: 0;
}

legend + label, form legend + p {
	margin-top: 0;
}

form input, form textarea {
	font: small/1 "Courier New", Courier, monospace;
	padding: 3px;
	width: 98%;
}

form input[ type="submit"] {
	font: medium Georgia, "Times New Roman", Times, serif;
	width: auto;
	margin-top: 8px;
}

form input[ type="checkbox"], form input[ type="radio"] {
	display: inline;
	width: auto;
	margin: 8px;
}

form input[ type="number"] {
	display: inline;
	width: 40px;
}

/* Float label for spam test */
form label[ for="spam"] {
	width: auto;
	float: left;
	margin: 4px 4px 4px 0;
}

/* Float label for displaying e-mail on confirmation pages */
span.label {
	display: block;
	float: left;
	width: 64px;
	font-weight: bold;
}

div.err {
	background-color: #c00;
	color: #fff;
	font-weight: bold;
	margin: 0 0 16px 0;
	padding: 8px 16px;
	border-radius: 8px;
	-moz-border-radius: 8px;
}

/* Google search form */
input[ name="q"] {
	width: 240px;
}

div.letter {
	width: 700px;
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #999;
	background-color: #f7f7f7;
}

div.letter span {
	color: #c00;
	font-weight: bold;
}


/*
	Tables
*/

table {
	margin: 12px 0;
	border: 2px solid #333;
}

table th {
	text-align: left;
	padding: 2px 24px 2px 8px;
	background-color: #333;
	color: #fff;
}

table tr:nth-child(odd) {
	background-color: #f7f7f7;
}

table tr:nth-child(even) {
	background-color: #e7e7e7;
}

table td {
	padding: 0 24px 0 8px;
}

table tfoot td {
	font-style: italic;
	font-weight: bold;
}

table tfoot td.right {
	font-size: small;
	text-align: right;
}

table a {
	color: #333;
}

/* Needed for < IE9 (which doesn't understand <q> and pseudo elements...) */
q:before, q:after {
  content: "";
}


@media all and (max-width: 950px) {
/* Stickers page - prevent breaking of layout at small resolution */
ul.buttons {
	margin-right: 0;
}

/* Stickers page - float buttons underneath large product images */
div.productsLarge {
	float: left;
	width: 422px;
}

div.productsLarge ul.buttons {
	margin-top: 0;
}

div.productsLarge ul.buttons li {
	float: left;
}

div.productsLarge figure {
	margin-bottom: 8px;
}