@charset "utf-8";
/* CSS Document */
img, div, a { behavior: url(../iepngfix.htc) }
* { margin: 0; padding: 0; }
img { border: 0; }
body { font-size: 12px; font-family: "Arial", Helvetica , sans-serif; font-size: 12px; line-height: normal; }
.brd { border: 1px solid #000; }

#container { width: 1054px; margin: 0 auto; }
#container  .page { width: 1054px; float: left; }

.columnOne { width: 102px; float: left; margin-top: 75px; }
.columnTwo { width: 635px; float: left; }
.colomnThree { width: 17px; float: left; margin-top: 25px; }
.columnFour { width: 300px; float: left; }

.header { width: 100%; float: left; height: 70px; margin-top: 5px; }
.header span { display: block; float: left; width: auto; }
    
.flashContainer { width: 100%; float:left; }

.youngConnected { width: 337px; float: left; margin-top: 14px; }
.youngConnected span.button a {width: 100%; text-align: center; display: block; height: 31px; background: url(../images/watch-the-indents.gif) top no-repeat; }
.youngConnected span.button a:hover {width: 100%; text-align: center; display: block; height: 31px; background: url(../images/watch-the-indents.gif) bottom no-repeat; }
span.title { display: block; }
span.image { display: block; }
 

.bigScreen { width: 282px; float: left; margin: 14px 0 0 14px; }
.bigScreen .image { width: 280px; float: left; position: relative; background: url(../images/lg_optimus_mainImage.jpg) top no-repeat; height: 136px;  }
.bigScreen .image a { display: block; background: url(../images/lg_optimus_cta.jpg) no-repeat; width: 227px; height: 21px; position: absolute; bottom: 5px; left: 7px;  }
/*.bigScreen .image a:hover {  background: url(../images/lg_optimus_cta.jpg) bottom no-repeat; }*/

.arena { width: 282px; float: left; margin: 14px 0 0 0; background: url(../images/lgArena.jpg) no-repeat; height: 76px; position: relative; }
.arena a { display: block; background: url(../images/arenaBtn.gif) top no-repeat; width: 213px; height: 21px; position: absolute; bottom: 7px; left: 8px; }
.arena a:hover {background: url(../images/arenaBtn.gif) bottom no-repeat;}

.secretDrama { width: 300px; margin-top: 25px; float: left; background: url(../images/secret-drama-app.jpg) no-repeat; height: 299px; position: relative; }
.secretDrama .text { width: 276px; float: left; margin: 230px 0 0 12px; display: inline; }
.secretDrama span.more { position: absolute; bottom: 10px; right: 11px; }
.secretDrama span.more a { display: block; background: url(../images/find-it-now.gif) top no-repeat; width: 113px; height: 22px; }
.secretDrama span.more a:hover { background: url(../images/find-it-now.gif) bottom no-repeat; }

.secretDrama span.comingsoon { position: absolute; bottom: 10px; right: 11px; }
.secretDrama span.comingsoon a { display: block; background: url(../images/comingsoon.gif) top no-repeat; width: 113px; height: 22px; }
.secretDrama span.comingsoon a:hover { background: url(../images/comingsoon.gif) bottom no-repeat; }


.appChart { width: 300px; float: left; margin-top: 10px; }
.appChart .tabs { width: 100%; float: left; height: 30px; background: url(../images/tabsLine.gif) repeat-x; }
.appChart .content { width: 100%; float: left; height: 195px; background: #e7e7e7; }

.chart { width: 280px; height: 160px; background: url(../images/base.gif) no-repeat; margin: 10px 0 0 10px; }
.chart ul { margin: 0; padding: 0; }
.chart ul li { width: 280px; float: left; list-style: none; height: 32px;}
.chart ul li span.icon { width: 22px; height: 22px; float: left; display: block; margin: 5px 0 0 10px; }
.chart ul li span.title { width: 168px; height: 22px; float: left; display: block; margin: 8px 0 0 5px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #474747; }
.chart ul li span.title a { color: #474747; text-decoration: none; }
.chart ul li span.title a:hover { text-decoration: underline; }
.chart ul li span.stars { width: 65px; float: left; display: block; margin: 5px 0 0 0; }
.chart ul li.alternate { background: #ebebeb; }

#footer { width: 952px; float: left; margin: 6px 0 0 102px; background: #959595; height: 27px; display: inline; }
#footer ul { margin: 0; padding: 0; }
#footer ul li { float: left; margin-left: 16px; list-style: none;  }

#footer-bottom { width: 952px; float: left; margin: 6px 0 0 102px; height: 27px; display: inline; }
#footer-bottom .shareIcons { float: left; display: inline; }
#footer-bottom .copyright { float: right; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #706f6f;}
#footer-bottom .copyright a { color: #706f6f; }
#footer-bottom .shareIcons ul { margin: 0; padding: 0; }
#footer-bottom .shareIcons ul li { float: left; list-style: none; margin-right: 5px; }

#tab01 { display: block; background: url(../images/tab01.gif) top no-repeat; width: 62px; height: 30px; float: left; margin-left: 10px; cursor: pointer; }
#tab01.selected { background: url(../images/tab01.gif) bottom no-repeat;  }

#tab02 a { display: block; background: url(../images/tab02.gif) top no-repeat; width: 132px; height: 30px; float: left; cursor: pointer; }
#tab02 a.selected { background: url(../images/tab02.gif) bottom no-repeat;  }

.overlay { width: 800px; height: 522px; background: url(../images/overlayBg.png) no-repeat; float: left; display: inline; }
.overlay .main { background: url(../images/charactors.gif) no-repeat; width: 760px; height: 472px; float: left; margin: 30px 0 0 20px; display: inline; }
.overlay .main .text {  width: 600px; height: 100px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; float: left; margin: 378px 0 0 18px; display: inline; }
.overlay .main .text .bottom { width: 100%; float: left; padding-top: 15px; }
.overlay .main .text .bottom span { display: block; float: left; }
.overlay .main .text .bottom span a.installBtn { display: block; width: 192px; background: url(../images/goto-install-page.gif) top no-repeat; height: 21px; margin: 4px 0 0 10px;}
.overlay .main .text .bottom span a:hover.installBtn { background: url(../images/goto-install-page.gif) bottom no-repeat; }