h2.big { font-size: 120%; margin: 0 0 0.5em 0; }
a:hover { text-decoration: underline; }
div.method_rec { background: #FFFCE4; border-color: #00548B; }
h3.method_rec  { color: #00548B; }
.color     { color: #F04E23; }
.quecolor     { color: #00548B; }
hr.color { border-color: #00548B; }
div.blocks { background: #FFFCE4; border-color: #00548B; }
h3.blocks  { color: #00548B; }
ul.galka   { text-align: justify; list-style:square inside url(/images/galka.gif); margin: 0; }
.initial::first-letter { color: #DA1F3D; }

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.saving span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

img[style*="float: right;"] {
    margin-left: 1em;
}

ul ~ div.method_rec {
    margin-top: 0px;
}

table ~ div.method_rec {
    margin-top: 0px;
}

div ~ div.method_rec {
    margin-top: 10px;
}

.GreenNumbers {
    list-style-type: none;
}
.GreenNumbers ol {
    margin-left: 2em;
}
.GreenNumbers li {
    counter-increment: count-me;
}
.GreenNumbers li::before {
    content: counter(count-me) ". ";
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -1.3em;
    top: .05em;
    color: #960F18;

    font-weight: bold;
}

ol {
  margin: 0 0 0em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 0em;
  text-indent: -1.6em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

@font-face {
    font-family: "My Custom Font"; src: url(/fonts/monotype_corsiva.ttf) format("truetype"); }
.customfont { font-family: "My Custom Font", Verdana, Tahoma; }

@font-face {
	font-family: "Blogger Sans"; src: url(/fonts/Blogger_Sans.otf) format("opentype"); }
.blogger { font-family: "Blogger Sans"; font-size: 14pt; }

@font-face {
	font-family: "Adventure"; src: url(/fonts/adventure.ttf) format("truetype"); }
.adventure { font-family: "Adventure"; font-size: 14pt; }

.fb-share-button {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}

ul.cube { font-family: "Comic Sans MS"; list-style: none; text-align: justify; margin: 0; margin-bottom: 1.0em; padding-left: 0; }
li.cube { font-style: normal; font-weight: normal; padding-left: 1em; margin-bottom: -0.3em; text-indent: -1em; }
li.cube:before { content: "\2751"; font-size: 14pt; padding-right: 5px; }