body {
    font-family: Arial, sans-serif;
}
button {
    background-color: #5b5575;
    border: none;
    color: #FFF;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
}
button:hover,
button:active {
    color: #443f57;
}
button:active {
    font-size: 11px;
}
.label {
    color: #0D2A4D;
    position: absolute;
    margin-left: 10px;
    top: 35px;
}
body {
    margin: 0px;
}
#container {
    position: absolute;
    display: block;
    width: 600px;
    height: 600px;
}
#ad {
    position: absolute;
    display: block;
    left: 0px;
    border: #5b5575 1px solid;
    overflow: hidden;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#ad.collapsed {
    width: 298px;
    /*2px smaller to account for border*/
    
    height: 598px;
    /*2px smaller to account for border*/
}
#ad.expanded {
    width: 598px;
    /*2px smaller to account for border*/
    
    height: 598px;
    /*2px smaller to account for border*/
}
#banner {
    position: absolute;
    display: block;
    width: 298px;
    height: 598px;
    right: 0px;
    background-color: #FFF;
    overflow: hidden;
}
#panel {
    position: absolute;
    width: 598px;
    height: 598px;
    background-color: #FFF;
    background-repeat: no-repeat;
    overflow: hidden;
}
.expanded #banner {
    display: none;
}
.collapsed #panel {
    display: none;
}
.collapsed .buttons {
    bottom: 30px;
    left: 10px;
}

#blueberries{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:407px;
    background-image: url(../images/image1.jpg);
    background-repeat:no-repeat;
}

#muffins{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:407px;
    background-image: url(../images/image2.jpg);
    background-repeat:no-repeat;
}

#endFrame{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:600px;
    background-color:#fff;
}
#text{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    opacity:0;
    width:300px;
    height:600px;
    background-image: url(../images/text.png);
    background-repeat:no-repeat;
}

#logo{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:600px;
    background-image: url(../images/logo.png);
    background-repeat:no-repeat;  
}
#ctaOff{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:600px;
    display:block;
    background-image: url(../images/ctaOff.png);
    background-repeat:no-repeat;  
}
#ctaOver{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:300px;
    height:600px;
    display:none;
    background-image: url(../images/ctaOver.png);
    background-repeat:no-repeat;  
}
#expandBtn {
	position: absolute;
	width: 117px;
	height: 28px;
	top: 552px;
	left: 31px;
	cursor: pointer;
	z-index: 400;
	background-color: rgba(0,0,0,0);
}

#expBorder{
    position: absolute;
	width: 600px;
	height: 600px;
	top: 0px;
	left:0px;
    background-image:url(../images/expBorder.png);
    z-index:200;
}
#expLogo{
	position: absolute;
	width: 600px;
	height: 600px;
	top: 0px;
	left:0px;
    background-image:url(../images/expLogo.png);
}

#pie{
    height:353px;
    width:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:block;
    background-image: url(../images/pie.jpg);
    background-repeat:no-repeat;
}

#vegetables{
    height:353px;
    width:600px;
    top:0;
    left:0;
    display:none;
    margin:0;
    padding:0;
    background-image: url(../images/veggies.jpg);
    background-repeat:no-repeat;
}

#pasta{
    height:353px;
    width:600px;
    top:0;
    left:0;
    display:none;
    margin:0;
    padding:0;
    background-image: url(../images/pasta.jpg);
    background-repeat:no-repeat;
}

#nav{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    display:block;
    margin:0;
    padding:0;
    background-image:url(../images/navBg.png);
    background-repeat:no-repeat;
}

#range{
    position:absolute;
    width:76px;
    height:20px;
    top:315px;
    left:95px;
    display:block;
    cursor:pointer;
    z-index:400;
    margin:0;
    padding:0;
    background-color:rgba(0,0,0,0);
}

#oven{
    position:absolute;
    width:99px;
    height:20px;
    top:315px;
    left:250px;
    display:block;
    cursor:pointer;
    z-index:400;
    margin:0;
    padding:0;
    background-color:rgba(0,0,0,0);
}

#cooktop{
    position:absolute;
    width:99px;
    height:20px;
    top:315px;
    left:410px;
    display:block;
    cursor:pointer;
    z-index:400;
    margin:0;
    padding:0;
    background-color:rgba(0,0,0,0);
}


#rangeOn{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:block;
    background-image:url(../images/rangeOn.png);
}

#rangeOff {
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:none;
    background-image:url(../images/rangeOff.png);
}


#ovenOn{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:none;
    background-image:url(../images/ovenOn.png)
}

#ovenOff{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background-image:url(../images/ovenOff.png)
}

#cooktopOn{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:none;
    background-image:url(../images/cooktopOn.png)
}

#cooktopOff{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background-image:url(../images/cooktopOff.png)
}
#descRange{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    display:block;
    margin:0;
    padding:0;
    background-image:url(../images/descRange.png);
    background-repeat:no-repeat;
}

#descOven{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:none;
    background-image:url(../images/descOven.png);
    background-repeat:no-repeat;
}

#descCooktop{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:none;
    background-image:url(../images/descCook.png);
    background-repeat:no-repeat;
}


#close{
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:0;
    margin:0;
    padding:0;
    display:block;
    background-image:url(../images/close.png);
    background-repeat: no-repeat;
}
#closeBtn{
	position:absolute;
	width:20px;
	height:20px;
	top:6px;
	right:6px;
	cursor: pointer;
	background-color:transparent;
    border:none;
	z-index:600;
}

#close_btn_dc:hover{
	opacity:0.8;
}

#expCtaOff{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:600px;
    height:600px;
    display:block;
    background-image: url(../images/expCtaOff.png);
    background-repeat:no-repeat;  
}
#expCtaOver{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:600px;
    height:600px;
    display:none;
    background-image: url(../images/expCtaOver.png);
    background-repeat:no-repeat;  
}

#expCtaBtn{
    position:absolute;
    width:195px;
    height:40px;
    left:203px;
    top:553px;
    margin:0;
    padding:0;
    cursor: pointer;
	z-index: 400;
	background-color: rgba(0,0,0,0);
}