﻿/**
 * @css-for		screen (all browsers)
 
 * @author		Andreas Lenz (Lenz KD)
 * @version		0.4
 * @date		2008-04-23
 * @see			http://www.lenz-kd.de/
 * @copyright	2008 by Andreas Lenz
 */

/**
 * general formats
 */
* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	margin-bottom: 1px;
}
body {
	font-size: 0.9em;
	line-height: 1.3em;
}
abbr, acronym {
	cursor: help;
}

/**
 * invisible elements
 */
#skipnavi, #navigation h2, #search h2 { /*#content h3*/
	display: none;
}

/**
 * interactive world map
 */
#world {
	width: 215px;
	height: 110px;
	position: absolute;
	top: 8em;
	left: 48.2em;
	z-index: 2;
	background: url("../images/karte.png") no-repeat;
}

/**
 * general layout elements
 */
#page {
	position: relative;
	width: 63.4em;
	margin: 0 auto;
}
#head {
	width: auto;
	height: 210px;
	background: url("../images/bg_oben.png") center top no-repeat #edebe8;
}
#navigation {
	width: 13em;
	float: left;
	padding: 2.5em 0.5em 0 0;
	background: url("../images/verlauf-aussen.png") top repeat-x #fcfcfc;
	min-height: 565px;
}
#content {
	width: 36em;
	float: left;
	background: url("../images/verlauf-innen.png") top repeat-x #fefefe;
	min-height: 565px;
	padding: 0 0.2em;
}
#search {
	width: 13em;
	margin-left: 49.9em;
	padding: 2.5em 0 0 0.5em;
	background: url("../images/verlauf-aussen.png") top repeat-x #fcfcfc;
	min-height: 565px;
}
#foot {
	clear: both;
	background: url("../images/bg_foot.gif") top repeat-x #dfeaf4;
	border-top: 3px solid #86afd7;
	border-spacing: 2px;
	color: #7a945d;
	font-size: 0.75em;
	padding: 0.2em 1.5em;
}

/**
 * head elements
 */
h1 {
	margin: 0;
	float: left;
	padding: 17px 0 0 8px;
}
h1 a {
	display: block;
	width: 164px;
	height: 126px;
	text-indent: -10000px;
	background: url("../images/logo.png") left top no-repeat;
}
#head p {
	width: 188px;
	height: 142px;
	margin: 0 0 0 225px;
	text-indent: -10000px;
	background: url("../images/indi.png") left bottom no-repeat;
}

/**
 * navigation elements
 */
#navigation h4 {
	font-size: 1.2em;
	text-transform: lowercase;
	color: #7a945d;
	padding: 0 0 0.2em 1em;
	background: url("../images/linie_navi-h4.gif") bottom repeat-x;
}
#navigation h4 span {
	font-size: 0.6em;
}
#navigation ul {
	list-style: none;
	margin: 0.5em 0 1.7em 1.7em;
	font-size: 0.75em;
}
#navigation li {
	display: inline;
}
#navigation a {
	display: block;
	color: #7a945d;
	text-decoration: none;
	padding-left: 1em;
}
#navigation a:hover {
	color: #000;
	background: url("../images/quadrat.gif") left no-repeat;
}

/**
 * subnavigation elements
 */
#content #subnavi {
	list-style: none;
	text-align: right;
	margin: 0 0 1.3em;
	border-bottom: 1px solid #86afd7;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 1em;
}
#subnavi li {
	display: inline;
	font-size: 0.75em;
	padding: 0 1em;
	background: url("../images/quadrat.gif") left no-repeat;
}
#subnavi a {
	font-weight: bold;
	color: #7a945d;
	text-decoration: none;
}
#subnavi a:hover {
	color: #000;
}
h2.subnavi {
	display: none;
}

/**
 * backnavigation elements
 */
#backnavi {
	list-style: none;
	margin: 1.2em 0.7em;
	background: url("../images/linie_navi-h4.gif") bottom repeat-x;
}
#backnavi li {
	display: inline;
	font-size: 0.75em;
	padding: 0 1em;
	background: url("../images/quadrat.gif") left no-repeat;
}
#backnavi a {
	color: #8c8c8c;
	text-decoration: none;
}
#backnavi a:hover {
	color: #86afd7;
}

/**
 * teaser images
 */
#teaser-img {
	list-style: none;
	margin: 1em 0.55em;
}
#teaser-img li {
	display: inline;
}
#teaser-img img {
	border: 1px solid #7a945d;
}

/**
 * world map (flash movie) used as filter for journey search
 */
#worldmap {
	width: 515px;
	margin: 0 0 1.4em 0;
	border: 1px solid #7a945d;
}

/**
 * content elements
 */
#content h2 {
	margin: 0 0 0.9em;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 1.3em;
}
#content h3 {
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-weight: bold;
	margin: 1.1em 0;
	font-size: 1.1em;
}
#content h4 {
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 0.9em;
	margin: 0.2em 0;
}
#content h5 {
	margin: 0.5em 0 1.1em;
	padding: 0 0 0.2em;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-weight: normal;
	letter-spacing: 0.1em;
	background: url("../images/linie_navi-h4.gif") bottom repeat-x;
	font-size: 1em;
}
#content h5 a {
	text-decoration: none;
	color: #356a9f;
}
#content h5 a:hover {
	color: #000;
}
#content h6 {
	font-weight: bold;
	font-size: 0.9em;
	margin: 0.2em 0;
	clear: both;
}
#content p, #content ul {
	font-family: "Georgia", "Times New Roman", Times, serif;
	margin: 0 0 1.1em;
	font-size: 0.8em;
}
#content div.content ul, #content ul {
	margin-left: 1.2em;
}
#content div.travel div.content ul {
	margin-left: 0;
}
#content div.travel div.content ul li {
	display: inline;
	margin-right: 0.3em;
	background: url("../images/punkt.gif") left no-repeat;
	padding-left: 1em;
}
hr {
	margin: 1em 0 1.6em;
	border-bottom: none;
	border-left: none;
	border-top: 1px solid #6f6f6f;
	clear: both;
}
.greeting {
	margin-top: 1.1em;
}
#content .links {
	list-style-type: none;
	text-align: right;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 1em;
}
.links li {
	display: inline;
	font-size: 0.8em;
	padding: 0 1em;
	background: url("../images/quadrat.gif") left no-repeat;
}
.links li a {
	font-weight: bold;
	text-decoration: none;
	color: #6f6f6f;
}
.links li a:hover {
	color: #000;
}

/**
 * container for special offers on frontpage
 */
#special-offer {
	margin-bottom: 1em;
	background: url("../images/linie_navi-h4.gif") bottom repeat-x #fff;
	line-height: 1em;
	padding-bottom: 0.6em;
}
#special-offer h3 {
	background: url("../images/linie_navi-h4.gif") top repeat-x;
	padding: 0.6em 0 0.6em 0.6em;
	font-family: "Georgia", "Times New Roman", Times, serif;
}
#special-offer .clear {
	clear: both;
}
#content #offers {
	list-style: none;
	padding: 0 0.9em;
	margin: 0;
}
#content #offers li {
	float: left;
	width: 21em;
	min-height: 15em;
	padding: 0 0.5em 0 0;
	margin-bottom: 0.5em;
}
#special-offer a {
	color: #356a9f;
	text-decoration: none;
}
#special-offer a:hover {
	text-decoration: underline;
}
#offers h4 {
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	margin: 0 0 0.3em 0;
}
#offers h5 {
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	background: none;
	font-weight: bold;
	letter-spacing: normal;
	margin: 0 0 0.6em 0;
	min-height: 3em;
	padding: 0;
}
#offers .price {
	font-size: 1em;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-weight: bold;
	color: #7a945d;
	margin: 0;
}

/**
 * single thumbnail in journey overview
 */
.previewimage {
	float: left;
	width: 110px;
	margin-right: 1em;
}
.previewimage img {
	border: none;
}

/**
 * images in detailed journey descriptions
 */
#previewcontainer {
	float: left;
	width: 250px;
}
#content div.travel div.content #gallery {
	list-style: none;
	margin-left: 23em;
	width: auto;
	min-height: 200px;
}
#content div.travel div.content #gallery li {
	background: none;
	padding-left: 0;
	margin-right: 0;
}
#content div.travel div.content #gallery img {
	cursor: pointer;
	margin: 0 0.9em 1.5em 0;
}
#performances {
	border: 1px solid #356A9F;
	padding: 1em;
}

/**
 * tables in travel descriptions and reservation form (with information about periods and prices)
 */
#content table {
	border: 1px solid #d3ccc5;
	border-spacing: 0.2em;
	margin: 1.2em 0;
	width: 48em;
}
#content th {
	display: table-cell;
	text-align: left;
	padding: 0.2em 0.4em;
	background: #dfeaf4;
	border: 1px solid #d3ccc5;
}
#content td {
	border: 1px solid #d3ccc5;
}
#content table label {
	width: auto;
	font-size: 1em;
	padding: 0;
	cursor: pointer;
}
#content table label:hover {
	text-decoration: underline;
}
#content table label input {
	margin: 0 0.5em 0 0;
	padding: 0;
}

/**
 * elements in the trip search form
 */
#search fieldset{
	border: none;
}
#search label, #search span {
	display: block;
	width: 9.8em;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: lowercase;
	color: #7a945d;
	padding: 0 0 0.2em 1em;
	margin-bottom: 0.8em;
	background: url("../images/linie_navi-h4.gif") right bottom repeat-x;
}
#search select {
	width: 13.8em;
	font-size: 0.8em;
	margin: 0 0 1.7em 1.6em;
}
#search div {
	clear: none;
}
#search div.form-item {
	clear: left;
	min-height: 1em;
	margin: 0 0 0.5em 0;
}
#search label[for=search_period_from], #search label[for=search_period_to] {
	display: inline;
	width: 2.5em;
	font-size: 0.75em;
	font-weight: normal;
	color: #000;
	background: none;
	margin: 0 0 0 0.4em;
	padding-left: 1.3em;
}
#search #search_period_from, #search #search_period_to {
	margin: 0;
	width: 9.3em;
	font-size: 0.75em;
	padding: 0.2em;
	float: left;
}
#search input[type=submit] {
	width: 13.6em;
	font-size: 0.8em;
	margin: 1.8em 0 0 1.5em;
	padding: 0.2em 0;
	background: url("../images/bg_buttons.jpg") top repeat-x #d6d3cd;
	border: 1px outset #666;
	cursor: pointer;
}
.dp-choose-date {
	width: 16px;
	height: 13px;
	background: url("../images/kalender.gif") left no-repeat;
	cursor: pointer;
	margin-left: 11em;
	padding-top: 0.5em;
	text-indent: -10000px;
	display: block;
}

/**
 * general form elements
 */
form div {
	clear: both;
	margin: 0.5em 0.2em;
}
form div.resizable-textarea {
	clear: none;
}
input {
	width: 19.5em;
}
input[type="checkbox"], input[type="radio"] {
	width: auto !important;	
}
textarea {
	width: 20em;
}
label {
	display: block;
	float: left;
	width: 13em;
	font-size: 0.75em;
}
label[for=edit-filter1], label[for=edit-filter2] {
	display: inline;
	width: 2.4em;
}
/*#search form input {
	width: auto !important;	
}*/
#journey-begin {
	float: left;
	margin-right: 1em;
}
option {
	padding: 0.1em;
	border-bottom: 1px solid #ccc;
}

/**
 * reservation form elements
 */
#content fieldset {
	margin: 0;
	border: none;
	width: auto;
	padding: 1em 0;
	clear: both;
}
#content fieldset fieldset {
	margin: 0;
	padding: 0;
}
#content div.form-item {
	clear: both;
	margin: 0.5em 0.2em;
}
#content legend {
	font-weight: bold;
	font-size: 1.1em;
	padding-top: 0.4em;
}
#content fieldset fieldset legend {
	font-weight: normal;
	font-size: 1em;
	padding-top: 0.2em;
}
#content label, #content span {
	width: 9em;
	text-align: right;
	padding: 0.2em 0.5em 0.25em 0;
}
#content input, #content textarea {
	border-top: 1px solid #86afd7;
	border-right: 1px solid #dfeaf4;
	border-bottom: 1px solid #dfeaf4;
	border-left: 1px solid #86afd7;
	width: 30em;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 0.75em;
	padding: 0.25em;
}
#content input:focus, #content textarea:focus {
	background-color: #f7f5f4;
}
#content .titleoption {
	width: 5em;
}

/* input field for number of journey members (adaption with height of the label) */
#content #members, #content #travel_members {
	margin-top: 0.8em;
}

/* div for zipcode and city input with their elements */
#content #zipcode-division {
	float: left;
	width: 12em;
	margin-top: 0;
}
#content #city-division {
	clear: none;
	margin-left: 12em;
}
#content #city {
	width: 20.4em;
}
#content label[for=city] {
	width: 2.4em;
}
#content span.form-required {
	display: inline;
	padding: 0;
	width: auto;
}
#webform-component-zipcode div.form-item, #webform-component-city div.form-item {
	margin-top: 0;
}
#content #zipcode {
	width: 4em;
}
#content label[for=journey-begin], #content label[for=journey-end] {
	width: 2.4em;
}
#buttons #senden, #buttons #loeschen, #correct, #send, #content #edit-submitbutton {
	width: 14em;
	margin-right: 1em;
	padding: 0.2em;
	cursor: pointer;
	background: url("../images/bg_buttons.jpg") top repeat-x #d6d3cd;
	border: 1px outset #666;
}
#content #edit-submitbutton {
	margin-left: 9.5em;
}
#correct, #send {
	font-size: 0.75em;
	width: 16em;
}
#buttons {
	margin: 0 0 2em;
	padding-left: 8em;
}
#content div.form-radios {
	display: inline;
}
#content div.form-radios div.form-item {
	display: inline;
}
#content div.form-radios label.option {
	width: 4em;
	padding: 0.1em 0.5em 0 0;
}

/* table in reservation form with date-options*/
#content form table {
	clear: both;
}

/* selectbox for choosing the country of origin */
#content form #country {
	width: 12em;
}

/**
 * select boxes for date and time in the reservation form and the callback form
 */
#content select {
	font-size: 0.8em;
	margin: 0 0.8em 0 0;
	width: 5.5em;
}
#content form #time, #content form #personal_data {
	padding: 0;
}
#content form #date {
	padding: 0 0 0.5em 0;
}

/**
 * elements in the page navigation (div#pager)
 */
.pager p {
	float: left;
	padding-right: 2em;
}
#content .pager ul {
	list-style: none;
	font-size: 0.8em;
	text-align: right;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 0.8em;
}
.pager li {
	display: inline;
	padding-right: 1em;
}
.pager a {
	font-weight: bold;
	text-decoration: none;
	color: #6f6f6f;
}
.pager a:hover {
	color: #000;
}
.pager a.previous {
	background: url("../images/pfeil-links.gif") left no-repeat;
	padding-left: 0.9em;
}
.pager a.next {
	background: url("../images/pfeil-rechts.gif") right no-repeat;
	padding-right: 0.9em;
}

/**
 * elements in the AGB div
 */
#agb {
	height: 10em;
	overflow: scroll;
	border: 1px solid #999;
	padding: 0.3em 0;
	margin: 0 0.7em;
}
#agb h4 {
	margin-top: 0;
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 0.8em;
	letter-spacing: normal;
	font-weight: bold;
}
#agb h5 {
	font-size: 0.9em;
	margin: 0.6em 0.8em;
}
#agb p {
	font-family: "Helvetica", Arial, Verdana, sans-serif;
	font-size: 0.75em;
	line-height: 1.3em;
	margin: 0.6em 0.9em;
}
.data-check {
	margin: 2em 0.8em;
	font-size: 0.8em;
}

/**
 * table elements
 */
/*table navigation*/
tfoot ul {
	list-style: none;
	padding: 0;
}
tfoot li {
	display: inline;
	padding: 0 0.3em;
}

/*table set separates different information parts in a table*/
.tableset {
	font-weight: bold;
	font-size: 1.1em;
}

/**
 * error messages on form pages
 */
#content p.errormessage {
	width: auto;
	border: 1px solid #c00;
	color: #c00;
	padding: 0.6em;
}
#content label.error {
	color: #c00;
}

/**
 * foot elements
 */
#foot a {
	color: #356a9f;
	font-weight: bold;
	text-decoration: none;
}
#foot ul {
	list-style: none;
}
#foot li {
	display: inline;
	border-left: 1px solid #7a945d;
	padding: 0 2.9em 0 0.5em;
}
#foot li.firstchild {
	background: url("../images/quadrat.gif") left no-repeat;
	padding: 0 2.9em 0 1em;
	border: none;
}
#foot li.no-screen {
	display: none;
}
