/* --------------------------------------------------------------

BLUEPRINT CSS
* Filename:        grid.css
* Version:         0.7.1 (2008-02-25) YYYY-MM-DD
* Website:         http://code.google.com/p/blueprintcss/

Generated by:
* Blueprint CSS Grid Generator (2009-02-18) [http://kematzy.com/blueprint-generator/]

Based on work by:
* Olav Bjorkoy      [bjorkoy.com]
* Nathan Borror     [playgroundblues.com]
* Jeff Croft        [jeffcroft.com]
* Christian Metts   [mintchaos.com]
* Khoi Vinh         [subtraction.com]

== STRUCTURE: ========================
* Page width:            955 px
* Number of columns:     10
* Column width:          91 px
* Margin width:          5 px
======================================

By default, the grid is 955px wide, with 10 columns
spanning 91px, and a 5px margin between columns.

If you need fewer or more columns, use this formula to calculate
the new total width:

Total width = (number_of_columns * column_width) - margin_width

Read more about using a grid here:
* subtraction.com/archives/2007/0318_oh_yeeaahh.php

-------------------------------------------------------------- */

html, body {
min-height: 100.2%;
}

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:top;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* typography.css */
body {font-size:75%;color:#282828;background:#fff;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
p img {float:left;margin:5px 1.5em 5px 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#e68c0a;}
a {color:#009;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type: disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1em;}
table {margin-bottom:1.4em;}
th {font-weight:bold; /*background:#C3D9FF; */}
th, td {padding:4px 10px 4px 0;}
tr.even td {background:#E5ECF9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}



/* A container should group all your columns. */
#container {
width: 955px;
margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid {
/* background: url(../images/grid.png); */
}

/* Body margin for a sensile default look. */
body {
margin:1.5em 0;
}

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10 {float:left;margin-right: 5px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 91px;}
.span-2  { width: 187px;}
.span-3  { width: 283px;}
.span-4  { width: 379px;}
.span-5  { width: 475px;}
.span-6  { width: 571px;}
.span-7  { width: 667px;}
.span-8  { width: 763px;}
.span-9  { width: 859px;}
.span-10, div.span-10 { width: 955px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 96px;}
.append-2  { padding-right: 192px;}
.append-3  { padding-right: 288px;}
.append-4  { padding-right: 384px;}
.append-5  { padding-right: 480px;}
.append-6  { padding-right: 576px;}
.append-7  { padding-right: 672px;}
.append-8  { padding-right: 768px;}
.append-9  { padding-right: 864px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 96px;}
.prepend-2  { padding-left: 192px;}
.prepend-3  { padding-left: 288px;}
.prepend-4  { padding-left: 384px;}
.prepend-5  { padding-left: 480px;}
.prepend-6  { padding-left: 576px;}
.prepend-7  { padding-left: 672px;}
.prepend-8  { padding-left: 768px;}
.prepend-9  { padding-left: 864px;}



/* Border on right hand side of a column. */
div.border {
padding-right:1.5px;
margin-right:2.5px;
border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
padding-right:91.5px;
margin-right:88.5px;
border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -96px;}
.pull-2 { margin-left: -192px;}
.pull-3 { margin-left: -288px;}
.pull-4 { margin-left: -384px;}
.pull-5 { margin-left: -480px;}
.pull-6 { margin-left: -576px;}
.pull-7 { margin-left: -672px;}
.pull-8 { margin-left: -768px;}
.pull-9 { margin-left: -864px;}
.pull-10 { margin-left: -960px;}

.push-1 { margin-left: 96px;}
.push-2 { margin-left: 192px;}
.push-3 { margin-left: 288px;}
.push-4 { margin-left: 384px;}
.push-5 { margin-left: 480px;}
.push-6 { margin-left: 576px;}
.push-7 { margin-left: 672px;}
.push-8 { margin-left: 768px;}
.push-9 { margin-left: 864px;}
.push-10 { margin-left: 960px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10 {float:left;position:relative;}

/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #E5ECF9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
background: #ddd;
color: #ddd;
clear: both;
float: none;
width: 100%;
height: .1em;
margin: 0 0 1.45em;
border: none;
}
hr.space {
background: #fff;
color: #fff;
}

/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}
.hidden { 
left:-1000em;
position:absolute !important;
top:-1000em;
}

/* Regular clearing
apply to column that should drop below previous ones. */

.clear { clear:both; }

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1em 1.4em 0 1.4em;margin:0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {padding:5px;}
input.title {font-size:1.5em;}
textarea {height:250px;padding:5px;}
button { padding-top: 0 !important; padding-bottom: 0 !important;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
sub, sup {
line-height: 0px;
font-size: 8px;
}
.errors {
color: #FF712E !important;
margin-bottom: 1em;
}
#content .errors {
margin-left: 0;
margin-bottom: 1em;
}
input.invalidValue, input.requiredValue, textarea.invalidValue, textarea.requiredValue {
border: 1px solid #FF712E !important;

}
label.invalidValue, label.requiredValue {
color: #FF712E !important;
}
/* Ab hier wird designt */

body {
background: #333;
}

h1, h2, h3, h4, legend#kontaktformular_legend, legend, span.kuenstler {
font-family: Georgia, serif;
font-weight: bold;
color: #4a2805;
}
h2 {
font-size: 22px;
}
#container div {
color: #282828;
background: #fff6e8;
}
#marginal {
background: none !important;
}
.marginal-text {
margin: 15px auto;
}


/* Links werden beim Anklicken 1px tiefer angezeigt, "haptischer" Effekt */
a:active, a:focus {
position: relative;
top: 1px; 
} 

/* Der Seitenkopf div#header */

#header ul {
margin: 0;
padding: 0;
list-style:none;
height: 235px;
}

/* Die Navigationen div#navi, div#subnavi und div#metanavi */

/*#navi, #subnavi, #metanavi ul {
list-style-type: none !important;
}*/

#navi, #subnavi, #meta {
height: 19px;
margin: 5px 0;
}

#navi {
background: #ff8d00 !important;
}

#subnavi {
background: #ff712e !important;
}

#subnavi {
margin: 0 0 5px 0;
}
#subnavi ul{
margin-right: 0;
}
#metanavi {
background:none !important;
color:white;
text-transform: uppercase;
}
#metanavi ul, #navi ul, #subnavi ul{
list-style-type: none;
margin-left: 15px;
line-height: 1.5em;
}
#metanavi ul li, #navi ul li, #subnavi ul li {
float:left;
margin-right: 1em;
}
#metanavi ul li {
color: #aaa;
}
#metanavi a, #navi a, #subnavi a {
text-decoration: none;
}
#metanavi a {
color: white;
}
#metanavi a:hover, #metanavi a:focus, #metanavi a:active {
text-decoration: underline;
#text-shadow:0 0 12px white;
}

/* Der Contentbereich div#content */
#content {
padding: 15px 0;
}
#content h2, #content h3, #content h4, #content p, #content ul, #content li, #content div, #content table, #content object, #content dl, #content img, #content object {
margin: 0 15px;
}
#content .termin div p, #content .termin div ul, #content .termin div table, #content .termin div object, #content div.anfahrt {
margin: 0;
}


#content .termin div img {
margin-left: 0;
}
#content p, #content ul,  #content table, #content h3, #content h4, #content object, legend#kontaktformular_legend, .teaser h3, .teaser h4 {
font-size: 1.167em;

}
#content p, #content ul,  #content table, #content object {
margin-bottom: 1.286em;
}

 #content ul li ul {
font-size: 1em;
margin-bottom: 0;
}
#content h2,  #content h3, .month_navi h3 {
font-size: 1.833em;
margin-bottom: 1.182em;
}

#programmheading {
/* border-bottom: 1px solid;
padding-bottom: 1em;
margin-bottom: 0em !important; */
}

#content a, .teaser h3 a, .teaser p a, .teaser ul a, .teaser dl a  {
color: #ff712e;
font-weight: normal;
text-decoration: none;
}
#content a:hover, #content a:focus, #content a:active, .teaser dl a:hover, .teaser dl a:focus, .teaser dl a:active{
color: #ff712e;
text-decoration: underline;
}
#content dt {
float: left;
margin-right: 1em;
font-weight: normal;
}
.termin {
margin: 15px 0 !important;
padding: 5px 0 2.5em 0 !important;
/* border-bottom: 1px solid #4A2805; */
background: url(../images/bg/rosette.gif) bottom no-repeat !important;
}

.termin h3 {
color:#4a2805;
}
.termin h4 {
font-size: .9em;
color:#282828;
margin: 0.2em 0.5em 0.5em 15px !important;
}
.termin h4.zwischenueberschrift {
margin: 1em 0 1em !important;

}
#content .termin img {
/* float: left;
margin: 4px 10px 0px 15px; */
margin: 0;
padding:0;
display: block;
}

#content .termin .terminimagecontainer {
float: left;
margin: 4px 10px 0px 15px;
/* width: 187px;
background: #282828; */
padding:0;
}
.terminimagecontainer a {
}

.terminimagecontainer * {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}

#content table {
border-collapse: collapse;
margin: 1em 15px;
width: 541px;
}
/* der Kalender */
div.eventcalendar {
 position: relative;
}
table.eventcalendar {
width: 151px;
background: #fffaf4;
float: right;
margin: 8px 8px 8px 0;
padding: 0;

}
table.eventcalendar td, table.eventcalendar th {
width: 19px;
height: 19px;
margin: 12px;
padding: 3px;
color: #fffaf4;
background: #4a2805;
text-align: right;
border: solid #FFF6E8;
border-right: 2px;
border-bottom: 2px;
border-collapse: collapse;
}

table.eventcalendar th {
text-align: center;
color: #febf0f;}
.month_navi  {
position: absolute;
top: 0;
left: 0;
margin: 15px 0 15px 15px;
}
.month_navi h3 {
font-family: Georgia, serif;
margin-left: 0 !important;
font-size: 4em;
}
.month_navi h3 a {
color: #4A2805;
font-weight: bold;
text-decoration: none;
}

.month_navi h3 a:hover, .month_navi h3 a:focus, .month_navi h3 a:active {
color: #ff712e;
}

#event_prevnext {
position: absolute;
bottom: 0;
margin: 0 0 15px 15px;;
width: 119px;
}
#event_prevnext a {
margin: 0 !important;
background-image: url('../images/elements/pfeile.gif');
width: 45px;
background-repeat:no-repeat;
text-indent:-2000px;
outline:none;
margin: 0;
display: block; 
float: left;
}
#event_prevnext img {
display: block;
float: left;
line-height: 0;
margin: 19px 0 0 0;
padding: 0;
display: block;
width: 29px;

}
a#next_month {
height: 22px;
background-position: -45px 0px;
}
a#previous_month {
height: 23px;
background-position: 0px 0px;
}
a#next_month:hover, a#next_month:active, a#next_month:focus  {
background-position: -45px -23px;
}
a#previous_month:hover, a#previous_month:active, a#previous_month:focus  {
background-position: 0px -23px;
}

table.eventcalendar td.event {
color: #fffaf4;
/* background: #952805 !important; */
}
table.eventcalendar td.event a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #febf0f;
font-weight: bold;
}
table.eventcalendar td.ec_nonpublic {
background: #92714d;
}
table.eventcalendar td.ec_nonpublic a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #febf0f;
font-weight: bold;
}
/* Termindetail */
#termindetail input, #termindetail textarea{
margin-bottom: 1em;
} 
#mitgliedsdaten input, #mitgliedsdaten textarea, #mitgliedsdaten select {
margin: 0.6em 0;
}
#ContactForm .digits2, #termindetail .digits2, #mitgliedsdaten .digits2 {
width: 1.5em;
text-align: right;
}
#mitgliedsdaten label {
display: block;
float: left;
width: 8em;
text-align: right;

margin: 1em 0;
}
#amount, #member {
display: block;
float: left;
}
#member {
margin-top: 2.5em;
}
#amountlabel, #memberlabel {
margin-left: 3.5em;
margin-top: 1em;
display: block;
}
#mitgliedsdaten .digits4, #termindetail .digits4 {
width: 3em;
text-align: right;
}
#termindetail .digits20 {
width: 12em;
}
#termindetail label.fixedwidth {
display: block;
width: 20em;
float: left;
}
table.mceEditor{
margin-left: 0 !important;
/* width: 100% !important; */
}
iframe#mce_editor_1 {
width: 100% !important;
}
.mceEditorIframe {
padding: 0;
margin: 0;
}
.mceEditorIframe  {
margin: 0 !important;
}
.debug {
background: black;
color: white;
}
fieldset {
border: none
}
.eingetragen {
background: #ffff9c;
}
.ready {
background: #d8fba6;
}
#termindetail textarea.halbhoch {
height: 40px;
}
#termindetail textarea.zweidrittelhoch {
height: 120px;
}
table#terminuebersicht tr {
border-color: #282828;
border-bottom: 1px dotted #282828;
}

table#terminuebersicht td, table#terminuebersicht th {
padding-right: 5px;
}
table#terminuebersicht th {
font-weight: normal;
}

#content table h4 {
margin: 0.5em 0 0 0;
font-size: 1em;
}
tr {
border: #E68C0A dotted;
border-width: 1px 0 0 0;
}
/* Der Button zum Termindetail */
.new_event, .edit_event {
float: right !important;
width: 15px;
margin: 0 15px !important;
}
.new_event img, .edit_event img {
margin: 0 !important;
float: none !important;
}

table#terminuebersicht .new_event, table#terminuebersicht .edit_event {
margin: 0 !important;
}
/* Anmeldeformular */
#wlpeLoginCount, #wlpeUserInfo, #wlpeWelcome, #wlpeWelcomeParagraph, #wlpeUserForm, #wlpeUserButtons{
margin: 0 !important;
}
#wlpeUsernameLabel, #wlpePasswordLabel, #wlpeStayLoggedInLabel {
display:block;
float: left;
width: 10em;
margin-right: 1em;
}
legend#newsletter_legend {
font-weight: normal;
font-size: 1em !important;
}
.teaser {
margin-bottom: 5px;
}
.pointer {
cursor: pointer;
}
.teaser h3, .teaser p, .teaser dl, .teaser ul {
margin: 5px 15px;
list-style-position: inside;
}
.teaser dt {
float: left;
margin-right: 0.5em;
font-weight: normal;
}
.teaser img {
float: right;
}

/* 99cent  */
.sponsor {
float: right;
width: 180px;
padding: 1em;
margin: 0;
}
.sponsor img {
margin: 0.5em 0;
float: none;
}
.horizontallist {
width: 90%;
margin-bottom: 5em !important;
}
.horizontallist li {
list-style-type: none;
width: 25%;
float: left;
margin-left: -1em;
}
/* Ende 99cent  */



/* Navi */
#navi ul, #subnavi ul {
position: relative;
}

#navi li, #subnavi li{
float: left;
position: relative;
color: black;
}

#navi li em, #subnavi li em {
background-image:url(../images/elements/gk_menue.gif);
background-repeat:no-repeat;
z-index: 1;
position: absolute;
top: 0; left: 0;
height:17px;
outline:none;

}
#navi li em, #navi li a em, #subnavi li em, #subnavi li a em{
display: block;
height: 17px;
}
/* Programm */
#navi18  {
width:75px;
}
#navi18 em {
background-position:  0px -40px ;
width:75px;
}
#navi18 a em {
background-position:   0px 1px ;
width:75px;
}
#navi18 a:hover em , #navi18 a:active em, #navi18 a:focus em {
background-position:  0 -20px ;
}
/* Verein */
#navi2 {
width:49px;
}
#navi2 em {
background-position: -104px -40px ;
width:49px;
}
#navi2 a em {
background-position:  -104px 1px ;
width: 49px;
}
#navi2 a:hover em, #navi2 a:focus em, #navi2 a:active em {
background-position:  -104px -20px ;
}
/* Feiern */
#navi4 {
width:48px;
}
#navi4 em {
background-position:  -182px -40px ;
width:48px;
}
#navi4 a em {
background-position:  -182px 1px ;
width: 48px;
}
#navi4 a:hover em, #navi4 a:active em, #navi4 a:focus em {
background-position:  -182px -20px ;
}


/* Die CD */
#navi29 {
width:17px;
overflow: hidden;
}
#navi29 em {
background-position:  -259px -40px ;
width:17px;
}
#navi29 a em{
background-position:  -259px 1px ;
width: 17px;
}
#navi29 a:hover em, #navi29 a:active em, #navi29 a:focus em{
background-position:  -259px -20px ;
}
/* Blog */
 #navi8 em {
background-position:  -305px -74px ;
width:35px;
}
#navi8 a em {
background-position:  -305px 1px ;
width: 48px;
}
#navi8 a:hover em, #navi8 a:active em, #navi8 a:focus em {
background-position:  -305px -20px ;
}
/* Terminübersicht */
#navi23 {
width:126px;
}
#navi23 em{
background-position:  -369px -41px ; /* vertikale Korrektur um 1 px ggü. den anderen*/
width:126px;
}
#navi23 a em{
background-position:  -369px 1px ;
width: 126px;
}
#navi23 a:hover em, #navi23 a:active em, #navi23 a:focus em {
background-position:  -369px -20px ;
}

/* Newslettertool */
#navi47 {
width:115px;
}
#navi47 em{
background-position:  -1879px -40px ;
width:115px;
}
#navi47 a em{
background-position:  -1879px 1px ;
width: 115px;
}
#navi47 a:hover em, #navi47 a:active em, #navi47 a:focus em {
background-position:  -1879px -20px ;
}


/* Verein / h13 e.V. */
#navi3 em{
width:86px;
}
#navi3 em{
background-position:  -888px -40px ;
width:86px;
}
#navi3 a em{
background-position:  -888px 1px ;
width: 86px;
}
#navi3 a:hover em, #navi3 a:active em, #navi3 a:focus em{
background-position:  -888px -20px ;
}

/* Cocktails */
#navi5 {
width:73px;
}
#navi5 em {
background-position:  -1006px -40px ;
width:73px;
}
#navi5 a em{
background-position:  -1006px 1px ;
width: 73px;
}
#navi5 a:hover em, #navi5 a:active em, #navi5 a:focus em {
background-position:  -1006px -20px ;
}

/* 99cent Theater */
#navi6 {
width:113px;
}
#navi6 em {
background-position:  -1256px -40px ;
width:113px;
}
#navi6 a em{
background-position:  -1256px 1px ;
width: 113px;
}

#navi6 a:hover em, #navi6 a:active em, #navi6 a:focus em{
background-position:  -1256px -20px ;
}

/* 99cent Theater / „Echte Gefühle“ */
#navi39 {
width:116px;
}
#navi39 em {
background-position:  -1399px -40px ;
width:116px;
}
#navi39 a em {
background-position:  -1399px  1px ;
width: 116px;
}

#navi39 a:hover em, #navi39 a:active em, #navi39 a:focus em{
background-position:  -1399px -20px ;
}


/* 4 Stunden, 4 DJs */
#navi7 {
width:118px;
}
#navi7 em{
background-position:  -1108px -40px ;
width:118px;
}
#navi7 a em {
background-position:  -1108px 1px ;
width:118px;
}
#navi7 a:hover em, #navi7 a:active em, #navi7 a:focus em{
background-position:  -1108px -20px ;
} 


/* Künstler */
#navi30 {
width:69px;
}
#navi30 em{
background-position:  -1545px -40px ;
width:69px;
}
#navi30 a em {
background-position:  -1545px 1px ;
width: 69px;
}
#navi30 a:hover em, #navi30 a:active em, #navi30 a:focus em {
background-position:  -1545px -20px ;
}

/* Party */
#navi32 {
width:43px;
}
#navi32 em {
background-position:  -1644px -40px ;
width:43px;
}
#navi32 a em {
background-position:  -1644px 1px ;
width: 43px;
}
#navi32 a:hover em, #navi32 a:active em, #navi32 a:focus em {
background-position:  -1644px -20px ;
}

/* Presseinformation */
#navi31 {
width:50px;
}
#navi31 em {
background-position:  -1716px -40px ;
width:50px;
}
#navi31 a em {
background-position:  -1716px 1px ;
width: 50px;
}
#navi31 a:hover em, #navi31 a:active em, #navi31 a:focus em{
background-position:  -1716px -20px ;
}

/* Erwerb */
#navi33 {
width:54px;
}
#navi33 em {
background-position:  -1796px -40px ;
width:54px;
}
#navi33 a em {
background-position:  -1796px 1px ;
width: 54px;
}
#navi33 a:hover em, #navi33 a:active em, #navi33 a:focus em{
background-position:  -1796px -20px ;
}

/* Anlage */
#navi50  {
width:50px;
}
#navi50 em {
background-position:  -2023px -40px ;
width:50px;
}
#navi50 a em {
background-position:   -2023px 1px ;
width:50px;
}
#navi50 a:hover em , #navi50 a:active em, #navi50 a:focus em {
background-position:   -2023px -20px ;
}

/* @group Layouts for resolutions */

/*layouts smaller than 600px, iPhone and mobiles*/
@media all and (max-width: 480px)  {  
	
	body, #container, #header, #header img, #header ul, #navi.span-10, #subnavi.span-10, #metanavi.span-10, #content {
		width: 480px;
	}
	#header ul {
		height: 118px;
	}

}

@media screen and (min-width: 920px) {
	/*layouts larger than 900px*/
}	

@media screen and (min-width: 1350px) {
	
	
@media screen and (min-width: 1500px) {
	}
	
/*Just iPhone*/
@media only screen and (max-device-width: 480px) {

}
	
/*iPad styles*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	}

/* @end */