@import url(https://fonts.googleapis.com/css?family=Acme);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

#first{
border-radius: 5px;
background-color: RGB(181,139,114);
border-color: RGB(102,46,45);
border-style: solid;
border-width: 2px;
padding: 32px;
display:grid;
grid-template-columns: 200px 200px;
grid-template-rows: 50px 100px 100px;
grid-row-gap: 32px;
grid-column-gap: 16px;
margin:32px auto auto;
width:500px
}

#tutorialbackground {
background-color: RGB(181,139,114);
border-color: RGB(102,46,45);
border-style: solid;
border-width: 2px;
grid-column: 1/6;
grid-row: 1/6;
}

#tutorialhead{
grid-column: 2/5;
grid-row: 1;
text-align: center;
}

#tutorialInfo{
grid-column: 1/6;
grid-row: 2;
padding: 15px;
margin: 16px;
}
#tutorialText{
text-align: justify;
}
#tutorialImg{
border-color: RGB(102,46,45);
border-style: solid;
border-width: 2px;
margin: 16px;
float: right;
max-width: 300px;
}

#primerImg{
border-color: RGB(102,46,45);
border-style: solid;
border-width: 2px;
}

#primer {
grid-column:1;
grid-row:1
}
#primerLeft{
grid-column: 1/4;
grid-row: 2;
padding: 32px;
}

#primerRight{
grid-column: 4/6;
grid-row: 2;
padding: 32px;
}
#primer-container {
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:25px auto auto 60px;
margin:89px auto 32px;
width:1000px;
}
#primerNextButton {
grid-column: 4;
grid-row: 4;
padding: 8px;
margin-top: 5px;
line-height: 30px
}
#primerPrevButton{
  grid-column: 2;
  grid-row: 4;
  padding: 8px;
  margin-top: 5px;
  line-height: 30px
}

#primerVid{
  border-color: RGB(102,46,45);
  border-style: solid;
  border-width: 2px;
margin-top:10px;
}

#tutorial {
grid-column:2;
grid-row:1
}

#setBudget {
grid-column:1/3;
grid-row:2
}

#start {
grid-column:1/3;
grid-row:3
}

#Features a path {
color:#ba7d57;
fill:#ba7d5780
}

#Features a path:hover {
fill:#ba7d57F0
}

#GRID_UNITS a path {
color:black;
fill:url(#imgGrass);
stroke-width:0.2!important
}

#artifactTable {
display:inline-block;
margin:16px auto auto;
max-height:331px;
overflow-y:auto;
position:relative;
width:90%
}

#artifacts {
background-color:#b58b72;
border-radius:0 5px 5px 0;
display:none;
grid-column:5;
grid-row:2 / 5;
text-align:center
}

#contextTable {
display:inline-block;
margin:16px auto auto;
max-height:152px;
overflow-y:auto;
position:relative;
width:90%
}

#contextTableTable,#artifactTableTable {
background-color:#FFF;
border-radius:5px;
height:auto;
text-align:center;
width:100%
}

#desc {
position:absolute;
right:10%;
top:250px
}

#excavateFeatureTooltip {
background-color:#000;
color:#FFF;
display:none;
height:30px;
position:absolute;
width:70px
}

#featuretab {
display:none;
grid-column:4;
grid-row:1;
margin-left:1%
}


#camera{
    width=25px;
}

#squareInfo {
background-color:#b58b72;
grid-column:1;
grid-row:3;
text-align:center;
width:100%
}

#squareInfo h5{
display: inline-block;
line-height: 20px;
margin-bottom: 8px;
}

#infoBox {
background-color:#b58b72;
border-radius:0 0 0 5px;
color:#000;
grid-column:1;
grid-row:4;
text-align:center
}

#infoText {
height:147px;
margin:auto;
overflow-y:scroll;
position:relative;
width:90%
}

#left {
background-color:#FFF;
height:100%;
position:absolute;
width:10%
}

#main-container {
display:grid;
grid-template-columns:240px 173.3px 173.3px 173.3px 240px;
grid-template-rows:25px 292px 100px 205px;
margin:32px auto auto;
width:1000px
}

#tutorial-container {
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:25px auto 60px;
margin:32px auto auto;
width:1000px;
}
#prevButton{
grid-column: 2;
grid-row: 3;
width: 100%;
}
#nextButton{
grid-column: 4;
grid-row: 3;
width: 100%;
}

#mapWindow {
background-color:#d0dbed;
height:32.5%;
width:32.5%
}

#mapbackground {
background-color:#b58b72;
grid-column:2 / 5;
grid-row:2 / 5
}

#maptab {
grid-column:2;
grid-row:1;
margin-right:1%;
pointer-events:none;
color:black;
}

#modalEdit {
max-width:800px
}
#modalEdit table th, #modalEdit table td{
    padding: 5px;
}

#modalEdit td{
	padding: 15;
	/*margin: 0 auto 0 auto;*/
}

#modalEdit p {
font-size:14px;
margin:8px
}

#modalEdit u {
text-decoration:none
}

#myModal {
border-radius:5px;
text-align:center
}

#other div {
background-color:#98a7b7;
font-size:40px;
height:auto;
line-height:128px;
text-align:center;
width:100%
}

#right {
background-color:#FFF;
height:100%;
left:90%;
position:absolute;
top:10%;
width:10%
}

#sidebar {
background-color:#b58b72;
border-radius:5px 0 0 0;
grid-column:1;
grid-row:2;
text-align:center;
width:100%
}

#infoSelected, #infoExcavated {
display: inline-block;
text-align:center;
border-radius:5px;
background-color: white;
margin-left: 4px;
line-height: 20px;
height: 20px;
min-width: 20px;
}

#squaretab {
display:none;
grid-column:3;
grid-row:1;
margin-left:.5%;
margin-right:.5%;
pointer-events:none
}

#start {
background-color:#662e2d;
border-radius:100px;
font-size:40px;
height:100px;
line-height:100px;
width:100%
}

#subtitle {
font-family:lithos-black;
font-size:20pt;
margin-top:-8px;
letter-spacing: 4px;
}

#svgMap {
background-color:#FFF;
display:none;
grid-column:2 / 5;
grid-row:2 / 5;
margin:5px;
position:relative;
overflow-y:hidden;
width:calc(100% - 10px);
z-index:1
}

#title {
font-family:lithos-regular;
font-size:24pt;
letter-spacing: 4px;
}

* {
box-sizing:border-box;
font-family: bulo;
margin:0;
padding:0
}

.active,.dot:hover {
background-color:#717171
}

.block {
background-color:transparent;
height:494px;
margin-bottom:32px;
width:100%
}

.budgetAnim {
color:red;
opacity:1;
position:absolute;
width:584px;
left:50%;
margin:0 auto 0 auto;
text-align:right;
top:10px;
transition:all 2s ease-in-out;
z-index:1000
}

.buttons {
background-color:#662e2d;
border-radius:35px;
color:#FFF;
height:35px;
line-height:35px;
margin:16px auto auto;
text-align:center;
width:90%
}

.close {
color:#aaa;
float:right;
font-size:28px;
font-weight:700;
margin-top:-17px;
}

.close:hover,.close:focus {
color:#000;
cursor:pointer;
text-decoration:none
}

.dot {
background-color:#bbb;
border-radius:50%;
cursor:pointer;
display:inline-block;
height:15px;
margin:0 2px;
transition:background-color .6s ease;
width:15px
}

.dropbtn {
color:#FFF;
padding:0
}

#dropIcon .dropbtn {
font-size: 40px;
margin: 16px;
line-height: 65px;
}

#navDropdown {
z-index: 1000000;
background-color: #2c2d62;
color: white;
padding-bottom: 16px;
}

#navDropdown a {
color:white;
display:block;
float:none;
margin:0;
text-align:center;
text-decoration:none;
font-size: 20px;
}

#navDropdown a:hover {
background-color:#ddd
}

.dropdown {
float:right;
overflow:hidden;
width:100px
}

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

.dropdown-content a {
color:#000;
display:block;
float:none;
margin:0;
text-align:center;
text-decoration:none
}

.dropdown-content a:hover {
background-color:#ddd
}

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

.fade {
-webkit-animation-duration:1.5s;
-webkit-animation-name:fade;
animation-duration:1.5s;
animation-name:fade
}

.modal {
background-color:rgba(0,0,0,0.4);
border-radius:5px;
display:none;
height:100%;
left:0;
overflow:auto;
padding-top:100px;
position:fixed;
top:0;
width:100%;
z-index:100
}

.modal-content {
background-color:#fefefe;
border:1px solid #888;
display:inline-block;
margin:auto;
padding:20px;
border-radius:5px
}

.mySlides {
min-height:405px;
margin-top:20px
}

#smallNav,#navDropdown,#second,#other,#description,#square,#feature,#info {
display:none
}

.next {
border-radius:3px 0 0 3px;
right:-50px
}

.notransition {
-moz-transition:none!important;
-o-transition:none!important;
-webkit-transition:none!important;
transition:none!important
}

.numbertext {
color:#f2f2f2;
font-size:12px;
padding:8px 12px;
position:absolute;
top:0
}

.other-buttons {
background-color:#662e2d;
color:#FFF;
font-size:20px;
height:50px;
line-height:50px;
width:100%;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 35px;
font-family: bulo
}

.other-buttons:hover {
background-color: #300706;
}

.prev{
  left:-50px;
}

.prev,.next {
border-radius:0 3px 3px 0;
color:#FFF;
cursor:pointer;
font-size:18px;
font-weight:700;
margin-top:-22px;
padding:16px;
position:absolute;
top:50%;
transition:.6s ease;
width:auto;
background-color:#bbb
}

.prev:hover,.next:hover {
background-color:rgba(0,0,0,0.8)
}

.slidecontainer {
width: 100%
}

.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 35px;
margin: 16px 0px 16px 0px
}

.slider:hover {
opacity: 1
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer
}

.sideTitle {
color:#000;
line-height:35px;
margin-top:2px
}

.slideshow-container {
margin:auto;
max-width:1000px;
position:relative;
margin: 0 50px 0 50px
}

.square {
background-color:#bfd6ef;
border-color:#000;
border-style:solid;
border-width:1px;
display:inline-block;
height:36px;
width:36px
}

.square:hover {
background-color:#98a7b7
}

.tabs {
background-color:#b58b72;
border-radius:5px 5px 0 0;
color:#FFF;
height:25px;
line-height:25px;
text-align:center;
width:99%;
z-index:10
}

.tabs:hover {
background-color:lightgray!important
}

.text {
bottom:8px;
color:#f2f2f2;
font-size:15px;
padding:8px 12px;
position:absolute;
text-align:center;
width:100%
}

@font-face {
font-family:roboto;
src:url(../fonts/Roboto-Regular.ttf)
}
@font-face {
font-family:bulo;
src:url(../fonts/BuloRounded-Regular.ttf)
}
@font-face {
font-family:lithos-black;
src:url(../fonts/Lithos-Pro-Black.ttf)
}
@font-face {
font-family:lithos-regular;
src:url(../fonts/Lithos-Pro-Regular.ttf)
}

a {
color:inherit;
text-decoration:none
}

body {
background-color:#FFF;
background-image:url(../images/OccaneechiDrawing.jpg);
background-position:center 75px;
background-repeat:no-repeat;
background-size:1200px;
font-family:Arial, Helvetica, sans-serif;
margin:0
}

h1 {
text-align:center
}

img {
vertical-align:middle
}

main {
margin:32px auto;
width:494px
}

main a {
color:#000;
display:block;
margin-top:16px;
text-align:center;
text-decoration:none
}

main a:hover,#start:hover {
background-color:#300706
}

nav {
margin-left:auto;
margin-right:auto;
width:1200px
}

nav h1 {
font-size:20px;
margin:auto;
width: 800px;
}

nav li {
float:left;
font-size: 20px;
line-height:75px;
}

nav li a {
color:#000;
display:block;
margin-right:16px;
padding:0 16px;
text-align:center;
text-decoration:none
}

nav li a:hover,.buttons:hover {
background-color:#aab4c4
}

nav ul {
background-color:#2c2d62;
color:#FFF;
min-height: 75px;
list-style-type:none;
width:100%
}
#modalEdit p {
  text-align:left;
}

p {
font-size:20px;
text-align:center;
width:100%
}

svg * {
stroke-width:0.3
}

table,th,td {
border:1px solid #000;
border-collapse:collapse;
text-align: center;
font-size:10px;
margin: 0 auto 0 auto;
}

to {
opacity:1
}

tr,.contextrow,.artifactrow {
height:30px
}

#contextTableTable tr:hover {
background-color:gray
}

nav .mainTitle {
color: white;
padding-top:8px;
}

@media only screen and (max-width: 1000px){
nav .mainTitle {
position: absolute;
color: black;
left: calc(50% - 400px);
margin-top: 83px;
}
#homeTitle {
margin-top: 83px;
}
#first {
margin-top:104px;
grid-row-gap: 16px;
grid-column-gap: 8px;
}
.slider {
margin:8px 0 8px 0
}
#main-container {
grid-template-columns:240px 173.3px 173.3px 173.3px;
grid-template-rows:25px 292px 100px 205px auto;
width:760px;
margin-top:89px;
margin-bottom:32px;
}
#tutorial-container {
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:25px auto 60px;
width:760px;
margin-top:89px;
margin-bottom:32px;
}
#primer-container {
width:760px;
}
#tutorialLeft{
grid-column: 1/3;
grid-row: 2;
}
#tutorialRight{
grid-column: 3/5;
grid-row: 2;
}


#sidebar {
border-radius: 0;
grid-column: 1;
grid-row: 2;
border-radius: 5px 0 0 0;
}
#squareInfo {
grid-column: 1;
grid-row: 3;
}
#infoBox {
border-radius: 0 0 0 5px;
grid-column: 1;
grid-row: 4;
}
#artifacts {
border-radius: 0 0 5px 0;
grid-column: 2/5;
grid-row: 5;
padding-bottom: 32px
}
#svgMap {
grid-column: 2/5;
grid-row: 2/5;
}
#mapbackground {
grid-column: 2/5;
grid-row: 2/5;
}
#maptab {
grid-column: 2;
grid-row: 1;
}
#squaretab {
grid-column: 3;
grid-row: 1;
}
#featuretab {
grid-column: 4;
grid-row: 1;
}
}

@media only screen and (max-width: 1200px){
nav {
width:100%
}
body {
background-size:100%
}
}

@media only screen and (max-width: 500px){
#title {
font-size:20pt
}
nav h1 {
width:100%
}
nav .mainTitle {
left:auto !important;
width:100%
}
#first {
grid-template-columns: 100%;
grid-template-rows: 50px 50px 100px 100px;
width:calc(100% - 32px)
}
#tutorial {
grid-column: 1;
grid-row: 2
}
#setBudget {
grid-column: 1;
grid-row: 3
}
#start {
grid-column: 1;
grid-row: 4
}
}

@media only screen and (max-width: 760px){
nav .mainTitle {
margin-top: 16px;
}
#main-container {
grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows:25px auto 292px 100px 200px;
width:calc(100% - 32px);
margin-top:89px;
margin-bottom:32px;
grid-row-gap: -5px;
}
#tutorial-container {
width:calc(100% - 32px);
}
#primer-container {
width:calc(100% - 32px);
}
#sidebar {
grid-column: 1/7;
grid-row: 3;
border-radius: 0;
}
#squareInfo {
grid-column: 1/7;
grid-row: 4;
}
#infoBox {
border-radius: 0 0 0 5px;
grid-column: 1/7;
grid-row: 5;
}
#artifacts {
border-radius: 0 0 5px 0;
grid-column: 4/7;
grid-row: 3/6;
padding-bottom: 0
}
#svgMap {
grid-column: 1/7;
grid-row: 2;
}
#mapbackground {
grid-column: 1/7;
grid-row: 2;
}
#maptab {
grid-column: 1/3;
grid-row: 1;
}
#squaretab {
grid-column: 3/5;
grid-row: 1;
}
#featuretab {
grid-column: 5/7;
grid-row: 1;
}
}

@media only screen and (max-width: 760px){
#fullNav {
display: none;
}
#smallNav {
display: block;
}
}

@media only screen and (max-width: 550px){
#tutorialImg {
max-width:100%;
margin: 0;
}
#tutorialhead{
grid-column: 1/6;
}
#prevButton{
grid-column: 1/3;
}
#nextButton {
grid-column: 4/6;
}
}

@media only screen and (max-width: 350px){
#title {
font-size: 15pt;
}
#subtitle {
font-size: 15pt;
}
.sideTitle {
font-size: 15px;
line-height: 25px
}
}