/******************************************************
 *  CSS Reset
******************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clear {
 clear:both;
}

/******************************************************
 *  Basic definitions
******************************************************/

html {
 height:100%;
}

body {
 width:100%;
 height:100%;
 font-family:'DroidSansRegular',Helvetica,sans-serif;
 font-size:12px;
 color:#333;
 line-height:1.4em;
}

/******************************************************
 *  Basic Framework
******************************************************/

#global-wrapper {
 min-height:100%;
 position:relative;
}

#wrapper-head {
 width:100%;
 height:183px;
 background-color:#000;
 background-image:url('../src/header-bg.png');
}

#header, #teaser, #content, #footer {
 width:960px;
 margin:0 auto;
}

#wrapper-teaser {
 width:100%;
 height:457px;
 background:url('../src/slider-bg.png') repeat 0 0;
 border-bottom:3px #ccc solid;
}

#teaser {
 background-color:#555;
 height:100%;
}

#content {
 margin-top:20px;
 padding-bottom:40px;
}

/******************************************************
 *  Header
******************************************************/

#head-logo {
 width:470px;
 float:left;
}

#head-adv {
 width:468px;
 float:left;
 margin-top:36px;
 margin-left:22px;
 height:60px;
}

/******************************************************
 *  Navigation
******************************************************/

#navigation {
 clear:both;
 height:46px;
 margin-top:0;
 text-align:center;
}

#navigation ul {
 width:inherit;
 height:inherit;
 line-height:1 !important;
 margin-bottom:0 !important;
}

#navigation ul li {
 float:left;
}

#navigation ul li.nav-divider {
 background-image:url('../src/navig-div.png');
 display:block;
 height:48px;
 width:2px;
}

#navigation ul li a {
 display:block;
 padding:16px 20px 15px 20px;
 text-decoration:none;
 color:#333;
 font-weight:bold;
 font-size:14px;
}

#navigation ul li a:hover {
 background-color:rgba(255,255,255,0.3);
 border-bottom:3px #333 solid;
}

/******************************************************
 *  Footer
******************************************************/

#wrapper-footer {
 background-color:#ccc;
 margin-top:20px;
 padding:10px 0;
 border-top:1px #aaa solid;
 position:absolute;
 width:100%;
 bottom:0;
 left:0;
}



/******************************************************
 *  Home
******************************************************/

.home-box {
 margin-bottom:20px;
 padding-bottom:20px;
 overflow:auto;
 border-bottom:1px #ccc dotted;
}

.home-left {
 float:left;
 width:460px;
 margin-right:20px;
}

.home-right {
 float:left;
 width:460px;
}

.home-mp3links img {
 margin-right:45px;
 margin-bottom:20px;
}

#teaser {
  position:relative;
  overflow:hidden;
  width: 960px;
  height:457px;
}

#teaser .items {
  width:20000em;
  position:absolute;
}

.items div {
 float:left;
 width:960px;
}

.navi {
    width:200px;
    height:20px;
}

/* items inside navigator */
.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url('../src/navigator.png') 0 0 no-repeat;
    display:block;
    font-size:1px;
    border:none;
    cursor:pointer;
}

/* mouseover state */
.navi a:hover {
    background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
    background-position:0 -16px;
}

#teaser-navi {
 margin:0px auto;
 width:100px;
 padding-left:40px;
 text-align:center;
}

/******************************************************
 *  Preisrätsel
******************************************************/

.competition-box {
 width:438px !important;
 min-height:350px;
 border:1px #ccc solid;
 margin-right:20px;
 padding:10px;
 overflow:auto;
 margin-bottom:20px;
}

form.competition-area {
 display:block;
 margin:0 20px;
 padding:20px;
 border-left:3px #aaa solid;
 background-color:#ccc;
}

/******************************************************
 *  Elements
******************************************************/

h1 {
 margin-bottom:20px;
 color:#333;
 font-size:22px;
 font-weight:bold;
 text-shadow:2px 2px 1px #ccc;
 padding-top:3px;
}

h2 {
 margin-bottom:20px;
 color:#333;
 font-size:18px;
 font-weight:bold;
 text-shadow:2px 2px 1px #ccc;
 padding-top:3px;
}

h3 {
 margin-bottom:10px;
 font-weight:bold;
 font-size:15px;
 text-shadow:1px 1px 1px #ccc;
}

h4 {
 margin-bottom:10px;
 font-weight:bold;
 font-size:12px;
 text-shadow:1px 1px 1px #ccc;
}

p {
 line-height:1.4em;
 margin-bottom:10px;
}

ul {
 line-height:1.4em;
 margin-bottom:10px;
}

a {
 font-weight:bold;
 color:#333;
 display:inline-block;
 border-bottom:1px #333 dotted;
 text-decoration:none;
}

a:hover {
 color:#000;
}

strong, b {
 font-weight:bold;
}

/******************************************************
 *  Style classes
******************************************************/

.justify {
  text-align:justify;
 }

img.content-pic {
 background-color:#ccc;
 padding:5px;
 border:1px #aaa solid;
}

a img.content-pic:hover {
 border-color:#333;
}

a.no-dotted {
 border:none !important;
}

.float-left {
 float:left;
 width:200px;
}

.bold {
 font-weight:bold;
}

input.form-input {
 border:1px #aaa solid;
 padding:7px;
 margin:10px;
 border-radius:5px;
 -moz-border-radius:5px;
}

input.form-input:focus {
 border-color:#777;
 background-color:#eee;
 
}

.winners table {
 border-bottom:1px #ccc solid;
 width:100%;
}