/* All styles for Snowline landing page */
/* NOTES:
1. ALL .xxx are called by class="xxx" (better to use class= than id= as id can only be used once
2. Can be overwritten with style="background-color: #009865; width: 10px;" in the html code
3. Naming: ".xxx" means can be used from any tag, "td.xxx" means can only be used from td tag
4. for some reason the border-width does not work in this css for img (refer imgl1) so borderwidth in the html

refer http://www.yourhtmlsource.com/stylesheets/advancedcss.html
*/

body {background-color:#99ccff;} 

.div1 {background-image: url("../images/snowlineplainpage1.jpg"); 
       background-repeat: no-repeat; 
       background-position: center center; 
       background-size: cover;
      background-color:#99ccff;
      margin:auto;
      width: 100%;
      border: 0px solid #73AD21;
      padding: 10px;
     height: inherit;
     width: inherit;
}
.div2 {background-image: url("../images/loginfield.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover; 
     background-color:transparent;
      margin:auto;
      width: 100%;
      border: none; border-width:0px;
      padding: 0px 0px 0px 0px;
     
     width: 300px;
}
.div3 {background-image: url("../images/searchfield.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover;
    background-color:transparent;
      margin:auto;
      width: 100%;
      border: none; border-width:0px;
      padding: 0px;
     
     width: 300px;
}
.div4 {background-image: url("../images/photoframe.png"); 
       background-repeat: no-repeat; background-position: center top;
    background-color:transparent;
      margin:auto;
      height: 200px; 
      border: none; border-width:0px;
      padding: 0px;
}
.div6 {background-image: url("../images/searchfield.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover;
    background-color:transparent;
      margin:auto;
     width: 300px; height:40px;
      border: none; border-width:0px;
      padding: 0px;
}
.div7 {background-image: url("../images/loginfield.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover;
    background-color:transparent;
      margin:auto;
     width: 300px; height:40px;
      border: none; border-width:0px;
      padding: 0px;
}

.div8 {background-image: url("../images/contactUsbutton.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover;
    background-color:transparent;
      margin:auto;
     width: 150px; height:40px;
      border: none; border-width:0px;
      padding: 0px;
}
.div9 { background-color:transparent;
    font:arial;
    font-size: small;
    opacity: 0.5;

    
}

/* box-shadow only worked in chrome*/
.div5 {padding: 20px;
   box-shadow: 20px 20px red;
   text-align: center;
}


.img1 {
      background-color:transparent; 
            padding: 20px 14px 0px 0px;
}
.img2 {
    width: 280px;
    background-color:transparent;
}
.img-rounded {
  border-radius: 6px;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

/*
     background-color:transparent;
     margin-top: 0px; margin-left: 0px;
     border-style:none; border-width:0px;
     outline-style: none;
     height: 40px;
     padding:0px 0px 0px 0px;
        */
.txtbox1 {    
     background-image: url("../images/loginfield.png"); background-repeat: no-repeat; 
     background-position: center center; background-size: cover;

 }
.txtbox2 {    
     background-color:transparent;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
 }


/*   
    border: 1px solid #ccc;
    border-radius: 4px;


    box-sizing: border-box;
 */

input[type=text], select {
    padding: 0px 5px 5px 5px;
    margin: 8px 0;
    display: inline-block;
    color:black
}
input[type=password], select {
    padding: 0px 5px 5px 5px;
    margin: 8px 0;
    display: inline-block;
    color:black
}

input[type=submit] {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: url("../images/contactUsbutton.png"); 
       background-repeat: no-repeat; background-position: center top; background-size: cover;
    background-color:transparent;
      width: 150px; height:30px;
      border: none; border-width:0px;
      padding: 0px;
      margin: 0px 0px 0px 0px;border-width:0px 0px 0px 0px;padding: 10px 0px 0px 0px;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 260px;
    background-color: #fff;
    color: #555;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 80%;
    margin-left: -180px;
    
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}