/*  
Theme Name: Watery Pork
Author: Phil Jones
Author URI: http://philippejones.com
*/

body {
	color: #000;
	font-size: 12px;
	font-family: Verdana, Helvetica, sans-serif;
	text-align: center;
	background: #fff;
	margin: 0;
	padding: 0;
	}





/* Construction */

div#pig {
	position: relative;
	clear: both;
	text-align: left;
	width: 750px;
	margin: 4px auto;
	}

div#eye {
	position: absolute;
	top: 68px;
	left: 28px;
	width: 150px;
	height: 21px;
	}

div#guts {
	position: relative;
	width: 686px;
	text-align: left;
	background: url("images/bg.gif") repeat-y top center;
	}

img.ribtop {
	position: relative;
	left: 13px;
	margin: 2px 0 -2px;
	}	

div.rib {
	position: relative;
	width: 658px;
	background: url("images/rib.gif") repeat-y top center;
	margin: 0 auto;
	}

div.spare {
	position: relative;
	width: 608px;
	margin: 0 auto;
	padding: 4px 0;
	}	

img.portrait {
	position: relative;
	float: left;
	margin: 0 4px 0 0;
	}

img.ribbot {
	position: relative;
	left: 14px;
	margin: 0 0 2px;
	}

div.tail {
	position: absolute;
	top: 50px;
	left: 430px;
	margin: 5px;
	padding: 5px;
	}




/* Menus */

ul#head {
	position: relative;
	top: 0;
	left: 0;
	width: 750px;
	height: 112px;
	background: url(images/head.gif);
	margin: 0;
	}

#head li {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	}

#head li, #head a {
	display: block;
	left: 640px;
	width: 95px;
	height: 17px;
	}

#head1 {top: 16px;}
#head2 {top: 38px;}
#head3 {top: 60px;}
#head4 {top: 82px;}

#head1 a:hover {background: transparent url(images/head.gif) -750px 0 no-repeat;}
#head2 a:hover {background: transparent url(images/head.gif) -750px -17px no-repeat;}
#head3 a:hover {background: transparent url(images/head.gif) -750px -34px no-repeat;}
#head4 a:hover {background: transparent url(images/head.gif) -750px -51px no-repeat;}


ul#tail {
	position: relative;
	top: 0;
	left: 0;
	width: 686px;
	height: 38px;
	background: url(images/tail.gif);
	margin: 0;
	}

#tail li {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	}

#tail li, #tail a {
	display: block;
	top: 12px;
	height: 14px;
	}

#tail1 {left: 178px; width: 60px;}
#tail2 {left: 252px; width: 76px;}
#tail3 {left: 342px; width: 76px;}
#tail4 {left: 432px; width: 76px;}

#tail1 a:hover {background: transparent url(images/tail.gif) -686px 0 no-repeat;}
#tail2 a:hover {background: transparent url(images/tail.gif) -686px -14px no-repeat;}
#tail3 a:hover {background: transparent url(images/tail.gif) -686px -28px no-repeat;}
#tail4 a:hover {background: transparent url(images/tail.gif) -686px -42px no-repeat;}




/* Formatting */

a {
	color: #98291e;
	text-decoration: none;
	}

h1 {
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	margin: 0;
	padding: 0;
	}

h2 {
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	margin: 0;
	padding: 0;
	}

h3 {
	font-size: 12px;
	font-weight: normal;
	text-align: left;
	margin: 0;
	padding: 0 0 16px;
	}

p {
	font-size: 12px;
	text-indent: 32px;
	text-align: justify;
	margin: 0;
	padding: 0 0 6px;
	}

small {
	font-size: 10px;
	margin: 0;
	}




/* Lists */

ul {
	list-style-type: disc;
	list-style-position: outside;
	margin: 0 32px;
	padding: 0;
	}

ol {
	list-style: decimal;
	text-align: left;
	margin: 0 32px;
	padding: 0;
	}

li {
	list-style-image: url(images/li.gif);
	margin: 0;
	padding: 6px 0;
	}

	li.comment, li.commentalt {
		list-style: none;
		clear: both;
		width: auto;
		margin: 0;
		padding: 2px;
		}

	li.comment {
		color: #000;
		background: #b2a17e;
		}


/* Misc */

blockquote {
	color: #000;
	background: #b2a17e;
	margin: 0 30px 0 30px;
	padding: 2px;
	}

	blockquote p {
		font-size: 10px;
		text-indent: 0px;
		text-align: justify;
		margin: 0;
		padding: 2px 2px 0 2px;
		}

input {
	font-size: 10px;
	color: #000;
	font-weight: bold;
	border: 2px solid #000;
	background: #d1c6ab;
	margin: 4px auto;
	padding: 1px;
	}

input:focus {
	background: #fff;
	}

textarea {
	font-size: 12px;
	color: #000;
	width: 450px;
	height: 150px;
	border: 2px solid #000;
	background: #d1c6ab;
	margin: 4px auto;
	padding: 1px;
	}

textarea:focus {
	background: #fff;
	}

form {
	margin: 0;
	padding: 0;
	}

a.out:after {
	content: url(images/out.gif)
	}

table {
	}

tr {
	}

th {
	vertical-align: top;
	text-align: right;
	}

td {
	vertical-align: top;
	text-align: left;
	}

hr {
	width: 256px;
	height: 0;
	border-width: 2px 0 0;
	border-color: #000;
	border-style: solid;
	margin: 8px auto 8px 32px;
	}

.center {
	text-align: center;
	}

.right {
	text-align: right;
	}

.counter {
	text-align: center;
	border: 0;
	}