Property Finder - a Cross-Platform HTML5 Mobile App

/*
The styles within this CSS file use font-sizes modelled on those
used for WP7 Silverlight applications, which are as follows:

<!--14pt-->
<System:Double x:Key="PhoneFontSizeSmall">18.667</System:Double>
<!--15pt-->
<System:Double x:Key="PhoneFontSizeNormal">20</System:Double>
<!--17pt-->
<System:Double x:Key="PhoneFontSizeMedium">22.667</System:Double>
<!--19pt-->
<System:Double x:Key="PhoneFontSizeMediumLarge">25.333</System:Double>
<!--24pt-->
<System:Double x:Key="PhoneFontSizeLarge">32</System:Double>
<!--32pt-->
<System:Double x:Key="PhoneFontSizeExtraLarge">42.667</System:Double>
<!--54pt-->
<System:Double x:Key="PhoneFontSizeExtraExtraLarge">72</System:Double>
<!--140pt-->
<System:Double x:Key="PhoneFontSizeHuge">186.667</System:Double>
*/

.content
{
  margin:10px;
}

#app
{
  position: absolute;
  min-height: 768px;
  width: 480px;
  background-image: url("../img/background.png");
  background-position: bottom;
  background-repeat: no-repeat;
}


/* metro style */
body, input, div, span
{
  font-size: 20px;
  color: white;
  font-family: Segoe WP, Sans-Serif;
}

body
{
  background:black;
  margin:0;
  padding:0;
}
 
h2
{
  font-weight: normal;
  font-size: 32px; /* PhoneFontSizeLarge */
}
 
h1
{
  font-weight: normal;
  font-size: 42.667px; /* PhoneFontSizeExtraLarge */
}

button
{
  background: black;
  color: white;
  border: 3px solid white; /* PhoneBorderThickness */
  padding: 6px 10px;
  font-size: 25.333px; /* PhoneFontSizeMediumLarge */
  position: relative;
  top: -4px;
}

button:active
{
  background: white;
  color: black;
}

button:disabled
{
  opacity: 0.7;
}

input[type="text"]
{
  font-size: 25.333px; /* PhoneFontSizeMediumLarge */
  width: 200px;
  padding: 6px;
  height: 31px;
  border: 3px solid white;
  color: black;
}

input[type="checkbox"]
{
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

/* property search view model */

ul.locationList li
{
  margin: 10px 0;
}

.searchForm
{
  margin-bottom: 15px;
}

.progress div
{
  width: 5px;
  height: 5px;
  overflow: hidden;
  position: absolute;  
  background: green;
}
 
.progress
{
  position: relative;
  height:10px;  
  margin-top: 10px;
  margin-bottom: 10px;
}

/* appBar */

.appBar
{
  background: #333;
  opacity: 0.8;
  height: 63px;
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.appBar .more
{
  height: 30px;
  position: absolute;
  right: 20px;
  text-align: right;
  width: 100px;
}

.appBar .more .pip
{
  display : inline-block;
  width: 5px;
  height: 5px;
  background: white;
  margin: 3px;
  margin-top: 10px;
  vertical-align: top;
}

.appBar .icons
{
  text-align: center;
}

.appBar .icon
{
    text-align: center;
    margin: auto;
    display: inline-block;
    min-width: 75px;
}

.appBar .icon img
{
    margin: 3px;
    width: 60px;
    height: 60px;
}


.iconText
{
  text-align: center;
  font-size: 11px;
  position: relative;
  top: -9px;
}

/* property listing styles */

.summary
{
  color: #aaa;
}

.summary span
{
  color: white;
}

ul.propertyList
{
  padding: 0;
}

li.property
{
  display: inline-block;
  list-style-type: none;
  width: 200px;
  height: 210px;
  vertical-align: top;
  background: rgba(100,100,100, 0.6);
  margin: 5px;
  padding: 5px;
}


li.property div.thumbnailContainer
{
  width: 160px;
  height:120px;
  padding: 2px;
  background-color: #aaa;
  margin: auto;
}

/* property listing - details styles */

ul.propertyDetails li 
{
  list-style-type: none;
  margin: 1px;
}

ul.propertyDetails .propertyType *,
ul.propertyDetails .propertyType
{
  font-size: 18.667px;
}

ul.propertyDetails .title
{
  color: #aaa;
  font-size: 18.667px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.propertyDetails .price,
ul.propertyDetails .price  *
{
  font-size: 25.333px;
}

ul.propertyDetails {
  padding: 0;
  margin: 5px 0;
}

/* propertyview */

div.propertyView img 
{
  height: 336px;
  padding: 2px;
  marginn: 5px;
  width: 448px;
  background-color: #aaa;
}

div.propertyView h2
{
  font-size: 25.333px;
}

div.propertyView ul.propertyDetails li.propertyType,
div.propertyView ul.propertyDetails li.propertyType *
{
  font-size: 32px;
}

div.propertyView ul.propertyDetails .price,
div.propertyView ul.propertyDetails .price  *
{
  font-size: 42.667px;
}