/*
----------------------------------------------------------------------
Website zur FFK09
Start: 19.09.2008
Letzte Aenderung: 04.03.2009
Autor: marc thiele - www.marcthiele.com
----------------------------------------------------------------------
*/

* {
	margin: 0;
	border: none;
	padding: 0;
	/*font-size: 1em;*/
	font-weight: normal;
}

/* ===-| site layout |-========= */

body  {
	font: 100.01% "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
	background: #FFF;
	color: #555;
	text-align: center;
	font-weight: normal;
}

#container { 
	width: 909px;
	background: #FFF;
	margin: 0 auto;
	text-align: left;
} 

#header {
	height: 170px;
	padding-bottom: 10px;
	background: #FFF url(../images/header.jpg)  no-repeat;
	text-indent: -9999px;
} 

#navigation {
	float: left;
	width: 200px;
	padding-left: 5px;
}

#partnerArea {
	float: right;
	width: 180px;
	padding-right: 5px;
}

#mainContent {
	margin: 0 220px 0 230px;
	padding: 0;
}

#bannerContent, #agendaContent {
	margin-left: 230px;
	padding: 0;
}

#infobox {
	width:100%;
	min-height: 1px;
	background: #d97031 url(../images/bottom_box_top.gif) no-repeat left top;
}

#friends {
	float: left;
	width: 303px;
}

#hotline {
	margin: 0 303px;
}

#impressions {
	float: right;
	width: 303px;
}

#footer { 
	margin-bottom: 20px;
	padding: 35px 5px 0 5px;
	background: url(../images/bottom_box_bottom.gif) no-repeat left top;
}

/* ===-| general settings |-========= */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.clearfloatInline {
	clear: both;
}

.fullsizeImg {
	display: block;
	margin-top: 1.8em;
	margin-bottom: 1.8em;
	padding-top: 4px;
}

.inlineImg {
	float: left;
	padding-top: 4px;
	padding-right: 0.83em;
}

/* ===-| typography (general) |-========= */

h1 { /* ~20 Pixel */
	font: 1.67em/0.9em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

h2 { /* ~18 Pixel */
	margin-top: 1em;
	margin-bottom: 1em;
	font: 1.5em/1em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.05em;
}

h3 { /* ~16 Pixel */
	margin-top: 1.13em;
	margin-bottom: 1.13em;
	font: 1.33em/1.13em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

h4 { /* ~14 Pixel */
	margin-top: 1.29em;
	margin-bottom: 1.29em;
	font: 1.17em/1.29em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

h5 { /* ~12 Pixel */
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font: 1em/1.5em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

h6 { /* ~10 Pixel */
	margin-top: 1.8em;
	margin-bottom: 1.8em;
	font: 0.83em/1.8em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

p { /* ~10 Pixel */
	margin-top: 1.8em;
	margin-bottom: 1.8em;
	color: #555;
	font: 0.83em/1.8em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

ul {
	margin-top: 1.8em;
	margin-bottom: 1.8em;
}

li {
	color: #555;
	font: 0.83em/1.8em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
	list-style: none;
}

li.partnerlist {
	padding-bottom: 1.8em;
}

a, a:active, a:visited {
	color: #d97031;
	text-decoration: none;
}

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

strong {
	color: #333;
	font-weight: bold;
}

#agenda table {
	width: 650px;
	margin-top: 1.8em;
	margin-bottom: 3.6em;
}

#agenda th {
	height: 24px;
	border-bottom: 1px solid #ccc;
	padding: 2px 5px;
	vertical-align: top;
}

#agenda .tabTime {
	width: 60px;
	height: 24px;
	border-bottom: 1px solid #ccc;
	padding: 2px 0;
	vertical-align: top;
}

#agenda .tabSession {
	width: 220px;
	height: 24px;
	border-bottom: 1px solid #ccc;
	padding: 2px 5px;
	vertical-align: top;
}

#agenda .tabSession:hover {
	background-color: #eee;
}

th, td {
	height: 1.82em;
	font-size: 0.83em;
	line-height: 1.3em;
}

#tickets th, #tickets td {
	padding: 5px;
	color: #333;
	font-size: 0.83em;
	line-height: 1.3em;
	text-align: center;
}

th {
	font-weight: bold;
	vertical-align: top;
}

.thOdd, .thEven, .thOddOver, .thEvenOver {
	text-align: left !important;
}

.odd, .thOdd { /* for tables */
	background-color: #e5d2c6;
}

.even, .thEven { /* for tables */
	background-color: #eeeed6;
}

.oddOver, .thOddOver { /* for tables */
	background-color: #e5d2c6;
	text-decoration: line-through;
}

.evenOver, .thEvenOver { /* for tables */
	background-color: #eeeed6;
	text-decoration: line-through;
}

span.ticketdate {
	font-size: 0.76em;
	font-style: italic;
}

.book_assistent {
	padding-left: 18px;
	background: url(../images/bullet_link.gif) no-repeat left center;
}

.website_link {
	padding-left: 18px;
	background: url(../images/website_link.gif) no-repeat left center;
}

.description_link {
	padding-left: 18px;
	background: url(../images/desciption_link.gif) no-repeat left center;
}

.bullet {
	padding-left: 18px;
	background: url(../images/bullet_standard.gif) no-repeat left center;
	list-style: none;
}

a.backToTop {
	padding-left: 18px;
	background: url(../images/top.gif) no-repeat 0 center;
	color: #497c13;
}

a:hover.backToTop {
	color: #3c650f;
}

.imgCaption {
	font: 0.67em/2.25em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
}

.ws_soldout {
	font-weight: bold;
	color: #900;
}

.ws_soldout_big {
	display: block;
	width: 455px;
	height: 100px;
	border: 1px solid #900;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	line-height: 100px;
	color: #900;
}

.ticket_bundle {
	background-color: #eee;
}

/* Registrierung - Formular - Start */
form {
	padding: 1px 15px 10px 15px;
	background: #eeeed6 url(../images/bg_form.jpg) no-repeat right top;
	font-size: 0.8em;
}

input, textarea {
	width: 420px;
	height: 20px;
	margin-bottom: 5px;
	border: 1px solid #999;
	padding: 3px;
	color: #666;
}

dt {
	width: 420px;
	margin: 5px 0;
}

form span dd #agb {
	width: auto;
}

#agb {
	height: auto;
}

.agbLink {
	margin: 10px 0 20px 0;
}

.btnForm {
	width: auto;
	height: auto;
	border: none;
	padding: 0;
}
/* Registrierung - Formular - End */

/* ===-|  navigation (including typography if different) |-========= */

#navigation h2 {
	color: #fff;
}

#navigation ul {
	margin-top: 1.8em;
	margin-bottom: 1.8em;
	text-transform: uppercase;
	list-style-type: none;
}

#navigation li {
	color: #555;
	font: 0.83em/1.8em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
	list-style: none;
}

#navigation a {
	display: block;
	width: 200px;
	color: #555;
	text-decoration: none;
}

#navigation a:hover {
	padding-left: 20px;
	background: #f8f8f8 url(../images/arrow_navigation.gif) no-repeat 5px center;
	color: #c04b0d;
}

/* ===-| Highlight Navigation depending on site |-========= */

#home #navigation a#nav_start, #partner #navigation a#nav_partner, #tickets #navigation a#nav_tickets, #bundles #navigation a#nav_bundles, #workshops #navigation a#nav_workshops, #speakers #navigation a#nav_speakers, #topics #navigation a#nav_topics, #agenda #navigation a#nav_agenda, #location #navigation a#nav_location, #friendsPage #navigation a#nav_friends, #press #navigation a#nav_press {
	display: inline;
	padding-left: 20px;
	background: url(../images/arrow_navigation_here.gif) no-repeat 5px center;
	color: #555;
}

/* ======================================================== */

/* ===-| depending typographie |-========= */

#friends h3, #friends p, #hotline h3, #hotline p, #impressions h3, #impressions p {
	color: #333;
}
#friends h3 {
	margin: 0;
	padding: 45px 25px 0 25px;
	font: 1.33em/1.13em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

#friends p {
	margin: 0;
	padding: 0 25px;
}

#friends img, #hotline img {
	padding: 15px 25px;
	border: none;
}

#hotline h3 {
	margin: 0;
	padding: 45px 25px 0 25px;
	font: 1.33em/1.13em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

#hotline p {
	margin: 0;
	padding: 0 25px;
}

#impressions h3 {
	margin: 0;
	padding: 45px 25px 0 25px;
	font: 1.33em/1.13em "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}

.flickr1 {
	color: #0063dc;
}

.flickr2 {
	color: #ff0084;
}

#impressions #flickrPool {
	padding: 15px 0 0 25px;
}

#impressions #flickrPool a {
  display: block;
  float: left;
  margin-right: 24px;
  margin-bottom: 16px;
  padding: 3px;
  background-color: #fff;
}

#impressions #flickrPool a:hover {
  background-color: #c04b0d;
}

#impressions #flickrPool img {
  width: 60px;
  height: 60px;
  display: block;
  float: left;
  margin: 0;
  border: 1px solid #edcdba;
}

#impressions #flickrPool a:hover img {
  border-color: #fff;
}

#friends a, #hotline a {
	color: #000;
	text-decoration: underline;
}

#footer p#copyrightNotice {
	float: left;
	width: 330px;
	margin: 0;
	padding-left: 5px;
}

#footer p#imprintLink {
	float: right;
	width: 100px;
	margin: 0;
	padding-right: 5px;
	text-align: right;
}

#footer p#socialLinks {
	margin: 0 110px 0 350px;
	text-align: center;
}

/* Einbinden der Icons im Buchungsassistenten */
.booking_step0 {
	padding-bottom: 3.8em;
	background: url(../images/head_booking_step0.gif) no-repeat left bottom;
	line-height: 1em;
}

.booking_step1 {
	padding-bottom: 3.8em;
	background: url(../images/head_booking_step1.gif) no-repeat left bottom;
	line-height: 1.5em;
}

.booking_step2 {
	padding-bottom: 3.8em;
	background: url(../images/head_booking_step2.gif) no-repeat left bottom;
	line-height: 1.5em;
}

.booking_step3 {
	padding-bottom: 3.8em;
	background: url(../images/head_booking_step3.gif) no-repeat left bottom;
	line-height: 1.5em;
}

.booking_step4 {
	padding-bottom: 3.8em;
	background: url(../images/head_booking_step4.gif) no-repeat left bottom;
	line-height: 1.5em;
}

/* ===-| SPRY START |-========= */

/* These are the classes applied on the error messages which prevent them from being displayed by default. */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg,
.checkboxRequiredMsg, .checkboxMinSelectionsMsg, .checkboxMaxSelectionsMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg {
	padding-left: 20px;
	display: inline;
	color: #cb351c;
	background: transparent url(../images/spry_check.gif) no-repeat 0 0;
}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textareaValidState textarea, textarea.textareaValidState,
.textfieldValidState input, input.textfieldValidState {
	background-color: #d3e1d0;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input,
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color: #f5d7d2;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState,
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color: #ffd;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText,
.textareaFlashState textarea, textarea.textareaFlashState {
	color: red !important;
}

/* These are the classes applied on the messages
 * (required message and invalid value message )
 * which prevent them from being displayed by default.
 */
.radioRequiredMsg, .radioInvalidMsg{
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and font color for the error text.
 * The state class (e.g. .radioRequiredState) is applied on the top-level container for the widget, 
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.radioRequiredState .radioRequiredMsg,
.radioInvalidState .radioInvalidMsg{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}

/* ===-| SPRY END |-========= */

/* --------------------------------------- */
/* =========-| End of CSS file |-========= */
/* --------------------------------------- */