@charset "UTF-8";
/**
 * LGO - CSS: Layout
 *
 *
 * @author Danny Otto | Pixelbrand.net
 * @date   2009-04
 *
 * Hacer con Amor
 *
 */
@import url(contentbase.css);
@import url(navigations.css);



/* ------------------------------------------ */
/* Layout & Raster */
body { background: url(../images/bg.gif) center 0 repeat-y #f5f5f5; }
#margins { background: #fff; margin: 0 auto; padding: 0 0 10px 0; position: relative; width: 930px; }



/* ------------------------------------------ */
/* Header */
#header { margin: 0; padding: 28px 0 2px 0; position: relative; }
#header h1 { float: left; width: 210px; }
/* Print */
#printlink { position: absolute; top: 38px; right: 10px; }
/* Suche */
#search { position: absolute; top: 5px; right: 0; text-align: right; width: 225px; }
#search fieldset { border: 0; }
#search input { vertical-align: middle; }
#search #f_searchstring { color: #aaa; font-size: 1em; margin: 0 2px 0 0; padding: 0 2px; width: 140px; }



/* ------------------------------------------ */
/* Subheader mit Transmission-Button */
#subheader { padding: 0 0 10px 0; }
#tm a, #tm strong {
  background: url(../images/bg_tm.png) no-repeat #000;
  color: #fff;
  float: right;
  height: 20px;
  padding: 8px 0 0 0;
  text-align: center;
  text-decoration: none;
  width: 151px;
}
#tm a:hover, #tm a:active, #tm a:focus { text-decoration: underline; }



/* ------------------------------------------ */
/* Teaser */
#teaser { border-top: 1px #d3d3d3 solid; margin: 0; padding: 7px 0 57px 0; }
.js #teaser, #pid1 #teaser { padding: 7px 0; }

/* JS-Teaser */
#t0, #t1, #t2 { height: 385px; position: relative; width: 930px; }
.js #t0, .js #t1, .js #t2 { height: 385px; position: absolute; }

/* Version 01 */
.jsteaser01 { background: url(../images/bg_teaser01-03.png) no-repeat; height: 385px; position: relative; }
.jsteaser01 #t0 { background: url(../images/bg_teaser01-01.png) no-repeat; z-index: 120; }
.jsteaser01 #t1 { background: url(../images/bg_teaser01-02.png) no-repeat; z-index: 110; }
.jsteaser01 #t2 { background: url(../images/bg_teaser01-03.png) no-repeat; z-index: 100; }

/* Version 02 */
.jsteaser02 .t1 { display: none; }
.jsteaser02 #t0 { background: url(../images/bg_teaser02-01.png) no-repeat; z-index: 120; }

/* Version 03 */
.jsteaser03 { background: url(../images/bg_teaser03-03.png) no-repeat; }
.jsteaser03 #t0 { background: url(../images/bg_teaser03-01.png) no-repeat; z-index: 120; }
.jsteaser03 #t1 { background: url(../images/bg_teaser03-02.png) no-repeat; z-index: 110; }
.jsteaser03 #t2 { background: url(../images/bg_teaser03-03.png) no-repeat; z-index: 100; }

/* Version 04 */
.jsteaser04 { background: url(../images/bg_teaser04-03.png) no-repeat; }
.jsteaser04 #t0 { background: url(../images/bg_teaser04-01.png) no-repeat; z-index: 120; }
.jsteaser04 #t1 { background: url(../images/bg_teaser04-02.png) no-repeat; z-index: 110; }
.jsteaser04 #t2 { background: url(../images/bg_teaser04-03.png) no-repeat; z-index: 100; }

/* Version 05 */
.jsteaser05 { background: url(../images/bg_teaser01-02.png) no-repeat; }
.jsteaser05 #t0 { background: url(../images/bg_teaser01-02.png) no-repeat; z-index: 120; }
.jsteaser05 #t1 { background: url(../images/bg_teaser01-03.png) no-repeat; z-index: 110; }

/* Version 06 */
.jsteaser06 { background: url(../images/bg_teaser03-02.png) no-repeat; }
.jsteaser06 #t0 { background: url(../images/bg_teaser03-02.png) no-repeat; z-index: 120; }
.jsteaser06 #t1 { background: url(../images/bg_teaser03-03.png) no-repeat; z-index: 110; }

/* Version 07 */
.jsteaser07 { background: url(../images/bg_teaser04-02.png) no-repeat; }
.jsteaser07 #t0 { background: url(../images/bg_teaser04-02.png) no-repeat; z-index: 120; }
.jsteaser07 #t1 { background: url(../images/bg_teaser04-03.png) no-repeat; z-index: 110; }

/* Version 08 - blendet nur .t1 wieder ein */
.jsteaser08 .t1 { display: block !important; }

/* JS-Teaser-Content */
#jsteaser .jst-content { height: 305px; margin: 0 10px 0 20px; padding: 50px 0 0 0; position: relative; }
.js #jsteaser .jst-content { margin: 50px 10px 0 20px; padding: 0; }
#jsteaser h3 { margin-top: 0; }
#jsteaser .invert h3, #jsteaser .invert a { color: #fff; }

/* Buttonpositionierung */
#jsteaser .t0, #jsteaser .t1, #jsteaser .t2 { position: absolute; top: 48px; z-index: 200; }
.jsteaser01 #t0 .t1 { left: 705px; }
.jsteaser01 #t0 .t2 { left: 895px; }
.jsteaser01 #t1 .t0 { left: 152px; }
.jsteaser01 #t1 .t2 { left: 895px; }
.jsteaser01 #t2 .t0 { left: 152px; }
.jsteaser01 #t2 .t1 { left: 200px; }
/* */
.jsteaser02 #t0 .t1 { left: 805px; }
/* */
.jsteaser03 .t1 { display: none; }
/* */
.jsteaser05 .t2 { display: none; }
.jsteaser05 #t0 .t1 { left: 895px; }
.jsteaser05 #t1 .t0 { left: 200px; }
/* */
.jsteaser06 .t2 { display: none; }
.jsteaser06 #t0 .t1 { left: 895px; }
.jsteaser06 #t1 .t0 { left: 200px; }
/* */
.jsteaser07 .t2 { display: none; }
.jsteaser07 #t0 .t1 { left: 895px; }
.jsteaser07 #t1 .t0 { left: 200px; }

/* Grid 1 */
.grid1 .a1 { float: left; height: 260px; width: 290px; }
.grid1 .a2 { float: left; height: 260px; margin: 0 0 0 150px; width: 215px; }
.grid1 .a3 { float: left; height: 260px; margin: 0 0 0 80px; width: 155px; }
.grid1 .b1 { position: absolute; top: 270px; left: 0; }
.grid1 .b2 { position: absolute; top: 270px; left: 360px; }
.grid1 .b3 { position: absolute; top: 270px; left: 740px; width: 150px; }
/* */
.grid2 .a1 { float: left; height: 100px; width: 160px; }
.grid2 .a2 { float: left; height: 290px; margin: 0 0 0 70px; width: 450px; }
.grid2 .a3 { float: left; height: 20px; margin: 270px 0 0 70px; width: 150px; }
.grid2 .b3 { position: absolute; bottom: 0; left: 750px; width: 150px; }
/* */
.grid3 .a1 { float: left; height: 290px; width: 600px; }
.grid3 .a2 { float: left; height: 290px; margin: 0 0 0 70px; width: 450px; }
.grid3 .a3 { float: left; height: 20px; margin: 270px 0 0 70px; width: 150px; }
.grid3 .b2 { position: absolute; top: 270px; left: 620px; }
.grid3 .b3 { position: absolute; bottom: 0; left: 750px; width: 150px; }
/* Positionierung */
.a1, .a2, .a3 { position: relative; }
/* Debug */
.debug .a1, .debug .a2, .debug .a3, .debug .b3 { background: #ffc500; }

/* Tabs */
#jsteaser .jstabs { height: 250px; margin: 0 0 1em 0; overflow: auto; }
#jsteaser .jstabs ul.jstabs-nav { margin: 0; padding: 0; position: absolute; top: 0; right: 0; }
#jsteaser .jstabs ul.jstabs-nav li { display: inline; list-style-type: none; margin: 0; padding: 0; }
#jsteaser .jstabs ul.jstabs-nav li a { float: left; margin: 0 0 0 .5em; padding: 0 0 .2em 0; text-decoration: none; }
#jsteaser .jstabs ul.jstabs-nav li.current a { border-bottom: 1px #2991d2 solid; }
#jsteaser .jstabs .accessibletabsanchor, #jsteaser .jstabs .jstabs-current-info { position: absolute; left: -999em; }
#jsteaser .jstabs .jstabs-body { border-top: 1px #bfbfbf solid; border-bottom: 1px #bfbfbf solid; padding: 1em 0; }
#jsteaser #t2 .jstabs .jstabs-body { border-color: #d3d3d3; }

/* Transmission */
#transmission p { color: #fff; }
#transmission label { display: block; color: #fff; }
#transmission input { background: #fff; border: 2px #fff solid; color: #288ed0; width: 80px; }
#transmission input.submit { background: #1a171b; border-color: #1a171b; color: #fff; cursor: pointer; display: block; margin: 0 0 2px 0; width: auto; }
#transmission input.active, #transmission input.submit:hover, #transmission input.submit:active, #transmission input.submit:focus { background: #fff; border-color: #fff; color: #288ed0; }



/* ------------------------------------------ */
/* Main */
#main { background: url(../images/bg_main.gif) 220px 0 repeat-y; border-top: 1px #d3d3d3 solid; padding: 0 0 20px 0; }
#col1 { background: url(../images/bg_col1.gif) right 0 no-repeat; float: left; min-height: 60px; width: 220px; }
#col1_content { margin: 0 10px 0 0; }
#col2 { background: url(../images/bg_col2.gif) right 0 no-repeat; float: left; min-height: 60px; width: 490px; }
#col2_content { margin: 0 30px; }
#col3 { float: right; width: 210px; }



/* ------------------------------------------ */
/* Footer */
#footer { border-top: 1px #d3d3d3 solid; border-bottom: 1px #d3d3d3 solid; margin: 0; padding: 2px 0; position: relative; }
#footer a#totop { position: absolute; top: 9px; right: .5em; text-decoration: none; }
#footer a#totop:hover, #footer a#totop:active, #footer a#totop:focus { text-decoration: underline; }



/* ------------------------------------------ */
/* Special Content */

/* Formatierungen */
div.hr { border-bottom: 1px #d3d3d3 solid; height: 1px; margin: .8em 0; padding: 0; overflow: hidden; }
div.hr hr { visibility: hidden; }

/* Col2 + Col3 */
#col1 h3, #col3 h3 { background: url(../images/bg_col1_headline.png) 0 bottom no-repeat; border-bottom: 1px #d3d3d3 solid; padding: 0 8px 8px 8px; }
#col1 p, #col3 p { padding: 0 8px; }

/* Suche */
.search-result-item { margin: 0 0 2em 0; }
.search-result-item h4 { border-bottom: 1px #d3d3d3 solid; position: relative; }
.search-result-item h4 a { color: #000; text-decoration: none; }
.search-result-item h4 a:hover, .search-result-item h4 a:active,
.search-result-item h4 a:focus { color: #288ed0; text-decoration: underline; }
.search-result-item h4 .rating { color: #288ed0; position: absolute; right: 0; }
.search-result-item .tx-indexedsearch-redMarkup { color: #288ed0; font-weight: normal; }
.search-result-item .meta { margin: 0; padding: 0; }
.search-result-item .meta dt, .search-result-item .meta dd { color: #888; display: inline; font-weight: normal; margin: 0; padding: 0; }
.search-result-item .meta dd { padding: 0 1em 0 0; }
.search-result-item .meta a { color: #888; }

/* Paging */
.paging { margin: 2em 0; }
.paging ul { list-style: none; margin: 0; padding: 0; }
.paging li { display: inline; }
.paging a, .paging strong { background: #000; border: 1px #000 solid; color: #fff; display: block; float: left; margin: 0 .5em 0 0; padding: .1em .6em; text-decoration: none; }
.paging a:hover, .paging a:active, .paging a:focus, .paging strong { background: #288ed0; border-color: #288ed0; }

/* Formular */
form.yform { margin: 1.5em 0 1em 0; padding: 0; overflow: hidden; }
form.yform fieldset { border: 0; border-bottom: 1px #fff double; margin: 0 0 1.5em 0; padding: 0 0 1em 0; position: relative; overflow: hidden; }
form.yform legend { background: #eeeeee; font-weight: bold; }
form.yform div.type-text, form.yform div.type-select, form.yform div.type-check, form.yform div.type-button { margin: 0.5em 0; position: relative; overflow: hidden; }
form.yform label { cursor: pointer; display: block; font-weight: bold; }
form.yform .type-text input, form.yform .type-text textarea { display: block; padding: 0.2em 0; position: relative; width: 59.5%; }
form.yform .type-select select { cursor: pointer; display: block; padding: 0.2em 2px 0.2em 1px; position: relative; width: 60%; }
form.yform .type-select select optgroup { font-style: normal; font-weight: bold; }
form.yform .type-check input { cursor: pointer; }
form.yform .type-check label { display: inline; }
form.yform .type-text input, form.yform .type-text textarea, form.yform .type-select select { background: #f6f6f6; border: 1px #8f8f8f solid; }
form.yform div input:focus, form.yform div select:focus, form.yform div textarea:focus,
form.yform div input:hover, form.yform div select:hover, form.yform div textarea:hover,
form.yform div input:active, form.yform div select:active, form.yform div textarea:active { background: #fff; }
form.yform .type-button input { background: #298fd1; border: 1px #1f6fa2 solid; color: #fff; padding: .2em .5em; width: auto; }
form.yform div.type-button input:focus, form.yform div.type-button input:hover, form.yform div.type-button input:active { background: #1f6fa2; border-color: #1f6fa2; cursor: pointer; }
form.yform .message { display: block; margin-bottom: 0.5em; }
form.yform input[type=hidden] { display: none !important; }
form.yform sup { color: #bf1f00; font-weight: bold; }
form.yform div.error { font-weight: bold; padding: 0 0 0 30%; }
form.yform div.error ul { color: #bf1f00; margin: .5em 0 1em 1.5em; }
/* Darstellung als Spalten */
.columnar .type-text label, .columnar .type-select label { float: left; width: 30%; }
.columnar div.type-check { padding-left: 30%; }
.columnar div.error, .message { margin-left: 30%; }
.columnar div.type-text input, .columnar div.type-text textarea { width: 67.8%; }
.columnar div.type-select select { width: 68.3%; }