/* basic styles, html elements, forms, structure */

* {
	margin: 0;
	padding: 0;
	color: #58514e;
	font-size: 1em;
	border: 0;}

html {
  min-height: 100.2%;}

body {
	font-family: Tahoma, Arial, "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif; 
	text-align: center;
	font-size: 68.75%;}
	

/*
font stacks:

bisher: Tahoma, Verdana, Arial, Helvetica, sans-serif;

Tahoma, Geneva, Arial, Verdana, sans-serif; (sah komisch aus auf manchen macs)
"Lucida Grande", "Lucida Sans Unicode", Tahoma, Arial, Helvetica, sans-serif; (gleiche anmutung auf iphone und pc; sieht aber ungeglättet komisch aus (läuft sher weit, laufweite nicht gleichmäßig))

*/



/****** 2.) General settings for common elements ***********************************************/
/* a */
a {
  color: #2E9CC0;
  text-decoration: underline;}

/*a:hover {
	color: #2E9CC0;
	text-decoration: underline;}*/

a.current {
	font-weight: bold;}

a img {
	border: 0;}

a.standalone {
	padding-left:12px;
	background: url(../images/linkicon.gif) no-repeat 0 50%;}

a.standalonepop {
	padding-left:12px;
	background: url(../images/linkiconpop.gif) no-repeat 0 50%;}

a.noHighlight {
	text-decoration: none;
	color: #58514e;
}

h2 a.noHighlight {
	text-decoration: none;
	color: #574e2e;
}


p {
	margin-top: 20px;
	line-height: 1.5em;}


h1 {
	font-weight: normal;
	color: #58514E;
	margin: 25px 0 -25px 0;}

h2 {
  font-size: 1.8em;
	font-weight: normal;
	color: #574e2e;
	margin: 25px 0 0 -1px;
	line-height: 1.2em;
	}

h2 label {
  display: inline;
	color: #574e2e;
	margin-top: 0;}

h2 img {
  vertical-align: middle;}

h2 strong {
  color: #58514E;}

h3 {
	font-weight: normal;
	color: #58514E;
	margin: 0px 0 0 0;
	line-height: 1.5em;}

h4 {
	font-weight: bold;
	color: #58514E;
	margin: 20px 0 -10px 0;
	font-size: 1.1em;}


ul {
	margin-top: 20px;}

ul li {
	line-height: 17px;
	margin-top: 2px;
	padding-left:10px;
	list-style-type: none;
	background: url(../images/listingbullet.gif) no-repeat 0 8px;}




table {
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
	line-height: 16px;
	width: 100%;
	margin-top: 20px;}

caption {
  text-align: left;
	font-size: 1.8em;
	font-weight: normal;
	color: #574e2e;
	background-color: #F4F4E8;
	padding: 35px 0 5px 10px;}

th {
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #F4F4E8;
	font-weight: normal;
	color: #837872;
	padding: 40px 10px 10px 10px;
	text-align: center;}

td {
	padding: 10px;
	border: 0;
	border-collapse: collapse;
	border-bottom: 1px dotted #BBBD9B;
	text-align: center;}

td.small {
	padding: 5px;
	border: 0;}

td.smallb {
	padding: 5px;}

table.withCaption {
	margin-top: 0px;}

table.withCaption th {
	padding-top: 0px;}

th.left, td.left {
	text-align: left;}

th.center, td.center {
	text-align: center;}
	
th.right, td.right {
	text-align: right;}

th.top, td.top {
	vertical-align: top;}

th.noWrap, td.noWrap {
	white-space: nowrap;}

tr:last-child td {
	border: 0;}

td p {
	margin-top: 2px;}

td.SubEntry {
	padding-left: 20px;}

table.withoutCaption td {
  padding-left: 0;}
	
td .smallThumbnail {
	float: none;
	margin: 0;}


tr.big td, td.big {
  color: #8a8683;
  font-size: 1.3em;
  font-weight: bold;
}










form {
	margin-top: 20px;}

form .halfSize {
  width: 46%;}

form div.left {
  float: left;
  width: 47%;}

form div.right {
  float: left;
  padding-left: 6%;
  width: 47%;}


fieldset {
	border: 0;
	margin-top: 20px;}

fieldset.inv {
  margin: 0;
  padding: 0;}

fieldset.inv legend {
  display: none;}


label {
	display: block;
	margin: 10px 0 3px 0;
	color: #58514E;}

textarea {
	width: 98%; /* in ie width is measured without the border. so if we do 100% here the border is croped by the surrounding div */
	padding: 4px;
	font-family: Tahoma, Arial, "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif; 
	border: 1px solid #DDDECD;
	line-height: 1.2em;}

textarea:focus {
	border: 1px solid #2E9CC0;}

select {
	width: 98%; /* in ie width is measured without the border. so if we do 100% here the border is croped by the surrounding div */
	border: 1px solid #c6c7b8;
	padding: 4px;}

select option {
  margin: 4px 0 4px 0;}
  
select option[disabled] {
  color: #aba8a6;}

.inputImage {
	margin: 20px 0 0 0;
	border: 0;}

#boxContent #boxLeftColumn .inputImage {
	margin-top: 10px;}

.inputText {
	width: 98%; /* in ie width is measured without the border. so if we do 100% here the border is croped by the surrounding div */
	padding: 4px;
	border: 1px solid #c6c7b8;}

.inputText:focus {
  border: 1px solid #2E9CC0;}

.inputText[disabled] {
  border: 1px solid #a2a2a2;
  background-color: #d4d0c8;
  color: #8a847f;}


/*div.left .inputText, div.right .inputText {
  width: 96%;}
  
div.left select, div.right select {
  width: 96%;}*/
  

.Radiobutton {
	vertical-align: top;
	margin-right: 5px;}

/*.RadioLabel {
	vertical-align: middle;}
*/

.RequiredFormField {
	color: #FF00FF;}

.RequiredFormFieldLegend {
	float: right;}

.checkboxLong {
  margin-top: 20px;}

.checkboxLong .Radiobutton {
	float: left;
	margin: 3px 10px 0 0;}

.checkboxLong p,
.checkboxLong label {
	float: left;
	margin-top: 0;
	line-height: 1.5em;
	width: 90%;}


.InputDate select {
	width: 70px;
	margin-top: 5px;}

.InputDate select#UserDateOfBirthYear {
	width: 103px;}


.CountrySelection, .CountrySelection option{
  padding: 1px 0 1px 24px;
  background-repeat: no-repeat;
  background-position: 4px 50%;
  background-color: white;}

.CountrySelection {
  padding: 4px 4px 4px 24px;}


.LanguageSelection, .LanguageSelection option{
  padding: 1px 0 1px 24px;
  background-repeat: no-repeat;
  background-position: 4px 90%;
  background-color: white;}

.LanguageSelection {
  padding: 0 0 0 20px;
  background-position: 4px 60%;}


.inputFile {
	width: 200px;
	padding: 2px;
	border: 1px solid #c6c7b8;}

.inputFile:focus {
  border: 1px solid #2E9CC0;}


/* custom file inputs */
.myFileinput {
	position: relative;
	width: 320px;
	text-align: right;
	white-space: nowrap;}

.myFileinput .inputFile {
	width: 215px;
	margin-right: 10px;}

.inputFileHidden {
	position: relative;
	text-align: right;
	-moz-opacity: 0;
	opacity: 0;
	filter: alpha(opacity=0.01);
	z-index: 2;
	cursor: pointer;}

div.inputFileFake {
	position: absolute;
	top: -2px;
	left: 0px;
	z-index: 1;}

.inputFileFake img {
  position: relative;
  top: 3px;}




/* main divisions */

#overall {
	width: 996px;
	margin: 0 auto;
	text-align: left;}

#boxContent {
	background: url(../images/contentbg.gif) repeat-y;
	padding-bottom: 40px;}

#boxContent #boxLeftColumn {
	float: left;
	width: 183px;
	padding: 0 15px 0 20px;
	overflow: hidden;}

#boxContent #boxMiddleColumn {
	float: left;
	padding: 0 20px 50px 20px;
	width: 547px;
	overflow: hidden;}

#boxContent #boxRightColumn {
	float: left;
	width: 150px;
	padding: 0 15px 0px 20px;
	overflow: hidden;}


/*use this if like to have a border between to columns. use background-position: Xpx; to pos the background image*/
.boxSubcolumnInsert {
	background-image: url(../images/dottedvertical.gif);
	background-repeat: repeat-y;
	margin-top: 20px;
	padding-bottom: 10px;}

.boxSubcolumnInsert.borderTop {
	border-top: 1px dotted #BBBD9B;
  margin-top: 20px;}

.boxSubcolumnInsert.borderBottom {
	border-bottom: 1px dotted #BBBD9B;
	padding-bottom: 20px;}

.boxSubcolumnLeft {
	float: left;
	padding: 0 10px 0 20px;
	margin: 0 0 0 -20px;
	width: 265px;
	overflow: hidden;}

.boxSubcolumnRight {
	float: left;
	padding: 0 20px 0 20px;
	margin: 0 -20px 0 0;
	width: 252px;
	overflow: hidden;}


.noRightColumn #boxContent {
  background: url(../images/contentnorightbg.gif) repeat-y;}

.noRightColumn #boxContent #boxMiddleColumn {
	width: 736px;}

.boxTeaser {
  position: relative;
	float: left;
	width: 253px;
	padding: 0 20px 20px 20px;}

.boxTeaserLeft {
	margin: 0 0 0 -20px;
	border-right: 1px solid #c6c7b8;}

.boxTeaserRight {
	margin: 0 -20px 0 0;}

.boxTeaser .teaserImage{
  margin-top: 20px;}

.boxTeaser h2{
  margin-top: 20px;}


#boxContent.home {
	background: 0;
	padding: 0;}

#boxContent.home #boxMiddleColumn {
	width: 996px;
	margin: 0;
	padding: 0;}

#boxContent.home #boxMiddleColumn #keyvisual {
  position:absolute;
  z-index: 10;
  width: 996px;
	height: 605px;}

.homeWelcomeBox, .homeSearchBox, .homeNewsBox {
  position: absolute;
  overflow: hidden;
  z-index: 20;
  margin-left: 570px;
  padding: 0 20px 20px 20px;
  width: 360px;
  background-color: #e8e8e8;}

.homeWelcomeBox {
  margin-top: 20px;
  height: 210px;
  background-color: #e8e8e8;}

.homeSearchBox {
  margin-top: 251px;
  height: 105px;
  background-color: #2e9cc0;}

.homeNewsBox {
  margin-top: 377px;
  height: 190px;
  background-color: #e8e8e8;}




/* header, infobox and login info */
#header {
  height: 90px;
	background: #3299BB url(../images/3headerbg.gif) no-repeat 0 100%;
	position: relative;}

#header h1 {
  width: 202px;
	height: 57px;
	margin: 0;
	padding: 0;
	background: url(../images/7logo.gif) no-repeat;
	position: absolute;
	top: 15px;
	left: 25px;}	

#header h1 a {
  width: 202px;
  height: 57px;
  display: block;
  font: 0/0 sans-serif;
  text-indent: -3000px;
  text-decoration: none;
  outline: none;}

.headerimage {
	display: block;
	width: 996px;
	height: 153px;
	margin: 0 auto;}

#logedOut, #loggedIn {
  float: right;
  background: url(../images/cloudsheader.gif) no-repeat;
  height: 67px;
  padding: 20px 20px 0 40px;
  position: relative;}

#logedOut div.details, #loggedIn div.details {
  float: left; /* war right vorher. zerschoss das layout im ie8.*/
  background-color: #74aea2;
  padding: 1px 5px 2px 5px;
  margin: 30px 1px 0 0;}

#logedOut div.details a, #loggedIn div.details a {
  color: white;}

#loggedIn div.messagesActive{
  background: url(../images/messagesactivebg.gif) repeat;}

.infobox {
  float: right;
  margin: 8px 10px 0 0;
  width: 126px;
  height: 72px;}

.infoboxchat {
  background: url(../images/chatheader.gif) no-repeat;
  /*overflow: hidden;*/
  width: 74px;
  height: 37px;
  padding: 35px 0 0 52px;
  margin-right: 0;}

.infoboxchat a {
  color: #cde3e9;}


.infoboxcart {
  background: url(../images/notificationheader.gif) no-repeat;
  width: 125px;
  height: 68px;
  padding: 5px 0 0 0;
  margin-right: 0;
  text-align: left;}
  

.infoboxcart img {
  display: block;
  width: 38px;
  float: left;
  margin: 5px 2px 0 5px;}
  
.infoboxcart a {
  color: white;
  display: block;
  width: 80px;
  float: left;}

.infoboxcart span {
  font-size: 1.8em;
  color: white;}



#header a {
	text-decoration: none;
}


/* footer */

.footer {
	width: 966px;
	padding: 10px 10px 20px 20px;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #c6c7b8;
	font-size: 0.9em;}

.footer .linklist {
	float: right;
	margin-top: 0px;}

.footer .linklist li {
  background: url(../images/linkiconsquare.gif) no-repeat left 5px;
  padding: 0 5px 0 10px;}

.footer .linklist li.feed {
  background: url(../images/rssicon.gif) no-repeat left center;
  padding-left: 22px;}

.footer .linklist li.delicious {
  background: url(../images/delicious_small.gif) no-repeat left center;
  padding-left: 18px;}

.footer .linklist li.wong {
  background: url(../images/mister-wong-16x16.gif) no-repeat left center;
  padding-left: 22px;}

.footer .copyright {
	color: #A3A586;
	float: left;
	margin: 3px 0 0 0;}

.footer .copyright span.copy {
	color: #A3A586;
	font-size: 1.1em;}

.footer .linklistFooter {
	float: left;
	margin: 10px 30px 0 0;
	font-size: 1.1em;
	text-align: left;}

.footer .linklistFooter li {
  background: 0;
  padding-left: 0;
  line-height: 18px;}

.footer .linklistFooter li a {
  color: #b5b795;}

.footer .linklistFooter li.linklistHeadline {
	font-weight: bold;
	color: #b5b795;}

.footer .backToTop {
	clear: both;
	margin-top: 10px;
	float: right;}




/* main navigation */

#navigation {
	float: left;
	width: 996px;
	position: relative;
	background: #3B310E url(../images/bg-navigation.gif) no-repeat;
	z-index: 300;}

#navigation ul {
	list-style: none;
	width: 100%;
	padding-bottom: 2px;
	float: left;
	background: url(../images/bg-navigation-ul.gif) repeat-x 0 100%;
	margin: 0;}

#navigation ul li {
	float: left;
	padding-left: 1px;
	position: relative;
	margin: 0;}

#navigation li#lang, #navigation li#cur {
	float: right;}

#navigation li#cur a {
	background: #3B310E url(../images/bg-navigation.gif) no-repeat 100% 0;}

#navigation ul li.border {
	background: url(../images/bg-navigation-li.gif) no-repeat 0 50%;}

#navigation ul li.border a {
	background: url(../images/bg-navigation-li-a.gif) no-repeat 100% 50%;}

#navigation ul li#first-nav {
	padding-left: 0;}

#navigation ul li#first-nav a {
	background: #3B310E url(../images/bg-navigation.gif) no-repeat;}

#navigation ul li#first-nav.active a,
#navigation ul li#first-nav a:hover {
	background: #171305 url(../images/bg-navigation.gif) no-repeat;}

#navigation ul li#last-nav.border a {
	background-image: none;}

#navigation ul li a {
	display: block;
	position: relative;
	padding: 3px 20px 5px 20px;
	line-height: 21px;
	text-decoration: none;
	color: #BCB986;}

#navigation ul li.active a,
#navigation ul li a:hover {
	background: #171305;}

#navigation ul li ul {
  visibility: hidden;
	padding: 0;
	position: absolute;
	left: 0;
	width: 200px;
	z-index: 400;}

#navigation ul li#cur:hover,
#navigation ul li#cur:hover a,
#navigation ul li#cur a:hover {
	background: #171305 url(../images/bg-navigation.gif) no-repeat 100% 0;}

#navigation ul li ul li {
	padding: 0;
	float: none;
	position:  relative;
	border-bottom: 1px solid #3B310E;}

#navigation ul li ul li a {
	float: none;
	width: 160px;
	font: 11px/21px Tahoma, Arial, "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif; 
	height: 21px;
	color: #fff;
	background: #171305 !important;}

#navigation ul li ul li.active a,
#navigation ul li ul li a:hover {
	color: #bdbc88;
	background: #342b0c !important;}

#navigation ul li#lang ul, #navigation ul li#cur ul {
  width: 120px;
	left: auto!important;
	right: 0!important;
	text-align: right;}

#navigation ul li#lang ul li a, #navigation ul li#cur ul li a {
  width: 80px !important;}



/* paging */

ul.pager {
  margin: 0 0 0 10px;
  padding: 0;
	width: 107px;
	height: 19px;
	margin-right: 10px;
	float: right;
	list-style: none;}

ul.pager li {
  margin: 0;
  padding: 0;
	float: left;
	height: 19px;
	background-image: url(../images/bg-ulpager.gif);
	background-repeat: no-repeat;}

ul.pager li span {
  display: none;}

ul.pager li a {
	width: 100%;
	height: 19px;
	display: block;
	background-image: url(../images/bg-ulpager.gif);
	background-repeat: no-repeat;
	text-indent: -3000em;
	text-decoration: none;
	font: 0px/0 sans-serif;}

/* sometimes opera is a dirty bitch */
html *>b\ody ul.pager li a,
html:first-child>b\ody ul.pager li a {
	content: " ";}
/* end bitch-hacking */

ul.pager li.firstPage {
	width: 13px;
	background-position: 0 -19px;}

ul.pager li.firstPage a {
	background-position: 0 0;}

ul.pager li.firstPage a:hover {
	background-position: 0 -38px;}

ul.pager li.backwardPage {
	width: 40px;
	background-position: -13px -19px;}

ul.pager li.backwardPage a {
	background-position: -13px 0px;}

ul.pager li.backwardPage a:hover {
	background-position: -13px -38px;}

ul.pager li.forwardPage {
	width: 41px;
	background-position: -53px -19px;}

ul.pager li.forwardPage a {
	background-position: -53px 0;}

ul.pager li.forwardPage a:hover {
	background-position: -53px -38px;}

ul.pager li.lastPage {
	width: 13px;
	background-position: -94px -19px;}

ul.pager li.lastPage a {
	background-position: -94px 0;}

ul.pager li.lastPage a:hover {
	background-position: -94px -38px;}

span.currentPage {
  float: right;
  line-height: 17px;}




/* "go to page" control */

.pagingGoto {
	float: right;
	border-left: 1px dotted #BBBD9B;
	width: 159px;
	width: 150px;
	padding: 0 5px 0px 15px;}

.pagingGoto form{
	display: inline;}

.pagingGoto label {
	display: inline;
	margin: 0;}

.pagingGoto .inputImage {
	margin: 0;
	vertical-align: middle;}

.pagingGoto .inputText{
	margin: 0 5px 0 0;
	width: 20px;
	height: 11px;
	vertical-align: middle;
	border: 1px solid #808080;}

.pagingBottom {
	clear: both;
	border-top: 1px dotted #BBBD9B;
	margin-top: 30px;
	padding: 10px 0 0 0;
	text-align: left;
	font-size: 0.9em;
	color: #58514E;}

.pagingBottomBorderBottom {
	border-bottom: 1px dotted #BBBD9B;
	padding-bottom: 10px ;}

.pagingBottom .pagingGoto {
  float: left;
  border: 0;
  border-right: 1px dotted #BBBD9B;
  padding: 0 20px 0 0;}

.pagingBottom ul.pager {
	margin: 0 0 0 10px;}

.pagingBottom .standalone {
  line-height: 17px;}







/* safari hacks 28.11.2007 */
 
html:lang(de) #navigation,
html:lang(en) #navigation {
  height: 30px;
}

html:lang(de) .clear,
html:lang(en) .clear {
  height: 0;
  font: 0px/0 sans-serif;
  margin: 0;
}




/* popups */

body.popup {
  background: url(../images/contentbg.gif) repeat-y;}

.popup #overall {
	width: auto;}

.popup #boxContent {
	background: 0;
	width: auto;}

.popup .header {
  background: url(../images/headerbgpopup.gif) repeat-x;
  width: auto;
  height: 81px;}

.popup .header .logo {
  top: 6px;}

.popup #boxContent #boxMiddleColumn {
	width: 360px;}

body.popup.noLeftColumn {
  background: url(../images/contentbgpopupnoleft.gif) repeat-y;}

body.popup.noLeftColumn #boxContent #boxMiddleColumn {
  margin-left: 55px;
  width: auto;
  float: none;}
  



/* clearing */

/*.clear {
	position: relative;
	clear: both;
	line-height: 0;
	font-size: 1px;}*/
	
.clear { /* neu. selbe settings wie clearfix */
	clear: both;
	height: 0;  
  visibility: hidden;}

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

.clearfix {
  display: inline-block;
}

/* hide from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;}
/* End hide from IE-mac */



label input {
	vertical-align: middle;
}