body,.ui-mobile
{
  background: url(../img/back.jpg);
  background-repeat:no-repeat;
    font-family: 'Merriweather Sans', sans-serif;
    background-position: center center;
    background-size:100% 100%;

}

body
{

  font-family: 'Merriweather Sans', sans-serif;

}

.ui-page,.page,.ui-body-c, .ui-overlay-c
{
  background:transparent;
    font-family: 'Merriweather Sans', sans-serif;

}



#map_canvas { width: 100%; height:370px; margin-top: 65px;}


#overlay 
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  filter:alpha(opacity=90);
  -moz-opacity:0.90;
  -khtml-opacity: 0.90;
  opacity: 0.90;
  z-index: 10000;
  color:#000;
  font-size:20px;
  text-align:center;
  padding-top:30px;
  z-index: 99999;
}


.header
{
  position: fixed;
  width:100%;
  height: 42px;
  
  background: #a09ed6; /* Old browsers */
  background: -moz-linear-gradient(top,  #a09ed6 0%, #928fc1 40%, #a09ed6 99%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a09ed6), color-stop(40%,#928fc1), color-stop(99%,#a09ed6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #a09ed6 0%,#928fc1 40%,#a09ed6 99%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #a09ed6 0%,#928fc1 40%,#a09ed6 99%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #a09ed6 0%,#928fc1 40%,#a09ed6 99%); /* IE10+ */
  background: linear-gradient(to bottom,  #a09ed6 0%,#928fc1 40%,#a09ed6 99%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a09ed6', endColorstr='#a09ed6',GradientType=0 ); /* IE6-9 */



  z-index: 10001;
  border-bottom: 1px solid rgb(138, 138, 138);
  
}




.header .logo
{
width: 100%;
margin: 0 auto;
text-align: center;
font-size: 28px;
text-shadow: 0px 0px 2px #686868;
color: #FFFFFF;
height: 43px;
line-height: 41px;
}





.header .buttonLeft
{
  left: 10px;
  top: 5px;
  position: absolute;
  background-repeat: repeat-x;
  background-color: rgba(149, 146, 214, 1);
  background-image: -webkit-linear-gradient(
   bottom,
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0) 50%,
   rgba(255,255,255,0.1) 50%,
   rgba(255,255,255,0.3) 100%
   );
  height: 30px;
  padding: 0 10px 0 10px;
  z-index: 0;
  border-radius: 6px;
  -webkit-border-top-left-radius: 10px 15px;
  -webkit-border-bottom-left-radius: 10px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow: -1px -1px 0px rgba(0,0,0,0.2)inset,
   0 1px 2px rgba(0,0,0,0.8)inset;
  font-size: 13px;
  display: block;
  text-align: center;
  color: #fff;
  text-shadow: 0px 0px 1px #000;
  line-height: 31px;
  font-weight: 700;
  -webkit-background-size: 30px;
  cursor: pointer;

}
 
.header .buttonLeft:before
{
  position:absolute;
  top:9.9%;
  left:-5px;
  -webkit-background-size : 22px 22px;
  background-position :-2px -1.5px;
  background-color: rgba(149, 146, 214, 1);/*change to the same as the main element*/
  background-image :  
      -webkit-gradient(linear, left bottom, right top, 
          from(rgba(0,0,0,0)), 
          color-stop(0.5, rgba(0,0,0,0)), 
          color-stop(0.5, rgba(255,255,255,0.1)), 
          to(rgba(255,255,255,0.3))); 
  height: 25px;
  width: 25px;
  -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
  -webkit-border-top-right-radius : 100px 40px;
  -webkit-border-top-left-radius : 30px 2px;
  -webkit-border-bottom-right-radius : 2px 30px;
  -webkit-border-bottom-left-radius : 40px 100px;
  z-index : 1;
  content : ' ';
  border-left : 1.5px solid rgba(255,255,255,0.3);
  box-shadow :  1px 1px 0 rgba(0,0,0,0.2) inset,
      -1px 1px 1px rgba(0,0,0,0.5) inset;
  -webkit-mask-image : 
      -webkit-gradient(linear, left top, right bottom,
          from(#000000), 
          color-stop(0.33,#000000), 
          color-stop(0.5, transparent), 
          to(transparent));
  cursor:pointer;

}











.header .buttonRight
{
  right:10px;/*change the position*/
  top:5px;/*change the position*/   
  position:absolute;
  background-repeat:repeat-x;
  background-color: rgba(149, 146, 214, 1);/*change this and the background color for the :before element*/
  background-image : -webkit-linear-gradient(
      bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      rgba(255,255,255,0.1) 50%,
      rgba(255,255,255,0.3) 100%
      );
  height: 30px;
  padding: 0 10px 0 10px;
  z-index : 0;
  border-radius: 6px;
  -webkit-border-top-right-radius : 10px 15px;
  -webkit-border-bottom-right-radius : 10px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
      0 1px 2px rgba(0,0,0,0.8)inset;
  font-size: 13px;
  display : block; 
  text-align:center;
  color:#fff;
  text-shadow: 0px 0px 1px #000;
  line-height: 31px;
  font-weight: 700;
  -webkit-background-size : 30px;
  cursor:pointer;
}
 
.header .buttonRight:after
{
  position:absolute;
  top:9.9%;
  right:-5px;
  -webkit-background-size : 22px 22px;
  background-position :-2px -1.5px;
  background-color: rgba(149, 146, 214, 1);/*change to the same as the main element*/
  background-image :  
      -webkit-gradient(linear, left bottom, right top, 
          from(rgba(255,255,255,0.3))),
          to(rgba(0,0,0,0)), 
          color-stop(0.5, rgba(0,0,0,0)), 
          color-stop(0.5, rgba(255,255,255,0.1)); 
  height: 25px;
  width: 25px;
  -webkit-transform: rotate(-225deg) skew(-10deg, -10deg);
  -webkit-border-top-right-radius : 100px 40px;
  -webkit-border-top-left-radius : 30px 2px;
  -webkit-border-bottom-right-radius : 2px 30px;
  -webkit-border-bottom-left-radius : 40px 100px;
  z-index : 1;
  content : ' ';
  border-left : 1.5px solid rgba(255,255,255,0.3);
  box-shadow :  1px 1px 0 rgba(0,0,0,0.2) inset,
      -1px 1px 1px rgba(0,0,0,0.5) inset;
  -webkit-mask-image : 
      -webkit-gradient(linear, left top, right bottom,
          from(#000000), 
          color-stop(0.33,#000000), 
          color-stop(0.5, transparent), 
          to(transparent)); 
  cursor:pointer;
             
}







#mapinfo
{
  width: 100%;
  position: fixed;
  top: 43px;
  filter: alpha(opacity=95);
  -moz-opacity: 0.95;
  -khtml-opacity: 0.95;
  opacity: 0.95;
  z-index: 10000;
color: #FFFFFF;
font-size: 14px;
text-shadow: 0px 0px 1px black;
line-height: 18px;
  padding-top: 2px;
  padding-bottom: 2px;
border-bottom: 1px solid rgb(138, 138, 138);


background: #d7adea; /* Old browsers */
background: -moz-linear-gradient(top,  #d7adea 0%, #c8a0d8 15%, #c8a0d8 86%, #b591c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7adea), color-stop(15%,#c8a0d8), color-stop(86%,#c8a0d8), color-stop(100%,#b591c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7adea', endColorstr='#b591c4',GradientType=0 ); /* IE6-9 */

}


#mapinfo img
{
  height:16px;
  width:16px;
  border:0;
  float:left;
  margin-left:5px;
  margin-right: 5px;
  
}


#chatStartDiv
{
  width:290px;
  height:385px;
  margin:0 auto;
  margin-top: 50px;
  border: 1px solid #C0A0DA;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding:10px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0px 0px 9px rgb(164, 137, 192);
}


#currentusers
{
  color: rgb(235, 235, 235);
  text-shadow: 1px 1px 0px rgb(122, 122, 122);
}


#chatinfo
{
  width: 100%;
  position: fixed;
  top: 43px;
  filter: alpha(opacity=95);
  -moz-opacity: 0.95;
  -khtml-opacity: 0.95;
  opacity: 0.95;
  z-index: 10000;
color: #FFFFFF;
font-size: 14px;
text-shadow: 0px 0px 1px black;
line-height: 18px;
  padding-top: 2px;
  padding-bottom: 2px;
border-bottom: 1px solid rgb(138, 138, 138);


background: #d7adea; /* Old browsers */
background: -moz-linear-gradient(top,  #d7adea 0%, #c8a0d8 15%, #c8a0d8 86%, #b591c4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7adea), color-stop(15%,#c8a0d8), color-stop(86%,#c8a0d8), color-stop(100%,#b591c4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d7adea 0%,#c8a0d8 15%,#c8a0d8 86%,#b591c4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7adea', endColorstr='#b591c4',GradientType=0 ); /* IE6-9 */



}



#chatinfo img
{
  height:16px;
  width:16px;
  border:0;
  float:left;
  margin-left:5px;
  margin-right: 5px;
  
}


#chat
{
  width:290px;
  height:385px;
  margin:0 auto;
  margin-top: 80px;
  border: 1px solid #C0A0DA;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding:10px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0px 0px 9px rgb(164, 137, 192);
  overflow: auto;
}



input.ui-slider-input {display: none;}


div.ui-slider
{
  width:100%;
  margin:0 auto;
}

#chatStarted .ui-btn-corner-all
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#chatStarted .ui-shadow {
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

#chatStarted .ui-btn{
float: right;
height: 35px;
line-height: 17px;
font-family: 'Merriweather Sans', sans-serif;
color: #A856A8;
}

#chatStarted .ui-corner-all {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}





.chatbubble
{
  width: 70%;
  margin-top:5px;
  padding:5px;
  border: 1px solid #CECECE; 
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px; 
  border-radius: 8px;  
  background: #c3d9ff; /* Old browsers */
  background: -moz-linear-gradient(top,  #c3d9ff 0%, #b1c8ef 41%, #98b0d9 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3d9ff), color-stop(41%,#b1c8ef), color-stop(100%,#98b0d9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #c3d9ff 0%,#b1c8ef 41%,#98b0d9 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d9ff', endColorstr='#98b0d9',GradientType=0 ); /* IE6-9 */
  float:left;
  text-align:left;
  font-size:13px;
  text-shadow: 1px 1px 0px rgb(204, 204, 204);
}



.chatbubbleme
{
  width: 70%;
  margin-top:5px;
  padding:5px;
  border: 1px solid #CECECE; 
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px; 
  border-radius: 8px;  
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */


  float:right;
  text-align:left;
  font-size:13px;
text-shadow: 1px 1px 1px rgb(255, 255, 255);
font-weight: 300;
}













#infoDiv
{
  width:290px;
  height:385px;
  margin:0 auto;
  margin-top: 50px;
  border: 1px solid #C0A0DA;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding:10px;
  background: rgba(255,255,255,0.1);
  box-shadow: 0px 0px 9px rgb(164, 137, 192);
}




.clear
{
clear: both;
}