<beginfold id='3'>/*</beginfold id='3'>
 * CSS Syntax Highlight Sample File (Standard)
 *
 * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
 * @keyframes annotations.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-16
 <endfold id='3'>*/</endfold id='3'>

<beginfold id='3'>/*</beginfold id='3'>
 * Block comment
 *
 * Alert keywords:
 * TODO BUG FIXME
 <endfold id='3'>*/</endfold id='3'>

@charset "UTF-8";

@import url("components/button.css");


<beginfold id='3'>/*</beginfold id='3'> Properties <endfold id='3'>*/</endfold id='3'>

html, body <beginfold id='1'>{</beginfold id='1'>
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    max-width: calc(100% - 300px);
    background: #fff000;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
<endfold id='1'>}</endfold id='1'>


<beginfold id='3'>/*</beginfold id='3'> Selectors <endfold id='3'>*/</endfold id='3'>

blockquote <beginfold id='1'>{</beginfold id='1'>
    margin: 0;
<endfold id='1'>}</endfold id='1'>

header #logo <beginfold id='1'>{</beginfold id='1'>
    width: 100px;
<endfold id='1'>}</endfold id='1'>

div#footer .link <beginfold id='1'>{</beginfold id='1'>
    color: blue;
<endfold id='1'>}</endfold id='1'>

sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='1'>{</beginfold id='1'>
    font-size: 20px;
<endfold id='1'>}</endfold id='1'>

sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='1'>{</beginfold id='1'>
    font-weight: bold;
<endfold id='1'>}</endfold id='1'>


<beginfold id='3'>/*</beginfold id='3'> Media Queries <endfold id='3'>*/</endfold id='3'>

@media print <beginfold id='4'>{</beginfold id='4'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 100%;
    <endfold id='1'>}</endfold id='1'>
<endfold id='4'>}</endfold id='4'>

@media screen and (min-width: 768px) <beginfold id='4'>{</beginfold id='4'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 600px;
    <endfold id='1'>}</endfold id='1'>
<endfold id='4'>}</endfold id='4'>

@media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='4'>{</beginfold id='4'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 720px;
    <endfold id='1'>}</endfold id='1'>
<endfold id='4'>}</endfold id='4'>


<beginfold id='3'>/*</beginfold id='3'> Fontface <endfold id='3'>*/</endfold id='3'>

@font-face <beginfold id='1'>{</beginfold id='1'>
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
<endfold id='1'>}</endfold id='1'>

<beginfold id='3'>/*</beginfold id='3'> Animation (Keyframes) <endfold id='3'>*/</endfold id='3'>

@keyframes slidein <beginfold id='1'>{</beginfold id='1'>
    from {
        margin-left: 100%;
        width: 300%;
    <endfold id='1'>}</endfold id='1'>

    to <beginfold id='1'>{</beginfold id='1'>
        margin-left: 0%;
        width: 100%;
    <endfold id='1'>}</endfold id='1'>
}


<beginfold id='3'>/*</beginfold id='3'> Region markers <endfold id='3'>*/</endfold id='3'>

<beginfold id='2'>/*BEGIN Comment */</beginfold id='2'>



<endfold id='2'>/*END Comment */</endfold id='2'>

