/* Project Name: Verizon SBR Small Biz Town */
a:focus, input[type=button]:focus { outline: 0; }

/* CLEARFIX
------------------------------*/
.clearfix, .row { *zoom: 1; }
.clearfix:before, .clearfix:after, .row:before, .row:after { display: table; line-height: 0; content: ""; }
.clearfix:after, .row:after { clear: both; }


/* FLOATS & ALIGNMENT
------------------------------*/
.flt-left { float: left; }
.flt-right { float: right; }
.flt-none { float: none; }

.aln-left { text-align: left; }
.aln-right { text-align: right; }
.aln-center { text-align: center; }

.badge3 { display: none; }
.validate-answer1 { display: none; }
.validate-other1 { display: none; }
.validate-answer2 { display: none; }
.validate-other2 { display: none; }
.validate-answer3 { display: none; }


/* SMALL BIZ TOWN
------------------------------*/
.instructions { width: 470px; float: left; font-family: Arial, sans-serif; }
#your-points { width: 375px; float: right; }
.points span { display: block; height: 80px; width: 56px; margin-right: 5px; float: left; background: #ffffff url(../images/bg-points-span.jpg) center center no-repeat; text-align: center; line-height: 80px; font-size: 60px; color: #333333; font-weight: 500; } 
.points span.empty { color: #d8d8d8; }
#instructions { padding-bottom: 20px;  }
#instructions h3 { font-size: 24px; font-weight: 500;margin-bottom: 15px; line-height: 30px; }

#music { font-family: Arial, sans-serif; font-size: 12px; }
#music span { cursor: pointer; display: inline-block; }
#music .music-on { color: #24c34d; }
#music .music-off { color: red; }
#music span.active { text-decoration: underline; }

/*Default + hover state, "click to play":*/

 a.sm2_link {}
 a.sm2_link:hover {}

/*Playing + hover state, "click to pause":*/

 a.sm2_playing {}
 a.sm2_playing:hover {}

#background-music { position: absolute; top: -999px; }

#small-biz-town { padding: 20px 0; font-family: "Verizon Apex", Arial, sans-serif; width: 900px; margin: 0 auto; }

#town { width: 900px; height: 875px; position: relative; /*background: url(../images/bg-town.jpg);*/ background: url(../images/animated-town.gif); overflow: hidden; }
#small-biz-town-sign { width: 155px; height: 172px; position: absolute; top: 588px; left: 375px; background: transparent url(../images/bg-small-biz-town-sign.png) top center no-repeat; display: none; z-index: 100 }
#small-biz-town-sign:hover { background-position: bottom center; cursor: pointer; }
#blimp { display: block; width: 256px; height: 140px; background: url(../images/blimp.png) no-repeat center center; position: absolute; top: 20px; right: -396px; z-index: 96; }
#blimp a { display: block; padding: 50px 73px 70px 25px; height: 20px; width: 166px; }

#marquee { color: #c2ab1d; text-transform: uppercase; font-size: 13px; font-weight: 500; overflow: hidden; width: 160px; height: 20px; overflow: hidden; position: relative; }
#marquee span { position: absolute; top: 0; height: 20px; display: block; white-space:pre; right: -130px; text-align:left;}

#welcome { padding: 30px 30px 30px 200px; text-align: center; background: #dfe4e5 url(../images/bg-welcome.gif) 35px bottom no-repeat; border: solid 5px #000000; width: 400px; height: 190px; position: absolute; top: 312px; left: 130px; display: none; z-index: 100; }
#welcome .large { font-weight: bold; }

/*#welcome { padding: 50px 60px 30px 270px; text-align: center;  background: transparent url(../images/bg-holiday-welcome.png) center center no-repeat; width: 356px; height: 210px; position: absolute; top: 312px; left: 107px; display: none; z-index: 100; }
#welcome .eyes { background: #edc9b7 url(../images/bg-holiday-welcome-eyes.gif) center center no-repeat; width: 73px; height: 15px; position: absolute; top: 147px; left: 125px; }*/

#small-biz-town input[type=button] { cursor: pointer; }

#small-biz-town p { font-size: 14px; margin-bottom: 15px; }
#small-biz-town p:last-child { margin-bottom: 0px; }
#small-biz-town p.large { font-size: 24px; margin-bottom: 20px; }
#small-biz-town .medium { font-weight: 500; }
#small-biz-town p a { text-decoration: none }
#small-biz-town p a:hover { text-decoration: none }

#small-biz-town .btn1 { display: inline-block; height: 28px; background: #ed2024 url(../images/bg-btn.png) top center repeat-x; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; padding: 0 40px; color: #ffffff; line-height: 28px; font-size: 13px; border: 0px; vertical-align: middle }

#small-biz-town .btn2 { background-color: #494949; padding: 9px 20px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #ffffff; border: 0px; font-family: "Verizon Apex", Arial, sans-serif; font-size: 16px; cursor: pointer; min-width: 70px; text-align: center; display: inline-block; margin: 0 15px; vertical-align: middle; }

#markers { width: 900px; height: 875px; position: absolute; top: -900px; left: 0px; z-index: 95; }
.marker { width: 27px; height: 36px; position: absolute; cursor: pointer; z-index: 100; }
.marker .marker-icon { width: 27px; height: 36px; background: transparent url(../images/marker.png) center center no-repeat; display: block; }
.new-game .marker-icon { background-image: url(../images/marker-gold.png); } 

.home-marker { /*top: 212px;*/ top: -900px; left: 115px; }
.mall-marker { /*top: 410px;*/ top: -900px; left: 115px; }
.hall-marker { /*top: 190px;*/ top: -900px; right: 203px; }
.store-marker { /*top: 375px;*/ top: -900px; right: 100px; }
.rewards-marker { /*top: 445px;*/ top: -900px; right: 270px; }
.mybusiness-marker { /*top: 300px;*/ top: -900px; left: 275px; }
.theater-marker { /*top: 550px;*/ top: -900px; left: 25px; }

.marker .tooltip { cursor: default; padding-bottom: 20px; background: transparent url(../images/bg-tooltip.png) bottom left no-repeat; position: absolute; bottom: 5px; left: 13px; display: none; }
.marker .tooltip-right { left: auto; right: 13px; background: transparent url(../images/bg-tooltip-right.png) bottom right no-repeat; }
.marker:hover .tooltip {  }

.tooltip-content { padding: 15px; width: 295px; background-color: #ffffff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; min-height: 80px; box-shadow: 3px 0px 4px rgba(0, 0, 0, .15); }
.marker .tooltip-right .tooltip-content { box-shadow: -3px 0px 4px rgba(0, 0, 0, .15); }

.tooltip-content .game-intro { padding-left: 95px; background-position: top left; background-repeat: no-repeat; min-height: 80px; margin-top: 15px; line-height: 17px; }
.tooltip-content .game-intro:first-child { margin-top: 0px; }
#game-intro-go-home { background-image: url(../images/bg-tooltip-home.png); }
#game-intro-lumberjack { background-image: url(../images/bg-tooltip-mybusiness.png); }
#game-intro-word-search { background-image: url(../images/bg-tooltip-wecommerce.png); }
#game-intro-jane-video { background-image: url(../images/bg-tooltip-hall.png); }
#game-intro-memory-game { background-image: url(../images/bg-tooltip-mall.png); }
#game-intro-survey { background-image: url(../images/bg-tooltip-hall.png); }
#game-intro-beat-clock { background-image: url(../images/bg-tooltip-store.png); }
#game-intro-reward-shuffle { background-image: url(../images/bg-tooltip-rewards.png); }
#game-intro-matching-game { background-image: url(../images/bg-tooltip-home.png); }

.game-overlay { background-color: #f43b3b; padding: 20px 50px; position: absolute; width: 480px; left: 160px; top: 120px; color: #ffffff; z-index: 120; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; display: none; box-shadow: 0px 0px 20px rgba(0, 0, 0, .25) }
.game-overlay .close-icon { width: 30px; height: 30px; display: block; position: absolute; top: 10px; right: 10px; background: #f43b3b url(../images/ico-overlay-close.png) top center no-repeat; border: 0px; }
.game-overlay .close-icon:hover { background-position: bottom center; }
.game-overlay h2 { text-align: center; margin-bottom: 20px; font-size: 40px; line-height: 40px; font-weight: bold; }
.game-overlay p { margin-bottom: 10px !important; font-size: 17px; }
.game-overlay .question { margin-bottom: 30px; }
.game-overlay .question:last-child { margin-bottom: 0px; }
.game-overlay .question label { margin-right: 15px; }
.game-overlay .question label input[type=checkbox] { margin-right: 5px; }
.game-overlay textarea { width: 470px; height: 60px; padding: 5px; border: 0px; }
.game-overlay object { display: block; z-index: 999; position: relative; }




/* MEMORY GAME */
#memory { width: 480px; left: 160px; }
#cards { list-style: none; text-align: center; overflow: hidden; margin-bottom: 10px; }
#cards li { display: inline-block; padding: 0 5px 30px 5px; }
#cards li span { display: inline; cursor: pointer; }
#cards li span img.front { display: block; }
#cards li span img.back { display: none; }
#cards li span.flipped img.back, #cards li span.matched img.back { display: block; }
#cards li span.flipped img.front, #cards li span.matched img.front { display: none; }
#memory .memory-continue { display: none; }


/* BEAT THE CLOCK */
#clock { width: 580px; left: 110px; }
#countdown { width: 60px; height: 60px; position: absolute; left: 30px; top: 10px; text-align: center; color: #cccccc; background: transparent url(../images/bg-countdown.png) center center no-repeat; line-height: 60px; font-size: 18px; }
.clock-submit { display: none; }
#clock .question { display: none; }

/* CONFIRMATION OVERLAYS */
.confirmation { width: 550px; left: 125px; }
.confirmation p { text-align: center }


/* LUMBERJACK + REWARD SHUFFLE */
#lumberjack-dialog, #reward-shuffle-dialog { position: absolute; top: 40px; text-align: center; width: 100%; font-size: 18px; color: #333333; z-index: 200; }
#lumberjack-dialog a, #reward-shuffle-dialog a { color: #ff0000; text-decoration: underline; }

#lumberjack, #reward-shuffle { width: 550px; }


/* REWARD SHUFFLE */
#reward-shuffle-game { width: 550px; height: 350px; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius: 8px; position: relative; overflow: hidden; background: #ffffff url(../images/bg-reward-shuffle-game.png) bottom center no-repeat; margin-bottom: 20px; }
.reward-box { width: 95px; height: 120px; position: absolute; bottom: 0; }

.reward-box .reward-box-back { width: 95px; height: 120px; position: absolute; top: 0; left: 0; background: transparent url(../images/bg-box-back.png) center center no-repeat; z-index: 101; }
.reward-box .reward-box-content { width: 70px; height: auto; position: absolute; top: -20px; left: 15px; z-index: 102; }
.reward-box .reward-box-content img { width: 100%; }
.reward-box .reward-box-front { width: 95px; height: 120px; position: absolute; top: 0; left: 0; background: transparent url(../images/bg-box-front.png) center center no-repeat; z-index: 103; }
.reward-box .reward-box-top { width: 121px; height: 125px; position: absolute; top: -120px;/*top:-60px;*/ left: -50px; /*left:-7px;*/ background: transparent url(../images/bg-box-top.png) center center no-repeat; z-index: 104; }

#reward-box-1 { left: 70px; z-index: 110 }
#reward-box-2 { left: 225px; z-index: 111 }
#reward-box-3 { left: 380px; z-index: 112 }

#mc-how-to-play { padding-left: 100px; text-align: left; background: transparent url(../images/bg-mc-how-to-play.png) top left no-repeat; height: 50px; margin-left: 45px; }


/* LUMBERJACK GAME */
#lumberjack-game { width: 550px; height: 500px; background: transparent url(../images/bg-lumberjack-game.png) center center no-repeat; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius: 8px; position: relative; overflow: hidden; margin-bottom: 20px; }
.tree-inst { width: 103px; height: 273px; position: absolute; padding-bottom: 4px; background: transparent url(../images/bg-tree-shadow.png) 40px bottom no-repeat; }
.tree-inst .tree-inst-inner { position:relative; width: 103px; height: 273px; bottom: 0px; left: 0; overflow: hidden; }
.tree-inst .tree { position: absolute; top: 0px; right: 0; width: 84px; height: 273px; background: transparent url(../images/bg-tree.png) top center no-repeat; z-index: 101; }
.tree-inst .jack { width: 65px; position: absolute; bottom: 0px; height: 87px; background: transparent url(../images/bg-jack.png) top center no-repeat; z-index: 102; }
.tree-inst .jack.chopping { background-image: url(../images/bg-jack.gif); }
.tree-inst.dying .jack, .dying .jack.chopping { background: transparent url(../images/bg-jack.png) bottom center no-repeat; }
.tree-inst.dying .tree { background-position: bottom center; }

#clouds { position: absolute; top: 40px; left: 0; width: 1100px; height: 104px; }
#clouds .clouds { position: absolute; top: 0; width: 550px; height: 104px; background: transparent url(../images/bg-clouds.png) top center no-repeat; }
#clouds .clouds-1 { left: 0; }
#clouds .clouds-2 { left: 550px; }

#inst-1 { top: 195px; left: 65px; }
#inst-2 { top: 195px; left: 192px; }
#inst-3 { top: 178px; left: 300px; }
#inst-4 { top: 200px; left: 365px; }

#timer { position: absolute; bottom: 10px; left: 10px; font-size: 24px; font-weight: bold; color: #ffffff; }

#sheep { width: 45px; height: 62px; background: transparent url(../images/bg-sheep.gif) center center no-repeat; position: absolute; bottom: 20px; right: 30px; }


/* MEET JANE VIDEO */
#meet-jane { width: 550px; }
#meet-jane-video { margin-bottom: 10px; display: block; }
#meet-jane-video iframe { display: block; }


/* MATCHING GAME */
#matching-game { width: 550px; }
#matching-game-game { width: 510px; padding: 20px; background-color: #ffffff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin-bottom: 10px; }
#matching-game-game .mg-inner { width: 510px; height: 475px; position: relative; }

.mg-item { width: 85px; height: 145px; position: absolute; display: block; background: #ffffff url(../images/bg-mg-items.jpg) no-repeat; }

.mg-item-top { top: 0px; background-position-x: 0; }
.active-top .mg-item-top:active { background-position-y: -290px; }
.mg-item-bottom { top: 330px; }
.active-bottom .mg-item-bottom:active { background-position-y: -435px; }

.active-top .mg-item-top, .active-bottom .mg-item-bottom { cursor: pointer; }
.active-top .matched, .active-bottom .matched { cursor: default; }

.mg-television { background-position: 0px 0px; left: 0px; }
.mg-hammer { background-position: -85px 0px; left: 85px; }
.mg-lock { background-position: -170px 0px; left: 170px; }
.mg-salt { background-position: -255px 0px; left: 255px; }
.mg-keyboard { background-position: -340px 0px; left: 340px; }
.mg-mustard { background-position: -425px 0px; left: 425px; }
.mg-ketchup { background-position: 0px -145px; left: 0px; }
.mg-pepper { background-position: -85px -145px; left: 85px; }
.mg-remote { background-position: -170px -145px; left: 170px; }
.mg-nail { background-position: -255px -145px; left: 255px; }
.mg-mouse { background-position: -340px -145px; left: 340px; }
.mg-key { background-position: -425px -145px; left: 425px; }

.mg-television.matched, .mg-television.matched:active { background-position: 0px -580px; left: 0px; }
.mg-hammer.matched, .mg-hammer.matched:active { background-position: -85px -580px; left: 85px; }
.mg-lock.matched, .mg-lock.matched:active { background-position: -170px -580px; left: 170px; }
.mg-salt.matched, .mg-salt.matched:active { background-position: -255px -580px; left: 255px; }
.mg-keyboard.matched, .mg-keyboard.matched:active { background-position: -340px -580px; left: 340px; }
.mg-mustard.matched, .mg-mustard.matched:active { background-position: -425px -580px; left: 425px; }
.mg-ketchup.matched, .mg-ketchup.matched:active { background-position: 0px -725px; left: 0px; }
.mg-pepper.matched, .mg-pepper.matched:active { background-position: -85px -725px; left: 85px; }
.mg-remote.matched, .mg-remote.matched:active { background-position: -170px -725px; left: 170px; }
.mg-nail.matched, .mg-nail.matched:active { background-position: -255px -725px; left: 255px; }
.mg-mouse.matched, .mg-mouse.matched:active { background-position: -340px -725px; left: 340px; }
.mg-key.matched, .mg-key.matched:active { background-position: -425px -725px; left: 425px; }



/* WORD SEARCH GAME */
#word-search-game { }
#wordsearch {  margin-bottom: 10px; }
#wordsearch table { width: 440px; margin: 0 auto; }  
#wordsearch table td { padding: 3px; color: #000000; }

/* Style for grid cells */
.rf-tgrid { font-family: Courier, Arial,Helvetica,sans-serif; font-weight: normal; font-size: 20px; padding: 4px; /*border: 1px solid bisque;*/ vertical-align: middle; text-align: center; }

/* Style for the grid */
.rf-tablestyle { padding: 15px; background-color: #ffffff; cursor: pointer; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; }

/* Style for the div containing the grid */
#rf-searchgamecontainer { /*float: left;*/ }

/* Style for the div containing the word list */
#rf-wordcontainer { font-family: "Verizon Apex", Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff;  margin-bottom: 10px; text-align: center; width: 480px; line-height: 16px; }
#rf-wordcontainer span { line-height: 30px; }
#rf-wordcontainer span:before { content: ', '; color: #ffffff !important; }
#rf-wordcontainer span:first-child:before { content: ''; }


/* Style for the words that have been found */
#rf-wordcontainer .rf-foundword { color : #e99797 !important; }
#rf-tablegrid .rf-armed { /*background: lightcyan;*/ }
#rf-tablegrid .rf-highlight { background: red; }
#rf-tablegrid .rf-glowing { background: #cccccc; }
#rf-tablegrid .rf-selected { background: #333333; color: #ffffff; }

.rf-pfalse { color: gray; visibility: hidden; }