+* {
+ box-sizing: border-box;
+}
+
.enclose {
- text-align: center;
- min-height: 500px;
- background: url(../brackets.png) no-repeat 50% 0;
- margin-top: 1em;
+ height: 450px;
+ background: url("../brackets.png") no-repeat 50% 0;
+ margin: 1em 0;
background-size: auto 450px;
+ display: flex;
+ flex-direction: column;
}
.enclosed {
- margin-top: 70px;
- display: inline-block;
- text-align: left;
max-width: 300px;
- background-color: rgb(247, 247, 247);
- background-color: rgba(247, 247, 247, .5);
+ margin: auto;
}
a {
}
-form p {
- margin: 0;
-}
-form label, form input {
+label, input, button, textarea {
display: block;
width: 100%;
}
-#login-form input {
+
+.enclosed input {
font-size: 1.75em;
margin-bottom: .4em;
+ width: 100%;
+}
+.enclosed button {
+ font-size: 1.75em;
+ width: 100%;
+ margin-bottom: 0;
+}
+.enclosed p {
+ margin-bottom: 0;
+}
+h1 {
+ font-size: 1.75em;
+ margin: 0 0 16px;
}
-
-
-
-
html, body {
margin: 0;
padding: 0;
- height: 100%;
}
body {
background-color: #F7F7F7;
margin: auto;
}
-
#details {
- margin: 1em;
- float: left;
- max-width: 75%;
+ margin: 1em 0;
+ padding: 0 2em;
}
#details form table th {
color: green;
}
-#details h2 {
- margin-top: 0;
-}
-
-.user_avatar {
- float: left;
- margin: 1em;
- max-width: 20%;
- text-align: center;
+.menu {
+ margin: 1em 0;
+ text-align: center;
}
-
-.user_avatar img {
- box-shadow: 0 0 .2em black;
+.menu .active {
+ font-weight: bold;
+ color: black;
}
+@media screen and (min-width: 620px) {
+ .menu {
+ float: left;
+ max-width: 20%;
+ }
-#services-list {
- clear: both;
- border-top: 1px solid black;
+ #details {
+ float: right;
+ width: 80%;
+ }
}
-#services-list h1 {
- margin-bottom: 0;
+.menu img {
+ box-shadow: 0 0 .2em black;
}
-#services-list img {
- width: 90px;
- height: 50px;
- margin: 10px 10px 0 0;
+code.key {
+ word-wrap: break-word;
}