/**
* Puff -> Top
* Used in the top middle column.
**/

div#p3_startpage div#p3_column_top_middle div.box {
	width: 361px;
	margin: 4px 0px 4px 4px;
}

div#p3_startpage div#p3_column_top_middle div.box h2 {
	color: #720043;
	background: url('/p3/diverse/images/p3start/box.title.big.pink.gif') #ff00a8 right top no-repeat;
}

div#p3_startpage div#p3_column_top_middle div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.big.pink.gif') #fff right top no-repeat;
}

/**
* Puff -> Middle
* Used in the middle column.
**/

/**
* The big "puff", styled with green backgrounds.
**/

div#p3_startpage div#puff_middle_big_0 {
	width: 507px;
}

div#p3_startpage div#puff_middle_big_0 h2 {
	color: #397400;
	background: url('/p3/diverse/images/p3start/box.title.middle.blue.gif') #ade600 right top no-repeat;
}

div#p3_startpage div#puff_middle_big_0 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.middle.blue.gif') #fff right top no-repeat;
}

/**
* The left "puff", styled with green backgrounds.
**/

div#p3_startpage div#puff_middle_0 h2 {
	color: #397400;
	background: url('/p3/diverse/images/p3start/box.title.middle.green.gif') #ade600 right top no-repeat;
}

div#p3_startpage div#puff_middle_0 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.middle.green.gif') #fff left top no-repeat;
}

/**
* The right "puff", styled with pink backgrounds.
**/

div#p3_startpage div#puff_middle_1 h2 {
	color: #720043;
	background: url('/p3/diverse/images/p3start/box.title.middle.pink.gif') #ff00a8 right top no-repeat;
}

div#p3_startpage div#puff_middle_1 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.middle.pink.gif') #fff left top no-repeat;
}

/**/

div#p3_startpage div#p3_column_middle div.box {
	width: 251px;
	float: left;
	margin: 0px 0px 0px 4px;
}

/**
* Puff -> Bottom
* Used in the bottom column.
**/

/**
* The left "puff", styled with blue backgrounds.
**/

div#p3_startpage div#puff_bottom_0 {
	width: 251px;
}

div#p3_startpage div#puff_bottom_0 h2 {
	color: #00607f;
	background: url('/p3/diverse/images/p3start/box.title.small.blue.gif') #00ffff right top no-repeat;
}

div#p3_startpage div#puff_bottom_0 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.small.blue.gif') #fff left top no-repeat;
}

/**
* The middle "puff", styled with green backgrounds.
**/

div#p3_startpage div#puff_bottom_1 {
	width: 251px;
}

div#p3_startpage div#puff_bottom_1 h2 {
	color: #397400;
	background: url('/p3/diverse/images/p3start/box.title.small.green.gif') #ade600 right top no-repeat;
}

div#p3_startpage div#puff_bottom_1 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.small.green.gif') #fff right top no-repeat;
}

/**
* The left "puff", styled with pink backgrounds.
**/

div#p3_startpage div#puff_bottom_2 {
	width: 241px;
}

div#p3_startpage div#puff_bottom_2 h2 {
	color: #720043;
	background: url('/p3/diverse/images/p3start/box.title.small.pink.gif') #ff00a8 right top no-repeat;
}

div#p3_startpage div#puff_bottom_2 div.text div.body {
	background: url('/p3/diverse/images/p3start/box.body.small.pink.gif') #fff left top no-repeat;
}

/**/

div#p3_startpage div#p3_column_bottom div.box {
	float: left;
	margin: 4px 0px 0px 4px;
}

/**
* Puff -> Right
* Used both on start page and on articles.
**/

div#p3_startpage div#puff_right {
	width: 237px;
	margin: 4px 0px 0px 0px;
}

/**
* Radio
* Wohaa, this was messy to build, so don't mess around
* with these styles/classes too much.
* The radio is split up in different parts and positioned
* so it can expand vertically and still look good.
**/

div#p3_radio {
	width: 241px;
	padding: 0px 0px 30px 0px;
	background: url('/p3/diverse/images/p3start/radio.channels.bottom.gif') left bottom no-repeat;
	z-index:1;
}

/**
* This is the display, wich contains the current radio show
* with an image, a name, the program host and the current
* playing song.
**/

div#p3_radio div.display {
	margin: 12px 0px 0px 0px;
	background: url('/p3/diverse/images/p3start/radio.display.repeat.gif') repeat-y;
	cursor: hand;
}

div#p3_radio div.display div.bg_top {
	position: relative;
	top: -12px;
	padding: 26px 0px 0px 16px;
	background: url('/p3/diverse/images/p3start/radio.display.top.gif') no-repeat;
}

div#p3_radio div.display div.body {
	width: 188px;
	padding: 3px;
}

div#p3_radio a {
	color: #000;
	text-decoration: none;
}

div#p3_radio a:hover {
	text-decoration: underline;
}

/**
* Sets a solid and safe size for the image
* and hides all its overflow.
**/

div#p3_radio div.display div.image {
	float: left;
	width: 50px;
	height: 60px;
	overflow: hidden;
	margin: 0px 4px 4px 0px;
}

div#p3_radio div.display div.image img {
	width: 48px;
	border: 1px solid #000;
}

/**/

div#p3_radio div.display h2 {
	float: left;
	width: 100px;
	height: 25px;
	margin: 0px;
	padding: 8px 0px 0px 30px;
	background: url('/p3/diverse/images/p3start/icon.antenna.black.gif') 0px 2px no-repeat;
	font-size: 10pt;
	font-weight: bold;
	white-space: nowrap;
}

div#p3_radio div.display div.line_dashed_black {
	float: left;
	clear: none;
	width: 125px;
	margin: 6px 0px 6px 0px;
}

div#p3_radio div.display p {
	font-size: 8pt;
	line-height: 8pt;
}

div#p3_radio div.display strong {
	font-weight: bold;
}

div#p3_radio div.display small {
	font-size: 7pt;
}

div#p3_radio div.display div.song {
	clear: both;
	margin-left: 41px;
	padding-left: 15px;
	background: url('/p3/diverse/images/p3start/icon.tone.black.gif') no-repeat;
}

div#p3_radio div.display div.song p {
	font-size: 7pt;
}

/**
* Styles the small field for the listening tips, genereted by Isidor as a menu.
* A javascript will control it's flow and rendering.
**/

div#p3_radio div.tips {
	background: url('/p3/diverse/images/p3start/radio.tips.repeat.gif') repeat-y;
	font-size: 10px;
}

/**
* Sets the top and bottom background, which will be rendered as the
* small box with rounded corners.
**/

div#p3_radio div.tips div.bg_top {
	padding: 36px 0px 0px 0px;
	background: url('/p3/diverse/images/p3start/radio.tips.top.gif') no-repeat;
}

div#p3_radio div.tips div.bg_bottom {
	padding: 4px 0px 9px 10px;
	background: url('/p3/diverse/images/p3start/radio.tips.bottom.gif') left bottom no-repeat;
}

/**
* The actual list/the content.
**/

div#p3_radio div.tips ul {
	margin: 0px 0px 0px 5px;
	padding: 0px;
	list-style: none;
}

/**
* All list items will not be displayed by default.
* Displaying items is controlled by javascript
**/

div#p3_radio div.tips ul li {
	display: none;
	margin: 0px;
	padding: 0px 0px 0px 17px;
	font-size: 10px;
	background: url('/diverse/images/icn_speaker_s_orange.gif') 0px 1px no-repeat;
}

/**/

div#p3_radio div.tips a {
	display: block;
	width: 175px;
	color: #000;
	border: 0px;
}

div#p3_radio div.tips a:hover {
	color: #000;
	border: 0px;
}

/**
* Just as the listening tips, this list is a menu controlled by
* Isidor. It's quite messy and it's expandable.
**/

div#p3_radio div.channels {
	background: url('/p3/diverse/images/p3start/radio.channels.left.repeat.gif') repeat-y;
}

/**
* Defines the box's background, wich is expandable;
* it's a top background (always on top), a bottom background
* (which moves as the content grows) and a background defining
* the box right border.
**/

div#p3_radio div.channels div.bg_bottom {
	background: url('/p3/diverse/images/p3start/radio.channels.left.bottom.gif') left bottom no-repeat;
}

div#p3_radio div.channels div.bg_right {
	background: url('/p3/diverse/images/p3start/radio.channels.right.repeat.gif') right top repeat-y;
}

div#p3_radio div.channels div.bg_left {
	padding: 0px 0px 0px 110px;
	background: url('/p3/diverse/images/p3start/radio.channels.left.top.gif') no-repeat;
}

div#p3_radio div.channels div.body {
	padding: 0px 4px 0px 0px;
	background: url('/p3/diverse/images/p3start/radio.channels.right.gif') right top repeat-y;
}

div#p3_radio div.channels div.bg_body_top {
	width: 127px;
	background: url('/p3/diverse/images/p3start/radio.channels.inside.top.gif') #ffc3ea no-repeat;
}

div#p3_radio div.channels div.bg_body_bottom {
	padding: 15px 10px 15px 10px;
	background: url('/p3/diverse/images/p3start/radio.channels.inside.botto.gif') left bottom no-repeat;
}

/**
* The actual content as a list
**/

div#p3_radio div.channels ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

div#p3_radio div.channels ul li {
	margin: 0px;
	padding: 0px 0px 0px 18px;
	font-size: 10px;
	line-height: 18px;
	background: url('/diverse/images/icn_streaming_black.gif') left center no-repeat;
}

div#p3_radio div.channels a, div#p3_radio div.channels a:hover {
	color: #000;
	border: none;
}


/**
* Toplists
* This is the toplist which also uses the fatbox class.
* Here we will define its content.
**/

div#p3_toplists {
	margin: 4px 0px 0px 0px;
}

div#p3_toplists ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

div#p3_toplists ul li {
	display: block;
	margin: 0px;
	padding: 2px;
	font-size: 10px;
}

div#p3_toplists ul li.odd {
	padding-top: 3px;
	background: url('/p3/diverse/images/p3start/line.dashed.darkpurple.gif') left top #ffecf9 repeat-x;
}

/**
* Styles the type of list it is.
**/

div#p3_toplists ul li.item {
	float: left;
	padding-left: 10px;
}

div#p3_toplists ul li.item a {
	padding: 0px 0px 0px 17px;
	font-size: 10px;
	background: url('/diverse/images/icn_speaker_s_orange.gif') 0px 1px no-repeat;
}

/**
* Styles it's link.
**/

div#p3_toplists ul li.link {
	padding-right: 10px;
	text-align: right;
}

div#p3_toplists ul li.link a {
	padding-left: 10px;
	color: #000;
	border: 0px;
	font-size: 10px;
	background: url('/p3/diverse/images/p3start/arrow.orange.gif') 0px 3px no-repeat;
}


/* Poll */
#p3_startpage .pollform {
border:0;
padding:10px 7px;
text-align:left;
}


.pollform ul li {
    font-weight:normal;
	font-size:11px;
	margin:0px 0px 5px -4px;
width:90%;
}


/* Flash menu fix */
#p3_column_top_middle.flash  object, #p3_column_top_middle.flash embed {
visibility: hidden;
}
#p3_column_top_middle object, #p3_column_top_middle  embed {
visibility: visible;
}