@charset "utf-8";
/* CSS Document */



body {background-color: #4D6F62;
	background-position: 5% 10%, 100%, 10%;
	background-repeat: no-repeat,  no-repeat;
}

p{font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
}
	
	/* Change these settings around. Mix it up a bit. I don't want a direct port copy paste from teacher! */
	a:link, a:visited {
    background-color: blue;
    color: white;
    font-weight:bold;
    padding: 9px 11px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 3px outset gray;
    border-radius:15px;

}
/* /////////////////////////////////////////////////Nav///////////////////////////////////*/

nav{padding:20px;
	display:block;
    height:50%;
	width:53%;
    margin-right:auto;
	margin-left:auto;
	text-align:center;
	background-color: yellow;
	border: 3px outset blue;
	border-radius: 93px;
	}

	span{border:2px solid red;
	 padding:5px;
	 background-color:yellow;
		border-radius: 28px;
	 color:green;}

	.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
		    color: white;
    display: block;
}

	.dropdown-content {
    display: none;
		width: 2px;
    position: absolute;
    min-width: 162px;
    backround-color:rgba(0, 0, 0, 0);
    padding: 4px 4px;
		border-radius: 25px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

	.dropdown{ display:inline-block;}

/* ////////////////////////////////////////////////////////////////////////////////////*/
a:hover, a:active {
    background-color: orangered;
	box-shadow: 5px 5px 2px #888888;
	color:yellow;
}
	

	
	#intro{text-align: center;
	       font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	}
	
			.dropdown-content a:hover {background-color: orange;}
	

	
	main{background-color:rgba(18,215,95,1.00);
	     font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
		  box-shadow: 10px 10px 10px 10px gray;
		  width:50%;
		  margin-right: auto;
		  margin-left:auto;
		 column-count: 3;
		 column-rule: 4px double #ff00ff;
	      }
	
	
	
   #demo1{
		color: blue;
	
	}
   #demo2{
		color: blue;
		
	}
#objGoFishSRC{font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
             font-size: 48px;
             }




	.h3NonBorder{
		margin-left: 25%;
		margin-right: 25%;
		text-align: center;
		color: yellow;
		font-weight: bold;
		background-color: purple;}

h1{text-align: center;
	border: 9px outset blue;
	  border-radius: 25px;
	width:50%;
	color: orange;
	margin-left: auto;
	margin-right:auto;
	background-color:darkslategray;
   font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	color:deepskyblue;
   }


	h2{border: 6px outset blue;
	  border-radius: 25px;
		margin-left: 25%;
		margin-right: 25%;
		text-align: center;
		padding: 7px;
		color: orange;
		font-weight: bold;
		background-color:darkslateblue;
		 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

	h3{border: 5px outset green;
	  border-radius: 25px;
		margin-left: 25%;
		margin-right: 25%;
		text-align: center;
		padding: 5px;
		color: yellow;
		font-weight: bold;
		background-color:darkseagreen;}
	
		/*5.
          Horizontal Rule
          Change color, alignment, 
          height, and width using 
          CSS clas
         */
			hr{  height:4px; 
		width:70%; 
		background-color: purple; 	
		margin: auto;
	}	

	
	.about{font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	       }
	
	.centerMe{text-align: center;}



.placeLeft{margin-left:left;}
.placeRight{margin-right:right;}


.sourceAdjustSmaller{width: 25px;
		height: 30px;
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari */
    transform: skew(10deg,10deg); /* Standard syntax */

     }

.sourceAdjust{width: 200px;
		height: 300px;
    -ms-transform: skew(20deg,10deg); /* IE 9 */
    -webkit-transform: skew(20deg,10deg); /* Safari */
    transform: skew(10deg,10deg); /* Standard syntax */

     }

	
		.dropAdjust{width: 500px;
		height: 500px;}

.tableImage {
    position: relative;
    display: inline-block;
}

.dropImage {
    position: relative;
    display: inline-block;
}

.dropImage-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropImage:hover .dropImage-content {
    display: block;

}

.desc {
    padding: 15px;
    text-align: center;
}	
	
	article{font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;}
	
	
	iframe{width:420px;
		  height:345px;}

/*  ///////////////////////////////////////////////////////////////////////////////    */
/*                       Index Table               */

.changeWish{
	         width:75%;
	         height:35%;
	        /* text-align:center;  The square needs to be closer to the text */
	         margin-left:auto;
	         margin-right:auto;
}
.changeWish td{background-color: #93B874;
               font-size:12px;
	           font-family:Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
              }

  .r0{bgcolor:"#93B874";}



/* https://stackoverflow.com/questions/5311890/how-to-apply-style-classes-to-td-classes */

table.changeWish td.r0 {
    font-size: 90%;

}


table.changeWish td.r1 {
    font-size: 90%;
	/*background-color:tomato;*/
	
}

table.changeWish td.r0title{
	background-color:royalblue;
}


/*  ///////////////////////////////////////////////////////////////////////////////    */


div.wideScroll  {
   width:90%;
   overflow-y:scroll;
	margin-left: auto;
	margin-right:auto;
   height:500px;
	
	
	
}

div.scroll  {
   width:70%;
   overflow-y:scroll;
	margin-left: auto;
	margin-right:auto;
   height:500px;
	
	
	
}


/*

*/

.backroundCleffOne {
    width: 10%;
    height: 10%;
    background-blend-mode: darken;
    position: relative;
    -webkit-animation-name: matrixS; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
	  -webkit-animation-timing-function: linear;
	  -webkit-animation-direction: alternate;
    animation-name: matrixS;
    animation-duration: 9s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	    animation-timing-function: linear;
}

@keyframes matrixS {
    0%   { left:0px;  top:-10%;}
    25%  { left:0px;  top:-20%;}
    50%  { left:0px; top:-50%;}
    75%  { left:0px; top:-70%;}
    100% { left:0px; top:-80%;}
}



.backroundCleffTwo {
    width: 10%;
    height: 10%;
    background-blend-mode: darken;
    position: relative;
    -webkit-animation-name: matrixSTwo; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
	  -webkit-animation-timing-function: linear;
	  -webkit-animation-direction: alternate;
    animation-name: matrixSTwo;
    animation-duration: 9s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	    animation-timing-function: linear;
}

@keyframes matrixSTwo {
    0%   { left:80%;  top:-80%;}
    25%  { left:80%;  top:-70%;}
    50%  { left:80%; top:-50%;}
    75%  { left:80%; top:-25%;}
    100% { left:80%; top:-10%;}
}


.jimiOne {
    width: 10%;
    height: 10%;
    background-blend-mode: darken;
    position: relative;
    -webkit-animation-name: jimiOneE; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
	  -webkit-animation-timing-function: linear;
	  -webkit-animation-direction: alternate;
    animation-name: jimiOneE;
    animation-duration: 9s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	    animation-timing-function: linear;
}


@keyframes jimiOneE {
    0%   { left:-7%;  top:-50%;}
    25%  { left:-7%;  top:-40%;}
    50%  { left:-7%; top:-30%;}
    75%  { left:-7%; top:-25%;}
    100% { left:-7%; top:-20%;}
}


.jimiTwo {
    width: 10%;
    height: 10%;
    background-blend-mode: darken;
    position: relative;
    -webkit-animation-name: jimiTwoE; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
	  -webkit-animation-timing-function: linear;
	  -webkit-animation-direction: alternate;
    animation-name: jimiTwoE;
    animation-duration: 9s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	    animation-timing-function: linear;
}

@keyframes jimiTwoE {
    0%   { left:45%;  top:-20%;}
    25%  { left:45%;  top:-25%;}
    50%  { left:45%; top:-30%;}
    75%  { left:45%; top:-40%;}
    100% { left:45%; top:-50%;}
}


#goFishObjVid{width:"560"; height:"315"; padding:40px; border: 9px outset yellow;border-radius: 20px;   background: linear-gradient(blue, green); }
#goFishObjVidTwo{width:"560"; height:"315";  padding:40px; border: 9px outset yellow; border-radius:15px; background: linear-gradient(green, bluegof);}

#soundcloudWidget{
	width:51%; 
	height:25%; 
	scrolling:"no"; 
	frameborder:"no";

}

.leaves{position:absolute; 
	  left: 70%; 
	top: 30%; 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	background-blend-mode: darken;
	z-index:-1;
}
.leavesTwo{position:absolute; 
	  left: -10%; 
	top: 30%; 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
	background-blend-mode: darken;
	z-index:-1;
}

ul{list-style-type: square;}

.buttonContainer{ display:block; text-align:center;}

/*


https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

 Start of popup contact form

 */



.openModal{ display:block; text-align:center;}
#positionMe{display:block; text-align:center; width: 25%; margin-left:auto; margin-right:auto;}



.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}


.modalDialog:target {
	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; }





.titleColor{background-color:purple;}




.globalTableTheme{
	         width:70%;
	         height:35%;
	        /* text-align:center;  The square needs to be closer to the text */
	         margin-left:auto;
	         margin-right:auto;
	       
}

.globalTableTheme td{background-color: #93B874;
	           font-family:Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
              }


table.globalTableTheme td.r0 {
    font-size: 90%;
	background-color: mediumpurple;
	
}


table.globalTableTheme td.r1 {
    font-size: 90%;
	/*background-color:tomato;*/
	background-color:#93B874;
	color:lawngreen;
}

table.globalTableTheme td.r0title{
	background-color:deepskyblue;
	width:473px;
	text-align:center;
	
}


.nonDropImage a:link {
    color: green;
    background-color: transparent;
	
    text-decoration: none;
}

.nonDropImage a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

.nonDropImage a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

.nonDropImage a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}


.dropImage a:link {
    color: green;
    background-color: transparent;
	
    text-decoration: none;
}

.dropImage a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

.dropImage a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

.dropImage a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}


figure{	    
	background: linear-gradient(to right, purple , yellow); /* Standard syntax (must be last) */
	

}

figcaption{padding:18px;
    border: 3px outset gray;
    border-radius:15px;
}




header{
	
}