﻿<style>
      /* General styles for the page */ 
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #D2D7D3;
  font-family: monospace;
  margin: 0 auto;
  width: 960px;
}

h1 {
  margin: 25px 0 25px 0;
  font-size: 40px;
  text-align: center;
}

hr {
  margin: 20px 0;
}

form {
  text-align: center;
}

/* Styles for  URL box */ 


.url-box {
  background-color: transparent;
  display: inline-block;
  height: 30px;
  border: none;
  border-bottom: 4px solid #b3b3b1;
  padding: 0px 0px 0px 20px;
  margin: 0px 0px;
  width: 50%;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

#go {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

/* Styles for image container*/


#imageContainersss {
  border: 2px solid grey;
  border-radius: 10px;
  padding: 5px;
  width: 63%;
  overflow: hidden;
  float: left;
  margin:-480px 180px;
}

#imageContainer {
border: 2px solid grey;
border-radius: 10px;
width: 610px;
height: 610px;
position: relative;
margin: 10px  180px;
overflow:hidden;
}


#imageContainer img {
            width: 100%;
        }

#foto {
  transition:transform 400ms;
}

#foto{
        margin:0px;
        border-radius: 10px;
        width: 100%;
        position: absolute;
    }


#menu {
  border: 2px solid grey;
  border-radius: 10px;
  padding: 5px;
  width: 30%;
  height:96%;
  float: left;
  margin:-624px 800px;
}

#menu img { 
  width: 30%; cursor: pointer; 
}

/* Styles for sliders*/

.sliders {
  float: left;
  border: 2px solid grey;
  border-radius: 10px;
  margin-top: 20px;
  margin: 90px 0 0 -98px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.sliders p {
  margin: 18px 0;
  vertical-align: middle;
}

.sliders label {
  display: inline-block;
  margin: 7px 0 0 0;
  width: 70px;
  font-size: 16px;
  color: #22313F;
  text-align: left;
  vertical-align: middle;
}

.sliders input {
  position: relative;
  margin: 10px 20px 0 10px;
  vertical-align: middle;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border-radius: 5px;
  /*required for proper track sizing in FF*/
  width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 7px;
  background: #ABB7B7;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4B77BE;
  margin-top: -6px;
  vertical-align: middle;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]:hover {
	cursor: pointer;
}


#reset {
  display: inline-block;
  height: 40px;
  width: 100px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
  margin: 0 0 10px 0;
}

.p {
  clear: both;
  text-align: center;
  padding:  40px 0 40px;
}
    </style>