/* START: Global styles */

body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	background: #6a6e75;
	margin: 0px 0px 0px 0px;
	height: 100; 
	padding: 0px;

}

img {
	border: 0px none;
}

.imagewrapleft {
	float:  left;
	border: solid 1px #FFFFFF;
	margin-right:10px;
	margin-bottom:10px;
}

.imagewrapright {
	float: right;
	border: solid 1px #FFFFFF;
	margin-left:10px;
	margin-bottom:10px;
}

.imagenowrap {
	border: solid 1px #FFFFFF;
}

a:link, a:visited {
	text-decoration: none;
	color: #c7b299;
	background-color: inherit;	
}

a:hover, a:active {
	text-decoration: none;
	color: #FFFFFF;
	background-color: inherit;
}

form {
	margin: 0px;
}

table {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#icon {
	position: relative;
	top: 2px;
	left: 0px;
}

#spacing {

	padding-bottom: 10px;

}

#class_nav {
	margin-left: 20px;
	font-weight: bolder;
	position: relative;
	top: -10px;
	font-size: 10px;
	color: #74292e;
}
/* END: Global styles */

/* START: Content class styles */

/* --> Defines central content area of the page <-- */

.content {
	color: inherit;
	width: 800px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url('../images/side_shadow.jpg');
	background-position: top right;
	background-color: #FFFFFF;
	background-repeat: repeat-y;
}

.content #contentpane {
	width: 793px;
	height: 100%;
	background-position: bottom right;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
}

.content #contentarea {
	width: 550px;
	vertical-align: top;
	padding-left: 10px;
	padding-right: 15px;
}

.content #contentmenu 
{
	padding-left: 10px;
	padding-right: 3px;
	vertical-align: top;
}

/* END: Content class styles */



/* START: Header class styles */

/* --> Defines header (obviously) <-- */

.header {
	width: 800px;
	height: 90px;
	margin-left: auto;
	margin-right: auto;
	background-image: url('../images/header_shadow.jpg');
	background-position: top right;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
}

.header #nameplate {
	position: relative;

}

.header #navigation {
	font-weight: bolder;
	position: relative;
	top: -42px;
	right: -212px;
}

.header #classtitle {
	position: relative;
	top: 0px;
	left: 0px;
}

.header #navtutorial {
	position: relative;
	top: 0px;
	left: 150px;
}

.header #navlinks {
	position: relative;
	top: 0px;
	left: 180px;
}

.header #navforum {
	position: relative;
	top: 0px;
	left: 40px;
}



.header #navconventions {

	position: relative;

	top: 0px;

	left: 80px;

}



.header #navcontact {

	position: relative;

	top: 0px;

	left: 120px;

}

/* END: Header class styles */



/* START: Footer class styles */

/* --> Defines footer (again, obviously) <-- */

.footer {

	width: 800px;

	margin-left: auto;

	margin-right: auto;

	font-size: 10px;

	text-align: center;

	color: #c7b299;

	background-image: url('../images/side_shadow.jpg');

	background-position: top right;

	background-color: #FFFFFF;

	background-repeat: repeat-y;

}



.footer #navigation {

	position: relative;

	bottom: 6px;

	left: 0px;

}



.footer #bottom_shadow {

	position: relative;

	bottom: -10px;

	left: 0px;

}

/* END: Footer class styles */



/* START: Defines styles for corner images */

#top_left {

	position: relative;

	float: left;

	top: -2px;

	left: -2px;

}



#top_right {

	position: relative;

	float: right;

	top: -2px;

	right: -2px;

}



#bottom_left {

	position: relative;

	float: left;

	bottom: -2px;

	left: -2px;

}



#bottom_right {

	position: relative;

	float: right;

	bottom: -2px;

	right: -2px;

}

/* END: Defines styles for corner images */



/* START: Comic Styles */

/* --> Defines area that the comic is displayed, as well as the nav <-- */

#comic {

	width:550px;

	padding-bottom: 10px;

}



#comic #title{

	position: relative;		/* <-- Position of title & icon */

	top: -5px;

	font-weight:bolder;

}



#comic #content {

	width: 550px;

	float: left;

	position: relative;

	top: -10px;

	left: 7px;

}



#comic .comic_dropdown {

	width: 300px;

}



#comic #credits {

	color: #c7b299;

	position: relative;

	right: 15px;

}



#comic #comicnav {

	width: 545px;

	float: left;

	position: relative;

	left: -6px;

	top: 15px;

}



#comic #navbutton {

	width: 75px;

	text-align: center;

}



#comic #page {

	position: relative;

	top: 10px;

	left: -7px;

	height:auto;

	text-align: center;

}



#comic #comic_page {

}

/*#comic {

	float: left;

	vertical-align: top;

}



#comic #top_left {

	position: relative;

	float: left;

	top: -5px;

	left: -5px;

}



#comic  #top_right {

	position: relative;

	float: right;

	top: -5px;

	right: -5px;

}



#comic #logo {

	float: left;

}



#comic #credits {

	color: inherit;

	float: right;

	font-size: 10px;

	vertical-align: middle;

}



#comic #comicheader {

	padding: 5px;

	background-color: #687d99;

	text-align: right;

}



#comic #comicfooter {

	padding: 2px;

	background-color: #687d99;

	position: relative;

	top: -2px;

}



#comic #comicnav {

	text-align: center;

	width: 100%;

	position: relative;

	top: 5px;

}



#comic #navbutton {

	width: 75px;

}



#comic #comicstrip {

	width:auto;

	height:auto;

}*/

/* END: Comic Styles */



/* START: Textbox Styles */

/* --> Defines standard "box" that all content is organized in <-- */

#textbox {

	background-color:#74292e;

	color: #c7b299;

	text-align: left;

	vertical-align: top;



}



#textbox #title {

	font-size: 12px;

	color: #c7b299;

	position: relative;

	top: 3px;

}



#textbox #header {

	padding: 2px;

	text-align: left;

}



#textbox #content {

	margin-left: auto;

	margin-right: auto;

	color: white;

	font-size: 10px;



}



#textbox #footer {

	position: relative;

	top: 2px;

	padding: 2px;

}

/* END: Textbox Styles */



/* START: Menu Styles */

/* --> Defines standard side menu styles <-- */

#menu {

	width: 186px;

	padding-bottom: 10px;

}



#menu #title {

	position: relative;

	font-size: 12px;

	color: #c7b299;

	top: -3px;

	left: -4px;

}



#menu #content {

	float: left;

	position: relative;

	padding-left: 5px;

	padding-right: 5px;

	top: -5px;

	left: 5px;

	width: 174px;

}



#menu #links{

	text-align: center;

	position: relative;

	top: 5px;

	left: -5px;

}



#menu #image {

	border: solid 1px white;

	margin-bottom: 2px;

}



#menu #helptext {

	text-align: center;

	position: relative;

	top: 8px;

	left: -3px;

}

/* END: Menu Styles */



/* START: Newspost Styles */

/* --> Defines newspost styles (main / comics pages) <-- */

#newspost {

	width: 550px;

	padding-bottom: 10px;

}



#newspost #title {

	position: relative;

	top: -3px;

	font-weight: bolder;

}



#newspost #date {

	font-size: 10px;

	margin: 20px;

	position: relative;

	top: -3px;

}



#newspost #content {

	width: 530px;

	float: left;

	position: relative;

	top: -5px;

	left: 5px;

}



#newspost #body {

	padding-left: 10px;

}



#newspost #avatar {

	float: left;

	padding: 3px 5px 2px 0px;

}



#newspost #image {

	border: solid 1px white;

}



#newspost #post {}

/* START: Newspost Styles */



/* START: Updates Box */

/* --> Defines updates side menu <-- */

#updates {

	width: 186px;

	padding-bottom: 10px;

}



#updates #title {
	font-size: 12px;
	font-weight: bolder;
	color: #c7b299;
	position: relative;
	top: -3px;

}



#updates #content {

	float: left;

	position: relative;

	top: -5px;

	left: 5px;

	width: 175px;

}



#updates #updatelist {

	padding-left: 5px;

}



#updates #allupdates {	

	position: relative;

	

	right: -120px;

}



#updates #update {

	position: relative;

	left: 5px;

	margin-left: -5px;

}

/* END: Updates Box */



/* START: Comic Description Box */

/* --> Defines box describing comic on comic page <-- */

#comicdescription {

	width: 550px;

	padding-bottom: 10px;

}



#comicdescription #content {

	width: 520px;

}



#comicdescription #description {

	width: 515px;

	float: left;

	position: relative;

	top: 0px;

	left: 15px;

}



#comicdescription #image {

	border: solid 1px white;

}



#comicdescription #title {

	color: #c7b299;

	font-size: 12px;

	font-weight: bolder;

}



#comicdescription #synopsis {

	font-weight: normal;

}



#comicdescription #thumbnail {

	float: left;

	padding-right: 7px;

}



#comicdescription #credits {

	color: #c7b299;

	float: right;

	text-align: right;

	position: relative;

	top: 0px;

	right: 0px;

}



#issues {

	width: 550px;

	padding-bottom: 10px;

}



#issues #content {

	width: 550px;

}



#issues #description {

	width: 380px;

	float: left;

	padding-left: 7px;

}



#issues #navigation {

	padding-top: 10px;

}



#issues #title {

	width: 380px;

	float: left;

	padding-left: 7px;

	padding-bottom: 10px;

	font-weight: bolder;

	font-size: 12px;

	color: #c7b299;

}



#issues .comic_dropdown {

	width: 300px;

}



#issues #cover_area {

	width: 130px;

	padding-left: 15px;

	float:left;

}



#issues #cover {

	border: solid 1px white;

}

/* END: Comic Description Box */



/* START: Artist Bio Box */

/* --> Defines artist bio box <-- */

#artistbio {

	width: 550px;

	padding-bottom: 10px;

}



#artistbio #textarea {

	width: 330px;

	float: left;

	padding-left: 7px;

}



#artistbio #name {

	font-weight: bolder;

	font-size: 14px;

	color: #c7b299;

}



#artistbio #bio {}



#artistbio #contact {

	width: 180px;

	padding-left: 15px;

	color: white;

	float:left;

}



#artistbio #portrait {

	border: solid 1px white;

}



#artistbio #info {

	width: 170px;

	padding-top: 5px;

	padding-left: 5px;

}

/* END: Artist Bio Box */



/* START: Artist Gallery */

#gallery {

	width: 550px;

}



#gallery #content {

	float: left;

	position: relative;

	top: -3px;

	left: 10px;

	width: 530px;

}



#gallery #title {

	position: relative;

	top: -2px;

}



#gallery #imagearea {

	position: relative;

	top: 5px;

	left: 7px;

}



#gallery #thumbnail {

	border: solid 1px white;

	margin-right: 2px;

	margin-bottom: 2px;

}

/* END: Artist Gallery */



/* START: About Page - mission statement */

#aboutus {

	width: 550px;

	padding-bottom: 10px;

}



#aboutus #content {

	float: left;

	position: relative;

	top: -3px;

	left: 10px;

	width: 525px;

}

/* END: About Page - mission statement */



/* START: About Page - artist position */

#position {

	width: 550px;

	padding-bottom: 10px;

}



#position #content {

	float: left;

	position: relative;

	top: -3px;

	left: 10px;

	width: 525px;

}



#position #title {

	float: left;

	position: relative;

	top: -3px;

}



#position #description {}



#position #image {

	border: solid 1px white;

}



#position #portrait {

	padding-left: 5px;

	padding-bottom: 3px;

	float:  right;

}

/* END: About Page - Artist Position */



/* START: Contact information */

#contact {

	width: 550px;

	padding-bottom: 10px;

}



#contact #content {

	float: left;

	position: relative;

	top: -3px;

	left: 10px;

	width: 525px;

}



#contact #title {

	position: relative;

	top: -3px;

}



#contact #info {

	padding-top: 3px;

	padding-left: 7px;

	position: relative;

	top: 0px;

}



#contact #buttons {

	padding-top: 3px;

	padding-left: 7px;

	position: relative;

	top: 0px;

}



#contact #banners {

	padding-left: 7px;

	position: relative;

	top: 0px;

}



#contact #image {

	border: 1px solid white;

	margin-right: 2px;

	margin-bottom: 2px;



}



/* START: Contact information */



/* START: Convention box */

#convention {

	width: 550px;

	padding-bottom: 10px;

}



#convention #content {

	width: 530px;			/* <-- Width of content */

	float: left;			/* <-- Content justification */

	position: relative;

	top: -3px;

	left: 10px;

}



#convention #name {

	font-size: 12px;

	color: #c7b299;

	position: relative;

	top: -3px;

}



#convention #imagearea {

	position: relative;

	padding-left: 10px;

	margin-top: 5px;

}



#convention #description {

	position: relative;

	padding-left: 10px;

	margin-top: 5px;

}



#convention #thumbnail {

	border: solid 1px white;

	margin-right: 2px;

	margin-bottom: 2px;

}

/* END: Convention box */



/* THE FOLLOWING CAN BE COPIED TO CREATE NEW CONTENT */

/* START: Generic box */

#generic {

	width: 550px;			/* <-- Width of box */

	padding-bottom: 10px;	/* <-- Space below box */

}



/* content contains all information, inc. the title and the body */

#generic #content {

	width: 530px;			/* <-- Width of content */

	float: left;			/* <-- Content justification */

	position: relative;

	top: -3px;

	left: 10px;



}



#generic #title {

	position: relative;		/* <-- Position of title & icon */

	top: -3px;

}



#generic #body {

	padding-left: 10px;		/* <-- Indentation of text */

}