/* --- main banner --- */

#banner
{
	width: 772px;
	height: 125px;
	text-align: center;

	background-position: center;
	background-repeat: no-repeat;
	background-image: url('layout/banner.jpg');
	margin: 0px;

	float: left;
}

#banner img
{
	border-width: 0px;
	margin: 0px;
	padding: 30px 0px 0px 10px;
	float: left;
}

#banner img.banner
{
	border-width: 0px;
	margin: 0px;
	padding: 0px 0px 0px 81px;
	float: left;
}


/* --- main menu --- */

#mainmenu_container
{
	width: 772px;
	height: 40px;

	background-position: center;
	background-repeat: no-repeat;
	background-image: url('layout/mainmenu.jpg');
	margin: 0px;

	float: left;
}

#mainmenu
{
	width: 710px;
	height: 26px;
	margin: 6px auto;
}

#mainmenu a
{
	border: 0px;
	height: 26px;

	background-position: center 0px;
	background-repeat: no-repeat;
	margin: 0px 7px;

	float: left;
}

#mainmenu span
{
	display: none;
}

#mainmenu a:visited {background-position: center 0px;}
#mainmenu a:active  {background-position: center -26px;}
#mainmenu a:hover   {background-position: center -26px;}
#mainmenu a:focus   {background-position: center -26px;}


/* --- container for side menu and content area --- */

#main_container_top
{
	width: 772px;
	height: 52px;
	font-size: 1px;

	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('layout/back_top.jpg');
	margin: 0px;

	float: left;
}

#main_container_bot
{
	width: 772px;
	height: 15px;
	font-size: 1px;

	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('layout/back_bot.jpg');
	margin: 0px;

	float: left;
}

#main_container
{
	width: 772px;

	background-position: top left;
	background-repeat: repeat-y;
	background-image: url('layout/back.jpg');
	margin: 0px;

	float: left;
}


/* --- side menu --- */

#menu_container
{
	background-color: #6F6F6F;
	width: 174px;
	margin: 0px;

	float: left;
}

div.menu_top
{
	display: none;
}


/* --- content --- */

#content
{
	width: 732px;
	min-height: 600px;
	font-family: "Arial", "Helvetica", "Sans Serif";
	color: #000000;

	background-position: top right;
	background-repeat: no-repeat;
	background-image: url('layout/back_dragon.jpg');
	margin: 0px auto;
}

#content h1
{
	border-style: solid;
	border-top-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-color: #000000;
	font-size: 1.8em;
	text-align: center;

	margin: 0px 20px 20px 20px;
}

#content h2
{
	font-size: 1.0em;
	text-align: left;
	margin: 10px 20px 10px 20px;
}

#content div.left
{
	text-align: left;
	margin: 20px;
	font-size: 0.8em;
}

#content div.right
{
	text-align: right;
	margin: 20px;
	font-size: 0.8em;
}

#content div.center
{
	text-align: center;
	margin: 20px;
	font-size: 0.8em;
}

#content div.justify
{
	text-align: justify;
	margin: 20px;
	font-size: 0.8em;
}

#content hr
{
	width: 95%;
	height: 1px;
	color: #000001;
	background-color: #000000;
	border-width: 0px;
	clear: both;
}

.bottom
{
	border-width: 0px;
	vertical-align: bottom;
	margin: 0px;
}

.border
{
	margin: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
}

.list
{
	border-left-width: 4px;
	border-left-style: solid;
	border-color: #A7A7A7;
	padding-left: 5px;
	text-align: left;
	margin: 20px;
	font-size: 0.8em;
}

a		  {text-decoration: none; font-weight: normal; color: #804040;}
a:visited {text-decoration: none; font-weight: normal; color: #800000;}
a:active  {text-decoration: underline; font-weight: normal; color: #800000;}
a:hover   {text-decoration: underline; font-weight: normal; color: #804040;}
a:focus   {text-decoration: underline; font-weight: normal; color: #804040;}

a img			{border-color: #804040;}
a:visited img	{border-color: #800000;}
a:active img	{border-color: #800000;}
a:hover img		{border-color: #804040;}
a:focus img		{border-color: #804040;}

#content select, input, textarea
{
	font-size: 1.0em;
	color: #000000;
	background-color: #A7A7A7;
	font-family: "Arial", "Helvetica", "Sans Serif";
	margin: 0px 0px 3px 0px;
}

#content input.gbook
{
	width: 220px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

#content input.gbookbtn
{
	width: 80px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

#content textarea.gbook
{
	width: 320px;
	height: 165px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

/* --- vertical, horizontal picture boxes --- */

div.vertbox
{
	width: 170px;
	text-align: center;
	display: inline;
	font-size: 0.8em;
	margin: 10px 20px 10px 10px;

	clear: right;
	float: right;
}

div.vertbox img
{
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	margin: 4px;
}

div.horbox
{
	text-align: center;
	margin: 20px;
	font-size: 0.8em;

	clear: both;
}

div.horbox img
{
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	margin: 4px;
}

/* --- left sided infoboxes (sub menu uses these classes as well) --- */

div.infobox
{
	background-color: #6F6F6F;
	width: 174px;
	margin: 0px;

	clear: left;
	float: left;
}

div.info h3
{
	font-size: 0.85em;
	text-align: left;
	width: 135px;
	margin: 20px auto 10px auto;
}

div.info_top
{
	width: 174px;
	height: 35px;
	font-size: 1px;

	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('layout/info_top.jpg');
	margin: 0px;

	float: left;
}

div.info_top span
{
	display: none;
}

div.info
{
	width: 174px;
	color: #CACACA;
	font-family: "Arial", "Helvetica", "Sans Serif";

	background-image: url('layout/menu.jpg');
	background-repeat: repeat-y;
	margin: 0px;

	float: left;
}

div.info_bot
{
	width: 174px;
	height: 20px;
	font-size: 1px;

	background-image: url('layout/menu_bot.jpg');
	background-repeat: no-repeat;
	margin: 0px;

	float: left;
}

div.info p
{
	font-size: 0.8em;
	text-align: left;
	width: 140px;
	margin: 10px auto;
}

div.info i
{
	padding-left: 15px;
	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('layout/arrow.jpg');
	color: #BE9B82;
}

div.info a
{
	padding-left: 15px;
	background-position: top left;
	background-repeat: no-repeat;
	background-image: url('layout/arrow.jpg');

	text-decoration: none;
	font-weight: normal;
	color: #CACACA;
}

div.info a:visited {text-decoration: none;      font-weight: normal; color: #A0A0A0;}
div.info a:active  {text-decoration: underline; font-weight: normal; color: #A0A0A0;}
div.info a:hover   {text-decoration: underline; font-weight: normal; color: #FFFFFF;}
div.info a:focus   {text-decoration: underline; font-weight: normal; color: #FFFFFF;}

/* --- Page footer --- */

#footer
{
	width: 752px;

	font-family: "Arial", "Helvetica", "Sans Serif";
	font-size: 0.7em;
	color: #A0A0A0;
	text-align: center;
	background-repeat: repeat-y;
	background-position: top left;
	background-image: url('layout/border.jpg');
	padding: 10px;
	margin: 0px;
	float: left;
}

#footer a         {text-decoration: none;      font-weight: normal; color: #D0D0D0;}
#footer a:visited {text-decoration: none;      font-weight: normal; color: #C0C0C0;}
#footer a:active  {text-decoration: underline; font-weight: normal; color: #C0C0C0;}
#footer a:hover   {text-decoration: underline; font-weight: normal; color: #FFFFFF;}
#footer a:focus   {text-decoration: underline; font-weight: normal; color: #D0D0D0;}

/* --- body --- */

body
{
	width: 772px;

	background-color: #6F6F6F;
	background-image: url('layout/dragon.jpg');
	background-repeat: no-repeat;
	background-position: top center;
	margin: 0px auto;
}

/* --- login menu --- */

#login
{
	width: 101px;
	height: 100px;
	font-size: 10px;
	color: #A0A0A0;
	font-family: "Arial", "Helvetica", "Sans Serif";
	text-align: left;
	margin: 12px 0px 0px 0px;

	float: right;
}

#login input
{
	width: 70px;
	font-size: 10px;
	color: #A0A0A0;
	font-family: "Arial", "Helvetica", "Sans Serif";
	background-color: #6F6F6F;
	border-width: 1px;
  	border-style: solid;
  	border-color: #A0A0A0;
	margin: 1px auto;
}

#login .button
{
	/* fix button width as much as possible */
	width: 73px;
}

/* --- general text formatting */

.left {text-align: left;}
.right {text-align: right;}
.center {text-align: center;}
.justify {text-align: justify;}
.clear {clear: both;}
.padded {padding: 0px 0px 0px 154px;}

img.title
{
	margin: 10px 14px 10px 0px;
	float: left;
	border-width: 0px;
	clear: left;
}

img.left
{
	margin: 4px;
	float: left;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

img.right
{
	margin: 4px;
	float: right;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

img
{
	border-width: 0px;
	margin: 4px;
}