body{
  margin: 0;
  padding: 0;
  background: #444;
  font-family: "Open Sans";
  color: #333;
}
.container{
position: absolute;
top: 50%;
width: 100%;
margin-top: -100px;
height: 200px;
}
.container:before{
content: "";
position: absolute;
top: 0;
width: 100%;
height: 5px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAMklEQVQIW2P8DwTXa8wYQECz5RSYZrxWbfofWQAuCFMBEgDpYgRpB+uBCoBVwgSRzQUASZMdBECj4mEAAAAASUVORK5CYII=) repeat !important;

}
.container:after{
content: "";
width: 100%;
height: 100%;
background: #000;
opacity: 0.1;
position: absolute;
left: 0;
top: 0;
display: block;
}
.container .logo{
width: 450px;
position: absolute;
left: 50%;
top: -80px;
margin-left: -225px;
}
.container .box{
width: 450px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -225px;
}
.container .box .icon{
float: left;
margin-right: 16px;
padding: 61px 0 60px;
border-right: solid 1px #666;
display: block;
}
.container .box .icon i{
color: #999;
font-size: 77px;
}
.container .box .content{
overflow: hidden;
}
.container .box .content h2{
margin: 20px 0 10px;
font-size: 22px;
color:#DDD;
}
.container .box .content p{
margin: 0;
color:#AAA;
}
.container .box .content pre{
border-top: solid 1px #DDD;
padding: 5px 0 0;
margin: 10px 0 0;
color: #999;
}
.copyright{
font-size: 12px;
text-align: center;
position: absolute;
width: 100%;
bottom: -25px;
color: #999;
}
.copyright a{
text-decoration: none;
color: #AAA;
}