196 lines
2.1 KiB
CSS
196 lines
2.1 KiB
CSS
/*
|
|
Page Structure
|
|
*/
|
|
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: #333;
|
|
font-family: "Arial", sans-serif;
|
|
}
|
|
|
|
#wrap {
|
|
width: 80%;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
background: white;
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 0 0 10px 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#page {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
#header {
|
|
margin: 0;
|
|
padding: 1em;
|
|
background: #336699;
|
|
}
|
|
|
|
#header h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: white;
|
|
}
|
|
|
|
#footer {
|
|
width: 70%;
|
|
max-width: 750px;
|
|
color: #555;
|
|
margin: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#footer a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
#wrap {
|
|
margin: 0 0 10px 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
Common Elements
|
|
*/
|
|
|
|
p {
|
|
margin: 0;
|
|
padding: 10px 2em 10px 2em;
|
|
}
|
|
|
|
h2 {
|
|
color: #333;
|
|
font-weight: normal;
|
|
border-bottom: 1px solid #999;
|
|
padding-left: 10px;
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: white;
|
|
background: #369;
|
|
padding: 5px 1em 5px 1em;
|
|
margin: 0.25em;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
background: #036;
|
|
}
|
|
|
|
.long_button {
|
|
padding: 5px 40px 5px 40px;
|
|
}
|
|
|
|
#buttons {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
Tables
|
|
*/
|
|
|
|
.item_list {
|
|
padding: 0 3em 0 3em;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.item_list td, #item_list th {
|
|
font-size: 1em;
|
|
border: 1px solid #036;
|
|
}
|
|
|
|
.item_list td {
|
|
padding: 8px 7px 8px 7px;
|
|
}
|
|
|
|
.item_list th {
|
|
font-size: 1.1em;
|
|
text-align: left;
|
|
padding: 5px 7px 4px 7px;
|
|
background-color: #369;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.item_list tr.alt td {
|
|
color: #000000;
|
|
background-color: #EAF2D3;
|
|
}
|
|
|
|
#form_table {
|
|
margin-left: 3em;
|
|
width: 90%;
|
|
}
|
|
|
|
#form_table tr td:nth-child(1) {
|
|
width: 15%;
|
|
}
|
|
|
|
#form_table tr td:nth-child(2) {
|
|
width: 35%;
|
|
}
|
|
|
|
#form_table tr td:nth-child(3) {
|
|
padding: 10px;
|
|
width: 50%;
|
|
}
|
|
|
|
#forn_table input {
|
|
width: 100%;
|
|
}
|
|
|
|
#code_output {
|
|
width: 100%;
|
|
min-height: 200px;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
Jquery UI
|
|
*/
|
|
|
|
.ui-menu {
|
|
max-height: 300px;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
Home Page
|
|
*/
|
|
|
|
#btn_start {
|
|
display: none;
|
|
}
|
|
|
|
#js_message {
|
|
color: #369;
|
|
}
|
|
|