/*
 * Table of Contents:
 * 
 * 1. MACRO -> Layout
 * 2. MACRO -> Typographie
 * 3. MACRO -> Tables
 * 4. MACRO -> Forms
 * 5. MACRO -> Helper
 * 6. MACRO -> Images
 * 7. micro -> Layout
 * 8. micro -> Templates
 *
 */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Layout */

body {
color: #b6b3a0;
background: #030303 url(../media/images/layout/bg.jpg);
font-size: 62.5%;
}

#wrapper {
position: relative;
width: 916px;
min-height: 411px;
padding-top: 287px;
background: url(../media/images/layout/head_band.jpg) no-repeat;
}

body#shop #wrapper {
padding-top: 150px;
width: 600px;
background-image: none;
}

#logo {
position: absolute;
z-index: 1;
top: 35px;
left: 50px;
height: 68px;
width: 310px;
background: url(../media/images/layout/logo.png);
}

body#shop #logo {
top: 50px;
}

#player {
position: absolute;
z-index: 1;
left: 580px;
top: 20px;
}

/* >>> .line, .item */

.line {
float: left;
width: 100%;
display: block;
position: relative;
}

.item {
position: relative;
float: left;
left: 100%;
}



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Typographie */

/* >>> h1, h2, h3, h4, h5, h6 */
h1 {}

body#shop h1 {
position: absolute;
left: 350px;
top: 70px;
color: #fff;
font: 4em Georgia;
}

body#shop h1 a {
position: relative;
top: -6px;
padding: 8px;
border: 1px solid #333;
font-size: 14px;
text-decoration: none;
color: #b6b3a0;
background: #1A1B1F;
}

h2 {
margin-bottom: 10px;
font: bold 28px/30px Arial;
letter-spacing: -2px;
color: #b7ff13;
}

body#shop h2 small {
display: block;
font: bold 14px Georgia;
letter-spacing: 0;
color: #b66636;
}


h3 {}
h4 {}
h5 {}
h6 {}

/* >>> Basetext */
p, li, dd, dt, th, td, label, input, legend, q, address {
font: 14px/19px Georgia, serif;
color: #b6b3a0;
}

/* >>> p */
p {
margin-bottom: 15px;
}

/* >>> ul, ol, li */
ul {}
ol {}
li {}

/* >>> dl, dt, dd */
dl {}
dt { font-weight: bold; }
dd {}

/* >>> table, caption, th, td */
table {}
caption {}
th {}
td {}

/* >>> fieldset, legend */
fieldset {}
legend { 
margin-bottom: 10px;
font-weight: bold; 
}

/* >>> form, label, input.text, textarea */
form {}
label {}
input { color: #000; }
input.text
textarea {}

select {}
option {}

button {}
input.submit {}
input.image {}

/* >>> strong, em */
strong { font-weight: bold; }
em { font-style: italic; }

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Typographie -> Links */

a { color: #B7FF13; }
a:visited {}
a:hover {}
a:active {}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Tables */

table.upcoming-shows,
table.past-shows {
width: 100%;
}

table.upcoming-shows td.date {
color: #fff;
font-style: normal;
}

table.upcoming-shows td.location {
color: #b66636;
}

table.past-shows td.date {
color: #808080;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Forms */

body#shop form {
margin-left: 76px;
}

body#shop form label {
display: block;
margin-bottom: 5px;
}

body#shop form label span.label {
float: left;
width: 150px;
padding-top: 3px;
}

body#shop form fieldset {
margin-bottom: 20px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Helper */

/* >>>>>>>>>>>>>> Helper > Horizontal Lists */

.hl li,
.hl dd {
display: inline;
float: left;
}

/* >>>>>>>>>>>>>> Helper > Clearfix */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* >>>>>>>>>>>>>> Helper > Invisibility */

.invis {
position: absolute;
left: -9999px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Images */

/* >>>>>>>>>>>>>> Images > Icons */
.icon {
background-repeat: no-repeat;
background-position: left center;
}

.icon-audio {
padding-left: 20px;
background-image: url(../media/images/layout/icon_audio.gif)
}

.icon-more {
background-repeat: no-repeat;
background-position: left center;
padding-left: 10px;
background-image: url(../media/images/layout/more.gif);
}

/* >>>>>>>>>>>>>> Images > Replaced */
.replaced {
display: block;
text-indent: -9999px;
}

#header #navigation dt.replaced {
background: url(../media/images/layout/tropfen.png);
width: 61px;
height: 87px;
}

#start .news dt.replaced {
background: url(../media/images/layout/replaced_start_letzte_news.png);
width: 79px;
height: 37px;
}

#start .shows dt.replaced {
background: url(../media/images/layout/replaced_start_die_aktuellen_shows.png);
width: 114px;
height: 38px;
}

#start .shows a.details {
background: url(../media/images/layout/replaced_magnifier.gif);
height: 10px !important;
width: 10px;
line-height: 10px;
}

#start .shows table.past-shows a.details {
background-position: bottom;
}

#start .medien dt.replaced {
background: url(../media/images/layout/replaced_start_medien.png);
width: 103px;
height: 26px;
}

#start .shop dt.replaced {
background: url(../media/images/layout/replaced_start_shop.png);
width: 77px;
height: 26px;
}

#player #playpause a.play {
background: url(../media/images/layout/player/play.png);
width: 38px;
height: 38px;
}

#player #playpause a.pause {
background: url(../media/images/layout/player/pause.png);
width: 38px;
height: 38px;
}

#player #skip a.replaced {
background: url(../media/images/layout/player/skip.png);
width: 27px;
height: 27px;
}

/*
#band h2.replaced {
background: url(../media/images/layout/replaced_band_wir_sind_paraquat.gif);
width: 350px;
height: 49px;
}
*/

#band h2.replaced {
background: url(../media/images/layout/replaced_band_sing_me_songs_from_home.gif);
width: 360px;
height: 69px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Layout */

/* >>>>>>>>>>>>>> #start */
#start {
margin-bottom: 40px;
}

#start .item1,
#start .item2,
#start .item3 {
width: 240px;
}

#start .item1 {
margin-left: -840px;
}

#start .item2 {
margin-left: -540px;
}

#start .item3 {
margin-left: -240px;
}

/* >>>>>>>>>>>>>> #band */
#band .item1,
#band .item2 {
width: 240px;
}

#band .item1 {
margin-left: -840px;
}

#band .item2 {
margin-left: -240px;
}

/* >>>>>>>>>>>>>> #news */
#news .item1 {
width: 540px;
margin-left: -840px;
}

#news .item2 {
width: 240px;
margin-left: -240px;
}

/* >>>>>>>>>>>>>> #shows */
#shows {
position: relative;
left: 76px;
width: 840px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> micro -> Templates */

/* >>>>>>>>>>>>>> #header */

/* >>> #header #banner */
#header #banner a {
display: block;
width: 100%;
}

/* >>> #header #navigation */
#header dl#navigation {
z-index: 1;
background: url(../media/images/layout/header_navigation_bg.gif);
border-bottom: 1px solid #000;
padding-left: 156px;
}

* html #header dl#navigation {
height: 1%;
}

*+html #header dl#navigation {
height: 1%;
}

#header dl#navigation dt {
position: absolute;
z-index: 1;
left: 76px;
margin-top: -35px;
}

#header dl#navigation dd {
font-weight: bold;
font-style: italic;
text-transform: lowercase;
margin-right: 20px;
}

#header dl#navigation dd a {
display: block;
color: #fff;
padding: 10px 5px;
}

#header dl#navigation dd a:hover {
text-decoration: none;
}

/* >>>>>>>>>>>>>> .divider */

.divider {
position: relative;
clear: both;
padding-top: 63px;
margin-left: 76px;
background: url(../media/images/layout/divider_tropfen.jpg) center top no-repeat;
}

* html .divider {
height: 1%;
}

*+html .divider {
height: 1%;
}

.divider q {
display: block;
margin-bottom: 10px;
font-size: 14px;
font-style: italic;
text-align: center;
color: #808080;
}

.divider h1 {
padding-top: 5px;
height: 45px;
background: url(../media/images/layout/divider.jpg) no-repeat;
}

.divider h1 span {
position: absolute;
left: 50%;
padding: 0 20px;
background: url(../media/images/layout/bg.jpg);
}

.divider h1 span.band {
margin-left: -71px;
}

.divider h1 span.news {
margin-left: -73px;
}

.divider h1 span.shows {
margin-left: -88px;
}   

.divider h1 span.kontakt {
margin-left: -105px;
}

.divider h1 span b {
display: block;
}

.divider h1 span.band b {
background: url(../media/images/layout/divider_band.gif);
height: 35px;
width: 103px;
}

.divider h1 span.news b {
background: url(../media/images/layout/divider_news.gif);
height: 37px;
width: 106px;
}

.divider h1 span.shows b {
background: url(../media/images/layout/divider_shows.gif);
height: 37px;
width: 135px;
}    

.divider h1 span.kontakt b {
background: url(../media/images/layout/divider_kontakt.gif);
height: 36px;
width: 180px;
}

.divider a {
margin-left: 5px;
}


/* >>>>>>>>>>>>>>  #player */
#player {
z-index: 999;
}

#player #playpause {
position: absolute;
left: 0;
}

#player #skip {
position: absolute;
left: 40px;
top: 5px;
}

#player #playpause #puff {
display: none;
position: absolute;
z-index: 1;
}

#player #title {
display: block;
margin-left: 75px;
margin-top: 10px;
font: bold 14px Georgia, serif;
color: #fff;
}

/* >>>>>>>>>>>>>> #start */
#start .news dt.replaced,
#start .shows dt.replaced,
#start .medien dt.replaced {
margin-bottom: 20px;
}

/* >>> #start .news */
#start .news h2 {
font: bold 21px/22px Arial, sans-serif;
letter-spacing: -1px;
}

#start .news span.date {
margin: 1px 5px 0 0;
font: 11px Verdana, sans-serif;
color: #fff;
float: left;
}

/* >>> #start .shows */
#start .shows dt.replaced {
position: relative;
left: -9px;
}

#start .shows span.spacer {
display: block;
padding: 5px 0 7px;
border-bottom: 1px solid #333;
font: 11px Verdana, sans-serif;
text-align: center;
background: #1a1b1f;
}

#start .shows span.spacer em {
color: #767679;
background: url(../media/images/layout/arrow_down.gif) left 7px no-repeat;
padding-left: 12px;
}

#start .shows p.no-shows {
text-align: center;
}

#start .shows table tr.cancelled td {
text-decoration: line-through;
color: #666;
}

#start .shows table tr.cancelled td i {
color: #666;
}

#start .shows table.upcoming-shows td,
#start .shows table.past-shows td {
border-bottom: 1px solid #333;
padding-top: 6px;
padding-bottom: 6px;
}

#start .shows table.past-shows td.location,
#start .shows table.upcoming-shows td.location {
width: 100%;
}

#start .shows table.upcoming-shows td.date,
#start .shows table.past-shows td.date {
font: bold 11px Verdana;
padding-right: 10px;
padding-left: 1px;	
vertical-align: middle;
}

#start .shows table.upcoming-shows td.location,
#start .shows table.past-shows td.location {
width: 100%;
font-weight: bold;
}

#start .shows table.upcoming-shows td.location a,
#start .shows table td.location i,
#start .shows table.upcoming-shows td.location em {
font-size: 12px;
font-weight: normal;
}

#start .shows table td.location i {
color: #dcd9c3;
}

#start .shows table.upcoming-shows td.location a:hover {
text-decoration: none;
}

#start .shows table.past-shows td.location,
#start .shows table.upcoming-shows td.location strike {
color: #59595d;
}

#start .shows table.past-shows td.location i,
#start .shows table.upcoming-shows td.location strike a {
color: #545454;
}

#start .shows table.upcoming-shows td.location em {
font-weight: bold;
color: #F6E95D;
}

#start .shows table.past-shows td.details,
#start .shows table.upcoming-shows td.details {
padding-left: 5px;
vertical-align: middle;
width: 1%;
}

/* >>> #start .medien */

/* >>> #start .shop */

#start .shop img {
position: relative;
left: -10px;
}

/* >>>>>>>>>>>>>> #band */

#band {
padding-top: 85px;
margin-bottom: 50px;
background: url(../media/images/layout/band_benjamin.jpg) 320px 50px no-repeat;
}

#band h2.replaced {
position: relative;
left: -36px;
top: -20px;
margin-bottom: 0px;
}

#band .members {
margin-bottom: 35px;
}

#band .members li {
color: #b66636;
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}

#band .members li.email {
margin-top: 10px;
}

#band .members li em {
color: #dcd9c3;
font-weight: normal;
}

#band .discography dt {
position: relative;
padding-bottom: 25px;
margin-bottom: 10px;
border-bottom: 3px double #464646;
}

* html #band .discography dt {
height: 1%;
}

#band .discography dt span.replaced {
position: absolute;
left: 50%;
margin-left: -51px;
width: 102px;
height: 14px;
background: url(../media/images/layout/replaced_band_discography.gif) center no-repeat;
}

#band .discography dd {
margin-bottom: 10px;
font-size: 12px;
line-height: 15px;
text-align: center;
}

#band .discography dd em {
display: block;
color: #808080;
}

#band .item2 p {
line-height: 24px;
}


/* >>>>>>>>>>>>>> #news */

#news .item1 .news-item {
margin-bottom: 30px;
}

#news .item1 h2,
#news .item2 {
padding-top: 20px;
}

#news .item1 h2 .date,
#news .item2 dd span.date {
display: block;
margin-top: -5px;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 0;
color: #fff;
}

#news .item2 dd span.date {
margin-top: 1px;
font-size: 11px;
}

#news .item1 p {
font-size: 16px;
line-height: 24px;
}

#news .item2 dl dt {
background: url(../media/images/layout/replaced_news_news_im_ueberblick.gif);
}

#news .item2 dt {
position: relative;
padding-bottom: 25px;
margin-bottom: 10px;
border-bottom: 3px double #464646;
}

* html #news .item2 dt {
height: 1%;
}

#news .item2 dt span.replaced {
position: absolute;
left: 50%;
margin-left: -76px;
width: 154px;
height: 15px;
background: url(../media/images/layout/replaced_news_news_im_ueberblick.gif) center no-repeat;
}

#news .item2 dd {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #464646;
font: bold 21px Arial;
letter-spacing: -1px;
color: #b7ff13;
}

#news .item2 dd a {
text-decoration: none;
}

#news .item2 dd a:hover {
text-decoration: underline;
}


/* >>>>>>>>>>>>>> #shows */

/* .spacer */
#shows span.spacer {
display: block;
padding: 8px 0 9px;
border-bottom: 1px solid #333;
font: 12px Verdana, sans-serif;
text-align: center;
background: #1a1b1f;
}

#shows table tr.cancelled td {
text-decoration: line-through;
color: #666;
}

#shows table tr.cancelled td.info {
text-decoration: none;
}

#shows table tr.cancelled td a {
color: #666;
}

#shows span.spacer em {
color: #767679;
background: url(../media/images/layout/arrow_down.gif) left 7px no-repeat;
padding-left: 12px;
}

/* #shows table */
#shows table.past-shows {
margin-bottom: 30px;
}

#shows table td {
padding: 10px 0 9px;
border-bottom: 1px solid #474646;
vertical-align: middle;
}

/* td.date */
#shows table td.date {
font: bold 11px Verdana;
width: 1%;
padding-right: 20px;
white-space: nowrap;
}

#shows table td.date small {
display: block;
font-weight: normal;
color: #808080;
}

/* td.location */
#shows table td.location {
font-size: 21px;
width: 1%;
white-space: nowrap;
padding-right: 20px;
}

#shows table td.location a {
font-size: 14px;
font-style: italic;
}

/* td.info */
#shows table td.info {
font-size: 16px;
color: #fff;
}

#shows table td.info a {
color: #fff;
}

#shows table td.info strong {
margin-left: 3px;
padding: 1px 5px;
font-weight: normal;
color: #000;
background: #f5e941;
}

#shows table td.info strong a {
color: #000;
}

/* #shows table.past-shows td.location */
#shows table.past-shows td.location {
font-size: 14px;
font-weight: bold;
color: #59595d;
}

#shows table.past-shows td.location a {
font-size: 12px;
font-weight: normal;
color: #545454;
}

/* #shows table.past-shows td.info */
#shows table.past-shows td.info {
font-size: 14px;
color: #808281;
}

#shows table.past-shows td.info a {
color: #808281;
}

#shows table.past-shows td.info strong {
margin-left: 0;
padding: 0;
color: #fff;
background: transparent;
}

#shows table.past-shows td.info strong a {
color: #fff;
}

/* >>>>>>>>>>>>>> #kontakt */

#kontakt {                                                                        
padding: 210px 0 240px;
background: url(../media/images/layout/footer_jan_benjamin.jpg) 0px 30px no-repeat;
}

#kontakt p {
font-size: 18px; 
text-align: center;
margin-left: 78px;
margin-bottom: 20px;
}

#kontakt p em {
background: black;
padding: 7px 9px;
}

#kontakt address {
margin-left: 78px;  
text-align: center;
font-style: italic;
}

#kontakt address span {
background: black;
}



/* >>> body#shop */

body#shop .notice {
padding: 10px;
border: 1px solid #333;
background: #1a1b1f;
margin-left: 76px;
}

body#shop fieldset img {
float: left;
margin-bottom: 10px;
margin-right: 10px;
}

body#shop fieldset div {
float: left;
}

body#shop strong.price {
display: block;
font-size: 24px;
margin-bottom: 5px;
}

body#shop strong.price small {
font-size: 12px;
font-weight: normal;
}

body#shop label.amount input {
width: 30px;
margin-left: 5px;
}