/* Soaring Rabbit base design CSS! The fault of SuitCase (suitcase@soaringrabbit.com) */

/* Make everything in a palatable consistent font that is readable. */

body {
    font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
	background-color: #FFFFFF;
}

/* A little bit of san-serif never hurt nobody. The headings and a few other bits get preferential treatment. */

h1,h2,h3,h4,h5,h6,navbar,.smallprint,#navbar ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Make sure the headers and stuff don't get owned by stupid aligned images. This is messy and stupid but required. */

h2,h3,h4,h5,h6,.important { 
    clear: both;
}

/* Let's redefine our headings to look nice! */

h1 {
	font-size: 3.4em;
	font-style: italic;
	font-weight: bold;
	color: #054585;
	position: absolute;
	left: 3em;
	top: .2em;
}
h2 {
	font-size: 1.5em;
	font-weight: normal;
	color: #054585;
	text-align: center;
	clear: both;
	background-color: #E8F3FF;
	border: 2px solid #D1DAFF;
}
h3 {
	font-size: 1.2em;
	font-style: normal;
	font-weight: normal;
	background-color: #C9EFFA;
	border-top: 3px double #AFD7F3;
	border-bottom: 3px double #AFD7F3;
}
h4 {
	font-size: .9em;
	font-weight: bold;
	text-indent: 1em;
	background-color: #E6F2D9;
	border-top: 1px dotted #99CC33;
	border-bottom: 1px dotted #99CC33;
}
h5 {
	font-size: .8em;
	font-style: italic;
	font-weight: normal;
	text-indent: 2em;
	background-color: #FFFFCC;
	border-top: 1px solid #FFCC00;
	border-bottom: 1px solid #FFCC00;
}
h6 {
	font-size: 0.7em;
	font-weight: bold;
	text-indent: 4em;
	padding: 0.1em;
	background-color: #E3F6FF;
	border-top: 1px dotted #BCD3FF;
	border-bottom: 1px dotted #BCD3FF;
}

/* And of course, let's make the content smallish. */

p,ul,ol {
	font-size: .9em;
}

/* Time to make up the navigation bar! */

#navbar {
	background-color: #E6F0FF;
	background-image: url(img/site_navbarback.png);
	background-repeat: no-repeat;
}
#navbar h3 {
	font-size: .8em;
	font-style: italic;
	font-weight: normal;
	line-height: 1.5em;
	text-indent: 2em;
	margin-bottom: .5em;
	background-color: #D9F0FD;
	border-top: 1px solid #98C9E7;
	border-bottom: 1px solid #98C9E7;
}
#navbar h4
{
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0em;
	background-color: #EBF8C2;
	border-top: 1px solid #349901;
	border-bottom: 1px solid #349901;
}
#navbar ul {
    font-size: 0.8em;
	margin: 0em;
}
#navbar li {
	line-height: 2em;
	display: inline;
	margin-left: .7em;
}
.activenav {
	font-weight: bold;
	color: #CC3333;
}

/* Time to style up the front page columns. Note that we use a percentage that adds up to 99%, as IE6 confuses itself otherwise. */

.columns h3 {
	text-align: center;
	border-right: 3px double #AFD7F3;
	border-left: 3px double #AFD7F3;
}
.columnsmall {
	float: left;
	width: 28%;
}
.columnlarge {
	float: left;
	width: 43%;
}
.breakcolumnlayout {
	clear: both;
	padding-top: 1.5em;
}

/* The two "information boxes". These show up on the Characters pages and the Information pages. They help arrange basic information close together in a recognisable little design element. */

h4.gamefacts {
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;	
	margin: -.3em 0 -.8em 0;
	background-color: #91A972;
	border: none;
}
h5.charfacts {
	font-weight: bold;
	color: #FFFFFF;
	text-indent: 0;
	text-align: center;
	margin: -.7em 0 -1em;
	background-color: #AC0000;
	border: none;
}
.gamefactsbox {
	float: right;
	padding: 0.5em;
	margin: 1em;
	background-color: #CBECA0;
	border: 1px dotted #009900;
}
.charfactsbox {
	float: left;
	padding: .1em .5em;
	margin: 1em; 
	background-color: #FFDCD9;
	border: 1px solid #990000;
}

/* Here we define the styles the site uses for various pieces of individual text for design purposes. */

.titletext {
}
.sic {
    color: #999999;
}
.smallprint {
	font-size: .7em;
	text-align: center;
	padding: .4em;
	background-color: #F4F4F4;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
}
small {
	font-size: 100%;
}
.placeholder {
    font-style: italic; 
    text-align: center;
    background-color: #E6F2FF; 
}
.important {
	font-weight: bold;
	text-align: center;
	padding: .7em;
	background-color: #FFCCCC;
}
.lastupdated {
	font-size: .8em;
	color: #666666;
}

/* And of course, some styling for our images. */

.headerrami {
	height: 11em;
	width: 38.5em;
	background-image: url(img/site_titleimage.png);
	background-repeat: no-repeat;
	position: relative;
	margin: -.5em auto -.6em;
}
.inlineimage {
	float: right;
	padding: .5em;
}
.contentpicture {
	display: block;
	padding: 10px;
	margin-right: auto;
	margin-left: auto; 
	background-color: #EBEBEB;
	border: 1px solid #999; 
}

/* Decoration images */

.decoration {
	float: right;
	background-repeat: no-repeat;
	padding: .5em;
}
.confusedrami {
	width: 243px;
	height: 269px;
	background-image: url(img/dec_confusedrami.gif);
}
.drpon {
	width: 157px;
	height: 171px;
	background-image: url(img/dec_drpon.png);
}
.mask {
	width: 179px;
	height: 202px;
	background-image: url(img/dec_mask.png);
}
.pochi {
	width: 119px;
	height: 189px;
	background-image: url(img/dec_pochi.png);
}
.ramigrandma {
	width: 280px;
	height: 259px;
	background-image: url(img/dec_ramigrandma.gif);
}
.ramistandingsketchy {
	width: 187px;
	height: 313px;
	background-image: url(img/dec_ramistandingsketchy.png);
}
.soar {
	width: 150px;
	height: 240px;
	background-image: url(img/dec_soar.png);
}

/* End of CSS file. */