/*
  fixed layout width of mockup = 960px
*/

body
{
    /* background-color: #808080; */
    margin: 1.041666666667%;   /* 10px / 960 = 0.01041666666667*/
    font-family: "American Typewriter";

}


#menu
{
    color: black;
    padding: 1.063829787234%;      /* 10px/940 =  0.01063829787234 */
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
}

#menu a:link
{
    color: black;
    text-decoration: none;
}

#menu a:visited
{
    color: black;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, li
{
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

h1
{
    font-size: 3.5em;
}

h2
{
    font-size: 1.25em;
}

li
{
    margin: 1em;
}

#main-title
{
    font-family: "American Typewriter";
    color: black;
    display: inline;
}


header
{
}

footer
{
    text-align: center;
    margin: 2em;
}

#menu-button
{
    display: none;
}

.index-image {
    width: 25%;
}

.index-image-wide {
    width: 50%;
}

/* PayPal styles */
#paypal-frame {
    float: right;
    margin-top: 4em;
    margin-right: 5em;
}


/* Image Gallery Styles */
#gallery-frame {
    border-color: black;
    border-style: double;
    border-width: .1em;
    padding: 1em;
    box-shadow: 10px 5px 5px grey;
    border-radius: 10px;
    max-width: 50%;
    width: 60%;

    -moz-box-shadow: 10px 5px 5px grey;
    -moz-border-radius: 10px;
}

#gallery-image-title {
    font-size: 1.25em;
    max-width: 30em;
}

#gallery-image-description {
    max-width: 30em;
}

#gallery-beginning, #gallery-end, #gallery-next, #gallery-previous {
    font-size: 1em;
}


.popup-background{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.95);
    border: black solid;
    width: auto;
    height: auto;
    padding-top: 2em;
}

.popup-content{
    margin: auto;
    width: 96%;
    max-width: 900px;
}
.popup-image
{
    margin: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 90%;
}


@media screen and (max-width: 36em)
{
    #menu { display: none; }
    #menu a { font-size: 0.75em; }
    #menu-button { display: inline; float: right;}
    #menu {background-color: #808080;}
    #paypal-frame{float: left;margin-top: 1em;}
    #gallery-frame{max-width: 65%;width: 65%;}
    #gallery-theImage{width: 90%;}
    .index-image{width:75%;}
    .index-image-wide {width:100%;}
}