*{padding:0; margin:0;}

body {
   font-family:sans-serif; 
   background-color:#fff;
}

#header{
   background-color:#3C2F4D;
   height:50px;
   text-align:center;
   color:#fff;
   height:200px;
}

#content {
   width:700px;
   margin:0 auto;
}

.introwrap {
   background-color:#dccfed;
}
.introtext {
   font-family:'Palatino Linotype', ‘Book Antiqua’, Palatino, serif;
   text-align:center;
   font-size:120%;
   width:700px;
   margin:0 auto;
   padding:5px 0 10px 0;
   text-indent:215px;
}
.outrotext {
   font-family:‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
   text-align:center;
   font-size:120%;
   padding:5px 0 10px 0;
}
#footer {
   color:#fff;
   margin:0 auto;
   width:200px;
   font-size:90%;
   padding:20px 0;
}


div.wrapper{
   width:300px; 
   height:300px; 
   overflow:hidden; 
   margin:0 auto;
   border:2px solid #ccc;
   border-radius:3px;
   float:left;
   margin:23px;
}

div.caption {
   position:relative; 
   bottom:-120px;
   top:25px;
   text-align:center; 
   padding:10px; 
   min-height:120px; 
   color:#333; 
   font-size:80%;
   background:url('images/hoverbg.png');  
}
div.wrapper a {
   text-decoration:none;
}
div.caption h1 {
   color:#447;
   font-size:120%;
}

.like {
   padding-top:10px;
}
#footerwrap {
   background-color:#3C2F4D;
   clear:both;
}

#footer a {
   color:#fff;
}

@media only screen and (max-width: 700px) {
   #content {
      width:300px
   }
   div.wrapper {
      margin:0;
      margin-bottom:20px;
      margin-top:20px;
   }
   #header {
      height:190px;
   }
   #header img {
      width:100%;
   }   
   .introtext {
      width:600px;
      text-indent:170px;
   }
}
@media only screen and (max-width: 600px) {
   #header {
      height:170px;
   }
   .introtext {
      width:500px;
      text-indent:130px;      
   }

}
@media only screen and (max-width: 500px) {
   #header {
      height:150px;
   }
   .introtext {
      width:400px;
      text-indent:0;
   }
}
@media only screen and (max-width: 400px) {
   #header {
      height:120px;
   }
   .introtext {
      width:350px;
      text-indent:0;
   }
}
@media only screen and (max-width: 320px) {
   #header {
      height:100px;
   }
   .introtext {
      width:320px;
      text-indent:0;
   }
}