/*

*/

 /* layout, abstand \*/
* {padding: 0; margin: 0;}

html, body { /* hintergrund, schriftart, abstand \*/
 height: 100%;
 margin: 0; /* wichtig für Firefox, IE, Safari & Co */
 padding: 0; /* wichtig für Opera */
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 background: #fff;
 display:block
}
#wrapper {
 width: 939px;
 background-color: #fff;
}


 #links { float: left; width: 163px;  margin:0 }
  #rechts { float: right; width: 470px; margin:0;}
  #mitte { width: 296px; margin: 0 296px 0 168px}

  #rechts_bilder { float: right; width: 546px; margin:0;}
  #mitte_bilder { width: 220px; margin: 0 296px 0 168px}


/* **************** */
/* HEADER */
#header{
width:	939px;
height: 224px;
background: #E0117B url("menu/back_trendpix.jpg") no-repeat;
margin-bottom: 5px;
 }
 
 
.headline{
color: #fff;
background-color:#E0117B;
font-size: 150%;
padding-left: 15px;
margin-left: -6px;
font-weight: bold;
line-height: 24px;
}

.headline_bilder{
color: #fff;
background-color:#E0117B;
font-size: 150%;
padding-left: 15px;
margin-left: -6px;
font-weight: bold;
float: none;
}

#bilder img{
margin: 0px 0px 0px 0px;
border: solid #000 1px;
}

.bilderalben{
width: 458px; /*- 6+6px wegen padding */
background: url("../images/profile_bg.jpg") repeat-x #f3f3f3;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
margin-bottom: 8px;
overflow: hidden;
}

.most_viewed{
width: 458px; /*- 6+6px wegen padding */
background: url("../images/events_bg.png") #F3F3F3 no-repeat;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
margin-bottom: 8px;
overflow: hidden;
}


.bilderalben_eventtext{
width: 458px; /*- 6+6px wegen padding */
background: url("../images/profile_bg.jpg") repeat-x #f3f3f3;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
margin-bottom: 8px;
overflow: hidden;
}

.bilderalben_bilder{
width: 534px; /*- 6+6px wegen padding */
background: url("../images/profile_bg.jpg") repeat-x #f3f3f3 top right;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
}



#rechts .headline{
background-color: #E0117B;
color: #fff;
font-size: 170%;
/* float: left; */
padding-left: 5px;
padding-right: 5px;
margin-left: -5px;
}



.event_headline{
text-transform: uppercase;
color: #BBB;
font-size: 190%;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
margin-left: -6px;
}


#box-notes{
width: 220px;
padding-bottom: 3px;
margin-top: 5px;
background-color: #eee;
overflow:hidden;
color: #fff;
}

#box-notes .headline{
background-color: #fff;
color: #E0117B;
font-size: 150%;
float: left;
padding: 0px 0.3em 0 0.2em;
}

#box-notes-index .headline{
background-color: #fff;
color: #E0117B;
font-size: 150%;
float: left;
padding: 0px 0.3em 0 0.2em;
margin-left: -10px;
text-transform: uppercase;

}

#box-notes-index{
width: 276px; /* 296- padding */
padding: 0 10px 50px 10px;
margin-top: 5px;
background: url("../images/bilder_top_pix.jpg") repeat-y #eee;
overflow:hidden;
color: #fff;
}

#box-notes-index .datum{
text-transform: uppercase;
color: #BEBEBE;
font-size: 120%;
font-weight: bold;
}

#box-notes-index .portlet_units_igh{
background: #444;
float:left;
height:65px;
margin-top:5px;
overflow:hidden;
width:268px;
padding-top: 8px;
padding-left: 8px;
margin-left: -2px;
font-size: 90%;
}

#box-notes-index .portlet_units_igh .date{
font-size: 120%;
}

#box-notes-index .portlet_units_images_igh {
float:left;
padding:3px 10px 3px 3px;
position:relative;
width:50px;
}

#box-notes-index .portlet_units_images_igh img {
border:3px solid #999999;
height:45px;
max-width:45px;
}


/* MISS */

#box-notes-miss{
background: url("../images/bilder_miss_bg.jpg") no-repeat #E0117B top left;
width: 276px; /* 296- padding */
height: 300px;
padding: 0 10px 50px 10px;
margin-top: 5px;
overflow:hidden;
color: #fff;
}

#box-notes-miss .headline{
background-color: #333;
color: #E0117B;
font-size: 150%;
float: left;
padding: 0px 0.3em 0 0.2em;
margin-left: -10px;
}


#box-notes-miss #foto{
width: 296px;
height: 296px;
background-color: none;
padding-left: 0px;
padding-top: 5px; 
} 


/* locationsinfo / google map */
#box-locationinfo{
width: 286px; /* -10 wegen padding-left:10 */
height: 326px;
/* overflow:hidden; */
margin-top: 5px;
background-color: #E0117B;
color: #fff;
padding-left: 10px;
}

#box-locationinfo .headline{
background-color: #fff;
color: #E0117B;
font-size: 150%;
float: left;
padding: 0 0.3em 0 0.2em;
margin-top: -4px;
margin-left: -10px;
}

#box-locationinfo #map{
padding-left: 4px;
padding-bottom: 4px;
}


#box-locationinfo .event_detail_headline3{
text-transform: uppercase;
color: #fff;
font-size: 110%;
font-weight: bold;
margin-left: 0px;
}


.portlet_units
{
  width:470px;
  height:130px;
  float:left;
  margin:3px;
  overflow: hidden;  
  padding-bottom: 5px;
}

.portlet_units:hover
{
  width:450px;
  background: url("../images/bilder_alben_bg_hover.jpg") #E3E3E3;
  padding-bottom: 5px;
}


.portlet_units_images
{
  float:left;
  width:100px;
  padding-right:10px;
  position:relative;
  top:-4px;
  padding:0px 30px 10px 10px;
}

.portlet_units_images img
{
  max-width:100px;
  height:100px;
  border:8px solid #fefefe;
}

.portlet_units_images img:hover
{
  max-width:100px;
  height:100px;
  border:8px solid #E0117B;
}

.links {
	text-align: center;
	background: #E0117B;
	border: none;
	color: #fff;
	width: 80px;
	padding: 5px 0;
	position: absolute;
	bottom: 25px;
	left: 25px;
	display: none;
}
.portlet_units:hover .links {
	display: block;
	}

.golink {
	border: none;
	text-transform: uppercase;
	color: #BBB;
	font-size: 190%;
	font-weight: bold;	
	padding: 5px 0;
	display: none;
}

.portlet_units:hover .golink {
	display: block;
	}


.portlet_units_text
{
color: #999999;
font-size: 90%;
text-decoration: none;
  float:left;
}

.portlet_units a:link,.portlet_units a:visited{
color: #999999;
font-size: 90%;
text-decoration: none;
}

.portlet_units a:hover,.portlet_units a:active{
color: #E0117B;
}




a:link, a:visited{
color: #999999;
font-size: 90%;
text-decoration: none;
}

a:hover, a:active{
color: #E0117B;
}













#links .headline{
color: #fff;
background-color:#E0117B;
font-size: 150%;
padding-left: 18px;
font-weight: bold;
}

#links .orange{
color: #F3F3F3;
}

/*
#links ul a:link,#links ul a:visited{
color: #EF8C15;
font-size: 110%;
text-decoration: none;
width: 164px;
padding-left: 4px;
}

#links ul a:hover,#links ul  a:active{
color: #FF6600;
}



#links ul .tp{
font-size: 120%;
color: #EF8C15;
font-weight: bold;
}
*/

#links ul .my{
font-weight: bold;
}

#links li {
	margin: 0px;
 	padding: 0px;
   	display: block;
  	overflow: hidden;
}
#links li label {
	margin: 0px;
 	padding: 5px 10px 6px 0px;
   	color: #E0117B;
   	text-decoration: none;
   	outline: none;
   	display: block;
  	overflow: hidden;
  	background: #FFFFFF;
}
#links li a {
	margin: 0px;
 	padding: 5px 10px 6px 0px;
   	color: #333333;
   	text-decoration: none;
   	outline: none;
   	display: block;
  	overflow: hidden;
  	background: #FFFFFF;
}
#links li a:hover {
	margin: 0px;
 	padding: 5px 10px 6px 0px;
  	color: #E0117B;
  	text-decoration: none;
  	outline: none;
  	display: block;
  	overflow: hidden;
  	background: #FFFFFF;
}


#links ul {
	margin: 10px 0 15px 0;
 	padding: 0px;
 	width: 163px;
 	height: auto;
 	display: block;
  	overflow: hidden;
  	/*font: 10px Verdana, Arial, sans-serif;*/
  	font-weight: normal;
  	color: #666666;
  	text-transform: uppercase;
  	list-style: none;
}
#links ul li {
	margin: 0px;
 	padding: 0px;
   	display: block;
  	overflow: hidden;
  	border-bottom: 1px solid #FFFFFF;
}
#links ul li a {
	margin: 0px;
 	padding: 5px 10px 5px 10px;
 	background: #F3F3F3 url() center left no-repeat;
   	color: #999999;
   	text-decoration: none;
   	outline: none;
   	display: block;
  	overflow: hidden;
}
#links ul li a:hover {
	margin: 0px;
 	padding: 5px 10px 5px 10px;
	background: #FFFFFF;
  	color: #E0117B;
  	text-decoration: none;
  	outline: none;
  	display: block;
  	overflow: hidden;
}

#links ul li .active {
  	color: #E0117B;
  	padding-left: 5px;
}

















/* overview */

p, li {
	line-height: 1.3em;
}
p a, li a {
	text-decoration: underline;
}

div.controls {
	}


div.ss-controls {
}

div.ss-controls span {
color: #999;
font-size: 90%;
margin-top: -22px;
margin-left: 10px;
}

div.nav-controls {
	margin-top: 10px;
	width: 460px;

}

div.nav-controls a {
	margin-top: 5px;
	padding: 5px;
	text-transform: uppercase;
	color: #BBB;
	font-size: 170%;
	font-weight: bold;
}
div.nav-controls a:hover {
	padding: 5px;
	text-transform: uppercase;
	color: #AAA;
	font-size: 170%;
	font-weight: bold;
}

div.loader {
	background-image: url('loading.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 500px;
	height: 350px
}



div.slideshow {
	clear: both;
}
div.slideshow span.image-wrapper {
	float: none;
	padding-bottom: 12px;
}

div.slideshow span.image-wrapper img {
	max-width: 530px;

}

div.slideshow a.advance-link {
	padding: 0px;
	display: block;
	border: 0px solid #E0117B;
}



div.slideshow img {
	border: none;
	display: block;
}
div.download {
	float: right;
}
div.embox {
	clear: both;
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 12px;
}
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}

div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.navigation {
	/* The navigation style is set by a javascript generated style on the page.
	   This is so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 6px 10px 6px 0;
	list-style: none;
}
ul.thumbs li a {
	padding: 0px;
	display: block;
	border: 6px solid #aaa;
}
ul.thumbs li a:hover {
	padding: 0px;
	display: block;
	border: 6px solid #E0117B;
}
ul.thumbs li.selected a {
	background: #E0117B;
	border: 6px solid #E0117B;
}
ul.thumbs a:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {
	clear: both;
}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination strong {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 2px 5px 2px 5px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #E0117B;
	text-decoration: none;
	color: #fff;
}
div.pagination strong {
	background-color: #E0117B;
}








/* ////// TRAILER alt ///// */
				  				  
/*
	PAGE STRUCTURE
*/
#trailer 									{ width: 470px; height: 340px; }
#page-wrap 									{ width: 470px; margin: 1px auto; position: relative; height: 340px;
											  background: url(../images/trailer/bg.png) #000 top center; color: #E0117B; }


/*
	TYPOGRAPHY
*/
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; 
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider-wrap								{ width: 460px; position: absolute; top: 5px; left: 5px; }			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0 15px 0 30px; color:E0117B;}
.stripViewer								{ position: relative; overflow: hidden; width: 460px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 280px; position: relative; width: 470px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{  margin: -43px 0 0 62px; }
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(../images/trailer/transpBlack.png); padding: 10px; height: 30px; 
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px; 
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 								{ background: transparent url(../images/trailer/icon-uparrowsmallwhite.png) top center no-repeat; }



/* ////// TRAILER ///// */


.container {
	overflow: hidden;
	width: 640px;
	
}
#main {
	padding: 0px;
	background: #333;
	border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
	width: 460px; height: 280px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #000;
}
.main_image h2 {
	font-size: 13px;
	font-weight: normal;
	margin: 0 0 5px;	padding: 10px;
	padding-bottom: 4px;
}
.main_image p {
	font-size: 11px;
	padding: 10px;	margin: 0;
	line-height: 1.6em;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(http://www.sohtanaka.com/web-design/examples/image-rotator/icon_calendar.gif) no-repeat 0 center; 
	font-size: 10px; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #E2007A;
	border-top: 2px solid #fff;
}
.main_image a.collapse {
	background: url(http://www.sohtanaka.com/web-design/examples/image-rotator/btn_collapse.gif) no-repeat left top;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 160px;
	background: #f0f0f0;
}
.image_thumb img {
	border: 1px solid #ccc; 
	padding: 5px; 
	background: #fff; 
	float: left;	
	display: none;

}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0; padding: 12px 10px;
	background: #333 url(http://www.sohtanaka.com/web-design/examples/image-rotator/nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 16px; 
	margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{display: none;}












/* Bilderüberischt Startseite */
/* root element for the whole scrollable setup */
div.scrollable {  
	position:relative;
	overflow:hidden;
	width: 470px;	 
	height:200px;	
}

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs {	
	position:absolute;
	width:20000em;	
	clear:both;
	border:1px solid #222;
}

/* custom positioning for navigational links */
 a.next {
	margin-top:-1190px;	
}
a.prev {
	
	margin-top:-1110px;	
}


/* single item */
#thumbs div {
	float:left;
	width:160px;
	height:200px;
	background:#333 /*url(style/bg_bilder_start.png)*/ repeat-x 0 146px;
	color:#fff;
	border-left:1px solid #333;
	cursor:pointer;
}

/* style when mouse is over the item */
#thumbs div.hover {
	background-color:#444;	
}

/* style when element is active (clicked) */
#thumbs div.active {
	background-color:#333;
	cursor:default;
}

#thumbs h3, #thumbs span {
	margin:10px;		
	font-family: Arial, Verdana;
	font-size:11px;
	color:#fff;	
}

#thumbs p {

	margin-left:10px;
}

#thumbs h3 em {
	font-size: 10px;
	font-style:normal;
	color:#E0117B;
}

.anzahl {
	color: #E0117B;
}

#thumbs img {
   width:130px;
   height:100px;
   overflow:hidden;
	border: 3px;
}



/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;		
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	padding-bottom: 43px;
	margin-left: 10px;
	margin-top: 43px;
	display:block;
	width: 200px;
	height: 18px;
	/*background:url(/img/scrollable_left.png) no-repeat;*/
	float:left;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/arrow/right.png);
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:230px;
	margin-top: -17px;
	width:200px;
	height:20px;
	}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(scrollable_navigator.png) 0 0 no-repeat;     
	cursor:pointer;	
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


/* Login */
#login_index{
position: absolute;
top: 230px;
left: 480px;
width: 459px;
height: 160px;
background: url(../style/img/login.jpg) no-repeat;
}

#login_index_drin{
position: absolute;
top: 230px;
left: 480px;
width: 459px;
height: 160px;
background: url(../style/img/login_logged.jpg) no-repeat;
}


.loginfeld {
font-family:Arial;
color:#BF0000;
font-size:12px;
border: 1px solid #E06060;
background-color:#FFFFFF;
height:10px;
width:70px;
padding:2px;
float: left;
}


input { /* Alle Labels UND Formularelemente auswählen */
  width: 80px; /* Breite.*/
  border: 1px solid #999;
  padding: 1px;
  margin-top: 4px; 
  background-color: #fff;
}

form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: left; /* das floating der labels und inputs aufheben */
}


.gggg{color: de2;}

#login_index form{
  background: #none;
  margin:0;
  padding-left: 141px;
  padding-top: 42px;
  color: #fff;
  font-size: 10px;
width: 450px;
height: 158px;
}


form.awesome span.wrap 
    { position: relative;
    	padding-top: 4px;
	}
	form.awesome span.wrap label	 
    { position: absolute; 
      left: 4px; 
      top: -2px; 
      font-size: 14px; 
      font-weight: normal; 
      width: 70px; height: 20px; 
      background: #E0117B; 
      opacity: 0.9; 
      -webkit-border-radius: 2px; 
      -moz-border-radius: 2px; 
      z-index: 1; 
      line-height: 22px; }
form.awesome span.wrap label span 
    { position: relative; 
      top: 1px; 
      left: 1px; }
form.awesome input.input-text 
    { font-size: 14px; 
      padding: 4px 5px;  
      background: none; 
      position: relative;
      width: 70px;
      color: #fff;
	  z-index: 10; }
	
label.overlay span 
    { color: #000;
    opacity: 0.2; 
      -webkit-transition: opacity 200ms linear; }


  input#submit { /* den Submit-Button */
  padding-bottom: 4px;
  float: none;
  width: 140px;
  height: 20px;
  }







/* tabs */

#tabs_index{
position: absolute;
left: 480px;
width: 462px;
}


#tabs_index_events{
left:480px;
position:absolute;
width:462px;
}

/* FREUNDE */
#box-freunde{
width: 435px;
height:  210px;
overflow:hidden;
margin-top: 5px;
background: url("../images/profile_box_mitte_01.jpg") no-repeat #f3f3f3;
}

#box-freunde #bilder-freunde-box{
padding-top: 6px;
padding-left: 10px;
}

#box-freunde .freundbild{
float: left;
padding-left: 4px;
padding-bottom: 4px;
}



.alle{
color: #E0117B;
font-size: 100%;
float: right;
margin-left: -15px;
padding: 0.3em 0.3em 0em 0.4em;
text-transform: uppercase;
}

.alle a:link,.alle a:visited{
color: #78;
text-decoration: none;
}

.alle a:hover,.alle a:active{
color: #999999;
}




/* blogs */
#box_book, #box_book:hover {
width: 215px;
float: left;
}




.book{
width: 210px;
padding-top: 5px;
float: left;
}

.book .userbild{
float: left;
padding-left: 14px;
}

.book .box-text{
background-color:#E0117B;
min-height: 100px; 
margin-top: 5px;
margin-left: 24px;
padding-top: 5px;
padding-left: 4px;
padding-right: 4px;
width: 122px;
padding-bottom: 6px;
}


		.blockquote {
			background: #000;
			position: relative;
		}

		.book .box-text .arrow {
			 width: 0;
			height: 0;
			line-height: 0;
			border-top: 22px solid #E0117B;
			border-right: none;
			border-left: 19px solid #000;
			position: absolute;
			top: 17px;
			left: -19px;
		}


.blockquote-status {
			background: #000;
			position: relative;
			margin-left: 10px;
			height: 17px; 
			padding-left: 10px;
			color: #EF8C15;
			line-height: 22px;
			font-size: 120%;
			font-weight: bold;
			width: 200px; 
		}

.arrow-status {
			 width: 0;
			height: 0;
			line-height: 0;
			border-top: 15px solid #e3e3e3;
			border-right: none;
			border-left: 19px solid #F3F3F3;
			position: absolute;
			top: 4px;
			left: -20px;
		}


.book .text{
font-size: 70%;
color: #fff;
}


.book .title{
font-size: 80%;
color: #000;
font-weight: bold;
}




li div:hover, 
li div.selected, 
li div.over, 
li div.selectedover {
background-color:#000;
}

li div ul {
background:#000 none repeat scroll 0%;
}















/*  Tags */

#tags_index {
clear: both;
padding: 4px;
margin-top: 5px;
margin-left: 0px;
background-color: #333;
}