habe eine Webseite von blau in rot umgestaltet. Jedoch weis ich grad nicht wie ich dieses blau von den Buttons weg bekomme.
Inhalt Style.css:
PHP Code:
/*********************************/
/************ Website ************/
/*********************************/
body {
background:rgb(13, 18, 24) url(../images/website/backgrounds/bg.png) center top repeat;
font:12px Helvetica67, "Trebuchet MS", sans-serif;
color: #000000;
font-size: 13px;
line-height: 1.5em;
text-shadow: 1px 1px 0 hsla(0, 0%, 100%, 1);
}
body:before, body:after {
position: fixed;
left: 0;
width: 100%;
height: 10px;
content: "";
z-index: 100;
-webkit-box-shadow: 0 0 10px rgba(0,255,255,1);
-moz-box-shadow: 0 0 10px rgba(0,255,255,1);
box-shadow: 0 0 10px rgba(0,255,255,1);
}
body:before {
top: -10px;
}
body:after {
bottom: -10px;
}
.overlay_box_top_button {
width: 38px;
height: 38px;
background: url('../images/website/overlay/button.png') repeat-x transparent 0 0;
position: fixed;
right: 24px; top: 8px;
cursor: pointer;
z-index: 2;
}
.overlay_box_top_button:hover {background-position:0 -38px;}.overlay_box_top_button:active, .overlay_box_top_button:focus {background-position:0 -76px;}
.website {
max-width: 1400px; min-width: 1080px;
background:url(../images/website/backgrounds/abg.png) no-repeat center top;
margin: 0 auto;
position: relative;
z-index: 0;
}
.website .page {
max-width: 1200px; min-width: 1100px;
background: url(../images/website/backgrounds/bbg.png) no-repeat center bottom;
margin: 0 auto; padding-bottom: 150px;
}
.website .pageContainer {
width: 1080px;
background: hsla(0, 0%, 100%, 0.2);
margin: 0 auto; padding: 0 10px 10px 10px;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.website .page .header {
width:501px; height:135px;
background:url(../images/website/header/header.png) no-repeat bottom;
margin: 0 auto; padding-top: 141px;
}
.website .page .navigation {
width: 1080px; height: 40px;
background: url(../images/website/navigation/bg.png) no-repeat;
margin: 55px 0 7px 0; padding: 30px 0 0 0;
text-align: center;
}
.website .navigation a, .website .navigation a:focus {
background: none;
padding: 9px 6px; margin: 0 5px;
border: 1px solid transparent;
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
font-size: 17px;
font-family: Catriel, 'Trebuchet MS', sans-serif;
text-decoration: none;
color: hsla(0, 100%, 100%, 1);
text-shadow: #000 1px 1px 0;
transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease;
}
.website .navigation a:hover {
background: hsla(0, 0%, 0%, 0.10);
}
.website .navigation a:active {
background: hsla(0, 0%, 0%, 0.10);
border: 1px solid hsla(0, 100%, 50%, 0.7);
}
.website .page .contents {
width: 1078px;
margin: 0 auto;
}
.website .page .contents .col {
width: 260px;
float: left;
}
.website .page .contents .col .boxContainer {
background: url(../images/website/box/bg.png) repeat-y top center #8B131F;
padding: 7px;
border: 1px solid hsla(0, 85%, 50%);
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30); -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30);
}
.website .page .contents .col .boxContainer .box {
background: hsla(0, 0%, 92%, 1);
padding: 5px; margin-top: 8px;
border: 1px solid rgba(0, 0, 0, 0.30);
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 0 0 0 1px hsla(0, 85%, 50%); -webkit-box-shadow: 0 0 0 1px hsla(0, 85%, 50%); -moz-box-shadow: 0 0 0 1px hsla(0, 85%, 50%);
}
.website .page .contents .col .boxContainer .box p.list {
text-align: right;
}
.website .page .contents .col .boxContainer .box p.list span.span {
width: 120px;
padding-left: 5px;
color: hsl(0, 1%, 37%);
text-align: left;
float: left;
}
.website .page .contents .col .socialNetworks {
width: 266px; height: 40px;
margin: 2px 0 0 0;
background: url(../images/website/footer/subfooter.png) no-repeat transparent center top;
text-align: center;
}
.website .page .contents .col .socialNetworks a {
width: 42px; height: 30px;
background: url(../images/website/footer/subfooterSocial.png) no-repeat transparent 42px 42px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
text-align: center;
}
.website .page .contents .col .socialNetworks a:hover, .website .page .contents .socialNetworks a:active {
height: 34px;
}
.website .page .contents .col .socialNetworks a.fb {
background-position: 0 bottom;
}
.website .page .contents .col .socialNetworks a.tw {
background-position: -42px bottom;
}
.website .page .contents .col .socialNetworks a.yt {
background-position: -84px bottom;
}
.website .page .contents .col .socialNetworks a.rs {
background-position: -126px bottom;
}
.website .page .contents .main-col {
width: 810px;
float: right;
}
.website .page .contents .main-col .contentContainer {
background: url(../images/website/box/bg.png) repeat-y top center #cd2d2d;
padding: 7px;
border: 1px solid hsla(0, 85%, 50%);
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30); -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30); -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.30);
}
.website .page .contents .main-col .content, .website .page .contents .main-col .slider {
background: hsla(0, 0%, 92%, 1);
padding: 5px;
border: 1px solid rgba(0, 0, 0, 0.30);
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 0 0 0 1px hsla(0, 85%, 50%); -webkit-box-shadow: 0 0 0 1px hsla(0, 85%, 50%); -moz-box-shadow: 0 0 0 1px hsla(0, 85%, 50%);
}
.website .page .contents .main-col .slider {
width: 787px;
padding: 1px;
}
.footer {
width: 1080px;
margin: 0 auto 10px auto; padding: 0;
font: 11px, "Trebuchet MS";
font-weight: bold;
text-align:right;
color: hsl(0, 0%, 0%);
}
.footer .valids {
float: right;
margin-left: 20px;
}
.footer .valids img {
margin: 0 3px;
border: none;
opacity: 0.4;
transition: opacity 0.6s ease; -webkit-transition: opacity 0.6s ease; -moz-transition: opacity 0.6s ease; -o-transition: opacity 0.6s ease;
}
.footer .valids img:hover, .footer .valids img:focus, .footer .valids img:active {
opacity: 1.0;
}
.footer .backlinks {
float: right;
margin-top:-4px;
}
.footer .backlinks a {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
.clear {
clear: both;
}
p.clear {
clear: both;
width: 0; height: 0;
margin: 0; padding: 0;
visibility: hidden;
}
/*********************************/
/************ Website ************/
/*********************************/
div.table {
width: 100%;
font-size: 12px;
}
div.table .thead {
}
div.table .tbody {
}
div.table .thead .tr, div.table .tbody .tr {
height:18px;
margin: 0 0 4px 0; padding: 4px 6px;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
div.table .thead .tr {
background: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 255, 255, 0.06);
}
div.table .tbody .tr {
background: rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 255, 255, 0.12);
}
div.table .thead .tr div, div.table .tbody .tr div {
float: left;
}
div.table .thead .tr div {
font-weight: bold;
}
PHP Code:
/*********************************/
/****** Pseudotags - Anfang ******/
/*********************************/
/*::selection {background: hsla(0, 100%, 50%, 0.5);}*/
::-moz-selection {background: hsla(0, 50%, 20%, 0.5);}
::-webkit-input-placeholder {color: hsl(0, 0%, 20%); text-shadow: none;}
::-moz-placeholder {color: hsl(0, 0%, 20%); text-shadow: none;}
/*::placeholder {color: hsl(0, 0%, 20%);}*/
/*******************************/
/****** Pseudotags - Ende ******/
/*******************************/
/****************************************/
/****** Einzelne Elemente - Anfang ******/
/****************************************/
img {border:none;}
ul, ol {margin:0; padding:0 0 0 20px;}
li {margin:0; padding:0;}
hr {height:1px; background:#c0c0c0; border:none; margin:10px 0;}
table {margin:0; padding:0; border-collapse:collapse; border-spacing:0; border-style:none;}
td, div, p {
margin:0; padding:0;
text-decoration: none;
font-weight:normal;
cursor:default;
}
fieldset {border:none;}
fieldset legend {font-weight:bold; padding:0;}
label {padding-top:10px; float:left;}
input, a {outline: none;}
/**************************************/
/****** Einzelne Elemente - Ende ******/
/**************************************/
/************************************/
/************** Fonts ***************/
/************************************/
@font-face {font-family:'Helvetica67'; src:url('../fonts/Helvetica67.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family:'HelveticaLT67'; src:url('../fonts/HelveticaLT67.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family:'Gothic'; src:url('../fonts/Gothic.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family:'Candara'; src:url('../fonts/Candata.ttf'); font-weight: normal; font-style: normal;}
@font-face {font-family:'Catriel'; src:url('../fonts/Catriel.ttf'); font-weight: normal; font-style: normal;}
a:active, a:focus, input {outline: none;}
a, a:visited {font-family:'Helvetica67',Verdana,sans-serif; color:hsl(30, 100%, 40%); font-weight:normal; outline:none; text-decoration:none; transition: color 0.3s linear 0s;}
a:hover {color:hsl(30, 100%, 50%); outline:none;}
a:active, a:focus {text-decoration:none;}
h1, h2, h3, h4 {
margin: 0 0 4px 0;
font-family: 'Archivo',"Trebuchet MS",Verdana,sans-serif;
color: hsl(30, 100%, 50%);
text-decoration: underline;
}
h1 {font-size:18px; letter-spacing:1px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4 {font-size:12px; text-decoration: none;}
/* Colors */
.normalColor01 {color:hsl(180, 100%, 35%);}
.normalColor02 {color:hsl(180, 100%, 25%);}
.highlight01 {color:hsl(200, 100%, 50%);}
.highlight02 {color: hsl(30, 100%, 50%);}
.green {color:#11c908;}
.red {color:#ff0000;}
.yellow {color:#ddb700;}
/* Sizes */
.sechs {font-size:6px;}
.acht {font-size:8px;}
.zehn {font-size:10px;}
.elf {font-size:11px;}
.vierzehn {font-size:14px;}
.achtzehn {font-size:18px;}
.zweizwei {font-size:22px;}
.archivo {
font-family: 'Archivo Narrow', sans-serif;
}
/************************************/
/************** Fonts ***************/
/************************************/
/****************************************/
/***************** Misc *****************/
/****************************************/
/* Aligns and Styles */
.left {text-align:left;} .center {text-align:center;} .right {text-align:right;}
.nound {text-decoration:none;} .und {text-decoration:underline;}
.kursiv {font-style:italic;} .bold {font-weight:bold;}
/* Margin and Padding */
.padding {padding-top: 30px;} .nopad {padding: 0;}
.marginTop{margin-top:30px;} .nomar {margin:0;}
/* Widths */
.w030 {width: 30px;} .w140 {width: 140px;} .w160 {width: 160px;} .w170 {width: 170px;}
.w190 {width: 190px;} .w220 {width: 220px;} .w200 {width: 200px;}
.p05 {width: 05%;} .p10 {width: 10%;} .p15 {width: 15%;} .p20 {width: 20%;} .p25 {width: 25%;}
.p30 {width: 30%;} .p35 {width: 35%;} .p40 {width: 40%;} .p45 {width: 45%;} .p50 {width: 50%;}
.p55 {width: 55%;} .p60 {width: 60%;} .p65 {width: 65%;} .p70 {width: 70%;} .p75 {width: 75%;}
.p80 {width: 80%;} .p85 {width: 85%;} .p90 {width: 90%;} .p95 {width: 95%;} .p100 {width: 100%;}
/****************************************/
/***************** Misc *****************/
/****************************************/
/**************************************/
/****** Einzelne Seiten - Anfang ******/
/**************************************/
.fail, .hint, .success {
min-height: 20px;
margin: 7px auto; padding: 6px 6px 6px 32px;
border: 1px solid #b3a79b;
text-align: left;
}
.fail {
background: #FFDDDD url(../images/icons/misc/fail.png) 9px 9px no-repeat;
color: #CC3300;
}
.hint {
background: #FFEEDE url(../images/icons/misc/hint.png) 9px 9px no-repeat;
color: #CC9900;
}
.success {
background: #DDFFDD url(../images/icons/misc/success.png) 9px 9px no-repeat;
color: #33CC00;
}
.fail p.title, .hint p.title, .success p.title, .fail p.noticeTitle, .hint p.noticeTitle, .success p.noticeTitle {font-weight:bold; text-decoration:underline;}
span.span {
text-align: left;
float: left;
}
.page_title {
margin: 0 0 15px 0; padding: 8px 0 12px 0;
border-bottom: 1px solid #c0c0c0;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
color: hsla(0, 100%, 0%, 1);
font: 16px 'Archivo Narrow',Verdana,sans-serif;
font-weight: bold;
text-align: center;
word-spacing: 2px;
letter-spacing: 1px;
}
.modifiedDate {
margin-top:10px;
font-size: 10px;
font-style: italic;
}
.newsTitle {
height: 48px;
margin: 2px 0; padding: 0 0 0 15px;
font: 14px 'Archivo Narrow', sans-serif;
line-height: 3.5em;
color: hsl(0, 100%, 0%);
text-decoration: none;
cursor: pointer;
overflow: hidden;
border: 1px solid #c0c0c0;
}
.newsContent {
padding: 7px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
line-height: 1.5em;
}
.newsContent .additionalInformation {
margin: 25px 0 0 0;
}
.newsContent .additionalInformation, .newsContent .additionalInformation a {
font-size: 10px;
font-style: italic;
line-height: 1.3em;
}
.newsTitle:hover, .newsTitle:active, .newsTitle:focus, .newsOpened {
color: hsl(30, 100%, 50%);
}
.boxesContent ul.accountpanelNavigation {
width: 100%;
margin: 0 0 0 14px; padding: 0;
color: hsl(25, 20%, 55%);
text-align:left;
list-style-type:square;
}
input.votebutton {
float: left;
}
.voteNotice {
line-height: 1.4em;
}
a.weiterleitung {
width: 195px; height: 38px;
background: transparent url(../images/website/buttons/redirect.png) no-repeat;
margin-left: 20px; padding: 17px 0 0 20px;
text-align: left;
display: inline-block;
cursor: pointer;
float: right;
color: #000000;
}
a.weiterleitung:active, a.weiterleitung:focus {
background-position:0 -55px;
}
.downloadContainer {
text-align:center;
}
a.download {
width: 155px; height: 55px;
background: transparent url(../images/website/buttons/download.png) no-repeat;
margin: 4px; padding: 13px 0 0 60px;
color: #000000;
font-family: 'HelveticaLT67',"Trebuchet MS",Verdana,sans-serif;
text-align: left;
display: inline-block;
line-height: 1.3em;
}
a.download:hover {
color: hsl(30, 50%, 50%);
}
a.download:active {
background-position: 0 -68px;
}
.characterWindow {
width: 30%;
background: hsla(0, 0%, 0%, 0.05);
margin: 5px; padding: 5px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
float: left;
}
.characterWindow p {
float: left;
}
.characterWindow p.name {
font-weight: bold;
float: left;
}
.characterWindow p.rank {
font-weight: bold;
float: right;
}
.accPanelInformation {
width: 50%;
float: left;
}
.accPanelInformation span.title1 {
width:140px;
font-weight:bold;
float:left;
}
.accPanelInformation span.title2 {
width:160px;
font-weight:bold;
float:left;
}
.shopBorder {
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed #c0c0c0;
display: none;
}
#itemDetailsContainer {
}
#itemDetailsContainer img.itemDetailsIcon {
max-width: 60px; max-height: 120px;
padding: 10px 0;
}
#itemDetailsContainer .itemDetails {
width: 50%;
float: left;
}
#itemDetailsContainer .itemDetails div {
font-weight: bold;
min-height: 24px;
}
#itemDetailsContainer .itemDetails div span {
width: 206px;
float: right;
text-align: left;
font-weight: normal;
}
#itemDetailsContainer .itemDetails div ul {
width: 192px;
float: right;
text-align: left;
font-weight: normal;
}
#itemDetailsContainer .itemDescription {
width: 45%;
float: right;
}
#itemDetailsContainer .buy, #itemDetailsContainer .gift {
margin: 10px 0 0 0;
border-top: 1px dashed #c0c0c0;
}
#itemDetailsContainer .buy {
padding: 5px 20px 5px 10px;
border-right: 1px dashed #c0c0c0;
float: left;
}
#itemDetailsContainer .gift {
padding: 5px 10px 5px 20px;
border-left: 1px dashed #c0c0c0;
float: right;
}
.singleItem {
width: 210px;
margin: 5px; padding: 5px;
border-radius: 4px;
float: left;
cursor: pointer;
}
.singleItem.buy:hover {
background: hsla(120, 100%, 50%, 0.03);
}
.singleItem.none:hover {
background: hsla(0, 0%, 0%, 0.2);
}
.singleItem.nobuy:hover {
background: hsla(0, 100%, 50%, 0.06);
}
.singleItem.active {
background: hsla(0, 0%, 0%, 0.1);
}
.singleItem img.itemIcon {
max-width: 32px; max-height: 32px;
margin: 0 10px 0 0;
float: left;
}
.singleItem .itemShortDesc{
margin-top: 5px;
}
p.stepbystep {
margin-bottom: 30px;
}
.ticket {
}
.ticket .thead {
}
.ticket .thead .tr div {
cursor:pointer;
}
.ticket .tbody {
background: hsla(0, 0%, 0%, 0.4);
margin: 0 0 3px 0; padding: 7px;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
display:none;
}
.ticket .tbody .mainText {
padding-bottom:10px;
}
.ticket .tbody .sub {
margin:10px 50px;
}
.ticket .tbody .sub .subText {
margin:30px 0;
}
div.loadingImage {
margin-top: 10px;
height: 330px;
vertical-align: middle;
text-align: center;
}
/************************************/
/****** Einzelne Seiten - Ende ******/
/************************************/
/********************************/
/****** Formulare - Anfang ******/
/********************************/
form.formDonation {
width:405px;
margin: 10px auto 0 auto; padding:7px;
border: 1px solid #c0c0c0;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
display:none;
}
form.configurationForm label {
float:left; width:230px;
}
label.labelRegistration, span.labelRegistration {float:left; width:190px;}
label.px170, span.px170 {float:left; width:170px;}
label.px140, span.px140 {float:left; width:140px;}
label.px120, span.px120 {float:left; width:120px;}
textarea {
background:hsla(0, 8%, 5%, 1);
padding:3px;
border:1px #231a1a solid;
color: hsl(25, 20%, 55%);
font-family: "Trebuchet MS",Helvetica,sans-serif;
font-size: 12px;
font-weight:normal;
text-decoration:none;
}
select.small {
width:220px;
background:url('../images/forms/fields/220.png') no-repeat transparent;
}
input[type=text].w030, input[type=number].w030 {
width: 30px;
background:url('../images/forms/fields/030.png') no-repeat transparent;
}
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], select {
width: 200px;
background: transparent;
margin-top: 5px; padding: 5px 10px;
border: 1px solid #c0c0c0;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
font-size: 11px;
text-shadow:1px 1px 0 hsl(0, 0%, 100%);
}
select {
width: 222px; height: 30px;
}
input[type=submit] {
height: 27px;
background: url(../images/website/form/button.png) repeat-x 0 0 transparent;
margin: 5px 0 0 0; padding: 0 10px 2px 10px;
border: 1px solid hsl(190, 80%, 75%);
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2); -webkit-box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2); -moz-box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2);
color: #ffffff;
font: 14px Catriel,Verdana,sans-serif;
text-decoration: none;
text-shadow: hsla(0, 0%, 0%, 1) 1px 1px;
cursor: pointer;
}
input[type=submit]:hover, input[type=submit]:focus {border: 1px solid hsl(185, 80%, 60%); background-position: 0 -28px;}
input[type=submit]:active {border: 1px solid hsl(185, 100%, 60%); background-position: 0 -56px;}
input[type=submit]:disabled {border: 1px solid hsl(20, 100%, 80%); background-position: 0 -84px; cursor: default;}
a.inputButton {
background: url(../images/website/form/button.png) repeat-x center 0;
margin: 5px 0 0 0; padding: 3px 9px;
border: 1px solid hsl(190, 80%, 75%);
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2); -webkit-box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2); -moz-box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2);
color: #ffffff;
font: 14px Catriel,Verdana,sans-serif;
text-decoration: none;
text-shadow: #000000 1px 1px;
cursor: pointer;
text-align: center;
display: block;
}
a.inputButton:hover, a.inputButton:focus {border: 1px solid hsl(185, 80%, 60%); background-position:center -28px;}
a.inputButton:active {border: 1px solid hsl(185, 100%, 60%); background-position:center -56px;}
a.contentButton {
height: 18px;
margin: 5px 3px 0; padding: 4px 5px 3px 5px;
border: 1px solid #c0c0c0;
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
color: #000000;
font: 13px Catriel,Verdana,sans-serif;
text-decoration: none;
display: inline-block;
cursor: pointer;
vertical-align: top;
}
a.contentButton:hover, a.contentButton:focus, a.contentButton:active, a.contentButton.active {text-shadow: #000000 1px 1px; color: #ffffff; background: url(../images/website/buttons/linkButton.png) repeat-x 0 -25px;}
/******************************/
/****** Formulare - Ende ******/
/******************************/
PHP Code:
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
opacity: 0.85;
display: none;
}
/* line 15, ../sass/lightbox.sass */
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
width: auto;
height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
border: none;
}
/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
position: relative;
background-color: white;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
display: table;
clear: both;
}
/* line 39, ../sass/lightbox.sass */
.lb-container {
padding: 10px;
}
/* line 42, ../sass/lightbox.sass */
.lb-loader {
position: absolute;
top: 40%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
/* line 51, ../sass/lightbox.sass */
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
left: 0;
}
/* line 62, ../sass/lightbox.sass */
.lb-nav a {
outline: none;
}
/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
}
/* line 72, ../sass/lightbox.sass */
.lb-prev {
left: 0;
float: left;
}
/* line 76, ../sass/lightbox.sass */
.lb-next {
right: 0;
float: right;
}
/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
background: url(../images/icons/misc/prev.png) left 48% no-repeat;
}
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
background: url(../images/icons/misc/next.png) right 48% no-repeat;
}
/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
width: 100%;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
display: table;
clear: both;
}
/* line 95, ../sass/lightbox.sass */
.lb-data {
padding: 0 10px;
color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
width: 35px;
float: right;
padding-bottom: 0.7em;
outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
cursor: pointer;
}
PHP Code:
/**
* Eric Meyer's Reset CSS v2.0 ([url=http://meyerweb.com/eric/tools/css/reset/]CSS Tools: Reset CSS[/url])
* [url=http://www.cssportal.com]CSS Portal - Templates, Tutorials, Books, Software, Code Examples - CSS Portal[/url]
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
PHP Code:
.slider div {
height: 270px;
position: relative;
overflow: hidden;
}
.slider div.nextImage, .slider div.previousImage {
width: 33px; height: 45px;
margin: 0 10px;
cursor:pointer;
position: absolute;
z-index: 2;
display: block;
top: 114px;
opacity: 0.7;
transition: opacity .6s ease-in-out;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.slider div.nextImage {
background:url(../images/icons/misc/next.png) no-repeat center left;
margin-left:0;
right: 0;
}
.slider div.nextImage:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: all 0.25s ease;
}
.slider div.previousImage {
background:url(../images/icons/misc/prev.png) no-repeat center right;
margin-right:0;
left: 0;
}
.slider div.previousImage:hover {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: all 0.25s ease;
}
.slider div.thumbs {
position:absolute;
z-index:2;
bottom:10px;
right:48%;
vertical-align: middle;
padding:10px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #ffa90a; /* Old browsers */
background: -moz-linear-gradient(top, #ffa90a 0%, #fe6e09 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa90a), color-stop(100%,#fe6e09)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa90a 0%,#fe6e09 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa90a 0%,#fe6e09 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa90a 0%,#fe6e09 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa90a 0%,#fe6e09 100%); /* W3C */
}
.slider div.thumbs a {
display:block;
margin-left:5px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
text-decoration:none;
padding:4px 7px;
background:url(slidebox_thumb.png);
color:#fff;
text-indent:0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
border:1px solid #6a3814;
}
.slider div.thumbs a:hover{
background:#b86224;
color:#e16913;
}
.slider div.thumbs .thumbActive{
background:#b86224;
color:#e16913;
display:block;
margin-left:5px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:9px;
text-decoration:none;
padding:4px 7px;
}
.slider div ul {
margin: 0;
padding: 0;
}
.slider div ul li {
position:relative;
left:0;
float:left;
list-style: none;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
}
.slider div ul li img{
width: 790px; height: 270px;
}
Wäre nett wenn mir jmd helfen könnte
Liebe Grüße
bloody2009
