Team:Czech Republic/Template:Stylesheet
a {
color: #000000;
}
html {
font-family: Verdana, sans-serif; background-color: #EEEEEE;
}
main {
margin-left: 70px; margin-top: 90px;
}
h3 {
margin-top: 0; margin-bottom: 5px;
}
p, label {
margin-top: 2px; margin-bottom: 2px;
}
input[type="text"], input[type="number"] {
border: 1px solid #777777; border-radius: 4px; height: 25px; margin-bottom: 5px; vertical-align: middle; padding: 3px;
}
input[type="checkbox"] {
margin-bottom: 10px; vertical-align: middle;
}
textarea:focus, input[type="text"]:focus, input[type="number"]:focus, .resize:hover {
border-color: #000000; background-color: #E5E5E5;
}
/* PANEL -------------------------------------------------------------------*/
.panel_collapsed {
z-index: 2; position: fixed;
width: 69px; height: 100%;
border-right: 1px solid #777777;
left: 0; top: 0;
background-color: #D5D5D5;
}
.panel_expanded {
z-index: 2; position: fixed;
width: 300px; height: 100%;
border-right: 1px solid #000000;
left: 0; top: 0;
background: #D5D5D5;
}
- panel ul
{
list-style-type: none; padding: 0;
}
.features a, .about a {
text-decoration: none; display: block; padding: 8px 0 8px 10px; width: 290px;
}
.features, .about {
margin-top: 30%;
}
.features li {
font-size: 22px; padding: 0; border-top: 1px solid #000000; background-color: #EEEEEE;
}
.features li:hover, .about li:hover {
background-color: #E05454;
}
.features li:hover > a, .about li:hover > a {
color: #FFFFFF;
}
.about li {
font-size: 15px; padding: 0; border-top: 1px solid #000000; background-color: #D5D5D5;
}
.last {
border-bottom: 1px solid #000000;
}
- version
{
position: fixed; font-size: 15px; bottom: 15px; left: 15px;
}
- menu_button
{
width: 40px; height: 40px; cursor: pointer; display: block; margin-left: auto; margin-right: 15px; margin-top: 30px;
}
/* HEADER ---------------------------------------------------------------- */
- header
{ z-index: 1; position: fixed;
width: 100%; height: 88px; border-bottom: 1px solid #777777; left: 70px; top: 0; background: linear-gradient(to left, #D5D5D5, #FFFFFF, #FFFFFF, #D5D5D5);
}
- header_image
{
width: 375px; display: block; margin-left: auto; margin-right:auto;
}
- header_image img
{
margin-top: 10px; height: 70px; width: 375px;
}
/* CENTER ------------------------------------------------------------------*/
.center {
width: 70%; clear: both; margin-left: auto; margin-right: auto;
}
/* NAVIGATION ---------------------------------------------------------------- */
- analyzer_button, #gas_button, #randomizer_button
{
clear: both; margin: 20px 10px 10px 10px; float: right; background-color: #FFFFFF; padding: 10px 20px; border: 1px solid #E05454; border-radius: 10px;
}
- analyzer_button:hover, #gas_button:hover, #randomizer_button:hover
{
background-color: #FFE0E0;
}
- gas_button
{
float: left; padding: 5px 10px;
}
- analyzer_button:hover > #wheel, #gas_button:hover > #catcher, #randomizer_button:hover > #square
{
-webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running;
}
- wheel
{
-webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite; -ms-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite; animation: spin 3s linear infinite;
-webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
- catcher
{
-webkit-animation: flip 2s linear infinite; -moz-animation: flip 2s linear infinite; -ms-animation: flip 2s linear infinite; -o-animation: flip 2s linear infinite; animation: flip 2s linear infinite;
-webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
- square
{
-webkit-animation: wobble 0.5s linear infinite; -moz-animation: wobble 0.5s linear infinite; -ms-animation: wobble 0.5s linear infinite; -o-animation: wobble 0.5s linear infinite; animation: wobble 0.5s linear infinite;
-webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes flip {
100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@keyframes flip {
100% { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@-webkit-keyframes wobble {
0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 75% { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes wobble {
0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 75% { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
}
/* BUTTONS ------------------------------------------------------------*/
.button_big { background-color:#FFFFFF; color: #000000; font-size:18px; border-radius:5px; border: 1px solid #777777; width:160px; height:35px;
cursor: pointer;
}
.button_small { background-color:#FFFFFF; color:#000000; font-size:18px; border-radius:5px; border: 1px solid #777777; width:90px; height:26px;
cursor: pointer;
}
.button_big.red, .button_small.red {
border-color: #E05454;
}
.button_big.red:hover, .button_small.red:hover {
background-color: #FFE0E0; border-color: #E05454; border-width: 2px;
}
.button_big:hover, .button_small:hover {
background-color: #D5D5D5; border-color: #000000; border-width: 2px;
}