/*
 * style sheets for screen layout
 * 
 * @author    maik mettenheimer <http://www.mettbox.de>
 * @project   efellow charity staffel
 * @version   2008-11
 * 
 *   colors:  red:     #cc3333
 *            green:   #a2bd30
 *            gray:    #999999
 *            blue:    #006f9d
 *            orange:  #fe830b
 *            green2:  #33a79d
 */

/* general
------------------------------------------------------------------------------*/

body {
    background-color: #fff;
}

.wrapper {
    width: 980px;
    margin: 0 auto;
}

.clear {
    float: none;
    clear: both;
    width: 100%;
    display: block;
}

/* intro
------------------------------------------------------------------------------*/

body.intro {
    background: #000 url(../img/introbackground5.jpg) no-repeat top left;
    text-align: center;
}

body.intro h1 {
    text-indent: -5000em;
}

body.intro div#player {
    margin: 200px auto 10px auto;
}

body.intro p {
    text-align: center;
}

body.intro a {
    color: #fff;
}

/* logo
------------------------------------------------------------------------------*/

#header {
    position: relative;
    margin: 0;
    height: 181px;
    background: url(../img/bg_branding.gif) repeat-x;
}

#header h1 {
    width: 779px;
    height: 181px;
    background: url(../img/bg_logo.gif) no-repeat top right;
}

#header h1 a {
    display: block;
    width: 262px;
    height: 99px;
    top: 64px;
    position: relative;
}

#header h1 a span {
    background: url(../img/charity-staffel.jpg) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* service navigation
------------------------------------------------------------------------------*/

#serviceNav {
    position: absolute;
    top: 12px;
}

#serviceNav h2 {
    display: none;
}

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

#serviceNav li {
    float: left;
    margin: 0.5em 0;
    padding: 0 8px;
    color: #ededed;
    line-height: 1em;
    background: url(../img/divider_ed.gif) repeat-y left top;
}

#serviceNav li.first {
    background: none;
    padding: 0 8px 0 0;
}

#serviceNav a:link,
#serviceNav a:visited {
    color: #ededed;
    text-decoration: none;
    padding: 0;
    margin: 0;
    background: none;
}

#serviceNav a:active,
#serviceNav a:focus,
#serviceNav a:hover,
#serviceNav li.active a {
	text-decoration: underline;
}


/* main nvigation
------------------------------------------------------------------------------*/

.mainNavWrapper {
    background: url(../img/bg_mainNavWrapper.gif) repeat-y center top;
}

#mainNav {
    background:  url(../img/bg_mainNav_red.gif) repeat-x center;
    border-top: 1px solid #fff;
    padding: 6px 0;
    height: 3.5em;
}

#mainNav h2 {
    display: none;
}

/* neuigkeiten */
body.neuigkeiten #mainNav {
	background: #33a79d url(../img/bg_mainNav_green2.gif) repeat-x center;
}
body.neuigkeiten #mainNav li.active a {
    background-color: #33a79d;
}

/* charity staffel */
body.charity-staffel #mainNav,
body.unsere-idee #mainNav,
body.unser-team #mainNav,
body.das-netzwerk #mainNav,
body.strecken #mainNav {
	background: #cc3333 url(../img/bg_mainNav_red.gif) repeat-x center;
}
body.charity-staffel #mainNav li.active a,
body.unsere-idee #mainNav li.active a,
body.unser-team #mainNav li.active a,
body.das-netzwerk #mainNav li.active a,
body.strecken #mainNav li.active a {
    background-color: #cc3333;
}

/* teilnehmer */
body.teilnehmer #mainNav,
body.helfer #mainNav,
body.laeufer #mainNav,
body.rechtliches #mainNav {
	background: #fe830b url(../img/bg_mainNav_orange.gif) repeat-x center;
}
body.teilnehmer #mainNav li.active a,
body.helfer #mainNav li.active a,
body.laeufer #mainNav li.active a,
body.rechtliches #mainNav li.active a {
    background-color: #fe830b;
}

/* unternehmen */
body.unternehmen #mainNav,
body.benefits #mainNav,
body.ueberblick #mainNav,
body.foerderstufen #mainNav {
	background: #006f9b url(../img/bg_mainNav_blue.gif) repeat-x center;
}
body.unternehmen #mainNav li.active a,
body.benefits #mainNav li.active a,
body.ueberblick #mainNav li.active a,
body.foerderstufen #mainNav li.active a {
    background-color: #006f9b;
}

/* presse */
body.presse #mainNav {
	background: #a2bd30 url(../img/bg_mainNav_green.gif) repeat-x center;
}
body.presse #mainNav li.active a {
    background-color: #a2bd30;
}

/* das hilfsprojekt */
body.das-hilfsprojekt #mainNav,
body.lebenshilfe-fuer-afrika-ev #mainNav,
body.das-projekt #mainNav {
    background: #999 url(../img/bg_mainNav_grey.gif) repeat-x center;
}
body.das-hilfsprojekt #mainNav li.active a,
body.lebenshilfe-fuer-afrika-ev #mainNav li.active a,
body.das-projekt #mainNav li.active a {
    background-color: #999;
}

/* service navigation */
body.startseite #mainNav,
body.kontakt #mainNav,
body.impressum #mainNav,
body.partner #mainNav,
body.kontaktformular-gesendet #mainNav,
body.agb #mainNav {
    background: url(../img/bg_mainNav_trans.gif) repeat-x center;  
}

#mainNav ul {
    margin: 0 auto;
    padding: 0;
    width: 980px;
}

#mainNav li {
    display: inline;
    line-height: 1.7em;
}

#mainNav a {
    color: #ededed;
    text-decoration: none;
    padding: 3px 10px 6px;
}

#mainNav ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

#mainNav li.active a {
    color: #fff;
    background: #cc3333;
}

#mainNav li.active a:hover {
	text-decoration: none;
}

#mainNav ul li ul {
    display: none;
    float: left;
    margin: .6em 0 0 0;
    padding: 0;
    list-style-type: none;
    background: none;
}

#mainNav ul li.active ul li {
    line-height: 1em;
}

#mainNav ul li.active ul li a {
    color: #ededed;
    font-weight: normal;
    background: none;
    padding: 2px 10px 1px;
}

#mainNav ul li.active ul li.active a,
#mainNav ul li.active ul li a:hover {
    text-decoration: underline;
}

#mainNav ul li.active ul li.active a {
    color: #fff;
}

#mainNav ul li.active ul {
    display: block;

}

/* sub navigation
------------------------------------------------------------------------------*/

#subNav {
    background-color: #cc3333;
    margin-top: -1px;
    padding: 4px 0;
}

#subNav ul {
    margin: 0;
    padding: 0;
}

#subNav li {
	display: inline;
}

#subNav a {
    color: #ededed;
    text-decoration: none;
    padding: 2px 10px 2px;
}

#subNav li.current a {
    color: #fff;
    text-decoration: underline;
}

#subNav a:hover {
    color: #ededed;
    text-decoration: underline;
}

/* content_container
------------------------------------------------------------------------------*/

#content_container {
}

.wrapperBackground {
    float: left;
    background: url(../img/bg_primaryContent.gif) repeat-y left top;
}

/* primaryContent
------------------------------------------------------------------------------*/

#primaryContent {
    background: url(../img/bg_primaryContent.gif) repeat-y center top;
    width: 779px;
    float: left;
}

#primaryContent .wrapper {
    margin: 20px 10px;
    width: auto;
}

body.startseite #primaryContent .wrapper {
    margin: 0 10px;
}

/* start */

.box {
    float: left;
    margin: 10px 0;
}

.box h2 {
    display: inline;
    float: left;
    margin-right: 10px;
    font-size: 1em;
}

.box h2 a {
    display: block;
    width: 123px;
    height: 124px;
    position: relative;
}

.box h2 a span {
    position: absolute;
    width: 100%;
    height: 100%;
}

.btn_news h2 a span {
    background: url(../img/btn_news.gif) no-repeat;
}

.btn_staffel h2 a span {
    background: url(../img/btn_staffel.gif) no-repeat;
}

.btn_teilnehmer h2 a span {
    background: url(../img/btn_teilnehmer.gif) no-repeat;
}

.btn_unternehmen h2 a span {
    background: url(../img/btn_unternehmen.gif) no-repeat;
}

.btn_presse h2 a span {
    background: url(../img/btn_presse.gif) no-repeat;
}

.box p {
    float: left;
    background-color: #ededed;
    width: 600px;
    height: 95px;
    padding: 10px;
}

.box p img {
    float: left;
    margin: 2px 10px 0 0;
}

.box p a {
    white-space: nowrap;
}

/* secondaryContent
------------------------------------------------------------------------------*/

#secondaryContent {
    width: 199px;
    float: left;
}

#secondaryContent .wrapper {
    margin: 20px 10px;
    width: auto;
}

#secondaryContent a {
    padding: 0;
    background: none;
    float: left;
    margin: 5px 5px 5px 0;
}

#secondaryContent p {
    text-align: left;
    font-weight: bold;
}

#secondaryContent img {
    float: left;
    margin: 0;
    padding: 0;
}

#secondaryContent #contributors {
    padding-bottom: 20px;
}

#secondaryContent img,
#secondaryContent #tvsponsoren img {
    clear: both;
    margin: 1em 0;
    padding: 0;
    border: 0 none;
}

#secondaryContent #tvsponsoren {
        
}

/* footer
------------------------------------------------------------------------------*/

#footer {
    clear: both;
    background: url(../img/bg_footer.gif) repeat-x top left;
    height: 35px;
    color: #ededed;
}

#footer .info {
    margin: 0;
    padding: 0;
    line-height: 35px;
    text-align: left;
    background: url(../img/bg_footertext.gif) no-repeat top left;
}

#footer .info p {
    text-align: center;
    line-height: 30px;
    width: 780px;
}

#footer a:link,
#footer a:visited {
    background: none;
    color: #ededed;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

#footer a:active,
#footer a:focus,
#footer a:hover {
    text-decoration: underline;
    color: #fff;
}

/* ditto pagination
------------------------------------------------------------------------------*/

#ditto_pages {
    margin-top: 2em;
}

.ditto_paging {
    border-top: 1px solid #ccc;
    padding: 10px; 
    font-size: 86%;
    color: black;
}

#ditto_pages .ditto_currentpage {
    border: 1px solid #999;
    padding: 1px 5px 2px; 
    margin-right: 1px;
    background-color: #999; 
    color: #fff;
} 

#ditto_pages .ditto_off {
    border: 1px solid #ccc;
    padding: 1px 5px 2px; 
    margin-right: 1px;
    color: #ccc;
}

#ditto_pages a,
#ditto_pages a:link,
#ditto_pages a:visited {
    border: 1px solid #999; 
    padding: 1px 5px 2px; 
    margin-right: 1px; 
    text-decoration: none !important; 
    color: black;
} 

#ditto_pages a:hover {
    background-color: #fff;
    color: #000;
}


/* participant data
------------------------------------------------------------------------------*/

div.dataBox {
    background-color: #eaeaea;
    border: 1px solid #666;
	line-height: 2;
	margin: 10px 0;
}

div.dataBox h3 {
    background-color: #666;
    color: #fff;
    padding: 0.5em 1em;
    margin: 0;
    font-size: 120%;
}

div.dataBox table,
div.dataBox p {
	margin: 0.5em 1em;
}

div.dataBox table th {
	font-weight: bold;
	background-color: #eaeaea;
}