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

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
	margin : 0px;
}

header {
  background-color: #002060;
	padding-bottom: 0px;
  text-align: center;
  font-size: 22px;
  color: white;
}

h1 {
	text-shadow: 3px 3px  2px black;
}
	
.headerimage {
  background-image: url("../art1/nerve ring clear.png");
	width: 100%;
	padding: 1px;
  background-position: top right;
  background-repeat: no-repeat;
  position: relative;
	background-color: #002060;
  text-align: center;
  font-size: 22px;
  color: white;
}


#nav {
	text-align:center;
}
#nav ul {
	display:inline-block;
	list-style:none; 
	margin:0;
	padding: 0;
}
#nav li {
	display:inline;
}
#nav a {
	float:left;
	text-decoration:none; 
	padding:8px 20px;
	color: black;
}
#nav a:hover {
	background-color: #3C7DB9;
	cursor: pointer;
}

/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

.btn {
  background-color: #9DC3E6;
  padding: 4px;
  text-align: center;
	text-decoration: none;
	color: black;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 3px 3px;
	border: none;
}

.btn:hover {
  background-color: #3C7DB9;
}

.btn:active {
  background-color: #3C7DB9;
  box-shadow: 1px 1px;
  transform: translateX(2px) translateY(2px);
}

.active {
  background-color: #3C7DB9;
  border: none;
  text-align: center;
  cursor: pointer;
}
	
.content {
  max-width: 1000px;
  margin: auto;
}

	
.link {
 	font-size: 23px;
 	color: black;
}

.blue {
	background-color: #9DC3E6;
	padding: 10px;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 5px;
}

.leftnews {
	width: 15%;
	height: 400px;
	overflow : auto;
	font-size: 12px;
}

.middle {
  width: 20%;
}

.right {
  width: 65%;
}

.soloright {
	width: 85%
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 600px) {
  .right, .soloright{
    width: 100%;
    height: auto;
	}
  .middle {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}
  .leftnews {
	width: 100%;
	height: 120px;
	overflow: auto;
	}
  #nav a {
    display: block;
	padding:8px 10px;
  }
}