/*  CSS Document */

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	GLOBAL ELEMENTS
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/
* {
	border:0;
	margin:0;
	padding:0;	
}

body, html {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #1D2528;
}






/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	TEXT STYLING
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/
h1 {
	font-size: 14px;
	color:#333;
}
h2 {
	font-size: 12px;
	color:#666;
}
.heading_page ul {
	list-style: none;
	font-size: 12px;
	line-height: 16px;
	margin-top: 3px;
	margin-bottom: 3px;
}
a:link, a:visited  {
	color: #FFF;
	text-decoration: none;
}
.underline_link:link, .underline_link:visited {
	color:#000;
	text-decoration:underline;
	
}
.underline_link:hover {
	color:#333;
	
	
}
.content_box p {
	font-size: 12px;
	font-style: normal;
	line-height: 17px;
	font-weight: normal;
	margin-top:0px;
	margin-bottom:10px;
	padding-bottom:0px;
	padding-top:0px;
}
.content_box .italic {
	font-style: italic;
}

h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	TABLE STYLING
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/
td img {display: block;}



/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	MAIN CONTAINERS
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/
 /*POSition to midle center*/
#outer {height: 100%; position: relative; width: 100%;}


#outer[id] {display: table; position: static;}

#middle {
	/*position: absolute;*/
} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {
	position: relative;
top: -50% width: 200px; 			margin-left: auto;
	margin-right: auto;
	width: 960px;
} /* for explorer only */
/* optional: #inner[id] {position: static;} */



#header {
	position:absolute;
	left:313px;
	top:14px;
	width:295px;
	height:95px;
	z-index:3;
}



/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	MAIN MENU NAVIGATION AT THE BOTTOM OF THE PAGE
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/

.menu {
	height: 28px;
}


/*---------Copyright (left bottom text)---------------------*/
.copyright {
	width: 212px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 5px;
	float: left;
}

.copyright a {
	color: #8FAFB1;
}
.copyright a:hover {
	color: #597F94;
}

/*---------Main navigation menu (right bottom menu)---------------------*/
.menu_right {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding-top: 7px;
	width: 700px;
	float: left;
	text-align: center;
}
.menu_right a {
	display: block;
	float: left;
	color: #FCFDDD;
	padding-left: 40px;
}
.menu_right a:hover {
	color: #DEBCA1;
}
.menu_left a {
	color:#666;
	font-style:italic;
}
.menu_left a:hover {
	color:#333;
	font-weight:bold;
}
#home {
	padding-left: 80px;
}


/*hightlight the menu for current page*/
#original_art #original, #original_portraits #portraits, #fanart_general #fanart, #speed_mono_page #speed_mono, #speed_colour_page #speed_colour, #comics_commonfolk #commonfolk, #comics_dnd #dnd, #comics_oneoff #oneoff, #objects_main #objects
{
	color:#333;
}

body#index a#home,
body#original_art a#art,
body#original_portraits a#art,
body#fanart_general a#art,
body#speed_mono_page  a#art,
body#speed_colour_page a#art,
body#comics_commonfolk a#comics,
body#comics_dnd a#comics,
body#comics_oneoff a#comics,
body#objects_main a#objects,
body#tutorials_page a#tutorials,
body#about_me a#about
{
color: #DEBCA1;
}

.main_box ul li a {
	color: #666;
}
.main_box ul li a:hover {
	color:#333;
	font-weight:bold;
}



/*big div contain background image*/
.main_box {
	height: 573px;
	width: 100%;
}


/* Define which bg image to display */
#index .main_box {
	background: url(../images/bg_index.jpg) no-repeat;
}

#original_art .main_box, #original_portraits .main_box, #fanart_general .main_box, #speed_mono_page .main_box, #speed_colour_page .main_box  {
	background: #FFF url(../images/bg_art.jpg) no-repeat 0px 0px;
}
#comics_commonfolk .main_box, #comics_dnd .main_box, #comics_oneoff .main_box {
	background: #FFF url(../images/bg_art.jpg) no-repeat 0px 0px;
}
#objects_main .main_box {
	background: #FFF url(../images/bg_objects.jpg) no-repeat 0px 0px;
}
#tutorials_page .main_box {
	background: #FFF url(../images/bg_tutorials.jpg) no-repeat 0px 0px;
}
#about_me .main_box {
	background: #FFF url(../images/bg_aboutme.jpg) no-repeat 0px 0px;
}


.heading_page  {
	width: 200px;
	margin-top: 300px;
	margin-left: 40px;
	color: #666;
	background: transparent;
	position: absolute;
}

.mainimage {
	max-width: 367px;
	max-height: 515px;
	vertical-align: middle;
} 


/*This is for white box on the right hand side*/
.content_box {
	background: transparent;
	width: 320px;
	position: absolute;
	margin-top: 45px;
	margin-left: 600px;
}
.stretcher {
	clear: both;
	height: 1px;
}

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	CATEGORIES IMAGE ROLLOVER
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
*/
.content_box_gallery {
	background: transparent;
	width: 372px;
	position: relative;
	bottom: -29px;
	margin-left: 563px;
	font-size: 11px;
	font-style: italic;
	line-height: 16px;
}

img.thumbs {
	float:left;
	margin-left: 25px;
	margin-bottom: 22px;
	border: none;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand;
}

.two_column {
	width:262px;
	height:430px;
	z-index:20;
	position:absolute;
	margin-top: 30px;
	margin-left: 331px;
	
}
.text_body {
	width:450px;
	z-index:20;
	position:absolute;
	top:-6px;
	height:20em;
	margin-top:-11em;
	margin-left: 300px;
	color:#999;
	font-style: normal;
	font-size: 12px;
	line-height: 17px;
	font-weight: normal;
	left: -1px;
}
.text_body a {
	color:#666;
	font-style:italic;
}
.text_body a:hover {
	color:#333;
	font-weight:bold;
}
.description1 {
	position: absolute;
	top: 520px;
	z-index: 21;
	margin-left: -341px;
	width: 300px;
	margin-top: -75px;
	color:#999;
	font-style: italic;
}
.description2 {
	position: absolute;
	top: 472px;
	z-index: 22;
	margin-left: -336px;
	width: 310px;
	color:#999;
	font-style: normal;

}
.description3 {
	color:#999;
	font-style: italic;

}