html, body { height: 100%; width: 100%; margin: 0; }

.logo{
    text-align:center;
    cursor:hand;
}

a:link {
    text-decoration: none;
}

a:visited {
   
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;

}
.linkColor{
    color:black;
}
#facebook{
   cursor:pointer;
   text-align:center;
   background-color: #3763A8;
   color: white;
   font-size: 1.2em;
   text-decoration: none;
   padding: 0.1% 0.1% ;
   border: none;
}

#facebook:hover{
    background-color:#3b5998;
}

#facebook:active{
    background-color:#3763A8;
}

#feedback{
   cursor:pointer;
   text-align:center;
   background-color: #BF4572;
   color: white;
   font-size: 1.2em;
   text-decoration: none;
   padding: 0.1% 0.1% ;
   border: none;

}

#feedback:hover{
    background-color:#7F2E4C;
}

#feedback:active{
    background-color:#BF4572;
}

.fb-like{
    width:200px;
}

li {
    display: inline-block;
    text-align:center;
    height:250px;
    padding-left:-100px;
}

.showIt{
    display:inline-block;
}

img{
    margin-right:-70px;
    float:left;
    padding:0px 0px 0px 0px;
}

#searchbox {
    width:600px;
    height:200px;
}

p {
 display:inline;   
}

.withPic{
    font-size:1.4em;
    position:relative;
    left:35px;
    top:-205px;
    z-index:-1;
}

.onlyText{
 margin-left:4px;  
}

#sDebug{
    background-color:brown;
}

#what{
    background-color:red;
}

/*half page div box */
#textBox{
  position:absolute;
  width:100%;
  height:50%;
}

textarea{
    -webkit-overflow-scrolling: touch;
}

#textInput{
    color:white;
    font-size:1.2em;
    position:absolute;
    display:block;
    resize:none;
    top:13%;
    left:12%;
    width:75%;
    height:70%;
    background-color:#333333;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;  
    border-radius: 20px; 
}

#textInput:focus{
  border-color: #FF6C24;
  outline:none;
}

.front{
    position:relative;
    top:60%;
}

.optionBox{
    position:fixed;
    top:14%;
    background-color:#B24D4A;
    width:190px;
    height:90px;
    color:white;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    display:none;
}

#optionText{
    display:block;
}

#optionClose{
   margin-left:28.5px; 
   margin-right:26px;
   display:none;
}

/*To fix option close button on firefox*/
@-moz-document url-prefix() {
    #optionClose{
       margin-right:33px;
    }
}
   

.cText{
   font-size:1em;
}

input[type=checkbox]
{
  display:inline-bloc;
   margin-left:15px;
   margin-top:15px;
   margin-right:10px;
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;

}

.mainGroup {
    float:left;
    position:relative;
    top:88%;
    left:44%;
}

.group {
    width:215px;
    float:left;
    position:relative;
    left:-50%;
}

#divAni{
    margin-top:10px;
}
#readwithpic  {
    display:inline-block;
    text-align:center;
    background-color: #FF6C24;
   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
     color: white;
   font-size: 1.5em;
   text-decoration: none;
   padding: 6% 8% ;
   border: none;
   }
 
#readwithpic:hover{
    background-color:#E55900;
}

#readwithpic:active {
   background-color: #993D00;
   }
   
#readwithpic:disabled{
background-color:#FFAA70;
}   

#buttonSpin{
    position:absolute;
    margin-top:10%;
    margin-left:28%;
    display:none;
}

#clear{    
    position:absolute;
    display:inline-block;
    margin-left:119px;
    text-align:center;
    background-color: #007F41;
   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
   color: white;
   font-size: 1.5em;
   text-decoration: none;
   padding: 6% 8% ;
   border: none;
   }
   
  /* To fix the clear button position on firefox */
@-moz-document url-prefix() {
    #clear{
       margin-left:130px;
    }
}
   
#clear:hover {
   background-color:  #00683B;
   }

  
#clear:active {
   background-color: #007F41;
   }

#option{    
    position:absolute;
    margin-left: 6.5px;
    text-align:center;
    background-color:#B24D4A;
   -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
   color: white;
   font-size: 1.5em;
   text-decoration: none;
   padding: 6% 8% ;
   border: none;
   }
  
#option:hover {
   background-color:#B23734;
   }

  
#option:active {
   background-color:#B24D4A;
   }


#roundB{
  position:fixed;
  top:1.5%;
  right:5%;
  width:50px;
  height:50px;
  background-color: #FF6C24;
  border-radius:50%;
  border: none;
  text-align:center;
  font-size:2em;
  color:white;
  display:none;
}

#roundB:hover{
    background-color:#E55900;
}

#roundB:active {
   background-color: #FF6C24;
   }

#closeB{
  position:fixed;
  top:1.5%;
  right:5%;
  width:50px;
  height:50px;
  background-color:#FF4024;
  border-radius:50%;
  border: none;
  text-align:center;
  font-size:2em;
  display:none;
}

#closeB:hover{
    background-color:#B20A00;
}

#closeB:active {
   background-color:#FF4024;
}

/* Loading */
#listLoad{
  position:relative;
  width:180px;
  height:180px;
  display:none;
}

#loadingSpin{
    position:absolute;
    top:77px;
    left:67px;
    z-index:-2;
}

spinner {
  margin-left:100px;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 15px;
  height: 15px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

/* loading end */

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}