body{
 background: #FFFFFF;
 }
 
a{
 text-decoration: none;
 }
 
.header,
 .footer{
 width: 700px;
 margin: 0 auto;
 padding: 60px 30px;
 }
 
.header hgroup h1{
 margin: 0;
 padding: 5px 0;
 color: rgb(220,220,220);
 text-shadow: 0 0 2px rgb(0,0,0);
 font-size: 40px;
 border-bottom: double 1px rgb(220,220,220) ;
 }
 
.header hgroup h2{
 margin:5px 0;
 color: rgb(220,220,220);
 text-shadow: 0 0 2px rgb(0,0,0);
 font-size: 22px;
 }
 
.footer{
 text-align: center;
 }
 
.footer h5{
 margin:5px 0;
 color: rgb(220,220,220);
 text-shadow: 0 0 2px rgb(0,0,0);
 font-size: 15px;
 }
 
.section{
 width: 700px;
 margin: 0 auto;
 padding: 15px 6px;
 background: rgb(235,235,235);
 }
 .article{
 display: inline-block;
 width: 210px;
 position: relative;
 vertical-align: top;
 padding: 0.5em;
 }
 
.article figure{
 width: 99%;
 }
 
.article figure{padding: 0; margin: 0;}
 
.article figure img{
 width: 100%;
 height: 180px;
 }
 
.article figure figcaption{
 padding: 5px;
 color: rgba(1,1,1,1);
font-family:Helvetica, univers_light, Arial, Helvetica, sans-serif;
font-size:14px;
 font-weight: normal;
 }

div.background img {
 margin: 10% auto 0 ;
 border: solid 1px #cecfd4 ;
 width: 500px;
 height: 350px;
 }
 div.background {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 text-align: center;
 background: rgba(0,0,0,0.8);
 }
 div.background:target {
 display: block;
 }
 /** IE no soporta :target, así que usaremos expresiones CSS **/
 div.background {
 display: expression((document.location.toString().split('#').slice(1) == this.
 id)?'block':'none');
 }

div.background .close{
 display: block;
 width: 500px;
 height: 0px;
 padding:0 10px 0 0;
 text-align: right;
 position: relative;
 color: #ffffff;
 font-size: 14px;
font-family:Helvetica, univers_light, Arial, Helvetica, sans-serif;
 margin: -30px auto 0;
 }

div.background .close:hover{
 font-size: 14px;
color: #cecfd4;
 }