/* Soaringrabbit.com CSS file! Version 4. Thrown together and painstakingly rearranged to perfection by SuitCase (suitcase@soaringrabbit.com) */

/* Put gradient in background. Kinda ugly, but CSS3 multiple backgrounds aren't supported by anything! */

html {
	background-color: #2E3D85;
	background-image: url(siteimg/pagebackground.png);
	background-repeat: repeat-x;
}

/* Use a nice font for everything, put the pretty star background in place, and set the width of the page. Only exception is the hills. */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
	background-image: url(siteimg/stars.png);
	margin: 0;
}
p,ul {
	font-size: .9em;
}
div#content,small {
	max-width: 980px;
	min-width: 780px;
	margin: 0 auto;
	display: block;
}

/* Make links look okay on the dark background. */

a:link {
	color: #86BDEA;
}
a:visited {
	color: #CBDDEB;
}
a:active {
	color: #E4E4E4;
}

/* Now let's do the header block. */

div#headerblock {
	height: 175px;
	width: 740px;
	background-image: url(siteimg/header.png);
	background-repeat: no-repeat;
	margin: .3em auto -1.5em;
}
div#headerblock h1 {
	display: none;
}
div#headerblock p.tagline {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #ACB2CA;
	text-align: center;
	width: 570px;
	padding: 106px 0 0 160px;
}

/* Notice block */

div#noticeblock {
	height: 178px;
	max-width: 938px;
	background-image: url(siteimg/aurora.png);
	background-position: center center;
	padding-top: 52px;
	margin-top: -2em!important;
}
div#noticeblock h2 {
	font-weight: bold;
	color: #613d98;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1em;
}
div#noticeblock p {
	font-size: 1.1em;
	font-style: italic;
	color: #c276da;
	text-align: center;
	line-height: 1.45em;
	width: 85%;
	padding-top: .3em;
	margin: 0 auto;
}

/* And now the major/minor/links things. */

div#content h2 {
	height: 20px;
	background-position: center;
	background-repeat: no-repeat;
	margin: .3em;
}
div#content h2 span {
	display: none;
}
div#content h2.major {
	background-image: url(siteimg/h2_major.png);
}
div#content h2.minor {
	background-image: url(siteimg/h2_minor.png);
	height: 35px;
	background-position: bottom center;
}
div#content h2.links {
	background-image: url(siteimg/h2_links.png);
}

/* And now the major site headings. */

div#content h3 {
	margin: 0 0 .4em;
}
div#content h3 a {
	text-decoration: none;
	height: 43px;
	display: block;
}
div#content h3 a span {
	display: none;
}
div#content h3.kfs a {
	width: 314px;
	background-image: url(siteimg/major_heading_kfs.png);
}
div#content h3.dgc a {
	width: 382px;
	background-image: url(siteimg/major_heading_dgc.png);
}
div#content h3.quotes a {
	width: 379px;
	background-image: url(siteimg/major_heading_quotes.png);
}
div#content h3.blog a {
	width: 373px;
	background-image: url(siteimg/major_heading_blog.png);
}
h2,.cleared {
	clear: both; 
}

/* Now this is a story all about how I wrote the code for the minor sites and links sections.*/

ul {
	text-indent: 0;
	list-style: none;
	padding: 0 10px;
}
li {
	font-size: 1.05em;
	line-height: 1.35em;
	min-height: 35px;
	background-repeat: no-repeat;
	padding-left: 35px;
	margin-bottom: .5em;
}
li a {
	font-size: 1.35em;
}

/* Fix padding on the one-line minor\links stuff */

ul.links li,li.eternalmisery,li.stopsayingdontruin,li.unfunnythings,li.saveshaqfu {
	padding-top: 5px;
	min-height: 30px!important;
}

/* Here we define a few classes the pages use for interesting design purposes. */

div.majorblock {
	float: left;
	position: relative;
	padding: 0 1.5% 1.5%;
	width: 46%;
}
div.majorblock p {
	font-size: 1.1em;
	line-height: 1.5em;
	margin: .3em 0;
}
span.strike {
	text-decoration: line-through;
}

/* Small print. */

p.smallprint {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: .7em;
	color: #ACB2CA;
	min-width: 780px;
	text-align: center;
	background-image: url(siteimg/hills.png);
	background-repeat: repeat-x;
	padding: 6em 1em 1em;
	margin: 3em 0 0;
}
small {
	font-size: 100%;
}

/* Decoration images. At the end because it's bulky and we want the other styling to appear super fast. */

div.decoration {
	float: right;
	background-repeat: no-repeat;
}
div.decoration.kfs {
	width: 171px;
	height: 177px;
	background-image: url(siteimg/major_kfs.png);
}
div.decoration.dgc {
	width: 180px;
	height: 190px;
	background-image: url(siteimg/major_dgc.png);
}
div.decoration.quotes {
	width: 132px;
	height: 160px;
	background-image: url(siteimg/major_quotes.png);
}
div.decoration.blog {
	width: 140px;
	height: 140px;
	background-image: url(siteimg/major_blog.png);
}
li.about {
	background-image: url(siteimg/minor_about.png);
}
li.stopsayingdontruin {
	background-image: url(siteimg/minor_stopsayingdontruin.png);
}
li.unfunnythings {
	background-image: url(siteimg/minor_unfunnythings.png);
}
li.opera {
	background-image: url(siteimg/minor_opera.png);
}
li.eternalmisery {
	background-image: url(siteimg/minor_eternalmisery.png);
}
li.quotedemoticons {
	background-image: url(siteimg/minor_quotedemoticons.png);
}
li.bcb {
	background-image: url(siteimg/links_bcb.png);
}
li.horseface {
	background-image: url(siteimg/links_horseface.png);
}
li.saveshaqfu {
	background-image: url(siteimg/links_saveshaqfu.png);
}
li.eggpudding {
	background-image: url(siteimg/links_eggpudding.png);
}

/* New! and Updated! tags */

div.majorblock img.tag {
	position: absolute;
}
li img.tag {
	margin-bottom: -4px;
}
img.tag.kfs {
	top: 25px;
	left: 250px;
}
img.tag.dgc {
	top: 25px;
	left: 310px;
}
img.tag.quotes {
	top: 25px;
	left: 310px;
}
img.tag.blog {
	top: 25px;
	left: 340px;
}

/* My sinful, awful hacks. 

Fixes width in IE6 and below. (It doesn't support max-width) */
* html div#content,* html small {
	width: 980px;
}
/* Forces a width on the lis. (IE6\7 do weird centring of this text..) */
*:first-child+html li {
	width: 770px!important;
}
* html li {
	width: 770px!important;
}
/* Fixes height of single-line lis in IE6. (It doesn't support max-height) */
* html ul.links li,* html li.eternalmisery {
	height: 25px;
}

/* End of CSS file. */