body {
	font-size: 62.5%;
}

/*-- common style rules ---------------------------------------------*/
.color1 {
	background: #4e6424;  /* dark blue (header) */
}

.color2 {
	color: #ffcc99;  /* #ffffdd; */
}

.color3 {
	color: #993232;  /* red */
}

.color4 {
	color: #04486a;  /* dark blue */
}

.color5 {
    color: #f3f3f3;
}

.color6 {
    color: #a6111f;  /* dark red */
}

.color7 {
    color: #08364c;  /* dark blue */
}

.bottom-border {
    width: 95%;
    border-bottom: thin groove #000000;
/*    padding: 0 10%; */
}

.left {
    float: left;
}

.right {
    float: right;
}

.no-margin {
	margin: 0;
	padding: 0;
}

.hidden {
    visibility: hidden;
}

.relative {
    position: relative;
}

.no-display {
	display: none;
}

.small-no-display {
    display: block;
}

.italic {
    font-style: italic;
}

.strong {
	font-weight: 600;
}

.center {
    text-align: center;
}


/*-- common style rules - padding/margins --------------------------*/
#page {
    margin: 0 2%;
}

.top-pad-10 {
    padding-top:10px;
}

.top-pad-20 {
    padding-top: 20px;
}

.top-pad-30 {
    padding-top: 30px;
}

.bottom-pad-10 {
    padding-bottom: 10px;
}

.bottom-pad-20 {
    padding-bottom: 20px;
}

.bottom-pad-30 {
    padding-bottom: 30px;
}

.left-pad-20 {
    padding-left: 20px;
}

.left-pad-30 {
    padding-left: 30px;
}

/*-- page rules ----------------------------------------------------*/
#page-wrapper {
    width: 97%;
    margin: 7% 3% 0 3%;
}

#hm-page {
/*    background-color: #006699; */
    
    /* Safari 4-5, Chrome 1-9 */
    /* Can't specify a percentage size? Laaaaaame. */
    background: -webkit-gradient(radial, center center, 0, center center, 600, from(#1a82f7), to(#006699));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #1a82f7, #006699);

    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #1a82f7, #006699);

    /* IE 10 */
    background: -ms-radial-gradient(circle, #1a82f7, #006699);
    
    
}

#ma-page {
    background-color: #dcdcdc;
}

#fa-page {
    background-color: #dcdcdc;
}

#mem-page {
    background-color: #76808f;
}

#qt-page {
    background-color: #f3f3f3;
}

/*-- top bar / navigation ------------------------------------------*/
.top-bar-title {
}

#hamb-button {
}

.title-bar {
	height: 60px;
	margin: 0;
	padding: 0;
	background: #006699;
}

.menu-text {
	padding: 0;
}

.top-bar {
	width: 100%;
	height: auto;
    position: fixed;
    overflow: visible; /* N */
    left: 0;
    top: 0;
    z-index: 999;  /* N */
/*    background: #006699;*/
}

.top-bar ul {
	width: 100%;
	height: 50px;
	padding: 1% 0 0 0;
	margin: 0;
/*	background: #006699; */
}

.top-bar ul li a {
	color: #c6b184;
}

#top-fa-menu h2 {
    float: left; 
	color: #fff9fb;
	font-style: italic;
    font-size: 30px;
	font-weight: 600;
    padding: 1% 0 0 7%;
	margin: 0;
}

#top-fa-menu ul {
	padding: 0;
	margin: 0;
	background: #6a2f1b;		
}

#top-fa-menu ul li a {
	color: #ffcc99;
}

#top-fa-toggle {
	display: none;
}

.top-bar-right {
	width: 100%;
}

.top-bar-right ul li {
	font-size: 1.75em;
}

@media screen and (max-width: 50em) {
	#page-wrapper {
	    margin: 15% 3% 0 3%;
	}
	
	.top-bar-title button {
		margin-top: 15px;
	}
	
	#hamb-button {
		padding-left: 1em;
	}
	
	#top-fa-menu {
		float: right;
	}
	
	#top-fa-menu h2 {
	    padding-left: 10%;
	}

	.top-bar {
		height: 60px;
		padding-left: 0;
	}
	
	.top-bar-right {
		background: #ffffff;
		visibility: hidden;
	}
	
	#responsive-menu ul li {
		width: 180px;
		visibility: visible;
		background: #6a2f1b;
	}
	
	.engraved div {
		height: 200px;
		margin: 120px auto 0 auto;
	}

	.engraved-text {
	}
}

/*-- rules to prevent 'flash of unstyled content' ------------------*/
.no-js .top-bar-right {
  display: none;
}

@media screen and (min-width: 40em) {
  .no-js .top-bar-right {
    display: block;
  }
  
  .no-js .top-bar-title {
    display: block;
  }
  
  #hamb-button {
    display: none;
  }
}
/*-- end of FOUC code ----------------------------------------------*/
  
/*-- home page -----------------------------------------------------*/
.engraved div {
	position: relative;
    width: 100%;
    height: 600px;
}

.engraved-text {
	display: block;
    color: #424143;
 /*   background-color: #006699; */
    font-family: "Arial", sans-serif;
 /*   font-size: 100px; */
	font-size: 11vw;
    font-weight: bold;
    font-style: italic;
	text-shadow: 0px 1px 0px rgba(128,128,128,.7), 0px -2px 0px rgba(0,0,0,1.5);
	margin: 10% auto 0 auto;
	text-align: center;
}

/*-- memoriam page(s) ----------------------------------------------*/
#memoriam-img {
    display: block;
    width: 280px;
    height: auto;
    border: 10px solid #000000;
    padding: 5px;
    margin: 0 auto;
}

.memoriam-caption {
    text-align: center;
    color: darkblue;
}

.memoriam-text {
    padding: 0 3%;
    color: #000000;
}

.memoriam-text a, .memoriam-text a:visited {
    color: blue;
}

#obit-img {
    display: block;
    width: 500px;
    height: auto;
    border: 5px solid #000000;
    margin: 0 auto;
}

/*-- webmail page --------------------------------------------------*/
.mail-clients {
    display: block;
    margin: 0 auto;
}

.fieldset {
	border: 2px solid #000000;
	width: 20em;
    margin: 0 auto;
}

.fieldset legend {
	color: #FFFFDD;
	background: #336699;
	border: 1px solid #781351;
	margin-left: 6px;
	padding: 2px 6px;
}

.fieldset label {
	width: 8em;
/*
	float: left;
	text-align: left;
	margin-right: 0.5em;
*/
	display: block;
}

.fieldset-button {
    text-align: center;
}

/*-- login page ----------------------------------------------------*/
#error_msg {
  position: relative;
  text-align: center;
}

#err_msg_1 {
	font-size: 1.1em;
	color: red;
	padding: 0;
}	

#err_msg_2 {
	font-size: 1.1em;
	color: #F5F5F5;  /* same as background - smoke white */
	padding: 0;
}

/*-- main family area page -----------------------------------------*/

.main-fa-page {}

.main-fa-page h4 {
    color: #000000;
    font-size: large;
    text-align: center; 
}

.fa-main-img {
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.fa-main-img-large {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.fa-main-img-small {
    display: block;
    width: 60%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.fa-title h3 {
    font-size: 40px;
    padding-top: 15px;
}

.fa-main-title h4 {
    font-size: 20px;
}

/*-- fa common -----------------------------------------------------*/
.img-fa-page-hdr {
    width: 80%;
    vertical-align: middle;
}

.img-fa-page-hdr-small {
    width: 65%;
    vertical-align: middle;
}

.txt-fa-page-hdr {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}





/*-- document viewer page ------------------------------------------*/
.viewer {}

.viewer img {
	width: 100%;
	height: auto;
}

/*-- end documant viewer page --------------------------------------*/


/*-- quarto! tournament --------------------------------------------*/
#qt-champ-img {
    width: 100%;
}

#qt-champ figcaption {
    text-align: center;
}

#qt-game-img {
    width: 325px;
    height: auto;
    padding: 5px;
}

#qt-trophy-img {
    width: 150px;
    height: auto;
    padding: 5px;
}

#qt-results img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.qt-results-heading {
    margin: 0;
	text-align: center;
	padding-bottom: 0.1em;
}
	
.qt-results-heading h1 {
	margin: 0;
	padding: 0;
	font-family: Verdana;
	font-size: 1.75em;
	text-decoration: none;
}

.qt-results-heading h3 {
    color: darkred;
    text-align: center;
}

.qt-results-heading h4 {
    text-align: left;
}

.qt-summary-heading h3 {
    color: darkred;
    text-align: left;
}

.qt-summary-heading h4 {
    text-align: left;
}

.qt-text {
	text-align: left;	
}

.qt-summary-text {
	font-family: Arial;
	font-size: 1em;
	padding-right: 15px;
	text-decoration: none;
}

.qt-img {
/*	padding: 20px 0 10px 75px;*/
	width: 800px;
	height: auto;
	margin: 0 auto;
}

.qt-table {
	table-layout: fixed;
	width: 100%;
	white-space: nowrap;
}

.qt-table a:hover {
    color: red;
}

.qt-rank-table tbody th, .qt-rank-table tbody td {
	padding: 0;
	border-right: 1px solid #000000;
}

.qt-table-name {
	display: block;
	text-align: left;
	margin-left: 10px;
}

.qt-outcome-table tbody th, .qt-outcome-table tbody td.a {
	padding: 0;
	border-right: 2px solid #000000;
	text-align: center;
}

.qt-outcome-table tbody td.b, .qt-outcome-table th.b {
	padding: 0;
	border-right: 1px solid #000000;
	text-align: center;
}

.qt-outcome-table tbody td {
	width: 1%;
}

.qt-outcome-table-name {
	text-align: left;
	padding-left: 20px;
	border-right: 1px solid #000000;
	
}

.row-rank {
	width: 3%;
}

.row-name {
	width: 5%;
}

.row-games {
	width: 8%;
}

.row-tgames {
	width: 6%;
}

.row-tourney {
	width: 6%;
}

.row-score {
	width: 6%;
}

.color-th1 {
    background-color: #5b7f9a;
}

.color-tr1 {
    background-color: #93aebf;
}

.color-tr2 {
    background-color: #d9c5a0;
}

.color-tr3 {
    background-color: #9e9e9e;
}

.color-tr1 td a, .color-tr2 td a, h6.standings-link a {
    color: #076df2;
}

h6.standings-link a:hover {
	color: #ff0000;
}

.standings-link {
	font-style: italic;
}	

.qt-summary-table {
	margin: 0 0 0.50em 0;
	padding: 0;
}

.qt-summary-table h4 {
	font-family: Arial;
	font-size: 1em;
	text-decoration: none;
	padding-top: 5px;
}

.qt-summary-table td {
    background-color: #f3f3f3;
} 

.qt-summary-table .button {
	line-height: 1.25;
    font-size: 0.75em;
	background-color: #3382aa;
	color: #ffffff;
	padding: 0.50em 0.60em;
	margin-top: 0.75em;
}

.qt-summary-table .button:hover, .at-summary-table .button:focus {
    background-color: #3399cc;
    color: #fefefe; }

.qt-summary-table input {
    font-size: 0.75em;
}

.qt-standings-table-row {
	width: 0.75em;
}

.fn-div {
	text-align: justify;
	border-right: 1px solid #000000;
}

.fn-img {
	padding: 1.5em 1.5em 0.5em 0.25em;
}

.footnote-1 {
	display: block;
	font-family: sans-serif;
	font-size: smaller;
	padding-right: 20px;
}

/*-- downloads -----------------------------------------------------*/
.img-dl-thumb {
    width: 70%;
    height: auto;
	margin: 0 15%;
}

.text-dl-thumb {
	display: block;
    font-size: 0.75em;
    text-align: center;
	padding-top: 10px;
}

/*-- footer --------------------------------------------------------*/
#footer-hm {
	clear: both;
	float: left;
	width: 100%;
	height: 1.75em;
	font-size: 0.9em;
	text-align: left;
	padding: 4px 0 0 10px;
/*
	border-top: 1px solid #000000;	
	border-bottom: 1px solid #000000;	
*/
}

#footer-hm a, a:visited {
	color: #ffcc99;
}
	
#footer {
	clear: both;
	float: left;
	width: 100%;
	height: 1.75em;
	font-size: 1.5em;
	text-align: left;
/*	background-color: #dcdcdc; */
	padding: 4px 0 0 10px;
/*
	border-top: 1px solid #000000;	
	border-bottom: 1px solid #000000;	
*/
}
	
#footer a, a:visited {
	text-decoration: none; 	
	color: #000000;
}

@media screen and (max-width: 50em) {
    .sv-marg-top20 {
        padding-top: 20px;
    }
    
    .fa-main-img {
        width: 55%;
    }
    
    .fa-main-img-large {
        width: 65%;
    }
    
    .fa-main-img-small {
        width: 45%;
    }
    
    .fa-title h3 {
        font-size: 30px;
        padding-top: 15px;
    }
    
    #qt-champ-img {
        margin: 0 5%;
    }

    #qt-champ figcaption {
        text-align: center;
    }
    
    .small-no-display {
        display: none;
    }

	.footnot-1 {
		padding: 0;
	}
	.fn-div {
		border: none;
	}
	
	.fn-img {
		padding: 1.0em 0 0 0;
	}
	
	.nameplate {
		height: 17vh;		
	}
	
	.fill > div {
		height: 17vh;
	}
	
	.box-font {
		font-size: 1.3em;
	}

    .anc-page h4 {
        font-size: 2em;
    }
    
    .anc-page h5 {
        font-size: 1em;
    }
    
    .anc-page h6 {
       font-size: 1.15em;
    }

}

@media screen and (max-width: 320px) {
    body {
        font-size: 33.3%;
    }
    
    gen-img-disp {
        display: none;
    }
}