body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: galdeanoregular,Helvetica,Arial,sans-serif;
	font-size: 140%;
	white-space: nowrap;
	line-height: 1.2;
	background-color: rgb(80,58,40);
}

.br0 {
	white-space: normal;
	margin: 0;
}

.br0a {
	white-space: normal;
	margin: 0.2em 0 0 0;;
}

.expert {
	margin: 16px auto;
}

.divbox {
	display: table;
	padding: 0 0 4px 0;
	white-space: normal;
	font-size: 90%;
	text-align: left;
}

.tr {
	display: table-row;
}

.td {
	display: table-cell;
	padding: 0 5px 0 5px;
}

.br2 {
	white-space: normal;
	margin: 0.1em 0 0.1em 0;
	font-size: 90%;
	text-align: left;
}

.br3 {
	white-space: normal;
	margin: 0.40em 0 0 0;
}

.br4 {
	white-space: normal;
	margin: 0;
}

.br5 {
	white-space: normal;
	margin: 0.25em 0 0.5em 0;
	font-size: 90%;
}

.br {
	display: initial;	
}

.shadowbox {
	padding: 15px;
	margin: 12px auto 12px;
	border-radius: 5px;
	box-shadow: 0 2px 5px #000;
	background: rgba(240,240,208,0.1);
}

.shadowtext {
	text-shadow: 1px 1px rgb(252,230,163);
}

.qsmall {
	font-size: 90%;
}

.small {
	font-size: 85%;
}

.vsmall {
	font-size: 75%;
}

.strapline {
	width:60%;
	white-space:nowrap;
}

/* If the screen size is 1024px wide or more, limit the width of the display */
@media screen and (min-width: 1024px) {
	.container {width: 1024px;}
	.strapline {width: 350px;}
}

/* If the screen size is 992px wide or more, don't show the linebreaks */
@media screen and (min-width: 992px) {
	br {display: none;}
	.br3 {white-space: pre;}
	.br4 {white-space: pre;}
}

/* If the screen size is 590px wide or less, don't try to control the linebreaks */
@media screen and (max-width: 590px) {
	body {white-space: normal;}
	br {display: none;}
}

/* If the screen size is small, make the images fit the available space (note 590 is 90% of 655) */
@media screen and (max-width: 655px) {
	img.fix {width: 95vw;}
	.br0a {margin: 0.4em 0 0 0;}
}

.smallscreen {display: none ;}

/* If the screen size is small, don't show the icons etc */
@media screen and (max-width: 710px) {
	.largescreen {display: none;}
	.smallscreen {display: initial;}
	.shadow {padding: 10px 5px 10px 5px;}
}

/* Mobile screens in landscape mode */
@media screen and (max-width: 591px) {
	.midscreen {display: none;}
}
	
/* If the screen is a portrait iPad, show less text in the first paragraph */
@media screen and (max-width: 992px) {
	.iscreen {display: none;}
}

h1 {
	color: #f0f0d0;
	font-family: galdeanoregular,limelightregular,Helvetica,Arial,sans-serif;
	font-size: 180%;
	font-weight: 500;
	margin: 12px 0 3px 0;
	line-height: 1.1;
}

.heading {
	white-space: normal;
	font-family: galdeanoregular,Helvetica,Arial,sans-serif;
	font-size: 125%;
	font-weight: 500;
	margin: 0 auto;
}

img.padded {
	padding: 0 7px 0 0;
	vertical-align: middle;
}

img.fix {
	display: block;
	margin: 25px auto 3px auto;
}

img.example {
	display: block;
	margin: 30px auto 0 auto;
	border-radius: 8px;
	border: 2px solid #f0f0d0;
	padding: 5px;
	max-width:90vw;
}

a {
	color: #f0f0d0;
	text-decoration: none;
}

a:hover {
	color: white;
	text-decoration: solid underline;
}
	
.background {
	width: 100%;
	height: auto;
	min-height: 100%;
	text-align: center;
	color: white;
	background-image: linear-gradient(rgba(24,0,0,0.85),rgba(24,0,0,0.75)),url(images/background.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	background-color: #3d3631;
}

div {
	display: table;
	margin: 0 auto;
}

.yellow {
	color: #f0f0d0;
}

i {
	color: #f0f0d0;
}

hr {
	margin: 16px auto;
	height: 0;
	border: 0;
	width: 90%;
	border-top: 1px double white;
}

hr.taller {
	margin: 20px auto 20px;
}

.style2 {
	height: 25px; background: url('images/flourish2.png') no-repeat 50% 50%;
	border: 0;
}

.style3 {
	height: 25px; background: url('images/flourish3.png') no-repeat 50% 50%;
	border: 0;
}