/* @override http://skullcatdesign.com/css/skullstyle.css */
/* 
Theme Name: Skullcat Theme
Description: A custom theme made for Skullcat Design (www.skullcatdesign.com).
Author: <a href="http://www.r-blog.com">Ryan Miglavs</a>
Author URI:http://www.r-blog.com

Credits:
Skullcat Theme designed by <a href="http://www.r-blog.com">Ryan Miglavs</a>.

License -
All code, art, images, and copy is copyright 2006-2007 Ryan Miglavs, and may not be used without express permission from the author.

*/

/*-------------- Layout ------------------*/
* {
    margin: 0;
    padding: 0;
    }
/* This draws red borders on all divs */
/*div {
    border: 1px solid #ff0000;
    }*/
body {
    text-align: center; /* IE 5.5 hack */
    background: #000;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: x-small;     /* <-- for IE5/Win */
    voice-family: "\"}\"";  /* Box Model Hack */
    voice-family: inherit;  /* (www.tantek.com/CSS/Examples/boxmodelhack.html */
    font-size: small;       /* <-- for compliant browsers */
	text-shadow: 0 0 0 #000;	/* makes the light-on-dark text look prettier in Safari */
    }
html>body { /* be nice to Opera */
    font-size: small;
    }
/*------------ Standard Styles -------------*/
h1, h2, h3, h4, h5, h6 {
    
    }
p {
    text-align: left;
    line-height: 1.3;
    margin-top: 1.3em;
    margin-bottom: 1.3em;
    }
a:link {
    color: #3597b3;
    text-decoration: underline overline;
    font-weight: bold;
    }
a:visited {
    color: #acd48d;
    text-decoration: none;
    /*text-decoration: line-through;*/
    }
a:hover {
    color: #000;
    text-decoration: none;
    background-color: #ce8bd1;
    }
a:active {
    color: #fff;
    background-color: #f678fb;
    }
a.static:link {
    color: #3597b3;
    text-decoration: underline overline;
    font-weight: bold;
    }
a.static:visited {
    color: #3597b3;
    text-decoration: underline overline;
    font-weight: bold;
    }
a.static:hover {
    color: #000;
    text-decoration: none;
    background-color: #ce8bd1;
    }
a.static:active {
    color: #fff;
    background-color: #f678fb;
    }
a img {
	border: none;
	}
abbr {
    font-size: 92%;
    color: #ddd;
    border-bottom: 1px dotted white;
    cursor: help;
    }
.clear {
	clear: both;
	}
/*-------------- Nav Stuff ---------------*/
#nav {
    position: relative;
    width: 700px;
    margin: 5px auto;
    border: 1px solid black;
    }
/*#nav h1 {
    float: right;			This stuff is for the Gilder/Levin IR.
    position: relative;		Doesn't work right in IE/Win.
    width: 315px;			I'd like to eventually get it to work.
    height: 48px;			(It lets the text show through, even
    color: #fff;			if images are turned off)
    overflow: hidden;
    }*/
#nav h1 {
	float: right;
	width: 315px;
	height: 48px;
	color: #fff;
	text-indent: -5000px;	/* Phark image replacement */
	background: url(../img/skullcat-logo.gif);
	}
#nav h1 span {
	/* This is for the Gilder/Levin image replacement technique */
    position: absolute;
    display: block;     /* Firefox hack */
    width: 315px;
    height: 48px;
    background: transparent url(../img/skullcat-logo.gif) no-repeat right bottom;
    }
#nav ul {
    clear: right;
    float: right;
    list-style: none;
    text-align: center;
    }
#nav ul li {
    display: inline;
    }
#nav ul li a {
    display: inline;
    margin-left: 1em;
    text-decoration: none;
    font-size: 110%;
	font-weight: bold;
    color: #f678fb;
    }
#nav ul li a:visited {
    text-decoration: none;
    background: none;
    color: #f678fb;
    }
#nav ul li a:hover {
    text-decoration: none;
    background: none;
    color: #fff;
    }
body#bags #t-bags a,
body#store #t-bags a,
body#store #t-store a,
body#about #t-about a,
body#toons #t-toons a,
body#contact #t-contact a {
    color: #fff;
    }
/*------------- Intro Stuff --------------*/
body#intro #header-wrap {
	margin: 10px auto 0 auto;
	text-align: center;
	}
body#intro #header-wrap h2 {
	margin: 0 auto;
	text-align: center;
	color: #ccc;
	font-size: 140%;
	}
body#intro #extra-goodies {
    position: relative;
    top: 300px;
    left: 330px;
    width: 24em;
    margin: 0 auto 10px auto;
    color: #fff;
    }
body#intro #footer {
	position: relative;
	top: 460px;
	}
#intro-clicky {
	position: absolute;
	top: 80px;
	left: -90px;
	width: 99px;
	height: 101px;
	background: #000 url(../img/clicky.gif) no-repeat left top;
	z-index: 5;
	}
#intro-wrap {
    position: relative;
    width: 500px;
    margin: 10px auto 10px auto;
    }
#intro-bag {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 550px;
    background: #000 url(../img/bag-bottom.gif) no-repeat 25px 235px;
    }
#intro-bag a {
    display: block;
    /*height: 100%;*/
    text-decoration: none;
    text-indent: -5000px;   /* Phark method of hiding link text */
    }
#intro-bag a:visited {
    text-decoration: none;
    }
#intro-bag a:hover {
    text-decoration: none;
    /*background: none;*/
    }
#intro-bunny {
    position: absolute;
    top: 0px;
    left: 25px;
    width: 165px;
    height: 235px;
    background: transparent url(../img/bunny.gif) no-repeat left top;
    }
#intro-bunny:hover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 220px;
    height: 255px;
    background: transparent url(../img/bunny.gif) no-repeat right top;
    z-index: 1;
    }
#intro-squid {
    position: absolute;
    top: 0px;
    left: 190px;
    width: 90px;
    height: 235px;
    background: transparent url(../img/squid.gif) no-repeat left top;
    }
#intro-squid:hover {
    position: absolute;
    top: 0px;
    left: 155px;
    width: 175px;
    height: 290px;
    background: transparent url(../img/squid.gif) no-repeat right top;
    z-index: 1;
    }
#intro-bird {
    position: absolute;
    top: 0px;
    left: 280px;
    width: 75px;
    height: 235px;
    background: transparent url(../img/bird.gif) no-repeat left top;
    }
#intro-bird:hover {
    position: absolute;
    top: 0px;
    left: 235px;
    width: 175px;
    height: 305px;
    background: transparent url(../img/bird.gif) no-repeat right top;
    z-index: 1;
    }
#intro-dino {
    position: absolute;
    top: 0px;
    left: 355px;
    width: 130px;
    height: 235px;
    background: transparent url(../img/dino.gif) no-repeat left top;
    }
#intro-dino:hover {
    position: absolute;
    top: 0px;
    left: 330px;
    width: 170px;
    height: 245px;
    background: transparent url(../img/dino.gif) no-repeat right top;
    z-index: 1;
    }
#intro-heart {
    position: absolute;
    top: 335px;
    left: 319px;
    width: 90px;
    height: 107px;
    }
#intro-heart:hover {
    background-image: url(../img/hearts-beating.gif);
    }
#intro-arrow {
    display: none;
    }
#texture-boxes {
    
    }
/*---------- Everything Stuff ------------*/
.wrap {
    position: relative;
    width: 700px;
    height: 525px;
    margin: 80px auto 0 auto;
    border: 3px solid #fff;
    background-color: #1a1a1a;
    }
.wrap h1 {
    margin-top: 4px;
    }
.contenterror,
.contentsuccess {
    margin-bottom: 4px;
    padding: 2px;
    background-color: #909;
    border: 2px solid #ff00ff;
    }
.contenterror {
	color: #ffff00;
	}
.contentsuccess {
	color: #fff;
	}
form#commentform {
    
    }
p.formNote {
    font-size: 90%;
    color: #ce8bd1;
    }
form#commentform fieldset {
    /*margin-right: 200px;*/
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    }
dl.comments {
	margin: .7em auto;
	padding: .3em 1em .1em 1em;
	width: 300px;
	border: 2px solid #444;
	color: #999;
	}
dl.comments:hover {
	background-color: #181818;
	color: #bfbfbf;
	}
dl.comments dt {
	text-align: left;
	font-size: 110%;
	}
dl.comments dt a.comment-link {
	float: right;
	font: italic 150% Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
	}
dl.comments dd {
	font-size: 85%;
	}
dl.comments dd p.comment-message {
	color: #fff;
	font-size: 120%;
	}
.date {
	font-family: Georgia, "Times New Roman", Times, serif;
	}
/*------------- Bags Stuff ---------------*/
#bags-wrap {
    
    }
#bags-header {
    position: absolute;
    top: 0;
    left: 420px;
    width: 328px;
    height: 525px;
    background: transparent url(../img/bags/bunny-full.gif) no-repeat left bottom;
    }
#bags-header:hover {
    background: transparent url(../img/bags/bunny-full.gif) no-repeat right bottom;
    }
#bag-holder {
    float: left;
    width: 400px;
    height: 515px;
    padding: 5px;
    overflow: auto;
    }
#bag-holder div {
	position: absolute;
	top: -2em;
	}
/*#bag-holder dl {
    float: left;
    width: 181px;
    /*height: 154px;*/
    /*margin: 5px;
    list-style: none;
    text-align: left;
    border: 4px solid #1a1a1a;
    }
#bag-holder dl:hover {
    background-color: #333;
    border: 4px solid #222;
    }*/
#bag-holder a.bag-link {
    float: left;
    width: 178px;
    /*height: 154px;*/
    margin: 0 3px;
    list-style: none;
    text-align: left;
    border: 4px solid #1a1a1a;
    text-decoration: none;
    }
#bag-holder a.bag-link:hover {
    background-color: #333;
    border: 4px solid #222;
    }
#bag-holder dl dt img {
    /*width: 131px;*/
    height: 104px;
    margin: 2px auto;
    border: 4px solid #333;
    }
#bag-holder dl dt a:hover {
    background: none;
    }
#bag-holder dl dd.bag-name a:link {
    font-size: 110%;
    color: #3597b3;
    text-decoration: none;
    }
#bag-holder dl dd.bag-name {
	height: 2em;
    font-size: 120%;
    font-weight: bold;
    line-height: .9em;
    color: #3597b3;
    text-decoration: none;
    }
#bag-holder dl dd.bag-name a:hover {
    background: none;
    color: #8ab3b3;
    }
#bag-holder a.bag-link:visited dd.bag-name {
    background: none;
    color: #acd48d;
    text-decoration: none;
    }
#bag-holder a.bag-link:hover dd.bag-name {
    background: none;
    color: #8ab3b3;
    }
#bag-holder dl dd.bag-style {
    width: 85%;
    font-size: 90%;
    font-weight: normal;
    color: #ccc;
    }
#bag-holder dl dd.bag-price {
    float: right;
    margin-top: -20px;
    font-family: Georgia, serif;
    font-size: 150%;
    font-weight: normal;
    color: #f678fb;
    }
#bags-arrow {
    position: absolute;
    top: 42px;
    left: 420px;
    width: 70px;
    height: 140px;
    background: transparent url(../img/bags/bags-arrow.gif) no-repeat top right;
    }
#bag_full-wrap {
    padding: 10px;
    overflow: auto;
    }
#bag_full-wrap p {
    text-align: center;
    }
#bag_full-wrap p.back-link {
    margin: 0 0 4px 0;
    text-align: left;
    }
h3.bag-title a {
    font-size: 150%;
    text-decoration: none;
    color: #eee;
    }
p.bag-style {
    margin: 0 auto;
    text-align: center;
    font-size: 90%;
    font-weight: normal;
    color: #3597b3;
    }
.description {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    }
p.bag-price {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 150%;
    font-weight: normal;
    color: #f678fb;
    }
img#full-image {
    /*max-width: 400px;*/
    width: 400px;
    border: 8px solid #333;
    }
img#full-image:hover {
    border: 8px solid #555;
    }
h4#view-comments {
    margin-top: 1em;
    }
form#payPalForm {
    display: block;
    text-align: center;
    }
form#payPalForm input {
	width: 100px;
	}
/*------------- About Stuff ---------------*/
#about-wrap {
    border-left: none;
    }
#about-header {
    position: relative;
    left: -47px;
    margin-right: -80px;
    float: left;
    width: 300px;
    height: 525px;
    background: transparent url(../img/about/squid-full.gif) no-repeat left bottom;
    }
#about-header:hover {
    background: transparent url(../img/about/squid-full.gif) no-repeat right bottom;
    }
#about-holder {
	margin: 0;
	padding: 0;
	height: 525px;
	overflow: auto;
	}
#about-wrap span.drop-cap {
    display: inline;
    padding: 1em;
    height: 1em;
    font-size: 300%;
    font-weight: bold;
    background-color: #888;
    border: 2px solid #ccc;
    }
#about-wrap p {
    margin-right: 10px;
    }
/*------------- Toons Stuff ---------------*/
#toons-wrap {
    
    }
#toons-header {
    position: absolute;
    top: 0;
    left: 450px;
    width: 350px;
    height: 525px;
    text-indent: -60px;
    /*background-color: #3597b3;*/
    background: transparent url(../img/toons/sparrow-full.gif) no-repeat left bottom;
    }
#toons-header:hover {
    background: transparent url(../img/toons/sparrow-full.gif) no-repeat right bottom;
    }
#toons-wrap .paging {
	position: absolute;
	top: -2em;
	}
#toons-wrap ul#toon-list {
    display: inline;		/* fixes IE/Win fake indentation */
	float: left;			/* see http://www.positioniseverything.net/explorer/floatIndent.html */
	width: 450px;
    height: 525px;
    list-style: none;
    text-align: left;
    overflow: auto;
    }
#toons-wrap ul#toon-list li {
    padding: 10px;
    }
#toons-wrap ul#toon-list li:hover {
    background-color: #181818;
    }
#toons-wrap ul#toon-list h2 {
	color: #f78afb;
    }
#toons-wrap ul#toon-list li:hover h2 {
    color: #f678fb;
    }
#toons-wrap p.toon-posted {
    margin-top: .5em;
    font-size: 90%;
    color: #ccc;
    }
#toons-wrap .toon-date {
    font-family: Georgia, Times, serif;
    }
#toons-wrap img.toon-image {
	border: 8px solid #333;
	}
#toons-wrap img.toon-image:hover {
	border: 8px solid #555;
	}
/*------------- Contact Stuff ---------------*/
#contact-wrap {
    
    }
#contact-header {
    position: absolute;
    top: 0;
    left: -97px;
    width: 315px;
    height: 525px;
    text-indent: 70px;
    background: transparent url(../contact/img/dino-full.gif) no-repeat left bottom;
    }
#contact-header:hover {
    background: transparent url(../contact/img/dino-full.gif) no-repeat right bottom;
    }
#contact-wrap h4 {
    margin: 4px;
    font-size: 120%;
    color: #ffd000;
    }
ul#error-list {
    list-style: none;
    }
ul#error-list li {
    background: transparent url(../img/error-arrow.gif) no-repeat -14px center;
    }
#form-holder {
    position: absolute;
    top: 0;
    left: 210px;
    width: 490px;
    height: 525px;
    overflow: auto;
    }
#contact-wrap form {
    float: left;
    margin-left: 8px;
    margin-top: -10px;
    width: 460px;
    font-size: 110%;
    }
fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 2px solid #444;
    }
fieldset:hover {
    background-color: #181818;
    }
legend {
    font-weight: bold;
    font-size: 105%;
    text-align: left;
    color: #999;
    }
fieldset:hover legend {
    color: #f678fb;
    }
#contact-wrap form p {
    position: relative;
    width: 100%;
    }
label {
    float: left;
    width: 8em;
    font-size: 90%;
    font-family: Tahoma, Verdana, serif;
    }
label .required {
    color: #ff0000;
    }
input {
    width: 200px;
    }
input[type="button"], input[type="submit"] {
    float: left;
    width: auto;
    }
#contact-wrap input[type="image"] {
    float: left;
    width: auto;
    }
input[type="text"], textarea {
    background-color: #999;
    font-weight: bold;
    color: #000;
    }
input:focus, textarea:focus {
    background-color: #a8c9ff;
    }
textarea {
    width: 300px;
    height: 100px;
    }
/*----------- Colophon Stuff ------------*/
#colophon-wrap {
    padding: 10px;
    overflow: auto;
    }
/*------------ Footer Stuff -------------*/
#footer {
    margin: 20px auto 10px auto;
    text-align: center; /* not a hack! */
    }
#footer ul#alt-nav {
    margin-bottom: .6em;
    list-style: none;
    }
#footer ul#alt-nav li {
    display: inline;
    margin: 0 .1em;
    }
#footer p {
    margin: 0;
    text-align: center;
    font-size: 85%;
    }