@import url('https://fonts.googleapis.com/css?family=Gochi+Hand|Major+Mono+Display|Raleway|Special+Elite');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Cabin+Sketch|Fredericka+the+Great|Graduate|Gruppo|Londrina+Outline|Love+Ya+Like+A+Sister|Marcellus+SC|Megrim|Nixie+One|Poiret+One|Pompiere|UnifrakturMaguntia');

	/*
	font-family: 'Raleway', sans-serif;
	font-family: 'Major Mono Display', monospace;
	font-family: 'Special Elite', cursive;
	font-family: 'Gochi Hand', cursive;

	font-family: 'Amatic SC', cursive;
	font-family: 'Poiret One', cursive;
	font-family: 'Fredericka the Great', cursive;
	font-family: 'Cabin Sketch', cursive;
	font-family: 'Marcellus SC', serif;
	font-family: 'Gruppo', cursive;
	font-family: 'Love Ya Like A Sister', cursive;
	font-family: 'Nixie One', cursive;
	font-family: 'Graduate', cursive;
	font-family: 'Pompiere', cursive;
	font-family: 'Londrina Outline', cursive;
	font-family: 'Megrim', cursive;
	font-family: 'UnifrakturMaguntia', cursive;
	*/


html{
	font-size: 100%;
}

body {
	font-family: 'Raleway', sans-serif;
	padding-top: 0px;
	line-height: 1.3;
	text-align: center;
	}


	a {
			text-decoration: none;
			}


		/*Sizing & Transition*/
		*, *:after, *:before {
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		}
		 
		* {
		  margin: 0;
		  padding: 0;
		  -webkit-transition: all 1s ease;
		  -moz-transition: all 1s ease;
		  -o-transition: all 1s ease;
		  -ms-transition: all 1s ease;
		  transition: all 1s ease;
		}

	
#myinput {
  background-image: url('/css/searchicon.png');
  background-position: 5px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
}


#top {
	text-align: center;
	margin-top: -1%;
}




/*
REFERRALS
*/

		.off {
			max-width: 90px;
}

		.dr {
			max-width: 70px;
}
		.loc {
			max-width: 100px;
			
}
		.ph {
			white-space: nowrap;
			background-image: url('');
}
		.fx {
			white-space: nowrap;
			font-family: 'Special Elite', cursive;		
}


.kia {
		max-width: 50px;
}


/*
VOCABULARY
*/
.dx {
	background-color: yellow;
}

.rx {
	background-color: powder-blue;
}

.fs {
	background-color: light-green;

}


/*
EXTENSION DEPARTMENT COLOR KEY
*/
            .fd{
                background: linear-gradient(to bottom, #ccff66 0%, #66ff66 100%);
            }
            .do{
                background: linear-gradient(to bottom, #00cc00 0%, #339933 100%);
            }
            .ex{
                background: linear-gradient(to bottom, #0099cc 0%, #66ffff 100%);
            }
            .mgr{
                background: linear-gradient(to bottom, #ff6600 0%, #ffcc66 100%);
            }
            .mr{
                background: linear-gradient(to top, #ffccff 0%, #cc9900 100%);
            }
            .sb{
                background: linear-gradient(to top, #66ccff 0%, #ff99cc 100%);
            }
            .pt {
                background: linear-gradient(to top, #99cc00 0%, #ff9933 100%);
            }
            .ns {
                background: linear-gradient(to top, #ccccff 0%, #ff66ff 100%);
            }
            .op {
                background: linear-gradient(to top, #ffff66 0%, #ff99cc 100%);
            }

            .uc{
                background: linear-gradient(to bottom, #ffcc66 0%, #66ffff 100%);
            }

            .rd{
                background: linear-gradient(to bottom, #336600 0%, #ccffff 100%);
            }
            .ww{
                background: linear-gradient(to bottom, #ffff99 0%, #ccccff 100%);
            }



p{
	max-width: 500px;
	line-height: 1.7;
	margin: auto;
	padding: 7%;
	font-size: 20px;
	font-family: 'Nixie One', cursive;
	}

.column {
	column-count: 2;
	width: 100%;
	}



i {
	font-family: 'Pompiere', cursive;
	font-size: 1.5vw;
	}


nav {
	position: fixed;
	margin-top: -3%;
	margin-bottom: 7%;
	background-color: rgba(250, 20, 20, 0.35);
	padding-top: 6%;
	display: block;
	min-width: 100%;
	text-align: center;

	transition: top 0.3s; 
	/* Transition effect when sliding down (and up) */
	}


.mainnav {
		font-size: 3vw;
		font-weight: bold;
		padding: 9%;
		margin: 5%
		display: inline;

		}

		.mainnav a:hover {
			font-size: 4vw;
			color: rgb(255, 255, 255);
		}

			nav a {
				font-family: 'Major Mono Display', monospace;
				font-weight: bold;
				background-color: black;
				padding: 1%;
				margin: .1%;
				display: inline-flex;
				color: silver;
				text-align: center;
				content-align: center;
				line-height: 1;
				border-radius: 50%;
				text-decoration: none;
			}


		nav a:hover {
			padding: 2%;
			margin-top: -8%;
			font-size: 2.5vw;
			color: rgba();
		}
		nav a:active {
			padding: 2%;
			font-style: bold;
			border-width: 2px;
			border-style: solid;
			border-color: rgb(250 5 5);
		}
		nav a:visited {
			background-color: rgba(0 0 0 .4);
			border: solid 1px black;
			color: pink;
				}





table {
	margin: auto;
	min-width: 100%;
	padding-bottom: 3%;
	border-collapse: collapse;
	border: solid 1px black;
}


		th {
			color: white;
			background-color: black;
			line-height: 1;
			 letter-spacing: 5px;
			margin-bottom: -5%;
			padding: 1%;
			text-align: center;
			font-family: 'Amatic SC', cursive;
			font-size: 2.5vw;
			}



			.west tr:hover{
				background-color: pink;
			}

			tr:hover {
				background-color: rgba(146, 227, 252, .7);
			}	
			tr:active {
				color: red;
			}
			tr:visited {
				background-color:rgba(0,255,0,0.1);
			}


			td {
				text-align: center;
				padding: .8%;
				border: grey solid 1 px;
			/*	background-color: rgba(255, 255, 255, 5); */
              	letter-spacing: 1px;
			}


		table td:nth-child(1) {
					font-weight: bold;
					font-size: 105%;
		}

		table td:nth-child(4) {
					color: maroon;
		}

		table td:nth-child(5) {
					color: rgb(14, 109, 47);
					white-space: nowrap;
					font-family: 'Special Elite', cursive;
					 letter-spacing: 1px;
					}


.nohov {
	background-color: grey;
	color: white;
}

.nohov:hover {
	color: powder-blue;
	background-color: grey;
}

.west {
	background-color: grey;
	color: white;
}

.west:hover {
	color: pink;
	background-color: grey;
}




h1, h2, h3, h4, h5, h6  {
	line-height: 2;
	margin: auto;
	margin-top: 6%;
	text-align: center;
	display: block;
	font-weight: bold;
	}

		h1 {
			font-size: 6vw;
			margin-top: 16%;
			display: bold;
			z-index: -1;
			line-height: .7;
			/*background-color: liniargradient(  */
			color: white;
			text-shadow: 8px 15px 18px #000000;
			}

		h2 {
			font-family: 'Londrina Outline', cursive;
			/*font-family: 'Megrim', cursive;
			font-family: 'UnifrakturMaguntia', cursive; */
			font-size: 5vw;
			margin-bottom: -10%;
			}

		h3 {
          	font-family: 'Playfair Dispaly', cursive;
				}


	ul {
		column-count: 2;
		}




footer { 
	background-color: grey;
	color: white;
	text-align: center;
}



small {
	color: grey;
	text-align: center;
}


div {
	  content: "";
  display: table;
  clear: both;
}

.floatr {
	float: right; 
}






/*    SMALL SCREENS   -or-   NARROW BROWSER WINDOW     */
@media only screen and (max-width: 800px) {



body {
	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	padding: .5%;
	padding-top: 10px;
	margin: auto;
	line-height: 1;
	text-align: center;
}




	nav {
		margin-top: -8%;
	}

		.mainnav {
			display: inline-flex;
			margin: auto;
			font-size: 5vw;
			padding: 0%;
			}

			nav a:hover {
				padding: 1%;
				margin-top: -4%;
				font-size: 5vw;
				}
			nav a:active {
				padding: 2%;
				margin-top: -2%;
				}

			nav a {
				display: inline-grid;
				background-color: rgba(0 0 0 .30);
				margin: .5%;
				}



table {
	table-layout: fixed;
	display: block;
	min-width: 100%;
	margin: auto;
	padding-bottom: 4%;
	text-align: center;
	}

	tr:hover {
		background-color: powderblue;
	}	
	tr:active {
		color: red;
		border: solid 1px tomato;
	}

	tr:focus {}

	tr a:visited {
		background-color: silver;
	}


	td {
		padding: 1px;
		text-align: center;
	}




h1, h2, h3, h4, h5, h6  {
	line-height: 1;
	margin-top: 4%;
	text-align: center;
	display: block;
	min-width: 120%;
  }

			h3 {
				font-size: 7vw;
			}

			h1 {
				margin-top: 50px;
				display: bold;
				z-index: -1;
				display: block;
				min-width: 100%;
				font-size: 12vw;
			}


	th {
	 	text-align: center;
		padding: 1%;
		line-height: 1.3;
		color: white;
		background-color: black;
	}


   section {
           @include clearfix;
      }


      .floatl {
          float: left;
      }

      .floatr {
          float: right; 
      }

footer, footer a, footer small { 
	background-color: grey;
	color: white;
	margin: 3%;
	padding-bottom: 3%; 
	text-align: center;
   }
}