﻿/*------ Reset Styles ------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
/*-------MAIN STYLES----------*/
body 
{
    font-family:Arial;
    font-size:14px;
    color:#555;
    background:#181818 !important;
}
#spacer 
{
    height:15px;
    width:100%;
    display:block;
    border:1px red solid;
}
.clear 
{
    clear:both;
}
#header 
{
    width:100%;
    /*height:695px;*/
    padding-bottom:15px;
    display:block;
    background: #181818 url(../images/headerBG-13x312.jpg) center top repeat-x;
}
    #header-characters 
    {
        margin: 0 auto;
        background: url(../images/headerCharacters-1460x540.png) bottom center no-repeat;
    }
    #header-center 
    {
        width:980px;
        margin: 0 auto;
    }
        #header-logo 
        {
            width:321px;
            height:183px;
            padding: 0 0 15px 0;
            float:left;
        }
        #header-text
        {
            width:615px;
            height:138px;
            float: left;
            padding: 35px 0 15px;
        }
        #header-player 
        {
            width:630px;
            height:565px;
            margin: 0 auto 15px;
            border:5px white solid;
            background: #181818;
        }
            #game 
            {
                margin:15px;
            }
            #header-player-game-buttons 
            {
                width:500px;
                margin: 0px auto;
                text-align:center;
            }
                #game-embed
                {
                    width:256px;
                    height:16px;
                    display:block;
                    margin-left:120px;
                    background:url(../images/button-putThis.png) center top no-repeat;
                }
                    #game-embed:hover
                    {
                        background:url(../images/button-putThis.png) center bottom no-repeat;
                    }
/*-----------LOWER CONTAINER BACKGROUND TILES-------------*/
.bg-container {background:url(../images/tile-right.png) top center repeat; /* right */} 
.bg-container .wrap1 {width:50%; background:url(../images/tile-left.png) top center repeat; /* left */} 
.bg-container .wrap2 {margin-right:-100%;}
/*-----------LOWER CONTAINER BACKGROUND TILES-------------*/
#container 
{
    width:980px;
    margin: 0 auto;
    padding:10px 20px 20px 20px;
    background: #ffffff;
    display:block;
}
    .title 
    {
        margin:20px 0px;
    }
    #gotta 
    {
        width:920px;
        padding:15px;
        font-size:18px;
        line-height:24px;
        color:#fff;
        min-height:148px;
        margin: 0 auto;
        border:6px solid white;
        background:#4488cb;
	    filter:progid:DXImageTransform.Microsoft.Glow(Color=#999999,Strength=3); 
        -moz-box-shadow: 0px 0px 5px 3px #999999; 
        -webkit-box-shadow: 0px 0px 5px 3px #999999; 
        box-shadow: 0px 0px 5px 3px #999999;
    }
        #gotta img {
            padding: 0 0 5px 10px;
        }
    #share 
    {
        width:920px;
        padding:15px;
        min-height:148px;
        margin: 0 auto;
        border:6px solid white;
        background:#1f61a0 url(../images/share-bg.jpg) top center repeat-x;
    }
        #share-background 
        {
			min-height:165px;
            background: url(../images/share-characters-844x90.png) center bottom no-repeat;
        }
            #share-icons 
            {
                margin: 0 auto;
                text-align:center;
                width:650px;
				padding: 18px 0 0 330px;
            }
                #share-facebook
                {
                    width:83px;
                    height:83px;
                    display:block;
                    margin:0 75px 0 10px;
                    float:left;
                    background:url(../images/share-facebook.png) 0 0 no-repeat;
                }
                    #share-facebook:hover
                    {
                        background:url(../images/share-facebook.png) 0 -83px no-repeat;
                    }
                #share-twitter
                {
                    width:83px;
                    height:83px;
                    display:block;
                    margin:0 75px 0 0;
                    float:left;
                    background:url(../images/share-twitter.png) 0 0 no-repeat;
                }
                    #share-twitter:hover
                    {
                        background:url(../images/share-twitter.png) 0 -83px no-repeat;
                    }
                #share-stumble
                {
                    width:83px;
                    height:83px;
                    display:block;
                    margin:0 75px 0 0;
                    float:left;
                    background:url(../images/share-stumble.png) 0 0 no-repeat;
                }
                    #share-stumble:hover
                    {
                        background:url(../images/share-stumble.png) 0 -83px no-repeat;
                    }
                #share-google
                {
                    width:83px;
                    height:83px;
                    display:block;
                    margin:0 75px 0 0;
                    float:left;
                    background:url(../images/share-google.png) 0 0 no-repeat;
                }
                    #share-google:hover
                    {
                        background:url(../images/share-google.png) 0 -83px no-repeat;
                    }
	#games 
	{
		width:965px;
		padding:0 0 0 10px;
		display:block;
	}
		.game 
		{
			float:left;
			margin:0 35px 35px 0;
			border:6px solid white;
			filter:progid:DXImageTransform.Microsoft.Glow(Color=#999999,Strength=3); 
			-moz-box-shadow: 0px 0px 5px 3px #999999; 
			-webkit-box-shadow: 0px 0px 5px 3px #999999; 
			box-shadow: 0px 0px 5px 3px #999999;
		}
		.game-right
		{
			margin: 0 0 35px 0;
			border: 1px blue solid;
			float:left;
			border:6px solid white;
			filter:progid:DXImageTransform.Microsoft.Glow(Color=#999999,Strength=3); 
			-moz-box-shadow: 0px 0px 5px 3px #999999; 
			-webkit-box-shadow: 0px 0px 5px 3px #999999; 
			box-shadow: 0px 0px 5px 3px #999999;
		}
		    #stb 
		    {
		        display: block;
                width: 449px;
                height: 166px;
                background: url(../images/game-supertofuboy.jpg) no-repeat 0 0;
		    }
		    #stb:hover 
		    {
		        background-position: 0 -166px;
		    }
		    #mario 
		    {
		        display: block;
                width: 449px;
                height: 166px;
                background: url(../images/game-mario.jpg) no-repeat 0 0;
		    }
		    #mario:hover 
		    {
		        background-position: 0 -166px;
		    }
		    #scs 
		    {
		        display: block;
                width: 449px;
                height: 166px;
                background: url(../images/game-scs.jpg) no-repeat 0 0;
		    }
		    #scs:hover 
		    {
		        background-position: 0 -166px;
		    }
		    #cooking 
		    {
		        display: block;
                width: 449px;
                height: 166px;
                background: url(../images/game-cookingmama.jpg) no-repeat 0 0;
		    }
		    #cooking:hover 
		    {
		        background-position: 0 -166px;
		    }
		#more-games
		{
			width:100%;
			text-align:right;
			margin: 0 0 20px 0;
		}
		    #more-games-button 
		    {
		        width:181px;
		        height:19px;
		        display:block;
		        float:right;
		        background: url(../images/more-games.png) 0 0 no-repeat;
		    }
		        #more-games-button:hover 
		        {
		            background: url(../images/more-games.png) 0 -19px no-repeat;
		        }
/*-------FOOTER STYLES-----------*/
#footer 
{
    width:100%;
    background:#000;
    display:block;
}

/* responsive styles */

div {
    box-sizing: border-box;
}
#wrap_branding {
    box-sizing:initial;
}
#container {
    width:100%;
    max-width:980px;
}
#branding_bar {
    width:100% !important;
    max-width:918px;
}
.branding_social {
    width: 300px !important;
}
#branding_footer {
    width:100% !important;
    max-width:960px;
    margin:0 auto !important;
    padding: 18px !important;
}
#header-center {
    width:100%;
    max-width:980px;
}
#header {
    width:100%;
    margin:0;
    padding:0;
}
#gotta img {
    padding: 0 10px 5px;
}
#gotta img.quote {
    width:100%;
    max-width:878px;
    padding: 0 0 5px;
}
#gotta,
#share {
    width:100%;
    max-width:950px;
}
#share {
    padding: 15px 0;
}
#share-icons {
    width: 241px;
    padding: 18px 0 0 0;
}
#share-facebook {
    margin: 0 75px 0 0;
}
#share-twitter {
    margin: 0;
}
#games {
    width:100%;
    max-width: 965px;
    padding:0;
}
.game {
    margin: 0 18px 35px 0;
    max-width:461px;
    width:49%;
}
.game-right {
    max-width:461px;
    width:49%;
}
.game a,
.game-right a {
    width:100% !important;
}
#ie7fix {
     float:right;
     height:153px;
     margin:0 auto 10px;
     padding:0;
    }
#header-logo {
    height:auto;
}
#header-player {
    width:100%;
    max-width: 630px;
}
#header-player-game-buttons {
    max-width:500px;
    width:100%;
}
#game-embed {
    margin:0 auto 16px;
}
@media only screen and (max-width: 979px),
only screen and (max-device-width: 979px) {
    #branding_nav,
    .branding_social {
        display:none;
    }
    #branding_bar {
        padding-left:10px !important;
    }
    #header-logo {
        max-width:300px !important;
        width:100% !important;
        float:none;
        margin:0 auto;
        height:auto;
        padding:0;
    }
    #header-logo img {
        max-width:300px !important;
        width:100% !important;
    }
    #header-text {
        float:none;
        max-width:615px !important;
        width:100% !important;
        height:auto;
        margin:0 auto;
        padding:0 10px 0;
    }
    #header-text img { 
        width:100%;
    }
    #header-characters {
        background:none;
    }
    #header-player {
        height:auto;
    }
    .game-video {
        display:none;
    }
    .game {
        width:100%;
        max-width:449px;
        float:none;
        margin:0 auto 35px;
    }
    .game-right {
        width:100%;
        max-width:449px;
        float:none;
        margin:0 auto 35px;
    }
    .game a,
    .game-right a {
        width:100%;
    }

}
@media only screen and (max-width: 639px),
only screen and (max-device-width: 639px) {
    .title {
        height:32px;
    }
    #ie7fix {
        width:100%;
        display:block;
        float:none;
        text-align:center;
    }
    #gotta p {
        font-size:16px;
        line-height:1.3;
        margin:0 0 16px;
    }

}
@media only screen and (max-width: 375px),
only screen and (max-device-width: 375px) {
    .title {
        height:26px;
    }
}

/* responsive swf */

.video-container { 
    position: relative;
    margin: 0px;
    border:none;
    z-index: 2;
    margin-bottom:1rem;
}
.video-fullwidth { 
    padding-top: 30px; 
    padding-bottom: 78.25%; 
    height: 0; 
    overflow: hidden;
    border:none;
} 
.video-fullwidth iframe, 
.video-fullwidth canvas,
.video-fullwidth object, 
.video-fullwidth embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    border:none;
}