/* Memphis TW
   Filename: Styles.css
   Author Patrick Siglin
   Date: 9/13/18
   

*/	

/* reset styles */
article, body, div, footer, header, h1, h2, p, img,li, ul, ol, p1, fieldset, label {
	border-width: 0;
	padding: 0;
	margin: 0;
}

body { 
   background-color: black;
   text-align: left;
   max-width: 800px;
   margin: auto;
/*   background: url("th.jpg"); */
}

.bbs {
	font-style: keyboard text;
	color: rgb(255,98,0);
	font-weight: bold;
	overflow: auto;
}

/* main paragraph */
.p1:first-letter {
	font-size: 3em;
	line-height: 0.9em;
	float: left;
}	
.p1 {
	background-color: darkblue;
	background: linear-gradient(#7eccec, blue); 
	top: 1em;

}	
   h1, #contact { 
    position: relative;
    background-color: white;
   	color: Blue;
	margin: auto;
	z-index: -1; 
	
	 }
img {
float: right;
max-width: 50%;

}	
figure {
float: left;
}	
  	
  h1 { 
   bottom: .5em;
    position: relative;
    padding: 1px; 
    border: 0px; 
   background-color: #190033; 
    margin: auto;
	text-align: center;
    font-family: 'Sedgwick Ave Display', cursive;	
	font-size: 3.5em;
	text-shadow: 1px -1px 2px rgb(255,255,255);
	width: 220px;
	height: 220px;
	background-color: grey;
	background: linear-gradient(#7eccec, blue);
	border-radius: 50%; */
	position: relative;
	z-index: -2;
	}
	
	  
     #contact { 
	 top:3em;
	 text-decoration: none;
	 border: 3px solid black;
	 text-align: center;
	 border-width: 1;
	 text-shadow: 1px 1px 0px blue;
	 		 
   } 
	 .accent {
     position: relative;
	 top: 1em;
	 color: white;
	 z-index: -1;
	 font-style: italic;
	 text-shadow: 1px 1px 1px #660000;
	 float: clear;
	 
	 
	 }
   p {
     position: relative;
     top:0.8em; 	 
     color: yellow;  
	 font-size: large;
	 border: 1px dotted yellow;
	 z-index: -1;
	 float: clear;
	 line-height: 1.5em;
	 text-shadow: 1px 1px 1px #660000;
	 	 
   }
    .p2 { 
	 top:3em;
	 text-align: center;
	 color: white; 
	 font-weight: bold;
	 border-width: 0;
	 background-color: black;
   }
    .p3 {
	
	text-align: center;
	position: relative;
	top:.8em;
	
	}
  /* Ordered list */
ol li {
	top: 1.5em;
    background-color: black;
    -ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1);
	border: 2px solid white;
	color: yellow;
    text-align: left;
	list-style-type: none;
	position: relative;
		
}	


/* animation */ 
.cloud-image {
   max-width: none;
   display: block;
   position: absolute;
   top: 50px;
   left: 775px;
   z-index: -2;
   -webkit-animation-duration: 30s;
   animation-duration: 30s;
   -webkit-animation-timing-function: linear;
   animation-timing-function:linear;
   -webkit-animation-name: reveal-sun;
   animation-name: reveal-sun;
}

@-webkit-keyframs reveal-sun {
	15% {
		right: -5px;
	}
	50% {
		right: -50px;
	}
	100% {
		right: 100px;
	}
}
@keyframes reveal-sun {
	15% {
		right: -5px;
	}
	50% {
		top: -5px;
	}
	100% {
		right: 100px;
	}
}

label:after, input  {
content: "* ";
color: red;

}	
label:before, legend,label {
color: white;
}
.additionalinfo label:before {
content: "";
}


/*unordered list */
ul li {
    list-style-type: none;
}	
/* table */
thead th {
    background-color: orange;
	
}
tbody {
    background-color: grey;
}	

table {
position: relative;
top: 2em;
}

ol li:first-of-type{
display:block;
}	

nav.topnav ul {
	
	display: inline-block;
	position: relative;
	top: 50%;
	z-index: 2;
}	
	
 /* Add a black background color to the top navigation */
	.topnav {
	position: relative;
	top: 0.5em;
	max-width: 800px; 
	background-color: black;
    overflow: hidden;
	z-index:2;
	
	}
/* Style the links inside the navigation bar */
	.topnav li {
    float: left;
    /* display: inline-block; */
    color: red;
	position: relative;
    /*text-align: center; */ 
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
		
	 
	}
/*
/* Change the color of links on hover */
	.topnav a:hover {
    background-color: red;
    color: red;
	}
.topnav a:link {
   text-decoration: none;
   color: white;
   -webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
}
.topnav a:visited {
   color: white;
}

/* generated content */
input:valid {
   background-color: #d1f4bd;
}	                      
/* visual form feedback */   
input:focus, textarea:focus {
   background-color: #cce5ef;	
}

/* Add a color to the active/current link */
/*	.topnav a.active {
    background-color: darkblue;
    color: white;
	text-shadow: 1px 1px 0 #660000;
	}	
*/
/* small screen/tablet */
@media screen and (min-width: 280px), print {
body {
   padding: 5%;
   border: 2px solid black; 
   ol li:first-of-type {
	display: block;
	}		
}   
}	/* widescreen */
@media screen and (min-width: 1000px) {
.info {
    width: 65%
    top: 1em;
	float: left;
}	
.locations {
	width:35%
	float: right;
	text-align: right;
}
/* javascript */
.feedback-subject {
color: red;
}	
.feedback-from {
color: cyan;
}	

.feedback-content {
color: white;
}
	
#daycheck {
color: White;
text-align: Center;
background: linear-gradient(#7eccec, blue); 
top: 1em;
}	
	
/* large screens styles */
@media screen and (min-width: 1238px) {
	body {
	width: 1200px;
	}
	
/* labels and fields */
fieldset  {
color: white;
}

/* Video & video */
video { 
  position: relative; 
  top: 1.6em;
}
audio {
  position: relative;
  top:1.6em;  
}
/* When the screen is less than 600 pixels wide,  */

  @media all and (max-width:600px){
	.topnav { float: right; padding: 10px 0 0 0; }
	.topnav ul li a { padding: 5px 10px; }
}

/* print styles */
@media print {
   body {
	   color: #000;
	   background-color: #fff;
   }
   body {
	   max-width: 100%;
	   border: 0;
   }
   .topnav {
	   display: none;
}
@page {
	margin: 1in;
}
}