/************************************************************
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: 98%;
 font-family: Helvetica, Arial, Sans-Serif;
 vertical-align: baseline;
 background: transparent;
 line-height: normal;
}


/*************************************************
Basic layout properties
*************************************************/
.card {
 max-width: 300px;
 margin: 1em 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;
 font-size: 80%;
}

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

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


/*************************************************
Titles, text and lists
*************************************************/
h1 {
 font-size: 1.8em;
 font-weight: bold;
 margin: 0.67em 0;
}

h2 {
 text-align: center;
 font-size: 1.3em;
 font-weight: bold;
 margin: 0.85em 0 0.5em;
}

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

h3 {
 text-align: center;
 font-size: 1.5em;
 font-weight: bold;
 margin: 0.85em 0 0.5em;
}

.desc {
 margin-bottom: 1em;
}

ul {
 list-style-type: square;
 margin-left: 1em;
}


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

.network { background-image: url('icon-network-1.png'); }
.free { background-image: url('icon-free-1.png'); }
.exploit { background-image: url('icon-exploit-1.png'); }
.optimize { background-image: url('icon-optimize-1.png'); }
.web { background-image: url('icon-web-1.png'); }
.flexible { background-image: url('icon-flexible-1.png'); }


/*************************************************
Last card
*************************************************/
.last {
 text-align: center;
}

.mobiwebapp {
 background: transparent url('logo-mobiwebapp-1.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
*************************************************/