body { background: linear-gradient(Navy, Grey, White); /* background-color:Navy; */ margin-left: 20px; margin-top:20px; margin-bottom:20px; margin-right:20px; }

.body_div {
    background: linear-gradient(White, LightGrey, Navy);
    max-width: 1000px;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    font: normal 14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

.navcontainer { margin: 10px 0 0 0; padding: 0; height: 20px; }
.navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; }
.navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
.navcontainer ul li a {
    background: rgba(255, 255, 255, 0.50); width: auto; padding: 0 5px 0 5px; height: 22px;
    border-top: 1px solid #b7e9ff; border-left: 1px solid #b7e9ff; border-bottom: 1px solid #b7e9ff; border-right: none; text-shadow: 2px 2px 5px black;
    margin: 0 0 10px 0; color: black; text-decoration: none; display: block; text-align:center; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
.navcontainer ul li a:hover { color: black; background: #05b3ff; text-shadow: none; }
.navcontainer a:active { background: #800080; color: #fff; }
.navcontainer li#active a { background: #800080; border: 1px solid #800080; color: #fff; }
.navcontainer .blkbox {
    background: #000; width: auto; padding: 0 5px 0 5px; height: 22px;
    border-top: 1px solid #b7e9ff; border-left: 1px solid #b7e9ff; border-bottom: 1px solid #b7e9ff; border-right: none;
    margin: 0 0 10px 0; color: white; text-decoration: none; display: block; text-align:center; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#quicklinks { margin: 10px 0 0 0; padding: 0; height: 20px; }
#quicklinks ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; }
#quicklinks ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; }
#quicklinks ul li a {
    width: 110px; height: 22px;
    padding: 0; margin: 0 0 0 0; color: White/* #555 */; text-decoration: none; display: block; text-align:center; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#quicklinks ul li a:hover { text-decoration: underline; color:Yellow/*Black*/; }
.hierarchy { margin: 10px 0 0 0; padding: 0; height: 20px; }
.hierarchy ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; }
.hierarchy ul li { display: block; float: left; text-align: center; margin: 0;
    width: auto; height: 22px; padding-left:5px; color: Black; text-decoration: none; display: block;
    font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
.hierarchy ul li a { border-right: 1px solid #555; padding-right:5px; text-decoration: none; color: #555; }
.hierarchy ul li a:hover { text-decoration: underline; color:Black; }

/*-----*/

.image_text { margin: 0 0 0 0; padding: 0; height:auto; /*height:85; */ width:auto /*280px*/; /* border: 1px solid red; */ display: inline; }
.image { border:0; /*width:75; height:75;*/ display: inline-block; }
.video { border:0; /*width:75; height:75;*/ display: inline-block; }

.text { position:relative; top:-10px;  left:-20px; white-space:nowrap; /* left: 45; top: -20; */
    width:auto; padding: 0 5px 0 5px; height: auto; background: rgba(255, 255, 255, 0.75); /* border: 1px solid black; */
    /*margin: 0 0 0 0;*/ color: black; text-decoration: none; display: inline; text-align:left; font: normal 12px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    float:inherit; text-shadow: 2px 2px 5px black;
}
.text:hover { color: black; /* background: #05b3ff;  */ text-decoration:underline; }

/* tables */
.table { background-color:LightGrey; border:1px solid #444; padding:5px; display:block; border-radius:10px; max-width:1000px; }

h3 { background-color: #EEEEEE; padding: 5px; display: inline; border-radius: 5px; border: 1px solid #444; }

.texttable {
    background-color: #EEEEEE;
    border: 0px solid #444;
    padding: 5px;
    display: block;
    border-radius: 10px;
}

/* prices */
.price { margin: 0 0 0 0; padding: 0; height:auto; /*height:85; */ width:auto /*280px*/; /* border: 1px solid red; */ display: inline; }
.price_image { display: inline; position:relative; top:7px; padding-left: 5px; /* border: 1px solid green; */ }
.price_text { position:relative; height:25px; width:auto; /*top:-10px;  left:-20px; */ white-space:nowrap; /* left: 45; top: -20; */
    padding: 0 3px 0 3px; height: auto; background: rgba(255, 255, 255, 0.75); /* border: 1px solid black; */
    /*margin: 0 0 0 0;*/ color: black; text-decoration: none; display:inline; text-align:left; font: normal 16px/22px /*12px/18px*/ "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    float:inherit; text-shadow: 2px 2px 5px black;
}

.copyright { color: white; }

.box {
    border: 1px solid black; border-radius:7px;
    padding: 2px;
    height: 24px;
    background: linear-gradient(White, LightGrey);
}

.buybutton {
    position: relative;
    border: 0px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px #000000;
    background: linear-gradient(#4EA4D7, #1A469D);
}

.redbutton {
    position: relative;
    border: 0px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px #000000;
    background: linear-gradient(#d7514e, #9d192a);
}

.greenbutton {
    position: relative;
    border: 0px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px #000000;
    background: linear-gradient(#4DD781, #199D71);
}

.bluebutton {
    position: relative;
    border: 0px;
    border-radius: 7px;
    text-shadow: 2px 2px 3px #000000;
    background: linear-gradient(#4EA4D7, #1A469D);
}

.redinput {
    color: white;
    background: linear-gradient(#d7514e, #9d192a);
    border: 0px;
    border-radius: 7px;
    font-family: 'atlantabook';
    font-size: 14pt;
    height: 35px;
    text-shadow: 2px 2px 3px #000000;
}

.greeninput {
    color: white;
    background: linear-gradient(#4dd781, #199d71);
    border: 0px;
    border-radius: 7px;
    font-family: 'atlantabook';
    font-size: 14pt;
    height: 35px;
    text-shadow: 2px 2px 3px #000000;
}

.blueinput {
    color: white;
    background: linear-gradient(#4EA4D7, #1A469D);
    border: 0px;
    border-radius: 7px;
    font-family: 'atlantabook';
    font-size: 14pt;
    height: 35px;
    text-shadow: 2px 2px 3px #000000;
}

.buttonText {
    position: absolute;
    top: 2px;
    left: 11px;
    font-family: 'atlantabook';
    color: White;
    text-shadow: 2px 2px 3px #000000;
}

.inputField {
    height: 25px;
    border-radius: 7px;
    border-width: 1px;
    color: blue;
}

/* card */
.card {
    position: relative;
    width: 300px;
    height: 175px;
    border: 1px solid #808080;
    clip-path: inset(0 0 0 0);
}

.card:hover {
    border: 1px solid black;
}

.card-button {
}

.card-background {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #FFFFFF;
}

.card-image {
    position: absolute;
    left: 0px;
    width: 300px;
    height: 175px;
}

.card-text {
    position: absolute;
    line-height: 1;
    font-family: Roboto,system,sans-serif;
    font-size: 30pt;
    color: #000000;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
    text-overflow: clip;
    letter-spacing: -0.6px;
    word-spacing: 1.8px;
    -webkit-font-smoothing: antialiased;
    background: rgba(255, 255, 255, 0.85);
    padding: 0 5px 0 5px;
    border: 1px solid #808080;
    border-radius: 5px;
}

.card-text:hover {
    background: rgba(192, 192, 192, 0.85);
    border: 1px solid black;
}

.missingImage {
    position: relative;
    width: 75px;
    height: 75px;
    background-color: #777;
}

@font-face {
    font-family: 'commercialscript_btregular';
    src: url('comscrtn-webfont.eot');
    src: url('comscrtn-webfont.eot?#iefix') format('embedded-opentype'),
         url('comscrtn-webfont.woff2') format('woff2'),
         url('comscrtn-webfont.woff') format('woff'),
         url('comscrtn-webfont.ttf') format('truetype'),
         url('comscrtn-webfont.svg#commercialscript_btregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'atlantabook';
    src: url('bratlrs0.eot');
    src: url('bratlrs0.eot?#iefix') format('embedded-opentype'),
         url('bratlrs0.woff2') format('woff2'),
         url('bratlrs0.woff') format('woff'),
         url('bratlrs0.ttf') format('truetype'),
         url('bratlrs0.svg#atlantabook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light.eot');
    src: url('Roboto-Light.eot?#iefix') format('embedded-opentype'), url('Roboto-Light.woff2') format('woff2'), url('Roboto-Light.woff') format('woff'), url('Roboto-Light.ttf') format('truetype'), url('Roboto-Light.svg#Roboto') format('svg');
    font-weight: 300;
    font-style: normal;
}