style.css

@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');

*:focus {
  outline:0;
}
/*Title of Page*/
#title {
  color: blue;
  margin: 10px;
  font-size: 4em;
  font-family: 'Just Another Hand', cursive;
  display: flex;
  justify-content: center;
}

#img {
  width: 50px;
  height: 50px;
}

/*Overall formatting classes*/
.section-title {
  padding: 5px;
  font-size: 2em;
  text-align: center;
  font-family: 'Just Another Hand';
}

.section-text {
  padding: 5px;
  font-size: 1.2em;
  text-align: center;
  font-family: 'Just Another Hand';
}

.container-formatting {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
}

.btn-properties {
  color: black;
  background-color: gray;
  font-family: 'Just Another Hand';
  text-align: center;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border-style: none;
  display: block;
}


.btn-properties:hover {
  color: white;
}

/*Login Contents Formatting*/

#login-container {
  display: flex;
  justify-content: center;
}


#login-content {
  width: 30%;
  display: flex;
  justify-content: center;
  display: block;
}

#login-btns {
  display: flex;
  justify-content: center;
}

.login-divs {
  display: flex;
  justify-content: flex-end;
}

.login-inputs {
  width: 50%;
}

.login-btns {
  font-size: 1.3em;
}

/*Horizontal Center of Main Content*/
#main-content {
  display: flex;
  justify-content: center;
}


/*Add border to elements and set size of Image Holder*/

#image-holder {
  border: 2px solid black;
  width: 50%;
  height: fill;
}

#map {
  width: 100%;
  height: 100%;
}

#streetView {
  width: 100%;
  height: 100%;
}

#side-bar {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  display: table;
}

/*Distance counter formatting*/
#data-stream {
  padding: 5px;
  border: 1px solid blue;
}

/*Side buttons formatting*/

.side-btns {
  font-size: 1.5em;
  padding: 5px;
  width: 100px;
  vertical-align: middle;
}

/*Make menu title look like a title and not a button*/

#data-speed {
  display: flex;
  justify-content: center;
}

#speed-input {
  width: 20px;
  height: 10px;
  margin-left: 5px;
}

/*Play button play or stop*/
.stopped {
  background-color: #2B712B;
  color: white;
}

.running {
  background-color: #921616;
  color: white;
}

/*Return button on or off*/
.return {
  background-color: blueviolet;
  color: white;
}

.noreturn{
  background-color: gray;
}

/*Switch between google map and google street view*/
.google-not-active {
  display: none;
}

/* Control buttons for street view navigation */
#controls {
  display: flex;
  flex-direction: row;
}

.ctrlBtns {
  width: 40px;
}

.controls-not-active {
  visibility: hidden;
}

/*Ideas Header Structure*/
#ideas-container {
  width: 300px;
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
}

/*Bottom Container Formatting*/
#bottom-container {
  display: flex;
  justify-content: center;
}

#saved-content {
  width: 50%;
}

#direction-content {
  width: 50%;
}

/*Direction Box*/

.nodirections{
  display: none;
}

.yesdirections{
  display: inherit;
}


/*Ideas Formatting*/
#ideas-header {
  display: flex;
  justify-content: center;
}

#ideas-go-btn {
  font-size: 1.5em;
  margin-left: 5px;
  margin-right: 5px;
}


#ideas-go-btn:hover {
  color: white;
}

.result-display {
  background-color: #A5CDEF;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid gray;
  font-family: 'Just Another Hand';
  font-size: 2em;
  text-align: center;
  width: 280px;
}

#btn-signout {
  font-size: 2em;
}

/* Login Page vs Main Page*/
.hidden-container {
  display: none;
  visibility: hidden;
}

.active-container {
  display: inherit;
}