/* Clipboard and notepaper_____________________________________________________________*/
.clipboard
{
    margin: 21px auto 0px auto;
    position: relative;
    height: 445px;
    width: 420px;
    z-index: 1000;
    text-align: center;
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0, 0.4);
       -moz-box-shadow: 4px 4px 4px rgba(0,0,0, 0.4);
            box-shadow: 4px 4px 4px rgba(0,0,0, 0.4);
    -webkit-filter: blur(0px);
    /* This code tilts the clipboard at a slight angle. But the slanted lines don't render well on Chrome! */
/*    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/
/*    -webkit-transform: rotate(-2deg);
       -moz-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
         -o-transform: rotate(-2deg);
            transform: rotate(-2deg); */
}

.clippad
{
    top: 18px;
    left: 13px;
    width: 360px;
    height: 385px;
    padding-top: 25px;
    border: 1px solid #C0C0C0;
    -webkit-box-shadow: 1px 1px 0px #FFF, 2px 2px 0px #C0C0C0, 3px 3px 0px #FFF, 4px 4px 0px #C0C0C0;
       -moz-box-shadow: 1px 1px 0px #FFF, 2px 2px 0px #C0C0C0, 3px 3px 0px #FFF, 4px 4px 0px #C0C0C0;
            box-shadow: 1px 1px 0px #FFF, 2px 2px 0px #C0C0C0, 3px 3px 0px #FFF, 4px 4px 0px #C0C0C0;
    
}

.sheet
{
    top: 18px;
    left: 30px;
    width: 350px;
    height: 410px;
    margin-top: 22px;
    padding-top: 0px;
    -webkit-box-shadow: 0 5px 10px #777;
       -moz-box-shadow: 0 5px 10px #777;
            box-shadow: 0 5px 10px #777;
}
.notepaper
{
    position: absolute;
    background-color: #fff;
    z-index: 999;
    text-align: left;
    font: normal normal normal 16px Ampersand;
    line-height: 20px;
    padding-left: 27px;
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(#d9eaf3 0%, #fff 8%) 0 4px;
    background:    -moz-linear-gradient(#d9eaf3 0%, #fff 8%) 0 4px;
    background:     -ms-linear-gradient(#d9eaf3 0%, #fff 8%) 0 4px;
    background:      -o-linear-gradient(#d9eaf3 0%, #fff 8%) 0 4px;
    background:         linear-gradient(#d9eaf3 0%, #fff 8%) 0 4px;
    -webkit-background-size: 100% 20px;
       -moz-background-size: 100% 20px;
        -ms-background-size: 100% 20px;
         -o-background-size: 100% 20px;
            background-size: 100% 20px;
}

.notepaper::before 
{   /*red margin line */
    content: '';
    position: absolute;
    width: 0px;
    top: 0;
    left: 30px;
    bottom: 0;
    border-left: 1px solid;
    border-color: transparent #F0D6D5;
}

.holes
{
    z-index: 10012;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 5px;
    background-color: #334E80;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 0px #666, inset 3px 3px 0px #CCC, inset 4px 4px 0px #666, inset 5px 5px 6px rgba(0,0,0, 0.7);
       -moz-box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 0px #666, inset 3px 3px 0px #CCC, inset 4px 4px 0px #666, inset 5px 5px 6px rgba(0,0,0, 0.7);
            box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 0px #666, inset 3px 3px 0px #CCC, inset 4px 4px 0px #666, inset 5px 5px 6px rgba(0,0,0, 0.7);
}

.hole
{
    z-index: 10012;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 5px;
    background: #FFF url(Images/foil.png) repeat top left;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 3px rgba(0,0,0, 0.6);
       -moz-box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 3px rgba(0,0,0, 0.6);
            box-shadow: inset 1px 1px 0px #CCC, inset 2px 2px 3px rgba(0,0,0, 0.6);
}

.scroll         {position: relative; height: 100%; overflow: auto;}
.htop           {top: 120px;}
.hbottom        {bottom: 120px;}
.clipimg        {z-index: 10011; position: relative; left: 0px; top: -20px;}
.author         {margin-top: -3px; padding: 0px; text-align: right; color: #93A923; font-size: 1.2em; display: block;}
.comment        {margin-top: 20px;}   
.pushpin        {position: absolute; top: -8px; left: -9px;}