/* product specific webpages */

h1.h1bar {
    clear: both;
    display: block;
    background-color: #e0e0e0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    padding: 0.2em;
    margin: 0;
    max-height: 100000px;  /* work around font boosting issue in mobile chrome */
    /*    border: 1px solid black; */
}



/* common: Screen shot */
div.ss_vert, div.ss_horiz, div.ss_vec, div.ss_mc {
    border-radius: 10px;  /* rounded frame */
    border: 1px solid black;
    padding: 15px; /* inside border */
    background-color: #eee;
}
/* common: Text inside screen shot */
div.ss_vert p, div.ss_horiz p, div.ss_vec p, div.ss_mc p {
    border-top: 1px solid black;  /* bar above text area */
    margin: 0;
    margin-top: 8px;
    margin-bottom: -8px;
    padding: 0;
    padding-top: 0.2em;
    text-align: center;
    font-size: 0.7em; /* might want 11px or 12px since screen shots not resizeable */
    font-weight: normal;
    line-height: 1.4em;
}
/* common: Bold Text inside screen shot */
/* example what can be done for bold */
div.ss_vert p b, div.ss_horiz p b, div.ss_vec p b, div.ss_mc p b {
    font-size: 1.2em;
}    

/* Common: Vertical screen shot */
div.ss_vert {
    width: 224px;
}
/* common: Image inside Vertical screen shot */
div.ss_vert img { /* 224 by 256 */
    min-width: 224px;
    max-width: 224px;
}

/* Common: Horizontal screen shot */
div.ss_horiz {
    width: 256px;
}
/* common: Image inside Vertical screen shot */
div.ss_horiz img { /* 224 by 256 */
    min-width: 256px;
    max-width: 256px;
}

/* Common: Vector screen shot */
/* scottb, fixme, should these be resizable? */
div.ss_vec, div.ss_vec img {
    width: 100%;
    min-width: 300px;
    max-width: 400px;
    height: auto;
}

/* scottb, fixme, repeat for horiz, vec, and mc. */

/* Screen shot box is a container that holds multiple screen shots */
/* scottb, fixme, do we want screen shots resizable ? */
/* ss_ class is on the div */
/* screen shot outer box (container) */
div.ss_box {
/*    background-color: #fff8d0; */
    overflow: auto; /* clearfix */
    padding: 0px 8px 8px 0px; /* very bottom */
}
/* common: screen shots inside a box */

/* scottb, fixme, repeat for horiz, vec, and mc */
/* common stuff for all vertical screen shots inside a box */
div.ss_box div.ss_vert, div.ss_box div.ss_horiz, div.ss_box div.ss_vec, div.ss_box div.ss_mc {
    float: left;
    margin: 8px 0px 0px 8px;
}
/* common stuff for all text inside a screen shot inside of a box */
div.ss_box div.ss_vert p {
    border-top: 1px solid black;
    margin: 0;
    margin-top: 8px;
    margin-bottom: -8px;
    padding: 0;
    padding-top: 0.2em;
    text-align: center;
    font-size: 0.7em;
    font-weight: normal;
    line-height: 1.4em;
    width: 224px; /* includes image border (if any) - else wide text increases box size */
}
div.ss_box div.ss_vert p b {  /* example what can be done for bold */
    font-size: 1.2em;
}    
div.ss_box div.ss_vert img { /* 224 by 256 */
    min-width: 224px;
    max-width: 224px;
}
img.ss_vert.resize { /* resizeable */
    min-width: 112px;
}
img.ss_horiz { /* 256 by 224 */
    min-width: 256px;
    max-width: 256px;
}
img.ss_horiz.resize { /* resizeable */
    min-width: 128px;
}
img.ss_vec { /* 400 by 296 */
    min-width: 400px;
    max-width: 400px;
}
img.ss_vec.resize { /* resizeable */
    min-width: 200px;
}
img.ss_mc { /* 256 by 231 missile command - same as horiz ? */
    min-width: 256px;
    max-width: 256px;
}
img.resize { /* generic resize, must use inline style for min/max */
    height: auto;
    width: 100%;
}

.clearfix {
    overflow: auto;
}

.gametext {
    font-size: 1.1em;
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
/*    font-family: "Lucida Console", Monaco, monospace; */
    white-space: nowrap;
}

.button {
    border: 1px solid red;
    font-size: 0.7em;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background-color: #ddf0ff;
    color: #444;
}

body.main {
/*    background-color: magenta; */
    max-width: 1024px;
}

.intro {
    width: 100%;
/*    min-width: 480px; */
/*    background-color: wheat; */
    height: auto;
}
.intro p {
    max-height: 100000px;  /* work around font boosting issue in mobile chrome */
    font-size: 0.9em;
    padding: 0;
    margin: 0.2em 0.3em 0.4em 0.3em;
    overflow: hidden;
}

/* resizeable */
.pic {
    width: 35%;
    float: left;
    margin-left: 0.2em;
    margin-right: 0.3em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    position: relative;
    max-width: 320px; /* move to inline */
    min-width: 160px; /* move to inline */
/*    background-color: lightblue; */
/*    border: 1px solid black; */
}
.pic a {
    text-decoration: none;
    color: inherit;
}
.pic img {
    display: block;
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: left;
}
.pic img a {
    display: block;
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.pic h4 {
    text-align: center;
    font-size: 0.9em;
/*    background-color: lightgreen; */
    font-weight: normal;
}
.pic h5 {
    text-align: center;
    font-size: 0.7em;
/*    background-color: lightpink; */
    font-weight: normal;
    position: relative;
    bottom: 1.4em;
    left 0;
/*    right: 1.0em; */
}

.hs-price {
    clear: both;
    padding-top: 0.5em;
/*    background-color: limegreen; */
}

.features {
/*    background-color: blue; */
}

ul.feat-ast {
/*    background-color: orange; */
    list-style-type: none;
    margin: 0px 0px 0px 0px;
}
ul.feat-ast > li {
 /*   background-color: lightgreen; */
    background-image: url('li-ast-saucer.gif'); /* must be in styles directory */
    background-repeat: no-repeat;
    background-position: 5px 5px;
    padding: 0.5em 1.0em 0.5em 42px;
    margin: 0px 0px 0px 0px;
    vertical-align: middle;
}

.misc {
/*    background-color: lightblue;  see also body misc */
}

/* these need to be AFTER the original definitions so they override */
@media screen and (max-width: 50px) {
/*    body { background-color: lightblue; } */
}
@media screen and (max-width: 40px) {
/*    body { background-color: lightgreen; }  */
    .pic { min-width: 400px; }  /* this is needed to scale image back up */
    .pic { width: 400px; }  /* this is needed to scale image back up */
    .pic { margin-right: 1000px; }  /* this is need to push text to below picture */
    .intro p {  background-color: lightblue;  /* clear: both; */ overflow: visible; }
}

.toc ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
}

.toc ul li, .toc ul li a {
    font-size: 1.1em;
    margin: 0.2em 0.2em 0.2em 0.2em;
    text-decoration: none;
}
.toc ul li a:hover { text-decoration: underline; }

table.reseller {
    border-collapse: collapse;
    border-width: 0px;
}

table.reseller td, table.reseller td.a {
    padding: 8px;
    text-align: center;
    border: 1px solid black;
    font-weight: bold;
}