/* Heartbeat public web server styles. */

*
{
	box-sizing: border-box;
}

body
{
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'Avenir Next', 'Avenir', 'Helvetica', sans-serif;
	text-align: center;
	color: #333;
}

h1
{
	font-size: 64px;
	line-height: 1;
	margin-bottom: 0;
	margin-top: 12px;
	border-bottom: 0;
}

h1 a
{
	text-decoration: none;
}

h2
{
    font-weight: 400;
    font-size: 36px;
}

#profile-image
{
	max-width: 148px;
	border: 2px solid #ccc;
	border-radius: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
}

#indieHopeBalloonLogo
{
	width: 64px;
	height: 64px;

	display: inline-block;
	margin-bottom:20px;

	/* Don’t make the balloon affect the text alignment */
	margin-right: -64px;
	overflow:hidden;
}

.messageBody
{
	line-height: 1.5em;
}

.message
{
	border-bottom: 1px solid #eee;
	padding: 6px;
	margin-bottom: 6px;
}

.messages
{
	text-align: left;
    color: rgb(77, 77, 77);
}

.messages img
{
	/* Make photos break the flow */
	display:block;

	/* Limit the size of photos so that they don’t overwhelm the display. */
	max-width:100%;

	/* Center */
	margin-left: auto;
	margin-right: auto;
}

.timestamp
{
	font-size:10px;
	color: #ccc;
	text-align: center;
}

.bodyText
{
	margin-left: auto;
	margin-right: auto;
}

.meta
{
	margin-left: 0;
	text-align: right;
}

.image-and-body
{
	width: 100%;
	break: both;
	overflow: hidden;
	margin-bottom: 6px;
}

a
{
    color: #191919;
}

button
{
	width: 50%;
	padding: 12px;
	font-size: 24px;
	background-color: #025E6F;
	color: white;
	border: 0;
	margin-top: 12px;
	border-radius: 10px;
}

button:hover 
{
	background-color: #1D8FA4;
}

button:active 
{
	background-color: #63BACA;
}

header
{
    border-bottom: 2px solid #333;
    padding-bottom: 12px;
    margin-bottom: 36px;
}

.new-person-notification
{
	width: 100%;
	break: both;
	overflow: hidden;
}

.new-person-notification p img
{
	width: 72px;
	border-radius: 36px;
	float: left;
	margin-right: 36px;
}

.new-person-notification p:nth-child(2)
{
	padding-top: 26px;
}

.displayNone
{
	display:none;
}

.progress-spinner
{
	display:inline;
	width:16px;
	vertical-align:top;
	padding-top: 2px;
	padding-right:5px;
}