Flowers Home CSS

* {
    padding: 0;
    margin: 0;
}

body {
    position: relative;
    font-family: Verdana;
    background-image: url('http://i60.tinypic.com/260xv6q.jpg');
    /* had problems addressing the picture from local dir */
}

#wrapper {
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
    position: absolute;
    width:70%;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#wrapper > * {
    background:rgba(255, 105, 180, 0.6);
}

/* HEADER--------------------------------------------- */
#wrapper > header {
    padding: 10px;
    height: auto;
    border:2px solid black;
    margin-bottom: 25px;
    flex:1 100%;
    order: 1;

}

header h1 a {
    display: block;
    width: 100%;
    color:black;
}

header h1 a span {
    float:right;
}

header h1 a img {
    width:236px;
    height: 51px;
}
nav ul {
    float: right;
}

nav ul li {
    display: inline-block;
    list-style: none;
    width:130px;
    height: 50px;
}

nav ul li a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    border:1px solid black;
    background: #EA2678;
    text-align: center;
    line-height: 50px;
    color:white;
}

/* LEFT SIDE ----------------------------------------- */

.left {
    width:18%;
    padding: 10px;
    border:1px solid black;
    order:2;
    flex:1 auto;
    margin-right: 10px;
}

.left ul li {
    list-style: none;
    display: block;
    margin-bottom: 5px;
}

/* MAIN --------------------MAIN-------------------- */
section {
    width:45%;
    padding: 10px 0px 10px 25px;
    border:1px solid black;
    order:3;
    margin-right: 10px;
    flex:2 auto;
    text-align: center;
}

section article header {
    text-align: left;
    margin-bottom: 5px;
}
section img {
    display: inline-block;
    text-align: justify;
    width:109px;
    height: 82px;
}

/* RIGHT ---------------------RIGHT------------ */

.right {
    width:18%;
    padding: 10px;
    border: 1px solid black;
    order:4;
    flex:1 auto;
}

.right ul li {
    list-style: none;
}

/* FOOTER ------------- FOOTER ----------- */

footer {
    height: auto;
    margin-bottom: 20px;
    text-align: center;
    line-height: 60px;
    border:1px solid black;
    order:5;
    flex:1 100%;
    margin-top:10px;
}

footer a {
    color:black;
}


@media screen and (max-width:960px) {
    #wrapper {
        width:100%;
    }
}

@media screen and (max-width:780px) {
    section {
        flex:1 100%;
        order:2;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .left {
        flex:1 100%;
        order:3;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .right {
        flex:1 100%;
        order:4;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:640px) {
    nav {
        width:100%;
    }
    nav ul {
        width:100%;
    }
    nav ul li {
        display: block;
        width:100%;
    }