/**
 * Mysteryland homepage stylesheet
 * @author Harmen Janssen | grrr.nl
 * @modifiedby $LastChangedBy: $
 * @version $Revision: $
 * @lastmodified $Date: $
 *
 * TOC:
 * --------------------------------
 *
 * Colors:
 * --------------------------------
 * #000000	Black
 * #FE00B4	Pink
 * #9C006C	Purple
 *
 * Glossary:
 * --------------------------------
 *
 * Todo:
 * --------------------------------
 *
 */

/* Current item in navigation */

#menu-main #nav-home-link a { background-position: 0 -48px; }

/**
 * Branding
 * --------------------------------
 */

#branding {
	background: url(../images/gui/branding.jpg) no-repeat 0 0;
	height: 274px;
	margin: 0 auto;
	position: relative;
	width: 988px;
}

#branding h1 a {
	border: 0;
	display: block;
	height: 71px;
	left: 276px;
	position: absolute;
	text-indent: -999em;
	top: 102px;
	width: 415px;
}

/**
 * Home intro
 * --------------------------------
 */
#home-intro {
	background: url(../images/gui/home-intro-karton.png) no-repeat 0 0;
	float: right;
	font-weight: bold;
	height: 253px;
	margin-left: 10px;
	margin-right: -10px;
	padding: 80px 20px 0;
	position: relative;
	top: 20px;
	width: 275px;
	z-index: 3;
}

#home-intro p.datum-locatie {
	background-image: url(../images/gui/datum-locatie.png);
	height: 134px;
	left: -100px;
	position: absolute;
	text-indent: -999em;
	top: -60px;
	width: 443px;
}

#home-intro b.spice {
	background-image: url(../images/gui/tomorrow-is-a-mystery.png);
	bottom: -104px;
	height: 179px;
	left: 88px;
	position: absolute;
	width: 258px;
}

/**
 * Foto player
 * --------------------------------
 */
#main {
	float: left;
	position: relative;
	text-align: center;
}

#foto-player {
	background: #000 url(../images/gui/flash-placeholder.jpg) no-repeat 50% 50%;
	height: 300px;
	width: 605px;
}

/**
 * Social links
 * --------------------------------
 */
#social {
	background: url(../images/gui/volgons.png) no-repeat 0 0;
	bottom: -81px;
	height: 81px;
	position: absolute;
	right: -13px;
	text-indent: -999em;
	width: 233px;
}

#social a {
	border: 0;
	display: block;
	position: absolute;
	text-indent: -999em;
	top: 30px;
}

#social a[href*="hyves"] {
	background: url(../images/gui/op_hyves.png) no-repeat 0 0;
	height: 17px;
	left: 46px;
	width: 66px;
}

#social a[href*="twitter"] {
	background: url(../images/gui/twitter.png) no-repeat 0 0;
	height: 17px;
	left: 112px;
	width: 59px;
}

#social a[href*="hyves"]:hover, #social a[href*="hyves"]:focus,
#social a[href*="twitter"]:hover, #social a[href*="twitter"]:focus { background-position: 0 -17px; }
#social a[href*="hyves"]:active, #social a[href*="twitter"]:active { background-position: 0 -34px; }

/**
 * 3FM link
 */

#main a[href*="3fm"] {
	background: url(../images/gui/3fm_label.png) no-repeat;
	border: 0;
	bottom: -140px;
	display: block;
	height: 89px;
	position: absolute;
	right: 13px;
	text-indent: -999em;
	width: 243px;
	z-index: 1000;
}

/**
 * Ticket info
 * --------------------------------
 */
#ticket-info {
	clear: both;
	height: 156px;
	left: -13px;
	margin-bottom: -60px;
	margin-left: 37px;
	position: relative;
	text-indent: -999em;
	top: -60px;
	width: 363px;
}

#ticket-info a {
	background: url(../images/gui/ticket-info_label.png) no-repeat 0 0;
	border: 0;
	bottom: 5px;
	display: block;
	height: 102px;
	left: -37px;
	position: absolute;
	text-indent: -999em;
	width: 166px;
	z-index: 2;
}


#ticket-info a:hover, #ticket-info a:focus { background-position: 0 -102px; }

#ticket-info a:active { background-position: 0 -204px; }

#ticket-info a[href*="tickets"] {
	background: url(../images/gui/ticket-info_wolk.png);
	display: block;
	height: 156px;
	left: 0;
	position: absolute;
	top: 0;
	width: 363px;
	z-index: 1;
}

/**
 * View photos link
 * --------------------------------
 */
#view-photos-link {
	clear: both;
	height: 156px;
	left: -13px;
	margin-bottom: -60px;
	margin-left: 37px;
	position: relative;
	text-indent: -999em;
	top: -60px;
	width: 363px;
}

#view-photos-link a {
	background: url(../images/gui/bekijk-meer-fotos.png) no-repeat 0 0;
	border: 0;
	bottom: 5px;
	display: block;
	height: 124px;
	left: -37px;
	position: absolute;
	text-indent: -999em;
	width: 284px;
	z-index: 2;
}

/**
 * Latest news browsebox
 * --------------------------------
 */
#latest_news {
	position: relative;
	top: 30px;
	left: -2px;
	width: 622px; /*615px;*/
	min-height: 228px;
	margin-bottom: 30px;
	float: left;
	font-size: 11px;
}

#latest_news .item {
	width: 200px;
	margin-left: 3px;
	margin-bottom: 10px;
	padding: 2px;
	float: left;
	background: white;
}

#latest_news .item:hover {
	background: #CCC;
}

#latest_news .item:first-child {
	margin-left: 0;
}

#latest_news h3 a {
	border: 0;
	color: black;
	font-size: 16px;
	font-weight: bold;
	padding-right: 15px;
	text-decoration: none;
	text-transform: uppercase;
}

#latest_news h3 a:hover, #latest_news h3 a:focus,
#latest_news .item:hover h3 a {
	color: #FE00B4;
}

#latest_news h3 a:active {
	color: #9C006C;
}

/* Browsebox navbar */
#latest_news .navbar {
	border-bottom: 1px solid #000;
	clear: left;
}

#latest_news .navbar ul {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	top: 14px;
	width: 185px;
}

#latest_news .navbar ul li {
	float: left;
}

#latest_news .navbar a {
	background: url(../images/gui/nieuws_nextprev.gif) no-repeat;
	border: 0;
	display: block;
	height: 26px;
	text-indent: -999em;
	width: 97px;
}

#latest_news .navbar .disabled {
	visibility: hidden;
	display: block;
}

#latest_news .navbar .prev a { background-position: 0 0; }
#latest_news .navbar .prev a:hover, #latest_news .navbar .prev a:focus { background-position: 0 -26px; }
#latest_news .navbar .prev a:active { background-position: 0 -52px; }
#latest_news .navbar .next a { width: 88px; background-position: -97px 0; }
#latest_news .navbar .next a:hover, #latest_news .navbar .next a:focus { background-position: -97px -26px; }
#latest_news .navbar .next a:active { background-position: -97px -52px; }


/**
 * Highlight ("feestboek van...")
 * --------------------------------
 */
#highlight {
	position: relative;
	top: -50px;
	left: -20px;
	z-index: 1;
	width: 280px;
/*	margin-bottom: 80px;*/
	float: right;
}

#highlight .item {
	position: relative;
	z-index: 1;
	width: 300px;
	background: #FFF;
}

#highlight h2 {
	position: relative;
	z-index: 2;
	width: 280px;
	height: 145px;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	background: transparent;
}

#highlight a {
	border: 0;
}

#highlight h2 a img {
	width: 280px;
	height: 145px;
	display: block;
	float: none;
}

#highlight ul {
	position: relative;
	z-index: 1;
	width: 260px;
	/* correct from #highlight relative positioning */
	margin-left: 20px;
	margin-top: -95px;
	padding: 95px 10px 10px;
	background: #00ABEC;
}

#highlight li a {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFF;
	background: #00ABEC;
	border: 0;
}

#highlight li a:hover, #highlight li a:focus {
	color: #E52096;
}

#highlight .navbar {
	position: relative;
	z-index: 3;
	width: 280px;
	border: 0;
	clear: none;
	margin: 0px 0 0 20px;
	background: #00ABEC;
}

#highlight .navbar ul {
	position: static;
	top: 0;
	width: 193px;
	height: 17px;
	margin: 0 auto 0;
	padding: 10px 0;
}

#highlight .navbar li {
	float: left;
}

#highlight .navbar li.disabled {
	display: block;
	visibility: hidden;
}

#highlight .navbar li a {
	height: 17px;
	display: block;
	text-indent: -999em;
	background: url(../images/gui/volgendevorigepersoon.gif) no-repeat;
}

#highlight .navbar li.prev a {
	width: 91px;
	background-position: 0 0;
}

#highlight .navbar li.prev.nonext a { width: 90px !important; }


#highlight .navbar li.prev a:hover, #highlight .navbar li.prev a:focus {
	background-position: 0 -17px;
}

#highlight .navbar li.prev a:active {
	background-position: 0 -34px;
}

#highlight .navbar li.next a {
	width: 102px;
	background-position: -91px 0;
}

#highlight .navbar li.next a:hover, #highlight .navbar li.next a:focus {
	background-position: -91px -17px;
}

#highlight .navbar li.next a:active {
	background-position: -91px -34px;
}

/**
 * Mobile Widget
 * --------------------------------
 */
#mobile_widget {
	position: relative;
	top: -30px;
	width: 280px;
	height: 200px;
	margin-bottom: 50px;
	float: right;
}

/**
 * TNT banner
 * --------------------------------
 */
#tnt-banner {
	position: relative;
	top: -30px;
	width: 280px;
	height: 200px;
	margin-bottom: 50px;
	float: right;
}

#tnt-banner a {
	border: 0;
}

/**
 * Spice
 * --------------------------------
 */

#shrooms {
	position: absolute;
	right: 25px;
	bottom: -14px;
	width: 156px;
	height: 68px;
	background-image: url(../images/gui/paddenstoelen.jpg);
}

#supportedby {
	position: absolute;
	right: 181px;
	bottom: 30px;
}

#supportedby span, #supportedby a {
	display: block;
	text-indent: -999em;
}

#supportedby a {
	margin: 5px 5px 0 0;
	float: left;
	border: 0;
}

#supportedby span {
	width: 53px;
	height: 10px;
	background: url(../images/gui/supported_by.gif) no-repeat;
}

#supportedby a[href*="3fm"] {
	width: 64px;
	height: 31px;
	background: url(../images/gui/3fm.gif) no-repeat 0 0;
}

#supportedby a[href*="3fm"]:hover, #supportedby a[href*="3fm"]:focus {
	background-position: 0 -31px;
}

#supportedby a[href*="bnn"] {
	width: 64px;
	height: 32px;
	background: url(../images/gui/bnn.gif) no-repeat 0 0;
}

#supportedby a[href*="bnn"]:hover, #supportedby a[href*="bnn"]:focus {
	background-position: 0 -32px;
}