/*  #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/portal chip.jpg');
    font-family: Verdana;
}

.mod
{
    background-color: blanchedalmond; /* 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: 1.25em; /* 20/16= 1.25 */
}

.narrow
{
    display: none;
}

.page
{
    background-color:navy;
    /*background-image: url('../Images/circuit board 2.jpg');*/
    background-image: url('../Images/portal chip.jpg');
    font-family: 'Maven Pro', sans-serif;
    margin: 1.875em auto 1.875em; /* 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/portal chip.jpg');
        padding-bottom: 1em;
        position: relative;
        width: 92.1568627451%; /* 940/1020 = .921568627451 */
    }

.frame
{
    background-color:blanchedalmond;
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em;
    padding: .5em; /* 8/16= .5 */
}

.frame img
{
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em;
}

#brain_implant
{
    left: 6.9148936170%; /* 65/940 = 0.069148936170 */
    max-width: 100%;
    position: absolute;
    top: -1.5625em; /*-20.8333333333%;*/ /* -25/120 = -0.208333333333  -25/16= -1.5625 */
    width: 14.5833333333%; /* 175/1200= 0.145833333333 */
}

#chip
{
    left: 27%;
    max-width:100%;
    position: absolute;
    top: 13.4375em; /* 180/16= 11.25 */ /* 215/16= 13.4375 */
    width: 7.08333333333%; /* 85/1200= 0.0708333333333 */
    z-index: 99;
}

.page_header_text
{
    background-color: #0a162e;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    color: blanchedalmond;
    font-family: 'Fontdiner Swanky', cursive;
    font-size: 2.8125em; /* 45/16= 2.8125*/
    letter-spacing:.35em;
    /* at 940, has a width of 765 when floated against image */
    margin-left: 22.8758169935%; /* 175/765 = .228758169935 */
    padding: .75em; 
    width: 58.5106382979%; /* 550/940= 0.585106382979 */
}

    .page_header_text h1
    {
        margin: 0 0 .3125em 0; /* 5/16= .3125*/
        padding: 0;
    }

#phrase1
{
    padding-left: 5.2287581699%; /* 40/765= 0.052287581699 */
}

#phrase2
{
    padding-left: 21.5686274510%; /* 165/765= 0.215686274510 */
}

#phrase3
{
    padding-left: 37.9084967320%; /* 290/765= 0.379084967320 */
}

#villian
{
    max-width:100%;
    position: absolute;
    right: 16.6666666667%; /* 250/1500= .166666666667*/
    top: 12.5em; /* 200/16= 12.5 */
    width: 16.6666666667%; /* 250/1500= .166666666667*/
    z-index: 99;
}

#a_portal
{
    max-width:100%;
    position: absolute;
    right: -15.4255319149%; /* -145/940= -0.154255319149 */
    top: 29.5%;
    width: 22.3404255319%; /* 210/940= 0.223404255319 */
    }

#binary_pic
{
    display: none;
    max-width:100%;
    position: absolute;
    right: 2%;
    top: 4%;
    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: #0a162e;
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em;
    height: 3.75em; /* 60 / 16 = 3.75 */
    margin: 0;
    padding: .9375em 0 .9375em 1.6207455429%; /* 15/16= .9375; 20/1234= 0.016207455429  1050?  */
}

    nav ul
    {
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em;
        list-style: none;
        margin: .833333333333em auto 0; /* 20 / 24 = .833333333333*/
        padding: .175em 0;
        width: 85.0891410049%; /* 1050/1234= 0.850891410049 */
    }

        nav ul li
        {
            -moz-border-radius: .9375em;
            -webkit-border-radius: .9375em;
            border-radius: .9375em; /* 15 / 16 = .9375 */
            display: inline;
            font-family: 'Fontdiner Swanky', cursive;
            font-size: 1.75em;
            font-weight: bold;
            letter-spacing: .15em;
            margin: .4em;
            padding: .2em .4em;
        }
.current
{
    color:blanchedalmond;
}

#nav1
{
    background-color: pink;
    background-image: url('../Images/circuit board opaque.jpg');
}

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

#nav3
{
    background-color: pink;
    background-image: url('../Images/circuit board opaque.jpg');
}

#nav4
{
    background-color: pink;
    background-image: url('../Images/circuit board opaque.jpg');
}


#nav5
{
    background-color: pink;
    background-image: url('../Images/circuit board opaque.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: #0a162e;
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10 / 16 = .625 */
    font-family: 'Bangers', cursive;
    line-height: 2em;
    margin: 0;
    padding: .625em 0 .625em 0; /*10 / 16 = .625 */
}

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

.blurb_content
{
    background-color: #0a162e;
    -moz-border-radius: .9375em;
    -webkit-border-radius: .9375em;
    border-radius: .9375em; /* 15 / 16 = .9375 */
    color:blanchedalmond;
    margin: 0 auto 1.25em; /* 20 / 16 = 1.25 */
    padding: 1.5625em 2.7472527473% 0; /* 25 / 16 = 1.5625; 25 / 910 = 0.027472527473 */
    width:70.6436420722%; /* 900/1274= 0.706436420722 */
}

.blurb #blurb_copy
{
    background-color: #0a162e;
    -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: 2em; /* 24 / 16 = 1.5 */
    padding-bottom: .9375em; /* 15 / 16 = .9375 */
}

.blurb p
{
    font-size: 1.5em;
    letter-spacing:.10em;
    padding-bottom: .5em;
}
/* #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: #0a162e url('../Images/wnw 2col bg opaque.jpg') repeat-y 62.9670329670% 0; /* 573/910 */
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10 / 16 = .625 */
    font-weight:bold;
    margin: 0;
    padding: 0;
}

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

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

/* #region article*/
.nikki
    {
        color:purple;
    }

article
{
    float: left;
    font-size: 1.25em; /* 20/16= 1.25 */
    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 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;
    }
/* #endregion main article*/



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

    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 */
        font-size:1.375em; /* 22/16= 1.375 */
        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
        {
            border-bottom: .1875em dotted black; /* 3 / 16 = .1875 */
            font-size: 1.25em; /* 20/16= 1.25 */
            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: #0a162e; /*antiquewhite;*/
                }

                aside ul li a:visited
                {
                    color: #094308; /*#B8860B;*/
                }

                aside ul li a:hover
                {
                    color: #184a73; /*#dcb432;*/
                }

                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 chip bg.jpg');
    -moz-border-radius: .625em;
    -webkit-border-radius: .625em;
    border-radius: .625em; /* 10/16= .625 */
    color:blanchedalmond;
    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
    {
        -moz-border-radius: 2em;
        -webkit-border-radius: 2em;
        border-radius: 2em;
        font-size: 4em; /* 64/16= 4 */
        background-color:#0a162e;
        margin: .9375em auto 0; /* 15/16= .9375 */
        padding: .25em 5.7142857143%; /* 20/16= 1.25; 20/350= 0.057142857143  */
        text-align: center;
        width:31.9634703196%; /* 350/1095= 0.319634703196 */
    }

    .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-height:70%;
        max-width: 100%;
        padding: 0;
    }

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

    .gallery video
    {
        background-color:black;
        border: 10px solid antiquewhite;
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-radius: .625em; /* 10 / 16 = .625 */
        display:block;
        margin: 1.25em auto 3.125em; /* 20/16= 1.25; 50/16= 3.125 */
        max-width: 100%;
        padding: 0;
        width:90.0900900901%; /* 800/888= 0.900900900901 */
    }
/* #endregion gallery*/


/* #region footer */
footer
{
    background-color: #0a162e;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    /*background-image: url('../Images/portal chip.jpg');*/
    margin: 0 auto;
    padding: 1.25em; /* 20 / 16 = 1.25 */
    width: 39.2464678179%; /* 500/1274= 0.392464678179 */
}


#footer_content
{
    color: blanchedalmond;
    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 */
    text-align:center;
}

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

/* #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; also the landscape mode for ipad; also the samsung galaxy phone
600px;      portrait mode on the Samsung 7" tablet, will also cover the portrait mode on ipad, and the samsung galaxy phone in landscape.
375px       iphone6 
414px       iphone6+
320px;      iphone 5, htc one, and samsung galaxy phone in portrait
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;
    }*/

    #brain_implant
    {
        top: -4em;
    }

    #chip
    {
        top: 20%;
    }

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

    #binary_pic
    {
        display: block;
        position: absolute;
        right: 12%;
        top: 2%;
        width: 10%;
        z-index: 99;
    }
    
    #a_portal
    {
        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: 1.625em; /* 26/16= 1.625 */
        text-align: left;
    }
    
    .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; teseted on an hp laptop screen with width of 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%;
    }

    #chip
    {
        top: 13.4375em; /* 180/16= 11.25 */ /* 215/16= 13.4375 */
    }

    #villian
    {
        right: 325px; /* 450/1498= 0.300400534045 */
        top: 1.25em; /* 20/16= 1.25 */
    }

    #a_portal
    {
        right: -4.375em; /* -70/16= -4.375 */
        top: 6.25em; /* 100/16= 6.25 */
    }
	
	nav ul li
    {
        font-size: 24px;
        letter-spacing: .10em;
    }
}
/* #endregion wide */


/* 1490 to fix a breaking point around 1487 */
@media screen and (max-width:1250px)
{
    /* for testing to show which query is being called. comment out for final submission */
    /*#phrase1
      {
        color:aqua;
    }*/
        
    #villian
    {
        display: none;
    }

    nav ul li
    {
        font-size: 1.25em;
        letter-spacing: .10em;
    }
}


/* 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;
    }

    #binary_pic
    {
        display: none; /* to restore the previous media query's override. */
    }
       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;
    }

    .gallery h2
    {
        font-size: 1.6em;
    }
}
/* 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:brown;
    }*/

    #chip
    {
        top: 15%;
    }

    #a_portal
    {
        display: none;
    }

    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;
    }*/

    .page_header_text
    {
        font-size: 2.375em; /* 38/16= 2.375 */
    }

    #a_portal
    {
        display:none;
    }

    .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 */
    }
}
/* #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;
    }*/

    .page_header_text
    {
        font-size: 2.125em; /* 34/16=  */
    }

    #chip
    {
        display: none;
    }

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

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

        /* 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. */
    }

    #chip
    {
        display: none;
    }

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

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

    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/circuit board very opaque.jpg');
        clear: both;
        margin: inherit 2.6785714286%; /* 15/560= .026785714286 */
    }

    article
    {
        background-image: url('../Images/circuit board very opaque.jpg');        
        -moz-border-radius: .625em;
        -webkit-border-radius: .625em;
        border-top-left-radius: .625em;
        border-top-right-radius: .625em;
        width: 95.7%;
    }

    .narrow
    {
        display: block;
    }

    aside
    {
        background-image: url('../Images/solely thru portal opaque.jpg');
        -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 */
        padding-top: 1em; /* 16/16 = 1 */
    }

        aside h2
        {
            margin-top: 0;
        }

    footer
    {
        width: 85%;
    }
}
/* #endregion 645 */



/* #region 7" portrait */
/* for only tablets in portrait mode, also covers the ipad */
/* 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;
    }*/

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

        nav ul li
        {
            clear: both;
        }
}
/* #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;
    }*/
    
    .page_header_text
    {
        font-size: 1.625em; /* 26/16= 1.625 */
    }

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

        nav ul li
        {
            clear: both;
        }

    .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;
    }*/
    
    .page_header_text
    {
        font-size: 1.375em; /* 22/16= 1.375 */
    }

    .gallery h2
    {
        font-size: 1.15em;
        white-space: nowrap;
        width: 45.6621004566%; /* 100/219= 0.456621004566 */
    }

    aside h2
    {
        font-size:1.25em; /* 20/16= 1.25 */
    }

    aside h3
    {
        font-size:1.25em; /* 20/16= 1.25 */
    }

    aside ul li
    {
        font-size: 1.125em; /* 18/16= 1.125 */
    }
}
/* #endregion 400 */


/* #endregion media queries */