html{
	font-family:sans-serif;
}
body{
	margin:0
}
article,aside,figcaption,figure,nav{
	display:block
}

.nav>li>a:focus,.nav>li>a:hover{
	text-decoration:none;
	background-color:#eee
}
.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
	background-color:#eee;
	border-color:#337ab7
}

@media only screen and (max-width:768px){
	.logo{
		display:block;
		width:90%!important;
		margin-left:auto!important;
		margin-right:auto!important
}

.container-fluid{
		padding-top:1px;
		padding-bottom:1px;
	}

}
@media only screen and (max-width:400px){
	.logo{
		display:block;
		width:80%!important;
		margin-left:auto!important;
		margin-right:auto!important
}
}
@media only screen and (max-width:1081px) and (min-width:800px){
	article>aside>a>img,article>aside>img{
		width:80%!important
}
}
.CenterObject{
	margin-left:auto!important;
	margin-right:auto!important
}
@media only screen and (orientation:landscape){
	.sideImage{
		width:37%;
		padding-left:0;
		margin-left:15px;
		margin-right:15px;
		float:right;
		max-width:570px
}
	.increasedMarginImage{
		margin-top:-20%
}
	article>aside>figure>a>img,article>aside>figure>figcaption,article>aside>figure>img{
		width:100%
}
}
@media only screen and (orientation:portrait){
	article>aside>figure>a>img,article>aside>figure>img,aside,figure{
		width:100%!important;
		display:block!important;
		margin-left:auto;
		margin-right:auto
}
	
	article>figure{
		margin-top:5%
}
	article>aside>figure>figcaption,article>aside>figure>img{
		width:100%
}
	article>aside{
		padding-bottom:3%
}
	article>p{
		width:100%
}
	.hero-unit{
		padding:27px!important
}

	.videoContainer {
		margin-bottom: 0px !important;
	}
	.videoContainer iframe {
		left: 0px !important;
		width: 100% !important;
		height: 100% !important;
}
}


.footerContainer{
	padding:10px;
	margin-bottom:30px;
	font-size:18px;
	font-weight:200;
	line-height:30px;
	color:#000;
	background-color:#e0e0e0;
	border-radius:6px;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	text-align:center;
}
.footerContainer p{
	width:100%;
	margin-top:0px;
	margin-bottom:0px;
}
   
	
	
	

figcaption{
	text-align:left;
	font-style:italic;
	font-size:15px;
	opacity:.7;
	line-height:22px;
	margin-left:0;
	max-width:105%;
	background-color:#efefef;
	padding-left:10px;
	padding-right:10px;
	border-radius:0 0 10px 10px
}
progress{
	display:inline-block;
	vertical-align:baseline
}
[hidden]{
	display:none
}
a{
	background-color:transparent
}
a:active,a:hover{
	outline:0
}
abbr[title]{
	border-bottom:none;
	text-decoration:underline;
	text-decoration:underline dotted
}
abbr{
	text-decoration:none!important;
	cursor:inherit!important
}
h1{
	font-size:2em;
	margin:.67em 0
}
small{
	font-size:80%
}
img{
	border:0!important
}
figure{
	margin:1em 40px
}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print{
	*,:after,:before{
		color:#000!important;
		text-shadow:none!important;
		background:0 0!important;
		box-shadow:none!important
}
	a,a:visited{
		text-decoration:underline
}
	a[href]:after{
		content:" (" attr(href) ")"
}
	abbr[title]:after{
		content:" (" attr(title) ")"
}
	a[href^="#"]:after,a[href^="javascript:"]:after{
		content:""
}
	img{
		page-break-inside:avoid
}
	img{
		max-width:100%!important
}
	h2,h3,p{
		orphans:3;
		widows:3
}
	h2,h3{
		page-break-after:avoid
}
	.navbar{
		display:none
}

}
@font-face{
	font-family:"Glyphicons Halflings";
	src:url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.eot);
	src:url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.eot?#iefix) format("embedded-opentype"),url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.woff2) format("woff2"),url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.woff) format("woff"),url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.ttf) format("truetype"),url(http://age436.poseidon.salford.ac.uk/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg")
}
*{
	box-sizing:border-box
}
:after,:before{
	box-sizing:border-box
}
html{
	font-size:10px;
}
body{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.42857143;
	color:#333;
	background-color:#404445
}
a{
	color:#337ab7;
	text-decoration:none
}
a:focus,a:hover{
	color:#23527c;
	text-decoration:underline
}
a:focus{
	outline-offset:-2px
}
figure{
	margin:0
}
img{
	vertical-align:middle
}
[role=button]{
	cursor:pointer
}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{
	font-family:inherit;
	font-weight:500;
	line-height:1.1;
	color:inherit
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{
	font-weight:400;
	line-height:1;
	color:#777
}
.h1,.h2,.h3,h1,h2,h3{
	margin-top:20px;
	margin-bottom:20px
}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{
	font-size:65%
}
.h4,.h5,.h6,h4,h5,h6{
	margin-top:10px;
	margin-bottom:10px
}
.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{
	font-size:75%
}
.h1,h1{
	font-size:36px
}
.h2,h2{
	font-size:30px
}
.h3,h3{
	font-size:24px
}
.h4,h4{
	font-size:18px
}
.h5,h5{
	font-size:14px
}
.h6,h6{
	font-size:12px
}
p{
	margin:0 0 10px
}
.lead{
	margin-bottom:20px;
	font-size:16px;
	font-weight:300;
	line-height:1.4
}
@media (min-width:768px){
	.lead{
		font-size:21px
}
}
.small,small{
	font-size:85%
}
.text-left{
	text-align:left
}
.text-right{
	text-align:right
}
.text-center{
	text-align:center
}
.text-success{
	color:#3c763d
}
a.text-success:focus,a.text-success:hover{
	color:#2b542c
}
ul{
	margin-top:30px;
	margin-bottom:30px;
}
ul ul{
	margin-bottom:0
}
abbr[data-original-title],abbr[title]{
	cursor:help
}
.container{
	padding-right:15px;
	width: 100%;
}
/*@media (min-width:768px){*/
/*	.container{*/
/*		width:750px*/
/*}*/

/*}*/
/*@media (min-width:992px){*/
/*	.container{*/
/*		width:970px*/
/*}*/
/*}*/
/*@media (min-width:1200px){*/
/*	.container{*/
/*		width:1170px*/
/*}*/
/*}*/
.container-fluid{
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;
	background:#fff
}
th{
	text-align:left
}


table, th, tr {
	border-spacing: 0px;
}

table {
	max-width: 100%;
	background-color: transparent;

}
.table {
	width: 100%;
	margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	padding: 8px;
	vertical-align: top;

}
.table > thead > tr > th {
	vertical-align: bottom;
}

.table .table {
	background-color: #fff;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
	background-color: #f5f5f5;
}

th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

td.friendButtonCell {
	border: 0px solid black;
	border-collapse: collapse;
	vertical-align: middle !important;
}

@media (max-width:768px){
	.hero-unit
	{
		text-align: center;
	}

	div.hero-unit input
	{
		margin-right: auto;
		margin-left: auto;
	}

	.simple
	{
		display:block !important;
	}

	.complex
	{
		display:none !important;
	}

}

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

.characterContainer
{
	width:100%;
}
.addCharacterBox
{
	width:100%;
}



@media (min-width:768px){
	.simple
	{
		display:none !important;
	}

	.complex {
		display: block !important;
	}

}

.characterBox
{
	display: block !important;
	width: 100% !important;
}

@media (min-width:1000px)
{
	.CharSettingsContainer
	{
		display:flex;
		width:99%;
	}

	.characterContainer
	{
		width:60%;
	}

	.addCharacterBox
	{
		width:97%;
		margin-left:0px;
	}

	.settingsAddContainer
	{
		width:38%;
	}

	.settingsContainer
	{
		width:97%;
		margin-left:0px;
		padding-bottom:50px
	}

	.characterBox
	{
		display: inline-flex !important;
		width: 50% !important;
	}
}