html, body { background: rgb(109, 79, 154); margin: 0; padding: 0; font-family: "Lucida Grande", "Segoe UI", "Trebuchet MS", Tahoma, Helvetica, Verdana, sans-serif; }
a img { border: none; }
img { max-width: 100%; }
#head, #footer { padding: 2em 10%; margin: 0; color: white; clear: both; }
#head:after, #footer:after, #content:after, #users li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#head, #footer, #content, #users li { _height: 1%; }
#head a, #footer a { color: white; }
#head { font-family: Impact; letter-spacing: 0.1em; padding-bottom: 1em; }
#head h1, #head p { margin: 0; padding: 0; }
#logo { float: right; font-size: 2em; text-transform: uppercase; }
#content { background: white; padding: 0.1em 10% 2em 10%;}
#content a { color: #5B1199; }
h2 { margin-top: 2em; }
.fr { float: right; margin: 0 0 2em 1em; }
.photo { border: 10px solid #eee; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
#users { list-style-type: none; margin-left: 0; padding-left: 0; }
#users img { float: left; margin: 0 2em 2em 0; border: 1px solid rgb(109, 79, 154); }
#users p { margin: 0; padding: 0; }
.we { font-family: Impact; font-weight: normal; letter-spacing: 0.1em; }

/* iPhone */
@media only screen and (max-device-width: 480px) {
   #logo { float: none; }
   body { font-size: 0.9em; }
   #head { text-align: center; padding-top: 1em; }
   #head, #footer, #content { padding-left: 5%; padding-right: 5%; }
   .fr { float: none; margin: 0; max-width: 90%; }
   #users img { margin: 0 1em 1em 0;  }
   #users p { clear: both; }
}