518 lines
10 KiB
CSS
518 lines
10 KiB
CSS
:root {
|
|
--border-color: black;
|
|
--background-color: white;
|
|
--foreground-color: black;
|
|
--body-background-color: lightgrey;
|
|
--body-foreground-color: black;
|
|
}
|
|
|
|
a.date {
|
|
color: darkgrey;
|
|
font-size: 90%;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
::moz-selection {
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'ubuntu';
|
|
src: url('fonts/ubuntu.woff') format('woff');
|
|
}
|
|
@font-face {
|
|
font-family: 'ubuntubold';
|
|
src: url('fonts/ubuntubold.woff') format('woff');
|
|
}
|
|
input.bild {
|
|
border-radius: 2px;
|
|
padding: 3px;
|
|
border: 1px solid black;
|
|
background: linear-gradient(160deg,
|
|
#707070 0%,
|
|
#FFFFFF 30%,
|
|
#707070 100%
|
|
);
|
|
margin: 5px;
|
|
}
|
|
blockquote {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
margin:5px;
|
|
border-radius: 3px;
|
|
border-left: 2px solid black;
|
|
color: black;
|
|
background-color: lightgrey;
|
|
}
|
|
blockquote:before {
|
|
content: "<a>«";
|
|
}
|
|
blockquote:after {
|
|
content: "»";
|
|
}
|
|
input.bild:hover {
|
|
border-radius: 2px;
|
|
padding: 3px;
|
|
margin: 5px;
|
|
border: 1px solid black;
|
|
background: linear-gradient(160deg,
|
|
#7070FF 0%,
|
|
#FFFFFF 30%,
|
|
#7070FF 100%
|
|
);
|
|
}
|
|
input.bild:active {
|
|
text-decoration: none;
|
|
background: linear-gradient(160deg,
|
|
#4040EE 0%,
|
|
#EEEEEE 30%,
|
|
#4040EE 100%
|
|
);
|
|
border: 1px dotted blue;
|
|
}
|
|
.bild {
|
|
border: 1px solid var(--border-color);
|
|
background: linear-gradient(160deg,
|
|
#707070 0%,
|
|
#FFFFFF 30%,
|
|
#707070 100%
|
|
); padding: 10px;
|
|
margin: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
.bildnormal {
|
|
width:auto;
|
|
height: auto;
|
|
border: 1px solid var(--border-color);
|
|
background: linear-gradient(160deg,
|
|
#707070 0%,
|
|
#FFFFFF 30%,
|
|
#707070 100%
|
|
); padding: 10px;
|
|
margin: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
img#normal {
|
|
border-radius: 10px;
|
|
}
|
|
img#rounded {
|
|
border-radius: 25% 25% 25% 25%;
|
|
}
|
|
img#circle {
|
|
border-radius: 50%;
|
|
}
|
|
img#strange1 {
|
|
border-radius: 25% 75%;
|
|
}
|
|
img#strange2 {
|
|
border-radius: 75% 25%;
|
|
}
|
|
img#shield {
|
|
border-radius: 25% 25% 75% 75%;
|
|
}
|
|
img#house {
|
|
border-radius: 75% 75% 25% 25%;
|
|
}
|
|
canvas#map {
|
|
border-radius: 10px;
|
|
border: 1px solid black;
|
|
background: repeating-radial-gradient(
|
|
red,
|
|
red 20px,
|
|
white 40px,
|
|
white 60px
|
|
);
|
|
padding: 10px;
|
|
margin: 5px;
|
|
}
|
|
|
|
div.comment {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
margin:5px;
|
|
border-radius: 5px;
|
|
border: 1px solid black;
|
|
color: black;
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
div#breit {
|
|
width: 80%;
|
|
padding: 30px;
|
|
list-style: none;
|
|
float: left;
|
|
}
|
|
|
|
table{border-radius: 10px;
|
|
|
|
border: 1px solid black;
|
|
font-size:100%;
|
|
font-style: italic;
|
|
font-family: urw;
|
|
vertical-align:baseline;
|
|
background: white;
|
|
}
|
|
tr{border-radius: 10px;
|
|
padding: 10px;
|
|
border: 1px solid black;
|
|
font-size:100%;
|
|
font-style: italic;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
background: red;
|
|
}
|
|
|
|
a.link {
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
}
|
|
a.link:link {
|
|
text-decoration: none;
|
|
color: blue;
|
|
}
|
|
a.link:hover {
|
|
text-decoration: none;
|
|
border-bottom: 2px dotted blue;
|
|
}
|
|
a.link:active {
|
|
text-decoration: none;
|
|
transform: translateY(-2px) translateX(-2px);
|
|
text-shadow: 2px solid grey;
|
|
}
|
|
a.link:visited {
|
|
text-decoration: none;
|
|
color: purple;
|
|
border-bottom: 2px dotted purple;
|
|
}
|
|
th{
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid black;
|
|
font-size:100%;
|
|
font-style: italic;
|
|
font-weight:normal;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
}
|
|
input[type=text],textarea {
|
|
padding:5px;
|
|
border: 2px solid black;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
input[type=text]:hover,textarea:hover {
|
|
border: 2px solid skyblue;
|
|
transition: all 1s;
|
|
}
|
|
|
|
input[type=text]:focus,textarea:focus {
|
|
border: 2px solid lightblue;
|
|
transition: all 1s;
|
|
}
|
|
|
|
div.dot-container {
|
|
display: table;
|
|
margin: 0px auto;
|
|
margin-top: 5%;
|
|
color: rgba(0,0,0,0);
|
|
}
|
|
|
|
input.dot {
|
|
float:left;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: green;
|
|
border-radius: 50%;
|
|
background-color: gray;
|
|
border-width: 0px;
|
|
margin: 5px;
|
|
}
|
|
|
|
input.dot:hover {
|
|
color: grey;
|
|
background-color: white;
|
|
text-align: 50%;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
input.dot:active, input.dot:after {
|
|
color: lightgrey;
|
|
background-color: black;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
input.navigate {
|
|
font-family: ubuntubold;
|
|
font-size: 150%;
|
|
display: block;
|
|
height: 80%;
|
|
color: white;
|
|
border-radius: 2px;
|
|
background-color: grey;
|
|
border-width: 0px;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
vertical-align: center;
|
|
margin-top: 3.5%;
|
|
margin-bottom: 3.5%;
|
|
}
|
|
|
|
input.navigate:hover {
|
|
color: grey;
|
|
background-color: white;
|
|
text-align: 50%;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
input.navigate:active, input[type=button].navigate:after {
|
|
color: lightgrey;
|
|
background-color: black;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
|
|
button, input[type=submit] {
|
|
margin: 5px;
|
|
padding: 5px;
|
|
color: var(--foreground-color); background-color: var(--background-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
font-family: ubuntu;
|
|
}
|
|
button:hover,input[type=submit]:hover {
|
|
box-shadow: 2px 2px #666;
|
|
transform: translateY(-2px) translateX(-2px);
|
|
color: var(--background-color); background-color: var(--foreground-color);
|
|
transition: all 0.5s;
|
|
}
|
|
button:after, button:active, input[type=submit]:after, input[type=submit]:active {
|
|
box-shadow: -2px -2px #666;
|
|
transform: translateY(4px) translateX(4px);
|
|
color: var(--background-color); background-color: var(--foreground-color);
|
|
transition: all 1s;
|
|
}
|
|
th#overline {
|
|
font-weight:bold;
|
|
}
|
|
h1 {
|
|
text-align: left;
|
|
font-size:250%;
|
|
font-family: ubuntu;
|
|
font-style: bold;
|
|
vertical-align:baseline;
|
|
|
|
}
|
|
h2 {
|
|
text-align: left;
|
|
font-size:175%;
|
|
font-family: ubuntu;
|
|
font-style: bold;
|
|
vertical-align:baseline;
|
|
|
|
}
|
|
h3 {
|
|
text-align: left;
|
|
font-size:125%;
|
|
font-style: bold;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
text-decoration: underline;
|
|
|
|
}
|
|
a#u {
|
|
font-size:100%;
|
|
font-family: ubuntubold;
|
|
vertical-align:baseline;
|
|
}
|
|
a#t {
|
|
font-size:100%;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
}
|
|
a {
|
|
font-family: ubuntu;
|
|
}
|
|
a.t {
|
|
font-size:100%;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
}
|
|
u {
|
|
font-size:125%;
|
|
font-family: ubuntu;
|
|
text-decoration: underline;
|
|
vertical-align:baseline;
|
|
}
|
|
canvas#myCanvas {
|
|
border : 1px solid var(--border-color);
|
|
border-radius: 50px;
|
|
}
|
|
ul#t {
|
|
font-size:125%;
|
|
font-style: italic;
|
|
font-family: ubuntu;
|
|
vertical-align:baseline;
|
|
}
|
|
|
|
div.parent {
|
|
position: fixed;
|
|
display: block;
|
|
top: 10px;
|
|
align-content:center;
|
|
padding: 5% auto;
|
|
}
|
|
|
|
div.menu {
|
|
margin: 0 auto;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
align-content: center;
|
|
z-index: 0.5;
|
|
border : 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
color: #505050; background-color: #505050;
|
|
padding: 5px;
|
|
}
|
|
div.doc {
|
|
border-radius: 50px;
|
|
border: 1px solid var(--border-color);
|
|
font: normal 100.01% Helvetica, Arial, sans-serif;
|
|
color: white; background-color: #505050;
|
|
padding: 10px;
|
|
margin: 5% 10%;
|
|
}
|
|
|
|
body {
|
|
color: var(--body-foreground-color); background-color: var(--body-background-color);
|
|
}
|
|
|
|
ul#Navigation {
|
|
margin: 0; padding: 0;
|
|
text-align: center;
|
|
font-family: ubuntu;
|
|
}
|
|
|
|
ul#Navigation li {
|
|
list-style: none;
|
|
float: left;
|
|
width: 10.6em;
|
|
margin: 0; padding: 5px;
|
|
}
|
|
|
|
|
|
input.close {
|
|
float: right;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-radius: 50%;
|
|
border:1px solid red;
|
|
background-color: red;
|
|
color : white;
|
|
font-size: 150%;
|
|
}
|
|
input.close:hover {
|
|
box-shadow: 2px 2px #666;
|
|
transform: translateY(-2px) translateX(-2px);
|
|
color: red; background-color: white;
|
|
transition: all 0.5s;
|
|
}
|
|
input.close:active, input.close:after {
|
|
box-shadow: -2px -2px #666;
|
|
transform: translateY(2px) translateX(2px);
|
|
color: white; background-color: red;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.modal {
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 25px;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.6);
|
|
}
|
|
|
|
.modal-content {
|
|
vertical-align: top;
|
|
align-content: center;
|
|
color: var(--foreground-color);
|
|
box-shadow: 8px 8px rgba(0.6,0.6,0.6,0.4);
|
|
margin: auto;
|
|
width: 60%;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 2px dotted black;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
|
|
ul#Navigation a, ul#Navigation span {
|
|
display: block;
|
|
padding: 4px;
|
|
text-decoration: none; font-weight: bold;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
color: var(--foreground-color); background-color: var(--background-color);
|
|
}
|
|
|
|
code {
|
|
margin: 2px;
|
|
padding: 2px;
|
|
border-radius: 5px;
|
|
border-style: 1px solid black;
|
|
color: black;
|
|
background-color:#98FB98;
|
|
}
|
|
a#copyright {
|
|
font-family: sans;
|
|
font-size: 50%;
|
|
color: grey;
|
|
}
|
|
ul#Navigation span, li a#aktuell {
|
|
text-align: center;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--background-color); background-color: var(--foreground-color);
|
|
}
|
|
ul#Navigation a:hover, li a#aktuell {
|
|
text-align: center;
|
|
transform: translateY(-2px) translateX(-2px);
|
|
box-shadow: 2px 2px #666;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--background-color); background-color: var(--foreground-color);
|
|
transition: all 0.5s;
|
|
}
|
|
/*ul#Navigation a:hover , ul#Navigation a:after, li a#aktuell {
|
|
transition: all 1s;
|
|
text-align: center;
|
|
border-color: solid black;
|
|
border-left-color: solid black; border-top-color: solid black;
|
|
color: red; background-color: white;
|
|
}
|
|
ul#Navigation a:active {
|
|
border: 1px solid black;
|
|
box-shadow: -2px -2px #666;
|
|
transform: translateY(-2px) translateX(2px);
|
|
border-color: solid black;
|
|
border-left-color: solid black; border-top-color: solid black;
|
|
color: red; background-color: white;
|
|
}*/
|
|
ul#Navigation a:active, ul#Navigation a:after {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: -2px -2px #666;
|
|
transform: translateY(4px) translateX(4px);
|
|
color: var(--foreground-color); background-color: var(--background-color);
|
|
transition: all 1s;
|
|
}
|