
/* @group Basic Elements */
	
	body {
		background-color: rgb(245,245,245);
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		margin: 0;
		padding: 0;	
	}
	
	a {
		color: rgb(0,158,187);
	}
	
	a:hover {
		color: rgb(20,178,207);
	}
	
	h1,h2,h3,h4,h5,h6 {
		margin: 0;
		padding: 0;
	}
	
	h6 {
		font-size: 16px;
	}
	
	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

/* @end */

/* @group Button */  
	
	.btn {
		background-color: rgb(0,158,187);
		border: 1px solid rgb(0,138,167);
		border-radius: 6px;
		box-shadow: inset 0 1px 0 0 rgba(255,255,255,.4);
		color: rgb(255,255,255);
		display: inline-block;
		font-size: 1.2em;	
		font-weight: bold;
		padding: .5em 1em;
		text-decoration: none;
		text-shadow: 0 -1px 0 rgba(0,0,0,.4);
	}
	
	.btn:hover {
		background-color: rgb(0,178,207);
		color: rgb(255,255,255);
	}
	
	.btn:active {
		background-color: rgb(0,128,147);
		box-shadow: inset 0 0 6px 1px rgba(0,0,0,.2);
	}
	
/* @end */

/* @group Layout */

	.contact-card, 
	.provided-by {
		margin: auto;
	}
	
	.contact-card {
		background-color: rgb(255,255,255);
		border: 1px solid rgb(200,200,200);
		border-radius: 24px;
		box-shadow: 0 1px 0 0 rgb(190,190,190), 0 2px 5px 0 rgba(0,0,0,.5), 0 8px 10px 0 rgba(0,0,0,.2);
		color: rgb(120,120,120);
		margin: 20px;
		position: relative;
	}
	
	.box {
		display: table-cell;
		padding: 20px;
		vertical-align: top;
	}
	
	.box.contact-pic {
		background-color: rgb(230,230,230);
		border-radius: 24px 0 0 24px;
	}
	
	.column {
		display: table-cell;
		padding: 0 20px;
	}
	
	.column:nth-child(2) {
		width: 30%;
	}
	
	.contact-pic > img {	
		border-radius: 6px;
		height: 100px;
		width: 100px;
	}
	
	.identity,
	.demographics,
	.social,
	.other-orgs,
	.klout,
	.klout-topics {
		margin-bottom: 20px;
	}
	
	.provided-by {
		color: rgb(140,140,140);
		padding: 20px;
		text-align: center;
	}
	
	.provided-by h6 {
		font-weight: normal;
		padding-bottom: .5em;
	}

/* @end */

/* @group identity */

	.identity-fullname {
		font-size: 1.6em;
		font-weight: bold;
	}
	
	.identity-title {
		font-size: 1.2em;
		font-style: italic;
		font-weight: normal;
	}
	
	.identity-org {
		font-size: 1.2em;
		font-weight: bold;
	}

/* @end */

/* @group Social */

	.social > li {
		display: inline-block;
	}

/* @end */

/* @group Klout */

	.klout-topics .topic {
		background-color: rgb(230,230,230);
		border-radius: 100px;
		display: inline-block;
		font-size: .825em;
		margin-right: 10px;
		margin-top: 10px;
		padding: 5px 10px;
	}
	
	.klout-scores {
		display: table;
	}
	
	.klout-scores > li {
		display: table-row;
	}
	
	.klout-scores span {
		display: table-cell;
		padding: 3px 0;
	}
	
	.klout-scores .score {
		font-weight: bold;
		padding-left: 20px;
	}

/* @end */

/* @group Other Orgs */  
	
	.org {
		list-style: disc;
		margin-left: 25px;
		padding: 5px 0 5px 5px;
	}
	
/* @end */

@media screen and (max-width: 500px) {
	body {
		background-color: white;
		font-size: 14px;
	}
	
	.box {
		display: block;
		padding: 0;
	}
	
	.box.contact-pic {
		background: none;
		padding: 0;
	}
	
	.column {
		display: block;
		padding: 0;
	}
		
	.column:nth-child(2) {
		width: auto;
	}
	
	.contact-card {
		background: none;
		border: none;
		border-bottom: 1px solid rgb(200,200,200);
		border-radius: 0;
		box-shadow: none;
	}
	
	.social img {
		width: 16px;
	}
	
	.provided-by h6 {
		font-size: 10px;
		font-weight: normal;
	}
	
	.provided-by img {
		width: 120px;
	}
}

@media screen and (max-width: 800px) {
	.column {
		display: block;
		padding: 0;
	}
	
	.column:nth-child(2) {
		width: auto;
	}
}

/* @group Error */  

	.status-msg {
		padding: 20px;
	}
	
	.api-error {
		border: 1px solid rgb(200,200,200);
		margin: auto;
		margin-bottom: 40px;
		margin-top: 40px;
		max-width: 900px;
		min-width: 200px;
		padding: 20px;
	}
	
	.api-error > h1 {
		border-bottom: 1px solid rgb(215,215,215);
		margin-bottom: 20px;
		font-weight: normal;
		padding-bottom: 10px;
	}
	
	.api-error > h1 > strong {
		color: rgb(196,22,28);
		font-size: 1.6em;
	}
	
	.api-error > h2 {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	
/* @end */

