/*
 * 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 {
font-size: 62.5%;
background: #fff url(../media/images/layout/bg.gif) 250px repeat-y;
}

#splash body {
background: #fff;
}

#wrapper {
width: 100%;
margin-bottom: 90px;
background: url(../media/images/layout/bg_wrapper.gif) repeat-x;
}

#splash #wrapper {
position: relative;
background: none;
width: 500px;
margin: 40px auto 0;
}

#header,
#inner-wrapper {
width: 980px;
}

#header {
position: relative;
background: url(../media/images/layout/bg_header.jpg) no-repeat;
height: 291px;
width: 981px;
}

#header p#language {
position: absolute;
left:48px;
top: 7px;
font: italic 1em Verdana;
}

#header #search,
#header #meta-navigation {
position: absolute;
right: 10px;
}

#header form#search {
top: 70px;
}

#header ul#meta-navigation {
top: 10px;
}

#splash #logo {
position: static;
}

#logo {
display: block;	
position: absolute;
top: 41px;
left: 47px;
width: 312px;
height: 70px;
background: url(../media/images/layout/logo.gif);
}

#splash #logo-twins {
left: 290px;
top: 34px;
}

#logo-twins {
display: block;
position: absolute;
top: 40px;
left: 379px;
height: 70px;
width: 122px;
}

#logo-twins:hover {
background: none;
}

#splash #logo-twins {
background: url(../media/images/layout/bg_header.jpg) -380px -40px;
}

#content,
#navigation,
#context {
float: left;
}

#content {
display: inline;
width: 444px;
padding: 30px 20px 0 50px;
margin: 0 1px 0 251px;
}

#navigation {
width: 250px;
padding-top: 30px;
margin: 0 1px 0 -980px;
}

#context {
overflow: hidden;
width: 169px;
padding: 30px 20px 0 25px;
}

#footer {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
border-top: 1px solid #BFE8F8;
}

#footer ul {
width: 100%;
padding-top: 10px;
padding-left: 21px;
margin-left: -20px;
text-align: center;
}

#footer ul li {
display: inline;
float: left;
padding-top: 5px;
width: 200px;
border-right: 1px solid #eee;
}

#footer .bxslider_wrap .bxslider_container {
width: 100% !important;
}

/* >>> #splash */

#splash #english,
#splash #german {
position: relative;
text-align: center;
float: left;
width: 200px;
margin-top: 120px;
}

#splash #german {
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid #BFE8F8;
}

#splash #english p, 
#splash #german p {
text-align: left;
}

#splash #english img,
#splash #german img {
position: absolute;
top: -70px;
left: 80px;
text-align: center;
margin-bottom: 0px;
}

#context hr {
margin-left: -25px;
width: 214px;
height: 1px;
border: 0;
color: #BFE8F8;
background: #BFE8F8;
}

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

/* >>> Base Typo */
p, li, th, td, input, textarea, img, input, label, textarea, legend {
font: 1.2em/1.6363 Arial, sans-serif;
}

/* >>> h1, h2, h3, h4, h5, h6 */
h1 {
margin-bottom: 20px;
font: 2.2em/1.2727 Georgia, serif;
color: #58585a;
}

h2 {
margin-bottom: 20px;
font: 1.8em/1.2727 Georgia, serif;
color: #58585a;
}

h3 {
margin-top: 25px;
margin-bottom: 20px;
font: 1.4em/1.1428 Georgia, serif;
color: #000;
}

#context h3 {
margin-top: 20px;
margin-bottom: 10px;
}

h4 {}
h5 {}
h6 {}

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

#context p {
margin-bottom: 10px;
line-height: 1.3636;
color: #87888a;
}

/* >>> ul, ol, li */
ul,
ol {
margin-bottom: 20px;
}

li {
margin-bottom: 6px;
}

ol li {
list-style: decimal outside;
}

ul li {
list-style: disc outside;
}

/* >>> dl, dt, dd */
dl {}
dt {}
dd {}

/* >>> small, big */
small {
font-size: 80%;
}

/* >>> table, caption, th, td */
table {
margin-bottom: 20px;	
}
caption {}
th {
font-weight: bold;
}
td {}

/* >>> fieldset, legend */
legend {
margin-bottom: 5px;
font: 1.4em/1.1428 Georgia, serif;
color: #000;
}

*+html legend {
margin-left: -7px;
}

/* >>> form, label, input.text, textarea */
form {}
label {}
input.text {}
textarea {}

select {}
option {}

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

/* >>> 1em */
li li,
td li,
th li,
td p,
th p,
td td,
td th,
th th,
th td {
font-size: 1em;
}

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

a { color: #000; }
a:visited { color: #58585a; }
a:hover { background: #bfe8f8;}
a:active {}

#context a { color: #000; }
#context a:visited { color: #58585a; }
#context a:hover { background: #bfe8f8;}
#context a:active {}

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

table {
border-collapse: collapse;	
}

th, td {
padding: 4px 6px;	
}

th {
border: 1px solid #ddd;	
border-top: 2px solid #bfe8f8;
border-bottom: 2px solid #bfe8f8;
}

td {
border: 1px solid #ddd;
}



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MACRO -> Forms */
form p.note {
float: right;
}

form p.error {
color: red;
margin-bottom: 0;
}

form strong.error {
font-weight: bold;
}

form span.error {
font-weight: bold;
}

form strong.mandatory {
font-size: 1.1em;
line-height: .9em;
color: blue;
}

fieldset {
margin-top: 10px;
width: 100%;
}

input.text, textarea, select {
display: block;
}

input.checkbox {
float: left;
margin-right: 5px;
}

textarea {
height: 150px;
}

label {
display: block;
width: 40%;
margin-bottom: 10px;
}

label.half {
width: 40%;
float: left;
}

label.full {
width: 84.5%;
}

label input.text {
width: 90%;	
}

label.half input.text,
label.full input.text {
width: 90%;	
}

label.half textarea,
label.full textarea {
width: 90%;	
}

button, input.submit {
margin-top: 10px;
}

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

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

.hl li {
float: left;
list-style: none;
}

/* >>>>>>>>>>>>>> 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 */

.clear {
clear: both;
height: 0;
line-height: 0;
}

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

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




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

/* >>>>>>>>>>>>>> Images > Icons */

/* >>> ul#categories */
ul#categories li a {
display: block;
height: 43px;
padding-left: 73px;
padding-top: 10px;
padding-bottom: 10px;
background: url(../media/images/icons_categories.gif) no-repeat;
}

ul#categories li.castrop-rauxel a {
padding-top: 0;
padding-bottom: 20px;
}

ul#categories li.liebe a { background-position: 0 0 }
ul#categories li.ruhrgebiet a { background-position: 0 -70px }
ul#categories li.familie a { background-position: 0 -138px }
ul#categories li.jahreszeiten-und-feste a { background-position: 0 -205px }
ul#categories li.humor a { background-position: 0 -274px }
ul#categories li.castrop-rauxel a { background-position: 0 -340px }
ul#categories li.kinder a { background-position: 0 -407px }
ul#categories li.sonstiges a { background-position: 0 -477px }
ul#categories li.natur a { background-position: 0 -543px }

/* >>> h1 small.category */
h1 small.category span.icon {
padding: 3px 0 3px 24px;
margin-left: 4px;
background: url(../media/images/icons_categories_small.gif) no-repeat;
}

h1 small.category span.liebe { background-position: 0 0 }
h1 small.category span.ruhrgebiet { background-position: 0 -22px }
h1 small.category span.familie { background-position: 0 -44px }
h1 small.category span.jahreszeiten-und-feste { background-position: 0 -66px }
h1 small.category span.humor { background-position: 0 -88px }
h1 small.category span.castrop-rauxel { background-position: 0 -110px }
h1 small.category span.kinder { background-position: 0 -133px }
h1 small.category span.sonstiges { background-position: 0 -155px }
h1 small.category span.natur { background-position: 0 -177px }

/* >>> p#language */
p#language a {
width: 32px;
height: 21px;
}

p#language a.german {
background: url(../media/images/layout/de_new.gif);
}

p#language a.english {
background: url(../media/images/layout/gb_new.gif);
}

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


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

/* >>> #header form#search */
#header form#search input {
border: 0;
padding: 3px;
width: 187px;
font: 1.2em Verdana;
background: #e6e6e6;
}

/* >>> #meta-navigation */
#meta-navigation li {
margin-left: 10px;
font: 1em Verdana;
}

/* >>> #navigation */
#navigation ul li {
margin-bottom: 0;
border-bottom: 1px solid #bfe8f8;
font: 1.1em/2.2727 Verdana;
list-style: none;
}

* html #navigation ul li {
height: 1%;
}

#navigation ul li a,
#navigation ul li strong {
display: block;
}

#navigation ul li a {
margin-left: 57px;	
text-decoration: none;
color: #000;
}

* html #navigation ul li a,
* html #navigation ul li strong {
height: 1%;
}

#navigation ul li a:hover {
font-weight: bold;
background: none;
}

#navigation ul li strong {
padding-left: 57px;	
font-weight: normal;
background: url(../media/images/layout/bg_navigation.gif) no-repeat -99px 9px;
}

#navigation ul li ul {
margin-bottom: 0;
}

#navigation ul li ul li {
border: 0;
border-top: 1px solid #bfe8f8;
font-size: 1em;
}

#navigation ul li ul li a {
margin-left: 77px;
}

#navigation ul li ul li strong {
padding-left: 77px;
background: url(../media/images/layout/bg_navigation.gif) no-repeat -79px 9px;
}

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

/* >>> h1 small.category */
h1 small.category {
display: block;
margin-bottom: 5px;
font-size: 13px;
font-style: italic;
}

/* >>> img.left, img. right */
img.left {
float: left;
margin: 0 10px 10px 0;
}

img.right {
float: right;
margin: 0 0 10px 10px;
}

/* >>> ul#categories */
ul#categories li {
list-style: none;	
font: 2.2em/1.2727 Georgia, serif;
color: #58585a;
}

ul#categories li.castrop-rauxel {
padding-bottom: 15px;
margin-bottom: 15px;
font-size: 2em;
line-height: 1.1em;
border-bottom: 1px solid #BFE8F8;
}

ul#categories li a {
text-decoration: none;
}

ul#categories li a:hover span {
background-color: #bfe8f8;
}

ul#categories li em {
display: block;
font-size: 13px;
}

/* >>> ol#results */
ol#results a {

}

ol#results li {
position: relative;
font-weight: bold;
border-bottom: 1px solid #bfe8f8;
margin-bottom: 8px;
list-style: none;
height: 1%;
}

* html ol#results li { height: 1% }
*+html ol#results li { height: 1% }

ol#results li span.number {
display: block;
position: absolute;
left: -35px;
top: -1px;
width: 33px;
text-align: center;
}

ol#results li p {
font-size: 1em;
margin-bottom: 6px;
color: #87888a;
}

ol#results li h3 {
font-size: 1.2727em;
margin: 0 0 5px;
}

ol#results li h3 a {
color: #000;
}

/* >>> ul.pagination */
ul.pagination {
height: 1%;
margin-left: -8px;
}

* html ul.pagination { height: 1% }
*+html ul.pagination { height: 1% }

ul.pagination li {
margin-right: 4px;
}

ul.pagination li.previous {
margin-right: 10px;
}

ul.pagination li.next {
margin-left: 6px;
}

ul.pagination li a,
ul.pagination li strong {
padding: 4px 8px;
}

ul.pagination li a {

}

/* Tim 2010.02.05. */
#schnell {
position:relative;
margin-left:-50px;
margin-top:-30px;
padding-top:6px;
padding-bottom:-4px;
width:514px;
height:36px;
text-align: center;
background:#BFE8F8;
font-size: 22px;
font-weight:bold;
}