/*
When setting the primary font stack, apply it to the Pure grid units along
with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: Georgia, Times, "Times New Roman", serif;
}

html, body
	{
		background-color: #fdfdf2;
		font-family: Georgia, Times, "Times New Roman", serif;
		color: #00143b; /* #4c4c63; /* #002060; */
		font-size: 110%;
	}

main
	{
		margin-left: 25%;
		margin-right: 25%;
	}

dl.gig-dates
	{
		margin-left: 3em;
	}

dt
	{
		font-weight: bold;
		margin-top: 1em;
	}

a
	{
		color: #002060;
		font-size: 90%;
	}

p a
	{
		font-size: 100%;
	}

#logo
	{
		width:500px;
		margin-bottom: 15px;
		max-width: 100%;
	}

#content
	{
		margin-bottom: 10px;
	}

#navbar img, #logo
	{
		/* Centre images */
		display:block;
		margin-left: auto;
		margin-right: auto;
	}

#cover-photo
	{
		text-align:center;
		color: #777;
		font-family: sans-serif;
	}

#cover-photo p
	{
		margin-left:10%;
		margin-right:10%;
	}

#cover-photo img
	{
		width:60%;
		margin-left:auto;
		margin-right:auto;
		border: solid #111 5px;
		box-shadow: 0px 2px 10px #000;
	}

#navbar a img
	{
		opacity: 0.8;
	}

#navbar a:hover img, #navbar a.current img
	{
		opacity: 1;
	}

.social-buttons
	{
		margin-left: auto;
		margin-right: auto;
		/*   (32 + 20) * 2 = 104  */
		width:104px;
		height:64px;
	}
.social-buttons img
	{
		display:block;
		float:left;
		width: 32px;
		height: 32px;
		padding-left: 10px;
		padding-right: 10px;
	}

a.button
	{
		background-color: #005c99;
		color: white;
		border-radius: 5px 5px;
		padding: 2px 8px 2px 8px;
		margin-left: 5px;
		box-shadow: 0px 2px 3px #000;
		font-size: 80%;
	}

a.button:hover
	{
		background-color: #007acc;
	}

a.button:active
	{
		background-color: #cc5200;
		box-shadow: 0 0 0;
	}