/* Reset */
*, html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
/* @group Global */
body {
background: #ebebeb;
color: #1e1e1e;
font: normal 14px/1.3 Helvetica, Arial, sans-serif;
width:100%;
margin:auto;
}
.container {
margin: 0 auto;
width: 940px;
}
.container table{
padding:20px;
}
.container table td{
padding:20px;
}
#head .container, #feature .container, #footer .container {
color: red;
}
.left {
float: left;
}
.right {
float: right;
}
.column-1 {
width: 270px;
margin-right: 65px;
float: left;
text-align:left;
}
.column-2 {
width: 605px;
margin-right: 65px;
float: left;
}
/* entfernt "margin-right" vom letzten Element in eine Reihe */
.last, #preisbg .column-1 + .column-1 + .column-1, #footer .column-1 + .column-1 + .column-1, #footer .column-1 h2 + a + a + a + a + a, #copyright .right a + a {
margin-right: 0;
}
hr {
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
height: 0;
}
h2 + hr {
margin: 9px 0 9px 0;
}
/* @end */
/* @group Text-Links */
a:link, a:visited {
color: grey;
text-decoration: none;
}
a:hover, a:active {
color: red;
text-decoration: underline;
}
/* @end */
/* @group Headlines */
h1 {
font: bold 52px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
padding: 30px 0 0 0;
}
h2, legend {
font: bold 22px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #1e1e1e;
text-shadow: 1px 1px 0px #fff;
}
h2 {
margin: 0 0 6px 0;
}
#footer h2 {
color: #fff;
text-shadow: none;
}
h3 {
font: bold 32px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
}
/* @end */
/* @group Form */
form {
width: 590px;
}
form hr {
width: 940px;
}
legend {
padding: 0 0 15px 0;
}
form ul {
list-style: none;
margin: 0 0 65px 0;
}
form li {
height: 30px;
margin: 20px 0 0 0;
}
label, .label {
display: block;
width: 150px;
float: left;
line-height: 30px;
cursor: pointer;
}
input, textarea {
display: block;
width: 430px;
float: left;
height: 18px;
background: #f5f5f5 url(images/input-shadow-top.png) top left repeat-x;
padding: 3px 4px;
border: 1px solid #ccc;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 1px 1px 0 #fff;
-webkit-box-shadow: 1px 1px 0 #fff;
font-size: 12px;
line-height: 18px;
margin: 2px 0 0 0;
color: #454545;
}
input[type=text], input[type=password], textarea {
color: #888;
}
input:focus, textarea:focus {
color: #454545;
padding: 2px 3px;
border: 2px solid #afc800;
}
form span + p {
float: left;
color: #888;
}
form span + p:hover, #cvc-info:hover p {
color: red;
}
#card-number {
width: 325px;
}
.label-cvc {
width: 64px;
text-align: center;
}
#card-cvc {
width: 30px;
}
#card-expire-month {
width: 45px;
}
#card-expire-year {
width: 65px;
}
.label-valid-thru {
width: 20px;
text-align: center;
}
#cvc-info {
width: 270px;
position: relative;
top: -111px;
left: 319px;
}
#cvc-info img {
float: left;
position: relative;
margin: 0 12px 0 0;
top: 23px;
left: 6px;
z-index: 4;
}
#cvc-info p {
height: 66px;
background: url(images/gradient-sprite.png) 0 -92px repeat-x;
border: 1px solid #ccc;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 1px 1px 0 #fff;
-webkit-box-shadow: 1px 1px 0 #fff;
font: normal 10px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #888;
position: relative;
top: 13px;
padding: 8px 0 0 0;
z-index: 1;
}
#cvc-info .arrow-border {
border-color: transparent transparent #ccc transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: relative;
bottom: 90px;
left: 221px;
z-index: 2;
}
#cvc-info .arrow {
border-color: transparent transparent #ebebeb transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: relative;
bottom: 89px;
left: 201px;
z-index: 3;
}
/* @end */
/* @group Head */
#head {
height: 87px;
background: #141414 url(images/gradient-sprite.png) 0 0 repeat-x;
background:url() no-repeat;
height:30%;
}
#highlight {
position: relative;
left: -161px;
width: 940px;
height: 222px;
background: url() 0 0 no-repeat;
margin: 0 auto;
}
#highlight.big {
height: 512px;
}
#head .container {
position: relative;
height:10%;
left: 161px;
}
#navi {
color:red;
height: 80px;
width:99%;
display:inline-block;
list-style: none;
position:relative;
}
#hlogo {
display: block;
width: 219px;
height: 36px;
background: url(images/sprite.png) -476px -136px no-repeat;
float: left;
margin: 18px 0 0 0;
text-indent: -9999px;
}
#navi li {
color:red;
display:inline-block;
padding: 30px 30px;
}
#navi a {
display:inine-block;
width: 90px;
height: 50px;
font: bold 26px/87px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
#navi a:link, #navi a:visited {
text-decoration: none;
}
#navi a:hover, #navi a:active, #navi .active {
width:50px;
color: red;
text-decoration: none;
/*background: url(images/sprite.png) -696px -453px no-repeat; */
}
/* @end */
/* @group Feature */
#feature {
height: 135px;
background: #1e1e1e;
}
#feature.big {
height: 425px;
}
#feature .container {
position: relative;
}
#feature .left {
margin: 38px 0 0 0;
}
#feature .right {
width: 475px;
margin: 40px 0 0 0;
}
#feature p {
color: #fff;
font: 16px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 460px;
margin: 16px 0 0 2px;
}
#btn-reg:link, #btn-reg:visited {
display: block;
width: 228px;
height: 80px;
background: url(images/sprite.png) 0 0 no-repeat;
float: left;
margin: 33px 0 0 1px;
text-indent: -9999px;
}
#btn-reg:hover, #btn-reg:active {
background: url(images/sprite.png) -238px 0 no-repeat;
}
#btn-feature:link, #btn-feature:visited {
display: block;
width: 228px;
height: 80px;
background: url(images/sprite.png) 0 -90px no-repeat;
float: right;
margin: 33px 0 0 0;
text-indent: -9999px;
}
#btn-feature:hover, #btn-feature:active {
background: url(images/sprite.png) -238px -90px no-repeat;
}
#preisbg {
position: relative;
min-width: 940px;
width: 100%;
height: 615px;
background: url(images/feature-preise.png) center center no-repeat;
margin: 0 auto;
z-index: 2;
}
#preisbg .column-1 {
margin-top: 80px;
text-align: center;
}
.abotitel {
font: bold 45px/72px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
}
.abountertitel {
display: block;
text-transform: uppercase;
font: normal 18px/41px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 0px #000, 0px 0px 65px rgba(255,255,255,0.4);
}
#preisbg ul {
text-align: left;
list-style-position: inside;
width: 232px;
margin: 15px auto 11px auto;
color: #1e1e1e;
font: normal 14px/1.3 Helvetica, Arial, sans-serif;
}
#preisbg ul li {
list-style-image: url(images/list-style-yes.png);
height: 19px;
padding: 10px 0 10px 0;
border-bottom: 1px solid #ccc;
}
#preisbg ul li + li {
border-top: 1px solid #fff;
}
#preisbg ul li + li + li + li + li {
border-bottom: none;
}
#preisbg ul li span {
position: relative;
top: -4px;
}
#preisbg ul li.no {
list-style-image: url(images/list-style-no.png);
}
.abopreis {
font: bold 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 0px #000;
}
.abopreis span {
font: normal 18px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 1px 1px 0px #000;
}
/* @end */
/* @group Main */
#main {
background: url(images/main-gradient-top.png) top left repeat-x;
border-top: 1px solid #fff;
padding: 65px 0 0 0;
overflow: hidden;
}
#main.preise {
background: url(images/main-gradient-top.png) top left repeat-x;
border-top: 1px solid #fff;
padding: 210px 0 0 0;
overflow: hidden;
clear: both;
position: relative;
top: -144px;
z-index: 1;
}
#main p, #main span, #main label {
text-shadow: 1px 1px 0 #fff;
}
#
#main div.column-1 {
margin-bottom: 39px;
height: 125px;
}
#main div.column-2 {
margin-bottom: 35px;
height: 145px;
}
#minigalerie {
display: table;
border-spacing: 10px;
}
#minigalerie a {
display: table-cell;
vertical-align: middle;
}
#minigalerie img {
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
}
#minigalerie img:target {
width: 300px;
height: 150px;
}
#minigalerie img {
background-color: #ffffff;
padding: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 0 7px rgba(100, 100, 100, 1);
-moz-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
-webkit-box-shadow: 0 0 7px rgba(100, 100, 100, 1);
}
#datenschutz {
}
#btn-reg-big:link, #btn-reg-big:visited {
display: block;
width: 607px;
height: 126px;
background: url(images/sprite.png) 0 -180px no-repeat;
float: left;
margin: 0 0 65px 0;
text-indent: -9999px;
}
#btn-reg-big:hover, #btn-reg-big:active {
background: url(images/sprite.png) 0 -316px no-repeat;
}
#bearbeitung{
margin-left: 20px;
width:1200px;
margin-right:500px;
}
.headerText{
text-align:center;
font-size:1.8em;
}
#sidebar {
width: 270px;
height: 704px;
float: right;
background: url(images/sprite.png) -825px 0 no-repeat;
margin: 0 0 65px 0;
overflow: hidden;
}
#sidebar a {
display: block;
width: 246px;
height: 170px;
text-decoration: none;
}
#sidebar a:link .thumb-lbox, #sidebar a:visited .thumb-lbox {
position: relative;
top: 10px;
left: 10px;
display: block;
width: 246px;
height: 170px;
background: url(images/sprite.png) -450px -442px no-repeat;
text-indent: -9999px;
z-index: 2;
}
#sidebar a:hover .thumb-lbox, #sidebar a:active .thumb-lbox {
background: url(images/sprite.png) -450px -612px no-repeat;
}
#sidebar img {
position: relative;
top: -170px;
width: 204px;
height: 128px;
margin: 33px 33px 9px 33px;
z-index: 1;
}
#partner {
float: left;
width: 203px;
/*margin: 0 132px 0 0;*/
}
#partner a {
display: block;
margin: 0 0 10px 0;
text-indent: -9999px;
}
.aatc:link, .aatc:visited {
width: 203px;
height: 58px;
background: url(images/sprite.png) -476px 0 no-repeat;
}
.aatc:hover, .aatc:active {
background: url(images/sprite.png) -476px -68px no-repeat;
}
.awl:link, .awl:visited {
width: 203px;
height: 34px;
background: url(images/sprite.png) -617px -352px no-repeat;
}
.awl:hover, .awl:active {
background: url(images/sprite.png) -617px -386px no-repeat;
}
.mut:link, .mut:visited {
width: 127px;
height: 58px;
background: url(images/sprite.png) -617px -222px no-repeat;
float: left;
}
.mut:hover, .mut:active {
background: url(images/sprite.png) -617px -290px no-repeat;
}
.peachpit:link, .peachpit:visited {
width: 50px;
height: 60px;
background: url(images/sprite.png) -754px -222px no-repeat;
float: right
}
.peachpit:hover, .peachpit:active {
background: url(images/sprite.png) -754px -292px no-repeat;
}
#main blockquote {
float: right;
margin: 0 0 20px 0;
}
#main blockquote p {
color: #888;
margin: 0 0 10px 0;
font: italic 16px/1.3 Georgia, Times, “Times New Romanâ€, serif;
}
#main blockquote span {
color: #aaa;
font: bold 16px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
float: right;
}
/* @end */
/* @group Footer */
#footer {
margin-top:360px;
width: 100%;
height:356px;
background: black;
color:red;
margin-bottom:-200px;
}
#bird {
margin-left: -350px;
width: 10%;
height: 450px;
background: url(bird.png) 0px 130px no-repeat;
}
#footer .container {
position: relative;
left: 75%;
top: 30%;
color:red;
}
.youtube, .facebook, .twitter {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
float: left;
}
.youtube:link, .youtube:visited {
background: url(images/sprite.png) -749px -180px no-repeat;
}
.facebook:link, .facebook:visited {
background: url(images/sprite.png) -617px -180px no-repeat;
}
.twitter:link, .twitter:visited {
background: url(images/sprite.png) -683px -180px no-repeat;
}
.youtube:hover, .youtube:active {
background: url(images/sprite.png) -782px -180px no-repeat;
}
.facebook:hover, .facebook:active {
background: url(images/sprite.png) -650px -180px no-repeat;
}
.twitter:hover, .twitter:active {
background: url(images/sprite.png) -716px -180px no-repeat;
}
.visa, .mastercard, .maestro, .amex, .paypal {
display: block;
width: 50px;
height: 30px;
text-indent: -9999px;
float: left;
margin: 0 5px 0 0;
}
.visa:link, .visa:visited {
background: url(images/sprite.png) -714px -124px no-repeat;
}
.mastercard:link, .mastercard:visited {
background: url(images/sprite.png) -714px -62px no-repeat;
}
.maestro:link, .maestro:visited {
background: url(images/sprite.png) -714px -31px no-repeat;
}
.amex:link, .amex:visited {
background: url(images/sprite.png) -714px 0 no-repeat;
}
.paypal:link, .paypal:visited {
background: url(images/sprite.png) -714px -93px no-repeat;
}
.visa:hover, .visa:active {
background: url(images/sprite.png) -765px -124px no-repeat;
}
.mastercard:hover, .mastercard:active {
background: url(images/sprite.png) -765px -62px no-repeat;
}
.maestro:hover, .maestro:active {
background: url(images/sprite.png) -765px -31px no-repeat;
}
.amex:hover, .amex:active {
background: url(images/sprite.png) -765px 0 no-repeat;
}
.paypal:hover, .paypal:active {
background: url(images/sprite.png) -765px -93px no-repeat;
}
address {
font: normal 14px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
color:red;
}
adress a {
color:white;
}
#copyright {
color: #454545;
font: normal 12px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 65px 0 0 0;
float: left;
width: 100%;
}
#copyright #flogo {
display: block;
width: 97px;
height: 16px;
background: url(images/sprite.png) -617px -420px no-repeat;
float: left;
margin: 0 10px 0 0;
text-indent: -9999px;
}
#copyright span {
float: left;
margin: 5px 0 0 0;
}
#copyright .right a {
float: left;
margin: 5px 10px 0 0;
}
/* @end */