/************************************************************
Minimal stylesheet for Mobile Web Application Best Practices
cards, applied by each and every browser.
************************************************************/

/************************************************************
Reset styles
************************************************************/
html, body, form, fieldset, p, a, ul, ol, li, div, legend, label,
br, input, button, textarea, h1, h2, h3, h4, h5, strong {
 margin: 0;
 padding: 0;
 border: 0;
 font-weight: inherit;
 font-style: normal;
 font-size: 100%;
 font-family: Helvetica, Arial, Sans-Serif;
 vertical-align: baseline;
 background: transparent;
 line-height: normal;
}

strong {
 font-weight: bold;
 color: #f08925;
}

em {
 font-style: italic;
}


/*************************************************
Basic layout properties
*************************************************/
.card {
 margin: 0 auto;
 padding: 0.5em;
 background: #333c4e none no-repeat;
 color: white;
 border: thick solid #b4b5b7;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
}

.card a:link,
.card a:visited {
 color: white;
}

.nav li {
 min-height: 2em;
}


/*************************************************
Titles, text and lists
*************************************************/
div.card h1 {
 text-align: center;
 font-size: 1.8em;
 font-weight: bold;
 margin: 0.67em 0;
 padding: 0;
}

.bp {
 display: block;
 font-size: 1.1em;
}

.desc {
 font-size: 120%;
}

div.card ul {
 list-style-type: square;
 margin-left: 4em;
 margin-top: 1em;
}

div.card dt {
 margin: 0;
}

div.card dd {
 font-size: 80%;
 margin-bottom: 0;
}

/*************************************************
Icons
*************************************************/
div.card .icon {
 background: transparent none no-repeat center top;
 padding-top: 170px;
}

div.card .network { background-image: url('img/regular/icon-network.png'); }
div.card .free { background-image: url('img/regular/icon-free.png'); }
div.card .exploit { background-image: url('img/regular/icon-exploit.png'); }
div.card .optimize { background-image: url('img/regular/icon-optimize.png'); }
div.card .web { background-image: url('img/regular/icon-web.png'); }
div.card .flexible { background-image: url('img/regular/icon-flexible.png'); }
div.card .why { background-image: url('img/regular/icon-why.png'); }
div.card .mobileonly { background-image: url('img/regular/icon-mobileonly.png'); }


/*************************************************
Last card
*************************************************/
.mobiwebapp {
 background: transparent url('img/logo-mobiwebapp.png') no-repeat center top;
 padding-top: 20px;
 margin-top: 2em;
}


/*************************************************
Back to top links
*************************************************/
.top {
 font-size: 110%;
 font-variant: small-caps;
 text-align: right;
 margin-right: 1em;
}


/*************************************************
Make sure there's enough room between items in
the navigation menu
*************************************************/