Initial commit

fileadmin/templates/css/startseite.css

@@ -0,0 +1,184 @@
+.intro {
+    width: 720px;
+    margin-bottom: 2em;
+}
+.indexbox {
+    width: 460px;
+    height: 310px;
+    float: left;
+    background-color: #eee;
+    padding: 10px 260px 10px 25px;
+    margin-bottom: 40px;
+    overflow: hidden;
+}
+.indexbox a {
+    color: #000;
+    text-decoration: none;
+}
+.indexbox a:hover {
+    color: #004766;
+}
+.indexbox.orange a:hover {
+    color: #c64117;
+}
+.indexbox.gelb a:hover {
+    color: #af8300;
+}
+.indexbox.gruen a:hover {
+    color: #2e7d31;
+}
+.indexbox a.button {
+    display: inline-block;
+    background: #008ecd;
+    padding: 5px 10px 3px;
+    border-bottom: 2px solid #004766;
+    font-weight: 500;
+    font-size: 17.5px;
+    text-align: center;
+    color: #fff;
+    width: 100%;
+}
+.indexbox a.button:hover {
+    background: #40aada;
+}
+.indexbox a.button:before {
+    content: '\f0a4';
+    font-family: "FontAwesome";
+    font-size: 20px;
+    margin-right: .5em;
+}
+.indexbox.blau {
+    margin-right: 40px;
+    background: url(../img/indexbox-blau.jpg) top left no-repeat;
+}
+.indexbox.orange {
+    background: url(../img/indexbox-orange.jpg) top left no-repeat;
+}
+.indexbox.gelb {
+    margin-right: 40px;
+    background: url(../img/indexbox-gelb.jpg) top left no-repeat;
+}
+.indexbox.gruen {
+    background: url(../img/indexbox-gruen.jpg) top left no-repeat;
+}
+#inhalt .indexbox h2 {
+    background: #008ecd;
+    color: #fff;
+    font-weight: 500;
+    font-size: 17.5px;
+    padding: 10px 15px;
+    margin: 0 -15px 20px;
+    position: relative;
+}
+#inhalt .indexbox.orange h2 {
+    background: #ff5722;
+    color: #000;
+}
+#inhalt .indexbox.gelb h2 {
+    background: #ffc107;
+    color: #000;
+}
+#inhalt .indexbox.gruen h2 {
+    background: #4baf4f;
+}
+#inhalt .indexbox h2:after {
+    content: '';
+    position: absolute;
+    display: block;
+    right: 0;
+    bottom: -18px;
+    width: 0;
+    height: 0;
+    border: 8px solid #008ecd;
+    border-color: #008ecd transparent transparent #008ecd;
+}
+#inhalt .indexbox.orange h2:after {
+    border-color: #ff5722 transparent transparent #ff5722;
+}
+#inhalt .indexbox.gelb h2:after {
+    border-color: #ffc107 transparent transparent #ffc107;
+}
+#inhalt .indexbox.gruen h2:after {
+    border-color: #4baf4f transparent transparent #4baf4f;
+}
+
+.indexbox ul {
+    list-style: none;
+    padding: 0;
+}
+.indexbox li {
+    padding-left: 15px;
+    position: relative;
+    margin-bottom: .25em;
+}
+.indexbox li:before {
+    content: '\f105';
+    font-family: "FontAwesome";
+    color: #004766;
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 5px;
+}
+.indexbox.orange li:before {
+    color: #c64117;
+}
+.indexbox.gelb li:before {
+    color: #af8300;
+}
+.indexbox.gruen li:before {
+    color: #2e7d31;
+}
+@media (max-width: 759px) {
+    .intro {
+        width: 240px;
+        float: right;
+    }
+    .indexbox.blau {
+        margin-top: 1em;
+    }
+}
+@media (max-width: 759px) {
+    .intro {
+        width: auto;
+        float: none;
+    }
+}
+
+@media (max-width: 479px) {
+    .intro {
+        display: none;
+    }
+    .indexbox {
+        width: 100%;
+        padding-right: 25px;
+        height: auto;
+        margin-bottom: 10px;
+    }
+    .indexbox.blau {
+        background: #008ecd;
+        margin-top: 0;
+    }
+    .indexbox.orange {
+        background: #ff5722;
+    }
+    .indexbox.gelb {
+        background: #ffc107;
+    }
+    .indexbox.gruen {
+        background: #4baf4f;
+    }
+    #inhalt .indexbox h2 {
+        background: none;
+        margin-left: 0;
+        margin-right: 0;
+        padding: 0;
+    }
+    #inhalt .indexbox h2:after {
+        display: none;
+    }
+    .indexbox a.button {
+        background: #fff;
+        color: #004766;
+    }
+}