html,
body
{
   margin:0;
   padding:0;
   height:100%;
}

body
{
   background-image:url('../img/sky.jpg');
   background-position:bottom;
   background-repeat:no-repeat;
   background-size:100% auto;
   background-attachment:fixed;
   font-family:"Guttman Hodes", FrankRuehl, "Segoe UI Light 8", Arial;
   font-size:1.3em;
   background-color:#46AFDC;
   font-weight:normal;
}

nav
{
    display:block;
    width:100%;
    line-height:1.3em;
}

a span
{
    color:white;
    text-decoration:none;
}

nav > a
{
    display:inline;
    float:right;
    height:75px;
    background-color:black;
    width:calc(25% - 12px);
    padding:20px;
    margin:6px;
    color:white;
    text-decoration:none;
    font-size:1.3em;
    line-height:1.3em;
}

#container
{
   min-height:100%;
   position:relative;
}

header
{
   text-align:center;
    padding:30px;
}

header > div
{
    position:absolute;
    top:30px;
    left:30px;
}

header > div > a
{
    color:white;
    text-decoration:none;
    margin-right:20px;
    padding:10px 30px;
    font-family:Arial;
    font-size:0.8em;
    border:solid 1px rgba(255, 255, 255, 0.4);
    text-shadow:0 0 10px black;
}

header > div > a:hover
{
    background-color:rgba(255, 255, 255, 0.25);
    border:solid 1px rgba(255, 255, 255, 1);
}


#body
{
    padding:50px;
    padding-top:70px;
   padding-bottom:600px;   /* Height of the footer */
}

footer
{
   position:absolute;
   bottom:0;
   width:100%;
   height:600px;   /* Height of the footer */
   background-image:url('../img/bg_lower.png'), url('../img/bg_lower.gif');
   background-size:contain;
   background-position:bottom;
   background-repeat:no-repeat; 
}

footer.birthdays
{
   background-image:url('../img/bg_birthdays.png');
}

h1, h4
{
 	color: white;
	text-shadow: 3px 3px 10px #2c2e38, 5px 5px 0px rgba(0,0,0,0.2);
    -webkit-text-stroke-width:1px;
    -webkit-text-stroke-color:rgba(0,0,0,0.4);
    text-align:center;
    margin-top:0;
}

h1
{
}

blockquote,
blockquote H2,
blockquote H3
{
    font-family:"Guttman Calligraphic";
    margin-top:0;
    margin-bottom:0;
    zoom:0.9;
    font-weight:normal;
    text-align:center;
    text-shadow:0 0 15px white;
}


blockquote H2
{
    padding:0px;
}

blockquote H2:before,
blockquote H2:after
{
    content:'”';
    position:absolute;
    font-size:5.5em;
    font-family:"Times New Roman";
    margin-top:-60px;
    margin-right:-80px;
    opacity:0.5;    
    color:#63A4C7;
}
blockquote H2:after
{
    content:'“';
    margin-top:-20px;
    margin-right:+20px;
    font-size:4em;  
}


blockquote H3
{
    text-align:left;
        color:#377697;
}

blockquote
{
    max-width:800px;
    margin:auto;
}

*
{
    box-sizing:border-box;
}

.temp
{
    position:fixed; bottom:0; left:0; max-width:200px;
}

.temp .Imageset img
{
    height:60px;
    margin-left:10px;
}

@media screen and (max-width: 920px)
{
    nav > a
    {
        width:calc(25%);
        margin:0;
        padding:20px 0;

    }

    header
    {
        padding:0;
    }

    footer
    {
        display:none;
    }

    blockquote
    {
        max-width:500px;
    }
}

@media screen and (max-width: 680px)
{
    nav > a
    {
        display: block;
        float: none;
        width: 100%;
        padding: 10px 0;
        height: 50px;
    }

    header > div
    {
        position: static;
    }

    header > div > a
    {
        color: white;
        text-decoration: none;
        margin-right:10px;
        margin-left:10px;
        padding:0;
        border: none;
    }

    header > div > a:hover
    {
        background:inherit;
        border:none;
    }

    #body
    {
        padding-top:20px;
        padding:0px;
    }
}