* { margin: 0; padding: 0; }

body { background-image: url(img/bg.jpg); text-align: center;  }

#backlight { width: 100%; height: 405px; background-image: url(img/backlight.jpg); background-repeat: repeat-x; margin-top: 111px; left: -0%; position: absolute; }

#container { width: 700px; height: auto; margin-left: auto; margin-right: auto; text-align: left; position: relative; }
	#logo { width: 673px; height: 51px; top: 137px; left: 14px; position: relative; background-image: url(img/logo.png); }
	
	#top { width: 700px; height: 275px; top: 140px; position: relative; background-image: url(img/shadow.png); }
		#menu { width: 212px; height: 260px; top: 15px; left: 15px; position: absolute; background-image: url(img/menu_back.jpg); }
			#links { width: 108px; height: 95px; top: 71px; left: 62px; position: absolute; }
				#home { width: 57px; height: 15px; background-image: url(img/home.png); position: absolute; top: 0; }
				#news { width: 54px; height: 15px; background-image: url(img/news.png); position: absolute; top: 21px; }
				#bio { width: 108px; height: 15px; background-image: url(img/bio.png); position: absolute; top: 41px; }
				#music { width: 59px; height: 15px; background-image: url(img/music.png); position: absolute; top: 61px; }
				#contact { width: 85px; height: 15px; background-image: url(img/contact.png); position: absolute; top: 81px; }
		#banner { width: 458px; height: 260px; top: 15px; left: 227px; position: absolute; background-image: url(img/headimage.jpg); }		
	
	#frame_top { width: 670px; height: 4px; top: 140px; left: 15px; position: relative; background-image: url(img/frame_top.jpg); } /* lagt övre delen av ramen i en egen div */
	
	#bottom { width: 670px; height: auto; top: 140px; left: 15px; position: relative; } /* "bottom" definerar nedre halvan, där allt ned till "bottom_filler" ligger inuti */
		#area_background { width: 662px; height: 100%; left: 4px; position: absolute; background-image: url(img/area_bg.jpg); background-repeat: repeat-y; }
		#frame_left { width: 4px; height: 100%; position: absolute; background-image: url(img/frame_left.jpg); background-repeat: repeat-y; }
		#frame_right { width: 4px; height: 100%; left: 666px; position: absolute; background-image: url(img/frame_right.jpg); background-repeat: repeat-y; }
		#frame_bottom { width: 670px; height: 4px; position: relative; background-image: url(img/frame_bottom.jpg); } 
		#text_area { width: 542px; height: auto; left: 30px; position: relative; }
		#signature { width: 112px; height: 29px; left: 450px; position: relative; background-image: url(img/signature.png); }
		#top_filler { width: 662px; height: 30px; left: 4px; position: relative; }
		#bottom_filler { width: 662px; height: 20px; left: 4px; position: relative; }
		
	.newsitem { width: 542px; height: auto; left: 60px; position: relative; } /* En klass för nyehterna, dvs du kommer att använda denna diven till _alla_ dina nyheter */
		.topic { width: 400px; height: 15px; position: relative; }
		.date { width: 200px; height: 7px; top: 10px; position: relative; }
		.text { width: 542px; height: auto; top: 25px; position: relative; }
		.filler { width: 542px; height: 25px; position: relative; }
	.newsvoid { width: 542px; height: 25px; left: 60px; position: relative; }
	
	#biography { width: 542px; height: auto; left: 60px; position: relative; }
	
	#contact_topic { width: 300px; height: 15px; left: 30px; position: relative; }
	#contact_form { width: 565px; height: 340px; left: 30px; position: relative; }
	#contact_info { width: 200px; height: 100px; top: 75px; left: 320px; position: absolute; }
	
	#music_categories { width: 542px; height: auto; left: 60px; position: relative; }
	#music_genre { width: 542px; height: auto; left: 60px; position: relative; }
	
	#back_button { width: 50px; height: auto; left: 600px; position: relative; }
		
	#bottom_void { width: 670px; height: 40px; top: 140px; position: relative; }


/* Text Styling */

#text_area h1 { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; color: #6d2d21; text-align: left; }
#text_area { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; }

#music_categories h1 { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; color: #6d2d21; text-align: left; }
#music_categories li { list-style: none; display: inline; margin-right: 50px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #924303; text-align: left; }
#music_categories { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; }

#music_genre h1 { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; color: #6d2d21; text-align: left; }
#music_genre li { list-style: none; margin-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; }

#back_button { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 16px; color: #6d2d21; text-align: left; }

.topic { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; color: #6d2d21; text-align: left; }
.date { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 10px; color: #9b6f4a; text-align: left; }
.text { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; }

p.formtext { font-family: Tahoma, sans-serif; font-size: 11px; color: #000000; }
p.small { font-family: Tahoma; font-size: 9px; color: #000000; }

p.contacttext { font-family: Tahoma, sans-serif; font-size: 11px; color: #6d2d21; } 
#contact_topic { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 22px; color: #6d2d21; text-align: left; }
#contact_form { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; color: #000000; text-align: left; }


/* Menu Hover */

#home:hover { background-image: url(img/home_over.png); }
#news:hover { background-image: url(img/news_over.png); }
#bio:hover { background-image: url(img/bio_over.png); }
#music:hover { background-image: url(img/music_over.png); }
#contact:hover { background-image: url(img/contact_over.png); }

#music_categories a:link { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #924303; text-align: left; text-decoration: none; }
#music_categories a:visited { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #924303; text-align: left; text-decoration: none; }
#music_categories a:active { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #924303; text-align: left; text-decoration: none; }
#music_categories a:hover { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #6d2d21; text-align: left; text-decoration: none; }

#music_genre a:link { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; text-decoration: none; }
#music_genre a:visited { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; text-decoration: none; }
#music_genre a:active { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #000000; text-align: left; text-decoration: none; }
#music_genre a:hover { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; color: #924303; text-align: left; text-decoration: none; }

#back_button a:link { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 16px; color: #6d2d21; text-align: left; text-decoration: none; }
#back_button a:visited { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 16px; color: #6d2d21; text-align: left; text-decoration: none; }
#back_button a:active { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 16px; color: #6d2d21; text-align: left; text-decoration: none; }
#back_button a:hover { font-family: "Times New Roman", Times, serif; font-weight: bold; font-size: 16px; color: #6d2d21; text-align: left; text-decoration: none; }
#flashspelare { width: 542px; height: auto; left: 60px; position: left; margin-top: 20px; }

