body {
	background-color: #fafaf2;
    text-align: center;
	margin-top: 5px;
	font-family: 'Roboto Slab', Verdana;
	font-size: 100%;
}
#wrapper {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}
a img { border: none; }
/* a:focus { overflow: hidden; } */
a:hover, a:active { outline: none; }
.thumb, .me {
    position: relative;
	float: left;
	margin: 5px;
}
.me { 
    background-color: #33ccff; 
    width: 190px;
	height: 190px;
	padding: 0;
	color: #fff;
}
.thumb { 
    background-color: #ff0099; 
    width: 190px;
	height: 190px;
}
.thumb:last-child { margin-bottom: 10px; }
.thumb span {
	display: block;
	position: absolute;
	background-color: #33ccff;
	width: 180px;
	height: 180px;
	left: 0;
	top: 0;
	padding: 5px;
	opacity: 0.9;
	color: #000;
	line-height: 1.6em;
}
.thumb a { text-decoration: none; } /* for ie6+7 */
#who   { background: url(images/helen-natasha-moore.jpg) top left no-repeat; }
#where { background: url(images/map-brighton.jpg) top left no-repeat; }

p { 
    margin: 0;
	padding: 0;
    height: 63px;
	font-size: 1.3em;
	color: #fff;
}
p.head {
    background-color: #444;
	line-height: 2.8em;
	padding-left: 5px;
}
#tel {
	padding-left: 5px;
	padding-top: 17px;
}
.me p a {
    display: block;
	padding-left: 5px;
    height: 64px;
    text-decoration: none;
	color: #fff;
	line-height: 2.8em;
	border-bottom: 2px dotted #fff;
}
.twolines, .me p a.twolines { line-height: 1.1em; }
p:first-child a { border-bottom: 2px #fff dotted; }
#p_comp  { line-height: 1em; }
#p_comp a { 
    padding-top: 8px; 
	border-bottom: 0; 
	height: 56px; 
}
.me p a:visited,
.me p a:hover,
.me p a:active { color: #fff; }
/*.me p a:hover { background-color: #ff0099; }*/
.me p a:hover { background-color: #888; }

#who p {
	position: absolute;
	top: 128px;
	background-color: #333;
    height: 56px;
	width: 185px;
	padding-left: 5px;
	padding-top: 6px;
}
#icons {
	position: absolute;
	width: 190px;
    height: 64px;
	top: 126px;
}
#icons a { 
    display: block;
    float: left; 
	height: 64px;	
}
#icons #facebook { background: url('images/icon-facebook.gif') left no-repeat; width: 63px; }
#icons #twitter  { background: url('images/icon-twitter.gif') left no-repeat; width: 64px; }
#icons #linkedin { background: url('images/icon-linkedin.gif') left no-repeat; width: 63px; }

#icons #facebook:hover { background: url('images/icon-facebook.gif') right no-repeat; }
#icons #twitter:hover  { background: url('images/icon-twitter.gif') right no-repeat; }
#icons #linkedin:hover { background: url('images/icon-linkedin.gif') right no-repeat; }


@media /* (min-device-width:1024px) and (max-width:989px), doesn't allow for netbook's vertical taskbar */
       (min-device-width:1024px) and (max-width:940px), /* 950px allows for netbook's vertical taskbar */
       screen and (max-device-width:480px), 
	   (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
    #wrapper { width: 400px; }
}
@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
    #wrapper { width: 200px; }
}