/*

IT'S A SMALL WORLD Project - CS286 

 Miguel Portillo 
 Emmanuel Oluloto

*/

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block; 
    z-index: 99
}

#load-image {
    position: absolute;
    top: 40%;
    left: 45%;
    z-index: 100
} 


.headers{
    box-shadow: 2px 4px grey;
    background: #cec4fa;
    margin-left: 10%;
    margin-right:10%;
}

body{
    display: inline;
    text-align: center;
    background-image: linear-gradient( rgba(88,148,196,1), rgba(88,148,196,0));
    font-size: 20px;
}

select{
    text-align: center;

    background-image: linear-gradient( rgba(64,99,89,0), rgba(64,99,89,1));
    font-size: 30px;
    color: white;
    padding: 10px 10%;

}

option{
    background-color: #406359;
    border: 3px ridge white;
    padding: 2px;
}


option:hover{
    background-image: linear-gradient( rgba(64,99,89,1), rgba(64,99,89,1));
}

.Oswald{    font-family: 'Oswald', serif; }

#map1{    outline-color: green; }

#map2{    outline-color: tomato; }

#map3{    outline-color: indigo; }



.maps{
    float:center;
    margin:auto;
    margin-top:3%;
    margin-bottom:3%;  

    outline-style: outset;
    box-shadow: 10px 10px 5px grey;
    outline-width: thick;

    height: 75%;
    width: 90%;
}




/* Info Window/Marker stylings */
.info_text{ 
    font-family: 'Ubuntu', serif;
}


.good{ color: #6130cb;  }

.co_text{ color: forestgreen }
.bl_text{ color: royalblue}

#sources_box{
    background-color: #7ECEA1;
    border: solid 2px #009643;
    border-radius: 6px;
    padding: 10px 20px;
    margin: 2% 10%; 

    display: none;
}

/* Image Stylings*/
.img_holder{
    width: 80px;
    height: 80px;
    border-radius: 4px;

/*    background: #d9ced9;*/

}

/* Border of inner photo for richmarker*/
.bor_img{    border: .5px solid #ddd;}

/* Border of outer HTML for richmarker*/
.bor_outimg{    border: 1px solid black; background: rgba(241, 241, 241, 0.8); }


.rich_photo {
    width: 95%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 1%;
    margin: 1px;

    border-radius: 4px;
}



.smallIcon{
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 30px;
    height: 30px;
}



ul {
    text-align: center;
    font-family: Arial;
    list-style-type:none;
}

#messageBox, #mapMessage{

    background-color: #ffe4fc;
    border: solid 2px #81005a;
    border-radius: 6px;
    padding: 10px 20px;
    margin: 2% 30%; 
    font-size: 30px;   
    font-family: Boogaloo, monospace;
}

#mapMessage{
    background-color: rgba(255, 228, 252, 0.5);
    font-size: 20px;
    margin: 2% 20%;
}

.summary{
    text-align: left;
}



/*Checkboxes and buttons*/
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Default checkboxes don't give us a lot of options, so we're going to create our own */
/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {

  position: absolute;
  top: 0;
  left: 25%;

  /*position: relative;*/

  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator */
.checkmark:after {
  content: "";
  position: absolute;

  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



button {
    font-size: 22px;
    border: 2px solid #1243d3;
    
    padding: 12px;
    background-image: linear-gradient(rgba(185,228,193,0), rgba(185,228,193,0.6));
}

button:hover{
  background-color: #98FB98;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.25);
}

button:active{
  background-color: #986B98;
  color: white;
}

#optBtn{
  padding-left: 40%;
  padding-right: 40%;
  background: #406359;
  border-color: #CAFFF0;
  color: white;
}

#options{
  display: none;
}