@font-face
	{
		font-family: roboto;
		src: url(fonts/Roboto-Thin.ttf);	
	}

@font-face 
  {
	font-family: educationalFont;
	src: url(fonts/KGLegoHouse.ttf);
  }

@-webkit-keyframes changeColor {
    from {background: blue;color:yellow}
    to {background: yellow;color:blue}
}

@keyframes changeColor {
    from {background: blue;color:yellow}
    to {background: yellow;color:blue}
    }

@-webkit-keyframes changeColor2 {
    from {background: yellow;color:blue}
    to {background: blue;color:yellow}
}

@keyframes changeColor2 {
    from {background: yellow;color:blue}
    to {background: blue;color:yellow}
    }
    
@-webkit-keyframes shortenMapLength {
	from {padding: 0px 0px 0px 0px;}
	to {padding: 0px 150px 0px 150px;}
	}
    
@keyframes shortenMapLength {
	from {padding: 0px 0px 0px 0px;}
	to {padding: 0px 150px 0px 150px;}
	}
	
@-webkit-keyframes lengthenMapLength {
	from {padding: 0px 150px 0px 150px;}
	to {padding: 0px 0px 0px 0px;}
	}
	
@keyframes lengthenMapLength {
	from {padding: 0px 150px 0px 150px;}
	to {padding: 0px 0px 0px 0px;}
	}
    
@-webkit-keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
	}
	
@keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
	}
	
@-webkit-keyframes fadeOut {
	from {opacity:1;}
	to {opacity:0;}
	}
	
@keyframes fadeOut {
	from {opacity:1;}
	to {opacity:0;}
	}
	
	
body
  {
    background-color:#98FB98;
    font-family: roboto;
    font-weight: bold;
  }

#nav
  {
  	color:#ffffff;
    position:fixed;
  	height:80px;
  	width:800px;
  	top: 0;
  	left: 0;
  	z-index:4;
  	float:left;
  }
  
#container
  {
    background-color: #000000;
    height: 80px;
    -moz-border-radius: 0px 0px 100px 0px;
    border-radius: 0px 0px 180px 0px;
    width: 100%;
    -webkit-box-shadow: 0px 0px 20px;
  }


.navitem
  {
    text-align: center;
  }
  
  #container a:hover
    {
      background-color:#ffffff;
      color:#000000;
    }
  
  #Experienceslink
    {
      color: #ffffff;
      text-decoration: none;
      border-radius: 30px 0px 100px 0px;
      height:30px;
      width: 200px;
      float:left;

    }
    
  #Experienceslink:hover 
  {
  	background-color:#ffffff;
  }
  
#container a
  {
  	text-align:center;
  	padding-top:30px;
    color: #ffffff;
    height:50px;
    text-decoration: none;
    width: 150px;
    display:black;
    float:left;
    top: 10px;
    bottom: 0px;
    border-radius: 20px 20px 0px 0px;
  }
  
  
#main
  {
    text-align: center;
    position:relative;
    padding-top:200px;
    padding-left:20%;
    padding-right:20%;
    padding-top:80px;
    padding-bottom:80px;
    top:100px;
   
  }

#mainText
    {
    	font-family: educationalFont;
    	line-height: 2;
    }

#maplinkbox
	{
		border: 2px solid black;
		border-radius:20px;
		-moz-border-radius:20px;
		padding-top:20px;
		padding-bottom:20px;
	}

#maplink
  {
  	position:relative;
    text-decoration: none;
    font-size: 30px;
    color: #000000;
    font-family: educationalFont;
  }

#modeSwitch
	{
		padding:10px;
		text-align:center;
		padding-left:800px;
		height:61px;
		background-color:blue;
		top:0;
		right:0;
		left:0;
		position:fixed;
		color:yellow;
		z-index:3;
	}

#challengeMode
	{
		padding:10px;
		text-align:center;
		padding-left:800px;
		height:61px;
		top:0;
		right:0;
		left:0;
		position:fixed;
		animation: changeColor 1s;
		-webkit-animation: changeColor 1s;
		background-color:yellow;
		color:blue;
		z-index:3;
	}

#freeBrowse
	{
		padding:10px;
		text-align:center;
		padding-left:800px;
		height:61px;
		top:0;
		right:0;
		left:0;
		position:fixed;
		animation: changeColor2 1s;
		-webkit-animation: changeColor2 1s;
		background-color:blue;
		color:yellow;
		z-index:3;
	}

#modeHeading
	{
		font-size:15px
	}
	
#mode
	{
		font-size:25px;
	}

#mapPic
	{
		height:300px;
		width:300px;
		border-radius:200px;
		-webkit-box-shadow: 0 0 8px rgba(0,0,0, 1);
		box-shadow: 0 0 10px rgba(0,0,0, 1);
	}
	
#sliderDiv
	{
		color:#ffffff;
  		position:fixed;
	  	height:80px;
  		width:800px;
	  	top: 0;
  		left: 0;
	  	z-index:4;
  		float:left;
	  	background-color:#000000;
  		border-radius:0px 0px 30px 0px;
	}

#map
	{
		min-width: 540px;
		top:80px;
		height:540px;
		width:80%;
		left:10%;
		
		-webkit-box-shadow:0 0 20px rgba(0,0,255, 1);
		box-shadow:0 0 20px rgba(0,0,255, 1);
		z-index:2;
	}
	
#mapContainerSmall
	{
		-webkit-animation: shortenMapLength 2s;
		animation: shortenMapLength 2s;
		padding: 0px 150px 0px 150px;
	}

#mapContainerBig
	{
		-webkit-animation: lengthenMapLength 2s;
		animation: lengthenMapLength 2s;
		padding: 0px 0px 0px 0px;
	}
	
#history
	{
		visibility:hidden;
		position:fixed;
		text-align:center;
		background-color:red;
		color:yellow;
		padding-top:50px;
		padding-bottom:50px;
		font-size:15px;
		border-radius: 0px 20px 20px 0px;
		width:110px;
		top:100px;
		right:125px;
		z-index:1;
	}
	
#history:hover
	{
		background-color:orange;
	}
	
#country
	{
		visibility:hidden;
		position:fixed;
		text-align:center;
		color:orange;
		background-color:yellow;
		padding-top:50px;
		padding-bottom:50px;
		font-size:15px;
		border-radius: 0px 20px 20px 0px;
		width:110px;
		top: 300px;
		right: 125px;
		z-index:1;
	}
	
#country:hover
	{
		background-color:#00FFCC;
	}

#facts
	{	
		visibility:hidden;
		position:fixed;
		text-align:center;
		vertical-align:middle;
		color:orange;
		background-color:blue;
		font-size:15px;
		border-radius: 20px 0px 0px 20px;
		width:110px;
		top:100px;
		left: 125px;
		z-index:1;
		padding-top:150px;
		padding-bottom:150px;
	}

#facts:hover
	{
		background-color:purple;
	}
	
#placeHolder
	{
		visibility:hidden;
	}

#questionBox
	{
		visibility: hidden;
		-webkit-animation: fadeIn 1s;
		animation: fadeIn 1s;
		position:fixed;
		left:0;
		right:0;
		top:0;
		bottom:0;
		height:100%;
		width:100%;
		background-color: rgba(255,255,255,0.5);
		z-index:5;
	}	
	
#question
	{
		position:absolute;
		height:300px;
		width:300px;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
		opacity: 1;
		background-color:white;
		text-align:center;
		z-index:5;
		border-radius:20px 20px 20px 20px;
		padding-left:10px;
		padding-right:10px;
		border: 1px solid black;
	}
	
#closeButton
	{
		right:0;
		top:0;
		color:red;
	}
	
#content
	{
		padding-top:60px;
	}
	
#score
	{
		color:red;
	}
	
#correct
	{
		font-size: 30px;
		color: #98FB98;
		opacity: 0;
	}
	
#correctShown
	{
		font-size: 30px;
		color: #98FB98;
		opacity: 0;
		-webkit-animation:fadeIn 2s, fadeOut 2s;
		animation:fadeIn 2s, fadeOut 2s;
	}

#sliderContainer
	{
		display:inline;
		padding-top:30px;
		padding-bottom:30px;
		float:left;
	}
	
.navleftright
	{
		margin-left:20px;
		float:left;
		height:100%;
		padding: 30px 0px 30px 0px;
	}
	
#picture
	{
		height: 272px;
		width: 469px;
	}
	}