/* www.afrobeatfestival.com design & development by portnull.de
--------------------------------------------------------------- */


/* $RESET
--------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,ul,ol, li {
	padding: 0;
	margin: 0;}
h1,h2,h3 {
	font-family: 'Lucida Grande', 'Lucida sans', Arial, Helvetica, sans-serif;}

li {list-style-type: none;}

/* $TYPO
--------------------------------------------------------------- */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	text-align: center;
	color: #000;}

a {
	color: #a62100;
	text-decoration: underline;}
a:hover {color: #333;}
a img {border: 0;}
	
h1 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 4em;
	letter-spacing: -1px;
	color: #e6c31e;
	text-shadow: 1px 1px 1px #333;}
span.festival {color: #ecece4;}

h1#logo {
	font-size: 5em;
	text-indent: -9999px;
	width: 465px;
	height: 110px;
	margin: 0 0 92px 0;
	background: url("gfx/felabration_logo.png") top left no-repeat;}

h2 {
	font-size: 2.6em;
	font-weight: normal;}
h2 a {text-decoration: none;}
#banner h2 {font-weight: bold; color: #433f34; margin: 0 0 8px 0;}
#liveonstage h2 {margin: 0;}
.txt h2 {font-size: 2.2em; text-align: left;}

h3 {font-size: 1.4em;}
#catcher h3 {
	font-size:1.2em;
	color: #433f34;
	margin: 4px 0 24px 0;}
#liveonstage h3 {color: #a62100;}

h4 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	font-size: 1.2em;
	color: #dfded7;}
h4 strong {color: #f1c31e;}
h4 em {color: #409e3e;}
ul#links h4 {color: #433f34;}


.txt p {
	font-size: 1.2em;
	line-height: 1.6em;
	margin: 12px 0 0 0;}

span.amp {font-family: Baskerville, Georgia; font-style: italic;}
span.readable {background: #fff; padding: 2px}
	
/* $BASIC
--------------------------------------------------------------- */
body {
	padding: 0;
	margin: 0;
	background: #ecebe4 url("gfx/bg_body.jpg") top left repeat-x;}
	
#wrapper {
	text-align: left;
	width: 900px;
	margin: 5px auto 0;}

#task {
	text-align: right;
	padding: 0 8px;}	
#task a {color: #676050;}
#task a:hover {color: #a02402;}

#header {
	margin: 8px 0 0 0;
	padding: 26px 0 62px;}
	
#banner {
	padding: 16px;
	margin: 18px 0 0 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-bottom:1px solid #433f34;
	background: #b5b4aa url("gfx/bg_banner.jpg") top left repeat-y;}


#footer {
	clear: both;
	padding: 0 0 112px 0;
	background: url("gfx/bg_footer.jpg") bottom right no-repeat}


/* $NAVIGATION
--------------------------------------------------------------- */
ul.navigation {
	font-size: 1.4em;
	padding: 0 0 0 18px;
	margin: 36px 0 0 0;}
ul.navigation li {
	float: left;
	margin: 0 6px 0 0;}

ul.navigation a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 6px 10px 5px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-bottom: 1px solid #cbc9be;
	background: #d7d5ca;
	outline: none;}

ul.navigation a:hover {color: #a32100;}

ul.navigation a.selected {
	border-bottom: 1px solid #fff;
    background-color: #fff;}
    
/*
ul.navigation a#linktv.selected {
	color: #fff;
	border-bottom: 1px solid #ba3709;
    background-color: #ba3709;}
*/

	
	
	
/* $SLIDER
--------------------------------------------------------------- */	
#slider {
	width: 900px;
	position: relative;
	overflow: hidden;}

.scroll {
	height: 542px;
	width: 900px;
	overflow: auto;
	position: relative; /* fix for IE to respect overflow */
	clear: left;
	overflow-x: hidden;}

.panel {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-bottom:1px solid #dbdad6;
	background: #fff;
	margin: 0 0 24px 0;}
	
/*
#tv.panel {
	border-bottom:1px solid #dbdad6;
	background: #fff url("gfx/bg_afrobeattv.jpg") top left no-repeat;}
*/

.scrollContainer div.panel {
	height: 540px;
	width: 900px;}
	

.scrollButtons {
    position: absolute;
    top: 150px;
    cursor: pointer;}
.scrollButtons.left {left: -20px;}
.scrollButtons.right {right: -20px;}
	
	
/* $CONTENT
--------------------------------------------------------------- */
.leftcolum {
	float: left;
	padding: 16px 0 16px 18px;
	width: 582px;}
.rightcolum {
	float: right;
	width: 272px;
	padding: 16px 16px 16px 0;}
.rightcolum.noheadline {padding: 48px 16px 16px 0;}

		
.txt {
	float: left;
	text-align: left;
	width: 266px;
	padding: 0;
	margin: 0 24px 0 0;}


div.linklist {
	float: left;
	width: 266px;
	font-size: 1.4em;
	margin: 0 24px 0 0;}
div.linklist.background {
	width: 258px;
	margin: 32px 24px 0 0;
	padding: 12px 0 12px 12px;
	background: url("gfx/bg_banner.jpg") top left no-repeat;}
	
div.linklist li {
	float: left;
	margin: 12px 12px 0 0;}
div.linklist li img {
	padding: 2px;
	border: 1px solid #433f34;
	background: #655e4c;}

ul#links {
	width: 900px;
	margin: 18px auto;}
ul#links li {
	float: left;
	margin: 0 12px 0 0;}



/* $BIG ASS BANNER
--------------------------------------------------------------- */
#catcher {
	float: left;
	padding: 10px;
	width: 560px;}		
	
div#lineup {
	float: right;
	width: 272px;}

div.lineupitem {
	float: left;
	width: 252px;
	padding: 10px;
	margin: 0 0 8px 0;
	background: #fff;}	
div.lineupitem li {
	padding: 6px 0;
	border-bottom: 1px dotted #655e4c;}
div.lineupitem a {color: #04a825;}

div.lineupitem li:last-child {border: 0;}



/* EXTRA
------------------------------------------------------------ */		
.xclear:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;}