/* A selection of things we change from bootstrap or things to make the layout all purty. */
header, hgroup, nav, article, aside, section {
  display: block;
}


.btn-primary {
  background-color: #990000;
  background-image: -ms-linear-gradient(top, #b70101, #ac0809);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b70101), to(#ac0809));
  background-image: -webkit-linear-gradient(top, #b70101, #ac0809);
  background-image: -o-linear-gradient(top, #b70101, #ac0809);
  background-image: -moz-linear-gradient(top, #b70101, #ac0809);
  background-image: linear-gradient(top, #b70101, #ac0809);
  background-repeat: repeat-x;
  border-color: #ac0809 #ac0809 black;
  border-color: rgba(0, 0, 0, 0.1);
  font-weight: bold;
  text-transform: uppercase;
  font-size: .9em;
}
.btn-primary:hover {
  background-color: #990000;
}


	.copyright {
	    text-align: center;
	    padding: 15px 0 15px 0;
	    margin:  auto 0 auto;
		background-color:#b70101;
		color:#fff;
	}
	small{
		font-size: .75em;
	}

	
	.control-label {
  		font-weight: bold;
	}
	#padded {
		padding: 0 3%;
	}


	#logo {
		width: 32px;
		max-width: 75px;
		float: left;
		margin: 0 1% 0 -2%;
	}
	header {
		padding: 0 3%;
  		background-color: #b70101;
  		background-image: -ms-linear-gradient(top, #b70101, #740001);
  		background-image: -webkit-linear-gradient(top, #b70101, #740001);
 		background-image: -o-linear-gradient(top, #b70101, #740001);
  		background-image: -moz-linear-gradient(top, #b70101, #740001);
  		background-image: linear-gradient(top, #b70101, #740001);
 	 	background-repeat: repeat-x;
  		color: #fff;
  		border-bottom: 4px solid #C1B49A;
  		min-height: 36px;
	}
	header #siteTitle {
  		font-family: Georgia, helvetica, sans-serif;
		font-size: 1.3em;
		line-height: 1.2;
		font-weight: normal;
		padding-top: .5em;
  		float: left;
  		width: 90%;
  		max-width: 275px;
	}
	header #siteTitle a {
 		color: #fff;
	}
	header #siteTitle a:hover {
  		color: #fff;
	}


/* Help section */
section h1 {
	font-size: 1.2em;
	line-height: 1;
	margin: 0 0 1em;
}


#help h2, aside h2 {
  font-size: 1.2em;
}
#help h2:first-child {
  margin: -.5em 0 0 0;
}
#help li, aside li {
  margin-bottom: .75em;
}

.spacer {
    padding: 2%;
}

.text-block {
  display: block;
  text-align: right;
  font-size: .9em;
  margin-bottom: 1em;
}


/* Mobile friendly with no borders and the box matches the width of the screen */
@media screen and (max-width:699px)
{
	body { padding: 0px; }
	#box {
		background-color:#f5f5f5;
		width: 100%;
		margin-left: auto; 
		margin-right: auto;
		position:relative;
	}

}

/* Anything below 525 pixels we want to collapse to only one column */
@media screen and (max-width:524px)
{
	.content {
	}
	.content section {
		width: 90%;
	}
	.content form {
		width: 90%;
	}

	#help {
  		background: none repeat scroll 0 0 #FFFFFF; 
  		border-radius: 4px 4px 4px 4px;
  		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
  		padding: 3%;
 		width: 90%;
	}

	form {
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 3%;
		width: 90%;
	}

	form input {
		width: 95%;
	}

}

@media screen and (min-width:525px)
{
	.content {
		overflow: auto;
	}
	.content section {
		width: 35%;
		float: left;
	}
	.content form {
		width: 45%;
		float: left;
	}

	#help {
  		background: none repeat scroll 0 0 #FFFFFF; 
  		border-radius: 4px 4px 4px 4px;
  		margin-top: 30px;
  		padding: 3%;
  		width: 35%;
	}

	form {
		margin-top: 30px;
		padding: 0 3%;
		width: 45%;
	}

	form input {
		width: 80%;
	}

}

/* Minimum width = 700 for fancy borders. Otherwise are just going to make the box a full-width thing. */
@media screen and (min-width:700px)
{
	body {	padding: 20px; }
	#box {
		background-color:#f5f5f5;
		width: 650px;
		margin-left: auto; 
		margin-right: auto;
		-moz-box-shadow: 5px 15px 15px 5px #222;
		-webkit-box-shadow: 5px 15px 15px 5px #222;
		box-shadow: 5px 15px 15px 5px #222;	
		position:relative;
	}

}