jmnr/canary

/*test*/
 
/** {
  border: dotted 1px black;
}*/
 
body {
  background: #ffff00;
  background-attachment: fixed;
  background-image: url('images/canaryBackground.png');
  background-size: cover;
  font-family: 'Source Sans Pro', sans-serif;
}
 
#content {
  background: white;
  margin: 50px 100px;
  padding: 50px;
}
 
/*logo*/
 
#header {
  text-align: center;
}
 
#header > img {
  height: auto;
  max-width: 100%;
  margin-bottom: 20px;
}
 
/*clap input*/
 
#usernameContainer {
  text-align: center;
}
 
#newClap {
  display: block;
  margin-bottom: 30px;
  text-align: center;
}
 
#usernameInput {
  border: 2px solid black;
  font-size: 14px;
  padding: 10px;
  resize: none;
  text-align: center;
  width: 200px;
}
 
#submitUsername {
  background: black;
  border: 1px solid #101010;
  color: white;
  font-size: 14px;
  height: 40px;
  padding: 0 10px;
}
 
#submitUsername:hover {
  background: #ffff00;
  color: black;
  cursor:pointer;
}
 
#denyUsername {
  font-size: 13px;
  margin: 0;
  padding-bottom: 20px;
  text-decoration: underline;
}
 
#denyUsername:hover {
  color: grey;
  cursor: pointer;
}
 
textarea {
  border: 2px solid black;
  height: 75px;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 10px;
  resize: none;
  width: 400px;
}
 
#inputMap {
  display: none;
  height: 200px;
}
 
.inputButtons {
  background: black;
  border: 1px solid #101010;
  color: white;
  font-size: 14px;
  height: 40px;
}
 
.inputButtons:hover {
  background: #ffff00;
  color: black;
  cursor:pointer;
}
 
#locationButtonOne {
  display:inline-block;
  margin-bottom: 10px;
  width: 150px;
}
 
#locationButtonTwo {
  display: none;
  width: 150px;
}
 
#clearUsernameButton {
  margin-bottom: 10px;
  width: 170px;
}
 
#submitButton {
  background: #ffff00;
  border: 1px solid #101010;
  color: black;
  font-size: 14px;
  height: 40px;
  width: 100px;
}
 
#submitButton:hover {
  background: black;
  color: white;
  cursor:pointer;
}
 
/*carousel buttons*/
 
#tabControlsDiv {
  text-align: center;
}
 
.tabButtons {
  background: black;
  border: 1px solid #101010;
  color: white;
  display: inline-block;
  font-size: 14px;
  height: 30px;
  width: 100px;
}
 
.tabButtons:hover {
  background: #ffff00;
  color: black;
  cursor:pointer;
}
 
#toMap
  background: #ffff7e;
  color: black;
}
 
/*carousel content*/
 
#clapContainer {
  display: block;
}
 
#mapContainer {
  height: 180px;
  margin: 20px;
  padding: 200px;
}
 
/*claps*/
 
#claps {
  text-align: center;
}
 
.clap {
  background-color: white;
  border: 2px solid #101010;
  display: block;
  min-height: 75px;
  padding: 10px;
  width: 400px;
  margin: 20px auto;
  word-wrap: break-word;
}
 
.delButtons {
  background: white;
  border: 1px solid #101010;
  color: black;
  font-size: 14px;
}
 
.delButtons:hover {
  background: black;
  color: white;
  cursor: pointer;
}
 
/*media queries*/
 
@media (max-width: 700px) {
 
  #content {
    margin: 10px 10px 10px;
    padding: 5px 5px 5px;
  }
 
  #header > img {
  }
 
  #newClapInput {
    height: 75px;
    width: 300px;
  }
 
  .clap {
    min-height: 75px;
    max-width: 300px;
  }
 
}