03_dom/uebungen/u05_tasse-01001/assets/css/styles.css

@@ -0,0 +1,266 @@
+/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
+
+/* ---------------- CSS-Reset ------------------- */
+html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
+	margin: 0px;
+	padding: 0px;
+	border: 0px none;
+	font-weight: normal;
+	font-style: inherit;
+	font-family: inherit;
+	font-variant: inherit;
+	text-decoration: none;
+	table-layout: inherit;
+}
+
+
+/* ---------------- Body / HTML ------------------- */
+
+html {
+    font-size: 100%;
+    background-color: #fffef7;
+}
+
+body {
+		font-family: Helvetica, Arial, sans-serif;
+		font-size: 1.2em;
+		font-weight: normal;
+		color: black;
+		margin: 0rem auto 2rem auto;
+}
+
+/* ---------------- layout ------------------- */
+
+header {
+
+    background: url(../img/js_header.png) left top no-repeat transparent;
+    background-size: cover;
+    height: 250px;
+    min-width: 850px;
+}
+
+header:after {
+    content: ' ';
+    display: block;
+    height: 250px;
+background: rgba(255,254,247,0);
+background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
+background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
+}
+
+main,
+footer {
+    width: 70%;
+    margin: 3rem auto;
+    min-width: 850px;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+
+
+
+
+/* ---------------- Content ------------------- */
+
+
+
+h1 {
+    color: #93412b;
+    font-size: 3em;
+	margin-bottom: 20px;
+	font-weight: bold;
+}
+
+
+h2 {
+    color: #93412b;
+	font-size: 2.5em;
+	margin-bottom: 15px;
+}
+
+h3 {
+    color: #93412b;
+	font-size: 2em;
+	margin-bottom: 10px;
+}
+
+p {
+	line-height: 15px;
+	margin-bottom: 15px;
+	line-height: 1.7em;
+}
+
+.cited {
+    font-style: italic;
+    font-size: .8em;
+}
+
+.u {text-decoration: underline;}
+.b {font-weight: bold;}
+.i {font-style: italic}
+.align_right {text-align: right;}
+.align_left {text-align: left; margin-right: 10px;}
+.align_center {text-align: center;}
+.float_left {float: left;}
+.float_right {float: right;}
+.clear_both {clear: both;}
+strong {font-weight: bold;}
+.special { color: #b7595b; font-weight: bold; }
+.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
+.gray {color: gray;}
+
+/* Links */
+main a:link,
+main a:visited {
+	color: #eb690b;
+	font-weight: bold;
+}
+
+main a:focus,
+main a:hover,
+main a:active {color: #eb690b;}
+
+ul {
+    list-style-position: outside;
+    margin-bottom: 20px;
+    padding-left: 22px;
+}
+
+ol {
+    margin-bottom: 20px;
+    padding-left: 30px;
+}
+
+li {
+    line-height: 1.4em;
+}
+
+
+/* ------- Article ------- */
+
+
+h1 {
+    color: #93412b;
+    font-size: 2.7em;
+	margin-bottom: 20px;
+}
+
+#buy_form input[type=button] {
+    display: inline-block;
+    padding: 1px 20px 3px 20px;
+    background-color: #93412b;
+    color: white;
+    border: 1px solid white;
+    font-size: 1em;
+    height: 32px;
+}
+
+#buy_form input[type=button]:hover {
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+}
+
+#buy_form select {
+    display: inline-block;
+    font-size: 1em;
+    background-color: white;
+    color: #93412b;
+    border: 1px solid #93412b;
+    height: 32px;
+}
+
+
+/* ------- Chat ------- */
+
+
+#chat {
+    width: 100%;
+    background-color: white;
+    border: 1px solid #9c352f;
+    height: 20rem;
+    position: relative;
+
+}
+
+#chat_window {
+    background-color: white;
+    width: 85%;
+    float: left;
+    height: 95%;
+}
+
+#chat_history {
+    position: absolute;
+    bottom: 8%;
+    max-height: 92%;
+    padding: 0px 0px 5px 7px;
+}
+
+#chat_history p {
+    font-size: .6em;
+    margin: 0;
+}
+
+#chat_text {
+    height: 8%;
+    position: absolute;
+    bottom: 0;
+    width: 85%;
+}
+
+#chat_text input {
+    width: 98%;
+    display: block;
+    margin: auto;
+}
+
+#chat_members {
+    list-style-type: none;
+    height: 100%;
+    width: 15%;
+    margin-left: 85%;
+    border-left: 1px solid #9c352f;
+    text-align: right;
+    box-sizing: border-box;
+    min-width: 100px;
+    font-size: .8em;
+    padding-top: 5px;
+
+}
+
+#chat_members li {
+    line-height: 1.2em;
+    padding: 5px 10px 2px 15px;
+}
+
+
+#chat_members .highlighted {
+    background-color: #c14d45;
+    color: white;
+}
+.chat_member {font-weight: bold;}
+.chat_member1 { color: #3626c8;}
+.chat_member2 { color: #e38d0b;}
+
+#member_search {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 15%;
+    height: 8%;
+}
+
+#member_search input {
+    width: 88%;
+    display: block;
+    margin: auto;
+    text-align: right;
+}