/*  #region css reset */
/* start resetEM.css */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
    display: block;
}

body
{
    line-height: 1;
}

ol, ul
{
    list-style: none;
}

blockquote, q
{
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after
    {
        content: '';
        content: none;
    }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}
/* end resetEM.css */

/* addt'l reset */
img, embed, object, video
{
    max-width: 100%;
}
/* #endregion css reset */


/* #region Fixes and Hacks */
/* Self-clearing floats (from the clearfix hack article)*/
.section:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.section
{
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* #endregion Fixes and Hacks */




/* #region General Class Rules */
body
{
    background-color: black;
    background-image: url('../Images/starfield simple.jpg');
    font-family: Verdana;
}

.insignia
{
    float: right;
    max-width: 100%;
}

.mod
{
    background-color: #7f807b; /* dark gray color of ships hull */
    /* border radius with vendor specific additions must be in a non-alphabetical order to work -- Visual Studio 2013 */
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em;
    margin: 0 0 1.5em; /* 25/16= 1.5625 */
    padding: .625em 1.0989010989%; /* 10/16= .625; 10/910= 0.010989010989 */
}

.narrow
{
    display: none;
}

.page
{
    background-color: black;
    background-image: url('../Images/starfield simple.jpg');
    margin: 1.875em auto 0; /* 30/16= 1.875. 30/1020 = .029411764706 */
    width: 92.1568627451%; /* 1020 - 40px margin on each side = 940. 940/1020 = .921568627451 */
}
    /* #endregion General Class Rules */



    /* I prefer the main CSS to be ordered by the flow of the document first, rather than alphabetical order. However, I like the attributes within the selector block (ie rule set) to be alphabetized whenever possible. */


    /* #region page header*/
    .page header
    {
        background-color: black;
        background-image: url('../Images/starfield simple.jpg');
        padding-bottom: 1em;
        position: relative;
        width: 92.1568627451%; /* 940/1020 = .921568627451 */
    }



#enterprise
{
    left: -3.7234042553%; /* -35/940 = .037234042553 */
    max-width: 100%;
    position: absolute;
    top: -29.1666666667%; /* -35/120 = -.291666666667 */
    width: 22.3404255319%; /* 210/940 = .223404255319 */
}

#space_buoy
{
    left: 25%;
    position: absolute;
    top: 12%;
    width: 10%;
    z-index: 99;
}

.page_header_text
{
    background-color: black;
    background-image: url('../Images/starfield simple.jpg');
    color: white;
    font-family: 'Allan', cursive;
    font-size: 1.875em; /* 30/16 = 1.875 */
    /* at 940, has a width of 765 when floated against image */
    margin-left: 22.8758169935%; /* 175/765 = .228758169935 */
}

    .page_header_text h1
    {
        margin: 0 0 5px 0;
        padding: 0;
    }

#phrase1
{
    padding-left: 6.5359477124%; /* 50 / 765 = .065359477124 */
}

#phrase2
{
    padding-left: 19.6078431373%; /* 150 / 765 = 0.196078431373 */
}

#phrase3
{
    padding-left: 32.6797385621%; /* 250 / 765 = 0.326797385621 */
}

#romulan_ship
{
    position: absolute;
    right: 27%;
    top: 2%;
    width: 13%;
    z-index: 99;
}

#klingon_ship
{
    max-width: 100%;
    position: absolute;
    right: -11.25%;
    top: 39.5%;
    width: 22.3404255319%; /* 210/940= 0.223404255319 */
}

#planet_eater
{
    display: none;
    position: absolute;
    right: 2%;
    top: 4%;
    width: 10%;
    z-index: 99;
}

#space_station
{
    display: none;
    position: absolute;
    right: 2%;
    top: 20%;
    width: 10%;
    z-index: 99;
}
/* #endregion page header */

.page_content
{
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10 / 16 = .625 */
    margin-top: 0;
    padding-bottom: .625em; /* 10 / 16 = .625 */
    padding-top: 1.25em; /* 20 / 16 = 1.25 */
}



/* #region nav */
nav
{
    background-color: #242118; /* dark, almost-black gray from the console panel*/
    background-image: url('../Images/Console Panel bck.jpg');
    height: 3.75em; /* 60 / 16 = 3.75 */
    margin: 0;
    padding: .2em 0;
}

    nav ul
    {
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em;
        list-style: none;
        margin: .833333333333em 0; /* 20 / 24 = .833333333333*/
        padding: .175em 0;
    }

        nav ul li
        {
            -moz-border-radius: .9375em;
            -webkit-border-radius: .9375em;
            border-radius: .9375em; /* 15 / 16 = .9375 */
            display: inline;
            font-family: Impact;
            font-size: 1.50em;
            font-weight: bold;
            letter-spacing: .15em;
            margin: .4em;
            padding: .2em .4em;
        }

#nav1
{
    background-color: yellow;
    background-image: url('../Images/yellow button.jpg');
}

#nav2
{
    background-color: pink;
    background-image: url('../Images/pink button.jpg');
}

#nav3
{
    background-color: red;
    background-image: url('../Images/purple button.jpg');
}

#nav4
{
    background-color: purple;
    background-image: url('../Images/red button.jpg');
}


#nav5
{
    background-color: green;
    background-image: url('../Images/green button.jpg');
}

#nav6
{
    background-color: green;
    background-image: url('../Images/yellow button.jpg');
}

nav ul li a
{
    text-decoration: none;
}

    nav ul li a:link
    {
        color: black;
    }

    nav ul li a:visited
    {
        color: darkred;
    }

    nav ul li a:hover
    {
        color: blue;
    }

    nav ul li a:active
    {
        color: red;
    }
/* #endregion nav */


/* #region blurb */
.blurb
{
    background-color: #16161c; /* a dark gray from wall around viewscreen in image.*/
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10 / 16 = .625 */
    font-family: 'Orbitron', sans-serif;
    line-height: 1.20em;
    margin: 0;
    padding: 0 0 .625em 0; /*10 / 16 = .625 */
}

    .blurb figure
    {
        margin: 0 auto;
        width: 30%;
    }

.blurb_content
{
    background-color: antiquewhite;
    -moz-border-radius: .9375em;
    -webkit-border-radius: .9375em;
    border-radius: .9375em; /* 15 / 16 = .9375 */
    color: green; /* like old computer text. */
    margin: 0 auto 1.25em; /* 20 / 16 = 1.25 */
    padding: 1.5625em 2.7472527473%; /* 25 / 16 = 1.5625; 25 / 910 = 0.027472527473 */
    width: 65.9340659341%; /* 600 / 910 = 0.659340659341 */
}

.blurb #computer_screen
{
    background-color: black; /* like a computer screen */
    -moz-border-radius: .9375em;
    -webkit-border-radius: .9375em;
    border-radius: .9375em;
    padding: 1.25em 3.3333333333% 0; /* 20 / 16 = 1.25; 20 / 600 = .033333333333 */
}

.blurb h2
{
    font-size: 1.5em; /* 24 / 16 = 1.5 */
    font-weight: bold;
    padding-bottom: .9375em; /* 15 / 16 = .9375 */
}

.blurb p
{
    font-size: 1em;
    padding-bottom: 1em;
}
/* #endregion blurb */


/* 588:352 is based on the golden ratio at a 940px width (940=588+352). */
/* On 940px width - 15px margins = 910px page width, the ratio is 573:337. */
/* Transition point is 573/910 = 0.629670329670 = 62.9670329670%.*/
/* On a 3000px bg_img, the transition point for the psd is 3000*.629670329670 = 1889. */
main
{
    background: gold url('../Images/2col_mn_bg_img 573.jpg') repeat-y 62.9670329670% 0; /* 573/910 */
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10 / 16 = .625 */
    margin: 0;
    padding: 0;
}

.first_line
{
    float: left;
    padding-bottom: 0;
}

.second_line
{
    float: left;
    padding-top: 0;
}

/* #region article*/
article
{
    float: left;
    font-size: 1.125em; /* 18 / 16 = 1.125*/
    font-weight: bold;
    padding: 1.25em 2.1978021978% 0 2.1978021978%; /* 20 / 910 = 0.021978021978 */
    width: 58.5714285714%; /* 588 (ratio width) -15 (right margin) -20-20 (padding) = 533; 533 / 910 = 0.585714285714 */
}

    article h2
    {
        font-size: 1.75em; /* 28 / 16 = 1.75 */
        padding: 0;
        padding-bottom: .25em; /* 4/16= .25 */
        margin: 0;
    }

    article .insignia
    {
        margin: -5em -1.8761726079% 0 0; /* -45/16= -2.8125; -10/533= -0.018761726079 */
        padding: 0 0 0 1.8761726079%; /* 10 / 533(?) = 0.018761726079 */
        width: 15.947467167%; /* 85 / 533 = 0.15947467167 */
    }

    article cite
    {
        font-size: 1em;
        font-weight: normal;
    }

    article h3
    {
        font-size: 1.375em; /* 22 / 16 = 1.375 */
        padding: .25em 0 .4em;
        text-align: center;
    }

    article p
    {
        line-height: 1.25em;
        padding: 0 1.8761726079% .625em .9380863039%; /* 10/533= .018761726079; 10/16= .625; 5/533= 0.009380863039 */
    }

    article figure
    {
        margin: .9375em 4.6904315197%; /* 15 / 16 = .9375; 25 / 533 = 0.046904315197 */
    }

    article figcaption
    {
        font-weight: normal;
        font-size: 1em;
        text-align: center;
    }

    article .jump_to_gallery
    {
        display: none;
    }

    article #viewscreen_jump_button
    {
        width: 15%; /* 50/940= 0.053191489362 */
    }
/* #endregion main article*/



/* #region aside */
aside
{
    color: bisque;
    float: right;
    margin: 0;
    padding: 0 2.1978021978%; /* 20/910= 0.021978021978 */
    width: 32.6373626374%; /* 352 (ratio total width) -15 (right margin width) -20 -20 (padding) = 297; 297 / 910 = 0.326373626374  */
}

    aside .insignia
    {
        margin-right: -1.0989010989%; /* -10 / 297 = -.033670033670 (or -10/910= 0.010989010989?) */
        margin-top: .3125em; /* 5 / 16 = .3125 */
        width: 20.2020202020%; /* 60 / 297 = .202020202020 (or 60/910= 0.065934065934?) */
    }

    aside h2
    {
        border-bottom: .1875em dotted black; /* 3 / 16 = .1875 */
        border-top: .1875em dotted black; /* 3 / 16 = .1875 */
        font-size: 1.5em; /*24 / 16 = 1.5 */
        margin: .9375em 1.6835016835% .625em; /* 15/16= .9375; 5/297= 0.016835016835; 10/16= .625 */
        padding: .3125em 0; /* 5 / 16 = .3125 */
        width: 55.5555555556%; /* the width of the text. 165 / 297 (?) = .555555555556 */
    }

    aside h3
    {
        font-size: 1.125em; /* 18 / 16 = 1.125 */
        margin: 0;
        padding: .3125em 1.6835016835%; /* 5 / 16 = .3125; 5 / 297 = 0.016835016835 */
    }

    aside ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        aside ul li
        {
            background-image: url('../Images/communicator 20x30.png');
            background-position: 0 left;
            background-repeat: no-repeat;
            border-bottom: .1875em dotted black; /* 3 / 16 = .1875 */
            margin: 0;
            padding: .3125em 1.6835016835% .3125em 8.4175084175%; /* 5/16= .3125; 5/297= 0.016835016835; 25/297= 0.084175084175 */
        }

            aside ul li a
            {
                text-decoration: none;
            }

                aside ul li a:link
                {
                    color: antiquewhite;
                }

                aside ul li a:visited
                {
                    color: #dcb432;
                }

                aside ul li a:hover
                {
                    color: #B8860B;
                }

                aside ul li a:active
                {
                    color: #800000;
                }

    aside p
    {
        font-size: .875em; /* 14 / 16 = .875*/
        padding: 0 0 .3125em 8.4175084175%; /* 5 / 16= .3125; 25 / 297 = 0.084175084175 */
    }
/* #endregion aside */



/* #region gallery*/
.gallery
{
    background-color: blue;
    background-image: url('../Images/blue fabric brite.jpg');
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10/16= .625 */
    margin: 0;
    padding-left: 1.0989010989%; /* 10 / 910 = 0.010989010989 */
}

    .gallery #gallery_header
    {
        padding: .625em 5.1369863014% 1.25em; /* 10/16= .625; 15/292= .051369863014; 20/16= 1.25 */
    }

    .gallery h2
    {
        font-size: 2.1825em; /* 45 / 16 = 2.8125 */
        margin: 0;
        padding: .15em 0;
        text-align: center;
    }

    .gallery .insignia
    {
        margin-right: 2.1978021978%; /* 20 / 910 = 0.021978021978 */
        margin-top: -5.625em; /* -90/16= -5.625 */
        width: 4.3956043956%; /* 50/910= 0.054945054945; 40/910= .043956043956 */
    }

    .gallery figure
    {
        background-color: black;
        border: .4375em solid bisque; /* 7/16= .4375 */
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em; /* 10 / 16 = .625 */
        color: green;
        float: left;
        height: 15em;
        margin: 0 1.0989010989% .9375em 0; /* 10/910= 0.010989010989; 15/16= .9375; */
        padding: .3125em .5494505495%; /* 5/16= .3125; 5/191= 0.026178010471; 5/910= 0.005494505495 */
        /* figure width = */
        /* total container width - outside margins - left pad - figs' margins - figs' borders - figs' padding */
        /*(940-(2*15)-10-(4*10)-(8*7)-(8*5)) /4 = 764/4 = 191 */
        width: 20.9890109890%; /* 191 / 910 = 0.209890109890 */
    }

    .gallery img
    {
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em; /* 10 / 16 = .625 */
        margin: 0;
        max-width: 100%;
        padding: 0;
    }

    .gallery figcaption
    {
        font-size: 1.125em; /* 18 / 16 = 1.125 */
    }
/* #endregion gallery*/


/* #region footer */
footer
{
    background-color: black;
    background-image: url('../Images/starfield simple.jpg');
    margin: 0;
    padding: 1.25em; /* 20 / 16 = 1.25 */
}


#footer_content
{
    color: bisque;
    float: left;
    margin: 0;
    padding: 0;
    /* footer content width = */
    /* total width - img width - block padding - img margin = width */
    /* 940            - 125        - 2*30         - 2*15     = 725*/
    width: 77.1276595745%; /* 725 / 940 = 0.771276595745 */
}

footer p
{
    padding-bottom: .625em;
}

footer img
{
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em;
    float: left;
    margin: 0 1.5957446809%; /* 15 / 940 = 0.015957446809 */
    padding: 0;
    width: 13.2978723404%; /* 125 / 940 = 0.132978723404 */
}

footer #to_top
{
    font-size: .80em;
    padding-top: 1.5em;
}
/* #endregion footer */





/* #region media queries */
/**/
/**/
/**/
/* ************************* */
/* **    media queries    ** */
/* ************************* */
/**/
/**/
/**/
/*
    Targets:
1920px;     samnsung superwide monitor  
1349px;     a common wide screen, like on an hp 17" laptop widescreen monitor
1020px;     a normal, common, albiet obsolescing, browser window size; also the landscape mode on the Samsung 7" tablet.
600px;      portrait mode on the Samsung 7" tablet 
375px       iphone6 
414px       iphone6+
320px;      iphone 5
240px;      many smartphones
*/


/* #region superwide */
/* targets: 1920px -- a samsung superwide test monitor; 1689 -- a mac superwide monitor */
@media screen and (min-width: 1601px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: blue;
    }*/

    #enterprise
    {
        top: -4em;
    }

    #space_buoy
    {
        top: 3em;
    }

    #romulan_ship
    {
        right: 45%;
        top: .3em;
        width: 8%;
    }

    #planet_eater
    {
        display: block;
        position: absolute;
        right: 12%;
        top: 2%;
        width: 10%;
        z-index: 99;
    }

    #space_station
    {
        display: block;
        position: absolute;
        right: .5%;
        top: -1.5%;
        width: 10%;
        z-index: 99;
    }

    #klingon_ship
    {
        right: 10%;
        top: 10%;
    }

    .page_content
    {
        margin: 0 auto;
        /* 940 the satnadard main page content width. For preprogramming flex values, use 1020 page, 940 page_content. For superwide monitor, 1920px - 60px margin on each side = 1800px for superwide page width for page content on a 1920 monitor.*/
        width: 93.75%; /* 1800/1920= .9375 */
    }

    #main-content
    {
        clear: none;
    }

    article .jump_to_gallery
    {
        display: block;
    }

    #topic_content
    {
        float: left;
        margin: 0;
        width: 65.3786707883%; /*846/1294= 0.653786707883*/
    }

    #gallery_container
    {
        float: right;
        width: 28.207109737%; /* 365/1294= 0.28207109737 */
    }

    .gallery #gallery_header
    {
        padding: .625em 5.1369863014% 1.25em; /* 10/16= .625; 15/292= .051369863014; 20/16= 1.25 */
    }

    .gallery h2
    {
        font-size: 26px;
        text-align: left;
    }

    .gallery .insignia
    {
        margin-right: -1.7301038062%; /* -5/289= -0.017301038062 */
        margin-top: -4.375em; /* -70/16= -4.375 */
        width: 13.84083044982699%; /* 40/289= 0.155709342561 */
    }

    .gallery figure
    {
        float: none;
        height: 23em;
        margin: 0 auto 1em;
        width: 85%;
    }

    .gallery
    {
        padding-bottom: .5em;
    }
}
/* #endregion superwide*/


/* #region wide */
/* target: 1350--common width of wide screen computer monitors; hp laptop screen is 1353, for example. */
@media screen and (max-width:1600px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: orange;
    }*/

    .page
    {
        width: 85%;
    }

    #space_buoy
    {
        top: 10%;
    }

    #romulan_ship
    {
        top: 0;
        right: 30%;
    }

    #space_station
    {
        display: none;
    }

    #klingon_ship
    {
        right: -5%; /* -20 / 210 = 0.095238095238 */
        top: 25%; /* 30 / 120 = .25 */
    }

    .gallery .insignia
    {
        margin-right: -4.2573320719%; /* -45/1057= 0.042573320719 */
        width: 5.2034058657%; /* 55/1057= 0.052034058657 */
    }
}
/* #endregion wide */



/* 1020 -- a standard, albeit obsolescing, size on which the main css is based */
@media screen and (max-width:1080px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: deeppink;
    }*/

    #planet_eater
    {
        display: none; /* to restore the previous media query's override. */
    }

    nav ul li
    {
        font-size: 1.25em;
        letter-spacing: .10em;
    }
}
/* end 1020 restorations


/* #region 7" landscape */
/* target: 1024--7" tablets in landscape mode, Samsung Tab3 used for testing */
@media screen and (max-device-width: 1024px) and (orientation: landscape)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: purple;
    }*/

    #space_buoy
    {
        top: 15%;
    }

    #romulan_ship
    {
        right: 29%;
        top: .0000000001%;
    }

    #klingon_ship
    {
        right: -11.5%;
        top: 25%;
    }

    nav ul li
    {
        font-size: 1.25em;
        letter-spacing: .10em;
    }
}
/* #endregion 7" landscape */


/* #region 975 */
/* takes care of a gallery breaking point and a nav breaking point */
@media screen and (max-width: 975px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: blueviolet;
    }*/

    #klingon_ship
    {
        right: -10%;
        top: 40%;
    }

    .gallery figure
    {
        /* 3 figs per row */
        /* following values obtained from inspect element at 873 window width */
        /* div width-left pad-borders-fig pad-rt margin = available width */
        /* 778-8.547-(2*3*7)-(2*3*4.219)-(8.453*3)= 676.78 = 676 */
        /* avaiable width/3=fig width */
        /* 676/3= 225.333333333 = 225 */
        width: 28.9203084833%; /* 225/778= 0.289203084833 */
    }

    nav
    {
        display: block;
        height: 7.9em; /* 3.75*2+padding = 7.5+.2+.2= 7.9*/
        padding-top: 0;
    }

        nav ul
        {
            margin-top: 0;
            padding-top: .5em;
        }

    #nav1, #nav4
    {
        clear: both;
        float: left;
    }

    #nav2, #nav3, #nav5, #nav6
    {
        float: left;
    }
}
/* #endregion 975 */



/* #region a gallery breaking point at 732 */
@media screen and (max-width: 750px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: yellow;
    }*/

    #space_buoy
    {
        display: none;
    }

    article .insignia
    {
        width: 10%;
    }

    .gallery
    {
        padding-left: 2.6785714286%; /* 15/560= .026785714286 */
    }

        .gallery h2
        {
            font-size: 1.6em;
        }

        .gallery .insignia
        {
            margin-right: -3%;
            margin-top: -13%; /*-13%;*/ /* -90/16= -5.625 */
            width: 8%;
        }

        /* 3 figs per row */
        /* values obtained from inspect element */
        .gallery figure
        {
            border: .4375em solid bisque; /*7/16= .4375*/
            height: 15em;
            margin: 0 2.6785714286% .75em 0; /* 15/560=  .026785714286 12/16= .75*/
            padding: .3125em 2.2935779817%; /* 5/16= .3125; 5/228= .021929824561; 5/218= .022935779817 */
            /* reduce gallery to 2 columns */
            /* total width - mn outside margins - gal left pad - figs' R margins - figs' borders - fig pad */
            /* ((560-(2*15)-15-(2*15)-(4*7)-(4*5))/2) = 218, .389285714286 */
            width: 38.9285714286%; /* 191 / 910 = 0.209890109890 was for normal. for narrow, 218/560= .389285714286 */
        }
}
/* #endregion 732 gal brk pt */


/* #region 645*/
/* target: 600, includeing general for 7" tablets in portrait mode */
/* also takes care of some pc breakng points */
@media (max-width: 645px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: red;
    }*/

    .page
    {
        margin: 20px auto 0; /* 30/16= 1.875. 30/1020 = .029411764706 */
        width: 93.3333333333%; /* 600 - 20px margin on each side = 560. 560/600= .933333333333.  normal was 940/1020 = .921568627451. */
    }

    #enterprise
    {
        width: 30%;
    }

    #space_buoy
    {
        display: none;
    }

    #phrase2
    {
        padding-left: 6.5359477124%; /* 50 / 765 = .065359477124 */
    }

    #phrase3
    {
        padding-left: 6.5359477124%; /* 50 / 765 = .065359477124 */
    }

    #romulan_ship
    {
        right: 25%;
    }

    #klingon_ship
    {
        right: -11.5%;
        top: 42.5%;
        width: 30%; /* 210/940= 0.223404255319 */
    }

    nav
    {
        display: block;
        height: 7.9em; /* 3.75*2+padding = 7.5+.2+.2= 7.9 */
        padding-top: 0;
    }

        nav ul
        {
            margin-top: 0;
            padding-top: .5em;
        }

    #nav1, #nav4
    {
        clear: both;
        float: left;
    }

    #nav2, #nav3, #nav5, #nav6
    {
        float: left;
    }

    main
    {
        background: url('../Images/red fabric.png');
        clear: both;
        margin: inherit 2.6785714286%; /* 15/560= .026785714286 */
    }

    article
    {
        background-image: url('../Images/gold fabric brite 1.jpg');
        width: 95.7%;        
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-top-left-radius: .625em;
        border-top-right-radius: .625em;
    }

        article .insignia
        {
            margin-right: 1%;
        }

        article .jump_to_gallery
        {
            display: block;
        }

    .narrow
    {
        display: block;
    }

    main .warpline
    {
        margin-left: -2.7472527473%; /*-25 / 910 = 0.027472527473*/
        width: 105.319148936%; /* 990 / 940 = 1.05319148936 */
    }

        main .warpline img
        {
            height: 2.2em;
            width: 105.319148936%; /* 990 / 940 = 1.05319148936*/
        }

    aside
    {
        background-image: url('../Images/red fabric.png');
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em;
        margin-top: 1.5em;
        padding-bottom: 1em;
        width: inherit; /* without this the wrong width is assigned and it breaks */
    }

        aside h2
        {
            margin-top: 0;
        }

        aside .insignia
        {
            margin-top: .4em;
            width: 12%;
        }
}
/* #endregion 645 */



/* #region 7" portrait */
/* for only tablets in portrait mode */
/* tested on 7" samsung tab3 */
@media screen and (min-device-width:600px) and (orientation:portrait)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: lime;
    }*/

    #romulan_ship
    {
        right: 20%;
    }

    aside .insignia
    {
        margin-top: -1.5em;
    }
}
/* #endregion 7" portrait */



/* #region 530 */
/* targets: 375--iphone6, 414--iphone6 (http://stephen.io/mediaqueries/); 480--iphone3 http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ */
/* also takes care of some pc breakng points */
@media screen and (max-width: 530px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: green;
    }*/

    #klingon_ship
    {
        clear: both;
        float: right;
        margin-right: 5px;
        margin-top: -25px;
        position: relative;
    }

    nav ul li
    {
        font-size: 1.2em;
    }

    .gallery h2
    {
        font-size: 1.35em;
        text-align: left;
    }

    /* reduce gallery to 1 column */
    .gallery figure
    {
        float: none;
        height: 20em;
        margin: 1em auto;
        width: 85%;
    }
}
/* #endregion 530 */



/* #region 400*/
/* target: 320--iphone5 (http://stephen.io/mediaqueries/) and others; 240--many smartphones (http://zeendo.com/info/what-is-the-standard-mobile-screen-resolution/);   */
/* also takes care of some breakng points */
@media screen and (max-width: 400px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
    {
        color: aquamarine;
    }*/

    .gallery h2
    {
        font-size: 1.15em;
        white-space: nowrap;
    }

    #romulan_ship
    {
        display: none;
    }


    nav
    {
        height: 16.25em; /* 260/16= 16.25;  for vertical line */
    }

        nav ul li
        {
            clear: both;
        }
}
/* #endregion 400 */


/* #endregion media queries */