/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Build: Australia Post - Things that Sting
// Version 1.0.0
// File: Memory Game Stylesheet
// Author: Abhishek Suresh
// Copyright Owner: Raremedia Pty Ltd (Andrew Davidson)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#memoryContainer{
    width: 710px;
    height: 570px;
    padding-top: 20px;
    padding-left: 20px;
}
#ctrl {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.reset{
    position: absolute;
    top: -55px;
    left: 59px;
}

#content {
    position: relative;
    width: 671px;
    height: 493px;
    white-space:no-wrap;
    background: url("../image/memory-bg.jpg")no-repeat;
}

#content > a {
    padding: 0;
    margin: 0;
    display: block;
    cursor:pointer;
    position: absolute;
}

#content > a.active {
    z-index:4;
}

#content > a#col1 {
    height: 141px;
    width: 217px;
    left: 247px;
    top: 25px;
}
#content > a#col1.active {background: url("../image/memory-wasp-hover.png") no-repeat; }


#content > a#col2 {
    height: 182px;
    width: 196px;
    right: 11px;
    top: 67px;
}
#content > a#col2.active { background: url("../image/memory-ant-hover.png") no-repeat; }

#content > a#col3 {
    height: 185px;
    width: 300px;
    bottom: 19px;
    right: 10px;
}
#content > a#col3.active { background: url("../image/memory-snake-hover.png") no-repeat;}

#content > a#col4 {
    height: 187px;
    width: 234px;
    top: 11px;
    left: 14px;
}
#content > a#col4.active { background: url("../image/memory-lion-hover.png") no-repeat ;}

#content > a#col5 {
    height: 134px;
    width: 167px;
    bottom: 6px;
    left: 92px;
}
#content > a#col5.active { background: url("../image/memory-stone-hover.png") no-repeat; }
#content > a#col6 {
    height: 156px;
    width: 345px;
    top: 198px;
    left: 12px;

}
#content > a#col6.active { background: url("../image/memory-stingray-hover.png") no-repeat;}
/* ctrl bar */

#ctrl {
    position: absolute;
    top: 43px;
    right: 40px;
    height: 35px;
    background: #fff;
    z-index: 5;
    width: 122px;
    border-radius: 8px;
    padding: 3px 0px 3px 15px;
}
#endScreen {
    display: none;
    background: rgba(0,0,0,.5);
    position:absolute;
    width: 671px;
    height: 493px;
    top: 20px;
    left: 20px;
    z-index: 10;
    color: #fff;
    text-align:center;
    border-radius: 20px;
}

#endScreen.active {
    display:block;
}

#endScreen h2 {
    margin-top: 90px;
}
#endScreen p{
    color:#fff !important;
}

#start{
    top: -55px;
    left: -298px;
}
#muteBox{
    position: absolute;
    top: -35px;
    right: 20px;
}

#intro {
    font-size: 1.5em;
    width: 671px;
    height: 493px;
    position:absolute;
    text-align:center;
    z-index: 5;
    display:none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
}
#intro.active {
    display: block;
}

#reset{
    margin-left: -40px;
    margin-top: 20px;
}