/**
 *  @charset       utf-8
 *  @modified      January 29, 2011
 *  @description   Counting Sheep
 *  @author        Tohl SMALLFIELD
 */
/*------------------------------------------------------------------------------

                                reset
                                
------------------------------------------------------------------------------*/
body{
    margin: 0;
    padding: 0;
    background-color: #9c6;
    overflow: hidden;
}

/*-----  -----*/
section, section:before, section:after,
h1, h1:before, h1:after,
em, em:before, em:after,
p, p:before, p:after{
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}

/*-----  -----*/
section:before, section:after,
h1:before, h1:after,
em:before, em:after,
p:before, p:after{
    content: " ";
}

/*------------------------------------------------------------------------------

                                background-color
                                
------------------------------------------------------------------------------*/
section,
section:before,
h1,
h1:before,
h1:after,
em{
    background-color: #fff;
}

/*-----  -----*/
section:after,
em:before,
em:after,
p,
p:after,
p:before{
    background-color: #630;
}

/*------------------------------------------------------------------------------

                                border-radius
                                
------------------------------------------------------------------------------*/
em:before,
em:after{
    width: 3px;
    height: 6px;
    -webkit-border-radius: 2px;
    -moz-border-radius:    2px;
    border-radius:         2px;
}

/*-----  -----*/
p:after,
p:before{
    top: -1px;
    width: 4px;
    height: 4px;
    -webkit-border-radius: 2px;
    -moz-border-radius:    2px;
    border-radius:         2px;
}

/*-----  -----*/
section,
h1,
h1:before,
em,
p{
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}

/*-----  -----*/
section:before,
h1:after{
    -webkit-border-radius: 12px;
    -moz-border-radius:    12px;
    border-radius:         12px;
}

/*------------------------------------------------------------------------------

                                width/height
                                
------------------------------------------------------------------------------*/
h1,
h1:before,
em{
    width: 10px;
    height: 10px;
}

/*------------------------------------------------------------------------------

                                z-index
                                
------------------------------------------------------------------------------*/
section:after,
em:before,
em:after{
    z-index: 1;
}

section,
section:before,
h1,
h1:before,
h1:after,
em{
    z-index: 2;
}

p,
p:after,
p:before{
    z-index: 3;
}

/*------------------------------------------------------------------------------

                                
                                
------------------------------------------------------------------------------*/
section{
    top: 50%;
    left: 50%;
    width: 36px;
    height: 20px;
    cursor: move;
    margin-top:  -10px;
    margin-left: -18px;
    -webkit-box-shadow: 0 10px 3px rgba(0, 0, 0, .2);
    -moz-box-shadow:    0 10px 3px rgba(0, 0, 0, .2);
    box-shadow:         0 10px 3px rgba(0, 0, 0, .2);
}

section:before{
    top: -4px;
    left: 18px;
    width: 20px;
    height: 20px;
}

section:after{
    top: 8px;
    left: -5px;
    width: 5px;
    height: 1px;
    -webkit-transform: rotate(-30deg);
    -moz-transform:    rotate(-30deg);
    transform:         rotate(-30deg);
}

/*-----  -----*/
h1{
    top: -2px;
    left: 4px;
}

h1:before{
    top: 5px;
    left: -6px;
}

h1:after{
    top: -1px;
    left: 1px;
    width: 24px;
    height: 24px;
}

/*-----  -----*/
em{
    top: 15px;
    left: -1px;
}

em:before{
    top: 7px;
    left: 2;
    -webkit-transform: rotate(10deg);
    -moz-transform:    rotate(10deg);
    transform:         rotate(10deg);
}
em:after{
    top: 8px;
    left: 6px;
}
em:last-child{
    left: 20px;
    -webkit-transform: scale(-1,1);
    -moz-transform:    scale(-1,1);
    transform:         scale(-1,1);
}

/*-----  -----*/
p{
    top: -2px;
    right: -5px;
    width: 10px;
    height: 13px;
    -webkit-transform: rotate(-25deg);
    -moz-transform:    rotate(-25deg);
    transform:         rotate(-25deg);
}
p:after{
    right: -1px;
}
p:before{
    left: -1px;
}

/*------------------------------------------------------------------------------

                                meter
                                
------------------------------------------------------------------------------*/
meter{
    display: block;
    width: auto;
    height: 10px;
    margin: 5px;
    border: 1px solid #693;
    border-style: none;
}