|
@import url(https://fonts.googleapis.com/css?family=Open+Sans); |
|
|
|
/* common colors */ |
|
:root { |
|
--accent-bg: #BBBBBB; |
|
--accent-color: #E52E62; |
|
} |
|
|
|
/* general text formatting */ |
|
h1, body, legend, p { |
|
font-family: "Open Sans", Verdana, Arial, sans-serif; |
|
} |
|
body { |
|
font-size: 100%; |
|
background-color: #E8EAF6; |
|
} |
|
|
|
/* header */ |
|
header { |
|
color: white; |
|
background-color: #1A237D; |
|
margin: 0em 4em 0.25em 4em; |
|
} |
|
header h1 { |
|
padding: 0.5rem 0 0 1.25rem; |
|
font-size: 2rem; |
|
font-weight: bold; |
|
} |
|
header p { |
|
font-size: 1rem; |
|
font-style: italic; |
|
margin: 0; |
|
padding: 0 0 1rem 1.25rem; |
|
} |
|
|
|
/* main article styling */ |
|
main { |
|
background-color: white; |
|
margin: 1em 4em 1em 4em; |
|
padding: 1em; |
|
} |
|
|
|
section { |
|
margin-bottom: 1em; |
|
padding: 0; |
|
width: 100%; |
|
} |
|
|
|
/** form styling */ |
|
legend { |
|
margin: 0; |
|
padding: 0; |
|
background-color: var(--accent-bg); |
|
color: #1A237D; |
|
text-transform: uppercase; |
|
width: 100%; |
|
} |
|
|
|
fieldset { |
|
margin: 0; |
|
padding: 0; |
|
background-color:#eae8e8; |
|
width: 100%; |
|
border: none; |
|
} |
|
|
|
form p { |
|
margin-top: 0.5em; |
|
} |
|
|
|
table { |
|
border: none; |
|
border-spacing: 0; |
|
width: 100%; |
|
margin: 0 auto; |
|
} |
|
|
|
table tbody td{ |
|
line-height: 1.5em; |
|
vertical-align: top; |
|
padding: 0.5em 0.75em; |
|
} |
|
|
|
/** buttons */ |
|
.box { |
|
border: 1pt solid var(--accent-bg); |
|
padding: 0.5em; |
|
margin-bottom: 0.4em; |
|
} |
|
.rectangle { |
|
background-color: var(--accent-bg); |
|
padding: 0.5em; |
|
} |
|
.rounded, .reset { |
|
border: 2px solid var(--accent-color); |
|
border-radius: 7px; |
|
text-align: center; |
|
font-weight: bold; |
|
padding: 0.5em 0 0.5em 0; |
|
margin: 0.3em; |
|
min-width: 9em; |
|
height: 3em; |
|
} |
|
.reset, .rounded:hover { |
|
background-color: transparent; |
|
color: var(--accent-color); |
|
border-color: var(--accent-color); |
|
} |
|
.rounded, .reset:hover { |
|
background-color: var(--accent-color); |
|
color: white; |
|
border-color: white; |
|
} |
|
button:hover { |
|
box-shadow: 2px 2px white; |
|
} |
|
|
|
/* -- star rating styling -- */ |
|
div.star_rating { |
|
float: left; |
|
} |
|
|
|
input.star { |
|
border: 0; |
|
width: 1px; |
|
height: 1px; |
|
overflow: hidden; |
|
position: absolute !important; |
|
clip: rect(1px 1px 1px 1px); |
|
clip: rect(1px, 1px, 1px, 1px); |
|
opacity: 0; |
|
float: right; |
|
} |
|
|
|
label.star { |
|
position: relative; |
|
float: right; |
|
color: #C8C8C8; |
|
} |
|
|
|
label.star:before { |
|
margin: 5px; |
|
content: "\f005"; |
|
font-family: FontAwesome; |
|
font-size: 1.5em; |
|
color: var(--accent-color); |
|
-webkit-user-select: none; /* Safari 3.1+ */ |
|
-moz-user-select: none; /* Firefox 2+ */ |
|
-ms-user-select: none; /* IE 10+ */ |
|
user-select: none; |
|
} |
|
|
|
input.star:checked ~ label.star:before { |
|
color: #FFC107; |
|
} |
|
|
|
label.star:hover ~ label.star:before { |
|
color: #ffdb70; |
|
} |
|
|
|
label.star:hover:before { |
|
color: #FFC107; |
|
} |