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;

}

1. 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;

}

1. version

{

   position: fixed;
   font-size: 15px;
   bottom: 15px;
   left: 15px;

}

1. menu_button

{

   width: 40px;
   height: 40px;
   cursor: pointer;
   display: block;
   margin-left: auto;
   margin-right: 15px;
   margin-top: 30px;

}

/* HEADER ---------------------------------------------------------------- */

1. 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);

}

1. header_image

{

   width: 375px;
   display: block;
   margin-left: auto;
   margin-right:auto;

}

1. header_image img

{

   margin-top: 10px;
   height: 70px;
   width: 375px;

}

/* CENTER ------------------------------------------------------------------*/

.center {

   width: 70%;
   clear: both;
   margin-left: auto;
   margin-right: auto;

}

/* NAVIGATION ---------------------------------------------------------------- */

1. 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;

}

1. analyzer_button:hover, #gas_button:hover, #randomizer_button:hover

{

   background-color: #FFE0E0;

}

1. gas_button

{

   float: left;
   padding: 5px 10px;

}

1. 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;

}

1. 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;

}

1. 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;

}

1. 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;

}