/* SVN FILE:   $Id: basic.css 5 2013-05-07 09:12:46Z d.brinkmann $
 * SVN HEADER: 1.1
 ***
 * $title           LT_BW Inhalte
 *
 * $description
 *   Test
 *   Text
 *
 * $author          d.brinkmann
 * $copyright       babiel GmbH
 * $version         $Revision: 5 $
 * $modifiedby      $LastChangedBy: d.brinkmann $
 * $lastmodified    $LastChangedDate: 2013-05-07 11:12:46 +0200 (Di, 07 Mai 2013) $
 * $filesource      $URL: http://svn.babiel.com/TOMVU/trunk/Projekte/Website/HTML/includes/styles/basic.css $
 * $keywords        Layout, Style, Inhalt
 * $require         
 *
 */
 
html {
    height: 100%;
}

body {
    width: 99%;
    margin: 0;
    padding: 0;
    font-size: 101%;
    color: #222222;
    font-family: Helvetica, Helv, Arial, sans-serif;
    background: url(../images/background.png) no-repeat center top #333333;
}

a {
    color: #999999;
}

a:link, a:visited {
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

a:hover abbr, a:focus abbr, a:active abbr {
    text-decoration: underline;
}

a[name]:hover, a[name]:focus, a[name]:active {
    text-decoration: none;
    color: #222222;
}

abbr {
    border: none;
}

img {
    border: none;
    padding: 0;
    margin: 0;
}

.unsichtbar, .skip, .hidden {
    position: absolute;
    top: -1000px;
    left: -1000px;
    overflow: hidden;
}

.skip:focus, .skip:active {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.8em;
    background-color: #FFFFFF;
    padding: 0;
    z-index: 1000;
}

.displayNone {
    display: none !important;
}

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

.clearFix:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}

.clearFix {
    display: inline-block;
}

.left {
    float: left;
}

.right {
    float: right;
}

ul, li, p, form {
    
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

h2, h3 {
    width: 100%;   
}

/*** MAIN ***/

#mainWrap {
    background: #FFFFFF;
    margin: 0 auto;
    width: 960px;
}

#header, #slider, #main, #contact, #footer {
    float: left;
    width: 100%;
}

/* CONSTRUCTION */

#construction {
    background: url(../images/underConstruction.png) no-repeat left top #555555;
    float: left;
    height: 100%;
    width: 100%;
}

#construction #mainWrap {
    margin: 120px 0 0 260px;
}

#construction #identity {
    background: none;
    padding: 0;
}

#construction .content {
    margin: 0;
}

#construction h1 {
    color: #999999;
    clear: both;
    float: left;
    font-size: 3.4em;
}

#construction p {
    color: #999999;
    clear: both;
    float: left;
    font-size: 0.866em;
    margin: 20px 0 0 0;
}

#construction a, #construction .phone {
    color: #FFFFFF;
    font-size: 1.6em;
}

/* CONSTRUCTION -- End */

/** HEADER **/

#identity {
    background: #FFFFFF;
    float: left;
    padding: 14px 0 0;
    height: 46px;
	width:42%;
}

#identity a {
    float: left;
	padding-left:1em;
}

#identity span {
    color: #777777;
    float: left;
    font-size: 0.866em;
    font-weight: bold;
    margin-left: 6px;
	margin-top: 13px;
}

#navi {
    background: url(../images/identity_bg.png) no-repeat left top #222222;
    float: left;
    height: 60px;
    width: 58%;
}

#navi ul {
    float: right;
    margin-right: 30px;
}

#navi li {
    color: #FFFFFF;
    float: left;
    list-style-type: none;
    padding: 27px 10px 16px 10px;
}

#navi li .firstLevel a {
    background: url(../images/icon_dropDown.png) no-repeat right center transparent;    
    color: #FFFFFF;
    font-size: 0.866em;
    font-weight: bold;
    padding: 0 12px 0 0;
}

#navi li .firstLevel a:hover {
    color: #cccccc;
}

#navi li .dropDown {
    display: none;
}

#navi li a.noDrop {
    background: none;
    padding-right: 0;
}

/** HEADER -- End **/

/** SLIDER **/

#slider {
    overflow: hidden;
}

#slider .sliderContent {
    color: #FFFFFF;
    position: absolute;
    top: 260px;
    width: 920px;
}

#slider .sliderContent h1 {
    background: url(../images/silder_transparentLayer.png) repeat left top transparent;
    font-size: 3.711em;
    padding: 20px 0 0 40px;
    height: 100px;
    width: 820px;
}

#slider .sliderContent .sliderButtons {
    float: right;
}

#slider .sliderContent a.sliderButtonUp {
    background: url(../images/slider_up.png) no-repeat left top transparent;
    display: block;
    height: 60px;
    width: 60px;
}

#slider .sliderContent a.sliderButtonDown {
    background: url(../images/slider_down.png) no-repeat left top transparent;
    display: block;
    height: 60px;
    width: 60px;
}

#slider .sliderContent a.sliderButtonUp:hover {
    background: url(../images/slider_up_hover.png) no-repeat left top transparent;
    text-decoration: none;
}

#slider .sliderContent a.sliderButtonDown:hover {
    background: url(../images/slider_down_hover.png) no-repeat left top transparent;
    text-decoration: none;
}

#slider .sliderContent .sliderPosition {
    float: right;
    margin-right: 14px;
}

#slider .sliderContent .sliderMarker {
    background: url(../images/slider_position.png) no-repeat left top transparent;
    float: left;
    margin: 10px 3px 0 3px;
    height: 4px;
    width: 4px;
}

#slider .sliderContent .sliderMarkerActive {
    background: url(../images/slider_position_active.png) no-repeat left top transparent;
}

/** SLIDER - End **/

/** OVERVIEW **/

#overview {
    background: url(../images/overview.png) no-repeat right top #00aa00;
    color: #FFFFFF;
    float: left;
    height: 160px;
    width: 100%;
}

#overview .breadcrumb {
    float: left;
    font-size: 0.866em;
    margin: 30px 0 0 40px;
}

#overview h1 {
    float: left;
    font-size: 2.474em;
}

#overview a {
    color: #FFFFFF;
}

#overview .separator {
    float: left;
    font-size: 2.474em;
    font-weight: bold;
    clear: both;
    margin: 0 6px 0 40px;
}

/** OVERVIEW **/

/** CONTENT **/

#main {
    background: url(../images/content_shadow.png) no-repeat center bottom #FFFFFF;
    padding-bottom: 12px;
}

.content {
    margin: -40px 40px 0 40px;
/*    float: left; */
}



/* TEASER BOX */
.teaserBox {
    background: url(../images/teaserBox_shadow.png) no-repeat center bottom transparent;
    float: left;
    padding: 0 0 9px 0;
    margin: 0 0 20px 20px;
    width: 280px;
}

.teaserBoxFirst {
    margin-left: 0;
}

.teaserBox .teaserImage {
    position: relative;
}

.teaserBox .teaserShine {
    background: url(../images/teaserBox_shine.png) repeat-x left top transparent;
    position: absolute; 
    top:0;
    height: 1px;
    width: 280px;
}

.teaserBox .teaserText {
    background: url(../images/teaserBox.png) no-repeat right bottom #222222;
    color: #FFFFFF;
    padding: 20px 30px 40px 30px;
    width: 220px;
}

.teaserBox .teaserText:hover {
    background-color: #333333;
}

.teaserBox .teaserText h2 {
    font-size: 1.856em;
    line-height: 1em;
    margin-bottom: 10px;
}

.teaserBox .teaserText h2 a {
    color: #FFFFFF;
    display: block;
    padding: 20px 30px 90px 30px;
    margin: -20px 0 -90px -30px;
    position: relative;
    height: 100%;
    width: 100%;
}

.teaserBox .teaserText p {
    font-size: 0.866em;
}
/* TEASER BOX -- End */

.socialBar {
    float: left;
    width: 100%;
}

.socialLinks {
    float: right;
    margin: 20px 0 4px 0;
}

.socialLinks a {
    background: url(../images/socialLinks.png) no-repeat left center transparent;
    padding: 0 0 0 14px;
    margin-left: 10px;
    font-size: 0.866em;
    font-weight: bold;
}

.col {
    float: left;
    width: 280px;
}

.col2 {
    margin-right: 20px;
    width: 580px;
}

/* COTACT FORM */
#contact {
    background: url(../images/contact_bg.png) no-repeat left top #eeeeee;
}

#contact .content {
    margin: 20px 40px;
}

#contact input {
    background: #FFFFFF;
    border: none;
    border-top: 1px solid #cccccc;
    box-shadow:
        inset 1px 0 1px rgba(0,0,0,0.1),
        inset -1px 0 1px rgba(0,0,0,0.1);
    clear: both;
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    padding: 10px;
    width: 260px;
}

#contact input#form_submit {
    background: url(../images/button_submit.png) no-repeat right top #00aa00;
    border: none;
    box-shadow: none;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-align: left;
    margin: 20px 0;
    height: 40px;
    width: 280px;
}

#contact label {
    clear: both;
    float: left;
    font-size: 0.866em;
    font-weight: bold;
    margin: 10px 0 4px 0;
}

#contact label.message {
    margin-bottom: 5px;
}

#contact textarea {
    border: none;
    border-top: 1px solid #cccccc;
    box-shadow:
        inset 1px 0 1px rgba(0,0,0,0.1),
        inset -1px 0 1px rgba(0,0,0,0.1);
    float: left;
    font-family: Helvetica, Arial, sans-serif;
    padding: 10px;
    margin: 0;
    resize: none;
    height: 86px;
    width: 260px;
}

#contact h3 {
    font-size: 1.856em;
    margin-left: 30px;
}

#contact .col2 h3 {
    margin: 0 0 10px 0;
}

#contact p {
 /*   float: left;*/
    font-size: 0.866em;
    font-weight: bold;
    margin: 20px 0 0 30px;
}

#contact p.adress {
    background:url(../images/icon_adress.png) no-repeat left 4px transparent;
    padding: 0 0 0 30px;
}

#contact p.phone {
    background:url(../images/icon_phone.png) no-repeat left 4px transparent;
    padding: 0 0 0 30px;
}

#contact .col .col {
    margin-left: 20px;
}

#contact .col .col:first-child {
    margin-left: 0;
}

#contact p a {
    color: #222222;
}

/* COTACT FORM -- End */

/** MAIN CONTENT - End **/

/** FOOTER **/
#footer {
    background: url(../images/footer_bg.png) no-repeat left top #333333;
    color: #999999;
    font-size: 0.866em;
    padding: 10px 0;
}

#footer p {
    float: left;
    margin-left: 40px;
}

.footerLinks {
    float: right;
    margin-right: 40px;
}

#footer .separator {
    color: #444444;
}
/** FOOTER -- End **/