@charset "UTF-8";
@import url("navig.css");

* {
	/*reset browsers default margin, padding, and font sizes */
	margin: 0px;
	padding: 0px;
	border: 0px;
}

html {
	font-size: 100%;
	/* Show scrollbars even on short pages. Considered not using, but may help on content. */
	height: 101%;
}

body {
	background-color: #000A48;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #B6E2FF;
}

h1 {
	font: bold small-caps 2.1875em Trebuchet MS, Helvetica, sans-serif;
	color: #00CCFF;
	text-align: center;
}

h2 {
	font: small-caps 0.875em Trebuchet MS, Helvetica, sans-serif;
	color: #0078FF;
	text-align: center;
}

h3 {
	font: bold small-caps 1.5em Trebuchet MS, Helvetica, sans-serif;
	color: #D8DFFF;
	text-align: center;
}


p {
	font-size: 0.75em;
	line-height: 1.6em;
	text-align: left;
}

img {
	border-width: 0;
}

a:link {
	color: #2DACFF;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	color: #72C7FF;
	cursor: pointer;
	text-decoration: underline;
}

a:active {
	color: #72C7FF;
	cursor: pointer;
	text-decoration: underline;
}

a:visited {
	color: #0078FF;
	cursor: pointer;
	text-decoration: none;
}



/* Main Container Div - Replaces Outer Table */
#container {
	background: #000A48 url("../ribbons/sakkaku.jpg") no-repeat left top;
	width: 1020px;
	height: 735px;
	margin: 0 auto;
	padding: 0;
}

/* Top Left Navigation */
#container #sidenav {
	width: 195px;
	margin: 0;
	padding: 10px 0;
	float: left;
	font-size: 0.75em;
	line-height: 1.4em;
}

/* For lack of a better way to do this:
This is the semi-transparent image of the screen behind the main content.
Might consider just making it a big image and breaking it up as I would a Table-based layout
if I start getting complaints about IE's problems with Transparent pngs. >_> */
#container #backelem {
	background: url("../ribbons/screen.png") no-repeat right top;
	width: 815px;
	margin: 0 auto;
	padding: 0;
	height: 578px;
	float: right;
}

/* Main Content - Possible switch to an iFrame if problems arise with a simple Content Div. */
#backelem #content {
	margin: 0 auto;
	padding: 0;
    width: 96%;
    height: 85%;
	overflow: auto;
	float: right;
    position: relative;
    right: 16px;
    top: 43px;
}

/* MAIN/HOME PAGE */
/* Make any Bold Tags within a paragraph marked "News" into a bolded cyan */
#container #content .news b {
	color: #20FCFF;
}
/* Tried to make the image float right in various ways. LKeeping these because they're useful, but... not active.
#container #content .news img {
	margin: 5px;
	float: right;
} 

.textwrapright {
	clear: both;
	float: right;
	margin: 5px;
} */

/* Make the Bold Tags for "YouTube" into a bolded pink/peach... which I may not like */
#container #content .youtube b {
	color: #FF83D1;
}

/* Make any Bold Tags within a paragraph marked "Tumblr" into a bolded lavender */
#container #content .tumblr b {
	color: #D4A2FF;
}

/* LIBRARY SECTION */
/* Make any bold tags within the library a bolded... sea/pasterl-ish green. Yellow was too weird. */
#container #content .ficupdate b {
	color: #43FFBE;
}

/* LINK LIST */
/* Make any Bold Tags within a paragraph marked "NewLinks" into a bolded green */
#container #content .newlinks b {
	color: #B2FFDB;
}
/* Make all the links centered... maybe? */

#container #content .links {
	text-align: center;
}
/* Then color the bolded titles the same color as Tumblr Posts */
#container #content .links b {
	color: #D4A2FF;
}

/* ARTWORK */
/* Make the Bold Tags for "Art Updates" into a bolded magenta... */
#container #content .artupdate b {
	color: #E943F1;
}
/* Hey, note to self,
don't get carried away with color-coding every little thing,
you'll never get it done.
It's neat, yes, but what'll you actually do with it? */