.input-block-level { display: block; min-height: 30px; width: 425px; margin: 10px 0; }

.state-error { border-color: rgba(240, 114, 65, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px rgba(240, 114, 65, 0.6); }

#title { margin: 100px auto 0 auto; height: 230px; background-color: #601848; color: #FFF; padding: 15px 0; text-align: center; }

#title h1 { font-size: 5em; margin-bottom: 0; }

#title h3 { color: #FFFFFF; font-size: 2em; margin: 0; }


/*---------------- form  ----------------*/
.max-form { max-width: 1022px; }

/*---------------- controller  ----------------*/

#menu-wapper { height: 100px; padding: 50px 0; width: 100%; margin-top: 80px; text-align: center; }

#menu { list-style-type: none; padding: 0px; margin: 0px; }

#menu li { border: none; display: inline-block; }
#menu li > * { vertical-align: middle; display: inline-block; }
#menu li b { width: 20px; height: 34px; background: url('/Images/v2/register/Step%201/arrow_right.png') center center no-repeat; }
#menu span { margin: 0 20px; background: center center /100% no-repeat; width: 150px; height: 68px; cursor: pointer; }
#menu #template span { background-image: url('../Images/v2/register/Step%201/step0_btn_active.png'); }
#menu #signup span { background-image: url('../Images/v2/register/Step%201/step1_btn_active.png'); }
#menu #appinfo span { background-image: url('../Images/v2/register/Step%201/step2_btn_active.png'); }
#menu #content span { background-image: url('../Images/v2/register/Step%201/appcontent_btn_active.png'); }
#menu #download span { background-image: url('../Images/v2/register/Step%201/step3_btn_active.png'); }

#menu #template span.disable { background-image: url('../Images/v2/register/Step%201/step0_btn_normal.png'); }
#menu #signup span.disable { background-image: url('../Images/v2/register/Step%201/step1_btn_normal.png'); }
#menu #appinfo span.disable { background-image: url('../Images/v2/register/Step%201/step2_btn_normal.png'); }
#menu #content span.disable { background-image: url('../Images/v2/register/Step%201/appcontent_btn_normal.png'); }
#menu #download span.disable { background-image: url('../Images/v2/register/Step%201/step3_btn_normal.png'); }


/*---------------- slider ----------------*/
#slider { height: 600px !important; overflow: hidden; background-color: #f8f8f8; }

#slider .slider-wapper { list-style: none; margin: 0px; width: 11520px; transition: 600ms; -webkit-transition: 600ms; -webkit-transform: translate3d(-9600px, 0, 0); }

#slider .slider-cell-wapper { display: table-cell; width: 1920px; vertical-align: top; }

#slider .slider-cell { display: block; padding-top: 20px; width: 960px; margin: auto; text-align: center; }

/*---------------- popup form ----------------*/
.white-popup-block { }
.white-popup-block header { border-bottom: 1px solid rgb(197,197,197); padding-bottom: 10px; }
.white-popup-block header h2 { font-weight: normal; margin: 0; display: inline-block; }
.white-popup-block header button { background: url("../Images/v2/landingPage/Login/close_btn_normal.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); border: medium none; height: 28px; width: 28px; float: right; }
.white-popup-block header button:hover { background-image: url("..//Images/v2/landingPage/Login/close_btn_mo.png"); }

.white-popup-block footer { border-top: 1px solid rgb(197,197,197); padding-top: 10px; text-align: center; }
/*---------------- User Info ----------------*/
#step1 {  width: 50%;margin: 0 auto; padding-bottom: 5%;}

#step1 tr { height: 1.6em; }

#step1 td:first-of-type { width: auto; text-align: center; }

#step1 tr td:first-child { width: 100px; text-align: right; padding-right: 20px; }

#step1 tr td:last-child { width: 300px; }

#step1 tr td:last-child > input { width: 290px; }

#sign { margin-top: 20px; }


/*---------------- AppInfo ----------------*/
#slideAppInfo { }
/*----- AppInfo left -----*/
#slideAppInfo .slideAppInfo-left { width: 425px; display: inline-block; text-align: left; }

#slideAppInfo .slideAppInfo-left input[type=text], #slideAppInfo .slideAppInfo-left textarea { width: 100%; font: inherit; }

#slideAppInfo .slideAppInfo-left textarea { margin-top: 10px; }

#slideAppInfo h4:first-of-type { margin: 10px 0; }

#slideAppInfo h4:last-of-type { margin: 30px 0 10px 0; }

#slideAppInfo .sliderAppInfo-imgBox { width: 460px; height: 300px; background-color: #000; }

#slideAppInfo-logoList { background: none; list-style-type: none; cursor: pointer; margin: 0; padding: 0; display: inline-block; }

#slideAppInfo-logoList li { margin-right: 10px; display: inline-block; }

#logoList_upload_img { width: 100px; height: 100px; border-radius: 5px 5px 5px 5px; }

#slideAppInfo-logoList .choosedBt { }

#slideAppInfo-logoList .choosed { opacity: 0.7; width: 54px; height: 54px; z-index: 10; margin: 25px 0 0 25px; position: absolute; background-image: url(../Images/start/appInfo/selected_icon.png); }

#slideAppInfo-logoList ul li .browse { background: url(../Images/start/appInfo/upload_icon.png) no-repeat; }


/*----- AppInfo right -----*/
#slideAppInfo .slideAppInfo-right { height: 507.936px; width: 259.967px; float: right; }

#phoneWapper { height: 72%; padding: 22% 11% 29% 11%; width: 76.5189%; background: url(../Images/v2/landingPage/Appinfo/i5s_mockup.png) center center no-repeat; background-size: auto 100%; float: left; border: none !important; }

#phoneWapper .phoneWapper-appBgColor { position: relative; background-color: #d86a48; width: 100%; height: 100%; }

#phoneWapper .phoneWapper-appLogo { margin-top: 100px; width: 150px; }

#phoneWapper > div > p { color: #FFF; font-size: 18px; position: absolute; bottom: 0; width: 100%; text-align: center; }

#slideAppInfo .input-block { display: block; min-height: 30px; width: 350px; margin: 10px 0; }

#slideAppInfo .label-block { display: block; text-align: left; margin-top: 30px; }

#uploader { width: 0px; height: 0px; opacity: 0; z-index: 10; position: absolute; cursor: pointer; }



/* Drop logo ----------- */
body.droppable #logo_3 { border: 5px dashed lightblue; z-index: 9999; width: 93px; height: 93px; }

#logo_3 { size: 104px; height: 104px; }

#dialog-form { text-align: left; }
/* popup ----------- */
.uploaderBox-wapper { text-align: center; }

.uploaderBox { width: 500px; height: 330px; border: 2px dashed #999999; border-radius: 5px; padding: 10px; text-align: center; cursor: pointer; /*background:url(/Images/start/appInfo/Upload%20popout/drag_text.png) no-repeat center;*/ }

.uploaderBox_or { color: #999999; font-weight: bold; font-size: 18px; }

.uploaderBox_selected { background-color: #006; }

.uploaderBox-bt { width: 300px; height: 60px; background-color: #f07241; border: 0px; border-radius: 5px; cursor: pointer; color: #fff; font-size: 24px; margin: 0 10px; background-image: url(/Images/start/appInfo/Upload%20popout/browse_btn_normal.png); }

.uploaderBox-bt:hover { background-image: url(/Images/start/appInfo/Upload%20popout/browse_btn_mo.png); }



#uploaderBox-img { margin-top: 30px; width: 150px; height: 150px; border: 1px dashed #999999; border-radius: 5px; opacity: 0; }
/*---------------- Content ----------------*/
#slideContent { }

#slideContent .slideContent-title { text-align: center; margin-bottom: 30px; }

.slideContent-left { width: 500px; float: left; margin: 20px 50px 0 100px; }

.slideContent-right { height: 508px; width: 260px; float: right; }

.plus { width: 104px; height: 104px; border: 2px dashed #B3B3B3; background: url("../Images/start/appInfo/plus_icon.png") no-repeat center center; }


/*-- sPhone slider --*/

#sPhone { width: 316px; height: 605px; /*background-image: url(../Images/default/slider03_01.png);*/ background-color: rgba(0, 0, 0, 0.075); }

#sPhone-slider { height: 410px !important; width: 233px; /*margin: 93px 0 0 45px;*/ margin-top: 20px; background-color: rgba(240, 114, 65, 0.8); }

.sPhone-slider-wapper { list-style: none; margin: 0px; width: 1631px; /*11520px;*/ transition: 600ms; -webkit-transition: 600ms; -webkit-transform: translate3d(-1165px, 0, 0); }

.sPhone-slider-cell-wapper { display: table-cell; width: 233px; /* 1920px;*/ vertical-align: top; }


/*---------------- slider ----------------*/
.ds_03_Phone { background: url("../Images/v2/landingPage/Appinfo/i5s_mockup.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 516px; width: 252px; box-sizing: border-box; overflow: hidden; padding: 59px 19px 78px; }

#sbPhone_slider { height: 380px !important; background-color: #f8f8f8; width: 214px; }

#sbPhone_slider .sbPhone_slider_wapper { list-style: none; margin: 0px; width: 760px; transition: 600ms; -webkit-transition: 600ms; -webkit-transform: translate3d(-1165px, 0, 0); }

#sbPhone_slider .sbPhone_slider_cell_wapper { display: table-cell; height: 100%; vertical-align: top; }

#sbPhone_slider .sbPhone_slider_cell_wapper img { width: 100%; height: 350px; }

#sortable-nodrag { list-style-type: none; margin: 0 0 0 20px; padding: 0; display: block; }

#sortable-nodrag:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

#sortable-nodrag li { margin: 3px 3px 3px 0; padding: 1px; float: left; text-align: center; cursor: pointer; }

#sortable-nodrag li > span { width: 30px; height: 30px; z-index: 10; margin: 10px 0 0 160px; position: absolute; cursor: pointer; display: block; }

#sortable-nodrag .btRadio { width: 30px; height: 30px; z-index: 10; margin: 10px 0 0 160px; position: absolute; cursor: pointer; }

/*------------- photo -----------------*/
.photo-wapper { box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16); border: 1px solid #ACACAC; display: inline-block; margin: 3px 1px; position: relative; cursor: pointer; width: 200px; height: 200px; float: left; }

.photo-wapper:hover { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border: 1px solid rgba(240, 114, 65, 0.8); }

.photo-wapper-header { width: 190px; padding: 0 5px; position: absolute; z-index: 10; right: 0px; cursor: pointer; opacity: 0.8; background: #000000; text-align: right; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); }

.photo-wapper-header:hover { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #fff; }

.photo-wapper .photoThumbnails { width: 100%; height: 100%; }

.photo-wapper .close { width: 30px; height: 30px; position: absolute; z-index: 10; right: 0px; cursor: pointer; }

.photo-wapper .photo-caption { position: absolute; bottom: 0; opacity: 0.8; color: #cccccc; background: #000000; text-align: center; width: 100%; }

.photo-detail img { width: 100px; height: 100px; margin: auto; display: block; }

/*-- photo management - ablums list page--*/
#albums-list { min-height: 360px; text-align: center; }

/*-- photo management - create albums page--*/

#photo-list { text-align: center; }

.photo-remove { background-image: -moz-linear-gradient(center top, #FAFAFA 0px, #EEEEEE 100%); border: 1px solid #EEEEEE; border-radius: 2px 2px 2px 2px; color: #AAAAAA; display: block; margin-top: 10px; padding: 4px 3px; text-align: center; text-decoration: none; font-size: 0.9em; }

.photo-open { border: 1px solid #EEEEEE; background-color: #000; color: #AAAAAA; display: block; margin-top: 10px; padding: 4px 3px; text-align: center; text-decoration: none; font-size: 0.9em; }
/* rss-form */
#rss-form-list li { margin-bottom: 15px; }

.rss-form-input { width: 300px; }

/* puzzle-form */
#addPuzzle { cursor: pointer; }

#puzzle-form-list { text-align: center; list-style-type: none; background-color: #f8f8f8; padding: 15px 0; }

#puzzle-form-list li { margin: 15px; padding: 0; }

#puzzle-list { min-height: 360px; }

#puzzle-img { width: 104px; height: 104px; cursor: pointer; }

/* video-form */
#video-form { }

#video-form ul { margin: 10px 0; padding: 0; }

#video-form ul li { margin-bottom: 15px; list-style-type: none; }

#video-form ul .disable { opacity: 0.2; }
#video-form ul li:first-of-type { background: url("../Images/start/content/icon/video_icon_gray.png") no-repeat scroll center center rgba(0, 0, 0, 0); border: 1px solid #CCCCCC; border-radius: 4px; display: block; height: 230px; margin-left: 105px; margin-top: 20px; width: 370px; }

#video-form ul li .logo { width: 70px; height: 28px; margin: 0 5px 0 0; padding: 0; vertical-align: middle; }
#video-form ul li .thumbnail { width: 100%; height: 100%; margin: 0; padding: 0; }

#video-form ul li input[type=radio] { margin-right: 5px; vertical-align: middle; }

#video-form ul li input[type=text] { vertical-align: middle; width: 350px; }

#video-form ul li button { border: none; background: url('../Images/start/content/search.png') no-repeat; background-size: 20px 20px; width: 20px; height: 20px; vertical-align: middle; margin-left: 5px; }

#videoM { }

.currentVideo { cursor: pointer; }

#ytbLogo { width: 70px; height: 28px; margin: 0 15px 0 0; padding: 0; vertical-align: middle; }

#ykLogo { width: 70px; height: 28px; margin: 0 15px 0 0; padding: 0; vertical-align: middle; }


.preview-youtube, .preview-youku { cursor: pointer; font-size: 25px; vertical-align: middle; }

.preview-youtube:hover, .preview-youku:hover { color: #000000; }

.video-wapper { border: 2px solid #8399AF; float: left; height: 180px; margin: 0 3px 10px 3px; overflow: hidden; position: relative; width: 250px; cursor: pointer; }

.video-wapper .videoThumbnails { height: 180px; width: 250px; }

.video-wapper .closeMark { width: 100%; height: 30px; position: absolute; z-index: 10; right: 0px; cursor: pointer; opacity: 0.8; background: #000000; text-align: right; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); }

.video-wapper-header { width: 240px; padding: 0 5px; position: absolute; z-index: 10; right: 0px; cursor: pointer; opacity: 0.8; background: #000000; text-align: right; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); }

.video-wapper-header:hover { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #fff; }


.video-title { background: #000000; color: #FFFFFF; opacity: 0.8; position: absolute; bottom: 0; font-size: 0.8em; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); width: 240px; padding: 2px 5px; }

.editVideo-form { background: #000000; color: #FFFFFF; position: absolute; bottom: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); height: 180px; width: 250px; z-index: 20; }

.editVideo-form-header { width: 240px; padding: 0 5px; right: 0px; cursor: pointer; background: #000000; text-align: right; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #000; }

.editVideo-form-header:hover { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #fff; }


.editVideo-Lable { margin: 3px 5px 0 5px; }

.editVideo-input { margin: 3px 5px; width: 218px; }

.editVideo-bt { margin-left: 10px; }



/* photo-form */

#addPhoto { cursor: pointer; }

#photo-form-list { list-style-type: none; background-color: #f8f8f8; padding: 15px 0; }

#photo-form-list li { margin: 15px; padding: 0; }


#photo-img { width: 104px; height: 104px; cursor: pointer; }



.editAlbumForm { background: #000000; color: #FFFFFF; position: absolute; bottom: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); height: 200px; width: 200px; z-index: 20; }

.editAlbumForm-header { width: 190px; padding: 0 5px; right: 0px; cursor: pointer; background: #000000; text-align: right; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #000; }

.editAlbumForm-header:hover { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(240, 114, 65, 0.6); border-bottom: 1px solid #fff; }

.editAlbumForm-input { margin: 3px 5px; width: 168px; }

.editAlbumForm-lable { margin: 5px 5px 0 5px; text-align: left; }

/* shout-form */
#shout-form { }
#shout-form button.gray { padding: 6px 10px; }

/* about-form */

#about-form-list li { margin-bottom: 15px; list-style-type: none; }

#about-form-list li input { width: 300px; }

#about-form-list li span { width: 80px; display: inline-block; text-align: right; padding-right: 20px; }

.about-form-input { width: 300px; }

.profile-wapper { text-align: center; }

#profile-img { margin: 0 auto; cursor: pointer; border-radius: 4px; }

#profile-uploader { width: 0; height: 0; }

.photo-form-input { width: 380px; margin-right: 10px; }

.photo-form-plus { cursor: pointer; opacity: 0.2; }

.photo-form-plus:hover { opacity: 1; }

/*---------------- Preview ----------------*/
#slidePreview { }

#slidePreview-left { float: left; margin: 0px 100px 0 100px; width: 400px; text-align: left; }

#slidePreview-right { float: left; margin-right: 50px; }


.store { margin: 0 5px; }

#p-des { text-align: center; font-style: normal; margin: 10px 0; }

#forAndroid { background: url("../Images/start/preview/android_icon.png") no-repeat; padding: 10px 0 10px 45px; height: 22px; display: block; margin: 0 auto; width: 130px; text-align: left; }

#forIos { background: url("../Images/start/preview/ios_icon.png") no-repeat; padding: 10px 0 10px 45px; height: 22px; display: block; margin: 0 auto; width: 90px; text-align: left; }

.appDes { font-size: 0.8em; display: block; height: 50px; color: #bbbbbb; }

.appClick { font-size: 0.7em; display: block; color: #bbbbbb; height: 20px; }

#p-wapper { text-align: center; }

#code-content { width: 770px; margin: auto; position: relative; }

.code-wapper { border: 1px solid #cccccc; float: left; width: 310px; height: 420px; margin: 15px 10px 20px 10px; padding: 15px 20px; }

.code-wapper img { width: 200px; height: 200px; }

a.cImg { width: 150px; height: 40px; position: relative; background: center 20px no-repeat; border: 2px dashed #7F7F7F; border-radius: 4px; padding-top: 100px; opacity: 0.5; display: inline-block; }

a.cImg:hover { opacity: 1; }

a.cImgC { background-position: center 28px; border: 2px solid; color: #FFFFFF; height: 40px; opacity: 0.8; padding-top: 100px; width: 150px; }

a.cPhoto { background-image: url("../Images/start/content/icon/photo_icon_gray.png"); }

a.cPhotoC { background-image: url('../Images/default/slider03_photo.png'); background-color: #9B59B6; }

a.cSong { background-image: url("../Images/start/content/icon/music_icon_gray.png"); }

a.cSongC { background-image: url('../Images/default/slider03_music.png'); background-color: #3498DB; }

a.cShout { background-image: url("../Images/start/content/icon/shoutbox_icon_gray.png"); }

a.cShoutC { background-image: url('../Images/default/slider03_shoutbox.png'); background-color: #E74C3C; }

a.cVideo { background-image: url("../Images/start/content/icon/video_icon_gray.png"); }

a.cVideoC { background-image: url('../Images/default/slider03_video.png'); background-color: #2ECC71; }

a.cAbout { background-image: url("../Images/start/content/icon/about_icon_gray.png"); }

a.cAboutC { background-image: url('../Images/default/slider03_about.png'); background-color: #F39C12; }

.app-download { padding: 40px 20px; box-sizing: border-box; text-align: center; border: 1px solid #cccccc; width: 310px; margin: 20px auto; }
.app-download > img { width: 150px; height: 150px; margin: 20px 0; }
.app-download .icon { vertical-align: middle; margin-right: 10px; width: 30px; }
.app-download a { font-size: 0.75em; color: #999999; }


/*----------------- footer  -----------------*/
#footer { border-top: 1px solid #D4D4D4; margin: 0px; width: 100%; }
#footer > div { margin: 20px auto; color: #999999; position: relative; height: 20px; }
#footer > div div:first-of-type { position: absolute; left: 0; }
#footer > div div:last-of-type { position: absolute; right: 0; }


.input { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; font-size: 1em; outline: medium none; padding: 10px; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; }
.input:focus { border-color: rgba(240, 114, 65, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 3px rgba(240, 114, 65, 0.6); outline: 0 none; }
.textarea { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; font-size: 1em; padding: 10px; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; }
.textarea:focus { border-color: rgba(240, 114, 65, 0.8); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 3px rgba(240, 114, 65, 0.6); outline: 0 none; }