body {
	background: #C00;
	font-size: 1em;
	padding: 0;
	margin: 0;
	font: normal normal normal 1em Helvetica,Arial,serif;
	text-align: justify;
	color: #000;
	width:100%;
	overflow:hidden;
}

svg {
    overflow:hidden;
}

a:link {
	color: #300;
	text-decoration: underline;
}

a:visited {
	color: #003;
	text-decoration: underline;
}

a:link:hover, a:visited:hover {
	color: #CC3;
	text-decoration: underline;
}
		
a:link:active, a:visited:active {
	color: #FFF;
	text-decoration: none;
}

#RedMorning {
    z-index: 1;
}

#Header {
    position:absolute;
    top:0;
    left:93vw;
    width:8vw;
    height:95vh;
    z-index:10;
}

#Title {
    width:8vw;
    height:95vh;
}

#TitleText {
    font-family:Arial;
    font-size:7vw;
}

#MainContent {
	padding: 0;
	margin: 0;
	border:0;
	top:0;
	left:0;
	right:0;
	bottom:0;
    position:absolute;
    overflow:hidden;
}

#Menu {
    position:absolute;
    top:25vh;
    left:33vw;
    width:52vw;
    height:40vw;
    z-index:23;
    font-size:200%;
    pointer-events:none;
}

#Menu li {
    list-style-type:none;
    margin-bottom:.75em;
    text-align:right;
    pointer-events:auto;
}

input {
    height:1em;
    width:5em;
    background-color:#C00;
    border-color:#000;
    font-size:100%;
}

.MainButton {
    width:7em;
    height:1.5em;
    margin-right:.25em;
    background-color:#C00;
    color:#000;
    font-size:90%;
    border-radius:.25em;
}

.MainButton:hover {
    background-color:#CC0;    
}

#AboutButton {
    width:12em;
}

.PopUpWindow {
    position:absolute;
    top:13vh;
    left:10vw;
    width:80vw;
    height:74vh;
    margin:0;
    padding:1em;
    visibility:hidden;
    z-index:25;
    overflow:auto;
    background-color:#FFFBF0;
    border-radius:.5em;
    border:1px solid #CC6666;
}

.CloseButton {
    display:block;
    margin:0 auto;
    text-align:center;
    font-size:110%;
    width:8em;
    height:2em;
}

#Ninja {
    position:absolute;
    top:15vh;
    left:-5vw;
    width:60vw;
    height:80vh;
    z-index:5;
}

#Tree {
    position:absolute;
    top:-50vh;
    left:-20vw;
    width:50vw;
    height:150vh;
    z-index:10;
    pointer-events:none;
}

#Gift1 {
    position:absolute;
    top:91vh;
    left:5vw;
    height:15vh;
    width:15vw;    
    z-index:15;
}

#Gift2 {
    position:absolute;
    top:88vh;
    left:-2vw;
    height:12vh;
    width:12vw;
    z-index:12;
}

#Gift3 {
    position:absolute;
    top:87vh;
    left:10vw;
    height:12vh;
    width:12vw;    
    z-index:13;
}

#Footer {
	clear: both;
	font-size: 85%;
	text-align: right;
	margin: 0;
	padding: 0;
	border: 0;
	position:absolute;
	bottom:-.75em;
	right:5px;
    border:0;
}

#Footer a {
    text-decoration:none;
}

.SaugusNet {
    font: italic normal bold 125% 'Lucida Sans','PT Sans',sans-serif;
}

a.SaugusNet {
    color:#000;
}

a.SaugusNet:link:hover, a.SaugusNet:visited:hover {
	color: #CC3;
}
		
a.SaugusNet:link:active, a.SaugusNet:visited:active {
	color: #FFF;
}

@media handheld, only screen and (max-device-width: 736px) { 
    #Menu {
        top:15vh;
        left:20vw;
        width:70vw;
        height:60vw;
        font-size:200%;
    }
    
    #Menu li {
        margin-bottom:1.5em;
    }

    .PopUpWindow {
        top:10vh;
        left:10vw;
        width:70vw;
        height:60vh;
        font-size:150%;
    }
}

@media handheld, only screen and (max-device-width: 736px) and (orientation: portrait) { 
    #Footer {
        display:none;
    }

    #Menu {
        font-size:250%;
    }

    #Ninja {
        top:10vh;
        left:-10vw;
        width:95vw;
        height:95vh;
    }

    #Gift1 {
        top:81vh;
        left:8vw;
        height:18vh;
        width:18vw;    
    }
    
    #Gift2 {
        top:80vh;
        left:-5vw;
        height:15vh;
        width:15vw;
    }
    
    #Gift3 {
        top:79vh;
        left:18vw;
        height:15vh;
        width:15vw;    
    }

    .PopUpWindow {
        top:10vh;
        left:10vw;
        width:70vw;
        height:60vh;
        font-size:250%;
    }
}