body {
    font-family:Arial, Helvetica, sans-serif;
    background-color:#ffffff;
    font-size:1.0em;
    margin:0px;
}
form {
    margin:0px;
}
span.nw {
    white-space:nowrap;
}
span.m10 {
    display:inline-block;
    margin:0px;
    margin-left:10px;
    margin-bottom:5px;
}
form.slnk, input.slnk {
    display:inline;
}
input.inp {
    margin-left:5px;
    margin-top:5px;
    padding:3px;
    min-width:12em;
    font-size:1.1em;
}
input.inp2 {
    margin-left:20px;
    margin-top:5px;
    padding:3px;
    min-width:12em;
    font-size:1.1em;
}


input.but, button.but {
    margin-left:5px;
    margin-top:5px;
    padding:3px;
    min-width:6em;
    font-size:0.9em;
}
input {
    margin:5px;
}
a.readmore {
    margin:30px;
    margin-top:0px;
    margin-bottom:20px;
}
p.indent { margin-left:40px; }
p.m0 { 
    margin:0px;
    margin-bottom:5px;
    white-space:nowrap;
}
p.m10w { 
    margin:0px;
    margin-left:10px;
    margin-bottom:5px;
}
p.m10 { 
    margin:0px;
    margin-left:10px;
    margin-bottom:5px;
    white-space:nowrap;
}
p,ul,div.pic,pre,table { 
    margin: 30px; 
    margin-top:10px;
    margin-bottom:20px;
}
pre.emsg {
    background-color:#FFF7C0;
}
pre.blue {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
#pixM {
    margin:0px;
    margin-bottom:10px;
}
#res { 
    color:red; 
}
div.pics {
    display:inline-block;
    margin:10px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
}
img.pics {
    max-height:350px;
}
i.pics {
    font-size:larger;
}

div.red {
    margin: 30px; 
    margin-top:10px;
    margin-bottom:20px;
    padding:10px;
    border: 1px solid  red;
}
div.msg2 {
    margin: 1px; 
    border: 1px dashed red;
}
div.msg {
    margin: 80px; 
    margin-top:10px;
    margin-bottom:20px;
}
li { margin-top: 5px; }
hr {
   clear:both;
   margin:20px;
}
h1,h2,h3 {
    margin-top:10px;
    margin-left:20px;
}
h4 {
    margin-top:10px;
    margin-left:30px;
}
p.copy {
    color:#aaaaaa;
    margin:20px;
    font-size:14px;
    text-align:center;
}

a.slnk {
    display:inline;
}
a {
    outline:0;
    display:inline-block;
}
a.legal {
    color:#aaaaaa;
    font-size:14px;
}
a.head { display:block; } 
a:link {
    color: #777;
/*
    text-decoration:none;
    font-weight:bold;
*/
}
a:visited { color: #777; }
a:hover   { color: #222; }
a:active  { color: #777; }

ul.mbar {
    display:block;
    background-color: #ffffff;
    margin:0px;
    padding:0px;
    border: 1px solid #66303D;
    text-align:left;
}
li.menu {
    display:inline-block;
    margin:0px;
    padding:1px;
    width:auto;
    font-size:18px;
}
div.qarea { text-align:center; }
div.quick {
    display:inline-block;
    text-align:center;
    margin: 20px;
    border: 1px solid #eee;
    padding:10px;
}
div.find {
    display:inline-block;
    margin:10px;
}

p.yah {
    margin:0px;
    margin-left:20px;
    padding-top: 10px;
    border-bottom: 1px solid #66303D;
    border-bottom: 1px solid #e0dfdf;
    padding-bottom: 10px;
}
a.menu:link {
    color: #777;
    text-decoration:none;
    font-weight:bold;
}
a.menu:visited { color: #777; }
a.menu:hover   { color: #222; }
a.menu:active  { color: #777; }
a.msel:link    { text-decoration:underline; }

div.mitem { 
    margin:0px; 
    padding:5px;
    text-align:left;
}
div.smenu { 
    display:none; 
    text-align:center;
}
a.smenu {
    font-size:50px;
}

img.quick {
    display:inline-block;
}
img.headur {
    position:absolute;
    top:5px;
    right:5px;
}
a.headbr {
    display:inline-block;
    float:right;
}
img.headbr {
    display:none;
    float:right;
}
div.bannerbg {
    display:block;
    text-align:center;
    margin:0px;
    border:0px;
    background-color:#66303D; 
}
div.banner {
    display:block;
    text-align:center;
}
img.banner {
    display:block;
    margin:0px;
    margin: auto;
    border:0px;
    padding:0px;
}
img.head {
    display:block;
    margin:0px;
    margin-left:auto;
    margin-right:auto;
    /*
    border:1px dashed green;
    max-width:75%;
    width:625px;
    */
}
hr.menu,hr.line { 
    margin:0px;
    margin-top:10px;
    height: 0px; 
    border: 0px; 
    border-bottom: 1px solid #66303D; 
    border-bottom: 1px solid #e0dfdf; 
    clear:right;
}

#col1_1 {
    float:left;
    width:50%;
    padding:0px;
}
#col2_1 {
    float:right;
    width:49%;
    padding:0px;
}
#col1_2 {
    float:left;
    width:50%;
    padding:0px;
}
#col2_2 {
    float:right;
    width:49%;
    padding:0px;
}

@media only screen and (min-width:1024px) { /* For desktop */
    body { margin-left:5%; margin-right:5%; }
}

@media only screen and (min-width:769px) and (max-width: 1024px) { /* For tablets: */
    
}
@media only screen and (max-width: 768px) { /* For mobile phones: */
    img.banner { max-width:100%; }
    img.head  { max-width:100%; }
    img.small  { max-width:80%; }
    div.mitem { 
        width:200px; 
        background-color:#eee;
    }
    img.quick { max-width:90%; }
    div.smenu { display:block; }
    ul.mbar   { display:none; }

    li.menu   { width:100%; }

    img.headur { display:none; }
    img.headbr { display:inline-block; }
    a.smenu:link    { text-decoration:none; }
    /** The trick is to place col2_1 first in html followed by col1_1.
        The float left/right will put them in the right horizontal position
        (col1_1 before col2_1) but, when we go to small screen size and
        set widths to 100%, the html order will put col2_1 first .. which is
        what we want!
    **/
        
    #col1_1 { width:100%; }
    #col2_1 { width:100%; }
    #col1_2 { width:100%; }
    #col2_2 { width:100%; }
}

button.myButt {
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  min-width:0;
  font-size: 16px; /* Increase font size */
}

button.myButt:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
button.myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #66303D; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  min-width:0;
}

button.myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/** following table lines mostly for headstones.cgi **/
table {
    margin:0px;
    padding:0px;
}
div.plot {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
div.but {
    white-space:nowrap;
    display:inline-block;
    padding:0px;
    text-align:left;
}
div.left {
    display:inline-block;
    text-align:left;
    width:100%;
    padding:0px;
    padding-top:10px;
    padding-bottom:10px;
}
div.ctr {
    display:inline-block;
    text-align:center;
    width:100%;
    padding:0px;
    padding-top:10px;
    padding-bottom:10px;
}
span.red {
    color:red;
}
p.plot {
    margin:10px;
}
p.box, div.box {
    display:inline-block;
    border:1px solid red;
    padding:5px;
    margin:30px;
    margin-left:30px;
}
p.smbox {
    display:inline-block;
    border:1px solid red;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
}
textarea {
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:0.5px;
    font-size: 15.5px;
}

table.contact {
    margin-left:30px;
    margin-bottom:50px;
    padding-bottom:20px;
    border-bottom:1px solid grey;
}
table.addr {
    padding:0px;
    margin-left:50px;
}
table.addr td {
    padding:0px;
    margin:0px;
    margin-bottom:5px;
}
input.send {
    font-size:1.0em;
    padding:5px;
    margin:10px;
}
table.addr input {
    padding:5px;
    margin:0px;
    margin-top:15px;
}
table.news {
    margin-left:30px;
    border-collapse:collapse;
}
table.news td {
    border:1px solid gray;
}
table.news th {
    text-align:left;
    color:#fff;
    padding:5px;
    background-color:#66303d;
}
table.news  tr.e td {
    text-align:left;
    background-color:#fff;
    padding:5px;
}
table.news  tr.o td {
    text-align:left;
    background-color:#eee;
    padding:5px;
}
table.news p {
    margin-left:0px;
}
.nameplot,.namelist {
    margin:0px;
    margin-bottom:5px;
    font-size:1.4em;
    font-weight:bold;
    color:#ff0000;
}
span.h2 {
    font-size:1.4em;
    font-weight:bold;
    margin-top:10px;
    margin-left:20px;
}
span.nameHead {
    font-size:1.4em;
    font-weight:bold;
    color:#ff0000;
}
table.cell {
    margin:0px;
    vertical-align: top;
    border:1px solid gray;
}
table.hstone {
    margin:0px;
    vertical-align: top;
    padding:0px;
}
tr.hstone { 
    margin:0px;
    padding:0px;
}
td.hstoneH {
    margin:0px;
    text-align:center;
    vertical-align: top;
    font-size:0.8em;
    padding:5px;
    white-space:nowrap;
    border-top:1px solid #e0dfdf;
    border-left:1px solid #e0dfdf;
    border-bottom:1px solid #e0dfdf;
}
td.hstone {
    margin:0px;
    vertical-align: top;
    font-size:0.8em;
    border-left:1px solid #e0dfdf;
    padding:5px;
}
td.cell {
    margin:0px;
    vertical-align: top;
    border:1px solid #aaa;
    min-width:15em;
}
td.ldata {
    text-align:left;
    padding-top: 0px;
    padding-bottom:10px;
    font-size:0.85em;
    color:#666666;
}
td.cdata {
    text-align:center;
    padding-top: 0px;
    padding-bottom:10px;
    color:#666666;
    }
div.border {
    margin:10px;
    margin-left:30px;
    display:inline-block;
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
}
img.img-600 { max-height:600px; }
img.img-500 { max-height:500px; }
img.img-400 { max-height:400px; }
img.img-300 { max-height:300px; }
img.ctr { max-width:100%; }
img.left { 
    text-align:left;
    max-width:100%; 
}