/* Body
--------------------------------------------- */

body {
    background-image: url("http://www.wrenheart.net/img/css/bg-main.png");
    background-attachment:fixed;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: #871e36;
    padding-top: 0px;
    margin-top: 0px;
    }

p {
    padding-bottom: 4px;
}

@media screen and (max-width: 44em) {

    }

/* Headers
--------------------------------------------- */

h1 {
    color: #f06383;
    font-family: 'Noto+Sans+SC', sans-serif;
    font-weight: bold;
	  font-size: 1.5em;
    margin: 0;
    }

h2 {
    color: #fff;
    font-family: 'Noto+Sans+SC', sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    text-align:center;
    margin: 30px 0 30px 0;
    padding: 5px 0 5px 0;
    background: #c73c5c;
    border: 1px solid #81112a;
    border-radius: 25px;
    }

h3 {
    color: #f06383;
    font-family: 'Noto+Sans+SC', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0 0 10px 0;
    }

h4 {
    color: #f06383;
    font-family: 'Noto+Sans+SC', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0;
    }

a:hover h3{
    color: #3b59a4;
    }

/* Dividers
--------------------------------------------- */

hr {
    border: 0;
    height: 1px;
    color: #591424;
    background: #591424;
    }

/* Layout
--------------------------------------------- */

.wrap {
    width:902px;
    margin-left: auto;
    margin-right: auto;
    }

.banner {
    width:900px;
    height:165px;
    background: #c73c5c;
    border-width: 1px;
    border-color: #81112a;
    border-style: solid;
    }

.navbar {
    width:900px;
    border-width: 1px;
    border-color: #81112a;
    border-style: solid;
    }

.content {
    width: 879px;
    padding: 20px 10px 20px 10px;
    background: #fff;
    border-width: 1px;
    border-color: #81112a;
    border-style: solid;
    }

.footer {
    float: right;
    width: 880px;
    text-align: right;
    padding: 10px;
    color: #5b0b1d;
    background: #c73c5c;
    border-width: 1px;
    border-color: #81112a;
    border-style:solid;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
   -moz-border-radius-bottomright: 6px;
    }

/* Navbar
--------------------------------------------- */

ul.navbar {
    display: table;
    max-width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
    list-style: none;
    height:36px; line-height:36px;
    background: #127fac;
    font-family: 'Open Sans', sans-serif;
    }
ul.navbar li {
    display: table-cell;
    border-right:1px solid #045176;
    }
ul.navbar a {
    display:block;
    color:#fff;
    text-align: center;
    text-decoration:none;
    }
ul.navbar a:hover,
ul.navbar li.current a {
    background:#005c87;
    }

/* Links
--------------------------------------------- */
a {
    color:#ba2043;
    text-decoration:none;
    font-weight:bold;
    }

a:visited {
    color:#e55081;
}

a:hover {
    color: #3b59a4;
    }

.content a:hover img{
    opacity: 0.6;
    }

a:active,a:focus {
    outline: none;
    }

.footer a {
    color: #5b0b1d;
    text-decoration: none;
    font-weight: bold;
    }

.footer a:visited {
    color:#5b0b1d;
    }

.footer a:hover {
    color: #fff;
    }

.footer a:active,a:focus {
    outline: none;
    }

/* Text Styles
--------------------------------------------- */

.title {
    color: #f06383;
    font-family: 'Noto+Sans+SC', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0 0 10px 0;
    }

.small-text {
    font-size: .8em;
    }

.large-text {
    font-size: 1.2em;
    }

/* Toy Category Images
--------------------------------------------- */

.toybox{
    text-align:center;
    margin:0 auto;
    }

.toybox a{
    margin:0px 10px;
    display:inline-block;
    text-decoration:none;
    }

.toybox img {
    padding: 0px;
    background-color: #f06383;
    border: 2px solid;
    border-radius: 10px;
    }

/* Toy Gallery Images
---------------------------------------------*/

.six {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.six-left {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 3px;
    }

.five {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.four-tall {
    display: grid;
    grid-auto-rows: 200px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3px;
    text-align: center;
    }

.one {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3px;
    text-align: center;
    }

/* Images with Large Text Areas on Right
---------------------------------------------*/

.one-two {
    display: grid;
    width: 800px;
    grid-gap: 10px;
    grid-template-columns: 1fr 600px;
    margin: auto;
    }

/* Images with a Larger Bottom Margin
---------------------------------------------*/

.six-tall {
    display: grid;
    grid-auto-rows: 165px;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 3px;
    }

/* Pretty Tooltips
---------------------------------------------*/

a.tip:hover .tiptext {
    display:block; position:absolute;
    font-weight:normal;
}

.tiptext {
    border-radius: 3px;
    background-color: #f06383;
    padding: 3px;
    display: none;
    color: #871e36;
}

/* Arrow Up
--------------------------------------------- */
.scrollup {
    height: 50px;
    width: 50px;
    opacity:0;
    text-align:center;
    background: #f06383;
    border-width: 1px;
    border-color: #c53a5a;
    border-style: solid;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    position:fixed;
    bottom:20px;
    right:20px;
    transition:opacity 1s ease-in;
    }

.scrollup.visible {
    opacity:1;
    }