body {
    padding:0;
    margin:0;
    height:100vh;
    height:-webkit-fill-available; /* fix for iphone when address bar covers top of the page (1/2) */
    width:100vw;
    position:absolute;
    top:0;
    /*left:0;  */
    background-color:#d9e4cd;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    color:#000000;
}

html {
    height:-webkit-fill-available; /* fix for iphone when address bar covers top of the page (2/2) */
}

#gameCanvas {
    height:100vh;
    width:100vw;
    position:absolute;
    top:0;
    left:0;
}

h1, h2 {
    font-weight:bold;
}

a, a:link, a:visited, a:active {
    color:blue;
    text-decoration:none;
    font-weight:normal;
    font-size:14pt;
}

a:hover {
    text-decoration:none;
    color:green;
    font-size:14pt;
}

h1 {
    position:relative;
    color:#333;
    font-size:12pt;
    padding:4px 0;
    margin:0;
}

h2 {
    position:relative;
    color:#333;
    font-size:10pt;
    padding:2px 0;
    margin:0;
}

.boxcontent {
    position:relative;
    padding:7px 10px;
}

.statusmessagebox {
    border:1px solid #d7d7d7;
    background:none;
    padding:3px;
    margin:0 0 5px 0;
}

table.tbl1, td.td1 {
    border-color:#656440;
    border-style:solid;
}

table.tbl1 {
    border-width:0 0 1px 1px;
    border-spacing:0;
    border-collapse:collapse;
}

td.td1 {
    margin:0;
    padding:4px;
    border-width:1px 1px 0 0;
    background-color:#ffffff;
}

hr {
    color:#656440;
    background-color:#656440;
}

.itemDiv {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    border:solid 2px #228B22;
    background-color:#f5f5f5;
    width:98%;
    text-align:center;
    margin-top:8px;
    padding-top:6px;
    padding-bottom:6px;
}

.itemDivNoBorder {
    padding:2px;
    width:98%;
    text-align:center;
    margin-top:5px;
}

.announcement-box {
    padding:5px;
    background:#e9ffd1;
    height:55px;
    vertical-align:middle;
}

.announcement-box-title {
    font-size:1em;
    font-weight:bold;
    display:inline;
    color:green;
}

.announcement-box-text {
    display:inline;
    padding-left:10px;
    padding-right:10px;
}

.attention {
    padding:5px;
    background-color:#e2ffe4;
    border:green 1px solid;
}

.locked {
    color:#e63737;
    font-weight:normal;
}

.countdown {
    font-size:105%;
}

#rslt {
    height:auto;
    color:#000000;
    font-weight:normal;
    font-size:105%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    text-align:center;
    position:fixed;
    top:4px;
    left:16px;
    right:16px;
    z-index:400;
}

em {
    color:red;
    font-size:9pt;
}

.actionpop {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    width:184px;
    height:184px;
    border:2px #ccc solid;
    background:rgb(230, 230, 250);
    background:rgba(230, 230, 250, 0.9);
}

.eatingpop {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    width:184px;
    height:184px;
    border:2px #ccc solid;
    background:rgb(230, 230, 250);
    background:rgba(230, 230, 250, 0.9);
}

.hatchpop {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    width:184px;
    height:184px;
    border:2px #ccc solid;
    background:rgb(230, 230, 250);
    background:rgba(230, 230, 250, 0.9);
}


.pausedpop {
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    text-align:center;
    padding:10px;
    width:270px;
    height:220px;
    border:2px #ccc solid;
    background:rgb(230, 230, 250);
    background:rgba(230, 230, 250, 0.9);
}

    
a.mblaterlink, a.mblaterlink:link, a.mblaterlink:visited, a.mblaterlink:active {
    color:blue;
    text-decoration:none;
    font-weight:normal;
    font-size:12pt;
}

a.mblaterlink:hover {
    text-decoration:none;
    color:green;
    font-size:12pt;
}


input[type="button"], input[type="submit"] {
    color:#050;
    font-weight:bold;
    font-size:120%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    background-color:#fed;
    border:1px solid;
    border-color:#696 #363 #363 #696;
    width:120px;
    height:50px;
}


[type=text] {
    color:#050;
    font-weight:bold;
    font-size:120%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    border:1px solid black;
    width:240px;
    height:34px;
}

.labelStatus {
    border-radius:6px;
    background:#e6e6fa;
    padding:6px;
    padding-left:10px;
    border:1px solid #808080;
    color:#000000;
}


table.tbl4 { 
    border-collapse:separate; 
    border-spacing:0 10px; 
    margin-top:-10px; /* correct offset on first border spacing if desired */
}
td.td4 {
    border:solid 2px #228B22;
    border-style:solid none;
    padding:10px;
    background-color:#f5f5f5;
}
td.td4:first-child {
    border-left-style:solid;
    border-top-left-radius:10px; 
    border-bottom-left-radius:10px;
}
td.td4:last-child {
    border-right-style:solid;
    border-bottom-right-radius:10px; 
    border-top-right-radius:10px; 
}


table.tbl6 {
    border-collapse:separate;
}

td.td6 {
    border-right:solid 1px #228B22;
    border-bottom:solid 2px #228B22;
    border-top:solid 2px #228B22;
    padding-top:6px;
    padding-bottom:6px;
    background-color:#f5f5f5;
}

tr.tr6:first-child td.td6:first-child {
    border-top-left-radius:6px;
    border-left:solid 2px #228B22;
}

tr.tr6:first-child td.td6:last-child {
    border-top-right-radius:6px;
    border-right:solid 2px #228B22;
}

tr.tr6:last-child td.td6:first-child {
    border-bottom-left-radius:6px;
}

tr.tr6:last-child td.td6:last-child {
    border-bottom-right-radius:6px;
}


@-webkit-keyframes pulse {
 0% { -webkit-transform:scale(1, 1); }
 50% { -webkit-transform:scale(0.94, 0.94); }
 100% { -webkit-transform:scale(1, 1); }
}


@-webkit-keyframes pulseChar {
 0% { -webkit-transform:scale(1, 1); }
 50% { -webkit-transform:scale(0.97, 0.97); }
 100% { -webkit-transform:scale(1, 1); }
}


@keyframes moveUpDown {
    0%, 100% {
        bottom:0;
    }

    50% {
        bottom:100px;
    }
}

#handMovingUpDown {
    animation-name:moveUpDown;
    animation-duration:2s;
    animation-iteration-count:3;
    position:absolute;
    left:0;
    bottom:0;
}


#btnPlay {
	-webkit-animation:pulse 1s linear infinite;
}

#btnPlay:hover {
	-webkit-animation:none;
}

#btnShare {
	-webkit-animation:pulse 1s linear infinite;
}

#btnShare:hover {
	-webkit-animation:none;
}


#btnCoin {
	-webkit-animation:pulse 2s linear infinite;
}

#btnCoin:hover {
	-webkit-animation:none;
}

#btnVideo {
	-webkit-animation:pulse 2s linear infinite;
}

#btnVideo:hover {
	-webkit-animation:none;
}


#btnMenuMain,#btnMenuBedroom,#btnMenuFridge,#btnMenuBathroom,#btnMenuMatch3,
#btnMenuGameCenter,#btnMenuPlayground2,#btnMenuZoo,#btnMenuToys,#btnMenuEggHunt,
#btnMenuFamily {
    -webkit-animation:pulse 1s linear infinite;
}

#btnMenuCare, #btnMenuMusicRoom, #btnMenuPlayroom, #btnMenuFamilyroom, #btnMenuLeaderboards,
#btnMenuPlayground1, #btnMenuBeach, #btnMenuCamp, #btnMenuToyCloset,
#btnMenuAccount, #btnMenuFreeCell3 {
    -webkit-animation:pulse 2s linear infinite;
}


#btnPlayFriend {
	-webkit-animation:pulse 1s linear infinite;
}

#btnPlayFriend:hover {
	-webkit-animation:none;
}


#btnHint {
	-webkit-animation:pulse 1s linear infinite;
}

#btnHint:hover {
	-webkit-animation:none;
}

#btnInviteFriends {
    -webkit-animation:pulse 0.5s linear 2s 10;
}

#btnInviteFriends:hover {
	-webkit-animation:none;
}

#btnClothes {
    -webkit-animation:pulse 3s linear infinite;
}

#btnClothes:hover {
	-webkit-animation:none;
}

#btnShoes {
    -webkit-animation:pulse 3s linear infinite;
}

#btnShoes:hover {
	-webkit-animation:none;
}

#locationStoreItem {
    -webkit-animation: pulse 0.5s linear 2s 10;
}

#locationStoreItem:hover {
	-webkit-animation:none;
}


#imgHand {
    animation-name:pulse;
    animation-duration:0.32s;
    animation-timing-function:linear;
    animation-delay:1s;
    animation-iteration-count:20;
    /*animation-direction: alternate;    */
    /*-webkit-animation: pulse 0.5s linear 2s 10;   */
}

#imgHand:hover {
	-webkit-animation:none;
}


#imgEgg {
    animation-name:pulse;
    animation-duration:0.50s;
    animation-timing-function:linear;
    animation-delay:1s;
    animation-iteration-count:20;
    /*animation-direction: alternate;    */
    /*-webkit-animation: pulse 0.5s linear 2s 10;   */
}

#imgEgg:hover {
	-webkit-animation:none;
}


.gameLocation {
    border-radius:6px;
    border:solid 2px #228B22;
    overflow:auto;
}


.match3Title {
    color:#000000;
    font-weight:normal;
    font-size:100%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    padding-top:10px;
}


.match3Label {
    color:#000000;
    font-weight:bold;
    font-size:100%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
}


.match3LabelRed {
    color:red;
    font-weight:bold;
    font-size:100%;
    font-family:"Trebuchet MS",Helvetica,Sans-serif;
    -webkit-animation:pulse 1s linear infinite;
}


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.6;
    z-index: 100;
}

#loading {
    z-index: 101;
    position: relative;
    background: url(//s3.amazonaws.com/images.x2line.com/apps/babies/misc/loading.gif);
    display: none;
    margin: auto;
}


/*
    this is an attempt to rotate the contents of the screen in portrait mode
    so it would be landscape
    for now I'm using alternative solution where the user is asked to rotate the screen

    @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vw;
        height: 100vh;
        height: -webkit-fill-available;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0px;
    }
}*/