/* rem for font sizes, else em */

:root {
  --top-menu-text-color:whitesmoke; /* #F5F5F5 */
  --top-menu-background:midnightblue; /* #191970 */
  --top-menu-hover:#B6DAEE;
  --dropdown-list-background:#FBFBFB;
  --dropdown-link-hover:#EDEDED;
  --menu-font-weight:normal;
  --menu-font-size:1.1rem;
  --content-background:#FCFFFF;
  --outer-background:#F5F8F8;
  --masthead-background:#F6FFFF;
  --action-button-background:whitesmoke; /* #F5F5F5 */
  --action-button-hover:#E7E7E7;
  --link-text:darkblue; /* #00008B */
  --link-text-visited:purple; /* #800080 */
  --link-text-hover:blue; /* #0000FF */
  --link-text-active:firebrick; /* #B22222 */
  --top-text-color:midnightblue; /* #191970 */
  --price-text-color:firebrick; /* #B22222 */
  --border-color:black;
}

.linktext{color:var(--link-text);}
/* note: order of link states is critical */
.linktext:visited{color:var(--link-text-visited);}
.linktext:hover{color:var(--link-text-hover);}
.linktext:active{color:var(--link-text-active);}
.h1-style{color:var(--top-text-color);font-size:1.6rem;font-weight:bold;text-align:left;}
.h2-style{color:var(--top-text-color);font-size:1.1rem;font-weight:bold;text-align:left;}
.copyrightstyle{font-size:0.8rem;text-align:center;}
.companyname{color:var(--top-text-color);font-style:italic;font-weight:bold;}
.productname{color:black;font-weight:bold;}
.pricestyle{color:var(--price-text-color);}
.dollar{color:var(--price-text-color);font-size:0.8rem;vertical-align:text-top;}
.float-div{display:flow-root;}
.aligncenter{text-align:center;}
.left-margin{margin-left:1.5em;}
.top-margin-large{margin-top:1.5em;}
.top-margin-small{margin-top:1em;}
.bottom-margin{margin-bottom:1.5em;}
.spaced-list-item{margin-bottom:0.4375em;}
.hr-style{border:none;height:0.05em;background-color:gray;}
.action-button{width:8em;height:2.2em;margin-top:0.4em;background-color:var(--action-button-background);color:black;font-size:1rem;border-radius:1.56em;border-color:var(--border-color);border-width:0.075em;}
.action-button:hover{cursor:pointer;background-color:var(--action-button-hover);font-weight:bold;}
.floatleft{float:left;}
.floatright{float:right;}
.post-button-width{width:20em;}
.mobile-detected{display:none;}
.tiny-font{font-size:0.8rem;}
.pricediv{width:60%;}
.converter-image{width: 300px;height: auto;margin-bottom:1em;margin-right:1em;}

.link-row{text-align:center;margin:1em 0 1em 0;}
.link-row-spacer{display:none;}
.link-row-item{font-size:1rem;margin:0 1.5em 0 1.5em;color:var(--link-text);}
/* note: order of link states is critical */
.link-row-item:visited{color:var(--link-text-visited);}
.link-row-item:hover{color:var(--link-text-hover);}
.link-row-item:active{color:var(--link-text-active);}

.top-menu-link-desktop{float:right;font-size:var(--menu-font-size);color:var(--top-menu-text-color);font-weight:var(--menu-font-weight);text-align:center;margin:0.25em 0.8em 0.25em 0.25em;text-decoration:none;}
.top-menu-link-desktop:hover{color:var(--top-menu-hover);}
.top-menu-link-mobile{float:left;font-size:var(--menu-font-size);color:var(--top-menu-text-color);font-weight:var(--menu-font-weight);text-align:center;margin:0.25em 0 0.25em 1.25em;text-decoration:none;}
.top-menu-link-mobile:hover{color:var(--top-menu-hover);}
.dropbutton-desktop{font-size:var(--menu-font-size);color:var(--top-menu-text-color);font-weight:var(--menu-font-weight);text-align:center;margin:0.18em 0.6em 0 0;background-color:var(--top-menu-background);border:none;}
.dropbutton-desktop:hover{color:var(--top-menu-hover);cursor:pointer;}
.dropbutton-mobile{font-size:var(--menu-font-size);color:var(--top-menu-text-color);font-weight:var(--menu-font-weight);text-align:center;margin:0.2em 0 0.1em 1em;background-color:var(--top-menu-background);border:none;}
.dropbutton-mobile:hover{color:var(--top-menu-hover);cursor:pointer;}
.dropdown-list{display:none;position:absolute;background-color:var(--dropdown-list-background);min-width:14em;border-radius:0.5em;border-color:darkgray;border-style:solid;border-width:0.01em;}
.show{display:block;} /* used in javascript - preserve order of these classes */
.dropdown{position:relative;display:inline-block;z-index:1;}
.dropdown-link{font-size:var(--menu-font-size);color:black;font-weight:var(--menu-font-weight);text-align:left;display:inline-block;margin:0.3em 0 0.3em 0.5em;text-decoration:none;}
.dropdown-link:hover{background-color:var(--dropdown-link-hover);}
.single-column-container{width:98%;border-style:solid;border-radius:0.5em;border-width:0.05em;border-color:var(--border-color);
background-color:var(--content-background);padding:1em 1em 1em 1em;margin:2.5% 0 2.5% 0;}

#desktop-navigation{clear:both;background-color:var(--top-menu-background);padding-right:1em;height:1.8em;}
#mobile-navigation{display:none;background-color:var(--top-menu-background);height:1.8em;}

#bodystyle{margin:0;font-family:Arial,Tahoma,Helvetica;font-size:1rem;background-color:var(--outer-background);}
#top-container{width:100%;background-color:var(--masthead-background);}
#content-div{width:90%;margin:2.5% 5% 2.5% 5%;background-color:var(--outer-background);text-align:left;}
#masthead-image-div{float:left;padding:0.35em 0.3em 0 0.3em;}
#masthead-title-div{float:left;}
#masthead-title-div p{color:var(--top-text-color);font-size:1.7rem;font-weight:bold;text-align:left;margin:0;padding:0.8em 0 0.4em 0.5em;}
#masthead-list-div{float:right;margin:1.5em;}
#masthead-list-div li{color:var(--top-text-color);font-size:1rem;font-weight:bold;text-align:left;}

#desktop-footer{width:90%;overflow:auto;clear:both;text-align:center;margin:0 0 0.3125em 3em;font-size:0.8rem;}
#mobile-footer{display:none;width:100%;overflow:auto;clear:both;text-align:center;margin-bottom:0.3125em;font-size:1.2rem;}
#email-footer{font-size:0.8rem;text-align:center;}

@media screen and (max-width: 60em) {
.desktop-download{display:none;}
.mobile-detected{display:block;}
.dropbutton-mobile{margin:0.2em 0 0.1em 0.5em;}
.pricediv{width:80%;}
.single-column-container{width:94%;}
#desktop-footer{display:none;}
#mobile-footer{display:block;}
#email-footer{display:none;}
}

@media screen and (max-width: 50em) {
#desktop-navigation{display:none;}
#mobile-navigation{clear:both;display:block;}
}

@media screen and (max-width: 40em) {
body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
.h1-style{font-size:1.3rem;}
.link-row-item{font-size:1.2rem;margin:0 0 0 0;}
.link-row-spacer{display:block;}
.spaced-list-item{padding:0.5em 0 0.5em 0;}
.single-column-container{width:90%;}
#masthead-list-div{display:none;}
}