Candle/style.css

1975 lines
29 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;
}
#CandleID{
opacity: 1;
pointer-events: auto;
}
#abmelden{
position: fixed;
left: auto;
right: 60px;
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;
}
/*Impressum*/
.impressum-container {
position: absolute;
display: grid;
top: 250px;
left: 60px;
}
.impressum-container h1 {
margin-bottom: 60px;
}
.impressum-container p {
margin-bottom: 30px;
}
/*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%;
}
.headerinItem a {
text-decoration: none;
color: initial;
}
.headerinItem a:hover {
text-decoration: underline;
}
.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;
}
.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-----*/
.anmeldung{
position: fixed;
top: 230px;
left: 40px;
}
.anmeldung-rest{
position: fixed;
top: 280px;
left: 50px;
}
.anmeldung-überschriften{
font-weight: normal;
color:#000000;
}
.anmeldung-überschriften h1{
font-size: 50px;
}
.anmeldeInput h2, .anmeldeInput form {
font-size: 22px;
}
#obererText{
font-size: 20px;
padding-bottom: 25px;
}
#obererText a {
color: #1b1f21;
text-decoration: none;
}
#obererText a:hover {
text-decoration: underline;
}
.anmeldeInput hr {
background-color:#A78766;
height: 3px;
width: 390px;
border: none;
margin-top: 10px;
margin-bottom: 20px;
}
.anmeldeInput form input {
height: 30px;
width: 380px;
margin-bottom: 20px;
}
.anmeldung-ausklappen details summary:hover {
cursor: pointer;
text-decoration: underline;
}
.anmeldung-ausklappen details {
margin-bottom: 20px;
}
.anmeldung-ausklappen p {
margin-left: 17px;
}
.anmeldung-ausklappen p a{
text-decoration: none;
color: #1b1f21;
}
.anmeldung-ausklappen p a:hover{
text-decoration: underline;
color: #1b1f21;
}
#anmeldebutton:hover {
cursor: pointer;
}
#question-mark:hover {
cursor: pointer;
}
#question-mark #tooltip {
visibility: hidden;
height: fit-content;
background-color: #fff;
color: #000;
border-color: #000;
border-width: 2px;
text-align: center;
padding: 5px 0;
border-radius: 6px;
font-size: 12px;
position: absolute;
z-index: 1;
}
#question-mark:hover #tooltip {
visibility: visible;
}
#anmeldebutton{
position: relative;
width: 120px;
height: 35px;
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;
border: 0;
}
/*----- ANMELDEN ENDS-------*/
/*----- Registrierung-------*/
.errorMessage {
color: red;
display: none;
margin: 0px;
padding: 0px;
font-size: 12px;
}
#registrierungTitel{
position: absolute;
font-size: 25px;
color: #000;
left: 15px;
top:20px;
}
#datenSchutzHinweisRegistrierung{
position: relative;
font-size: 15px;
color: #000;
left: 25px;
top:40px;
}
#registrierungAngabenZurRegistrierung{
position: relative;
font-size: 15px;
color: #000;
left: 25px;
top:55px;
}
#registrierungInputDiv{
position: relative;
left: 25px;
top:55px;
}
#registrierungHr{
position: relative;
width: 275px;
color: #664220;
}
.registrierenNormalesTextfeld, .errorMessage {
width: 275px;
}
#strasse{
width: 212px;
}
#hausNummer{
width: 50px;
}
#postleitzahl{
width: 85px;
}
#ort{
width: 177px;
}
.registrierenKnopf {
position: relative;
width: 120px;
height: 35px;
background-color:#664220 ;
color:rgb(255, 255, 255);
padding: 10px 15px;
text-align: center;
text-decoration: none;
border-radius: 8px;
border: 0;
cursor: pointer;
}
#registrierenAusklappe{
padding-left: 13px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/*----- Registrierung Ende-------*/
/*----- Registrierung erfolgreich -----*/
.mainContentContainer{
overflow-y: scroll;
position: absolute;
display:flex;
flex-direction: column;
height: 70.5%;
width: 100%;
top:200px;
}
.mainContentContainer{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.mainContentContainer::-webkit-scrollbar {
display: none;
}
.titleContainer {
padding-top: 35px;
padding-left: 35px;
}
#registeredTitle {
font-size: 30px;
}
.mainContent {
padding-top: 25px;
padding-left: 55px;
padding-right: 50px;
}
#textFirstHalf, #cardID {
display: inline;
}
#loginNowButton {
width: auto;
height: auto;
background-color:#664220 ;
color:white;
font-size: 15px;
padding: 10px 15px;
text-align: center;
border-radius: 8px;
border: none;
cursor: pointer;
}
/*----- Registrierung erfolgreich Ende -----*/
/*----- Abmelden -----*/
.mainContentContainer{
overflow-y: scroll;
position: absolute;
display:flex;
flex-direction: column;
height: 70.5%;
width: 100%;
top:200px;
}
.mainContentContainer{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.mainContentContainer::-webkit-scrollbar {
display: none;
}
.titleContainer {
padding-top: 35px;
padding-left: 35px;
}
#logOffTitle {
font-size: 30px;
}
.mainContent {
padding-top: 25px;
padding-left: 55px;
padding-right: 50px;
}
#mainText {
display: inline;
}
.buttonContainer {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
#confirmButton, #abortButton {
width: auto;
height: auto;
background-color:#664220 ;
color:white;
font-size: 15px;
padding: 10px 15px;
text-align: center;
border-radius: 8px;
border: none;
cursor: pointer;
}
/*----- Abmelden Ende -----*/
/*----- Abmelden erfolgreich -----*/
.mainContentContainer{
overflow-y: scroll;
position: absolute;
display:flex;
flex-direction: column;
height: 70.5%;
width: 100%;
top:200px;
}
.mainContentContainer{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.mainContentContainer::-webkit-scrollbar {
display: none;
}
.titleContainer {
padding-top: 35px;
padding-left: 35px;
}
#logOffSuccessfulTitle {
font-size: 30px;
}
.mainContent {
padding-top: 25px;
padding-left: 55px;
padding-right: 50px;
}
#mainText {
display: inline;
}
/*.buttonContainer -> siehe Abmelden*/
#backToHomeButton, #logInAgainButton {
width: auto;
height: auto;
background-color:#664220 ;
color:white;
font-size: 15px;
padding: 10px 15px;
text-align: center;
border-radius: 8px;
border: none;
cursor: pointer;
text-decoration: none;
}
/*----- Abmelden erfolgreich Ende -----*/
/*Reservierung*/
#reservierung {
position: absolute;
top: 230px;
left: 50px;
width: 100vw;
}
#reservierung h1 {
font-size: 40px;
font-weight: normal;
}
#reservierung-left #möchten-sie {
font-size: 24px;
margin: 20px 0;
}
.beschreibung h2 {
font-size: 22px;
font-weight: normal;
}
#reservierung-left {
margin-left: 40px;
display: grid;
width: 100%;
}
#reservierung-left .item {
display: flex;
}
#reservierung-left hr {
margin: 20px 0;
width: 80%;
background-color:#A78766;
height: 2px;
border: none;
}
#reservierung-left #erklärung {
font-size: 20px;
width: 80%;
overflow: auto;
margin: 20px 0;
}
#reservierung-left #erklärung a {
text-decoration: none;
color: #1b1f21;
}
#reservierung-left #erklärung :hover {
text-decoration: underline;
}
#button-container {
display: flex;
width: 80%;
justify-content: space-between;
}
#reservierung-left .beschreibung {
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.b2 {
text-align: center;
vertical-align: center;
line-height: 40px;
height: 40px;
width: 200px;
border-width: 0;
color: #fff;
}
.beschreibung .green {
background-color: #70AD47;
}
.beschreibung .red {
background-color: #F22C2C;
}
#button-container a {
height: 25px;
background-color: #664220;
color: rgb(255, 255, 255);
padding: 10px 15px;
text-align: center;
vertical-align: center;
line-height: 25px;
text-decoration: none;
border-radius: 8px;
border: 0;
}
/*Reservierung Ende*/
/*Verlängerung Start*/
#verlängerung {
overflow: auto;
display:flex;
position: absolute;
top: 230px;
left: 50px;
width: 100vw;
}
#verlängerung h1 {
font-size: 40px;
font-weight: normal;
}
#verlängerungContent {
overflow: auto;
position: fixed;
margin-top: 40px;
margin-left: 25px;
display: grid;
width: 100%;
}
#verlängerungContent #möchten-sie {
font-size: 24px;
margin: 20px 0;
}
.beschreibung h2 {
font-size: 22px;
font-weight: normal;
}
#verlängerungItem .beschreibung h3{
font-weight: normal;
margin-top: -100px;
}
#verlängerungContent .item {
display: flex;
}
#verlängerungContent hr {
margin: 20px 0;
width: 80%;
background-color:#A78766;
height: 2px;
border: none;
}
#verlängerungButtonContainer {
margin-top: 25px;
display: flex;
width: 80%;
justify-content: start;
}
#verlängerungButtonContainer #verlängerungButton1{
margin-right: 20px;
width: 110px;
}
#verlängerungButtonContainer #verlängerungButton2{
width: 110px;
}
#verlängerungContent .beschreibung {
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.b2 {
text-align: center;
vertical-align: center;
line-height: 40px;
height: 40px;
width: 200px;
border-width: 0;
color: #fff;
}
.beschreibung .green {
background-color: #70AD47;
}
.beschreibung .red {
background-color: #F22C2C;
}
#verlängerungButtonContainer a {
height: 25px;
background-color: #664220;
color: rgb(255, 255, 255);
padding: 10px 15px;
text-align: center;
vertical-align: center;
line-height: 25px;
text-decoration: none;
border-radius: 8px;
border: 0;
}
#verlängerungErfolgreichButton1{
width: 220px;
}
/*Verlängerung Ende*/
/*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;
}
#abmelden{
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;
}