@import "navigation.css";

body {
	margin: 0;
	padding: 0;
	/*background: #e3e3e3;*/
	background: #1f1f1d url("../Img/startpage/background.jpg") fixed;
	font: normal 0.625em Arial, Helvetica, sans-serif;
	color: #1a1a1a;
	}
	
#wrap {
	margin: 0 auto 20px auto;
	padding: 0;
	text-align: center;
	width: 980px;
	}
	
/*
================ G E N E R A L =====================================================*/

a {text-decoration: none;}

form {margin: 0; padding: 0;}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

img {border: 0;}

p {padding: 0; margin: 0;}

br.clear {clear: both;}

/*
================ T Y P O =====================================================*/

h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	}

/*
================ U T I L I T Y   N A V  =====================================================*/

#utility {
	margin: 10px 0;
	padding: 0;
	width: 980px;
	height: 11px;
	}

#utility ul {
	margin: 0;
	padding: 0;
	float: right;
	width: auto;
	}

#utility ul li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	font-size: 1em;
	}

#utility ul li a {
	margin: 0;
	padding: 0 15px 0 0;
	background: transparent url("../Img/startpage/utility-link-off.gif") center right no-repeat;
	color: #666;
	}

#utility ul li a:hover {
	color: #1a1a1a;
	background: transparent url("../Img/startpage/utility-link-on.gif") center right no-repeat;
	}


/*
================ H E A D E R =====================================================*/


#header {
	margin: 20px 0 0 0;
	padding: 7px 0 0 0;
	width: 980px;	
	text-align: left;
	background: #fff url("../Img/startpage/header-bg.gif") no-repeat;
	/*position: relative;*/
	}

/*
================ C O N T E N T =====================================================*/

#content-container {
	margin: 0;
	padding: 0;
	position: relative;
	background: #fff url("../Img/startpage/content-bg.gif") left bottom no-repeat;
	}

/* nånting är fel med content-area som funkar med overflow: vad som !!!!!!!!! */
#content {
	padding: 10px 0 20px 0;
	margin: 0 auto;
	width: 940px;
	text-align: left;
	overflow: auto;
	}

#content #content-area {
	}


/*
================ A C T I V E   P A N E L =====================================================*/

#active-panel {
	margin: 0;
	padding: 0;
	height: 292px;
	width: 980px;
	background: #fff url("../Img/startpage/activepanel-bg.gif") repeat-x;
	}
	
#active-panel #logo-container {
	margin: 0;
	background: transparent url("../Img/startpage/logo-container-bg.gif");
	height: 292px;
	width: 396px;
	float: left;
	}

#active-panel #logo-container #logo {
	height: 292px;
	width: 396px;
	text-align: center;
	}

#active-panel #logo-container #logo img {
	margin: 30px 0 0 0;
	padding: 0;
	}

#active-panel #knaster-info {
	float: right;
	width: 570px;
	text-align: left;
	}

#active-panel #knaster-info h1 {
	margin: 35px 0 0 0;
	width: 524px;
	height: 90px;
	background: #fff url("../Img/startpage/start-heading.gif") no-repeat;
	}

#active-panel #knaster-info h1 span {
	display: none;
	}

#active-panel #knaster-info p.knaster-text {
	padding: 12px 0 10px 0;
	line-height: 18px;
	font-size: 1.2em;
	width: 524px;
	}


/*
================ A B O U T =====================================================*/


#about {
	padding: 0 0 25px 0;
	margin: 0;
	float: left;
	width: 920px;
	}

#about div {
	padding: 0;
	margin: 20px 0 0 0;
	float: left;
	width: 280px;
	font-size: 1.2em;
	line-height: 1.7em;
	}

#about div.about-center {
	margin-left: 35px;
	margin-right: 35px;
	}

#about div h2 {
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	height: 20px;
	border-bottom: 1px dotted #b5b5b5;
	}

#about div h2 span {
	display: none;
	}

#about div h2.about-venue {background: transparent url("../Img/startpage/about-heading-venue.gif") no-repeat;}
#about div h2.about-playlist {background: transparent url("../Img/startpage/about-heading-playlist.gif") no-repeat;}
#about div h2.about-artist {background: transparent url("../Img/startpage/about-heading-artist.gif") no-repeat;}

#about div a {
	margin: 4px 0 0 0;
	}

#about div a.about-link-knaster {background: transparent url("../Img/startpage/BTN-about-knaster-off.gif") no-repeat; width: 116px;}
#about div a.about-link-knaster:hover {background: transparent url("../Img/startpage/BTN-about-knaster-on.gif") no-repeat;}

#about div a.about-link-playlist {background: transparent url("../Img/startpage/BTN-about-playlist-off.gif") no-repeat; width: 106px;}
#about div a.about-link-playlist:hover {background: transparent url("../Img/startpage/BTN-about-playlist-on.gif") no-repeat;}

#about div a.about-link-getmember {background: transparent url("../Img/startpage/BTN-about-getmember-off.gif") no-repeat; width: 123px;}
#about div a.about-link-getmember:hover {background: transparent url("../Img/startpage/BTN-about-getmember-on.gif") no-repeat;}

/*
================ P L A Y L I S T =====================================================*/

#playlist {
	}

#playlist a {text-decoration: none; color: #333;}

#playlist #play-left {
	margin: 20px 0 0 0;
	width: 560px;
	float: left;
	}
	
#playlist #play-right {
	margin: 20px 0 0 0;
	width: 315px;
	float: right;
	}

#playlist h2.playlist-heading-soon {background: transparent url("../Img/startpage/playlist-heading-soon.gif") ;}
#playlist h2.playlist-heading-recent {background: transparent url("../Img/startpage/playlist-heading-recent.gif") no-repeat;}
#playlist h2.playlist-heading-comment {background: transparent url("../Img/startpage/playlist-heading-comment.gif") no-repeat;}
#playlist h2.playlist-heading-artist {background: transparent url("../Img/startpage/playlist-heading-artist.gif") no-repeat;}
#playlist h2.playlist-heading-venue {background: transparent url("../Img/startpage/playlist-heading-venue.gif") no-repeat;}
#playlist h2.playlist-heading-booker {background: transparent url("../Img/startpage/playlist-heading-booker.gif") no-repeat;}

#playlist h2 {
	height: 20px;
	padding: 0;
	margin: 0 0 10px 0;
	}

#playlist h2 span {
	display: none;
	}

.object li {
	clear: both;
	padding: 0 0 12px 0;
	margin: 0 0 12px 0;
	border-bottom: 1px dotted #b5b5b5;
	height: 70px;
	}

.object li div.object-image {
	margin: 0 10px 0 0;
	float: left;
	width: 114px;
	height: 69px;
	overflow: hidden;
	border: 1px solid #ccc;
	text-align: center;
	}

.object li div.object-image img {
	margin: 2px 0 0 2px;
	border-left: 1px solid #fff;
	}

.object li div.object-read {
	float: left;
	width: 200px;
	}

.object li div.object-read h3 {
	margin: 0;
	padding-top: 3px;
	display: block;
	font-size: 1.7em;
	letter-spacing: -1px;
	width: 420px;
	}

.object li div.object-read h3 span {
	color: #fcb919;
	font-size: 0.8em;
	}

.object li div.object-read p {
	font-size: 1.3em;
	padding: 2px 0;
	}

.object li div.object-read p.object-date {
	font-size: 1.5em;
	color: #b5b5b5;
	padding: 2px 0;
	font-weight: bold;
	}

/*
================ I M A G E - S L I D E R =====================================================*/

.image-slider {
	background: #f3ac34 url("../Img/startpage/image-slider-topbow.gif") no-repeat;
	height: 158px;
	margin-bottom: 15px;
	}

.image-slider-area {
	background: transparent url("../Img/startpage/image-slider-bottbow.gif") bottom left no-repeat;
	height: 158px;
	}

.image-slider-content {
	margin: 5px 0 0 0;
	float: left;
	width: 219px;
	height: 145px;
	background: #000;
	text-align: center;
	position: relative;
	}

.image-slider-content img {
	margin: auto;
	vertical-align: middle;
	margin: 2px 2px 0 2px;
	}

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

.slider-left, .slider-right  {
	text-align: center;
	width: 46px;
	height: 158px;
	}

.slider-left input, .slider-right input  {
	margin-top: 25px;
	width: 35px;
	height: 103px;

	}

.image-slider-content .slider-fade {
	background: #000;
	height: 40px;
	width: 219px;
	position: absolute;
	left: 0;
	bottom: 0;
	filter:alpha(opacity=55);
	-moz-opacity:0.55;
	-khtml-opacity: 0.55;
	opacity: 0.55;
	z-index: 50;
	}

.image-slider-content .slider-fade-content {
	height: 40px;
	width: 219px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 51;
	text-align: left;
	}

.image-slider-content .slider-fade-content h3 {
	margin: 6px 0 0 15px;
	color: #fff;
	font-size: 1.3em;
	}

.image-slider-content .slider-fade-content h3 a.slider-link {
	} 

.image-slider-content .slider-fade-content p {
	margin: 0 0 0 15px;
	padding: 0;
	color: #f0ae2e;
		}

/*
================ F O O T E R =====================================================*/

#footer {
	margin: 10px 0 0 0;
	padding: 0;
	text-align: center;
	background: url("../Img/startpage/footer-bg.gif") no-repeat;
	height: 200px;
	clear: both;
	}
	
#footer-content {
	margin: 0;
	padding: 0;
	color: #fff;
	width: 100%;
	height: 200px;
	}
	
#footer-content div {
	margin: 45px 0 0 85px;
	padding: 0 0 30px 0;
	float: left;
	width: 440px;
	font-weight: normal;
	text-align: left;
	}

#footer-content div.footer-center {
	margin: 45px 0 0 25px;
	padding: 0 0 30px 0;
	float: left;
	width: 260px;
	font-weight: normal;
	text-align: left;
	}

#footer-content div p {
	line-height: 1.4em;
	}

#footer-content div p a, #footer-content div li a {
	color: #fcb919;
	}

#footer-content div h4, #footer-partner h4 {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px dotted #4c4c4c;
	height: 13px;
	}

#footer-content div h4 span {
	display: none;
	}

#footer-content div h4.footer-fineprint {background: transparent url("../img/content/footer-heading-fineprint.gif") no-repeat;}
#footer-content div h4.footer-shortcuts {background: transparent url("../img/content/footer-heading-shortcuts.gif") no-repeat;}
#footer-content div h4.footer-social-bookmarks {background: transparent url("../img/content/footer-heading-social.gif") no-repeat;}


#footer-content div ul li {
	padding: 5px 0;
	float: left;
	width: 114px;
	}
	
#footer-content div ul li a {
	padding: 0 0 0 21px;
	}

#footer-content div ul li.right {
	margin-left: 10px
	}
	
#footer-content div ul li.delicious {background: transparent url("../img/content/ICO-footer-delicious.gif") center left no-repeat}
#footer-content div ul li.digg {background: transparent url("../img/content/ICO-footer-digg.gif") center left no-repeat}
#footer-content div ul li.facebook {background: transparent url("../img/content/ICO-footer-facebook.gif") center left no-repeat}
#footer-content div ul li.farskpressad {background: transparent url("../img/content/ICO-footer-farskpressad.gif") center left no-repeat}
#footer-content div ul li.stumble {background: transparent url("../img/content/ICO-footer-stumbleupon.gif") center left no-repeat}
#footer-content div ul li.myspace {background: transparent url("../img/content/ICO-footer-myspace.gif") center left no-repeat}
#footer-content div ul li.reddit {background: transparent url("../img/content/ICO-footer-reddit.gif") center left no-repeat}
#footer-content div ul li.netvous {background: transparent url("../img/content/ICO-footer-netvous.gif") center left no-repeat}

#footer-partner {
	clear: both;
	margin: 20px auto 0 auto;
	color: #fff;
	text-align: left;
	width: 940px;
	}

#footer-partner h4.footer-partners {background: transparent url("../Img/content/footer-heading-partner.gif") no-repeat;}
#footer-partner h4 span {display: none;}


/*
================ E R R O R =====================================================*/

.submit-yeah, .submit-nope {
	padding: 5px;
	color: #fff;
	font-size: 1.4em;
	display: block;
	}

.submit-yeah {background: #2f8004 url("../Img/content/submit-yeah-anim.gif");}
.submit-nope {background: #ff5a00 url("../Img/content/submit-nope-anim.gif");}

noscript {
	text-align: left;
	}

noscript div {
	margin-bottom: 15px;
	background: green;
	}

/*
================ C A M P A I G N =====================================================*/

.campaign {
	margin: 5px;
	padding: 0;
	text-align: center;
	height: 140px;
	background: #1a1a1a url("../Img/startpage/campaign-leftbow.gif") top left no-repeat;
	}

.campaign-area {
	margin: 0;
	padding: 0;
	height: 140px;
	overflow: hidden;
	background: transparent url("../Img/startpage/campaign-rightbow.gif") top right no-repeat;
	text-align: right;
	}


.campaign-area img {
	margin: 5px 10px 0 0;
	padding: 0 0 0 0; 
	width: 930px;
	height: 130px;
	}

/*
================ B U T T O N S =====================================================*/

p.gui-btn span span {
	font-size: 12px;
	font-weight: bold;
	}