@charset "utf-8";
/* CSS Document */
/* 2013 Ragnarok2 Registration CSS */

@import url('common.css');									/* reset CSS */
@import url('lightbox.css');									/* common light box */

HTML { background:#FFF }

BODY { margin: 0; padding: 0; }

#WrapCont { width: 100%; min-width:1200px; height: 1100px; margin: 0; padding: 0; position: absolute; background: url(../images/bg.jpg) 50% 0 no-repeat; }
#Wrap { width: 100%; height: 100%; margin: 0 auto; padding: 0; position: relative; overflow: hidden; }
#Wrap_result { position:relative; margin:0 auto; width:988px; height:auto; overflow:hidden; }

#port { margin: 0; overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 1; float: left }


#Check_existuser { width: 1000px; height: 44px; position: absolute; z-index: 3; top: 0; left: 20%; float:left; }
#Check_existuser .text { width:427px; height:44px; margin:0 23px 0 0; text-align: center; font-size: 14px; font-style: italic; color: #CCC; line-height: 44px; background: url(../images/bg_notice.png) 50% 0 no-repeat; text-shadow: #000 0px 1px 0px; float:right; }
#Check_existuser .text A { color: #FFF; font-weight: bold; }
#Cont_register { width: 1300px; height: 1100px; position: absolute; z-index: 2; top: 50px; left: 20%; float: left; }

.cont_blank { width:640px; height:760px; margin:0; padding:0; float:left;}

.contentWrap_1 { width: 460px; height: 1000px; margin: 0 0 0 530px; float: left; }
.contentWrap_2 { width: 600px; height: 1000px; margin: 0 0 0 10px; float: left; }
.contentCont_1 { width: 600px; height: 477px; margin: 20px 0 0 0px; background: url(../images/bg_video.png) 50% 0 no-repeat; float: left; }
.contentCont_2 { width: 600px; height: 430px; margin: 145px 0 0 0px; background: url(../images/bg_screenshots.png) 50% 0 no-repeat; float: left; }
.contentCont_3 { width: 460px; height: 247px; margin: 0px; background: url(../images/bg_etc.png) 50% 0 no-repeat; float: left; }
.youtube { width: 542px; height: 342px; margin: 80px 0 0 29px; float: left; }
.screenshots  { margin: 40px 0 0 10px; float: left; }
.social { width: 438px; height: 49px; margin: 8px 0 0 11px; background: url(../images/social.png) 50% 0 no-repeat; float: left; }

.icon_fb { width: 60px; height: 60px; margin: 15px 0 0 130px;  float: left; }
.icon_tw { width: 60px; height: 60px; margin: 15px 0 0 10px;  float: left; }
.icon_in { width: 60px; height: 60px; margin: 15px 0 0 10px;  float: left; }

.btn_event { width: 200px; height: 50px; margin: 25px 0 0 25px; display:block; border:0; float: left; cursor: pointer; }	
.btn_event:hover { background:url(../images/btn_event.png) 0 0 no-repeat }

.btn_forum { width: 200px; height: 50px; margin: 25px 0 0 10px; display:block; border:0; float: left; cursor: pointer; }	
.btn_forum:hover { background:url(../images/btn_forum.png) 0 0 no-repeat }


/* Tab ///	WarpPortal	l Facebook	///	*/
#Cont_register DIV.logoCont { width: 359px; height: 165px; margin: 0 0 0 25px; float: left; }
#Cont_register DIV.summaryCont {width: 100%; height: 103px; background: url(../images/main_title.png) 50% 0 no-repeat; float: left; }
#Cont_register DIV.contentCont { width: 460px; height: 515px; margin: 0px; background: url(../images/bg_registField.png) 50% 0 no-repeat; float: left; }
#Cont_register DIV.contentCont1 { width: 460px; height: 515px; margin: 150px 0 0 100px; background: url(../images/bg_registField.png) 50% 0 no-repeat; float: left; }
.menu { width: 438px !important; height: 48px; margin: 0 auto; list-style: none !important; }
.menu ul { float: left; }
.menu .cont_btn { display: block; list-style: none; float: left; text-align: center; line-height: 50px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; font-weight: bold; }
.menu A { color: #ffee32; /*text-shadow: #333 0px -1px 0px*/ font-weight:bold; }
.menu .btn_wp { width: 219px; height: 48px; margin: 0; padding: 0;  background: url(../images/tab_wp.png) 50% 100% no-repeat; }
.menu .btn_wp:hover { color: #fff; text-decoration: none; background: url(../images/tab_wp.png) 50% 50% no-repeat }
.menu .active .btn_wp { color: #36C; background: url(../images/tab_wp.png) 50% 0 no-repeat }
.menu .btn_fb { width: 219px; height: 48px; margin: 0; padding: 0;  background: url(../images/tab_fb.png) 50% 100% no-repeat; }
.menu .btn_fb:hover { color: #36C; text-decoration: none; background: url(../images/tab_fb.png) 50% 50% no-repeat }
.menu .active .btn_fb { color: #36C; background: url(../images/tab_fb.png) 50% 0 no-repeat; }

/* Input area	*/
.cont_notice { width: 364px; height: auto; margin:24px 0 0 45px; z-index: 10; text-align: center; font-size: 14px; float: left; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff; }

.cont_input { width: 364px; height: auto; z-index: 10; margin:24px 0 0 45px; float: left; }				
.cont_input .cont_item { width: 364px; height: 30px; margin: 0 0 8px 0; position: relative; float: left;  }
.cont_input .wrap_input { width: 362px; height: 30px; position: relative; z-index: 12000; float: left; border: 2px solid #ffba25; -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius:4px; background: #ffee32; }
.cont_input .wrap_drop { width: 364px; height: 30px; position: relative; float: left; }						
.cont_input .wrap_text { width: 364px; height: auto; margin: 0; padding: 0; position: relative; font-size: 12px; float: left; min-height: 30px; color:#fff }
.cont_input .wrap_text1 { width: 364px; height: auto; margin: 0; padding: 0; position: relative; font-size: 12px; float: left; min-height: 20px; color:#fff }
.checkBox { margin: 0 5px 0 0; }
.cont_input LABEL { position:absolute; z-index:12001; top:6px; left:10px; color:#000; font-size:13px; font-weight:bold }			
.cont_input .textfield { display:block; overflow:visible; position:absolute; top:0; left:0; z-index:12002; width:335px; height:100%; padding:0 0 0 9px; line-height:30px; border:0; color:#3d3222; font-size:13px; font-weight:bold }
.cont_input .textfield:focus { background-color:#fff }
.cont_input .dropdown { width:100px; height:30px; padding:3px 4px 4px 9px; margin:0 10px 0 0; border: 2px solid #ffba25; -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius:4px; background: #ffee32; color:#000; line-height:28px; font-size:13px; font-weight:bold }
.cont_input .dropdown:focus { background:#ffee32 }
.cont_input .btn_signup { width: 380px; height: 74px; margin: 0 20px 0 -10px; display:block; border:0; background:url(../images/btn_register.png) 0 100% no-repeat; float: left; cursor: pointer; }	
.cont_input .btn_signup:hover { background:url(../images/btn_register.png) 0 0 no-repeat }
.cont_input .check_available { display:none; position:absolute; z-index:9; top:0; right:-16px; float:left; width:13px; height:32px; margin:0 0 0 5px }
.cont_input .ico_available { background:url(../images/ico_check_available.png) 0 50% no-repeat }
.cont_input .ico_notavailable { background:url(../images/ico_check_available.png) 100% 50% no-repeat }
.cont_input .cont_msg { display:none; position:absolute; right:-255px; width:225px; height:auto; min-height:27px; padding:0 0 3px 0; background-color:#567692; box-shadow:2px 2px 5px #000; font-size:11px; }	
.cont_input .arrow_msg { position:absolute; left:-6px; width:7px; height:30px; background:url(../images/arrow_msg_box.png) 0 50% no-repeat }
.cont_input .box_top { bottom:0 }
.cont_input .box_center { top:0; min-height:26px !important; padding:4px 0 0 0 !important }
.cont_input .box_bottom { top:0 }
.cont_input .wrap_msg { display:none; position:relative; float:left; width:216px; height:auto; margin:1px 0 1px 6px }
.cont_input .header_msg { float:left; width:208px; height:auto; margin:3px 0 2px 7px; color:#CCC }
.cont_input .check_stat { float:left; width:12px; height:19px }	
.cont_input .ico_ok { background:url(../images/ico_check_stat.png) 0 50% no-repeat }
.cont_input .ico_error { background:url(../images/ico_check_stat.png) 50% 50% no-repeat }
.cont_input .ico_link { background:url(../images/ico_check_stat.png) 100% 50% no-repeat }
.cont_input .text_msg { float:left; display:block; width:200px; height:auto; margin:3px 0 0 3px; line-height:14px }
.cont_input .cont_fb { float:left; margin:11px 0 0 0; padding:0 0 25px 0; text-align:center; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; color:#fff; }
.cont_input .text_header { margin:0 0 10px 0; display:block; color:#ffba25; font-size:40px; font-weight:bold }	
.cont_input .btn_connectfb { width:296px; height:62px; margin:10px 0 0 34px; border:0; display:block; background:url(../images/btn_register_fb.png) 0 100% no-repeat; cursor: pointer; float:left; }	
.cont_input .btn_connectfb:hover { background:url(../images/btn_register_fb.png) 0 0 no-repeat }	



.cont_fb_header { width: 100%; height: 100%; margin:5px 0 0 0; text-align:center; display: block; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #ffee32; font-size: 28px; font-weight: bold; line-height: 52px; }
.cont_input_fb { width: 364px; height: auto; z-index: 10; margin:24px 0 0 45px; float: left; color:#fff; }
.cont_input_fb .cont_item { width: 364px; height: 30px; margin: 0 0 8px 0; position: relative; float: left; }
.cont_input_fb .wrap_input { width: 362px; height: 30px; position: relative; z-index: 12000; float: left; border: 2px solid #ffba25; -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius:4px; background: #ffee32; }
.cont_input_fb .wrap_drop { width: 344px; height: 30px; position: relative; float: left; }
.cont_input_fb .wrap_text { width: 364px; height: auto; margin: 0; padding: 0; position: relative; font-size: 12px; float: left; min-height: 30px  }
.cont_input_fb LABEL { position:absolute; z-index:12001; top:6px; left:10px; color:#000; font-size:13px; font-weight:bold }
.cont_input_fb .textfield { display:block; overflow:visible; position:absolute; top:0; left:0; z-index:12002; width:335px; height:100%; padding:0 0 0 9px; line-height:30px; border:0; color:#3d3222; font-size:13px; font-weight:bold }
.cont_input_fb .textfield:focus { background-color:#fff }
.cont_input_fb .dropdown { width:100px; height:30px; padding:3px 4px 4px 9px; margin:0 10px 0 0; border: 2px solid #ffba25; -webkit-border-radius:4px; -moz-border-radius: 4px; border-radius:4px; background: #ffee32; color:#fff; line-height:28px; font-size:13px; font-weight:bold }
.cont_input_fb .dropdown:focus { background:#ffee32 }
.cont_input_fb .btn_signup { width: 380px; height: 74px; margin: 0px 20px 0 -10px; display:block; border:0; background:url(../images/btn_register.png) 0 100% no-repeat; float: left; cursor: pointer; }
.cont_input_fb .btn_signup:hover { background:url(../images/btn_register.png) 0 0 no-repeat }
.cont_input_fb .check_available { display:none; position:absolute; z-index:9; top:0; right:-16px; float:left; width:13px; height:32px; margin:0 0 0 5px }
.cont_input_fb .ico_available { background:url(../images/ico_check_available.png) 0 50% no-repeat }
.cont_input_fb .ico_notavailable { background:url(../images/ico_check_available.png) 100% 50% no-repeat }
.cont_input_fb .cont_msg { display:none; position:absolute; right:-255px; width:225px; height:auto; min-height:27px; padding:0 0 3px 0; background-color:#567692; box-shadow:2px 2px 5px #000; font-size:11px; }
.cont_input_fb .arrow_msg { position:absolute; left:-6px; width:7px; height:30px; background:url(../images/arrow_msg_box.png) 0 50% no-repeat }
.cont_input_fb .box_top { bottom:0 }
.cont_input_fb .box_center { top:0; min-height:26px !important; padding:4px 0 0 0 !important }
.cont_input_fb .box_bottom { top:0 }
.cont_input_fb .wrap_msg { display:none; position:relative; float:left; width:216px; height:auto; margin:1px 0 1px 6px }
.cont_input_fb .header_msg { float:left; width:208px; height:auto; margin:3px 0 2px 7px; color:#CCC }
.cont_input_fb .check_stat { float:left; width:12px; height:19px }
.cont_input_fb .ico_ok { background:url(../images/ico_check_stat.png) 0 50% no-repeat }
.cont_input_fb .ico_error { background:url(../images/ico_check_stat.png) 50% 50% no-repeat }
.cont_input_fb .ico_link { background:url(../images/ico_check_stat.png) 100% 50% no-repeat }
.cont_input_fb .text_msg { float:left; display:block; width:200px; height:auto; margin:3px 0 0 3px; line-height:14px }
.cont_input_fb .cont_fb { float:left; margin:11px 0 0 0; padding:0 0 25px 0; text-align:center; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 14px; }
.cont_input_fb .text_header { margin:0 0 10px 0; display:block; color:#a5632d; font-size:30px; font-weight:bold }
.cont_input_fb .btn_connectfb { display:block; float:left; width:288px; height:58px; margin:10px 0 0 29px; border:0; background:url(../images/btn_connect_fb.png) 0 100% no-repeat }
.cont_input_fb .btn_connectfb:hover { background:url(../images/btn_register_fb.png) 0 0 no-repeat }
.terms A { color:#C60 !important }


/* Result */
.bg_result { background:#0f0a08 url(../images/bg_result.jpg) 50% 0 no-repeat }
#Cont_result { position:relative; width:825px; height:650px; margin:0 auto; top:200px; text-align:center; }
#Cont_result .main_copy { float:left; width:100%; height:30px; margin:100px 0 20px 0; font-size:30px; font-weight:bold; color:#f5ce32; }
#Cont_result .cont_download { float:left; width:100%; height:138px }
#Cont_result .text_download { float:left; width:100%; height:20px; font-size:14px; font-weight:bold }
#Cont_result .btn_download { float:left; width:328px; height:58px; margin:26px 0 0 248px; border:0; background:url(../images/btn_download.png) 0 100% no-repeat }
#Cont_result .btn_download:hover { background:url(../images/btn_download.png) 0 0 no-repeat }
#Cont_result .btn_gamedownload { float:left; width:380px; height:74px; margin:10px 0 0 220px; background:url(../images/btn_gamedownload.png) 0 100% no-repeat; }
#Cont_result .btn_gamedownload A { width:380px; height:74px; display:block; }
#Cont_result .text_support { float:left; width:100%; height:auto; margin:21px 0 0 0; font-size:14px color:#FFF; }
#Cont_result .cont_created { float:left; width:450px; height:210px; margin:17px 0 0 318px; font-size:13px; font-weight:bold; text-align:left; list-style:none }
#Cont_result .cont_section { float:left; width:100%; height:50px; margin:0 0 20px; }	/**********************/
#Cont_result .text_section { float:left; width:100%; height:20px; color:#FFF; }
#Cont_result .text_result { float:left; width:100%; height:auto; font-size:20px; color:#ecc632; }
#Cont_result .text_result_small { float:left; width:100%; height:auto; font-size:20px; color:#ecc632; }
#Cont_result .text_note { float:left; width:100%; height:20px; margin:40px 0 0; color:#FFF; }

#Cont_footer { position:relative; width:100%; height:60px; color:#fff; text-align:center; line-height:170% }
#Cont_footer A { text-decoration:none }
#Cont_footer_result {position:relative; width:825px; height:60px; margin:0 auto; margin-top:240px; color:#fff; text-align:center; clear:both; }
#Cont_footer_result A { text-decoration:none }

#Cont_Thumbnail { width: 1000px; height: 170px; position: absolute; left:20%; z-index: 2; top: 770px; }
#Cont_Thumbnail .thumbCont { width:1000px; height:170px; float:left; }

#Cont_Thumbnail .thumbCont .thumb_01 { width:227px; height:179px; margin-right:2%; padding:0; background:url(../images/mv_01.png) 0 0 no-repeat; float:left; }
#Cont_Thumbnail .thumbCont .thumb_01 A { width:227px; height:179px; display:block; cursor:pointer; }
#Cont_Thumbnail .thumbCont .thumb_01 A:hover { background:url(../images/mv_01_hover.png) 50% 22% no-repeat; }

#Cont_Thumbnail .thumbCont .thumb_02 { width:227px; height:179px; margin-right:2%; padding:0; background:url(../images/mv_02.png) 0 0 no-repeat; float:left; }
#Cont_Thumbnail .thumbCont .thumb_02 A { width:227px; height:179px; display:block; cursor:pointer; }
#Cont_Thumbnail .thumbCont .thumb_02 A:hover { background:url(../images/icon_play.png) 50% 30% no-repeat; }

#Cont_Thumbnail .thumbCont .thumb_03 { width:227px; height:179px; margin-right:2%; padding:0; background:url(../images/mv_03.png) 0 0 no-repeat; float:left; }
#Cont_Thumbnail .thumbCont .thumb_03 A { width:227px; height:179px; display:block; cursor:pointer; }
#Cont_Thumbnail .thumbCont .thumb_03 A:hover { background:url(../images/icon_play.png) 50% 30% no-repeat; }

#Cont_Thumbnail .thumbCont .thumb_04 { width:227px; height:179px; margin-right:2%; padding:0; background:url(../images/mv_04.png) 0 0 no-repeat; float:left; }
#Cont_Thumbnail .thumbCont .thumb_04 A { width:227px; height:179px; display:block; cursor:pointer; }
#Cont_Thumbnail .thumbCont .thumb_04 A:hover { background:url(../images/icon_play.png) 50% 30% no-repeat; }


/* Paralloax */
.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

/* Remove annoying border on linked images. */
a img {
    border:none;
}

a:hover,
a:focus {
    text-decoration: underline;
}
a {
    text-decoration: none;
}

ul.horizontal {
    list-style: none;
}
ul.horizontal li {
    float: left;
    padding: 0 0.6em;
    border-right: 1px solid black;
    height: 1.2em;
}
ul.horizontal li.last {
    border-right: none;
}

/* Clearfix
   http://www.positioniseverything.net/easyclearing.html
   with added position relative */
.clear:after    {content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden;}
.clear          {display:block; position: relative;}

/* Pre registration	*/

#Cont_Wrap { width: 100%; min-width:1200px; height: 1100px; margin: 0; padding: 0; position: absolute; background: url(../images/bg_pr.jpg) 50% 0 no-repeat; }
#Wrap_pr { width: 518px; height: 100%; margin: 0 auto; padding: 0; position: relative; overflow: hidden; }
.logo_pr { width: 364px; height: 210px; margin: 50 auto; background: url(../images/bg_logo_pr.png) 50% 0 no-repeat; }

.contentpr { width: 518px; height: 175px; margin: 50 0 0 0px; float: left; }
.id_blur { border:#ffee32 2px solid; font-size:13px; color:ffffff; width: 350px; height: 35px; margin: 40 0 0 83px; line-height:14px; background-color:#ffee32;} 
.id_focus { border:#ffee32 2px solid; background-color:#f9f9f9; color:#9e9e9e; font-size:13px; width: 350px; height: 35px; margin: 40 0 0 83px; line-height:15px; } 

.btn_submit { width: 200px; height: 50px; margin: 7px 0 50 157px; display:block; border:0; background:url(../images/btn_submit.png) 0 100% no-repeat; float: left; cursor: pointer; }	
.btn_submit:hover { background:url(../images/btn_submit.png) 0 0 no-repeat }