/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
startseite.css / SP-CH-2007
(Elemente in #startTeasers und #startMain)
Version:	2007-02-21 HTML-E
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +  */


/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */


/* !!! Teaser-Box !!!
==================================================================================== */

#startTeasers {
position: relative;
margin: 0 0 20px 0;
width: 960px;
background: transparent url(../images/bg_startTeasers_neu.gif) repeat-y;
}

.teaserBox, .teaserBoxLast {
float: left;
width:225px;
margin: 0 20px 0 0;
padding: 6px 0 3.7em 0;
background: transparent url(../images/bg_startTeaser_neu.gif) 0 0 no-repeat;
}

.teaserBoxLast {
float: right;
margin: 0;
}

/* !!! Hier werden margin fuer *ALLE* Elemente innerhalb der Boxen gesetzt! horizontales Padding waere IE-fehler anfaellig ...
==================================================================================== */
#startTeasers h2, #startTeasers p {
margin: 7px 10px;
}

#startTeasers h2{
clear: both;
font-size:140%;
}
#startTeasers h2 a:link,
#startTeasers h2 a:visited {
font-weight: bold;
text-decoration:none;
color:#000;
}
#startTeasers h2 a:hover,
#startTeasers h2 a:active,
#startTeasers h2 a:focus{
text-decoration:underline;
}

#startTeasers p {
font-size:120%;
line-height:160%;
}

#startTeasers img {
display: block;
clear: both;
}

/* Modul Blaettern:
==================================================================================== */
#startTeasers p.blaettern {
margin: 5px 10px 13px 0;
font-size:120%;
font-weight: bold;
line-height: 160%;
text-transform:uppercase;
color:#585858;
background: transparent;
}

#startTeasers p.blaettern:after {
content: "."; 
display:block; 
height:0;
clear: both; 
visibility: hidden;
}

/* Zurueck-Link
==================================================================================== */
#startTeasers p.blaettern a.back,
#startTeasers p.blaettern a.back:link,
#startTeasers p.blaettern a.back:visited {
display: block;
float: right;
width: 19px;
height: 19px;
background: transparent url(../images/icon_blaettern_zurueck_weiss_transp.gif) center left;
}

#startTeasers p.blaettern a.back:hover,
#startTeasers p.blaettern a.back:active,
#startTeasers p.blaettern a.back:focus {
background: transparent url(../images/icon_blaettern_zurueck_rollover_weiss_transp.gif) center left;
}

/* Zwischentext
==================================================================================== */
#startTeasers p.blaettern span.text {
display: block;
float: right;
padding: 0 10px;
}


/* Vorwaerts-Link
==================================================================================== */
#startTeasers p.blaettern a.forward,
#startTeasers p.blaettern a.forward:link,
#startTeasers p.blaettern a.forward:visited {
display: block;
float: right;
width: 19px;
height: 19px;
background: transparent url(../images/icon_blaettern_vor_weiss_transp.gif) center left;
}

#startTeasers p.blaettern a.forward:hover,
#startTeasers p.blaettern a.forward:active,
#startTeasers p.blaettern a.forward:focus {
background: transparent url(../images/icon_blaettern_vor_rollover_weiss_transp.gif) center left;
}

/* Positionierung und Formatierung des "Artikel lesen"-Elementes in den "startTeaser"-Elementen 
==================================================================================== */
#startTeasers p.readArticle {
position: absolute;
bottom: 0;
width: 205px;
padding-bottom: 0;
text-align:right;text-transform:uppercase;
font-size:120%;
line-height: 180%;
}

#startTeasers p.readArticle a:link,
#startTeasers p.readArticle a:visited {
padding: 4px 30px 4px 0;
background: transparent url(../images/pfeil_rot_transp_up.png) center right no-repeat;
text-decoration:none;
color:#E2001A;font-weight:bold;
}

#startTeasers p.readArticle a:hover, 
#startTeasers p.readArticle a:active, 
#startTeasers p.readArticle a:focus {
background: transparent url(../images/pfeil_rot_transp_hover.png) center right no-repeat;
text-decoration:underline;
}


/*  + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
!!! Haupt-Content-Bereich auf der Startseite !!!
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

/* !!! Teaser-Boxen !!!
==================================================================================== */

#startMain .contentTeaser,
#startMain .blogTeaser {
position: relative;
margin: 0 0 20px 0;
width: 470px;
background: #fff;
min-height: 141px;
}

#startMain .blogTeaser {
background: #fff url(../images/icon_weblog.gif) 10px 13px no-repeat;
}

/* redundantes Clearen, damit im Markup nur 1 Klasse vergeben wird */
#startMain .contentTeaser:after,
#startMain .blogTeaser:after {
content: "."; 
display:block; 
height:0;
clear: both; 
visibility: hidden;
}

#startMain .blogTeaser h2 {
padding-top: 12px;
padding-left: 75px;}



#startMain .contentTeaser img {
float: left;
margin: 0 14px 0 0;
}

#startMain .contentTeaser p,
#startMain .blogTeaser p{
margin: 0 10px 0 10px;
padding: 0 0 2.7em 0;
}

/* Ueberschreibendes margin fuer blogTeaser-Inhalt auf Startseite */
#startMain .blogTeaser h3,
#startMain .blogTeaser h4,
#startMain .blogTeaser p {margin-left: 40px;}

#startMain .contentTeaser p.date {
float: right;
display: inline; /* fuer IE! */
font-weight: bold;
padding: 9px 0 7px 7px;
text-align: right;
line-height: 100%;
}

/* Positionierung und Formatierung des "Artikel lesen"-Elementes in ".contentTeaser", ".blogTeaser" und ".postTeaser" 
==================================================================================== */
#startMain .contentTeaser p.readArticle,
#startMain .blogTeaser p.readArticle,
#blogMain .postTeaser p.readArticle {
position: absolute;
bottom: 7px;
right: 0;
padding: 0;
text-align:right;text-transform:uppercase;
font-size:120%;
line-height: 180%;
}

/* Ueberschreibung fuer Blog-Start-Seite */
#blogMain #contentCanvas .postTeaser p.readArticle {
position: static;
margin: -13px 10px 10px 0;
padding: 0;
}

.contentTeaser p.readArticle a,
.contentTeaser p.readArticle a:link,
.contentTeaser p.readArticle a:visited,
.blogTeaser p.readArticle a,
.blogTeaser p.readArticle a:link,
.blogTeaser p.readArticle a:visited,
#blogMain #contentCanvas .postTeaser p.readArticle a,
#blogMain #contentCanvas .postTeaser p.readArticle a:link,
#blogMain #contentCanvas .postTeaser p.readArticle a:visited {
padding: 4px 30px 4px 0;
background: transparent url(../images/pfeil_rot_transp_up.png) center right no-repeat;
text-decoration:none;
color:#E2001A;font-weight:bold;
}

.contentTeaser p.readArticle a:hover, 
.contentTeaser p.readArticle a:active, 
.contentTeaser p.readArticle a:focus,
.blogTeaser p.readArticle a:hover, 
.blogTeaser p.readArticle a:active, 
.blogTeaser p.readArticle a:focus,
#blogMain #contentCanvas .postTeaser p.readArticle a:hover,
#blogMain #contentCanvas .postTeaser p.readArticle a:active,
#blogMain #contentCanvas .postTeaser p.readArticle a:focus {
background: transparent url(../images/pfeil_rot_transp_hover.png) center right no-repeat;
text-decoration:underline;
}

/* #blogMain #contentCanvas .postTeaser p.readArticle a {
background: lime;
} */