/* === === === === === === === === =
title:          brotundsalz.at/css/main.css
browser(s):     for all browsers.
author:         friederike von dem bussche-h., friederike@fringdom.de
created:        november 2009
version:        1.0, 11.11.2009
------------------------------------
swatch colors:
#950d19  -  dark red font color

------------------------------------
rules:
- english please
- no caps
- no names with underscore
- sort styles by abc ,
- vertical whitespace always added to the top item via margins
=== === === === === === === === === */

/* =resets and overrides
-----------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquotepre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:top;
    background:transparent;
    }
body {
    line-height:1;
    }
ol, ul {
    list-style:none;
    }
blockquote, q {
    quotes:none;
    }
:focus {
    outline:0;
    }
ins {
    text-decoration:none;
    }
del {
    text-decoration:line-through;
    }
table {
    border-collapse:collapse;
    border-spacing:0;
    }
td {
    text-align: left;
    font-weight: normal;
    }
img {
    border:0;
    vertical-align:top;
    }
a, a:hover{
    text-decoration:none;
    border:none;
}
/* @Removes fieldset borders. even on Opea 7 */
fieldset {
  /*border: 1px solid transparent;*/
    border:none;
}


/* =clear methods and little helpers
-----------------------------------------------------------------------------*/

/* line out all elements
* {
   border: 1px solid red !important;
}
*/
/* http://sonspring.com/journal/clearing-floats */

html body div.clear,
html body span.clear {
    background: none;
    border: 0;
    clear: both;
    display: block;
    float: none;
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.hand{
    cursor:pointer;
}
.left{
    float:left;
}
.right{
    float:right;
}

/* =links and type
-----------------------------------------------------------------------------*/
body {
    background:#fff;
    font: 62.5%/1.6 Verdana, Arial, Tahoma, sans-serif;
    color:#000;
}
p{
    padding:0 0 10px 0;
}
a{
    color:#990000;
}
a:hover{
    text-decoration:underline;
}
a.black{
    color:#000;
}
h2{
    margin:0 0 10px 0;
}
/* =main-nav */
ul#main-nav{
    margin:60px 0 0 0;
    position:relative;
    width:100%;
    height:130px;
    display:block;
}
ul#main-nav li a{
    position:absolute;
}
ul#main-nav li a.geschenke{
    background:transparent url(../img/geschenk.png) top left no-repeat;
    display:block;
    height:33px;
    width:108px;
    left:60px;
    top:0;
    text-indent:-9999em; 
}
ul#main-nav li a.geschenke_akt{
    background:transparent url(../img/geschenk-act.png) top left no-repeat;
    display:block;
    height:33px;
    width:108px;
    left:60px;
    top:0;
    text-indent:-9999em;
}
ul#main-nav li a.geschenke:hover{
    background:transparent url(../img/geschenk-act.png) top left no-repeat;
}
ul#main-nav li a.about{
    background:transparent url(../img/about.png) top left no-repeat;
    display:block;
    height:33px;
    width:165px;
    top:35px;
    left:0px;
    text-indent:-9999em;
}
ul#main-nav li a.about_akt{
    background:transparent url(../img/about-act.png) top left no-repeat;
    display:block;
    height:33px;
    width:165px;
    top:35px;
    left:0px;
    text-indent:-9999em;
}
ul#main-nav li a.about:hover{
    background:transparent url(../img/about-act.png) top left no-repeat;
}
/*
ul#main-nav li a.flitter{
    background:transparent url(../img/flittertand.png) top left no-repeat;
    display:block;
    height:33px;
    width:136px;
    top:35px;
    left:0px;
    text-indent:-9999em;
}
ul#main-nav li a.flitter_akt{
    background:transparent url(../img/flittertand-act.png) top left no-repeat;
    display:block;
    height:33px;
    width:136px;
    top:35px;
    left:0px;
    text-indent:-9999em;
}
ul#main-nav li a.flitter:hover{
    background:transparent url(../img/flittertand-act.png) top left no-repeat;
}
*/
ul#main-nav li a.kontakt{
    background:transparent url(../img/kontakt.png) top left no-repeat;
    display:block;
    height:33px;
    width:92px;
    top:65px;
    left:70px;
    text-indent:-9999em;
}
ul#main-nav li a.kontakt_akt{
    background:transparent url(../img/kontakt-act.png) top left no-repeat;
    display:block;
    height:33px;
    width:92px;
    top:65px;
    left:70px;
    text-indent:-9999em;
}
ul#main-nav li a.kontakt:hover{
    background:transparent url(../img/kontakt-act.png) top left no-repeat;
}
ul#main-nav li.stitches1{
    background:transparent url(../img/stitches-navi.png) top left no-repeat;
    display:block;
    height:1px;
    width:103px;
    top:30px;
    left:0px;
    position:absolute;
}
ul#main-nav li.stitches2{
    background:transparent url(../img/stitches-navi.png) top left no-repeat;
    display:block;
    height:1px;
    width:103px;
    top:60px;
    left:50px;
    position:absolute;
}

/* =positioning main layout
-----------------------------------------------------------------------------*/
#container-start{
    background:transparent url(../img/bg-start.jpg) top left no-repeat;
    height:800px;
    width:1024px;
    margin:0 auto;
    position:relative;
}
#content-start{
    height:520px;
    width:725px;
    margin:0 auto;
}

#announcement{
    background:#fff;
    color:#333;
    font-size:11px;
    position:absolute;
    top:50px;
    left:420px;
    z-index:10;
}
#announcement a{
    color:#fff;
    font-weight:bold;
}
#announcement a:hover{
    text-decoration:underline;
}
#main-content-start{
    float:right;
    width:465px;
    margin:170px 0 0 0;
}
#secondary-content-start{
    float:left;
    width:250px;
    margin:150px 0 0 0;
}

#container{
    background:transparent url(../img/bg-sub-mitte.jpg) top left repeat-y;
    width:1024px;
    margin:10px auto 0 auto;
    position:relative;
}
#content{
    background:transparent url(../img/bg-sub-oben.jpg) top left no-repeat;
    position:relative;
}
#content #wrap{
    background:transparent url(../img/bg-sub-oben.jpg) top left no-repeat;
}
#main-content{
    width:465px;
    float:right;
    margin:150px 170px 0 0;
    padding:0 0 20px 0;
}
#secondary-content{
    float:left;
    width:180px;
    margin:130px 0 0 165px;
}
#secondary-content .extras{
    padding:20px 0 20px 20px;
}
#secondary-content .extras object{
    margin:-7px 0 15px 0;
}
#content-bottom{
    background:transparent url(../img/bg-sub-unten.jpg) top left no-repeat;
    clear:both;
    width:1024px;
    height:287px;
    padding:10px 0 0 390px;
}
#content-bottom p{
    font-size:12px;
    width:400px;
}
#footer-start,
#footer{
    color:#333;
    font-size:12px;
    width:725px;
    height:20px;
    text-align:right;
    margin:-60px auto 0 auto;
}
#footer-start{
    margin:200px auto 0 auto;
}
/* =secondary layout structures
-----------------------------------------------------------------------------*/
#logo{
    background:transparent url(../img/logo.png) top left no-repeat;
    height:90px;
    width:155px;
    margin:0 0 0 15px;
    text-indent:-9999em;
}
#logo a{
    height:66px;
    width:155px;
    display:block;
}
#content-header{
    height:130px;
}
#content-header-start h1,
#content-header h1{
    height:35px;
    width:459px;
    text-indent:-9999em;
}
#content-header-start h1.h1-start{
    background:transparent url(../img/h1-start.png) top left no-repeat;
    margin:20px 0 0 -85px;
}
#content-header h1.h1-geschenk{
    background:transparent url(../img/h1-geschenk.png) top left no-repeat;
    margin:20px 0 0 -55px;
}
#content-header h1.h1-about{
    background:transparent url(../img/h1-about.png) top left no-repeat;
    margin:20px 0 0 -55px;
}
/*
#content-header h1.h1-flittertand{
    background:transparent url(../img/h1-flittertand.png) top left no-repeat;
    margin:20px 0 0 -55px;
}
*/
#content-header h1.h1-kontakt{
    background:transparent url(../img/h1-kontakt.png) top left no-repeat;
    margin:20px 0 0 -55px;
}
#content-header h1.h1-impressum{
    background:transparent url(../img/h1-impressum.png) top left no-repeat;
    margin:20px 0 0 -55px;
}
#content-header-start p,
#content-header p{
    font-size:12px;
    width:420px;
}
#content-header-start p{
    width:400px;
    margin:0 0 15px 0;
}
#content-body h2 span,
#content-body a span{
    background:transparent url(../img/bg-text.png) top left;
}
#content-body{
    min-height:166px;
}

#content-body ul#gallery{

}
#content-body ul#gallery li img{
    margin:0 10px 10px 0;
}

#content-body ul.links{

}
#content-body ul.links li{
    margin:0 0 10px 0;
}
#content-body ul.links li.left{
    float:left;
    width:50%;
}
#content-body ul.links li.right{
    float:right;
    width:50%;
}
#content-body img{
    float:left;
}
#content-body p{
    font-size:11px;
}
#content-body a{
    /*color:#000;*/
    font-size:11px;
    /*font-weight:bold;*/
}
#content-body a.question{
    font-weight:bold;
}
#content-body a:hover{
    text-decoration:underline;
}

p span.highlight{
    color:#000;
    font-weight:bold;
}

#footer-start a,
#footer a{
    color:#333;
}
#footer-start a:hover,
#footer a:hover,
#footer a.impressum_akt{
    color:#950d19;
}

/* =form elements
-----------------------------------------------------------------------------*/
/* =contact form*/
form{
    margin:25px 0 0 0;
}
ul.form-left{
    width:47%;
    float:left;
}
ul.form-right{
    width:47%;
    float:right;
}
label{
    color:#000;
    font-size:12px;
}
form h4.label{
    font-size:11px;
    margin:0 0 3px 0;
    display:block;
    font-style:normal;
    font-weight:normal;
}
input.form-text{
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size:12px;
    width:100%;
    margin:2px 0 10px 0;
    padding:2px 0;
    background: #fff;
    border:1px solid #C69BA2;
}
select{
    margin:0 10px 10px 0;
    width:130px;
}
textarea{
    font-family: Verdana, Arial, Tahoma, sans-serif;
    color:#000;
    font-size:12px;
    background: #fff;
    width:100%;
    border:1px solid #C69BA2;
}
span.form-required{
    font-size:13px;
    font-weight:normal;
    /*color:#fff;*/
    color:#94191B;
    vertical-align:baseline;
}
p.form-button{
    text-align:right;
}
input.btn{
    font-family: Verdana, Arial, Tahoma, sans-serif;
    /*background:#171719;*/
    background:#591925;
    /*border-bottom:1px dotted #171719;*/
    border-bottom:none;
    border-top:none;
    border-left:none;
    border-right:none;
    font-size:12px;
    color:#fff;
    width:71px;
    line-height:26px;
    padding:0 0 2px 0;
    margin:10px 0 0 7px;
}
input.btnhov{
    /*border-bottom:1px dotted #df0081;*/
    color:#f36d36;
    cursor:pointer;
}

/* =miscellaneous
-----------------------------------------------------------------------------*/
/*Twitter*/
ul.tweet_list{
    margin:10px 0 0 0;
}
ul.tweet_list img {
float:left;
margin:0 5px 0 0;
}
ul.tweet_list li{
    margin:0 0 20px 0;
}
/* =useful class names
-----------------------------------------------------------------------------
error (red)
notice (yellow)
success (green)
hide
higlight (yellow)
quiet
removed

*/