Candle/probestyle.css

1369 lines
20 KiB
CSS

*{
font-family: sans-serif;
margin: 0px;
}
.kopf{
margin: 0px;
width: 100%;
position: fixed;
background-color: #24140d;
color:rgb(255, 255, 255);
justify-content: center;
display: flex;
}
body{
background-color: #E5D3B3;
overflow: hidden;
}
#titleschwarz{
font-size: 25px;
color: #000;
}
#titlebraun{
font-size: 25px;
color: #24140D;
font-style: italic;
}
#bildID{
margin: 0px;
}
/*buttons*/
#uberuns{
position: fixed;
left: 0px;
top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}
#buecher{
position: fixed;
left: 150px;
top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}
#meinebuecher{
position: fixed;
left: 300px;
top: 149px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}
/*warenkorbsymbol im header*/
#warenKorbID
{
position: fixed;
right: -70px;
top: 150px;
width: 120px;
height: 35px;
}
.suchleiste{
position: fixed;
right: 40px;
top: 0px;
width: 200px;
height: 40px;
background-color: #664220;
margin: 0px;
padding: 0px;
border: 0px;
color: rgb(255, 255, 255);
text-align: center;
}
.suchleiste::placeholder{
color: rgb(255, 255, 255);
}
/*loupe*/
#buttonID{
position: fixed;
right: 0px;
top: 0px;
width: 39px;
height: 40px;
background-color: #664220;
margin: 0px;
padding: 0px;
border: 0px;
color: rgb(255, 255, 255);
}
#sidecandle{
top: 199px ;
right: 0px;
position: fixed;
height: 100%;
width: 12%
}
#BuchHeader{
position: fixed;
top: 220px;
left: 30px;
font-size: 40px;
color:#000000;
}
.main #warenkorbHeader{
position: absolute;
top: 0px;
left: 30px;
font-size: 50px;
color:#ffffff;
font-family:Calibri;
font-weight:400;
}
.p1{
overflow-y: scroll;
max-width: 87%;
max-height: 450px;
position: fixed;
top: 220px;
left: 20px;
right:14%;
font-size: 15px;
color:#664220;
bottom: 75px;
}
.p1{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.p1::-webkit-scrollbar {
display: none;
}
.p2{
overflow-y: scroll;
max-width: 87%;
max-height: 100%;
position: fixed;
top: 220px;
left: 20px;
right: 14%;
font-size: 15px;
line-height: 180%;
color:#24140d;
bottom: 75px;
}
.p2{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.p2::-webkit-scrollbar {
display: none;
}
/*erweiterte Suche starts*/
#erweitertesuche{
color: rgb(255, 255, 255);
position: fixed;
right: 60px;
top: 50px;
text-align: center;
text-decoration: none;
}
.hauptcontainer{
overflow-y: scroll;
position:absolute;
display:flex;
height: 62%;
width: 100%;
top:200px;
}
.hauptcontainer{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.hauptcontainer::-webkit-scrollbar {
display: none;
}
#titelerweitertesuche{
position: absolute;
font-size: 25px;
color: #000;
left: 15px;
top:30px;
}
.hauptcontainer .buchtitel{
position: absolute;
top: 80px;
left:100px;
width: 100px;
}
.hauptcontainer .buchtiteloptions{
position: absolute;
top: 80px;
width: 70%;
left:210px;
}
.hauptcontainer .und-wort1{
position: absolute;
top: 110px;
width: 70px;
left:20px;
}
.hauptcontainer .und-wort2{
position: absolute;
width: 70px;
left:20px;
top: 140px;
}
.hauptcontainer .autor{
position: absolute;
top: 110px;
width: 100px;
left:100px;
}
.hauptcontainer .autoroptions{
position: absolute;
top: 110px;
width: 70%;
left:210px;
}
.hauptcontainer .stichwort{
position: absolute;
top: 140px;
width: 100px;
left:100px;
}
.hauptcontainer .stichwörteroptions{
position: absolute;
top: 140px;
width: 70%;
left:210px;
}
/*.hauptcontainer .p3{
max-width: 87%;
max-height: 450px;
position:absolute;
top: 220px;
left: 20px;
right:14%;
bottom: 75px;
}*/
.hauptcontainer #weiteresuchkriterien{
position: absolute;
font-size: 17px;
color: #000;
left: 25px;
top: 180px;
}
.hauptcontainer .jahrvon{
position: absolute;
top: 220px;
left: 20px;
}
.hauptcontainer .anfangsdatum{
position: absolute;
top: 220px;
left: 210px;
height: 20px;
}
.hauptcontainer .bis{
position: absolute;
top: 220px;
left: 340px;
}
.hauptcontainer .endsdatum{
position: absolute;
top: 220px;
left: 380px;
height: 20px;
}
.hauptcontainer .sprache{
position: absolute;
top: 260px;
left: 20px;
}
.hauptcontainer .spracheingabe{
position: absolute;
top: 260px;
width: 70%;
left:210px;
}
.hauptcontainer .verfügbarkeit{
position: absolute;
top: 300px;
left: 20px;
}
.hauptcontainer .checkbox{
position: absolute;
top: 300px;
left:210px;
}
.hauptcontainer .kommentar{
position: absolute;
top: 300px;
left: 230px;
}
.hauptcontainer #suchen{
position: absolute;
left: 20px;
top: 380px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
.hauptcontainer #suchfelderleeren{
position: absolute;
left: 180px;
top: 380px;
width: 220px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
/*---------WarenKorb BEGINS--------*/
.main{
height: 100%;
position: absolute;
top:200px;
left: 0px;
width: 95%;
}
.main{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.main::-webkit-scrollbar {
display: none;
}
.containerOfAll {
overflow-y: scroll;
background-color: #E5D3B3;
display: flex;
position: absolute;
top: 70px;
left: 35px;
width: 1000px;
height: 55%;
}
.containerOfAll{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.containerOfAll::-webkit-scrollbar {
display: none;
}
/*first book in warenkorb and its details*/
#firstItem
{
position: absolute;
top: 15px;
left: 15px;
width:100%;
height:80%;
}
.haupt{
width: 100%;
height: 62%;
position: absolute;
display: flex;
overflow-y:scroll;
top: 200px;
}
.haupt{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.haupt::-webkit-scrollbar {
display: none;
}
.haupt #firstItem{
position: relative;
top: 25px;
left: 30px;
width: 100%;
height: 80%;
}
.haupt .headerinItem{
position: relative;
top: -200px;
left: 150px;
color: #000;
}
.haupt .discinItem{
position: relative;
top: -180px;
left: 150px;
width: 200px;
color: #000;
text-align: left;
}
.haupt .greenbutton{
position: absolute;
top: 165px;
left: 150px;
width: 100px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:#7DAD47 ;
}
.haupt #firstItem #shoppingwagen{
position: absolute;
width: 30px;
top:165px;
right: 60px;
}
.haupt .percypar{
position: absolute;
top: 250px;
width: 80%;
color: #000;
text-align: left;
}
/*first item ends*/
/*second book in warenkorb and its details */
#secondItem{
position: absolute;
top: 300px;
left: 15px;
width: 100%;
}
.haupt{
width: 100%;
height: 62%;
position: absolute;
display: flex;
overflow-y:scroll;
top: 200px;
}
.haupt{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.haupt::-webkit-scrollbar {
display: none;
}
.haupt #secondItem{
position: relative;
top: 25px;
left: 30px;
width: 100%;
height: 80%;
}
.haupt .headerinItem{
position: relative;
top: -200px;
left: 150px;
color: #000;
}
.haupt .discinItem{
position: relative;
top: -180px;
left: 150px;
width: 200px;
color: #000;
text-align: left;
}
.haupt .redbutton{
position: absolute;
top: 165px;
left: 150px;
width: 180px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:red ;
}
.haupt #secondItem #shoppingwagen{
position: absolute;
width: 30px;
top:165px;
right: 60px;
}
.haupt .percypar{
position: absolute;
top: 250px;
width: 80%;
color: #000;
text-align: left;
}
/*second item ends*/
/*third book in warenkorb and its details */
#thirdItem{
position: absolute;
top: 580px;
left: 15px;
width:100%
}
/*third item ends*/
/*fourth book in warenkorb and its details */
#fourthItem{
position: absolute;
top: 880px;
left: 15px;
width:100%
}
/*fourth item ends*/
#reservieren
{
background-color: #E5D3B3;
position: absolute;
top: 70px;
left: 1050px;
width: 300px;
height: 150px;
}
#jetztReservieren{
position: relative;
top: 50px;
left: 75px;
width: 120px;
height: 55px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
#ArtikelWarenkorb{
position: relative;
top: 20px;
left: 100px;
align-items: center;
}
.headerinItem{
position: relative;
top: -200px;
left: 150px;
width: 400px;
}
.discinItem{
position: absolute;
top: 50px;
left: 150px;
}
.main .containerOfAll .items .greenbutton{
position: absolute;
top: 165px;
left: 150px;
width: 100px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:#7DAD47 ;
}
.main .containerOfAll .items .redbutton{
position: absolute;
top: 165px;
left: 150px;
width: 180px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:red ;
}
.inputPlusMinus{
position: absolute;
top: 185px;
left: 800px;
}
.binPicture{
position: absolute;
top: -15px;
left: 100px;
}
#minusButton{
position: absolute;
top: -15px;
left: 0px;
}
#plusButton{
position: absolute;
top: -15px;
left: 70px;
}
.plus-minus-input .input-group-field {
text-align: center;
position:absolute;
width: 30px;
height: 20px;
top: -15px;
left: 28px;
}
.plus-minus-input .input-group-field::-webkit-inner-spin-button,
.plus-minus-input .input-group-field ::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
}
.plus-minus-input .input-group-button .circle {
border-radius: 50%;
padding: 0.15em 0.35em;
}
/*------WarenKorb ENDS-------*/
/*buecher begins */
.containerofbuecher{
overflow-y: scroll;
overflow-x: hidden ;
display: flex;
position: absolute;
top: 200px;
width: 100%;
height: 66%;
}
.containerofbuecher{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.containerofbuecher::-webkit-scrollbar {
display: none;
}
#büchertitel{
position: absolute;
top:35px;
left:35px;
font-size: 30px;
}c
.containerofbuecher #firstItem{
position: absolute;
top:100px;
left: 45px;
}
.containerofbuecher #secondItem{
position: absolute;
top:400px;
left: 45px;
}
.containerofbuecher #thirdItem{
position: absolute;
top:700px;
left: 45px;
}
.containerofbuecher #fourthItem{
position: absolute;
top:1000px;
left: 45px;
}
.containerofbuecher .items .redbutton{
position: absolute;
top: 165px;
left: 150px;
width: 180px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:red ;
}
.containerofbuecher .items .greenbutton{
position: absolute;
top: 165px;
left: 150px;
width: 100px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:#7DAD47 ;
}
.containerofbuecher .items .binPicture{
position: absolute;
top: 170px;
left: 90%;
}
/*meine Bücher begins*/
.containerofmeinebuecher{
overflow-y: scroll;
overflow-x: hidden ;
display: flex;
position: absolute;
top: 200px;
width: 100%;
height: 65%;
}
.containerofmeinebuecher{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.containerofmeinebuecher::-webkit-scrollbar {
display: none;
}
#meinebüchertitel{
position: absolute;
top:35px;
left:35px;
font-size: 30px;
}
.containerofmeinebuecher #firstItem{
position: absolute;
top:100px;
left: 45px;
}
.containerofmeinebuecher #secondItem{
position: absolute;
top:400px;
left: 45px;
}
.containerofmeinebuecher #thirdItem{
position: absolute;
top:700px;
left: 45px;
}
.containerofmeinebuecher #fourthItem{
position: absolute;
top:1000px;
left: 45px;
}
.containerofmeinebuecher .items .redbutton{
position: absolute;
top: 120px;
left: 150px;
width: 200px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:red ;
}
.containerofmeinebuecher .items .greenbutton{
position: absolute;
top: 120px;
left: 150px;
width: 200px;
height: 25px;
color:rgb(255, 255, 255);
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 15px;
background-color:#7DAD47 ;
}
.containerofmeinebuecher .items .binPicture{
position: absolute;
top: 170px;
left: 90%;
}
.containerofmeinebuecher .items #message{
position: absolute;
top: 170px;
left: 150px;
width: 700px;
}
/*------ ANMELDEN BEGINS-----*/
#obererText{
position: fixed;
top: 270px;
left: 50px;
}
#anmeldeInput{
position: fixed;
top: 330px;
left: 50px;
}
#AnmeldeInput{
position: relative;
top: 3px;
}
#anmeldebutton{
position: relative;
top: 50px;
right:180px;
width: 120px;
height: 55px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
text-decoration: none;
border-radius: 8px;
}
/*----- ANMELDEN ENDS-------*/
/*Largest Devices*/
@media screen and (max-width:1400px){
#sidecandle{
width: 12%;
}
.p1{
max-width: 86%;
}
.p2{
max-width: 86%;
}
.containerOfAll{
width: 85%;
left: 35px;
height: 65%;
}
.containerOfAll .items .inputPlusMinus{
left: 600px;
}
.main #reservieren{
top: 600px;
left: 100px;
}
.main{
overflow-x: hidden;
position: absolute;
top:200px;
right: 10px;
height: 65%;
}
}
/*Large Devices*/
@media screen and (max-width:1200px){
#sidecandle{
width: 12%;
}
.p1{
max-width: 86%;
}
.p2{
max-width: 86%;
}
.containerOfAll{
width: 85%;
left: 35px;
height: 500px;
}
.containerOfAll .items .inputPlusMinus{
left: 600px;
}
.main #reservieren{
top: 600px;
left: 100px;
}
.main{
overflow-x: hidden;
position: absolute;
top:200px;
right: 10px;
height: 65%;
}
}
/*medium Devices*/
@media screen and (max-width:1000px){
#sidecandle{
width: 14%;
}
.p1{
max-width: 84%;
}
.p2{
max-width: 84%;
}
.containerOfAll .items .inputPlusMinus{
left: 500px;
}
.containerOfAll{
width: 90%;
}
.main{
height: 65%;
}
.containerofmeinebuecher .items #message{
width: 400px;
}
}
/*small Devices*/
@media screen and (max-width:800px){
#sidecandle{
width: 16%;
}
.p1{
max-width: 81%;
}
.p2{
max-width: 81%;
}
.containerofbuecher .items .binPicture{
left: 80%;
}
.containerofmeinebuecher .items .binPicture{
left: 80%;
}
.containerOfAll .items .inputPlusMinus{
left: 280px;
}
.containerOfAll{
width: 90%;
}
.main #reservieren{
top: 600px;
left: 100px;
}
.main {
height: 65%;
}
.main .containerOfAll .items .redbutton{
width: 100px;
height: 40px;
top: 150px;
}
.containerofmeinebuecher .items #message{
width: 240px;
}
/*Burger Menu*/
/*invisibility and deactivate buttons*/
#uberuns{
pointer-events: none;
opacity: 0;
}
#buecher{
pointer-events: none;
opacity: 0;
}
#meinebuecher{
pointer-events: none;
opacity: 0;
}
#nav-toggle {
opacity: 0;
pointer-events: none;
}
.suchleiste{
opacity: 0;
pointer-events: none;
}
#buttonID{
opacity: 0;
pointer-events: none;
}
/*Reposition*/
#erweitertesuche{
position: fixed;
right: 60px;
top: 15px;
}
/*Burger Icon creation and position*/
.icon-burger {
display: none;
position: fixed;
top: 24px;
right: 10px;
transform: translateY(-50%);
cursor:pointer;
}
.icon-burger .line {
width: 30px;
height: 5px;
background-color: #fff;
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
nav .icon-burger {
display: block;
}
/*Burger Icon rotation / Animation*/
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
}
#uberuns{
position: fixed;
left: 0px;
top: 150px;
text-align: center;
}
#buecher{
position: fixed;
left: 50%;
top: 50%;
}
#meinebuecher{
position: fixed;
left: 300px;
top: 150px;
}
/*erweiterte Suche*/
.hauptcontainer .buchtitel{
left:20px;
}
.hauptcontainer .buchtiteloptions{
top: 110px;
left:20px;
}
.hauptcontainer .und-wort1{
top: 140px;
left:20px;
}
.hauptcontainer .und-wort2{
left:20px;
top: 200px;
}
.hauptcontainer .autor{
top: 140px;
left:100px;
}
.hauptcontainer .autoroptions{
top: 170px;
left:20px;
}
.hauptcontainer .stichwort{
top: 200px;
}
.hauptcontainer .stichwörteroptions{
top: 230px;
left:20px;
}
.hauptcontainer #weiteresuchkriterien{
top: 270px;
}
.hauptcontainer .jahrvon{
top: 300px;
}
.hauptcontainer .anfangsdatum{
top: 330px;
left: 20px;
}
.hauptcontainer .bis{
top: 330px;
left: 140px;
}
.hauptcontainer .endsdatum{
top: 330px;
left: 170px;
}
.hauptcontainer .sprache{
top: 370px;
}
.hauptcontainer .spracheingabe{
top: 400px;
left:20px;
}
.hauptcontainer .verfügbarkeit{
top: 430px;
left: 20px;
}
.hauptcontainer .checkbox{
top: 460px;
left: 20px;
}
.hauptcontainer .kommentar{
top:460px;
left: 40px;
font-size: 15px;
}
.hauptcontainer #suchen{
top: 500px;
}
.hauptcontainer #suchfelderleeren{
top: 500px;
}
}
/*extra small Devices*/
@media screen and (max-width:620px){
#sidecandle{
width: 16%;
}
.p1{
max-width: 80%;
}
.p2{
max-width: 80%;
}
.headerinItem{
word-break: break-word;
font-size: 15px;
width: 200px;
}
.main .containerOfAll .items .redbutton{
width: 100px;
height: 40px;
}
}
.fuss{
height: 74px;;
width: 100%;
position: fixed;
background-color: #24140d;
display: flex;
bottom: 0px;
}
#impressum{
position: fixed;
left: 0px;
bottom: 12px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}
#kontakt{
position: fixed;
left: 150px;
bottom: 12px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}
#datenschutz{
position: fixed;
left: 300px;
bottom: 12px;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding-right:10px;
padding-left: 8px;
padding-top: 15px;
padding-bottom: 0px;
text-align: center;
text-decoration: none;
}