/*
Designer: Christom
Date Created: 30Nov12
Last Updated: 31Oct18
Site Title: Dreaming Believing
Update Details: updated font-family to show a serif font on mobile phone
*/

body {
	background-image: url("../images/background.jpg");
	font-family: "book antiqua", georgia, verdana, serif; 
	/*The Samsung phone didn't like 'book antiqua' and even when I changed the last option from sans serif to serif it was still showing arial font. 
	I had to put 'georgia' as the second option for a serif font to show.*/
}
#all {
	width: 990px;
}
.center {text-align: center;	max-width: 1000px;}
.center2 {text-align: center; width: 500px;}
.center3 {text-align: center; font-size: 17px;}
.center4 {text-align: center; font-weight: bold;}
.center5 {text-align: center; font-weight: bold; width: 1000px}
.margin { width: 100%; margin-left: 7%;}
.margin2 {margin-left: 20px;}
.margin3 {margin-left: 50px;}
.margin75{margin-left: 75px;}
.margin100{margin-left: 100px;}
.margin150 {margin-left: 150px;}
.margin200 {margin-left: 200px;}
.margin250 {margin-left: 250px;}
.margin300 {margin-left: 300px;}
.block {display: block;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
.boldunder {font-weight: bold; text-decoration: underline;}
.indent {text-indent: 50px;}
.-indent {text-indent: -50px;}
.indent100 {text-indent: 100px;}
.indent150 {text-indent: 150px;}
.footnote {font-size:12px;}
.reference {font-size:12px; font-style: italic; font-weight: bold;}
.reference2 {font-size:15px; font-style: italic; font-weight: bold;}
.reference3 {font-size:12px;}
.reference4 {font-size:12px; text-align: center;}

span.tab{ padding: 0 80px;} /*change according to desired space*/
.hr {border: 1px solid #7d7d7d; width: 300px;}
.h2 {font-size: 28px; font-weight: bold; color: #663300;}
.h4 {font-size: 22px; font-weight: bold; line-height: 1em;}
.h5 {font-size: 26px; font-weight: bold; line-height:1.5em;}
.h6 {font-size: 22px; font-weight: bold; line-height: 1.5em;}
/*.h6c {font-size: 22px; text-align: center; font-weight: bold; line-height: 1.5em;}*/
.h7 {font-size: 20px;}
.h8 {font-size: 18px; font-weight: bold; line-height: 1.5em;}
.h9 {font-size: 16px; font-weight: bold; }
/*.h9c {font-size: 16px; text-align: center; line-height: 1.5em;}*/
.h10 {font-size: 12px; line-height: 1.5em;}
.h11 {font-size: 16px; text-align: center; font-weight: bold;}
.h12 {font-size: 15px; font-weight: bold;}
.h13 {font-size: 20px; font-weight: bold;}
.lineheight {line-height:.5em;}

h4
{
line-height:0px;
}

table.center{margin-left:auto; margin-right:auto;}


audio {
	height: 25px;	/*I added height and width because IE displays extra large audio controls which look ugly*/
	width: 250px;	/*The only problem is Chrome doesn't then autoplay the music for some reason?*/
}

#tree {
	position: absolute; 
	left: 230px;
	top: 40px;
}

ul {
margin: 3%;
padding-left: 0%;
}

li {
text-indent: 0%;
}

#turnback-sign {
	padding: 0em;
	padding-top: 0em;
	margin-left: 3%;
}

#tree-warning {
	padding: 0em;
	padding-top: 0em;
}

img, object, embed, video {
/*	display: block;		*/
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border: none; /* This setting is required to remove the blue border for IE */
}
.imglft{float: left; padding:  10px 20px 0 0 ;}
.imgrgt{float: right; padding: 10px 0 0 20px;}

/*Sections*/

#nav {
	float: left;
	width: 15%;
	margin-left: .75%;
	min-width: 175px;
}
#caption {
	text-align: center; 
	font-weight: bold;
	max-width: 1000px;
	width: 110%;
}

#section {
	width: 90%;
	max-width: 990px;
}
#lftsec {
	float: left;
	width: 49%;
	margin-left: 1%;
	min-width: 250px;
	max-width: 495px;
	display: inline-block;
}
#rgtsec{
	float: left;
	width: 49%;
	margin-left: 1%;
	min-width: 250px;
	max-width: 495px;
}
#contact {width: 500px;}

/*Links*/

a:link {
	color: #663300;
}
a:hover {
	color: #996633;
}
a:visited {
	color: #996600;
}