<div class="paper"><h1>Sample Box</h1> <br>
<img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.
</p>
<br />
<a href="http://www.designshock.com/"> DesignShock.com </a>
</div>
body {
font-size: 11px;
font-family: 'Open Sans', sans-serif;
color: #4A4A4A ;
text-align: center;
}
.paper {
margin: 20px auto;
display: block;
width: 400px;
height: 370px;
line-height: 20px;
padding-top: 38px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #F0F0F0;
/* gradients - second red border, first red border, top white space, blue lines */
background-image: -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-image: linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
background-size: 1px, 1px, auto, auto 20px;
background-repeat: repeat-y, repeat-y, no-repeat, repeat;
background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.paper:first-line {
line-height: 33px;
vertical-align: baseline;
}
.paper:after {
content: '';
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
background: rgba(255,255,255,1);
top: 64px;
margin-left: 3px;
z-index: 10;
-webkit-box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
-moz-box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
box-shadow:
inset 2px 2px 5px rgba(125,125,125,1),
2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),
2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}
.paper:focus {
outline: none;
}
.paper img {
width: 80%;
margin-top: 0px;
}
p{
text-align: justify;
margin:10px 40px 0;
}
h1{
font-size: 20px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a{
text-decoration: none;
color: #4A4A4A !important;
}
a:hover{
text-decoration: underline;
color: #6B6B6B !important ;
}