/*  
Theme Name: Websache '10
Theme URI: http://websache.de
Version: 3.0
Author: Veronika Sattler
Author URI: http://websache.de
*/

* { margin: 0; padding: 0;}
html, body {background: url(../images/bg.jpg) #ffffff top center fixed; font-family: "Trebuchet MS", "Lucida Sans", "Lucida Grande", Arial, Helvetica, sans-serif; font-size: 14px; color:#615f5d; width: 100%; height: 100%; line-height: 1.4;}
a {text-decoration:none; color: #ea3374;}
a:visited {text-decoration:none;}
a:visited, a:hover, a:focus, a:active {outline:none; text-decoration: none;}
a:focus {text-decoration: underline;}
a img {border:0;}
img {display:block}
p {padding-bottom: 20px;}
h1, h2, h3, h4, h5, h6 {display: block;}
h2 {font-size: 190%; padding-bottom: 14px; color:#858284;}
h3 {font-size: 140%; padding-bottom: 10px; color:#ea3374;}
h3 a {color:#ea3374;}
h3 a:hover {color:#858284;}
h4 {font-size: 120%; padding-bottom: 20px; color:#ea3374;}
h5 {font-size: 100%; padding-bottom: 4px; color:#858284; font-weight: bold;}
.tief {padding-top: 8px;}


/*allgemein*/
.hidden {display: none;}
.wrapper {width: 960px; margin: 0 auto; display: block; position: relative;}

.error {display: block; positiion: relative; width: 100%; min-height: 700px; background: url(../images/error.png) no-repeat; margin-top: 150px;}
.error h2 {font-size: 250%; width: 320px; float: right;}
.error h3 {font-size: 190%; padding-top: 10px; width: 320px; float: right; clear: right;}
.error p {width: 320px; font-weight: bold; padding-top: 70px; float: right; clear: right;}

/*Header mit Navigation*/
header {display: block; width: 100%; margin: 0 auto; height: 256px; overflow: hidden; background:url(../images/header.png); position: relative;}
header div.left {display: block; width: 43%; height: 256px; margin: 0; background:url(../images/header_left.png) bottom right repeat-x; float: left; position: relative;}
header h1 {display: block; float: right;}
header h1 a {display: block; width: 298px; height: 256px; background:url(../images/logo.png) no-repeat top left; text-indent: -9999px;}
header ul {width: auto;}
header dfn {display: none;}
nav {display: block; width: 57%; background:url(../images/header_nav.png) bottom left repeat-x; height: 256px; float: left; position: relative;}
nav ul {display: block; padding-left: 435px; width: 100%; padding-top: 50px;}
nav li {display: block; text-align: left; width: 100%; height: 25px; padding-left: 35px;}
nav li.aktiviert {background: url(../images/nav_link.png);}
nav li a {display: block; color:#333333; font-weight: bold; width: 130px; height: 25px; text-indent: -9999em;}

/*Links mit Hovereffekt*/
#slogan {position: absolute; top: 160px; left: 14px; height: 55px; width: 169px; background:url(../images/slogan.png) no-repeat; text-indent:-9999em; z-index: 20; display: block;}
a#linkeins {position: relative; background:url(../images/start.png) no-repeat top left;}
a#linkeins:hover, a#linkeins:focus {background-position: center left;}
a#linkeins:active, a#linkeins.aktiviert {background-position: bottom left;}

a#linkzwei {position: relative; background:url(../images/leistungen.png) no-repeat top left;}
a#linkzwei:hover, a#linkzwei:focus {background-position: center left;}
a#linkzwei:active, a#linkzwei.aktiviert {background-position: bottom left;}

a#linkdrei {position: relative; background:url(../images/portfolio.png) no-repeat top left;}
a#linkdrei:hover, a#linkdrei:focus {background-position: center left;}
a#linkdrei:active, a#linkdrei.aktiviert {background-position: bottom left;}

a#linkvier {position: relative; background:url(../images/profil.png) no-repeat top left;}
a#linkvier:hover, a#linkvier:focus {background-position: center left;}
a#linkvier:active, a#linkvier.aktiviert {background-position: bottom left;}

a#linkfuenf {position: relative; background:url(../images/blog.png) no-repeat top left;}
a#linkfuenf:hover, a#linkfuenf:focus {background-position: center left;}
a#linkfuenf:active, a#linkfuenf.aktiviert {background-position: bottom left;}

a#linksechs {position: relative; background:url(../images/kontakt.png) no-repeat top left;}
a#linksechs:hover, a#linksechs:focus {background-position: center left;}
a#linksechs:active, a#linksechs.aktiviert {background-position: bottom left;}


/*Slideshow*/
.slideshow {display: block; position: relative; width: 960px; height: 256px; margin: 20px auto 45px auto; overflow: hidden;}
a#prev {position: absolute; z-index: 10; top: 105px; left: 0; text-indent:-9999em; display: block; width: 40px; height: 40px; background:url(../images/prev.png);}
a#next {position: absolute; z-index: 10; top: 105px; right: 0; text-indent:-9999em; display: block; width: 40px; height: 40px; background:url(../images/next.png);}


/*Inhalt Startseite*/
#content {display: table; position: relative; width: 100%; min-height: 400px; margin: 0; overflow: hidden; background:url(../images/content.png); padding: 40px 0; bottom: 0;}
div#left {display: block; position: relative; width: 290px; height: 250px; float: left; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 0;}
div#left h3 {padding-top: 20px; padding-left: 20px;}
div#left ul {list-style: none; font-weight: bold;  line-height: 1.5;}
div#left li {display: block; text-indent: 25px;}
div#left li:hover {background: url(../images/teaser.png);}
div#left li a {color:#858284}
div#left li:hover a {color: #ea3374;}
div#left a {font-weight: bold;}
div#left ul {padding-bottom: 30px; list-style: none;}

div#main {display: block; width: 240px; height: 210px; margin-left: 45px; float: left; position: relative;  background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 20px 25px;}
div#main figure {display: block; width: 200px; height: auto; border: solid 5px #858284; position: relative;}
div#main figure img {opacity: 0.4; width: 100%;}
div#main figure:hover img {opacity: 1;}
div#main figure a {display: block; text-align: center; padding: 10px 0; width: 100%; background: url(../images/figure_a.png); font-weight: bold;position: absolute; z-index: 20; opacity: 1; width: 100%; bottom: 0px;}
div#main figure a strong {display: none;}
div#main figure:hover a {background: url(../images/header.png);}
div#main figure:hover a strong {display: inline;}

div#right {display: block; width: 240px; height: 210px; margin-left: 45px; position: relative; float: right; float: left; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 20px 25px;}
div#right ul {padding-bottom: 30px; list-style: none;}
#right time {display: block; width: 50px; height: 50px; background: url(../images/date.png) no-repeat; font-weight: bold; font-size: 70%; text-align: center; float:left; margin-right: 10px; font-variant:small-caps; padding-top: 10px; color: #333333; line-height: 1.2;}
#right time strong {font-size: 170%; font-style: oblique; font-weight: bold; color: #ea3374; display: block;}
#right p {clear: left; padding-top: 5px;}

/*Leistungen und Profil*/
section {display: block; position: relative; width: 645px; height: auto; float: right;}
section img {float: right; border: solid 5px #cbc9c9; width: 110px; height: auto; display: block; margin-left: 30px; margin-bottom: 40px;}
section ul {list-style: none;}
section li {display: block; padding-bottom: 15px;}

/*Portfolio-Artikel*/
article {display: block; padding: 0px 0 30px 0; overflow: hidden; position: relative; height: auto;}
article img {width: 340px; float: left; margin-left: 0; margin-right: 30px; display: block; height: auto;}
article div {display: block; float: right; width: 260px; position: relative; min-height: 270px;}
article time {display: block; width: 50px; height: 50px; background: url(../images/date.png) no-repeat; font-weight: bold; font-size: 70%; text-align: center; float:left; margin-right: 10px; font-variant:small-caps; padding-top: 10px; color: #333333; line-height: 1.2;}
article time strong {font-size: 170%; font-style: oblique; font-weight: bold; color: #ea3374; display: block;}
article ul {display: block;}
article li {display: block; padding-bottom: 3px; background: url(../images/liste_1.png) no-repeat; width: auto; padding-left: 20px;}
.link {display: block; background:url(../images/button.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 7px 4px; width: 242px; text-align: center; font-weight: bold; position: absolute; bottom: 0;}
.link:hover {padding: 5px 2px; width: 242px; border: solid 2px #ea3374;}


/*Blog*/
article.blog p {clear: left; padding-left: 60px; position: relative; top: -15px; padding-bottom: 20px;}
article.blog .posted {display: block; text-align: left; width: auto; height: 15px; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px;  padding: 10px 12px; position: relative; display: block; margin-left: 60px;  clear: left;}
article.blog .posted a {font-weight: bold;}
article.blog .posted a:hover {color:#858284;}
article.blog img {max-width: 89%; display: block; width: auto; margin-left: 60px;} 
.pagination {background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 10px 12px; position: relative; height: 15px; display: block; font-weight: bold; margin-top: 30px;}
li.page {display: block; float: left; margin-right: 5px;}
li.page a {color: #858284;}
li.page a:hover {color: #ea3374;}
li.active a {color: #ea3374;}
.mehr {display: block; width: 30px; height: 30px; background:url(../images/mehr.png) no-repeat top left; text-indent: 30px; padding-top: 4px; font-weight: bold; font-size: 90%;}

article.blogi p {clear: left; position: relative; padding-bottom: 20px;}
article.blogi ul {clear: left; position: relative; padding-bottom: 20px;}
article.blogi .posted {display: block; text-align: left; width: auto; height: 15px; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px;  padding: 10px 12px; position: relative; display: block;  clear: left;}
article.blogi .posted a {font-weight: bold;}
article.blogi .posted a:hover {color:#858284;}
article.blogi img {max-width: 95%; display: block; width: auto; margin-top: 25px;} 
.pagination {background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 10px 12px; position: relative; height: 15px; display: block; font-weight: bold; margin-top: 30px;}

article.comments {display: block; text-align: left; width: auto; height: auto; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px;  padding: 10px 12px; position: relative; display: block;}
article.comments {display: block; text-align: left; width: auto; height: auto; background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px;  padding: 10px 12px; position: relative; display: block;}
article.comments h4 {padding-bottom: 5px;}
article.comments small {display: block; padding-bottom: 10px; font-weight:bold;}

form#txpCommentInputForm {display: block; height: auto; position: relative; padding-top: 20px;}
form#txpCommentInputForm label {color:#858284; padding: 9px 0; display: block; width: 70px; font-weight: bold; position: relative; float: left;margin-bottom: 0px;}
form#txpCommentInputForm input#name, form#txpCommentInputForm input#email, form#txpCommentInputForm input#web {width: 180px; position: relative; display: block; padding: 10px; background: url(../images/button.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color:#858284; margin-bottom: 12px;}
form#txpCommentInputForm textarea {width: 320px; position: relative; display: block; padding: 10px; background: url(../images/button.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color:#858284; margin-bottom: 12px; float: right;}
form#txpCommentInputForm input#name:hover, form#txpCommentInputForm input#email:hover, form#txpCommentInputForm input#web:hover, form#txpCommentInputForm textarea:hover {border: 2px solid #ea3374; padding: 8px;}
form#txpCommentInputForm input.button {display: block; background: #ea3374; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 11px; width: 575px; text-align: center; font-weight: bold;  color:#f0f0f0; float: left; margin-left: 70px; border: none; margin-bottom: 10px;}
form#txpCommentInputForm input.button.disabled {display: none;}
form#txpCommentInputForm input.button:hover {padding: 11px; border: none;}
.comments_error {display: block; position: absolute; margin-left:-240px; top: 0; font-size: 100%; background: #ea3374; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 10px; color:#f0f0f0; font-weight: bold; width: 200px;}


/*Sidebar*/
aside {display: block; position: relative; width: 260px; height: auto; float: left;}
aside form {display: block; position: relative;}
aside fieldset {border: none;}
aside input {position: relative; display: block; padding: 7px 5px;  background: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: solid 2px #ea3374; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color:#858284; margin-bottom: 20px; width: 200px; margin: 0 auto;}
.rss {display: block; background:url(../images/rss.png) no-repeat; width: 50px; height: 59px; text-indent: -9999em; margin-right: 25px; position: absolute; z-index: 20;  top: -35px; right: 0px;}
.twitter {display: block; background:url(../images/twitter.png) no-repeat; width: 40px; height: 43px; text-indent: -9999em; position: absolute; z-index: 20; top: -30px; left: 25px;}
aside div.box {background:url(../images/teaser.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px;  padding: 20px 0px; position: relative; display: block; clear: both;}

aside h2 {font-size: 140%;color: #ea3374; padding: 0 20px 12px 20px;}
aside ul {list-style: none; font-weight: bold; line-height: 1.5;}
aside li {display: block; text-indent: 30px;}
aside li:hover {background: url(../images/teaser.png);}
aside li a {color:#858284}
aside li:hover a {color: #ea3374;}
aside blockquote {padding: 0 20px; line-height:1.3em; color: #858284; font-weight: bold; font-size: 90%;}
.grey {color: #ea3374; display: block; padding: 10px 0 20px 0; font-size: 90%;}
aside address {padding: 0 20px 20px 20px; line-height:1.3em; color: #858284; font-weight: bold; font-style:normal;}
.telefon {display: block; background:url(../images/telefon.png) no-repeat top left; text-indent: 27px; padding-top: 2px; margin-bottom: 5px;}
.mail {display: block; background:url(../images/brief.png) no-repeat top left; text-indent: 27px; padding-top: 2px;}


/*Kontakt*/
section form.zemContactForm {display: block; width: 100%; height: auto; position: relative; padding-top: 20px; float: right;}
section form.zemContactForm fieldset {border: none;}
section form.zemContactForm legend {display: none;}
section form.zemContactForm label {color:#858284; padding: 11px 0; display: block; width: 120px; font-weight: bold; position: relative; float: left; clear: left;margin-bottom: 12px;}
section form.zemContactForm input {position: relative; display: block; padding: 11px; width: 250px; background: url(../images/button.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color:#858284; margin-bottom: 12px;}
section form.zemContactForm input.hidden {display: none;}
section form.zemContactForm input:hover, section form.zemContactForm textarea:hover {border: 2px solid #ea3374; padding: 9px;}
section form.zemContactForm textarea {display: block; padding: 11px; background: url(../images/button.png); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; border: none; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; color:#858284; clear: left; width: 370px; margin-bottom: 12px;}
section form.zemContactForm input.zemSubmit {display: block; background: #ea3374; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 11px; text-align: center; font-weight: bold; width: 390px; color:#f0f0f0;}
section form.zemContactForm input.zemSubmit:hover {padding: 11px; border: none;}
section form.zemContactForm .zemError{display: block; position: absolute; right: 0; font-size: 100%; background: #ea3374; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 10px; color:#f0f0f0; font-weight: bold; width: 200px;}
section form.zemContactForm .zemThanks {display: block; font-size: 100%; background: #ea3374; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; padding: 10px; color:#f0f0f0; font-weight: bold; width: 400px; margin-top: 30px;}


/*Footer*/
footer {width: 100%; height: 150px; display: table; position: relative; margin: 0 auto; background: url(../images/footer.png); color: #cbc9c9; overflow: hidden; bottom: 0;}
footer ul {margin: 0 auto; display: block; width: 960px; height: auto; position: relative; list-style: none; padding-top: 125px; font-size: 83%; font-weight: bold;}
footer li {float: left; padding-right: 12px;}
.right {float: right; padding-right: 0; padding-left: 20px;}