/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx),
only screen and (                   max-height : 640px) ,
only screen and (                   max-device-height : 640px) {

  /* Retina-specific stuff here */
  body{
    padding-top : 60px;
  }
  #header {
    height : 30px;
  }
  #logo {
    height : 30px;
    margin: 0px 5px;
  }
  #logo h1 {
    font-size : 1.5em;
    margin: 5px 5px 5px 40px;
    line-height: 20px;
  }
  #title{
	  position: absolute;
	  top: 25px;
    height : 30px;
    margin : 25px 5px;
    padding-right:5px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
  }
  #title h1 {
    margin : 0px 5px;
    font-size : 1.5em;
    line-height: 30px;
  }
  #headermenu{
    height:30px;
    position: fixed;
  }
  .navbar-inner {
    min-height:60px;
    padding: 0px 10px;
  }

  /*  for ie*/
/*  .navbar-inner ul {*/
/*    height:30px\9;*/
/*  }*/

  /*  for ie*/
  .navbar-inner ul li{
    display:inline\9;
  }

  #overview-box {
    right:10px;
    bottom:40px;
  }

  #bottom-dock  {
    width: 100%;
    height: auto;
  }
  #bottom-dock.visible {
    height: 100%;
    opacity: 1;
  }
  #bottom-dock.half-transparent {
    height: 100%;
    opacity: 1;
  }



}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 300px) and (max-device-width: 440px){
  .container
	{
    width: 290px;
  }
  
  .popup-container
  {
    width: 290px;
  }

  .log-container
  {
    width: 290px;
  }

  #export
  {
    width: 50px;
  }

  .optional-street-box
  {
    width: 290px
  }


  input 
  {
    width: auto;
  }

    .popup-container input {
        width: 270px;
    }

	.cont
	{
		width: 350px;
		height: 450px
	}
.popup-back
{
width: 25px !important;
}

  #street,#addr,#city
  {

    width: 265px;
  }

}


@media screen and (min-device-width: 250px) and (max-device-width: 299px){
  .container
	{
    width: 240px;
  }

  .popup-container
  {
    width: 240px;
  }

  .optional-street-box
  {
    width: 240px
  }
  
  .log-closing
  {
    left: 305px !important;
  }


  .log-container
  {
    width: 230px;
  }
  
  .alert
  {
    width: 250px;
  }

  #export
  {
    width: 20px;
    height: 120px;
  }



  input 
  {
    width: auto;
  }

.showing-pos
{
	flex-direction: column;
}



.popup-container input {
    width: 215px;
}

.popup-back
{
width: 25px !important;
}
#street,#addr,#city
  {

    width: 215px;
  }

}


@media screen and (max-device-width: 440px)
{
  .log-closing
  {
    left: 300px !important;
  }
	
}

@media screen and (max-device-width: 299px)
{
  .log-closing
  {
    left: 250px !important;
  }
	
}

@media screen and (min-device-width: 550px)
{
  .container
  {
    width: 370px;
  }

  .optional-street-box-coord
  {
    margin-left: 40px;
  }

  .optional-street-box-coord input
  {
    margin-left: 10px;
  }

  .optional-street-box-coord label
  {
    margin-left: -40px;
  }


}