body {
  padding: 0;
  margin: 0;
  text-align: center;
  height: 100%;
  width: 100%;
  overflow-x:hidden;
  } 
#outer { padding: 0; margin: 0px auto; width: 100%; max-width: 2050px; text-align: center; background: #fff; }
#wrap {
  width: 94%;
  height: auto;
  margin: 0 auto;
  min-width: 296px;
  max-width:498px;         
  padding: 0 0;  
  background: #fff;
  text-align: center; 
  border: 0px solid green; 
  }
#col3 { width: 100%; height: 100%; margin: 0px auto;  min-height: 400px; max-width: 650px; }
.title { text-align: center; height:38px; width: 100%; }
h2:target { padding-top: 6px; }
h1 { font: 20px/38px Helvetica, arial, verdana, sans-serif; padding: 0; margin: 0 auto; }
.title, .title a { 
  height: auto;
  font: 20px/38px Helvetica, arial, verdana, sans-serif; /*previously 20px; */
  color: #fff;
  letter-spacing: 0px;
  word-spacing: 3px;
  }
.title, .title a, h1 { background: #696969; }
h1 a:hover { color: #fff; }
#subtitle, #nav, #surnames, #surnamesfoot, #navfoot {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
  height: auto;
  font: 16px/18px Helvetica, arial, verdana, sans-serif;
  color: #111;
  }
#subtitle {height: 30px;margin: 8px auto 0 auto;background: #fff;font: 16px/30px Helvetica, arial, verdana, sans-serif;color: #111;text-align: center;}
#nav, #navfoot {
  width: 99%;    
  max-width: 630px; 
  min-width: 296px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  border: #BEBEBE solid 1px;
  background: #EEEEEE;
  font: 16px/42px Helvetica, arial, verdana, sans-serif;  /*box-shadow: 1px 1px 10px #eee;*/
  }
#nav {   
  margin: 0px auto 14px auto;
  border-width: 0px 1px 1px 1px; 
  border-radius: 0px 0px 40px 40px;   
  }
#navfoot {   
  margin: 10px auto 0px auto; 
  border-width: 1px 1px 0px 1px;
  border-radius: 40px 40px 0px 0px; 
  position: relative;
  }
#nav a, #navfoot a {
  color: #444; 
  font: 16px/32px Helvetica, arial, verdana, sans-serif;
  margin: 0 1.6%; 
  padding: 0px 0;
  }
#surnames, #surnamesfoot {
  height: auto; 
  width: 98%;
  text-align: center;
  margin: 16px auto 16px auto;
  text-align: center; 
  border: 1px dotted #BEBEBE; 
  padding: 2px 1%; 
  }
#surnamesfoot { margin-top: 60px; }
#surnames a, #surnamesfoot a { 
  color: #999966;
  font: bold 12px/22px arial,sans-serif;
  margin: 2px 3px 2px 3px;  
  padding: 0px 0px; 
  display: inline-block;
  overflow: hidden; 
  }
#surnames .u, #surnamesfoot .u { 
  display: block; 
  margin: 6px auto 6px auto; 
  text-align: center;
  letter-spacing: 2px; 
  word-spacing: 0px;  
  font:12px/14px arial, sans-serif;
  }
#surnames a.current, #surnamesfoot a.current {
  font-size: 16px;
  letter-spacing: 1px;
  font-style: italic;
  color: #333;
  margin: 0 4px;
}
#surnames a.current:after, #surnamesfoot a.current:after { content: " Family"; }
#surnames a, #surnamesfoot a, #nav a, #navfoot a, #nav2 a, #nav2foot a { text-decoration: none; }
p, span, div {
  font: 14px/20px "HelveticaNeue", Helvetica, Arial, sans-serif;
  text-align: left;
  color: #111;
  }
p { margin: 10px auto 20px auto; clear: both; }
p a, .indent a, .indent2 a, #link a, #sev a, #cert pre a,#note a {
  color: #999966; 
  font-weight: 500; /*font-variant: small-caps;*/
  border-bottom: 1px dotted #999966;  
  }
pre a:hover, pre a:active, #surnames a:active, #surnamesfoot a:active, #nav a:active, #navfoot a:active, #surnames a:hover,#nav a:hover, #surnamesfoot a:hover, #navfoot a:hover, #mid.indent a:active, #mid.indent a:hover, a:active, a:hover, * a:hover, * a:active { color: #FFA500; color: #CC3300; }
input:focus, textarea:focus    { border: 0px solid #CC3300; border: 0px solid navy;} /*match to link focus colours above*/

.title a:focus, .title a:hover { color: #fff; } /*exception to the hover colours above*/

pre a  { line-height: 20px; }
#sev a { line-height: 30px; }
h2, #cert #col3 h2 {
  color: #555; 
  font: bold 16px/16px verdana,sans-serif;
  letter-spacing: 0px;
  text-decoration: none;
  margin: 70px 0 12px 0;
  padding: 0;
  width: 100%;
  text-align: left;
  }
#cert #col3 h2 { margin: 48px 0 10px 0; }

h2:first-of-type { margin: 48px auto 12px auto; }
.mid {
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  display: block;
  }
.indent,.indent2 {
  margin: 0px auto 10px auto;
  width: auto;
  overflow: visible;
  text-align: right;
  white-space: nowrap;
  display: inline-block;
  border: green solid 0px;
  padding-right: 50px;
  }
.indent2 { width: 170px; text-align: left; }
.box {
  font-style: normal; 
  word-spacing: 18px;
  display: block;
  clear: both;
  border-bottom: 1px dotted #333;
  max-width: 322px;
  width: auto;
  color: #333;
  letter-spacing: 1px;
  font: 14px/18px Helvetica, arial, verdana, sans-serif;
  }
.box2 {
  font-size: 13px;
  display: block;
  border: #bbb solid 1px;
  font-style: italic;
  padding: 10px 10px;
  line-height: 20px;   
}
.sm { display: none; }
#nav a, #nav a:visited, a, a:visited, #title a, #title a:visited, #navfoot a, #navfoot a:visited { text-decoration: none;}
#stat {
  margin: 10px auto 5px auto;
  text-align: center;
  display: none;
  }
#diddle { text-align: center; }
#diddle h1,#diddle p { text-align: left; }
#diddle h1, #diddle h2 { margin: 2px auto 0 auto; font: bold 14px/22px arial, sans-serif; }
#diddle p  { margin: 4px 0 18px 0; text-align: left; }
#diddle #pic {
  width: 99%;
  max-width: 520px;
  margin: 8px auto 0px auto;
  padding: 0px;
  border: 1px solid #BEBEBE;
  background: #fff;
  box-shadow: 0px 0px 0px #ccc;
  border-radius: 0px; 
  }
#diddle h2:first-of-type { height: auto; font-size: 18px; margin: 4px auto 9px auto; clear: left; }
#diddle .main { width: 99%; max-width: 99%; min-width: 98%; border: 1px solid #BEBEBE; }
#diddle .main img { margin: 0px; }

#cert pre {
  margin: 0 auto 26px auto;
  text-align: left;
  padding: 0 0px 0 8px;
  border: #ccc solid 1px;
  color: #000;
  background: #fefefe;
  font: 14px/16px monospace;
  white-space: pre;
  clear: left;
  overflow: visible; 
  }
#cert pre .scut { display: none; }/*short cut to...*/
#cert pre .u { text-decoration: underline; font: 14px/16px monospace; }
#cert pre .bl { font: 14px/22px monospace; font-weight: bold; }
#cert #sev { white-space: pre-line; text-align: center; }
#cert pre .fix { width: auto; display: block; height: 0; padding: 0; margin: 0; line-height: 1px; }
#cert #col3 { text-align: center; }
#cert #link { text-align: center; }
#cert pre a:hover { color: #c30; color: blue; }
#cert #title2, #links #col3 #title2, #title2 {
  height: auto;
  width: 100%;
  max-width: 310px;
  margin: 30px auto 26px auto; 
  padding: 2px;
  text-align: center;
  background: #fff;
  color: #333;
  font: 14px/18px verdana,arial, sans-serif;
  letter-spacing: 4px; 
  border: 0px solid #333; 
  border-width: 1px 0px; 
  }
#chart #title2, #site #title2 { margin-bottom: 46px; }

#form #title2 { margin-bottom: 4px; }
em { font-weight: bold; font-style: normal; }

.pic, .pic2 {
  float: right;
  width: 30%; 
  height: auto;
  margin: 15px 2px 10px 2%;
  clear: right;
  overflow: hidden;
  font: 10px/12px verdana,sans-serif; 
  text-align: center;
  border: 1px solid #bbb;
  color: #555;
  background: #eee;
  border-radius: 10px;
  padding: 4px;
  }
.pic .disappear { font: 10px/12px verdana,sans-serif; color: #555; }
img.imgright {
 width: 92%; 
 border-radius: 10px; 
 padding: 0px;  
 border: 3px solid #fff;  
 background: #555;
 }

p { width: auto; text-align: left; clear: left; border: 0px solid blue; }

#links img, #home img{ border-radius: 0px; background: #fff; }
#diddle h2 { margin-top: 30px;}
#map {
  text-align: center;
  width: auto;
  max-width: 480px;
  height: auto;
  margin: 106px auto 0px auto;
  padding: 0px;
  border: 0px dotted #bbb;
  font: 11px/13px verdana, sans-serif;
  letter-spacing: 0px;
  }
#map a { color: #999966; }
#map img { 
  margin: 3px auto 0px auto;
  width: 94%; 
  padding: 0px;
  border: 1px solid #bbb; 
  background: #fff;
}
/*Royal Navy Record Page*/
.navy .words { 
  width: 100%;
  clear: both;
  overflow: visible;
  min-width: 200px;
  background: #fcfcfc; 
  margin: 0 auto 26px auto; 
  padding: 0px;
  height: auto; 
  border: 1px solid #aaa;
  text-align: center;
  }
.navy .words p {
  color: #000; 
  text-align: left;
  font: normal 12px/18px arial,sans-serif; 
  margin: 0px auto 18px auto;
  text-align: left;
  width: 94%;
  max-width: 500px; 
  }
.navy .su { text-decoration: underline; font-size: 14px; margin: 20px 0 0px 0px; display: block; font-weight: bold; letter-spacing: 1px; }
.navy .su:first-of-type { margin: 12px 0 0 0; }
.navy .captions { font: italic 12px/22px arial,sans-serif; letter-spacing: 0px; margin: 0 60px;width: auto;clear:both; } 
.navy p.hr { border-top: 2px dotted #999; width: 90%; margin: 0px auto; padding:0; }
.navy .words img { border: 1px solid #888; padding: 0px; margin: 0 auto 10px auto; width: 86%; max-width: 400px; height:auto; }
.navy .cimg { text-align: center; margin: 0 auto; height: auto; max-width: 500px;}
.navy .words .abc img { width: 84%; }
.navy .words .port img { width: 58%;  margin: 0 auto 12px auto; max-width: 280px; }
.navy img.small { width: 42%;  margin: 0 3% 20px 3%; float: left; max-width: 80px; max-width: 180px; }
.navy #ganges img { width:86%; margin: 8px auto 0 auto; }
.navy #cert #title2, #title2 { margin: 30px auto 48px auto; }


/*tiny tiny screen*/
@media screen and (max-width: 407px){
#wrap { border: 0px dashed green; width: 98%; }
#cert pre  { padding: 0px 8px; font: 12px/18px monospace; white-space: pre-line; word-spacing: 2px; }
}
/*cuts off when it goes bigger then 340 ORANGE*/
@media screen and (min-width: 408px) and (max-width: 430px){
#wrap { border: 0px dashed orange; width: 96%;}
#cert pre  { padding: 0px 8px; font: 11px/18px monospace; white-space: pre-wrap; word-spacing: 0px; }
#cert #sev { padding: 0px 8px; }
.box { word-spacing:10px; max-width: 260px; letter-spacing: 0px; }
.indent2 { width: 100px; text-align: left; }
#nav, #navfoot { width: 100%; }
#nav { border-width: 0px 0px 1px 0px; border-radius: 0px 0px 0px 0px; }
#navfoot { border-width: 1px 0px 0px 0px; border-radius: 0px 0px 0px 0px; }
.sur-brk { display: none; } 
.ask-brk { display: none; } 
#nav a, #navfoot a { margin: 0 1.5%; }
}

/* BLUE */
@media all and (min-width:431px) and (max-width: 479px) {
#surnames, #surnamesfoot { width: 96%;} 
#cert pre  { padding: 0px 1px 0 4px;  white-space: pre-wrap; } 
#cert #sev { padding: 0px 8px; }
#cert pre .collapse { white-space: pre-line; }
.indent2 { width:100px; text-align:left; }   
#wrap { border: 0px solid blue; }
#cert pre{ font: 12px/16px monospace; }
#wrap { width: 97%; } 
#nav, #navfoot { width: 98%; width: 100%; }
#nav { border-width: 0px 1px 1px 1px; border-radius: 0px 0px 40px 40px; }
#navfoot { border-width: 1px 1px 0px 1px; border-radius: 40px 40px 0px 0px; }
#nav, #navfoot { border-radius: 0; border-left:0; border-right: 0;}
#nav a, #navfoot a { margin: 0 1.3%; }
.ask-brk { display: none; } 
}

/* RED */
@media all and (min-width:480px) and (max-width: 629px) { 
#surnames, #surnamesfoot { width: 97%;} 
#surnames a, #surnamesfoot a { } 
#cert pre  { padding: 0px 6px 0 12px; white-space: pre-wrap; } 
#cert #sev { padding: 0px 12px; }
#cert #col3 { height: auto; min-height: 200px; }
#cert pre .collapse { white-space: pre-wrap; } 
.indent2 { width:100px; text-align:left; }
#wrap { border:0px solid red; max-width:478px; }
#cert pre { font: 13px/16px monospace; }
#nav, #navfoot { width: 96%; }
#nav { border-width: 0px 1px 1px 1px; border-radius: 0px 0px 40px 40px; }
#navfoot { border-width: 1px 1px 0px 1px; border-radius: 40px 40px 0px 0px; }
.ask-brk { display: none; } 
}

/*for larger screens BLACK */
@media all and (min-width:630px) and (max-width: 679px) { 
#cert pre  { padding: 0px 6px 0 14px; white-space: pre-wrap; } 
#cert #sev { padding: 0px 10px; }
img.imgright{ width:92%; }
.pic, .pic2 { margin:14px 1% 8px 3%; }
.pic2 { margin-top:6px; }
.indent2 { width: auto; text-align: right; }
#surnames a, #surnamesfoot a { margin:2px 4px 2px 4px; }
#wrap { max-width: 500px; border: 0px solid black; }
#nav { border-width: 0px 1px 1px 1px; border-radius: 0px 0px 40px 40px; }
#navfoot { border-width: 1px 1px 0px 1px; border-radius: 40px 40px 0px 0px; }
#nav a, #navfoot a { margin: 0 1.6%; }
#nav, #navfoot { width: 94%; min-width: 502px; }
.ask-brk { display: block; } /*sideways mobile keeps names nice*/
#cert #sev .sur-brk { display: none; }
}

/*for larger screens green */
@media all and (min-width: 680px) and (max-width: 749px) { 
#wrap { max-width: 550px; border: 0px solid green; }
#surnames a, #surnamesfoot a { margin:2px 6px; }
#cert pre { padding: 0px 8px 0px 14px; white-space: pre-wrap; }
#nav, #navfoot { width: 94%; }
#cert #sev .sur-brk { display: none; }
}

/* ++++++++++++++++++For biggest screens PURPLE++++++++++++++++++++++++++++ */
@media all and (min-width: 750px) { 
body { background: #EEE; background: #F5F5F5; } 
#outer { border: 1px solid #aaa; border: 1px solid #ddd; max-width: 720px; width: 100%; border-width: 0px 1px; padding-top: 0px; }
#wrap { max-width: 616px; border: 0px solid purple; }
#title { letter-spacing: 5px; }
#surnames, #surnamesfoot { width: 88%; max-width: 446px; max-width: 88%; border: 0px dotted #BEBEBE; }
#surnames { margin: 24px auto 15px auto; }
#surnamesfoot { margin: 54px auto 24px auto; }
#surnames a, #surnamesfoot a { margin: 2px 9px; }
#surnames .u, #surnamesfoot .u { 
  margin: 6px auto 9px auto; 
  letter-spacing: 2px; 
  word-spacing: 0px; 
  font: 12px/14px arial, sans-serif;
  }
#nav, #navfoot { 
  width: 80%;  
  max-width: 900px; 
  min-width: 296px; 
  text-align: center; 
  font: 18px/42px Helvetica, arial, verdana, sans-serif; 
  border-radius: 0px 0px 20px 20px; 
  border-width: 0px 1px 1px 1px; 
  background: #F5F5F5;
  }
#navfoot { border-width: 1px 1px 0px 1px; margin: 10px auto 0px auto; border-radius: 20px 20px 0px 0px; }
#nav a, #navfoot a { font: 16px/32px Helvetica, arial, verdana, sans-serif; margin: 0 1.5%; }
#profiles   { width: 96%; margin: 0 auto; }
#profiles2  { width: 96%; margin: 0 auto; }
#cert #col3 { width: 96%; max-width: 655px; height: auto; min-height: 500px; }
#cert #surnamesfoot { margin-top: 80px; }
#form #col3 { width: 88%; max-width: 545px; }
#cert pre { padding: 0px 16px 0px 16px; white-space: pre-wrap; }
#cert #sev .sur-brk { display: inline; }
.pic, .pic2 { width: 30%; height: auto; margin: 6px 0px 6px 4%; }
.gapt { margin-top: 80px; }
.gapk { margin-top: 82px; }
.gapl { margin-top: 102px; }
.gapa { margin-top: 60px; }
#diddle h2:first-of-type { height: auto; font-size: 18px; margin: 3px auto 9px auto; clear: left; }
#diddle .main { width: 94%; max-width: 94%;  min-width: 94%; border: 1px solid #BEBEBE; margin-top: 10px; }
/*
#chart pre { letter-spacing: 3px; font: 15px/20px courier, monospace; }
#chart pre a, #chart pre .d, #chart pre .dd { font: 14px/22px verdana, sans-serif; height: 22px; letter-spacing: 0px; }
#chart pre .d, #chart pre .dd { font: 12px/22px verdana, sans-serif; }
#chart pre { width: 540px; margin-top: -20px; }*/
body #chart #note { margin: 60px auto 40px auto; border: 1px solid green; }
#map { margin: 90px auto 40px auto; }
.navy .words   { width: 100%; max-width: 589px; }
.navy .words p { width: 94%; max-width: 500px; }
.navy .words img { width: 86%;max-width: 440px; height:auto; }
.navy h2.git { padding: 0 0 10px 0; margin: 48px 0 0 12px; }
.navy .cimg  { text-align:center; margin: 0 auto; height: auto; max-width: 600px; }
.navy .cimg2 { text-align:center; margin: 0 auto; height: auto; max-width: 500px; }
.navy .cimg img  { width: 100%; height: auto; max-width: 85%; }
.navy  img.small { width: 42%;  margin: 0 3% 20px 3%; float: left; max-width: 80px; max-width: 210px; }
.navy #ganges img { width: 84%; margin: 10px auto 0 auto; max-width: 600px; }
#links #col3 { width: 100%; max-width: 589px; }
body   { height: 100vh; }
#outer { min-height: 96vh; }
#wrap { min-height: 90vh; }
.title a:focus, .title a:hover { color: #fff; } 


#surnames a, #surnamesfoot a { color: #8C0B06; font-weight: normal; }
#surnames a, #surnamesfoot a, #cert pre a, a .r, #note a, #links #col3 a,  #site #col3 a { text-decoration: none; }
#surnames a, #surnamesfoot a, #cert #link a { font: normal 14px/20px monospace;  }
p a, .indent a, .indent2 a, #link a, #sev a, #cert pre a, #note a, #links .top a { border-bottom: 1px dotted #aaa; }
#chart #larchart a, #site #col3 a, #site #col3 a .d, #chart pre a, #links #col3 a, #link a, #guest a, #diddle p a, .navy #words a.record, #note a, .navy p a, #profiles .indent a, #profiles .indent2 a,  #profiles p a, #cert pre a 
{ color: navy; }
a:hover, a:focus, #surnames a:hover, #surnamesfoot a:hover, #profiles p a:hover, #site #col3 a.sub:hover,  #site #col3 a.sub2:hover, #site #col3 a:hover, #chart #larchart a:hover, #site #col3 a:hover,  #chart pre a:hover, #links #col3 a:hover, #link a:hover, #guest a:hover, #diddle p a:hover, .navy #words a.record, #note a:hover, .navy p a:hover, #profiles .indent a:hover, #profiles .indent2 a:hover,  #profiles p a:hover, #cert pre a:hover
{ color: green; color: #CC3300;/*orange*/ color: #8C0B06;/*same color as surname links*/ color:#0000FF;/*blue*/ background-color: inherit;}
#nav a:hover, #navfoot a:hover { color: #CC3300; }
#site #col3 a.sub, #site #col3 a.sub2 { color: #000; }
#links .bor a { font: normal 14px/16px verdana,sans-serif;  }
#profiles a, #link pre a, #links pre a, #cert pre a, #cert #link a, #links .bor a { font-weight:normal; }

}
     

@media all and (min-width: 51920px) { 
body {
   transform: scale(1.2);
   transform-origin: 0 0;
   margin-left: -10%;}
}
/*for editing purposes only*/  #wrap{border-width: 0px;} 

* a:active { background:inherit;}




/* @media all and (min-width:940px) and (max-width: 4000px) { 
body, #outer { background-image: linear-gradient(to right,#ddd,#eee,#fff,#fff,#fff,#fff,#fff,#fff,#eee,#ddd);}
} */

/*side images on surname pages too long - make some disappear*/
@media all and (min-width: 480px) { 
.pic.disappear, .disappear {display: none;}
}
@media all and (min-width: 430px) { 
#cert pre span {  font: 14px/16px monospace;  white-space: pre-line;}
#cert pre .scut {display: inline-block;}/*shortcut too/appear and disappear*/
}


/*<br class="sur-brk"> before last surname makes it break with two instead of one ask-brk for really big screen mobile sideways*/
@media screen and (min-width:529px) and (max-width: 3000px) { 
.sur-brk { display: none; } 
}
@media screen and (min-width:331px) and (max-width:478px) { 
.sur-brk { display: none; } 
}
@media screen and (min-width:458px) and (max-width:466px) {  }

@media screen and (min-width:50px) and (max-width:330px) {  }










@media print {
#nav, #link, #surnamesfoot, #navfoot, .title,#map,#surnames, #sev, #form #nav, #form #surnames, #note { display: none; }
p a, .indent2 a,.indent a, pre a { font-weight: normal; }
.title h1 a { font-size: 18px; letter-spacing: 1px;}
.title:first-of-type { display:block; margin-top: 0px; }
h2 { page-break-before: auto; }
h2:first-of-type { page-break-before: avoid; }
.box2, .nobk, #cert pre { page-break-inside: avoid; }
#cert #wrap { max-width: 565px; }
#wrap pre   { max-width: 565px; }
}

@page {  margin:20px 0% 20px 0%;  size: A4 portrait; }

 
 
* {max-height: 999999px;} 
/* this solves problem of people who have their settings in 
android set to largest font for everything on phone. Stops 
elements on page changing size that not relative to one another */