/* CSS Document */

<style type="text/css">
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 1024px) {
/* Styles */
* {
	margin: 0em 0 0 0;
	padding: 0;
	border: 0;}
html {
	height: 100%;
	text-align: center;
	background-color: #FFF; 
	background-image: 
	linear-gradient(90deg, transparent 40px, #F66 40px, #F66 43px, transparent 43px),
	linear-gradient(#eee .1em, transparent .1em);
	background-size: 100% 1.2em;}
body {
	text-align: center;
	width: 100%;
	min-height: 360px;}
header {
	color: black;
	padding: 10px;
	text-align: center;}
footer {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	color: white;
	background-color: black;
	text-align: center;}
a {
	text-decoration: none;
	color: white;}
a:hover {
	color: #0F0;}
img {
	margin-bottom: -15px;
	padding: 0;
	border: 0;
	border-spacing: 0;
	border-style: none;
	text-align:center;
	width: 80%;
	max-width: 800px;}
#MainNav {
	display: inline;
	text-align: center;
	word-spacing: 10px;
	width: 80%;}
.MainNavLinks {
	color: gray;
	font-size: 14px;}
#Date {
	margin-top: 7px;
	font-size: 18px;
	font-family: "Comic Sans MS", cursive;}

.TileLinks {
	display: inline-block;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
			
	border: thick solid black;
	border-radius: 15px;
	background-color: #191919;
	padding: 20px;
	width: 200px;
	line-height: 75px;
	margin: 2px;
	
	font-size: 28px;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: white;}
#TileArea {
	height: auto;
	margin-top: 20px;}

/*About Page*/
#AboutMe, #Donate {
	font-size: 24px;
	margin-top: 30px;
	display: inline-table;
	text-align: justify;
	width: 700px;}
.TextLinks {
	color: green;}


/*Feedback Page*/
#EmailArea {
	box-shadow: 10px 10px 10px black;
	font-size: 20px;
	font-weight: bolder;
	opacity: 0.75;
	border-radius: 10px;
	padding: 30px;
	background-color: gray;
	margin-top: 50px;
	display: inline-table;
	width: 300px;
	text-align: center;}
#EmailForm {
	text-align: left;}
#Subject, #FromEmail, #Name {
	width: 400px;
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
#Message {
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	width: 400px;
	height: 200px;}
input, textarea {
	border-color: black;
	margin-bottom: 2px;
	padding-left: 10px;
	border-radius: 10px;
	font-size: 22px;}
input:hover {
	box-shadow: 0 0 5px #03F;
	background-color: #CFF;
	border-color: #0F0;}
textarea:hover {
	box-shadow: 0 0 5px #03F;
	background-color: #CFF;
	border-color: #0F0;}
input:focus {
	box-shadow: 0 0 5px #03F;
	background-color: #E5E5E5;
	border-color: #0F0;}
textarea:focus {
	box-shadow: 0 0 5px #03F;
	background-color: #E5E5E5;
	border-color: #0F0;}
#Cancel {
	margin-top: -15px;
	text-align: right;
	font-size: 30px;}



/*Copyright Dialog*/
.modalDialog {
	position: fixed;
	color: black;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-moz-opacity:0;
	-khtml-opacity: 0;	
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;}
.modalDialog:target {
	filter:alpha(opacity=1);
	-moz-opacity:1;
	-khtml-opacity: 1;	
	opacity:1;
	pointer-events: auto;}
.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;}
.close:hover { 
	background: #00d9ff;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 1025px) {
/*and (max-device-width : 1024px) { */
/* Styles */
* {
	margin: 0em 0 0 0;
	padding: 0;
	border: 0;}
html {
	height: 100%;
	line-height: 1.09;
	text-align: center;
	background-color: #FFF; 
	background-image: 
	linear-gradient(90deg, transparent 115px, #F66 115px, #F66 118px, transparent 118px),
	linear-gradient(#eee .1em, transparent .1em);
	background-size: 100% 1.6em;}
body {
	width: 100%;
	height: 800px;}
header {
	color: black;
	padding: 10px;
	text-align: center;}
footer {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
	color: white;
	background-color: black;
	text-align: center;}
a {
	text-decoration: none;
	color: white;}
a:hover {
	color: #0F0;}
img {
	margin-bottom: -15px;
	padding: 0;
	border: 0;
	border-spacing: 0;
	border-style: none;
	text-align:center;
	width: 95%;
	max-width: 800px;}
#MainNav {
	text-align: center;
	word-spacing: 40px;}
.MainNavLinks {
	color: #666;
	font-size: 24px;}
#Date {
	margin-top: 5px;
	font-size: 24px;
	font-family: "Comic Sans MS", cursive;}

.TileLinks {
	display: inline-block;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
			
	border: thick solid black;
	border-radius: 15px;
	background-color: #191919;
	padding: 20px;
	width: 250px;
	line-height: 150px;
	margin: 2px;
	
	font-size: 36px;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: white;}
#TileLT:hover {
	color: black;
	transform:translate(-15px,-15px);
	background-color: gray;
	box-shadow: 10px 10px 10px black;}
#TileCTR:hover {
	color: black;
	transform:translate(0px,-15px);
	background-color: gray;
	box-shadow: 0px 10px 10px black;}
#TileRT:hover {
	color: black;
	transform:translate(15px,-15px);
	box-shadow: -10px 10px 10px black;
	background-color: gray;}
#TileLB:hover {
	color: black;
	transform:translate(-15px,15px);
	box-shadow: 10px -10px 10px black;
	background-color: gray;}
#TileRB:hover {
	color: black;
	transform:translate(15px,15px);
	box-shadow: -10px -10px 10px black;
	background-color: gray;}
#TileB:hover {
	color: black;
	transform: translate(0px,15px);
	box-shadow: -10px -10px 10px black;
	background-color: gray;}
#TopTiles {
	margin-bottom: 20px;}
#TileArea {
	height: auto;
	margin-top: 20px;}

/*About Page*/
#AboutMe, #Donate {
	font-size: 24px;
	margin-top: 30px;
	display: inline-table;
	text-align: justify;
	width: 900px;}
.TextLinks {
	color: green;}


/*Feedback Page*/
#EmailArea {
	box-shadow: 10px 10px 10px black;
	font-size: 20px;
	font-weight: bolder;
	opacity: 0.75;
	border-radius: 10px;
	padding: 30px;
	background-color: gray;
	margin-top: 50px;
	display: inline-table;
	width: 300px;
	text-align: center;}
#EmailForm {
	text-align: left;}
#Subject, #FromEmail, #Name {
	width: 400px;
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
#Message {
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	width: 400px;
	height: 200px;}
input, textarea {
	border-color: black;
	margin-bottom: 2px;
	padding-left: 10px;
	border-radius: 10px;
	font-size: 22px;}
input:hover {
	box-shadow: 0 0 5px #03F;
	background-color: #CFF;
	border-color: #0F0;}
textarea:hover {
	box-shadow: 0 0 5px #03F;
	background-color: #CFF;
	border-color: #0F0;}
input:focus {
	box-shadow: 0 0 5px #03F;
	background-color: #E5E5E5;
	border-color: #0F0;}
textarea:focus {
	box-shadow: 0 0 5px #03F;
	background-color: #E5E5E5;
	border-color: #0F0;}
#Cancel {
	margin-top: -15px;
	text-align: right;
	font-size: 30px;}



/*Copyright Dialog*/
.modalDialog {
	position: fixed;
	color: black;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-moz-opacity:0;
	-khtml-opacity: 0;	
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;}
.modalDialog:target {
	filter:alpha(opacity=1);
	-moz-opacity:1;
	-khtml-opacity: 1;	
	opacity:1;
	pointer-events: auto;}
.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;}
.close:hover { 
	background: #00d9ff;}
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

</style>