/* --- iFrame Page --- */ .bodyFrameContent {margin:0 0 0 0; padding:0 0 0 0; background-color:transparent; overflow:auto;} /* overflow:hidden; */ #frameMain {position:absolute; left:0; top:0; width:100%; margin:0 0 0 0;} #frameMain img.pictureBorder {border:1px solid #D2D2D1;} /* 20% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ #frameMain img.pictureBorder:hover {border:1px solid #BCBCBB;} /* 30% K */ /* --- Container iFrame --- */ /* --- Container iFrame: Breakpoint XXS bis ... --- */ .elementIFrame iframe {width:100%;} .iFramePicUpload iframe {height:665px; overflow:scroll; background-color:transparent;} /* (6 Bilder: 570 px, 7 Bilder: 665 px) */ .iFramePicUploadTOP iframe {height:480px; overflow:scroll; background-color:transparent;} /* (6 Bilder: 480 px) */ .iFramePicUploadSTE iframe {height:480px; overflow:scroll; background-color:transparent;} /* (6 Bilder: 480 px) */ /* --- Container iFrame: Breakpoint XS bis S --- */ @media only screen and (min-width:480px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint S bis M --- */ @media only screen and (min-width:544px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint M bis L --- */ @media only screen and (min-width:768px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint SPEZIAL --- */ @media only screen and (min-width:880px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint L bis XL --- */ @media only screen and (min-width:992px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint XL bis XXL --- */ @media only screen and (min-width:1200px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint XXL bis XXXL --- */ @media only screen and (min-width:1500px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- Container iFrame: Breakpoint XXXL bis ... --- */ @media only screen and (min-width:1600px){ .iFramePicUpload iframe {height:665px; overflow:scroll;} .iFramePicUploadTOP iframe {height:480px; overflow:scroll;} .iFramePicUploadSTE iframe {height:480px; overflow:scroll;} } /* --- WCA: CSS-Zusatz für von caravaning-markt.ch --- */ /* --- Bytes & Pixel Media GmbH, 17.04.2020 --- */ /* --- FORMULARELEMENT --- */ /* --- Label --- */ #wcaForm label {font:inherit; font-size:11px; line-height:1.6rem; font-weight:400; text-transform:uppercase; color:rgba(51,51,51,.4); padding:0 0 0 14px; margin:0; background-color:transparent;} /* Input (Text, Select, Textarea) */ #wcaForm section label { font-size:14px; line-height:1.6rem; font-weight:400; text-transform:none; padding:0 0 0 0; margin:0;} /* Input (Checkbox, Radio)*/ #wcaForm label {display:block !important; float:left;} #wcaForm section.XS, #wcaForm section.XM, #wcaForm section.SS, #wcaForm section.S, #wcaForm section.M, #wcaForm section.L, #wcaForm section.XL, #wcaForm section.XXL {display:block; float:left; padding-left:10px;} #wcaForm label.XS {width:14%; margin-left:1%;} /* Kombination: XS (15%) + XL (85%) */ #wcaForm label.XS:first-child {width:15%; margin-left:0;} #wcaForm input.XS, #wcaForm textarea.XS, #wcaForm select.XS, #wcaForm section.XS {width:14%; margin-left:1%;} #wcaForm input.XS:first-child, #wcaForm textarea.XS:first-child, #wcaForm select.XS:first-child, #wcaForm section.XS.firstChild {width:15%; margin-left:0;} #wcaForm label.XM {width:19%; margin-left:1%;} /* Kombination: 5x XM (20%); XM (20%) + S (30%) + M (50%) */ #wcaForm label.XM:first-child {width:20%; margin-left:0;} #wcaForm input.XM, #wcaForm textarea.XM, #wcaForm select.XM, #wcaForm section.XM {width:19%; margin-left:1%;} #wcaForm input.XM:first-child, #wcaForm textarea.XM:first-child, #wcaForm select.XM:first-child, #wcaForm section.XM.firstChild {width:20%; margin-left:0;} #wcaForm label.SS {width:24%; margin-left:1%;} /* Kombination: 4x SS (25%); 2x SS (25%) + M (50%) */ #wcaForm label.SS:first-child {width:25%; margin-left:0;} #wcaForm input.SS, #wcaForm textarea.SS, #wcaForm select.SS, #wcaForm section.SS {width:24%; margin-left:1%;} #wcaForm input.SS:first-child, #wcaForm textarea.SS:first-child, #wcaForm select.SS:first-child, #wcaForm section.SS.firstChild {width:25%; margin-left:0;} #wcaForm label.S {width:29%; margin-left:1%;} /* Kombination: S (30%) + L (70%) */ #wcaForm label.S:first-child {width:30%; margin-left:0;} #wcaForm input.S, #wcaForm textarea.S, #wcaForm select.S, #wcaForm section.S {width:29%; margin-left:1%;} #wcaForm input.S:first-child, #wcaForm textarea.S:first-child, #wcaForm select.S:first-child, #wcaForm section.S.firstChild {width:30%; margin-left:0;} #wcaForm label.M {width:49%; margin-left:1%;} /* Kombination: 2x M (50%); M (50% + 2x SS (25%) */ #wcaForm label.M:first-child {width:50%; margin-left:0;} #wcaForm input.M, #wcaForm textarea.M, #wcaForm select.M, #wcaForm section.M {width:49%; margin-left:1%;} #wcaForm input.M:first-child, #wcaForm textarea.M:first-child, #wcaForm select.M:first-child, #wcaForm section.M.firstChild {width:50%; margin-left:0;} #wcaForm label.L {width:69%; margin-left:1%;} /* Kombination: L (70%) + S (30%) */ #wcaForm label.L:first-child {width:70%; margin-left:0;} #wcaForm input.L, #wcaForm textarea.L, #wcaForm select.L, #wcaForm section.L {width:69%; margin-left:1%;} #wcaForm input.L:first-child, #wcaForm textarea.L:first-child, #wcaForm select.L:first-child, #wcaForm section.L.firstChild {width:70%; margin-left:0;} #wcaForm label.XL {width:84%; margin-left:1%;} /* Kombination: XL (85%) + XS (15%) */ #wcaForm label.XL:first-child {width:85%; margin-left:0;} #wcaForm input.XL, #wcaForm textarea.XL, #wcaForm select.XL, #wcaForm section.XL {width:84%; margin-left:1%;} #wcaForm input.XL:first-child, #wcaForm textarea.XL:first-child, #wcaForm select.XL:first-child, #wcaForm section.XL.firstChild {width:85%; margin-left:0;} #wcaForm label.XXL {width:99%; margin-left:1%;} /* Kombination: XXL (100%) */ #wcaForm label.XXL:first-child {width:100%; margin-left:0;} #wcaForm input.XXL, #wcaForm textarea.XXL, #wcaForm select.XXL, #wcaForm section.XXL {width:99%; margin-left:1%;} #wcaForm input.XXL:first-child, #wcaForm textarea.XXL:first-child, #wcaForm select.XXL:first-child, #wcaForm section.XXL.firstChild {width:100%; margin-left:0;} /* --- Label-Status --- */ #wcaForm label.wglIsInvalid {background-color:#FFFFFF; color:#C20736;} /* Rot 100% = #C20736. */ #wcaForm label.wglIsValid {background-color:#FFFFFF;} #wcaForm label.wglIsNeutral {background-color:#FFFFFF; color:rgba(51,51,51,.4);} /* 100% = #1D1D1D. */ #wcaForm label.wglIsActive {background-color:#FFFFFF; color:#22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm label.wglIsHighlighted {background-color:#FFFFFF;} /* --- Label-Stern --- */ #wcaForm .formLabelStar {color:#8E8E8D; padding-left:2px;} /* 50% K 100% = #1D1D1B. 50% = #8E8E8D. */ /* --- Input-Elemente (Text, File, Select, Textarea, Section) --- */ #wcaForm input {font:inherit; font-size:14px; line-height:1.6rem; font-weight:400; padding:0 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; height:40px;} #wcaForm input[type='text'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type='number'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type='password'] {-webkit-appearance:none; -moz-appearance:none;} #wcaForm input[type="file"] {padding:0 !important;} #wcaForm select {font:inherit; font-size:14px; line-height:1.6rem; font-weight:400; padding:0 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; height:40px; cursor:pointer; /* background-color:#FEFEFE; (Element SELECT benoetigt im Minimum einen leichten Grauton!) */ -webkit-appearance:none; -moz-appearance:none; background-image:url('/cm-wGlobal/wGlobal/layout/images/drop-arrow.png'); background-repeat:no-repeat; background-position:calc(100% - 10px) 50%;} #wcaForm textarea {font:inherit; font-size:14px; line-height:1.6rem; font-weight:400; padding:7px 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px; resize:none;} #wcaForm section {font:inherit; font-size:14px; line-height:1.6rem; font-weight:400; padding:7px 0; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px;} /* Checkbox und Radio */ /* --- Input-Element (Radio) --- */ .wglRadioWrapper {margin:0; padding:0; clear:both;} .wgRadioWrapperFloat {margin-right:10px; padding:0; float:left;} .wglRadio {margin:0; padding:0 10px 0 5px; float:left; display:block; overflow:hidden;} .wglRadio input {margin-right:10px; padding:0; background-color:transparent;} .wglRadio input[type="text"] {margin-left:4px; padding:0;} .wglRadio label {margin:0; padding:0 !important;} /* .wglCheckbox {margin:0; padding:0; float:left; display:block; overflow:hidden;} .wglCheckbox input {margin-right:4px; background-color:transparent;} .wglCheckbox input[type="text"] {margin-left:4px;} .wglCheckbox label {margin:0; padding:0 !important;} */ /* --- Input-Element (Checkbox) --- */ #wcaForm .wglCheckboxWrapper {margin:0 0 0 0; padding:0; clear:both;} #wcaForm .wglCheckboxWrapperFloat {margin-right:10px; padding:0; float:left;} #wcaForm input[type='checkbox']:not(:checked), #wcaForm input[type='checkbox']:checked {opacity:0;} /* Standard Checkbox verbergen */ #wcaForm .wglCheckbox {margin:0 0 0 -10px; padding:0; cursor:pointer; content:"";} /* Eigene Checkbox */ #wcaForm .wglCheckbox + label::before {display:block; width:16px; height:16px; border-radius:2px; background-color:#FFFFFF; float:left; margin-top:5px; margin-right:7px; content:"";} /* Eigene Checkbox */ #wcaForm .wglCheckbox:hover + label::before {background-color:#D2D2D1; content:"";} /* Checkbox (Hover) 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ #wcaForm .wglCheckbox:checked + label::before {background-color:#1D1D1B; content:"";} /* Checkbox (Angeklickt) Schwarz 100% = #1D1D1B. */ #wcaForm .wglCheckbox:focus + label::before {outline:rgb(59, 153, 252) auto 5px;} /* Mit :focus Checkbock klickbar machen! */ #wcaForm .wglCheckbox:checked + label {color:#1D1D1B; content:"";} /* Label (Angeklickt) Schwarz 100% = #1D1D1B. */ #wcaForm .wglCheckboxFloat label, #wcaForm .wglCheckbox label, #wcaForm .wglRadioFloat label, #wcaForm .wglRadio label {margin:0;} /* --- Input-Element (Container) --- */ #wcaForm .wglSectionWrapper {margin:0; padding:7px 14px 0 3px;} #wcaForm .wglSectionWrapper .elementPicture {margin:0; padding:0;} #wcaForm .wglSectionWrapper .formElementText {font:inherit; font-size:1.2rem;} /* --- Input-Platzhalter --- */ input::-webkit-input-placeholder {color:#8E8E8D;} /* Webkit browsers 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ input:-moz-placeholder {color:#8E8E8D;} /* Mozilla Firefox 4 to 18 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ input::-moz-placeholder {color:#8E8E8D;} /* Mozilla Firefox 19+ 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ input:-ms-input-placeholder {color:#8E8E8D;} /* Internet Explorer 10+ 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ textarea::-webkit-input-placeholder {color:#8E8E8D;} /* Webkit browsers 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ textarea:-moz-placeholder {color:#8E8E8D;} /* Mozilla Firefox 4 to 18 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ textarea::-moz-placeholder {color:#8E8E8D;} /* Mozilla Firefox 19+ 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ textarea:-ms-input-placeholder {color:#8E8E8D;} /* Internet Explorer 10+ 80% K 100% = #1D1D1B. 50% = #8E8E8D. */ /* --- Input-Status --- */ #wcaForm input.wglIsInvalid {border:1px solid #C20736;} /* Rot 100% = #C20736. Border: Input (Text) */ #wcaForm input.wglIsValid {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm input.wglIsNeutral {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm input.wglIsActive {border:1px solid #22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm input.wglIsHighlighted {border:1px solid #BCBCBB;} /* D'grau 30% = #BCBCBB. */ #wcaForm select.wglIsInvalid {border:1px solid #C20736;} /* Rot 100% = #C20736. Border: Input (Select) */ #wcaForm select.wglIsValid {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm select.wglIsNeutral {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm select.wglIsActive {border:1px solid #22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm select.wglIsHighlighted {border:1px solid #BCBCBB;} /* D'grau 30% = #BCBCBB. */ #wcaForm textarea.wglIsInvalid {border:1px solid #C20736;} /* Rot 100% = #C20736. Border: Input (Textarea) */ #wcaForm textarea.wglIsValid {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm textarea.wglIsNeutral {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm textarea.wglIsActive {border:1px solid #22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm textarea.wglIsHighlighted {border:1px solid #BCBCBB;} /* D'grau 30% = #BCBCBB. */ #wcaForm section.wglIsInvalid {border:1px solid #C20736;} /* Rot 100% = #C20736. Border: Input (Checkbox, Radio) */ #wcaForm section.wglIsValid {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm section.wglIsNeutral {border:1px solid #F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm section.wglIsActive {border:1px solid #22AE38;} /* Gruen 100% = #22AE38. */ #wcaForm section.wglIsHighlighted {border:1px solid #BCBCBB;} /* D'grau 30% = #BCBCBB. */ #wcaForm .wglIsInvalid {background-color:#F9E7EB;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. Background: Input (Text, Select, Textarea) */ #wcaForm .wglIsValid {background-color:#D3EFD7;} /* 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm .wglIsNeutral {background-color:#F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm .wglIsActive {background-color:#D3EFD7;} /* 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm .wglIsHighlighted {background-color:#BCBCBB;} /* 30% D'grau100% = #F0F0F0. 30% = #BCBCBB. */ #wcaForm section.wglIsInvalid {background-color:#F9E7EB;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. Background: Input (Checkbox, Radio) */ #wcaForm section.wglIsValid {background-color:#D3EFD7;} /* 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm section.wglIsNeutral {background-color:#F0F0F0;} /* Grau 100% = #F0F0F0. */ #wcaForm section.wglIsActive {background-color:#D3EFD7;} /* 20% Gruen 100% = #22AE38. 20% = #D3EFD7. */ #wcaForm section.wglIsHighlighted {background-color:#BCBCBB;} /* 30% D'grau100% = #F0F0F0. 30% = #BCBCBB. */ /* Formulare: Einstellungen für alle ausser iOS Geräte */ @supports not (-webkit-overflow-scrolling:touch) { #wcaForm .wglCheckboxWrapper label {padding-left:1em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapperFloat label {padding-left:1em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapper label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapperFloat label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapper input[type='checkbox'] {position:absolute; vertical-align:middle; margin-top:0;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ } /* Formulare: Spezial-Einstellungen nur für iOS Geräte: Korrektur damit CHECKBOX bei iOS Geräten nicht zu weit oben dargestellt wird */ @supports (-webkit-overflow-scrolling:touch) { #wcaForm .wglCheckboxWrapper label {padding-left:1.2em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapperFloat label {padding-left:1.2em; display:block;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ #wcaForm .wglCheckboxWrapper label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapperFloat label span {vertical-align:middle;} #wcaForm .wglCheckboxWrapper input[type='checkbox'] {position:absolute; vertical-align:middle; margin-top:0.8rem;} /* Verhindert Umbruch bzw. vertikale Verschiebung von LABEL und CHECKBOX bei mehreren Zeilen */ } /* --- Button --- */ #wcaForm button {width:100%; display:block; cursor:pointer; font:inherit; font-size:16px; font-weight:600; border:solid 1px #1D1D1B; padding:0 14px; margin:0; border-radius:20px; background-color:#1D1D1B; color:#FFFFFF; border-color:#1D1D1B;} /* Schwarz 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button:hover {background-color:#343432; color:#FFFFFF; border-color:#343432;} /* 90% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button:active {background-color:#1D1D1B; color:#FFFFFF; border-color:#1D1D1B;} /* Schwarz 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonMain {background-color:#C20736; color:#FFFFFF; border-color:#C20736;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm button.buttonMain:hover {background-color:#C8204A; color:#FFFFFF; border-color:#C8204A;} /* 90% Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm button.buttonMain:active {background-color:#C20736; color:#FFFFFF; border-color:#C20736;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm button.buttonGray {background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 60% = #777776. */ #wcaForm button.buttonGray:hover {background-color:#8E8E8D; color:#FFFFFF; border-color:#8E8E8D;} /* 50% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ #wcaForm button.buttonGray:active {background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 50% = #8E8E8D. */ #wcaForm button.buttonWhite {background-color:#FFFFFF; color:#1D1D1B; border-color:#1D1D1B;} /* Weiss Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonWhite:hover {background-color:#FFFFFF; color:#4A4A49; border-color:#4A4A49;} /* Weiss Schrift 80% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonWhite:active {background-color:#FFFFFF; color:#1D1D1B; border-color:#1D1D1B;} /* Weiss Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonNeutral {background-color:transparent; color:#1D1D1B; border-color:#1D1D1B;} /* Transp. Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonNeutral:hover {background-color:transparent; color:#4A4A49; border-color:#4A4A49;} /* Transp. Schrift 80% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonNeutral:active {background-color:transparent; color:#1D1D1B; border-color:#1D1D1B;} /* Transp. Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm button.buttonShort {width:unset;} #wcaForm a.button {cursor:pointer; font:inherit; font-size:16px; font-weight:600; text-decoration:none; border:solid 1px #1D1D1B; padding:10px 14px; margin:0; border-radius:20px; background-color:#1D1D1B; color:#FFFFFF; border-color:#1D1D1B;} /* Schwarz 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button:hover {background-color:#343432; color:#FFFFFF; border-color:#343432;} /* 90% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button:active {background-color:#1D1D1B; color:#FFFFFF; border-color:#1D1D1B;} /* Schwarz 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonMain {background-color:#C20736; color:#FFFFFF; border-color:#C20736;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm a.button.buttonMain:hover {background-color:#C8204A; color:#FFFFFF; border-color:#C8204A;} /* 90% Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm a.button.buttonMain:active {background-color:#C20736; color:#FFFFFF; border-color:#C20736;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm a.button.buttonGray {background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 60% = #777776. */ #wcaForm a.button.buttonGray:hover {background-color:#8E8E8D; color:#FFFFFF; border-color:#8E8E8D;} /* 50% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ #wcaForm a.button.buttonGray:active {background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 50% = #8E8E8D. */ #wcaForm a.button.buttonWhite {background-color:#FFFFFF; color:#1D1D1B; border-color:#1D1D1B;} /* Weiss Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonWhite:hover {background-color:#FFFFFF; color:#4A4A49; border-color:#4A4A49;} /* Weiss Schrift 80% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonWhite:active {background-color:#FFFFFF; color:#1D1D1B; border-color:#1D1D1B;} /* Weiss Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonNeutral {background-color:transparent; color:#1D1D1B; border-color:#1D1D1B;} /* Transp. Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonNeutral:hover {background-color:transparent; color:#4A4A49; border-color:#4A4A49;} /* Transp. Schrift 80% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm a.button.buttonNeutral:active {background-color:transparent; color:#1D1D1B; border-color:#1D1D1B;} /* Transp. Schrift 100% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ /* --- Clearer, Spacer --- */ #wcaForm .elementClearer {margin:0; height:0px; clear:both;} #wcaForm .elementSpace {margin:0; height:1rem;} #wcaForm .elementClearerWithSpace {margin:0; height:1rem; clear:both} #wcaForm .spacer1 {height:1rem;} #wcaForm .spacer2 {height:2rem;} #wcaForm .spacer3 {height:3rem;} #wcaForm .spacer4 {height:4rem;} #wcaForm .spacer5 {height:5rem;} #wcaForm .spacer6 {height:6rem;} #wcaForm .spacer7 {height:7rem;} #wcaForm .spacer8 {height:8rem;} /* --- Form Spacer --- */ #wcaForm dd.formElementSpacer, #wcaForm div.formElementSpacer {margin-bottom:3rem;} /* --- Tab-Container --- */ #wcaForm .elementTabContainer {} #wcaForm .elementTabContainer .tabs {} /* height:32px; border-bottom:2px solid #C20736; */ $wcaForm .elementTabContainer .tab {} #wcaForm .containerEntries2 .tab {padding:0; float:left; overflow:hidden;} #wcaForm .containerEntries2 .tab1 {width:50%; margin-left:0%;} #wcaForm .containerEntries2 .tab2 {width:49%; margin-left:1%;} #wcaForm .containerEntries4 .tab {padding:0; float:left; overflow:hidden;} #wcaForm .containerEntries4 .tab1 {width:25%; margin-left:0%;} #wcaForm .containerEntries4 .tab2 {width:24%; margin-left:1%;} #wcaForm .containerEntries4 .tab3 {width:24%; margin-left:1%;} #wcaForm .containerEntries4 .tab4 {width:24%; margin-left:1%;} #wcaForm .tabs button {width:100%; height:30px; display:block; cursor:pointer; font:inherit; font-size:14px; font-weight:400; border:none; padding:0 3px; margin:0; border-radius:4px 4px 0 0; background-color:#1D1D1B; color:#FFFFFF;} /* Schwarz 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ #wcaForm .tabs button.tabMain {background-color:#C20736; color:#FFFFFF;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm .tabs button.tabMain:hover {background-color:#C8204A; color:#FFFFFF;} /* 90% Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ #wcaForm .tabs button.tabNeutral {background-color:#F0F0F0; color:#1D1D1B;} /* Grau 100% = #F0F0F0. */ #wcaForm .tabs button.tabNeutral:hover {background-color:#F0F0F0; color:#8E8E8D;} /* Grau 100% = #F0F0F0. */ /* --- Info-Boxen --- */ #wcaForm .wcaBox {font:inherit; font-size:14px; line-height:1.2rem; font-weight:400; padding:9px 14px 10px 14px; margin:0 0 10px 0; border:1px solid transparent; background-color:#FEFEFE; border-radius:20px;} #wcaForm .wcaBox_var0 {background-color:#FFFFFF; border-color:#e0e0e0;} /* Grau 100% = #F0F0F0. */ #wcaForm .wcaBox_var1 {background-color:#F9E7EB; border-color:#C20736;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ #wcaForm .wcaBox_var2 {background-color:#e3f2e3; border-color:#c4e3c4;} /* Green */ #wcaForm .wcaBox_var3 {background-color:#fff9e3; border-color:#fff3c4;} /* Yellow */ #wcaForm .wcaBox_var4 {background-color:#e3eeff; border-color:#c4dcff;} /* Blue */ /* --- Debug-Box --- */ #blockDebug {font:inherit; font-size:14px; line-height:1.2rem; font-weight:400;} #blockDebug p {margin-bottom:8px;} #blockDebug .wglIsInvalid {font-weight:bold; background-color:transparent;} #blockDebug .wglIsValid {font-weight:normal; background-color:transparent;} #blockDebug .wglIsNeutral {font-weight:normal; background-color:transparent;} #blockDebug .wglIsActive {font-weight:normal; background-color:transparent;} #blockDebug .wglIsHighlighted {font-weight:normal; background-color:transparent;} /* --- Galerie --- */ #wcaForm .elementGalleryContainer {margin:0; padding:0;} #wcaForm .galleryInner {margin:0; padding:0;} #wcaForm .galleryPicture {margin:0 0 8px 0; padding:0;} /* Galerie-Bild gross */ #wcaForm .galleryPicture img {border:1px solid #D2D2D1;} /* Galerie-Bild gross */ #wcaForm .galleryThumbnailMain {} #wcaForm .galleryThumbnailInner {position:relative;} #wcaForm .galleryThumbnailItem {margin:0 1% 0 1%; padding:0; float:left; cursor:pointer;} /* Thumbnail-Bilder */ #wcaForm .galleryThumbnailItem img {border:1px solid #D2D2D1;} /* 20% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ #wcaForm .galleryThumbnailItem img:hover {border:1px solid #BCBCBB;} /* 30% K */ /* --- Galerie: Breakpoint XXS bis ... --- */ #wcaForm .formGallery {width:100%;} /* --- Galerie: Breakpoint XS bis S --- */ @media only screen and (min-width:480px){ #wcaForm .formGallery {} } /* --- Galerie: Breakpoint S bis M --- */ @media only screen and (min-width:544px){ #wcaForm .formGallery {} } /* --- Galerie: Breakpoint M bis L --- */ @media only screen and (min-width:768px){ #wcaForm .formGallery {width:50%;} } /* --- Galerie: Breakpoint L bis XL --- */ @media only screen and (min-width:992px){ #wcaForm .formGallery {} } /* --- Galerie: Breakpoint XL bis XXL --- */ @media only screen and (min-width:1200px){ #wcaForm .formGallery {} } /* --- Galerie: Breakpoint XXL bis XXXL --- */ @media only screen and (min-width:1500px){ #wcaForm .formGallery {width:30%;} } /* --- Galerie: Breakpoint XXXL bis ... --- */ @media only screen and (min-width:1600px){ #wcaForm .formGallery {} } /* --- Formulare --- */ #wcaForm .requiredFormfield {display:none !important;} #wcaForm dl.form, #wcaForm div.form {margin:0; padding:0; width:100%;} /* WCA: Brotkruemmelnavigation */ #wcaNavigationBreadcrumb {display:block; clear:left; margin:0 0 10px 0; padding:10px 0 5px 0;} #wcaNavigationBreadcrumb a {font:inherit; font-size:14px; line-height:1.6rem; font-weight:400; text-decoration:none; padding:0 0 0 0; } #wcaNavigationBreadcrumb a:before {content:'»'; padding: 0 4px 0 0;} #wcaNavigationBreadcrumb a:first-child:before {content:''; padding:0;} /* --- WCA-Browser: Listverzeichnis --- */ .listWCABrowser {list-style:none; margin:0 0 10px 0; padding:0; border-top:solid 1px #8E8E8D;} .listWCABrowser ul {margin:0 0 0 0; padding:0 0 0 0; list-style-image:none;} .listWCABrowser li {padding:0 0 0 0;} .listWCABrowser p {margin:0; padding:0; font:inherit; font-size:14px; line-height:1.1rem; font-weight:400; color:#1D1D1B;} .listWCABrowser dt {margin:0 0 4px 0;} .listWCABrowser dd {color:#666666;margin:0 0 8px 8px;} .listWCABrowser .listEntry {overflow:hidden; margin:0; padding:7px 0 0 0; border-bottom:solid 1px #8E8E8D;} .listWCABrowser .listEntry.category {margin:0; padding:0 0 0 7px;; height:30px;} .listWCABrowser .listEntry.category h2 {margin:0; padding:0;} .listWCABrowser .listEntryTitle {margin:-4px 0 0 0; padding:0; font-size:20px; line-height:1.6rem; color:#1D1D1B; font-weight:400; } .listWCABrowser .listEntryTitle a {text-decoration:none;} .listWCABrowser .listIcon {vertical-align:middle;margin:-4px 4px 0 0;} .listWCABrowser .listEntryDate {padding:0 4px 0 0;color:#666666;font-weight:bold;text-decoration:none;} .listWCABrowser .listEntryLocation {padding:0 4px 0 0;color:#666666;font-weight:bold;text-decoration:none;} .listWCABrowser .listEntrySubline {margin:0 0 4px 0;color:#666666;} .listWCABrowser .listEntryThumbnail {float:left;margin:2px 8px 4px 0;max-width:100%;height:auto;border:1px solid #D0D0D0;} .listWCABrowser .listEntryThumbnailRight {float:right;margin:2px 0 4px 8px;max-width:100%;height:auto;border:1px solid #D0D0D0;} .listWCABrowser .listEntryDescription {margin:0 0 0 0;} .listWCABrowser .listEntryDescription:after {} .listWCABrowser .listEntrySize {font-weight:normal;color:#666666;} .listWCABrowser .listEntryMoreOnly {text-decoration:none;} .listWCABrowser .listCategoryTitle {margin:0 0 0 6px; padding:0; font-size:16px; line-height:1.7rem; color:#FFFFFF; font-weight:600;} .listWCABrowser .listCategoryTitleJust {margin:0 0 0 0; padding:0; font-size:16px; line-height:1.7rem; color:#FFFFFF; font-weight:600;} .listWCABrowser .wcaFileIcon {float:left; margin-right:4px;} /* DIV mit File Icon */ .listWCABrowser .wcaFileInfo {margin:0 0 4px 0; padding:0; float:left;} /* DIV mit File Info */ .listWCABrowser .wcaAdDetails {margin-bottom:10px;} /* DIV mit Inserat Details */ .listWCABrowser .wcaColumn30 {float:left;width:30%;} /* DIV Spalte 30%, linkgsbuendig */ .listWCABrowser .wcaColumn70 {float:left;width:70%;} /* DIV Spalte 70%, linkgsbuendig */ .wcaFileInfo p.wcaBoxGray {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#f0f0f0; border-radius:3px; border:solid 1px #e0e0e0; padding:3px 4px 3px 4px; max-width:220px; display:block;} /* Box Gray */ .wcaFileInfo p.wcaBoxRed {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#F9E7EB; border-radius:3px; border:solid 1px #C20736; padding:3px 4px 3px 4px; max-width:220px; display:block;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ .wcaFileInfo p.wcaBoxGreen {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#e3f2e3; border-radius:3px; border:solid 1px #c4e3c4; padding:3px 4px 3px 4px; max-width:220px; display:block;} /* Box Green */ .wcaFileInfo p.wcaBoxYellow {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#fff9e3; border-radius:3px; border:solid 1px #fff3c4; padding:3px 4px 3px 4px; max-width:220px; display:block;} /* Box Yellow */ .wcaFileInfo p.wcaBoxBlue {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#e3eeff; border-radius:3px; border:solid 1px #c4dcff; padding:3px 4px 3px 4px; max-width:220px; display:block;} /* Box Blue */ .elementBrowserInfo {font-size:14px; line-height:1.1rem; font-weight:400;} /* Infotext am Fuss des Browsers */ #frameMain .listWCABrowser ul {margin:0 0 0 0;} #frameMain .listWCABrowser .wcaFileIcon {margin-bottom:-24px;} /* --- WCA-Browser: Buttons --- */ .listWCABrowser .wcaFunctionsContainer {margin:0; padding:0;} /* DIV Container mit Funktionen */ .listWCABrowser .wcaFunctions {margin:0 0 0 4px; padding:0; height:44px; float:right;} /* DIV mit Funktionen */ .listWCABrowser div.wcaButton {margin:2px 0 14px 0; padding:1px 0 0 0;} /* Spezial-Wrapper fuer a.wcaButton um die gleichen Abstaende um das Element zu erhalten */ .listWCABrowser a.wcaButton {text-decoration:none; font:inherit; font-size:12px; font-weight:600; border:solid 1px #1D1D1B; padding:10px 12px 8px 12px; margin:0 2px 0 2px; border-radius:16px; background-color:#777776; color:#FFFFFF; border-color:#777776;} /* Leicht abweichende Einstellungen zu button.wcaButton um gleich wie button.wcaButton zu wirken */ .listWCABrowser a.wcaButton:hover {background-color:#8E8E8D; color:#FFFFFF; border-color:#8E8E8D;} /* 50% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser button.wcaButton {cursor:pointer; font:inherit; font-size:12px; font-weight:600; border:solid 1px #1D1D1B; padding:0 14px; margin:0; border-radius:16px; height:34px; background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 60% = #777776. */ .listWCABrowser button.wcaButton:hover {background-color:#8E8E8D; color:#FFFFFF; border-color:#8E8E8D;} /* 50% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ button.wcaButton.accent {background-color:#C20736; color:#FFFFFF; border-color:#C20736;} /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ button.wcaButton.accent:hover {background-color:#C8204A; color:#FFFFFF; border-color:#C8204A;} /* 90% Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ .listWCABrowser button.wcaButtonLarge {} /* --- WCA-Browser: Formularelemente --- */ .listWCABrowser input {font:inherit; font-size:12px; line-height:1.6rem; font-weight:400; padding:0 14px; margin:0 0 10px 0; border:1px solid #1D1D1B; background-color:#FEFEFE; opacity:0.7; border-radius:16px; height:34px; width:155px;} .listWCABrowser input[type='text'] {-webkit-appearance:none; -moz-appearance:none;} /* --- WCA-Browser: Buttons: Breakpoint XXS bis ... --- */ .listWCABrowser .wcaFileInfoClearer {clear:left;} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {clear:right;} /* Clearer DIV zwischen wcaFunctions */ /* --- WCA-Browser: Buttons: Breakpoint XS bis S --- */ @media only screen and (min-width:480px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint S bis M --- */ @media only screen and (min-width:544px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {clear:none;} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint M bis L --- */ @media only screen and (min-width:768px){ .listWCABrowser .wcaFileInfoClearer {clear:none;} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint L bis XL --- */ @media only screen and (min-width:992px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint XL bis XXL --- */ @media only screen and (min-width:1200px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint XXL bis XXXL --- */ @media only screen and (min-width:1500px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Buttons: Breakpoint XXXL bis ... --- */ @media only screen and (min-width:1600px){ .listWCABrowser .wcaFileInfoClearer {} /* Clearer DIV zwischen wcaFileInfo und wcaFunctions */ .listWCABrowser .wcaFunctionsClearer {} /* Clearer DIV zwischen wcaFunctions */ } /* --- WCA-Browser: Default Farben --- */ .listWCABrowser .col {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .col:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .col.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .col.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .col.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .col.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .col.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .col.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .col.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Default Hintergrundfarbe: Hellgelb */ #frameMain .listWCABrowser .col {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ #frameMain .listWCABrowser .col:hover {background-color:#E0E0E0;} #frameMain .listWCABrowser .col.highlight {background-color:#ECECEC; -webkit-animation-name:highlight-fade-frame; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade-frame; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade-frame; animation-duration:20s; animation-delay:0s;} /* Default Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Occasionsmarkt Farben --- */ .listWCABrowser .colOCC {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colOCC:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colOCC.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colOCC.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colOCC.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colOCC.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colOCC.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colOCC.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colOCC.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Occasionsmarkt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Occasionsmarkt (dark) Farben --- */ .listWCABrowser .colOCCd {background-color:#ECECEC;} /* Hintergrundfarbe: Hellgrau (d) */ .listWCABrowser .colOCCd:hover {background-color:#E0E0E0;} /* Hintergrundfarbe: Grau (d) */ .listWCABrowser .colOCCd.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colOCCd.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colOCCd.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colOCCd.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colOCCd.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colOCCd.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colOCCd.highlight {background-color:#ECECEC; -webkit-animation-name:highlight-fade-dark; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade-dark; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade-dark; animation-duration:20s; animation-delay:0s;} /* Occasionsmarkt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Neufahrzeugmarkt Farben --- */ .listWCABrowser .colNEW {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colNEW:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colNEW.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colNEW.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colNEW.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colNEW.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colNEW.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colNEW.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colNEW.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Neufahrzeugmarkt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Neufahrzeugmarkt (dark) Farben --- */ .listWCABrowser .colNEWd {background-color:#ECECEC;} /* Hintergrundfarbe: Hellgrau (d) */ .listWCABrowser .colNEWd:hover {background-color:#E0E0E0;} /* Hintergrundfarbe: Grau (d) */ .listWCABrowser .colNEWd.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colNEWd.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colNEWd.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colNEWd.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colNEWd.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colNEWd.category {background-color:#8E8E8D;} /* Hintergrundfarbe: 80% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. */ .listWCABrowser .colNEWd.highlight {background-color:#ECECEC; -webkit-animation-name:highlight-fade-dark; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade-dark; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade-dark; animation-duration:20s; animation-delay:0s;} /* Occasionsmarkt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Caravaning-Markt Farben --- */ .listWCABrowser .colCAM {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colCAM:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colCAM.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colCAM.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colCAM.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colCAM.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colCAM.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colCAM.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colCAM.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Caravaning-Markt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Caravaning-Markt (dark) Farben --- */ .listWCABrowser .colCAMd {background-color:#ECECEC;} /* Hintergrundfarbe: Hellgrau (d) */ .listWCABrowser .colCAMd:hover {background-color:#E0E0E0;} /* Hintergrundfarbe: Grau (d) */ .listWCABrowser .colCAMd.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colCAMd.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colCAMd.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colCAMd.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colCAMd.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colCAMd.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colCAMd.highlight {background-color:#ECECEC; -webkit-animation-name:highlight-fade-dark; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade-dark; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade-dark; animation-duration:20s; animation-delay:0s;} /* Caravaning-Markt Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Hausmessen Farben --- */ .listWCABrowser .colEVE {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colEVE:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colEVE.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colEVE.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colEVE.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colEVE.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colEVE.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colEVE.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colEVE.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Hausmessen Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Vermietung Farben --- */ .listWCABrowser .colREN {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colREN:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colREN.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colREN.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colREN.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colREN.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colREN.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colREN.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colREN.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Vermietung Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Topcamps Farben --- */ .listWCABrowser .colTOP {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colTOP:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colTOP.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colTOP.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colTOP.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colTOP.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colTOP.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colTOP.active {background-color:#BDE7C4;} /* Hintergrundfarbe: 30% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colTOP.active:hover {background-color:#A7DFAF;} /* Hintergrundfarbe: 40% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colTOP.partlyactive {background-color:#E9F7EB;} /* Hintergrundfarbe: 10% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colTOP.partlyactive:hover {background-color:#D3EFD7;} /* Hintergrundfarbe: 20% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colTOP.futureactive {background-color:#DDDDDD;} /* Hintergrundfarbe: Dunkelgrau */ .listWCABrowser .colTOP.futureactive:hover {background-color:#CFCFCF;} /* Hintergrundfarbe: Dunkelgrau */ .listWCABrowser .colTOP.partlyfutureactive {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0 */ .listWCABrowser .colTOP.partlyfutureactive:hover {background-color:#E2E2E2;} /* Hintergrundfarbe: Grau */ .listWCABrowser .colTOP.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colTOP.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Topcamps Hintergrundfarbe: Hellgelb */ -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Vermietung Hintergrundfarbe: Hellgelb */ /* --- WCA-Browser: Stellplaetze Farben --- */ .listWCABrowser .colSTE {background-color:#FEFEFE;} /* Hintergrundfarbe: Hellgrau */ .listWCABrowser .colSTE:hover {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0. */ .listWCABrowser .colSTE.transparent {background-color:transparent;} /* Hintergrundfarbe: Transparent */ .listWCABrowser .colSTE.dark {background-color:#D2D2D1;} /* Hintergrundfarbe: 20% K 100% = #1D1D1B. 20% = #D2D2D1. 10% = #E9E9E9. */ .listWCABrowser .colSTE.selected {background-color:#FFFF99;} /* Hintergrundfarbe: Gelb */ .listWCABrowser .colSTE.expire {background-color:#F9E7EB;} /* Hintergrundfarbe: 10% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colSTE.expire:hover {background-color:#F6DAE1;} /* Hintergrundfarbe: 15% Rot 100% = #C20736. 20% = #F3CDD7. 15% = #F6DAE1. 10% = #F9E7EB. */ .listWCABrowser .colSTE.active {background-color:#BDE7C4;} /* Hintergrundfarbe: 30% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colSTE.active:hover {background-color:#A7DFAF;} /* Hintergrundfarbe: 40% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colSTE.partlyactive {background-color:#E9F7EB;} /* Hintergrundfarbe: 10% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colSTE.partlyactive:hover {background-color:#D3EFD7;} /* Hintergrundfarbe: 20% Gruen 100% = #22AE38. 40% = #A7DFAF. 30% = #BDE7C4. 20% = #D3EFD7. 10% = #E9F7EB. */ .listWCABrowser .colSTE.futureactive {background-color:#DDDDDD;} /* Hintergrundfarbe: Dunkelgrau */ .listWCABrowser .colSTE.futureactive:hover {background-color:#CFCFCF;} /* Hintergrundfarbe: Dunkelgrau */ .listWCABrowser .colSTE.partlyfutureactive {background-color:#F0F0F0;} /* Hintergrundfarbe: Grau 100% = #F0F0F0 */ .listWCABrowser .colSTE.partlyfutureactive:hover {background-color:#E2E2E2;} /* Hintergrundfarbe: Grau */ .listWCABrowser .colSTE.category {background-color:#1D1D1B;} /* Hintergrundfarbe: Schwarz 100% = #1D1D1B. */ .listWCABrowser .colSTE.highlight {background-color:#FCFCFC; -webkit-animation-name:highlight-fade; -webkit-animation-duration:20s; -webkit-animation-delay:0s; -moz-animation-name:highlight-fade; -moz-animation-duration:20s; -moz-animation-delay:0s; animation-name:highlight-fade; animation-duration:20s; animation-delay:0s;} /* Stellplaetze Hintergrundfarbe: Hellgelb */ @-webkit-keyframes highlight-fade {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#FCFCFC;} } /* Animation highlight-fade: Fade Out background-color */ @-moz-keyframes highlight-fade {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#FCFCFC;} } /* Animation highlight-fade: Fade Out background-color */ @keyframes highlight-fade {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#FCFCFC;} } /* Animation highlight-fade: Fade Out background-color */ @-webkit-keyframes highlight-fade-dark {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ @-moz-keyframes highlight-fade-dark {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ @keyframes highlight-fade-dark {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ @-webkit-keyframes highlight-fade-frame {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ @-moz-keyframes highlight-fade-frame {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ @keyframes highlight-fade-frame {0% {background-color:#FFFCC8;} 75% {background-color:#FFFCC8;} 100% {background-color:#ECECEC;} } /* Animation highlight-fade: Fade Out background-color */ /* --- WCA: Overlay Popups --- */ /* .overlay {position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.7);transition:opacity 500ms;visibility:hidden;opacity:0;} */ /* .overlay:target {visibility:visible;opacity:1;} */ .overlay {position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0, 0, 0, 0.7); transition:opacity 500ms; visibility: visible;opacity:1; z-index:1000;} /* position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.7);transition:opacity 500ms;visibility:visible;opacity:1; */ .popup {position:absolute; left:50%; margin-right:-50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background:#FFFFFF; top:50%; width:280px; border-radius:5px; padding:15px 20px 15px 20px;} /* margin:70px auto;position:relative;width:30%;padding:15px 20px 20px 20px;background:#FFFFFF;border-radius:5px;transition:all 5s ease-in-out; */ #frameMain .popup {width:220px;} .popup .popupToggler {display:block; margin:7px 0 0 0; padding:0; border:1px solid transparent; cursor:pointer; z-index:2500; width:20px; height:20px; position;relative; float:right;} .popup .popupClose {margin:0; padding:0;} .popup .popupClose_item1 {margin-top:8px; padding:0; width:18px; height:2px; background-color:#777776; transform:rotate(45deg);} .popup .popupClose_item2 {margin-top:-2px; padding:0; width:18px; height:2px; background-color:#777776; transform:rotate(-45deg);} .popup h2 {margin-top:0; color:#33333; } .popup p {margin:0; padding:0; font:inherit; font-size:14px; line-height:1.1rem; font-weight:400; color:#1D1D1B;} .popup .close {position: absolute;top:10px; right:20px; transition:all 200ms; font-size:16px; text-decoration:none; color:#777777;} .popup .close:hover {color:#000000;} .popup .wcaFunctionsContainer {} /* WCA: DIV mit Funktionen */ .popup .wcaFunctions {float:right; margin-left:4px;} /* WCA: DIV mit Funktionen */ .popup p.wcaBoxGray {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#f0f0f0; border-radius:3px; border:solid 1px #e0e0e0; padding:3px 4px 3px 4px; display:block;} /* Box Gray */ .popup p.wcaBoxRed {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#F9E7EB; border-radius:3px; border:solid 1px #C20736; padding:3px 4px 3px 4px; display:block;} /* 10% Rot 100% = #C20736. 20% = #F3CDD7. 10% = #F9E7EB. */ .popup p.wcaBoxGreen {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#e3f2e3; border-radius:3px; border:solid 1px #c4e3c4; padding:3px 4px 3px 4px; display:block;} /* Box Green */ .popup p.wcaBoxYellow {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#fff9e3; border-radius:3px; border:solid 1px #fff3c4; padding:3px 4px 3px 4px; display:block;} /* Box Yellow */ .popup p.wcaBoxBlue {box-sizing:border-box; margin:4px 0 4px 0; overflow:hidden; background-color:#e3eeff; border-radius:3px; border:solid 1px #c4dcff; padding:3px 4px 3px 4px; display:block;} /* Box Blue */ /* --- WCA: Overlay Buttons --- */ .popup div.wcaButton {margin:2px 0 14px 0;padding:1px 0 0 0;} /* Spezial-Wrapper fuer a.wcaButton um die gleichen Abstaende um das Element zu erhalten */ .popup a.wcaButton {font-size:11px;letter-spacing:1px;color:#000000; text-decoration:none;border-radius:3px;border:solid 1px #a0a0a0;padding:4px 6px 3px 6px;margin:0 2px 0 2px;background-color:#f0f0f0;background-image:linear-gradient(top, #f0f0f0 0%, #d0d0d0 100%);background-position:0 0;} /* Leicht abweichende Einstellungen zu button.wcaButton um gleich wie button.wcaButton zu wirken */ .popup a.wcaButton:hover {color:#777777;background-image:linear-gradient(top, #d0d0d0 0%, #e0e0e0 100%);} .popup button.wcaButton {min-width:60px; cursor:pointer; font:inherit; font-size:12px; font-weight:600; border:solid 1px #1D1D1B; padding:0 14px; margin:0; border-radius:16px; height:34px; background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 60% = #777776. */ .popup button.wcaButton:hover {background-color:#8E8E8D; color:#FFFFFF; border-color:#8E8E8D;} /* 50% K 100% = #1D1D1B. 90% = #343432. 80% = #4A4A49. 70% = #616160. 60% = #777776. 50% = #8E8E8D. 40% = #A5A5A4. 30% = #BCBCBB. 20% = #D2D2D1. 10% = #E9E9E9. */ /* --- WCA: Overlay Popups: Breakpoint XXS bis ... --- */ .popup {} #frameMain .popup {} /* --- WCA: Overlay Popups: Breakpoint XS bis S --- */ @media only screen and (min-width:480px){ .popup {width:380px} #frameMain .popup {width:380px;} } /* --- WCA: Overlay Popups: Breakpoint S bis M --- */ @media only screen and (min-width:544px){ .popup {} #frameMain .popup {} } /* --- WCA: Overlay Popups: Breakpoint M bis L --- */ @media only screen and (min-width:768px){ .popup {} #frameMain .popup {} } /* --- WCA: Overlay Popups: Breakpoint L bis XL --- */ @media only screen and (min-width:992px){ .popup {} #frameMain .popup {} } /* --- WCA: Overlay Popups: Breakpoint XL bis XXL --- */ @media only screen and (min-width:1200px){ .popup {} #frameMain .popup {} } /* --- WCA: Overlay Popups: Breakpoint XXL bis XXXL --- */ @media only screen and (min-width:1500px){ .popup {} #frameMain .popup {} } /* --- WCA: Overlay Popups: Breakpoint XXXL bis ... --- */ @media only screen and (min-width:1600px){ .popup {} #frameMain .popup {} } /* --- WCA: File Upload Button --- */ .popup .wcaUploadFunctions {float:right; margin-bottom:10px;} .popup .inputfile {width:0.1px; height:0.1px; opacity:0; overflow:hidden; position:absolute; z-index:-1;} .popup .inputfile + label {cursor:pointer; font:inherit; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; display:inline-block; overflow:hidden; padding:0 14px;} .popup .inputfile:focus + label, .popup .inputfile.has-focus + label {outline:1px dotted #000; outline:-webkit-focus-ring-color auto 5px;} .popup .inputfile + label * {} /* pointer-events: none; in case of FastClick lib use */ .popup .inputfile + label svg {width:1em; height:1em; vertical-align:middle; fill:currentColor; margin-top:-0.25em; margin-right:0.25em;} .popup input[type='button'] {cursor:pointer; font:inherit; font-size:12px; font-weight:600; border:solid 1px #1D1D1B; padding:0 14px; margin:0; border-radius:16px; height:34px; background-color:#777776; color:#FFFFFF; border-color:#777776;} /* 60% K 100% = #1D1D1B. 60% = #777776. */ .popup input[type='button'] {-webkit-appearance:none; -moz-appearance:none;} /* --- WCA: Style A --- */ .popup .inputfile-1 + label {border-radius:16px; height:34px; background-color:#C20736; border:solid 1px #C20736; color:#FFFFFF; } /* Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ .popup .inputfile-1:focus + label, .popup .inputfile-1.has-focus + label, .popup .inputfile-1 + label:hover {background-color:#C8204A; border:solid 1px #C8204A;} /* 90% Rot 100% = #C20736. 90% = #C8204A. 80% = #CE395E. */ /* --- WCA: File Upload Functions --- */ .popup .wcaFunctions {overflow:hidden !important;} /* --- WCA: File Status --- */ .popup .fileStatusContainer {margin:0 0 10px 0;} .popup #fileName, .popup #fileSize, .popup #fileType, .popup #fileError, .popup #fileUpload {font:inherit; font-size:14px; line-height:1.2rem; font-weight:400;} .popup #fileError, .popup #fileUpload {font-weight:800;} /* --- WCA: Progress Bar --- */ progress[value] {appearance:none; -webkit-appearance:none; width:100%; height:20px;} /* Remove default appearance */ progress[value]::-webkit-progress-bar {background-color:#EEEEEE; border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.25) inset;} /* Webkit: Style for Progress Element CONTAINER */ progress[value] {background-color:#EEEEEE; border-radius:2px; box-shadow:0 2px 5px rgba(0,0,0,.25) inset;} /* Fallback: Style for Progress Element CONTAINER */ progress[value]::-webkit-progress-value {background-image:-webkit-linear-gradient(-45deg, transparent 33%, rgba(0,0,0,.1) 33%, rgba(0,0,0,.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25)), -webkit-linear-gradient(left, #C20736, #C20736); border-radius:2px; background-size:35px 20px, 100% 100%, 100% 200%;} /* Webkit: Style for Progress Element VALUE */ progress[value]::-moz-progress-bar {background-image:-moz-linear-gradient(-45deg, transparent 33%, rgba(0,0,0,.1) 33%, rgba(0,0,0,.1) 66%, transparent 66%), -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(0,0,0,.25)), -moz-linear-gradient(left, #C20736, #C20736); border-radius:2px; background-size:35px 20px, 100% 100%, 100% 200%;} /* Mozilla: Style for Progress Element VALUE */ progress[value]::-webkit-progress-value {animation:animate-stripes 5s linear infinite; -webkit-animation:animate-stripes 150s linear infinite;} /* Webkit: Animation for Progress Element VALUE */ @-webkit-keyframes animate-stripes {100% {background-position:3000px 0;} } /* Webkit: Progress-Bar-Animation */ @keyframes animate-stripes {100% {background-position:3000px 0;} } /* Fallback: Progress-Bar-Animation */ .popup .progressValueContainer {float:right; font:inherit; font-size:14px; line-height:1.2rem; font-weight:400;}