/*
Site:			www.kuksoolwon.de
Author:			Torsten Schrade
Usage:			Main stylesheet
*/

/* ####################### BASICS ############################ */

* {
	margin: 0;
	border: none;
	padding: 0;
}

html {
	height: 100%
}

body {
	position: relative;
	min-height: 101%; /* forces Geckoes to display vertical scrollbar */
	padding-bottom: 5em;
	color: #000000;
	background: #587289 url(../images/bg_body.gif) left top repeat-x;
	font-family: Arial, Geneva, sans-serif;
	font-size: 86%; /* => http://www.reeddesign.co.uk/test/points-pixels.html */
	text-align: left;
}

/* ####################### CONTAINER ############################ */

#container {
	position: relative;
	z-index: 1;
	width: 58em;
	margin: 0 auto;
	/*border: 1px solid yellow;*/
	padding-right: 10px; /* space for the dropshadow */
	background: #587289 url(../images/sh_container.gif) right top repeat-y;
}

#skiplinks {
	position: absolute;
	top: -2em; /* pull them out of sight */
}

#langselect {
	position: absolute;
	z-index: 10;
	top: 75px;
	right: 2em;
}

#header {
	position: relative;
	z-index: 3;
	width: 57.7em;
	/* height: 228px
	background: url(../images/bg_header.gif) left top repeat-x; */
	height: 209px;
	background: url(../images/bg_header.1.gif) left top repeat-x; /* left corner of flexible container */
}

#masthead {
	/* height: 228px;
	background: url(../images/bg_header_h1.gif) left top no-repeat;	*/
	height: 209px;
	background: url(../images/bg_header_1.gif) left top no-repeat; /* middle part of flexible container */
}

#location {
	position: absolute;
	right: -44px;
	top: 0;
	z-index: 5;
	width: 80px;
	height: 600px;
	/* right: -54px;
	background: url(../images/bg_header_p.gif) left top no-repeat;*/
	background: url(../images/bg_header_p.1.gif) left top no-repeat; /* right corner of flexible container */
}

#logo {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 5;
	width: 170px;
	height: 170px;
}

#logo a {
	display: block;
	width: 170px;
	height: 170px;
}

#navigation {
	position: relative;
	overflow: hidden; /* explicitly needed for Safari */
	z-index: 5;
	width: 58em;
	height: 14.8em;
	background: #a7b7c6 url(../pics/temple_bg.jpg) 14.55em top no-repeat;
}

#navimain {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 7;
	width: 14.55em;
	height: 14.8em;
	/*background: #313131 url(../images/bg_navisub.gif) left 103% repeat-x;*/
        background: #323131;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}

#navisub {
	position: absolute;
	bottom: 0;
	left: 14.62em;
	width: 43.39em;
	height: 1.93em;
	border-top: 1px solid #FFFFFF;
	/*background: #323131 url(../images/bg_navisub.gif) left bottom repeat-x;*/
        background: #323131;
}

#content {
	position: relative;
	z-index: 1;
	background: #FFFFFF url(../images/bg_content.gif) 14.56em 0 repeat-y; /* dropshadow left */
}

#sidecontent {
	position: absolute;
	top: 0;
	z-index: 10;
	width: 14.55em;
	min-height: 50em;
	border-top: 1px solid #FFF;
	background: #dfe4e8 url(../images/bg_leftcolumn.jpg) 45% 63% no-repeat; /* kuk sool won */
}

#maincontent {
	position: relative;
        min-height: 50em;
	border-left: 14.55em solid #dfe4e8;
	padding: 1.5em 1.5em 5em 1.5em;
	border-top: 1px solid #FFFFFF;
	background: url(../images/bg_maincontent.gif) 0 0 no-repeat; /* dropshadow top */
}

div[id="maincontent"] {
        overflow: hidden;
}

#footer {
	position: relative;
	z-index: 3;
	clear: both;
	height: 120px;
	background: url(../images/bg_footer.gif) left top repeat-x; /* middle part of flexible footer */
}

#Kuk-Sool-Won-of-Worms {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 0;
	height: 12em;
	color: #CFCFCF;
	padding: 21px 0 0 1.8em;
	background: url(../images/bg_footer_left.gif) left top no-repeat; /* left corner */
	font-size: 0.83em; /* we use 0.83 to align for Operas font calculation */
	line-height: 1.3em;
}

#siteinfo {
	list-style: none;
	margin: 0 -10px 0 0;
	min-height: 120px;
	padding-top: 64px;
	background: url(../images/bg_footer_right.gif) right top no-repeat; /* right corner */
	text-indent: 42em; /* push the siteinfos to the right */
}

/* ####################### MENUS ############################ */

/* SKIPLINKS & LANGSELECT */

#skiplinks h5,
#langselect h5 {
	display: inline;
	margin-right: 0.8em;
	color: #CFCFCF;
	font-size: 0.83em;
}

#skiplinks ul,
#langselect ul {
	display: inline;
	list-style-type: none;
	font-size: 0.83em;
}

#skiplinks li,
#langselect li {
	display: inline;
}

#skiplinks li a,
#langselect ul li a {
	padding: 0 0.2em 0 1em;
	color: #CFCFCF;
	text-decoration: none;
}

#langselect ul li a:hover,
#skiplinks ul li a:hover {
	background: url(../images/bg_langselect_arrow.gif) 0% 50% no-repeat;
}

#langselect ul li a.act,
#skiplinks ul li a.act {
	background: url(../images/bg_langselect_arrow.gif) 0% 50% no-repeat;
}

/* NAVIMAIN */

#navimain ul {
	position: relative;
	overflow: hidden;
	list-style: none;
        height: 16em;
	border-bottom: 1px solid #FFFFFF;
	background: #a7b7c6;
        font-size: 0.8em;
}

#navimain ul li {
	float: left;
}

#navimain ul li a {
	display: block;
        width: 17.2em;
        height: 2em;
	border-bottom: 1px solid #587289;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1em;
}

#navimain ul li a span {
	display: block;
        height: 2em;
	text-indent: 1.2em;
        line-height: 2.2em;
}

#navimain ul li.last a {
	border-bottom: none;
}

#navimain ul li.act a,
#navimain ul li a:hover {
	color: #2f3b51;
	background: #DFE4E8 url(../images/bg_navimain_ha.jpg) 0 0 repeat-x;
}

#navimain ul li.act a span,
#navimain ul li a:hover span {
	background: url(../images/icon_navimain.gif) 90% 50% no-repeat;
}


/* NAVI SUB */

#navisub ul {
	list-style: none;
        font-size: 0.9em;
}

#navisub ul li {
	float: left;
	height: 2.1em;
	border-right: 1px solid white;
}

#navisub ul li a {
	display: block;
	padding: 0 2.2em;
	background: #383838;
	color: #FFFFFF;
	text-decoration: none;
	line-height: 2.1em;
}

#navisub ul li.act a,
#navisub ul li a:hover {
	background: #383838 url(../images/bg_navisub_ha.gif) 0 0 repeat-x;
}

/* CONTENTNAVI */

#contentnavi {
	position: absolute;
	width: 40.6em;
	bottom: 0.5em;
        left: 16.1em;
	padding-right: 1.2em;
	color: #587289;
}

#container #contentnavi ul {
	list-style: none;
	margin: 0;
        font-size: 0.83em;
}

#contentnavi ul li {
	display: inline;
}

#contentnavi #helpers {
	float: right;
}

#contentnavi #rootline {
	float: left;
}

#contentnavi h5 {
	float: left;
	margin-right: 0.5em;
	font-weight: normal;
	color: #587289;
        font-size: 0.83em;
}

#helpers li.first {
	border-right: 1px solid #587289;
}

#helpers li.last {
	margin-left: 0.2em;
}

#contentnavi a {
        color: #587289;
	text-decoration: none;
}

#contentnavi #totop {
	margin-right: 0.4em;
/*	padding-left: 1em;
	background-image: url(../images/bg_totop.gif);*/
	background-position: 0% 50%;
	background-repeat: no-repeat;
}

/* SITEINFO */

#siteinfo li {
	display: inline;
}

#siteinfo li a {
	font-size: 0.83em;
	text-decoration: none;
	color: #CFCFCF;
	border-right: 1px solid #CFCFCF;
	padding: 0 0.5em;
}

#siteinfo li a:hover {
	text-decoration: underline;
}

#siteinfo li.last a {
	border: none;
}

/* ####################### FORMS ############################ */

/* GENERAL */

#forms {
	margin: 1.5em 0 0 1em;
}

#forms legend {
	color: #2F3B51;
	margin: 0;
	padding: 0;
	font: 0.83em Arial, Geneva, sans-serif;
}

#forms input {
	border: 1px solid #587289;
	margin: 0.15em 0;
	padding: 0.2em;
	color: #666666;
	background: #FFFFFF;
	background-position: 2% 60%;
	background-repeat: no-repeat;
	font: 0.9em Arial, Geneva, sans-serif;
}

#forms .submit {
	background: #F0F0F0;
}

#websearch fieldset {
	margin-bottom: 1.1em;
}

#websearch input {
	background: #FFFFFF url(../images/bg_search.gif) 2% 60% no-repeat;
}

/* SEARCHFORM */

#websearch #searchfield {
	float: left;
	width: 9em;
	padding-left: 1.5em;
}

#websearch #searchbutton {
	width: 2.8em;
	margin-left: 0.4em;
	padding-bottom: 0.1em;
	cursor: pointer;
	background-image: none;
	background: #DFDFDF;
}

/* LOGINFORM */

#loginform #user {
	width: 12em;
	padding-left: 1.7em;
	background-image: url(../images/bg_username.gif);
}

#loginform #pass {
	width: 12em;
	padding-left: 1.7em;
	background-image: url(../images/bg_pass.gif);
}

#loginform #submit {
	padding: 0.1em;
	cursor: pointer;
	background-image: none;
	background: #DFDFDF;
}

#loginstuff {
        list-style: none;
        margin: 1em 0 0 0;
        padding: 0;
        font-size: 0.9em;
}

#loginstuff li {
        margin: 0.5em 0;
        padding-left: 2em;
}

#loginstuff li a {
        text-decoration: none;
        color: #587289;
}

#members {
        background: url(../images/members.gif) 0 45% no-repeat;
}

#profile {
        background: url(../images/profile.gif) 0 45% no-repeat;
}

#newtopics {
        background: url(../images/newtopics.gif) 0 45% no-repeat;
}

#mytopics {
        background: url(../images/mytopics.gif) 0 45% no-repeat;
}

#gochat {
        background: url(../images/gochat.gif) 0 45% no-repeat;
}

/* ### */

#Kuk-Sool-Won-of-Worms a {
	color: #CFCFCF;
	text-decoration: none;
}

#Kuk-Sool-Won-of-Worms .region, 
#Kuk-Sool-Won-of-Worms .country-name, 
#Kuk-Sool-Won-of-Worms .fn {
	display: none;
}

#Kuk-Sool-Won-of-Worms .indent {
	padding-left: 12px;
	background: url(../images/hyphen.gif) 4px center no-repeat;
}

#Kuk-Sool-Won-of-Worms .street-address {
	float: left;
}

#Kuk-Sool-Won-of-Worms .tel {
	float: left;
}

#Kuk-Sool-Won-of-Worms .email {
	display: block;
	clear: both;
}

/* ####################### SPECIALS ############################ */

/* class for hiding elements */
.skip {
    position: absolute;
    overflow: hidden;
    z-index: 0;
    width: 1px;
    height: 1px;
    margin: -2px 0 0 -2px;
    background: transparent;
}

/* class for clearing elements */
.clearer {
	clear: both;
	visibility: hidden;
}

.clearafter:after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
}