/* standard tags */
html, body {
	height:auto !important; /* FF and compliant browsers should automatically size the body/html */
	height:100%; /* ie will set the body/html to 100%, anything overflowing that will (incorrectly) resize it. go IE */
	min-height:100%; /* when FF/etc automatically size the body/html it should be AT LEAST the height of the entire browser window, but can expand based on content. */
}
form{
	display: inline;
}
a{
	cursor: pointer;
}
img, div, .pngfix, input { behavior: url("css/iepngfix.htc") }
img{
	border: 0px;
}
body {
    text-align: center;
	background-color: #232122;
	background-image: url(images/body_bg.gif);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
}

/* container and outer borders */
#container {
	width: 1097px;
	background-image: url(images/container_bg.gif);
	background-repeat: repeat-y;
	margin:0 auto;
}
#leftbgbar {
	float: left;
	width: 33px;
	margin: 0;
	padding: 0;
	background-image: url(images/border_bg_left.gif);
	background-repeat: y-repeat;
	height: 800px;
}
#rightbgbar {
	float: left;
	width: 33px;
	margin: 0;
	padding: 0;
	background-image: url(images/border_bg_right.gif);
	background-repeat: y-repeat;
	height: 800px;
}
#innercontainer {
	width: 1031px;
	float: left;
	background-color: #151515;
    min-height: 100%;
    height: auto;
}
#centerarea{
	clear: both;
}
#content {
	float: left;
	background-color: #151515;
	padding: 0;
	width: 639px;
	height:100%;
	text-align:left;
}
#content .singularcontent{
	padding: 20px;
	/*background-color:#EEEEEE;*/
	color: #AAAAAA;
}
#rightbar {
	float: left;
	width: 180px;
	margin: 0;
	padding: 0px 0px 0px 0px;
	height:100%;
	text-align: center;
}
#rightbar img.banner{
	border: 1px solid #FFFFFF;
}

#footer{
	clear: both;
	background-color: #666666;
	padding: 5px;
}a:link,a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
a:hover,a:active{
	text-decoration: underline;
}
#header {
	font-size: 10px;
}
#header div.logo{
	padding: 5px 25px 10px 25px;
	display: inline;
	float: left;
}
#header div.banner{
	padding-left: 23px;
	background-image:url(images/anzeige.gif);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-color: #333333;
	display: inline;
	float: left;
	height: 100px;
}
#header div#navbar{
	padding: 0px;
	background-color: #FFFFFF;
	margin: 5px 10px 10px 10px;
	height: 28px;
	background-image: url(images/topnav_bg_center.png);
	background-repeat: repeat-x;
}
#header div#navbar .leftborder{
	background-image: url(images/topnav_bg_left.png);
	height: 28px;
	width: 6px;
	float: left;
}
#header div#navbar .centerdiv{
	background-image: url(images/topnav_btn_front_left.png);
	height: 28px;
	width: 6px;
	float: right;
	font-weight: bold;
}
#header div#navbar .rightborder{
	background-image: url(images/topnav_bg_right.png);
	height: 28px;
	width: 6px;
	float: right;
}

#header div#navbar .title{
	float: left;
	font-size: 9px;
	color: #000000;
	padding: 5px 10px 0px 5px;
	text-transform: uppercase;
}
#header div#navbar .link .left{
	float: left;
	height: 28px;
	width: 5px;
	background-image: url(images/topnav_btn_back_left.png);
	background-repeat:no-repeat;
}
#header div#navbar .link .center{
	float: left;
	height: 25px;
	padding: 3px 5px 0px 5px;
	background-image: url(images/topnav_btn_back_center.png);
	background-repeat: repeat-x;
	text-align: center;
	text-transform: uppercase;
	font-size: 13px;
}
#header div#navbar .link .right{
	float: left;
	height: 28px;
	width: 5px;
	background-image: url(images/topnav_btn_back_right.png);
	background-repeat:no-repeat;
}
#header div#navbar .front .left{
	width: 8px;
	background-image: url(images/topnav_btn_front_left.png);
}
#header div#navbar .front .center{
	background-image: url(images/topnav_btn_front_center.png);
	padding-top: 2px;
}
#header div#navbar .front .right{
	width: 8px;
	background-image: url(images/topnav_btn_front_right.png);
}

#header div#navbar #style_select_top{
	float: right;
	color: #333333;
	font-size: 11px;
	padding: 4px 5px 0px 5px;
	height: 25px;
	background-image: url(images/topnav_btn_front_center.png);
	background-repeat: repeat-x;
}
#header div#navbar #loginform_top{
	float: right;
	color: #333333;
	font-size: 11px;
	padding: 4px 5px 0px 5px;
	height: 25px;
	background-image: url(images/topnav_btn_front_center.png);
	background-repeat: repeat-x;
}
#header div#navbar #search_top{
	padding-left: 10px;
	float: right;
	color: #333333;
	font-size: 11px;
	padding: 4px 5px 0px 5px;
	height: 25px;
	background-image: url(images/topnav_btn_front_center.png);
	background-repeat: repeat-x;
}
#header div#navbar a:link, #header div#navbar a:visited{
	color: #A1A1A1;
	text-decoration: none;
}
#header div#navbar a:hover, #header div#navbar a:active{
	color: #C5C5C5;
	text-decoration: none;
}
#header input{
	font-size: 10px;
}#leftbar {
	float: left;
	width: 212px;
	margin: 0;
	height:100%;
}
#leftbar .navigation{
	margin-top: 10px;
	clear: both;
}
#leftbar .navigation .navelement{
	display: block;
	clear: both;
	text-align: left;
	border-bottom: 1px solid #666666;
	padding: 3px 0px 3px 0px;
	margin: 0px 10px 0px 10px;
}
#leftbar img.icon{
	display: inline;
	float: left;
	margin-right: 5px;
}

#leftbar .subnavmenu .navelement{
	background-color: #4c7e3a;
	clear: none;
	border: none;
	cursor: pointer;
}
#leftbar .subnavicon{
	float: right;
	padding-right: 5px;
	display: block;
}
#leftbar .subnavcontainer{
	left: 190px;
	top: -30px;
	display: block;
	visibility: hidden;
	position: relative;
	display: inline-block;
	width: 190px;
}
#leftbar .subnavigation{
	padding: 15px;
	background-color: #4c7e3a;
	position: absolute;
	display: block;
	top: 0px;
	left: 0px;
	width: 190px;
}

#leftbar .element{
	padding: 0px 10px 0px 10px;
	margin-bottom: 15px;
}
#leftbar .element .top{
	height: 26px;
	background-image:url(images/leftbar_bg_top.gif);
	padding: 2px 15px 0px 15px;
	font-size: 12px;
	color: #CCCCCC;
	font-weight: bold;
	text-align: left;
}
#leftbar .element .topsmall{
	height: 17px;
	background-image:url(images/leftbar_bg_top_small.gif);
	padding: 0px;
}
#leftbar .element .middle{
	padding: 0px;
	background-image:url(images/leftbar_bg_middle.gif);
	background-repeat: repeat-y;
	background-color:#5E5E5F;
	color: #CCCCCC;
}
#leftbar .element .middle .title{
	font-size: 18px;
	font-weight: bold;
}
#leftbar .element .middle .headline{
	font-size: 14px;
}
#leftbar .element .middle .flashcontent{
	padding-top: 15px;
}
#leftbar .element .bottom{
	height: 16px;
	background-image:url(images/leftbar_bg_bottom.gif);
	padding: 0px;
}
#leftbar .element#profilenavi .top{
	height: 81px;
	background-image:url(images/player_bg_top.png);
	padding: 10px 0px 0px 9px;
	font-size: 12px;
	color: #CCCCCC;
	font-weight: bold;
	text-align: left;
	width: 182px;
}
#leftbar .element#profilenavi .top .viewedit{
	float: left;
	display: inline;
}
#leftbar .element#profilenavi .top .content{
	font-size: 10px;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 5px;
}
#leftbar .element#profilenavi .top .content img{
	float: left;
	display: inline;
	padding-right: 10px;
}
#leftbar .element#profilenavi .middle{
	padding: 5px 0px 0px 0px;
	background-image:url(images/player_bg_middle.png);
	background-repeat: repeat-y;
	color: #CCCCCC;
	margin: 0px;
}
#leftbar .element#profilenavi .bottom{
	height: 13px;
	background-image:url(images/player_bg_bottom.png);
	padding: 0px;
	margin: 0px;
}
#leftnavbuttons a.small{
	height: 25px;
	width: 96px;
	display: block;
	padding: 9px 20px 0px 60px;
	text-align: left;
	color: #CCC;
	font-size: 12px;
	font-weight: bold;
}
#leftnavbuttons a.large{
	height: 39px;
	width: 96px;
	display: block;
	padding: 9px 20px 0px 60px;
	text-align: left;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}
#leftbar .element#leftnavbuttons .top{
	height: 13px;
	background-image:url(images/player_bg_top_nogradient.png);
	padding: 0px;
	margin: 0px;
}
#leftbar .element#leftnavbuttons .middle{
	padding: 5px 7px 0px 7px;
	background-image:url(images/playerelement_bg_middle.gif);
	background-repeat: repeat-y;
	color: #CCCCCC;
	margin: 0px;
}
#leftbar .element#leftnavbuttons .bottom{
	height: 13px;
	background-image:url(images/player_bg_bottom.png);
	padding: 0px;
	margin: 0px;
}#modalelement{
	width: 629px;
}
#modalelement div.top{
	height: 34px;
	background-image:url(images/modal_top.png);
	background-repeat: no-repeat;
}
#modalelement div.top .title{
	text-transform: uppercase;
	padding-top: 2px;
	font-weight: bold;
}
#modalelement div.top .closer{
	float: right;
	display: inline;
	cursor: pointer;
	height: 16px;
	width: 16px;
	margin-top: 2px;
	margin-right: 10px;
	background-image: url(images/closebox.png);
}
#modalelement div.middle{
	padding: 0px 20px 0px 20px;
	background-image:url(images/modal_middle.png);
	background-repeat:repeat-y;
	overflow: hidden;
	color: #CCCCCC;
}
#modalelement div.bottom{
	height: 25px;
	background-image:url(images/modal_bottom.png);
	background-repeat: no-repeat;
	padding: 0px;
}

#alertelement{
	width: 345px;
}
#alertelement div.top{
	height: 34px;
	background-image:url(images/alert_top.png);
	background-repeat: no-repeat;
}
#alertelement div.top .title{
	text-transform: uppercase;
	padding-top: 2px;
	font-weight: bold;
}
#alertelement div.top .closer{
	float: right;
	display: inline;
	cursor: pointer;
	height: 16px;
	width: 16px;
	margin-top: 2px;
	margin-right: 10px;
	background-image: url(images/closebox.png);
}
#alertelement div.middle{
	padding: 0px 20px 0px 20px;
	background-image:url(images/alert_middle.png);
	background-repeat:repeat-y;
	overflow: hidden;
	color: #CCCCCC;
}
#alertelement div.bottom{
	height: 25px;
	background-image:url(images/alert_bottom.png);
	background-repeat: no-repeat;
	padding: 0px;
}
#friendChecklist .element{
	margin: 5px;
	background-color: #777;
	padding: 5px;
	text-align: left;
}
#friendChecklist .element img{
	float: left;
	padding-right: 10px;
}#splasharea{
	background-image: url(images/front_bg.png);
	width: 639px;
	height: 330px;
	margin:auto;
	background-repeat: no-repeat;
}
#splasharea .menu{
	padding-top: 165px;
	height: 30px;
	text-align: center;
}
#splasharea .styles{
	height: 31px;
	padding-top: 8px;
	text-align: center;
	background-image: url(images/splash_ribbon.png);
	background-repeat: repeat-x;
}
#splasharea .icons{
	padding-top: 15px;
	text-align: center;
	margin: auto;
	width: 570px;
}
#splasharea .icons .icon{
	display: inline;
	float: left;
	width: 50px;
	text-align: center;
	text-transform:uppercase;
	font-size: 9px;
	padding: 5px;
}
#splasharea .icons .icon .iconcontainer{
	background-image: url("images/homesite_btn_out.png");
	background-repeat: no-repeat;
	width: 40px;
	height: 37px;
	padding: 5px;
	cursor: pointer;
	margin: auto;
	margin-bottom: 5px;
}
.clearer{
	clear: both;
}
.small{
font-size: 9px;	
}
#loading {
    background: white;
    padding: 20px;
    border: 2px solid #999;
    display: none; /* hidden */
    position: absolute;    
    left: 50%;
    margin-left: -100px;
    top: 25%;
    width: 200px;
    /*height: 100px;*/
        /*margin-top: -50;*/
    font-weight: normal;
    font-size: 14px;
}
.profiletip{
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	padding: 7px;
	opacity: .8;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	width: 250px;
	
}
.profiletip .tip-title      	{ color:#666666; font-weight:bold; font-size: 14px; text-transform: capitalize }  
.profiletip .tip-text       	{ color:#000000;
 }
 
 .paginationcontainer{
	background-color: #333;
	padding: 3px;
	margin-bottom: 10px;
 }
 .paginationcontainer .text{
	float: left;
	margin-right: 10px;
	padding: 5px;
 }
 .paginationcontainer .pages{
	float: left;
	padding: 2px;
 }
 .paginationcontainer .pages .el{
	display: inline;
	float: left;
	padding: 2px;
	width: 15px;
	text-align: center;
	background-color: #666;
	margin-left: 5px;
 }
  .paginationcontainer .pages .active{
	background-color: #000;
 }
 
#friendChecklist{
	height: 250px;
	width: 400px;
	margin: auto;
	overflow: auto;
}
#twitterbox{
	padding: 10px;
}
#twitterbox .link{
	font-weight: bold;
	font-size: 12px;
}
#elementcontainer{
	padding: 4px;
}
#elementcontainer .bandname{
	font-size: 32px;
	line-height: 30px;
	padding: 5px;
	font-family: Arial Black, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
	text-transform: uppercase;
}
#elementcontainer .profiletype{
	font-size: 12px;
	padding: 5px;
	font-family: Arial Black, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}
#elementcontainer .bandname img.icon{
	float: left;
	display: inline;
	padding-right: 5px;
	vertical-align: baseline;
}
#elementcontainer div.element{
	margin-bottom: 15px;
}
#elementcontainer div.element div.top{
	height: 28px;
	background-image:url(images/element_bg_top.png);
	background-repeat: no-repeat;
}
#elementcontainer div.element div.middle{
	padding: 0px 20px 0px 20px;
	background-image:url(images/element_bg_middle.png);
	background-repeat:repeat-y;
	overflow: hidden;
	color: #CCCCCC;
}
#elementcontainer div.element div.bottom{
	height: 21px;
	background-image:url(images/element_bg_bottom.png);
	background-repeat: no-repeat;
	padding: 0px;
}
#elementcontainer div.element .title{
	padding: 2px 15px 0px 15px;
	font-size: 12px;
	color: #CCCCCC;
	font-weight: bold;
	text-transform:uppercase;
}
#elementcontainer div.element .title small{
	font-size: 12px;
	font-weight: normal;
	padding-left: 10px;
}
#elementcontainer div.element .title img.icon{
	float: right;
	display: inline;
	padding-left: 2px;
	padding-top: 2px;
	cursor: pointer;
}
#elementcontainer div.element .top .edit .handle{
	float: right;
	display: inline;
	cursor: move;
}
#elementcontainer div.element .top .edit .button{
	float: right;
	display: inline;
	margin-right: 15px;
}
#elementcontainer div.element .bottom div.delete{
	float: right;
	display: inline;
	position: relative;
	left: 2px;
	top: 3px;
}
#elementcontainer div.element img.resizer{
	position: relative;
	top: 16px;
	left: 280px;
	cursor: pointer;
}
.profileimg{
	float: left;
	display: inline;
	padding: 2px;
}
/* BLOG */
td.blogdate{
	background-color: #414141;
	color: #7C7C7C;
	font-size: 12px;
	font-weight: bold;
}
td.blogtitle{
	background-color: #414141;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: bold;
}

/* VIDEOS */
.video{
	display: inline; float:left; padding-right: 20px; padding-bottom: 10px;
}

/* GALLERY */
#gallery_mainimage{
	float: left;
	margin-right: 5px;
	overflow: hidden;
	width: 169px;
	height: 112px;
}
#gallery_thumbs{
	float: left;
	margin-left: 5px;
}
#gallery_thumbs img{
	float: left;
	margin-left: 2px;
	margin-bottom: 2px;
}
/* EVENTS */

#eventbox{
	text-align: left;
}
#eventbox .eventimage{
	display: inline;
	float: left;
	padding-right: 10px;
	padding-bottom: 10px;
}
#eventbox .infos{
	display: inline;
	float: left;
	width: 230px;
}
#eventbox .infos .date{
	font-size: 18px;
	font-weight: bold;
}
#eventbox .infos .venue{
	font-size: 14px;
}
#eventbox .infos .eventtitle{
	font-size: 20px;
	font-weight: bold;
}


/* SONGVIEW */

#songbox{
	text-align: left;
}
#songbox .top{
	background-image: url(../images/songcontest/detail_header.jpg) !important;
	height: 167px !important;
}
#songbox .middle{
	background-image: none !important;
	background-color:#b3b7c3 !important;
	width: 588px;
}
#songbox .bottom{
	background-image: url(../images/songcontest/detail_footer.jpg) !important;
	height: 17px !important;
}
#songbox .songimage{
	display: inline;
	float: left;
	padding-right: 10px;
	padding-bottom: 10px;
}
#songbox .songimage img{
	border: 2px solid #FFF;
}
#songbox .infos{
	display: inline;
	float: left;
	width: 230px;
	color: #000;
}
#songbox .infos .bandtitle{
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
	text-transform: uppercase;
}
#songbox .infos .artist{
	font-size: 22px;
	font-weight: bold;
}
#songbox .infos .songtitle{
	font-size: 22px;
}
#songbox .infos .label{
	font-size: 12px;
	color: #FFF;
	padding-top: 10px;
	font-weight: bold;
}
#songbox .infos .content{
	font-size: 16px;
	font-weight: bold;
}
#songbox .infos .btn{
	background-image: url(../images/songcontest/btn.png);
	width: 41px;
	height: 15px;
	text-align: center;
	float: left;
	padding-top: 3px;
	font-size: 10px;
}
#songbox .infos a:link, #songbox .infos a:visited, #songbox .infos a:hover, #songbox .infos a:active{
	color: #000;
}


div.elementcellheader{
	margin-bottom: 5px;
	border-top: 2px solid #555555;
	border-bottom: 2px solid #555555;
	color: #333333;
	font-weight: bold;
}
div.elementcell .label{
	color: #333333;
}

div.elementcell{
	background-color: #7B7B7B;
	padding: 5px;
	margin-bottom: 10px; 
	clear: both;
}
div.elementcell .cellimage{
	float:left;
	margin-right: 10px;
}
div.elementcell .celltitle{
	font-size: 14px;
	font-weight: bold;
	font-color: #FFFFFF;
}
div.elementcell .cellfooter{
	font-size: 11px;
	font-style:italic;
	text-align: right;
	clear: both;
}

#generalinfo{
	padding: 5px 20px 5px 20px;	
}


#contest_voting{
	background-image: url(../images/contest/vote_bg_1.png);
	width: 628px;
	height: 38px;
}
#contest_voting .contest_button{
	float: left;
	padding-left: 10px;
	padding-top: 0px;
}
#contest_voting .vote_button img{
	padding-left: 50px;
	padding-top: 4px;
}ul.autocompleter-choices
{
	margin:					0;
	padding:				0;
	list-style:				none;
	border:					1px solid #7c7c7c;
	border-left-color:		#c3c3c3;
	border-right-color:		#c3c3c3;
	border-bottom-color:	#ddd;
	background-color:		#fff;
	text-align:				left;
	font-family:			Verdana, Geneva, Arial, Helvetica, sans-serif;
	z-index:				50;
	background-color:		#fff;
}

ul.autocompleter-choices li
{
	position:				relative;
	margin:					0px
	padding:				2px;
	float:					none !important; 
	cursor:					pointer;
	font-weight:			normal;
	white-space:			nowrap;
	color:	#999999;
	border-bottom: 1px solid #999999;
}

ul.autocompleter-choices li img{
	padding-right: 10px;
}

ul.autocompleter-choices li.autocompleter-selected
{
	background-color:		#444;
	color:					#fff;
}

ul.autocompleter-choices span.autocompleter-queried
{
	display:				inline;
	float:					none;
	font-weight:			bold;
	margin:					0;
	padding:				0;
}

ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried
{
	color:					#9FCFFF;
}/* CSS Document */
#leftbar .element#calendar .top{
	height: 29px;
	background-image:url(images/calendar_bg_top.png);
	padding: 2px 15px 0px 15px;
	font-size: 12px;
	color: #CCCCCC;
	font-weight: bold;
	text-align: left;
	width: 162px;
}
#leftbar .element#calendar .middle{
	padding: 5px 7px 0px 7px;
	background-image:url(images/calendar_bg_middle.png);
	background-repeat: repeat-y;
	color: #CCCCCC;
	margin: 0px;
}
#leftbar .element#calendar .bottom{
	height: 13px;
	background-image:url(images/calendar_bg_bottom.png);
	padding: 0px;
	margin: 0px;
}

#calendarcontainer{
	padding: 5px;
	height: 136px;
	position: relative;
}

  /***************/
 /* vlaCalendar */
/***************/

/* Picker */

.vlaCalendarPicker {
	position: absolute;
	z-index: 999;
	
	margin-top: -5px;
	margin-left: -2px;
	
	display: none;
}

.vlaCalendarPicker .pickerBackground {
	background: transparent url('calendar/calendar_background.png') no-repeat top center;
	padding: 16px;
	height: 130px;
	width: 166px;
	overflow: hidden;
}

/* Background for IE6 - code does not validate as it is a hack */
*html .vlaCalendarPicker .pickerBackground {
	background-image: url('calendar/calendar_background.gif');
}

/* Main calendar */

.vlaCalendar, .vlaCalendar table {
	font-family: calibri, arial !important;
	color: #FFFFFF;
	font-size: 12px !important;
}

.vlaCalendar {
	display: block;
	width: 164px;
}
.vlaCalendar .container, .vlaCalendar .container div {
	width: 164px;
	height: 130px;
	text-align: left;
	position: absolute;
	overflow: hidden;
	left: 0px;
}

.vlaCalendar span.indication {
	display: block;
	text-align: center;
}

.vlaCalendar table {
	margin-top: 8px;
	text-align: right;
	border-collapse: collapse;
	 /*background-color: white; <- IE ugly text in transition fix  */
}

.vlaCalendar .picker td {
	cursor: pointer;
}

/* Label & arrows */

.vlaCalendar .label:hover {
	color: #0066cc;
	cursor: pointer;
}
.vlaCalendar .noHover:hover {
	color: black;
	cursor: default;
}

.vlaCalendar .arrowLeft, .vlaCalendar .arrowRight {
	background: transparent url('calendar/arrowleft.gif') no-repeat center;
	height: 12px;
	width: 10px;
	cursor: pointer;
}
.vlaCalendar .arrowLeft {
	margin-left: 5px;
	float: left;
}
.vlaCalendar .arrowLeft:hover {
	background-image: url('calendar/arrowleft_hover.gif');
}
.vlaCalendar .arrowRight {
	margin-right: 5px;
	float: right;
	background-image: url('calendar/arrowright.gif');
}
.vlaCalendar .arrowRight:hover {
	background-image: url('calendar/arrowright_hover.gif');
}

/* Month */

.vlaCalendar .month th {
	text-align: center;
	font-weight: normal;
	width: 24px;
	padding-bottom: 1px;
	border-bottom: 1px solid #f5f5f5;
}

.vlaCalendar .month td {
	padding-right: 3px;
	height: 15px;
}

.vlaCalendar .month tr.firstRow td {
	padding-top: 2px;
}

.vlaCalendar .month td:hover {
	background: url('calendar/day_hover.gif') bottom no-repeat;
	color: #000000;
}

.vlaCalendar .month td.selected {
	background: url('calendar/day_selected.gif') bottom no-repeat;
	color: #000000;
}
.vlaCalendar .month td.selected:hover {
	background-image: url('calendar/day_selected_hover.gif');
}

.vlaCalendar .month td.outsideDay {
	color: #a8a8a8;
}
.vlaCalendar .month td.outsideDay:hover {
	color: #b1c5fc;
}

/* Year & decade */

.vlaCalendar .year {
	margin-left: 2px;
}

.vlaCalendar .year td {
	width: 40px;
	height: 35px;
	text-align: center;
	cursor: pointer;
}
.vlaCalendar .year td:hover {
	background: url('calendar/month_hover.gif') center no-repeat;
	color: #0066cc;
}

.vlaCalendar .year td.selected {
	background: url('calendar/month_selected.gif') center no-repeat;
}
.vlaCalendar .year td.selected:hover {
	background-image: url('calendar/month_selected_hover.gif');
}

.vlaCalendar .year td.current {
	background: url('calendar/month_current.gif') center no-repeat;
	color: #0066cc;
}
.vlaCalendar .year td.current:hover {
	background-image: url('calendar/month_current_hover.gif');
}

.vlaCalendar .year td.selectedcurrent {
	background: url('calendar/month_selectedcurrent.gif') center no-repeat;
}
.vlaCalendar .year td.selectedcurrent:hover {
	background-image: url('calendar/month_selectedcurrent_hover.gif');
}

.vlaCalendar .year td.outsideYear {
	color: #a8a8a8;
}
.vlaCalendar .year td.outsideYear:hover {
	color: #b1c5fc;
}/* CSS Document */
#leftbar .element#player .top{
	height: 125px;
	background-image:url(images/player_bg_top.png);
	padding: 2px 15px 0px 15px;
	font-size: 12px;
	color: #CCCCCC;
	font-weight: bold;
	text-align: left;
	width: 162px;
}
#leftbar .element#player .middle{
	padding: 5px 7px 0px 7px;
	background-image:url(images/playerelement_bg_middle.gif);
	background-repeat: repeat-y;
	color: #CCCCCC;
	margin: 0px;
}
#leftbar .element#player .bottom{
	height: 13px;
	background-image:url(images/player_bg_bottom.png);
	padding: 0px;
	margin: 0px;
}
#playerdisplaytop{
	background-image:url(images/player_display_bg_top.png);
	height: 7px;
}
#playerdisplaymiddle{
	background-image:url(images/player_display_bg_middle.png);
	background-repeat: repeat-y;
	text-align: left;
	font-size: 9px;
	padding-left: 10px;
	color: #333333;
}
#playerdisplaybottom{
	background-image:url(images/player_display_bg_bottom.png);
	height: 9px;
}

#timedisplay{
	float: left;
	border-right: 1px solid;
	height: 22px;
	padding-right: 3px;
}
#infodisplay{
	width: 120px;
	height: 20px;
	float: left;
	margin-left: 3px;
	text-transform: uppercase;
	overflow: hidden;
	position: relative;
}
#infoartisttitle{
	display: block;
	position: absolute;
	white-space:nowrap;
}
#infostyle{
	margin-top: 10px;
	text-transform: none;
}

#posSliderContainer{
	width: 176px;
	height: 14px;
	background-image:url(images/player_slider_bg.png);
	background-repeat:no-repeat;
	background-position:center;
	text-align: left;
}
#posKnob{
	width: 30px;
	height: 14px;
	position: relative;
	cursor: pointer;
}
#playersonglist{
	background-color: #111111;
	padding: 3px;
	margin-top: 5px;
	max-height: 200px;
	overflow: auto;
}
#playersonglist .song{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin-bottom: 2px;
	background-color: #5f5f5f;
	font-size: 8px;
	text-align: left;
	padding: 3px;
	border: 1px solid #525252;
	text-transform: uppercase;
	cursor: pointer;
}
#playersonglist .song .votings{
	width: 20px;
	background-color: #999999;
	display: inline;
	float: right;
	text-align: left;
	color: #000000;
	padding: 0px 0px 0px 3px;
	visibility: hidden;
}
.playerbtn{
	display: inline;
}
#playercontrolcontainer{
	width: 177px;
}
#playerimage{
	float: left;
	display: inline;
	width: 100px;
}
#playercontrols{
	float: left;
	display: inline;
	width: 56px;
	margin-left: 5px;
}
#playercontrols div.button{
	float: left;
	display: inline;
}/* CSS Document */
#elementcontainer div.editbar{
	padding: 2px 10px 0px 0px;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	margin-right: 15px;
	height: 18px;
}
#leftbar div.editbar{
	padding: 2px 10px 0px 0px;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	margin-right: 10px;
	height: 18px;
}
div.editbar a:link, div.editbar a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
div.editbar a:hover, div.editbar a:active{
	color: #FFFFFF;
	text-decoration: underline;
}
ul#sortable_elements{
	list-style:none;
	margin: 0px;
	padding: 0px;
}
ul.sortable_images{
	list-style:none;
	margin: 0px;
	padding: 0px;
}
ul.sortable_images li{
	float: left;
	width: 74px;
	height: 101px;
	margin-right: 3px;
	margin-bottom: 3px;
	background-image: url(images/sortable_element.png);
}
ul.sortable_images li .handle{
	cursor: move;
	height: 20px;
}
ul.sortable_images li img{
	padding: 10px;
}
ul.sortable_images li img.delete{
	padding: 0px;
	position: relative;
	left: 45px;
	top: -23px;
}
ul#sortable_top{
	min-height: 100px;	
}
#profile div.element .title{
	cursor:move;
}

#elementcontainer div.edit div.top{
	background-image:url(images/editelement_bg_top.png);
}
#elementcontainer div.edit div.middle{
	background-image:url(images/editelement_bg_middle.png);
}
#elementcontainer div.edit div.bottom{
	background-image:url(images/editelement_bg_bottom.png);
}

div.listelement{
	margin-bottom: 15px;
	border: 1px solid #CCCCCC;
	background-color: #555555;
}
div.listelement div.header{
	padding: 5px;
	background-color: #333333;
}
div.listelement div.body{
	padding: 5px;
}
div.listelement div.controls{
	padding: 5px;
	background-color: #333333;
	clear: both;
}
div.listelement div img.icon{
	float: left;
	margin-right: 2px;
	margin-bottom: 2px;
}

td.messagetitle{
	background-color: #414141;
	color: #FFFFFF;
	font-weight: bold;
}

div.contestcontainer{
	float: right;	
}form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  font:100% arial,verdana,sans-serif;
  margin: 0;
  min-width: 500px;
  max-width: 600px;
  width: 560px; 
}

form fieldset {
  border-width: 0px;
  border-bottom: 1px solid #CCCCCC;
  margin: 10px;        /* padding in fieldset support spotty in IE */
}

div.edit form fieldset {
  border-color: 1px solid #376131;
}
form fieldset div.legend {
	width: 100%;
	padding: 5px 0px 5px 0px;
	margin: 0px;
	color: #CCCCCC;
	font-size: 20px;
	text-transform: uppercase;
  	border-bottom: 1px solid #CCCCCC;
	display: block;
}
div.edit form fieldset div.legend {
	color: #376131;
  	border-color: 1px solid #376131;
}

form.modalform textarea{
	width: 350px;
	height: 130px;
}
form.modalform input.text{
	width: 350px;
}

table.formtable{
}
table.formtable td.label{
	vertical-align: top;
	text-align: right;
	width: 150px;
}

#elementcontainer div.edit input.textfield{
	background-color: #9ED09D;
	border: 1px solid #376131;
	width: 350px;
}

#elementcontainer div.edit input.shorttextfield{
	width: 200px;
	display: inline;
	float: left;
}

#elementcontainer div.edit textarea{
	background-color: #9ED09D;
	border: 1px solid #376131;
	width: 350px;
	height: 120px;
}

input,textarea {
	font-size: 11px;
}

input.smallfield{
	width: 100px;
}

input.button{
	background-image: url('images/formbutton_out.png');
	border: 0px;
	width: 133px;
	height: 23px;
	color: #CCCCCC;
	background-color: transparent;
}
#elementcontainer div.edit input.button{
	background-image: url('images/formbutton_edit_out.png');
}
#elementcontainer div.edit input.submitbutton{
	margin-left: 180px;
}

a.button{
	background-image: url('images/formbutton_out.png');
	border: 0px;
	width: 133px;
	height: 18px;
	color: #CCCCCC;
	background-color: transparent;
	display: block;
	text-align: center;
	padding-top: 5px;
	margin: 10px 10px 10px 0px;
	font-size: 9px;
}
a.button:hover,a.button:active{
	background-image: url('images/formbutton_over.png');
	text-decoration: none;
	color: #000000;
}
a.button img.icon{
	margin-right: 5px;
	vertical-align: middle;
}
input.green, a.green{
	background-image: url('images/formbutton_edit_out.png');
}
input.red, a.red{
	background-image: url('images/formbutton_red_out.png');
}

input.searchfield{
	width: 120px;
	height: 13px;
	background-image: url('images/searchfield_bg.png');
	background-repeat: no-repeat;
	border: none;
	background-color: transparent;
	padding: 3px 10px 3px 25px;
	margin: 0px;
}
form.loginform input.loginfield{
	width: 128px;
	height: 13px;
	background-image: url('images/bg_loginfields.png');
	background-repeat: no-repeat;
	border: none;
	background-color: transparent;
	padding: 3px 10px 3px 10px;
	margin: 0px;
		
}
form.loginform input.loginbutton{
	background-image: url('images/btn_login_bg.png');
	border: none;
	background-color: transparent;
	width: 52px;
	height: 21px;
	text-align: center;
	padding: 3px 0px 3px 0px;
}

.validation-failed {
  border: 1px solid #f00;
}
.validation-passed {
  border: 1px solid green;
}
.validation-advice {
  margin: 2px; 
  padding: 2px; 
  color:#fff; 
  background-color:#f00;
  font-size:9px;
}
.warning {
	border: 1px solid #c66;
  font-size:9px;
}
.warning-advice {
  font-size:9px;
	margin: 2px;
	padding: 2px;
	color:#fff;
	background-color:#bbb;
}
div#loginform{
	padding-left: 10px;
	font-size: 10px;
}
div#logintext{
	padding: 3px;
}
#progress-bar{
	width: 250px;
	border: 1px solid #CCCCCC;
	height: 15px;
}
#progress-bar-inner{
	background-color: #BBBBBB;
	height: 15px;
	float: left;
}/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 112px;
	width: 196px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 112px;
	margin: 0 auto;
	width: 169px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}/* MILKBOX */

#mbOverlay {
	position: absolute;
	left: 0;
	width:100%;
	background-color: #000; /* set the Milkbox overlay color // opacity: see the js options */
	z-index:100;
	cursor: pointer;
}

#mbCenter {
	/* for default width and height, see the js options */
	position: absolute;
	z-index:101;
	overflow:hidden;
	left: 50%;
	top:10%;/* overwritten in the js options to properly position the milkbox when activated in a scrolled window */
	background-color: #fff;/* set the Milkbox background color */
	border: 5px solid #fff;/* set the Milkbox border */
	margin:0; padding:5px;/* set the Milkbox padding */
}

.mbLoading{ background: #fff url(milkbox/loading.gif) no-repeat center; }/* IMAGE: loading gif */

#mbCanvas{ margin:0; padding:0; height:0; border:none; font-size:0; overflow:hidden; }

.clear{ clear:both; height:0; margin:0; padding:0; font-size:0; overflow:hidden; }


/* *** BOTTOM *** */

#mbBottom { 
	/* set text options */
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	padding-top:8px;
	margin:0;
}

/* navigation */
/* be careful if you change buttons dimensions */

#mbNavigation{
	float:right;
	width:27px;
	padding-top:3px;
	border-left:1px solid #9c9c9c;/* set nav border */
}


#mbCount{ 
	width:55px; 
	overflow:hidden;
	padding-top:1px;
	float:right;
	text-align:right;
	font-size:9px; /* count font size */
}

#mbCloseLink, #mbPrevLink, #mbNextLink, #mbPlayPause{
	outline:none;
	display:block;
	float:right;
	height:19px;
	cursor: pointer;
}


#mbPrevLink, #mbNextLink{ width:15px; }
#mbPrevLink{ background: transparent url(milkbox/prev.gif) no-repeat; }/* IMAGE: prev */
#mbNextLink{ background: transparent url(milkbox/next.gif) no-repeat; }/* IMAGE: next */

#mbPlayPause{ width:13px; }
#mbPlayPause{ background: transparent url(milkbox/play-pause.gif) no-repeat; }/* IMAGE: prev */


/* NOTE: doesn't work in ie6, so, just see the js options :) */
a#mbPrevLink:hover,a#mbNextLink:hover,a#mbCloseLink:hover,a#mbPlayPause:hover { background-position: 0 -22px; }

#mbCloseLink {
	width:17px;
	background: transparent url(milkbox/close.gif) no-repeat;/* IMAGE: close */
}

/* description */

#mbDescription{
	margin-right:27px;
	padding:0px 10px 0 0;
	font-weight: normal;
	text-align:justify;
}

#demo-status
{
	padding:				10px 15px;
}
 
#demo-status .progress
{
	background:				white url(../js/FancyUpload/assets/progress-bar/progress.gif) no-repeat;
	background-position:	+50% 0;
	margin-right:			0.5em;
}
 
#demo-status .progress-text
{
	font-size:				0.9em;
	font-weight:			bold;
}
 
#demo-list
{
	list-style:				none;
	margin:					0;
}
 
#demo-list li.file
{
	background:				url(../js/FancyUpload/assets/file.png) no-repeat 4px 4px;
}
#demo-list li.file.file-uploading
{
	background-image:		url(../js/FancyUpload/assets/uploading.png);
}
#demo-list li.file.file-success
{
	background-image:		url(../js/FancyUpload/assets/success.png);
}
#demo-list li.file.file-failed
{
	background-image:		url(../js/FancyUpload/assets/failed.png);
}
 
#demo-list li.file .file-name
{
	margin-left:			44px;
	display:				block;
	clear:					left;
	line-height:			40px;
	height:					40px;
	font-weight:			bold;
}
#demo-list li.file .file-size
{
	line-height:			18px;
	float:					right;
	margin-top:				2px;
	margin-right:			6px;
}
#demo-list li.file .file-info
{
	display:				block;
	margin-left:			44px;
	font-size:				0.9em;
	line-height:			20px;
	clear
}
#demo-list li.file .file-remove
{
	clear:					right;
	float:					right;
	line-height:			18px;
	margin-right:			6px;
}
