@charset "utf-8";

/*------------------------------------*\
    $MAIN
    Profile page layout: avatar on the left,
    content (name, bio, links) on the right.
    Supports multiple people per profile page.
\*------------------------------------*/
body {
	margin: 10%;
}
.avatar {
	float:  left;
	margin: 0 40px 20px 0;
}
.avatar img {
	max-width:     200px;
	max-height:    200px;
	border-radius: 125px;
}
.content {
	float:         left;
	max-width:     800px;
	width:         100%;
	padding-right: 25px;
}
.title {
	font-size:   48px;
	font-weight: normal;
	line-height: 1;
}

/*------------------------------------*\
    $SOCIAL ICONS
    Used on some profile pages for links to
    Twitter, LinkedIn, etc. Images live in /bioimages/.
\*------------------------------------*/
.social-icons li {
	display: inline;
}
.social-icons a {
	display:      inline-block;
	margin-right: 10px;
	text-indent:  -9999px;
}
.twitter {
	background-image: url('../bioimages/twitter.png');
	width:  20px;
	height: 17px;
}
.facebook {
	background-image: url('../bioimages/facebook.png');
	width:  10px;
	height: 19px;
}
.googleplus {
	background-image: url('../bioimages/googleplus.png');
	width:  21px;
	height: 19px;
}
.linked-in {
	background-image: url('../bioimages/linked-in.png');
	width:  19px;
	height: 19px;
}
.dribbble {
	background-image: url('../bioimages/dribbble.png');
	width:  21px;
	height: 19px;
}
.instagram {
	background-image: url('../bioimages/instagram.png');
	width:  20px;
	height: 19px;
}
.flickr {
	background-image: url('../bioimages/flickr.png');
	width:  20px;
	height: 9px;
}

/*------------------------------------*\
    $TYPOGRAPHY
\*------------------------------------*/
p, ul, ol, dl, .title {
	margin-bottom: 20px;
}
p {
	font-weight: normal;
}
ul, ol, dl {
	list-style-type: none;
}
a {
	color:       #339999;
	font-weight: normal;
}
a:hover, a:focus {
	color:      #95a4a9;
	transition: color 0.2s ease;
}

/*------------------------------------*\
    $MISC
    Hover fade effect on images and social icons.
\*------------------------------------*/
a img:hover, .social-icons a:hover {
	opacity:    0.85;
	transition: opacity 0.2s ease;
}

/*------------------------------------*\
    $MOBILE
    Stack avatar above content and shrink it
    on narrow screens (phones, small tablets).
\*------------------------------------*/
@media only screen and (max-width: 720px) {
	.avatar, .content {
		float: none;
	}
	.avatar img {
		max-width:  125px;
		max-height: 125px;
	}
	.content {
		width: 100%;
	}
}

/*------------------------------------*\
    $LIST DECORATION
    Profile pages use a small wave image as a
    bullet point for <ul> lists (overrides the
    list-style-type: none above).
\*------------------------------------*/
ul {
	list-style-image: url('../images/small_wave_3.png');
	margin-left:      50px;
}
li {
	margin-bottom: 5px;
}