/* DEFAULT TOUR STYLING
----------------------------------------------------------------------------- */
body { margin:0; padding:0; background: #FFF url(../images_design/bg.jpg) repeat; }
a { outline:none; }
.clear { clear: both; }
.blue { color: #0e92d6; }
.bluealt { color: #0d7cb5; }
.bluealt2 { color: #03f; }
.black { color: #000; }
.red { color: #ed1c24; }
.white { color: #fff; }
.grey { color: #4c4c4c; }
.titlebar { margin-right: 35px; margin-left: 35px; }
* { padding:0; margin:0; }
img { border:0 }
h5 { font: bold 45px Arial, Helvetica, sans-serif; text-align: center; padding-top: 7px; padding-bottom: 7px; }
h5 a { color: #000; text-decoration: underline; }
#tourwrapper { width:989px; margin-right:auto; margin-left:auto; background: #f1f1f1 url(../images_design/bg_tour.gif) repeat-y; text-align: center; }
#tourwrapper p { font: normal 14px Arial, Helvetica, sans-serif; color: #000; text-align: left; width: 930px; margin-right: auto; margin-left: auto; }


/* MAIN HEADER
----------------------------------------------------------------------------- */
#mainheader { width: 989px; height:444px; display: block; margin-right: auto; margin-left: auto; }
#jonheader { width: 989px; height:358px; display: block; margin-right: auto; margin-left: auto; }


/* NAVIGATION
----------------------------------------------------------------------------- */
#navigation { width: 989px; height: 41px; display: block; overflow: hidden; background: #000; margin-right: auto; margin-left: auto; }
.roll1 { display:block; width:410px; height:41px; background:url(../images_design/n_01.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll1:link, a.roll1:visited, a.roll1:active { background:url(../images_design/n_01.gif) no-repeat; }
a.roll1:hover { background-position:-410px 0; }
.roll2 { display:block; width:82px; height:41px; background:url(../images_design/n_02.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll2:link, a.roll2:visited, a.roll2:active { background:url(../images_design/n_02.gif) no-repeat; }
a.roll2:hover { background-position:-82px 0; }
.roll3 { display:block; width:201px; height:41px; background:url(../images_design/n_03.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll3:link, a.roll3:visited, a.roll3:active { background:url(../images_design/n_03.gif) no-repeat; }
a.roll3:hover { background-position:-201px 0; }
.roll4 { display:block; width:112px; height:41px; background:url(../images_design/n_04.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll4:link, a.roll4:visited, a.roll4:active { background:url(../images_design/n_04.gif) no-repeat; }
a.roll4:hover { background-position:-112px 0; }
.roll5 { display:block; width:184px; height:41px; background:url(../images_design/n_05.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll5:link, a.roll5:visited, a.roll5:active { background:url(../images_design/n_05.gif) no-repeat; }
a.roll5:hover { background-position:-184px 0; }


/* WELCOME
----------------------------------------------------------------------------- */
#welcome { width: 989px; height: 149px; display: block; margin-right: auto; margin-left: auto; background: url(../images_design/welcome.jpg) no-repeat; }
#welcome #txtbox { width: 891px; height: 65px; text-align: center; padding-top: 54px; padding-left: 50px; }
#welcome #txtbox h1 { font: bold 23px Georgia, "Times New Roman", Times, serif; color: #000; text-align: center; margin: 0px; padding: 0px; }
#welcome #txtbox h2 { font: normal 14px Arial, Helvetica, sans-serif; color: #000; text-align: center; margin: 0px; padding: 0px; }


/* EPISODE INTERFACE
----------------------------------------------------------------------------- */
.episodeinterface { width: 971px; height: 957px; position:relative; background: #fff url(../images_design/bg_episode.jpg); margin-right: auto; margin-left: auto; }
.title { width: 927px; margin-right: auto; margin-left: auto; font: bold 18px Arial, Helvetica, sans-serif; color: #4c4c4c; text-align: left; margin-bottom: 5px; padding-top: 40px; }
.thumbcontainer { width: 923px; margin-right: auto; margin-left: auto; }
.thumbcontainer img { border: 1px solid #000; margin-right: 2px; margin-bottom: 2px; } 
.thumbcontainer img.rside { margin-right: 0px; }
.bottom { width: 948px; height: 195px; margin-right: auto; margin-left: auto; }
.bottom .left { width: 429px; height: 195px; float: left; background: url(../images_design/episode_bot_01.jpg) no-repeat; }
.bottom .left h3 { font: bold 18px Arial, Helvetica, sans-serif; color: #4c4c4c; text-align: left; margin: 0px; padding: 15px 0px 0px 20px; }
.bottom .left h3 a { color: #03f; }
.bottom .left .story { height: 90px; width: 370px; margin-top: 10px; margin-left: 25px; overflow: scroll; font: normal 13px Arial, Helvetica, sans-serif; color: #000; text-align: left; }
.bottom .right { width: 519px; height: 195px; float: right; }


/* BONUS AREA
----------------------------------------------------------------------------- */
.bonusinterface { width: 976px; height: 310px; margin-right: auto; margin-left: auto; background: #fff url(../images_design/bg_bonus.jpg) no-repeat; }
.bonusinterface h1 { font: normal 25px Georgia, "Times New Roman", Times, serif; color: #000; text-align: center; margin: 0px; padding: 21px 0px 8px; }
.bonusinterface ul { width: 909px; border: 1px solid #000; text-align: center; font: bold 18px/35px Arial, Helvetica, sans-serif; color: #000; margin-right: auto; margin-left: auto; }
.bonusinterface li { list-style: none; display: inline; border-right: 1px solid #000; padding-right: 12px; padding-left: 12px; }
.bonusinterface li.first { padding-left: 0px; }
.bonusinterface li.last { padding-right: 0px; border-right: 0px; }
.bonusinterface .strip { width: 911px; height: 165px; background: #000 url(../images_design/strip.gif) no-repeat; margin-right: auto; margin-left: auto; }
.bonusinterface .strip img { border-right: 12px solid #000; margin-top: 16px; }
.bonusinterface .strip img.first { margin-left: 0px; }
.bonusinterface .strip img.last { border-right: 0px; }
.bonusinterface h2 { font: bold 21px Arial, Helvetica, sans-serif; color: #000; text-align: center; margin: 0px; padding: 0px; }
.bonusinterface h2 a { color: #000; text-decoration: underline; }
.access { width: 519px; height: 195px; display: block; overflow: hidden; background: #efefef; margin-right: auto; margin-left: auto; }
.roll7 { display:block; width:519px; height:195px; background:url(../images_design/instant.gif) no-repeat; text-indent:-9999px; float: left; }
a.roll7:link, a.roll7:visited, a.roll7:active { background:url(../images_design/instant.gif) no-repeat; }
a.roll7:hover { background-position:-519px 0; }


/* SITE BOTTOM
----------------------------------------------------------------------------- */
#sitebottom { width: 968px; height: 198px; margin-right: auto; margin-left: auto; }


/* FOOTER
----------------------------------------------------------------------------- */
#footer { width: 951px; height: 40px; margin-right: auto; margin-left: auto; background: #f1f1f1; border: 1px solid #ccc; font: normal 13px/40px Arial, Helvetica, sans-serif; text-align: center; }
#footer a { color: #333; text-decoration: none; }
#footer a:hover { color: #000; text-decoration:underline; }


/* JOIN INTERFACE
----------------------------------------------------------------------------- */
#joininterface { width: 927px; margin-right: auto; margin-left: auto; margin-top: 16px; }
#joininterface #leftjoin { width: 350px; float: left; text-align: center; }
#joininterface #leftjoin #txt { width: 320px; margin-right: auto; margin-left: auto; margin-top: 8px; text-align: left; font: normal 15px/18px Arial, Helvetica, sans-serif; color: #000; }
#joininterface #leftjoin ul { list-style: none; }
#joininterface #leftjoin li { font: normal 13px Arial, Helvetica, sans-serif; color: #000; border-bottom: 1px dashed #000; text-align: left; padding-top: 7px; padding-bottom: 7px; }
#joininterface #rightjoin { width: 577px; float: right; text-align: center; font: normal 18px Arial, Helvetica, sans-serif; color: #000; }
.type { width: 577px; font: normal 25px/48px Georgia, "Times New Roman", Times, serif; color: #fff; background: #000; text-align: center; height: 50px; }
a.joinform { font: normal 24px Georgia, "Times New Roman", Times, serif; color: #03f; text-decoration: underline; text-align: center; }
a.joinform:hover { color: #ed1c24; }
.joinformbotrow { font: normal 14px Arial, Helvetica, sans-serif; color: #000; background: #efefef; text-align: center; }
.joinformbotrow2 { font: bold 16px Arial, Helvetica, sans-serif; color: #fff; background: #336600; text-align: center; }
.joinformbotrow3 { font: bold 14px Arial, Helvetica, sans-serif; color: #000; background: #ffc; text-align: center; }
.memtype { font: normal 24px Georgia, "Times New Roman", Times, serif; color: #000; text-align: center; }
a.joinoption { font: bold 14px Arial, Helvetica, sans-serif; color: #0d7cb5;; text-align: center; }
#joinfooter { width: 927px; margin-right: auto; margin-left: auto; margin-top: 16px; font: normal 14px/27px Arial, Helvetica, sans-serif; color: #666666; background: #efefef; text-align: center; padding: 10px; }