body {
    margin:0;
    padding:0;
    background:url(noise.png) #595959;
    font-family:'Roboto', Helvetica, sans-serif;
}
#wrap {
    max-width:1000px;
    min-width:500px;
    box-shadow:0 0 8px black;
    margin:0 auto;
    padding:8px 0;
    background:rgba(255,255,255,.7);
    border-radius:0 0 8px 8px;
    margin-bottom:500px;
}
h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}
div#wrap > header {
    display:flex;
    flex-wrap:wrap;
    padding:8px;
    margin:0 8px;
    background:white;
    border-radius:8px 8px 0 8px;
    border:1px solid black;
}
body.noNav div#wrap > header {
    border-radius:8px 8px 0 0;
}
div#wrap > header section.title {
    flex:1;
    margin-right:8px;
}
div#wrap > header section.title h1 {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
div#wrap > header section.menu {
    text-align:right;
}
div#wrap > header section.menu a.logo {
    color:black;
    text-decoration:none;
    font-size:1.5em;
    font-weight:bold;
}
div#wrap > header section.menu a.logo img {
    vertical-align:middle;
    margin-right:4px;
}
div#wrap > header:hover a {
    color:#2626ff;
}
main {
    display:flex;
    padding:0 8px;
}
main aside#menu {
    margin-right:8px;
}
main aside#menu h1, main aside#menu form {
    border:1px black;
    border-style:none solid;
}
main aside#menu h1 {
    padding:8px;
    border-radius:8px 8px 0 0;
    background-image:linear-gradient(to bottom, #ccffff 10%, #f2ffff);
    font-size:1em;
    text-shadow:1px 0 white, -1px 0 white, 0 -1px white, 0 1px white;
    text-align:center;
    border-style:solid solid dashed solid;
    margin-top:8px;
}
main aside#menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    border:1px solid black;
    border-top:0;
    background-color:#f2ffff;
    border-radius:0 0 8px 8px;
    margin-bottom:8px;
}
main aside#menu ul:hover a {
    color:#2626ff;
}
main aside#menu ul:hover a:hover {
    color:blue;
    text-decoration:underline;
}
main aside#menu a {
    display:block;
    padding:8px;
    text-decoration:none;
    border-bottom:1px dotted lightgrey;
}
main aside#menu li:last-of-type a {
    border-bottom:none;
}
main aside#menu form {
    border-bottom:1px solid black;
    border-radius:0 0 8px 8px;
    background:#f2ffff;
    padding:8px;
    margin-bottom:8px;
}
main aside#menu input[type=search] {
    margin-bottom:8px;
}
article#content {
    flex-grow:1;
    padding:9px 8px;
    border:1px solid black;
    border-style:none solid;
    background:white;
    border-bottom:1px dashed black;
    border-top:1px dashed black;
    margin:-1px 0;
}
article#content .bookteaser {
    overflow:auto;
    margin-bottom:8px;
}
article#content .bookteaser h1 {
    border-bottom:1px solid lightgrey;
    font-weight:normal;
    font-size:1em;
}
article#content .bookteaser img {
    height:75px;
    margin:8px;
    float:left;
}
article#content .bookteaser p {
    margin:0;
}
article#content .bookteaser .authors, article#content .bookteaser .authors a {
    color:#555;
}
article#content:hover a, article#content:hover .bookteaser .authors a {
    color:#2626ff;
}
article#content .book img {
    float:left;
    height:160px;
    width:122px;
}
article#content .book h1 {
    border-bottom:1px solid black;
    text-align:center;
    margin:8px 0;
}
article#content .cartitems {
    display:flex;
    flex-wrap:wrap;
    min-width:200px;
}
article#content .cartitems .bookteaser {
    margin:8px;
    border-radius:8px;
    padding:8px;
    box-shadow:0 0 8px black;
    min-width:200px;
    flex-grow:1;
}
article#content .cartitems button {
    margin-right:8px;
    display:inline-block;
}
article#content .cartitems button img {
    height:1em;
    margin: 0 4px 0 0;
}
article#content .book .twoCols {
    display:flex;
    overflow:auto;
}
article#content .book .twoCols .big {
    flex-grow:1;
    margin-left:8px;
}
article#content .book button img {
    height:1em;
    width:1em;
    margin-right:4px;
}
article#content .subheading {
    text-align:center;
    border-bottom:1px solid black;
}
article#content ul ul {
    margin-top:0;
}
article#content .formGroup {
    display:flex;
    margin-top:8px;
}
article#content .formGroup form {
    box-shadow:0 0 8px black;
    border-radius:8px;
    margin-left:8px;
}
article#content .formGroup form h1 {
    margin:0 -8px;
}
article#content .formGroup form label {
    margin:8px 0;
    display:flex;
}
article#content .formGroup form label input {
    padding:4px;
}
article#content .formGroup form label span {
    min-width:200px;
}
article#content .formGroup form.required label span::after {
    content:'*';
    color:red;
}
article#content .checkout {
    padding:8px;
    flex-grow:1;
}
article#content .smallcart {
    padding:8px;
    margin:0 8px 0 16px;
    border-radius:8px;
    box-shadow:0 0 8px black;
}
article#content .smallcart p {
    padding:0 8px;
}
article#content .smallcart h1 {
    padding:0 2em;
    margin:0 -8px;
}
footer {
    background:white;
    border-radius:8px 0 8px 8px;
    border:1px solid black;
    padding:8px;
    margin:0 8px;
    color:#555;
}
footer div.links {
    text-align:center;
}
footer div.recent {
    display:flex;
}
footer div.recent div {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
body.noNav footer {
    border-radius:0 0 8px 8px;
}
footer a {
    color:#555;
    text-decoration:none;
}
footer:hover {
    color:black;
}
footer:hover a {
    color:#2626ff;
}
footer:hover a:hover {
    text-decoration:underline;
    color:blue;
}
a {
    color:black;
    text-decoration:none;
}
a:hover {
    color:blue;
    text-decoration:underline;
}
.center {
    text-align:center;
}
.red {
    color:red;
}
.green {
    color:green;
}
small {
    color:#333;
}
.clearfix {
    overflow:auto;
}
#hider {
    background:rgba(0,0,0,.6);
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
}
.spinner {
    height:40px;
    width:40px;
    margin:100px 100px;
    background:black;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#imageHolder {
    margin:0 auto;
    transition:all .5s;
    background:white;
    border-radius:8px;
    border:1px solid black;
    box-shadow:0 0 8px black;
    padding:8px;
    min-height:48px;
    min-width:48px;
    background-repeat:no-repeat;
    background-position:center;
}
@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}
@media screen and (max-device-width: 480px) {
    div#wrap {
        width:100%;
        min-width:auto;
        max-width:auto;
    }
    div#wrap header, main, footer {
      border-radius:0;
      border-left:0;
      border-right:0;
    }
    main {
        display:flex;
        flex-direction:column;
        padding:0;
    }
    div#wrap > header, footer {
        border-radius:0;
        margin:0;
    }
    body.noNav div#wrap > header, body.noNav footer {
        border-radius: 0;
        margin-bottom:8px;
    }
    body.noNav footer {
        margin-top:8px;
    }
    div#wrap > header {
        display:block;
    }
    div#wrap > header section.menu {
        text-align:left;
        font-size:.75em;
    }
    div#wrap > header section.menu a.logo img {
        height:1em;
    }
    main aside#menu {
        margin:0 8px;
        display:flex;
        order:2;
    }
    main aside#menu section {
        margin-right:8px;
    }
    main aside#menu h1 {
        margin-top:0;
    }
    article#content {
        border-radius:0;
        border:1px solid black;
        border-left:0;
        border-right:0;
        margin:8px 0;
    }
    article#content .formGroup, article#content .formGroup form label, article#content .formGroup label input {
        display:block;
    }
    article#content .formGroup form {
        margin:0;
        margin-bottom:8px;
    }
    article#content .formGroup label span {
        min-width:auto;
        display:block;
    }
    article#content .formGroup .smallcart {
        margin:0;
    }
    footer {
      margin-bottom:8px;
    }
    footer div.recent {
        display:none;
    }
    a {
        color:blue;
        text-decoration:underline;
    }
    #imageHolder {
        width:98%;
        margin:8px;
    }
    #imageHolder img {
        width:100%;
    }
}