* {box-sizing: border-box;margin:0;padding:0;}

body {width:100%;margin:0;padding:0;border:0;font-size:100%;font-weight:bold;text-align:center}
body {color:#494949;font-family:Verdana,Arial,sans-serif;background-color:transparent;}
	
.wrapper {
	position:relative;
	width:100%;
	max-width:960px;
	margin:0 auto;
	overflow:auto;
	text-align:left;
	background-color:transparent;
}

a {color:#2e5ce4;}
a:link {color:#2e5ce4;}
a:visited {color:#2e5ce4;}
a:hover {color:#66ccff;}
a:active {color:#66ccff;}

.header {	
		position: relative;
		background-image:url(../../hawleytree/graphics/hawley_header_tablet.jpg);
		background-color:transparent;
		width:100%; 
		height:5em;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;		
		border-top-left-radius:1.25em;
		border-top-right-radius:1.25em;
}
#srchdata {
	float:left;
	width:40%;
	margin:1em 1%;
	overflow:hidden;
	font-size:0.75em;
	color:black;
	text-align:center;
}

#headtitle {
	float:left;
	width:19%;
	margin:0.5em 0;
	font-size:1.25em;
	color:blue;
	text-align:center;
}

#srchweb {
	float:right;
	width:30%;
	margin:1em 1% 0 0;
	overflow:hidden;
	font-size:0.75em;
	color:black;
	text-align:center;
}

#smallmenu {
	float:right;
	max-width:4%;
	min-width:32px;
	margin:1.5em 2% 0 0;
	cursor:pointer;
	z-index:10;
	background-color:transparent;
	display:none;
}
#smallmenu img {z-index:5;}
#mobmenu {
	position:absolute;
	top:4em;
	right:20px;
	width:120px;
	background-color:#d3e6ff;
	border:0;
	z-index:50;
}
#mobmenu li {
	list-style-type:none;
	padding:4px 0;
	border-bottom:2px solid grey;
}	

#dataform {
	margin:0 auto;
	font-size:1em;
}
.inputs {
	width:40%;
	font-size:1.5em;
	background-color:none;
	border-top:2px groove lightgrey;
	border-right:2px groove lightgrey;		
}
.submit {		
	padding:2px 12px;
	background-color:#d3e6ff;
	background-image:url(../../hawleytree/graphics/search.gif);
	background-repeat:no-repeat;
	background-position:center;		
	border:2px groove lightgrey;		
	cursor:pointer;
}
#g-search {
	float:right;
	width:98%;
	margin-right:2%;
	overflow:hidden;
}	
form.gsc-search-box {margin-bottom:0 !important;}

button.gsc-search-button {
	padding:4px 8px;
	border-top:2px groove lightgrey;
	border-right:2px groove lightgrey;
}

td.gsc-input {
	width:100% !important;
	height:auto !important;
	margin:0 0 6px 0;
	padding:0 !important;
	font-size:0.8em !important;
	border-top:2px ridge lightgrey;
	border-left:2px ridge lightgrey;
	border-bottom:2px solid #f0f0f0;
	border-right:2px solid #f0f0f0;
}

.gsst_b {
	padding:0 !important;
	font-size:14px !important;
}

.gsib_a {padding:0 6px 0 6px !important;}

#menu {
	clear:both;
	width:100%;
	height:3em;
	margin:0;
	overflow:hidden;
	background-color:#d3e6ff;
	border:0;
}
#menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #99ccff;
}
#menu .dropbtn {
	background-color:#d9d9d9;
	color:black;
}
#menu li {
	float: left;
	border-right:solid 2px white;
}
#menu li a {
	color:blue;
	font-size:0.8em;
}

#menu li a, .dropbtn {
	display: inline-block;
	text-align: center;
	padding: 8px 6px;
	text-decoration: none;
}
#menu li a:hover, .dropdown:hover .dropbtn {background-color:#cce6ff;}
#menu li.dropdown {display: inline-block;}
#menu .dropdown-content {
	display: none;
	position: absolute;
	background-color: #99ccff;
	min-width: 5%;
	z-index:50;
}
#menu .dropdown-content a {
  color: blue;
  padding: 8px 6px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:0.8em;
}
#menu .dropdown-content a:hover {background-color: #cce6ff;}
#menu .dropdown:hover .dropdown-content {display: block;}

#content, #stories {
	width:100%;
	max-height:80vh;
	min-height:60vh;
	overflow:scroll;
	border-left:ridge 2px grey;
	border-right:ridge 2px grey;
	background-color:#f4e1c5;
	background-image:url(../graphics/NY_1796_fade.jpg);
}
#content, h3 {
	text-align:center;
	padding:0;
}
#content p {
	padding:1em 4%;
	text-align:left;
}
.phonetitle {
	text-align:center;
	font-size:1em;
	color:blue;
	display:none;
}
.smalltext {
	clear:both;
	padding-bottom:1em;
	font-size:.8em;
}
.smalltext a, .toptext a {
	border:1px groove grey;
	border-radius:0.25em;
	padding: 0 6px;
	text-align:center;
	background-color:#f0f0f0;
	text-decoration:none;
}
#homestory img {
	width:17%;
	margin:1em 0.5em;
	border:0;	
}
#stories .civilwar figure {
	width:80%;
	margin:0 auto 1em auto;
}
#stories .civilwar figure img {width:100%;}
#stories p {
	width:90%;
	margin:1em auto;
}
#stories .civilwar figcaption {
	margin:0;
	text-align:center;
	border:0;
}
#stories .civilwar {
	float:left;
	width:100%;
	padding-left:3%;
}
#stories .civilwar p a {color:blue;}

#pbutton {
	margin-top:1em;
	text-align:center;
}
.pics1 {
	width:100%;
	margin-top:0;
	height:84px;
	font-size:.6em;
	overflow-x:scroll;
	overflow-y:hidden;
	white-space:nowrap;
}
#pics2 {
	display:inline-block;
	margin:0 0.25em;
	overflow:hidden;
}
#pics3 {
	width:100%;
	text-align:center;
	margin-top:10px;
}
#pics3 img {border:1px ridge #fff;}

.flipped, .flipped #pics2 {
	transform:rotateX(180deg);
	-ms-transform:rotateX(180deg); /* IE 9 */
	-webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

#album {border-bottom:ridge 2px grey;}
#album .pics1 {
	margin-top:0;
	border:0;
}

#pics4 {
	width:100%;
	text-align:center;
	margin:0 auto;
	padding:1em 0;
}
#imagetitle {
	width:100%;
	text-align:center;
}
.namediv {float:left;width:26%;}
.birthdiv {float:left;width:7%;}	

.surnamediv {float:left;width:30%;}
.numdiv {float:left;width:3%;}	

.footer {
	height:1em;
	background-color:grey;
	border:solid 1px grey;
}

#bod_home #menu #home a {background-color:#cce6ff;}
#bod_heritage #menu #heritage a {background-color:#cce6ff;}
#bod_proof_of_origins #menu #proof_of_origins a {background-color:#cce6ff;}
#bod_brickwall #menu #brickwall a {background-color:#cce6ff;}
#bod_ourpics #menu #ourpics a {background-color:#cce6ff;}
#bod_contact #menu #contact a {background-color:#cce6ff;}

/* For mobile phones - portrait: */
@media only screen and (max-width: 700px) {   
	#menu {display:none;}
	.header #smallmenu {display:block;}
	.header {background-image:url(../../hawleytree/graphics/hawley_header_phone.jpg);}
	.header #srchdata {
		clear:both;
		width:80%;
		margin-left:5%;
		font-size:0.5em;
	}
	.header #headtitle, #srchweb {display:none;}
	#content .phonetitle {display:block;}
}
/* For mobile phones & tablets: */
@media only screen and (max-width: 768px) {
	.namediv, .surnamediv {clear:both;width:76%;}
	.birthdiv, .numdiv {float:left;width:23%;}
}
@media only print {
	.header, #menu, .footer {display:none;}
	#content button {display:none;}
	#perspic ul li {display:none;}
	#perspic img {display:none;}
	#perslist {margin-top:4em;}
}