/************************************************************
Regular stylesheet for Mobile Web Application Best Practices
cards, applied on top of the minimal style sheet (minimum.css)
when window is wider than 300px, provided that device supports
CSS media queries.
************************************************************/


/*************************************************
Titles, text and lists
*************************************************/
h3 {
 margin-top: 0;
}

h2 {
 font-size: 1.5em;
}

.bp {
 font-size: 1.6em;
}

ul {
 font-size: 90%;
}


/*************************************************
Invert card text color and add background images
*************************************************/
.card {
 background-color: transparent;
 background-image: url('img/regular/bg-page.png');
 border: none;
 padding: 100px 80px 100px 90px;
 width: 854px;
 height: 531px;
 position: relative;
}


/*************************************************
Last card
*************************************************/
.last {
 padding-left: 200px;
 width: 744px;
 height: 571px;
 background-image: url('img/regular/bg-cover.png');
}

div.last h1 {
 margin-bottom: 2em;
}

.last .ack {
 position: absolute;
 bottom: 100px;
 width: 654px;
}


/*************************************************
Cover card
*************************************************/
.cover {
 padding: 100px 280px 60px 90px;
 width: 654px;
 height: 571px;
 background-image: url('img/regular/bg-cover.png');
}

div.cover h1 {
 margin-bottom: 1em;
}

div.card .nav {
 width: 500px;
 margin-left: auto;
 margin-right: auto;
}

.nav li {
 display: block;
 float: left;
}


.nav a {
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: center;
 width: 150px;
 height: 150px;
 display: block;
 margin: 5px;
}

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


.nav a span {
 display: none;
}

/* Clear the float after the navigation menu */
.nav:after {
 content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
 visibility: hidden;
 clear: both;
 height: 0 !important;
 display: block;
 line-height: 0;
 font-size: 36px;
}

.card acronym {
 display: block;
 width: 39px;
 height: 21px;
 margin: 5px auto;
 background: transparent url('img/regular/icon-w3c.png') no-repeat center top;
 border-bottom: none;
}

.card acronym span {
 display: none;
}

.ack {
 text-align: right;
 font-size: 60%;
}
.cover .ack {
 position: absolute;
 bottom: 60px;
 width: 654px;
}


/*************************************************
Back to top links
*************************************************/
.top {
 position: absolute;
 bottom: 40px;
 right: 35px;
 margin-right: 0;
}


/*************************************************
Last card
*************************************************/
.last {
 background-image: url('img/regular/bg-last.png');
}

.last h3 {
 margin-top: 45px;
}

.last .top {
 bottom: 20px;
}

.mobiwebapp {
 margin-top: 10em;
 font-size: 80%;
 background: transparent url('img/regular/logo-mobiwebapp.png') no-repeat center top;
 padding-top: 50px;
}


/*************************************************
Mobile Web Best Practices flipcards
*************************************************/
.flipcards {
 float: left;
 margin-right: 2em;
}

.flipcards img {
 border-radius: 20px;
}