/*
 * Main Styles
 */


/*
 * **********************************************************************************
 * Reset
 * **********************************************************************************
 */

@import url("reset.css");


/*
 * **********************************************************************************
 * Global Styles
 * **********************************************************************************
 */

.hide                       { display: none; }
.invisible                  { visibility: hidden; }

.left                       { float: left; }
.right                      { float: right; }

.error                      { color: #f00; }

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

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





/*
 * **********************************************************************************
 * Typographic Styles
 * **********************************************************************************
 */

body, ul, ol, dl, h1, h2, h3, h4, h5, h6, td, th, caption, pre, p, blockquote, input, textarea {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 100%; /*12px;*/
    line-height: 18px;
    font-weight: normal;
    color: #000;
}

h1, h2, h3,
h4, h5, h6                  { margin: 0; font-weight: normal; color:#666; }
h1                          { font-size: 150%; line-height: 28px; padding-top: 14px; padding-bottom: 14px; }
h2                          { font-size: 135%; line-height: 28px; padding-top: 9px; padding-bottom: 9px; }
h3                          { font-size: 120%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h4                          { font-size: 110%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h5                          { font-size: 110%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }
h6                          { font-size: 100%; line-height: 18px; padding-top: 9px; padding-bottom: 9px; }


a 							{ color:#3A489E; text-decoration:none; }
a:hover, a:focus 			{ color:#E60000; text-decoration:underline; }

em                          { font-style: italic; }
p                           { padding: 0 0 9px 0; }
small                       { font-size: 80%; }
strong                      { font-weight: bold; }

ul, ol                      { padding-top: 18px; padding-bottom: 18px; padding-left: 16px; list-style-position: outside; list-style-type: disc; }
ol                          { list-style-type: decimal; padding-left: 17px; }

dl                          { padding-top: 18px; padding-bottom: 18px; }
dl dt                       { font-weight: bold; }

blockquote                  { border-left: 1px solid #666; margin-top: 18px; margin-bottom: 18px; padding-left: 17px; font-style: italic; }
blockquote *                { color: #666; }

textarea                    { resize: none; } /* Prevents that little handle from showing up in Safari. */

sup                         { font-size: 70%; vertical-align: super; }




/*
 * **********************************************************************************
 * Form Styles
 * **********************************************************************************
 */

fieldset                    {}
legend                      {}
label                       {}

form                        {}
input                       {}
input.search                { background:url("../images/icon_search.gif") right 1px no-repeat #fff; }
input.text                  {}
input.radio                 {}
input.checkbox              {}
input.button                {}
textarea                    {}
select                      {}



input, textarea, select {
	border:1px solid #ccc;
	background:#fff;
	padding:2px;
}
input:hover, 
input:focus,
textarea:hover, 
textarea:focus, 
select:hover,
select:focus {
	border:1px solid #3A489E;
	background:#ecf1f8;
}
input.checkbox,
input.radio {
	border:0;
}
input.button {
	margin:0;
	padding:5px 5px;
	overflow:hidden;
	width:auto;
	color:#fff;
	font-weight:bold;
	line-height:1.0;
	font-size:100%;
	border:0;
	cursor:pointer;
	background-color:#3A489E;
}
input.button:hover,
input.button:focus {
	background-color:#E60000;
}
input.button.save {}
input.button.ok {}
input.button.cancel {}

fieldset {
	border:1px solid #d9d9d9;
	padding:10px;
	margin:0 0 10px 0;
	background:#fff;
}
legend { color:#3A489E; }

.form {}
.form th,
.form td	{ padding:2px 0; vertical-align:top; }
.form th 	{ text-align:right; padding-right:15px; vertical-align:top; }


.image{ clear: both; position: relative; }

img.imageLeft { 
    float: left; 
    margin: 0 5px 5px 0; 
}
img.imageRight { 
    float: right; 
    margin: 0 0 5px 5px; 
}


/*
 * **********************************************************************************
 * Layout Styles
 * **********************************************************************************
 */
 
body { background:url("../img/bg_header.gif") center top no-repeat #fff; text-align:center; }



#page-wrapper {margin:0 auto; width:940px; text-align:left; font-size:80%; }
#page {}


#page-metamenu-wrapper 				{ height:25px; text-align:right; overflow:hidden; padding:0 20px; }
#page-metamenu 						{ position:relative; }
#page-metamenu ul 					{ list-style:none; padding:0; margin:0; position:absolute; top:0; right:0; }
#page-metamenu ul li 				{ height:25px; float:left; padding:0; margin:0; background:url(../img/bg_meta.gif) repeat-x left bottom #fefefe; }
#page-metamenu ul li a 				{ color:#222; border-right:1px solid #fff; font-size:11px; font-weight:bold; line-height:25px; text-decoration:none; background:none; padding:0 5px;  }
#page-metamenu ul li a:hover,
#page-metamenu ul li a:focus 		{ color:#000; }
#page-metamenu ul li.active a 		{ color:#000; }
#page-metamenu ul li.last a 		{ border-right:0; }

#page-header-wrapper { height:80px; overflow:hidden; padding:0 20px; }
#page-header {}

#page-header-left-wrapper { float:left; width:70%; }
#page-header-left { position:relative;}
#page-header-left h1 {
	color:#FFFFFF;
	font-size:40px;
	font-weight:bold;
	left:100px;
	position:absolute;
	top:25px;
	padding:0;
	margin:0;
	line-height:1em;
}
#page-header-left h2 {
	color:#37718E;
	font-size:11px;
	font-weight:bold;
	left:100px;
	letter-spacing:1px;
	position:absolute;
	text-transform:uppercase;
	top:65px;
	padding:0;
	margin:0;
	line-height:1em;
}

#page-header-right-wrapper { float:right;  width:29%; }
#page-header-right { text-align:right; padding:20px 20px 0 0; }
#page-header-right a { background:none; border:0; }


#page-mainmenu-wrapper 		{ height:45px; padding:0 20px; }
#page-mainmenu 				{ height:45px; position: relative; }


#page-mainmenu ul 			{ list-style:none; padding:0; margin:0; height:36px; }
#page-mainmenu li 			{ float:left; height:37px; padding:0; margin:0; }
#page-mainmenu li a {
	color: #000;
	background: transparent;
	display: block;
	font-size: 12px;
	font-weight:bold;
	text-decoration: none;
	margin:0;
	padding:0 10px 0 10px;
	font-weight: bold;
	height:37px;
	line-height:37px;
	border-left:1px solid #fff;
}
#page-mainmenu li.last a {
	border-right:1px solid #fff;
}
#page-mainmenu li a em {
	font-style:normal;
}
#page-mainmenu li a:hover,
#page-mainmenu li a:focus {
	color: #000;
	background: url(../img/bg_mainmenu_hilite.gif) left bottom repeat-x transparent;
}
#page-mainmenu li.active a,
#page-mainmenu li.active a:focus,
#page-mainmenu li.active a:hover {
	color: #000;
	background: url(../img/bg_mainmenu_active.gif) left bottom repeat-x #fff;
}




#page-content-wrapper { background:#fff; }
#page-content {}

#page-content-center-wrapper { float:left; width:645px; overflow:hidden; }
#page-content-center { padding:30px 20px 30px 20px; overflow:hidden; }

#page-content-right-wrapper { float:left; width:295px; overflow:hidden; }
#page-content-right { padding:30px 20px 30px 0; overflow:hidden; }


#page-footer-wrapper { background:#fff; margin-bottom:30px; padding:0 20px; }
#page-footer { padding:10px 0 5px 0; text-align:center; font-size:90%; color:#666; border-top:1px solid #ccc; }



/* scms debug toolbar Styles */

#scms-mvc-debug-toolbar,
#scms-mvc-debug-toolbar-x {font-size:80%;text-align:left;}
#scms-mvc-debug-toolbar a,
#scms-mvc-debug-toolbar-x a {background:none;} 
#scms-mvc-debug-toolbar div {width:800px;height:600px;border:5px solid #666;overflow:auto;}
#scms-mvc-debug-toolbar div h5 {font-size:140%;color:#2A3D6E; }
#scms-mvc-debug-toolbar div h6 {font-size:120%;color:#2A3D6E; }
#scms-mvc-debug-toolbar td, 
#scms-mvc-debug-toolbar th { vertical-align:top; }


/*
 * **********************************************************************************
 * Content Styles
 * **********************************************************************************
 */


a.button { 
	background-color:#3A489E; 
	color:#FFFFFF;
	font-size:100%;
	font-weight:bold;
	line-height:2em;
	margin:0px;
	padding:5px 10px 5px 10px;
}
a.button:hover,
a.button:focus { text-decoration:none; background-color:#e60000; color:#fff; }


h1.group-header {
	background:url("../img/bg_groupheader_default.gif") left top no-repeat #fff;
	padding:56px 10px 12px 32px;
	font-size: 16px;
	font-weight:bold;
	line-height:16px;
	letter-spacing:0.1em;
	margin-bottom:20px;
	border:1px solid #d9d9d9;
} 

h1.group-header.start {}

h1.group-header.registrierung1{
	background:url("../img/bg_registrierung_1.png") left top no-repeat #fff;
}
h1.group-header.registrierung2{
	background:url("../img/bg_registrierung_2.png") left top no-repeat #fff;
}
h1.group-header.registrierung3{
	background:url("../img/bg_registrierung_3.png") left top no-repeat #fff;
}
h1.group-header.registrierung4{
	background:url("../img/bg_registrierung_4.png") left top no-repeat #fff;
}

h1.group-header.tagebuch{
	background:url("../img/bg_groupheader_tagebuch.gif") left top no-repeat #fff;
}
h1.group-header.kalender{
	background:url("../img/bg_groupheader_kalender.gif") left top no-repeat #fff;
}
h1.group-header.erfahrungsbericht {
	background:url("../img/bg_groupheader_berichte.gif") left top no-repeat #fff;
}
h1.group-header.aktivpost{
	background:url("../img/bg_groupheader_aktivpost.gif") left top no-repeat #fff;
}

div.left-indent { padding-left:140px; }



.box {
	background:#f5f5f5;
	border-bottom:15px solid #fff;
}
.box h2 {
	background:url(../img/bg_box_header.gif) left bottom repeat-x #ffd900;
	color:#333333;
	font-size:100%;
	font-weight:bold;
	padding:5px 0pt 5px 10px;
	margin:0;
	line-height:1.2;
}
.box .box-body {
	padding:5px 10px;
}

.box .box-body ul {
	padding-top:5px;
	padding-bottom:5px;
}
.box .box-body ul li {
	padding-bottom:5px;
}

.box .box-body ul.erfahrungsberichte {
	list-style:none;
	padding-left:0;
	margin:0;
	
}

.box.visitenkarte {
	background:url(../img/bg_box_header.gif) repeat-x scroll left bottom #FFD900;
}
.box.visitenkarte h2 {
	background:url(../img/bg_box_header_inv.gif) repeat-x scroll left top #FFD900;
	border-bottom:1px solid #fff;
}



.left-column 			{ width:110px; float:left; }
.left-column-inner		{ padding-right:20px; }
.right-column 			{ width:495px; float:left; }
.right-column-inner 	{}



#calendar		{ }
#calendar-up	{ background:url("../img/cal_arrowup.gif") left top no-repeat #fff; width:90px; height:20px; cursor:pointer; }
#calendar-down	{ background:url("../img/cal_arrowdown.gif") left bottom no-repeat #fff; width:90px; height:20px; cursor:pointer; }
#calendar-list { list-style:none; padding:0; margin:0; }
#calendar-list li { width:90px; height:95px; background:#fff; }
#calendar-list li div.calendar-body { color:#3A489E; text-align:center; width:90px; height:91px; background:url("../img/bg_cal.gif") left top no-repeat; }
#calendar-list .calendar-day-label { text-transform:uppercase; font-size:10px; line-height:1; font-weight:bold; letter-spacing:0.1em; padding:10px 0 0 0; }
#calendar-list .calendar-day { font-size:48px; line-height:1; font-weight:bold; padding: 0; }
#calendar-list a .calendar-day,
#calendar-list a:hover .calendar-day,
#calendar-list a:focus .calendar-day { color:#3A489E; text-decoration:none; }
#calendar-list .calendar-day-berichte { color:#000; font-size:11px; line-height:1; font-weight:bold; }

#calendar-list li.current {}
#calendar-list li.current div.calendar-body { color:#fff; background-image:url("../img/bg_cal_current.gif") }
#calendar-list li.current a .calendar-day { color:#fff; }
#calendar-list li.current .calendar-day-berichte { }

#calendar-list li.disabled {}
#calendar-list li.disabled div.calendar-body { color:#c3d6e0; background-image:url("../img/bg_cal_disabled.gif") }
#calendar-list li.disabled .calendar-day-berichte { color:#c3d6e0; }


.calendar-item { padding-top:20px; }

.calendar-item .calendar-icon 								{ width:51px; height:71px; color:#3A489E; text-align:center; background:url("../img/bg_cal_small.gif") left top no-repeat; }
.calendar-item .calendar-icon .calendar-icon-day-label 		{ text-transform:uppercase; font-size:9px; line-height:1; font-weight:bold; letter-spacing:0.1em; padding:7px 0 0 0; }
.calendar-item .calendar-icon .calendar-icon-body 			{ font-size:30px; line-height:1; font-weight:bold; padding: 0; }

.calendar-item .calendar-icon-placeholder					{ width:51px; height:71px; }
.calendar-item .calendar-icon-placeholder .calendar-icon-day-label,
.calendar-item .calendar-icon-placeholder .calendar-icon-body 			{ visibility:hidden; }

.calendar-item.disabled .calendar-icon						{ background:url("../img/bg_cal_small_disabled.gif") left top no-repeat; color:#c3d6e0; }
.calendar-item.current .calendar-icon						{ background:url("../img/bg_cal_small_current.gif") left top no-repeat; color:#fff; }

.calendar-item .calendar-body { }

.calendar-item .calendar-body .calendar-meta,
.calendar-item .calendar-body h2,
.calendar-item .calendar-body .calendar-teaser 				{ padding:0; margin:0; }

.calendar-item .calendar-body .calendar-meta 				{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:90%; font-weight:bold; }
.calendar-item .calendar-body .calendar-meta span 			{ color: #000; font-weight:normal; }
.calendar-item .calendar-body h2 							{ padding-top:5px; padding-bottom:5px; line-height:1.2; }
.calendar-item .calendar-body p								{ padding:0; margin:0; padding-bottom:5px; }


.event-list 												{ padding-top:20px; }
.event-list-icon 											{ width:51px; height:71px; background:url("../img/icon_events.gif") left top no-repeat; }
.event-list-body											{ width:444px; } 
.event-list-body .event-list-title,
.event-list-body .event-list-content 						{ padding:0; margin:0 0 0 10px; }

.event-list-body .event-list-title							{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:90%; line-height:1; font-weight:bold; }
.event-list-body h4											{padding-top:5px; padding-bottom:5px; line-height:1.2;}
.event-list-body .event-list-content						{} 
.event-list-body .event-list-item							{ padding-bottom:10px;} 
 
 
.erfahrungsbericht-list 												{ padding-top:20px; }
.erfahrungsbericht-list-icon 											{ width:51px; height:51px; background:url("../img/icon_berichte.gif") left top no-repeat; }
.erfahrungsbericht-list-body											{ width:444px; } 
.erfahrungsbericht-list-body .erfahrungsbericht-list-meta,
.erfahrungsbericht-list-body h4,
.erfahrungsbericht-list-body .erfahrungsbericht-list-content 			{ padding:0; margin:0 0 0 10px; }

.erfahrungsbericht-list-body .erfahrungsbericht-list-meta				{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:90%; line-height:1;  font-weight:bold; }
.erfahrungsbericht-list-body h4											{padding-top:5px; padding-bottom:10px; line-height:1.2;}
.erfahrungsbericht-list-body .erfahrungsbericht-list-content			{} 

.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul			{ list-style:none; margin:0; padding:0; } 
.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul	li 		{ margin:0; padding: 0 0 10px 0; }
.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul	li .erfahrungsbericht-meta	{ }
.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul	li .erfahrungsbericht-meta span	{ font-weight:bold; }
.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul	li h5 	{ margin:0; padding:0; }
.erfahrungsbericht-list-body .erfahrungsbericht-list-content ul	li p 	{ margin:0; padding:0; }
 

.erfahrungsbericht-list-item 									{ padding-bottom:15px; }
.erfahrungsbericht-list-item .erfahrungsbericht-meta 			{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:90%; line-height:1; font-weight:normal;}
.erfahrungsbericht-list-item .erfahrungsbericht-meta span		{ color: #000; font-weight:bold; } 
.erfahrungsbericht-list-item h4 								{ font-size:120%; margin:0; padding:5px 0 5px 0; }
 
 
.ap-artikel-list 												{ padding-top:20px; }
.ap-artikel-list-icon 											{ width:25px; height:34px; background:url("../img/icon_aktivpost_micro.gif") left top no-repeat; }
.ap-artikel-list-body											{ width:470px; } 
.ap-artikel-list-body .ap-artikel-list-title,
.ap-artikel-list-body .ap-artikel-list-content 					{ padding:0; margin:0 0 0 10px; }

.ap-artikel-list-body .ap-artikel-list-title					{ border-bottom:1px solid #ccc; padding-bottom:5px; font-size:90%; line-height:1; font-weight:bold; }
.ap-artikel-list-body h4										{padding-top:5px; padding-bottom:5px; line-height:1.2;}
.ap-artikel-list-body .ap-artikel-list-content					{ width:470px; } 
.ap-artikel-list-body .ap-artikel-list-item						{ padding-bottom:10px;} 
 
 
 

#themen-navigator 													{ padding:0; margin:0; }
#themen-navigator .themen-navigator-item 							{ width:90px; height:95px; padding:0; margin:0; background:transparent; position:relative;}
#themen-navigator .themen-navigator-item .themen-icon 				{ cursor:pointer; width:90px; height:91px; background:url("../img/bg_themen.gif") left top no-repeat; vertical-align:middle; position:relative; }
#themen-navigator .themen-navigator-item .themen-icon.current 		{ background:url("../img/bg_themen_current.gif") left top no-repeat; }
#themen-navigator .themen-navigator-item .themen-icon.disabled 		{ background:url("../img/bg_themen_disabled.gif") left top no-repeat; }

#themen-navigator .themen-navigator-item .themen-icon-spiel 				{ cursor:pointer; width:90px; height:91px; background:url("../img/bg_themen_spiel.gif") left top no-repeat; vertical-align:middle; position:relative; }
#themen-navigator .themen-navigator-item .themen-icon-spiel.current 		{ background:url("../img/bg_themen_spiel_current.gif") left top no-repeat; }
#themen-navigator .themen-navigator-item .themen-icon-spiel.disabled 		{ background:url("../img/bg_themen_spiel_disabled.gif") left top no-repeat; }

#themen-navigator .themen-navigator-item .themen-icon .themen-icon-image		{ text-align:center; padding:13px; }
#themen-navigator .themen-navigator-item .themen-icon-spiel .themen-icon-image		{ text-align:center; padding:13px; }
.themen-description 		{ position:absolute; top:0; left:0; width:515px; height:91px; background:url("../img/bg_themen_slide.gif") right top no-repeat transparent; }
.themen-description-inner 	{ padding:5px 10px 0 30px; } 



.spiel-list {}
.spiel-list-item {border-bottom:1px solid #ccc; padding-bottom:10px;}
.spiel-list-item h4 { margin:0; padding:10px 0 5px 0;}
.spiel-list-item .spiel-list-item-teaser {}

.sms-list {}
.sms-list-item {border-bottom:1px solid #ccc; padding-bottom:10px;}
.sms-list-item h4 { margin:0; padding:10px 0 5px 0;}
.sms-list-item .spiel-list-item-teaser {}


table.item-joy-info { border-collapse:collapse; margin-bottom:20px; }

table.item-joy-info th { font-weight:bold; }
table.item-joy-info th,
table.item-joy-info td { border:1px solid #ccc; padding:2px 20px 2px 5px; }



table.tableSolid { border-collapse:collapse; }
table.tableSolid th,
table.tableSolid td { border:1px solid #ccc; padding:2px 5px 2px 5px; }

table.tableDotted { border-collapse:collapse; }
table.tableDotted th,
table.tableDotted td { border:1px dotted #ccc; padding:2px 5px 2px 5px; }

table.tableDashed { border-collapse:collapse; }
table.tableDashed th,
table.tableDashed td { border:1px dashed #ccc; padding:2px 5px 2px 5px; }








#visitenkarte { 
	position: absolute; 
	z-index:1000; top:0; 
	text-align:left; 
	font-size:80%; 
	background:url(../img/bg_box_header.gif) repeat-x scroll left bottom #FFD900;
	width:240px; 
}
#visitenkarte .visitenkarte-inner {}
#visitenkarte .visitenkarte-inner h2 {
	background:url(../img/bg_box_header_inv.gif) repeat-x scroll left top #FFD900;
	text-transform:none;
	font-weight:bold;
	font-size:100%;
	color:#000;
	padding:2px 10px 2px 10px;
	margin:0;
	line-height:1.2;
	border-bottom:1px solid #fff; 
}
#visitenkarte .visitenkarte-inner p { 
	padding:5px 10px 5px 10px;
}

.user-visitenkarte { font-weight:bold; cursor:help; }



#page-overlay { cursor:pointer; position: absolute; top:0; left:0; z-index:999; width:100%; height:100%; background:#000; opacity:0.7; filter:alpha(opacity = 70); zoom:1; }

#page-meta-content { 
	text-align:left; 
	font-size:80%; 
	position: absolute; 
	z-index:1000; 
	top:40px; 
	left:0;
	width:480px; 
	height:480px;
	background:#fff; 
	border:5px solid #ebc700;
}
#page-meta-content .page-meta-content-inner { width:100%; height:100%;  background:#fff; overflow:auto; }
#page-meta-content .page-meta-content-inner  .page-meta-content-body { padding:10px; } 




/*
 * Voting Styles
 */
 
.stars {width:87px;height:18px;padding:0;margin:0;background:#fff url("../img/stars_bg.gif") top left no-repeat;}
.stars div {height:18px;padding:0;margin:0;background:transparent url("../img/stars_sel.gif") top left no-repeat;}
.stars div span {visibility:hidden;display:none;}  

#votepopup { 
	text-align:left; 
	font-size:80%; 
	position: absolute; 
	z-index:1000; 
	top:40px; 
	left:0;
	width:280px; 
	height:240px;
	background:#fff; 
	border:5px solid #ebc700;
}
#votepopup .votepopup-inner { width:100%; height:100%;  background:#fff; overflow:auto; }
#votepopup .votepopup-inner  .votepopup-body { padding:10px; } 

table.vote-info { border-collapse:collapse; margin-bottom:20px; width:100%; }
table.vote-info th { border:1px solid #ccc; padding:2px 20px 2px 20px; vertical-align:middle; font-weight:bold; text-align:center;  }
table.vote-info td { border:1px solid #ccc; padding:2px 20px 2px 20px; vertical-align:middle; }