Tutorials

How to Design Old Yahoo Messenger Login/Register UI Clone in HTML5 CSS3 JavaScript

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sign in to Yahoo!</title>

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type='text/javascript'>
var startTime = new Date().getTime();
var loadTime = null;
</script>

<link rel="stylesheet" type="text/css" href="https://s.yimg.com/lq/i/reg/css/yregbase_sec_ui_1_9.css">
<style type="text/css">
.clear{clear:both}
#yreglg select, #yreglg input, #yreglg p, #yreglgtb td, #yreglgtb th{font-size:93%}
div.yregdsilu h2.yregdnt, div.yregdsilu p.yregsueasy{width:110px}
/*popup template css */#yregtpopup #yregtxt {width:260px;margin:0 0 10px} /* popup template */#yregtpopup #yregwp, #yregtpopup #yregmst{width:525px}
#yregtpopup #yregmst{margin-bottom:5px}
#yregtpopup #yreglg{margin-bottom:0}
#yregtpopup #yregft{padding-top:5px}

#yregtgen #yregtxt h2, #yregtpopup #yregtxt h2, #yregpmtxt h3{font:bold 152%/152% arial;color:#333;margin:0}
#yregtgen #yregtxt p.yregpti, #yregtpopup #yregtxt p.yregpti {color:#666;margin:0 0 2px;font:bold 100%/100% arial}
#yregtgen #yregtxt, #yregtpopup #yregtxt{margin-bottom:20px}
#yregtgen #yregtxt #yreghtxt h3, #yregtpopup #yregtxt #yreghtxt h3{margin:0;font:bold 107%/114% arial;color:#8C57A1}
#yregtgen #yregtxt li h3, #yregtpopup #yregtxt li h3{font:bold 114%/122% arial}
#yregtgen #yregtxt p, #yregtpopup #yregtxt p{margin:0 0 0.8em;line-height:129%}
#yregtgen #yregtxt .yregbpt li, #yregtpopup #yregtxt .yregbpt li{margin:0 0 10px 4px;padding:0 0 10px 22px;background:url(https://s.yimg.com/lq/i/reg/purple_arrow.gif) no-repeat 1px 4px}

#yregtgen.yregab #yregtxt{width:auto;}
#yregtgen.yregab #yreghtxt{margin-right:60px;}
#yregtpopup.yregab #yregtxt{width:180px}
#yregtgen #yregtxt #yreghtxt h2, #yregtpopup #yregtxt #yreghtxt h2{color:#7A067F}
.yregbx{z-index:3;margin-right:0}
.flicker h3 span {color:#ff0084;font-weight:bold}
.flicker h3 a {text-decoration:underline;}

/* persistency message right above "sign in" bottom */.kmsibold {font-weight:bold; font-size: 114%;}
input#persistent {margin-bottom: -0em;}
.subperstxt {line-height:1.75em;}
.subperstxt2 {margin: 0 0 0 2em; display:block;}

.yreglgsb{margin-top:0}

#yregwp #yregct #yreglg .yregbxi #yreglgmd {margin-top:1.75em}
#yregtgen fieldset {margin-bottom:2.5em}
p#sigcopys {text-align: left; font-size: 85%; padding: .4em; margin: .6em .0em 1em 0; border-bottom: 1px dotted #9D9C9D; border-top: 1px dotted #9D9C9D;}
#sigcopys label{display:block; margin:-1.5em 0 0 2em;}


#yregtgen #yregct {margin-right: 0px;}
#yregtgen #yregtxt { margin-left: 5px; margin-right: 255px;}
#inputs p#usernameP{color:#252525;font-weight:bold;font-size:14px;padding-top:0;padding-bottom:18px;}
th#thun, th#thpw {text-align:left;}

#yreglgtb #fun {
  display:none;
  margin-top:-10px;
  padding-bottom:7px;
  width:100%;
}
#fun .b{
  font-weight:bold;
}
#fun .b, #fun .n, #fun a{
  vertical-align:top;
}
#fun #caution {
  height:16px;
  width:16px;
  padding-right:3px;
}

p, form, fieldset, h1, h2, h3, h4, h5, h6{margin:0;padding:0}
fieldset{padding:10px 0}
img, fieldset{border:0}
legend{display:none}
label{font-weight:normal;cursor:pointer;cursor:hand}
a{color:#053799;text-decoration:none}
a:hover{text-decoration:underline}
.yregclb:after{content:".";display:block;font-size:0px;line-height:0;height:0;clear:both;visibility:hidden}
body{text-align:center;color:#333;margin:5px 0 0;padding:0}
#yregwp{text-align:left;margin:0 auto;width:750px}
#yregmst{margin:0 0 10px}
#yreglg{float:right;width:240px;margin:0 0 20px;}
#yregtxt{margin:0 270px 0 20px}
#yregtml #yregtxt{margin:0}
#yregft{text-align:center;font-size:77%;padding:10px 0 0;border-top:1px solid #777}
#yregtml #yregft {border-color:#dbd7db}
.yregbx{border:1px solid #656565;margin:0 0 10px;background-color:#f9f9f9}
#yregtml #yreglg .yregbx {margin-right:10px;}
.yregbxi{margin:11px}
.top .yregbxi{margin-top:20px}
#yreglg h1, #yreglg h2, #yreglg h3{font-size:114%;color:#333}
#yreglg h3{margin:0 0 4px}
#yreglg select, #yreglg input, #yreglg p, #yreglgtb td, #yreglgtb th{font-size:91%}
#yreglg p.yreglgsb input{font-size:107%}
#yreglg .yregnewssl, #yreglg .yreglgmd{font:77%/114% verdana}
#yreglg .yregnewssl{margin:-4px 0 10px}
#yreglg .yregnewssl span {color:#c00}
#yreglgtb, #yreglgtb td, #yreglgtb th, #yreglg .yreglgmd, .yreglgsu, .yreglgsb, .yreglgsut, .yregnewssl{text-align:right}
#yreglgtb {margin:0 0 8px;padding:0;width:215px}
.yreglgsub{margin:15px 0 0 30px}
.yreglgsb{margin:12px 0 0}
.yreglgsut{margin:0 0 3px}
.yreglgsu a, .yreglgsut a{color:#039;font:bold 114%/114% arial;text-decoration:underline}
.yreglgsut a{font-size:122%;}
h2.yregdnt{margin:14px 0 0}
.yregdsilu{border-bottom:1px solid #999;margin:0 0 15px;padding:0 0 8px}
.yregdlisu, .yreglvpnu{border-top:1px solid #999;margin:15px 0 0;padding:14px 0 10px}
#yreglg .second h3{ font:bold 100% Arial;color:#333}
#yreglg .second p{font:76%/144% verdana}
#yregbnr{padding:23px 0 2px}
#yregbnr{border-bottom:18px solid #e1f0fd}
.yregbnrimg{float:left;width:204px}
#yregbnrt{margin:0 0 0 206px; padding:14px 270px 0 20px;background:#9acef7 url(https://s.yimg.com/lq/i/reg/ymbnr_lb_ne.gif) no-repeat top right}
#yregbnrti{height:auto;padding-top:159px;}
#yregbnrtii{margin-top:-159px}
#yregbnrtii p{color:#fff;padding:0 0 5px}
#yregbnrtii a{color:#fff;font-weight:bold}
@media all and (min-width: 0px){html>body #yregbnrti{min-height:1px}} /*Opera 7*/#yregiclst{margin:0 0 10px;padding:0 270px 0 0}
#yregiclst .ic{margin:18px 0 0;padding:0}
#yregiclst h3{font:normal 122%/152% verdana;color:#64236a}
#yregiclst cite{font-style:normal;line-height:129%}
#yregiclst a{color:#3385d6}
#yregintusr{margin:0 0 20px;}
#yregintusr h4{font-size:100%;margin:0 0 4px;color:#333;font-family:arial}
#yregintusr select, #yregintusr input{font-size:92%}
.hiddenlayer{display:none}
.showlayer{display:block}
#hl_banner, #hl_list, #h2_list{position:absolute; width:470px;z-index:1000;background-color:#ccc}
.yreginhdly{position:relative;z-index:1;right:2px;bottom:2px; padding:2px; background-color:#fff;border:1px solid #61a7de;color:#333;font-family:verdana}
.yreginhdly ul{margin:5px 0 1em; padding:0 0 0 30px}
.yreginhdly li{margin:0;font-size:77%; list-style-type:square}
.yreginhdly h4{margin:0 0 10px;padding:4px 10px;background:#61a7de;color:#fff;font:bold 77% verdana;text-transform:uppercase}
#yregtml .yreginhdly p{color:#333;padding:0 9px 1em;font:normal 77%/120% verdana}
#yregtml .yreginhdly p strong{color:#00587A}
#yregtml .close a{color:#fff}
#yregtml #yregbnrtii .yreginhdly p{color:#333}
p.close{margin:5px 0 0;font-size:77%;line-height:100%;position:absolute;top:2px;right:10px}
.yreglegal{font-style:italic}
.yregnlnk{text-decoration:underline;cursor:pointer;cursor:hand}
.knob{position:absolute;top:-6px;_top:-5px;width:13px;height:8px;background:url(https://s.yimg.com/lq/i/reg/ymknb_lb.gif) no-repeat top left}
#hl_banner .knob{left:255px}
#hl_list .knob{left:40px}
#h2_list .knob{left:170px}
.lblue #yregbnrt{background-color:#9acef7;background-image:https://s.yimg.com/lq/i/reg/ymbnr_lb_ne.gif}
.lblue #yregbnr{border-color:#e1f0fd}
.lblue #yregbnrtii p{color:#f5fafe}
.lblue #yregbnrtii a{color:#144f7c}
.lblue .yreginhdly{border-color:#61a7de}
.lblue .yreginhdly h4{background:#61a7de}
.lblue .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_lb.gif)}
#yregtml .lblue .showlayer p strong{color:#61a7de}
.lgreen #yregbnrt{background-color:#9dc338;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_lg_ne.gif)}
.lgreen #yregbnr{border-color:#e1edc3}
.lgreen #yregbnrtii p{color:#f5f9eb}
.lgreen #yregbnrtii a{color:#0f7048}
.lgreen .yreginhdly{border-color:#bbda68}
.lgreen .yreginhdly h4{background:#bbda68}
.lgreen .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_lg.gif)}
#yregtml .lgreen .showlayer p strong{color:#0f7048}
.bluegreen #yregbnrt{background-color:#74b46a;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_bg_ne.gif)}
.bluegreen #yregbnr{border-color:#d5e8d2}
.bluegreen #yregbnrtii p{color:#f1f8f0}
.bluegreen #yregbnrtii a{color:#f9faaf}
.bluegreen .yreginhdly{border-color:#94c78c}
.bluegreen .yreginhdly h4{background:#94c78c}
.bluegreen .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_bg.gif)}
#yregtml .bluegreen .showlayer p strong{color:#0f7048}
.rootbeer #yregbnrt{background-color:#894611;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_rb_ne.gif)}
.rootbeer #yregbnr{border-color:#dbc7b7}
.rootbeer #yregbnrtii p{color:#fff2cb}
.rootbeer #yregbnrtii a{color:#f9faaf}
.rootbeer .yreginhdly{border-color:#b99b83}
.rootbeer .yreginhdly h4{background:#b99b83}
.rootbeer .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_rb.gif)}
#yregtml .rootbeer .showlayer p strong{color:#894611}
.orange #yregbnrt{background-color:#f7582e;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_or_ne.gif)}
.orange #yregbnr{border-color:#fdcdc0}
.orange #yregbnrtii p{color:#feefeb}
.orange #yregbnrtii a{color:#f1e27b}
.orange .yreginhdly{border-color:#ff9678}
.orange .yreginhdly h4{background:#ff9678}
.orange .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_or.gif)}
#yregtml .orange .showlayer p strong{color:#c83b13}
.deepblue #yregbnrt{background-color:#016a99;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_db_ne.gif)}
.deepblue #yregbnr{border-color:#b2d2e0}
.deepblue #yregbnrtii p{color:#e7f1f3}
.deepblue #yregbnrtii a{color:#fdc266}
.deepblue .yreginhdly{border-color:#1c86ae}
.deepblue .yreginhdly h4{background:#1c86ae}
.deepblue .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_db.gif)}
#yregtml .deepblue .showlayer p strong{color:#036999}
.purple #yregbnrt{background-color:#a566ad;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_pr_ne.gif)}
.purple #yregbnr{border-color:#e4d1e6}
.purple #yregbnrtii p{color:#f6f0f7}
.purple #yregbnrtii a{color:#fdc266}
.purple .yreginhdly{border-color:#c799cc}
.purple .yreginhdly h4{background:#c799cc}
.purple .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_pr.gif)}
#yregtml .purple .showlayer p strong{color:#a566ad}
.yellow #yregbnrt{background-color:#ff9700;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_yl_ne.gif)}
.yellow #yregbnr{border-color:#ffe0b2}
.yellow #yregbnrtii p{color:#fff5e6}
.yellow #yregbnrtii a{color:#016a99}
.yellow .yreginhdly{border-color:#efae4d}
.yellow .yreginhdly h4{background:#efae4d}
.yellow .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_yl.gif)}
#yregtml .yellow .showlayer p strong{color:#916714}
.oxblood #yregbnrt{background-color:#900000;background-image:url(https://s.yimg.com/lq/i/reg/ymbnr_ob_ne.gif)}
.oxblood #yregbnr{border-color:#ddb2b2}
.oxblood #yregbnrtii p{color:#f4e6e6}
.oxblood #yregbnrtii a{color:#ff9700}
.oxblood .yreginhdly{border-color:#800000}
.oxblood .yreginhdly h4{background:#800000}
.oxblood .knob{background-image:url(https://s.yimg.com/lq/i/reg/ymknb_ob.gif)}
#yregtml .oxblood .showlayer p strong{color:#900000}
#yregtml .mailplus{padding-right:160px;background:url(https://s.yimg.com/lq/i/us/pim/pr/trap/lo_mailplus_1.gif) no-repeat 360px  50%; height:auto;padding-top:36px}
#yregtml .mailplus div{margin-top:-36px}
#yregtml .spamguard{padding-right:113px;background:url(https://s.yimg.com/lq/i/reg/sp_sguard60_2.gif) no-repeat 407px 50%;height:auto;padding-top:52px}
#yregtml .spamguard div{margin-top:-52px}
#yregtml .addressbook{padding-right:152px;background:url(https://s.yimg.com/lq/i/us/pim/sp/qb_xsmdiagram1.gif) no-repeat 368px 50%;height:auto;padding-top:50px}
#yregtml .addressbook div{margin-top:-50px}
#yregtml .messenger{padding-right:120px;background:url(https://s.yimg.com/lq/i/us/pim/sp/mantle/sp_msgr60_1.gif) no-repeat 400px 50%;height:auto;padding-top:60px}
#yregtml .messenger div{margin-top:-60px}
#yregtml .photos{padding-right:130px;background:url(https://s.yimg.com/lq/i/us/pim/sp/mantle/sp_photos_1.gif) no-repeat 390px 50%;height:auto;padding-top:60px}
#yregtml .photos div{margin-top:-60px}
#yregtml .mobile{padding-right: 113px; background:url(https://s.yimg.com/lq/i/us/pim/sp/mantle/sp_mobile_1.gif) no-repeat 407px 50%;height:auto;padding-top:60px}
#yregtml .mobile div{margin-top:-60px}
#yregtml .antivirus{padding-right:135px;background:url(https://s.yimg.com/lq/i/reg/norton2006.gif) no-repeat 394px 50%; height:auto;padding-top:22px}
#yregtml .antivirus div{margin-top:-22px}
#yregtml .cnet{padding-right:110px;background:url(https://s.yimg.com/lq/i/reg/EC_aug04_39x72.gif) no-repeat 410px 50%;height:auto;padding-top:72px}
#yregtml .cnet div{margin-top:-72px}
#yregtml .pcmag{padding-right:115px;background:url(https://s.yimg.com/lq/i/us/pim/lgn/ymail_ec_logo_1.gif) no-repeat 405px 50%;height:auto;padding-top:94px;}
#yregtml .pcmag div{margin-top:-94px;}
#yregtml #yregiclst .ic{margin-bottom:20px;min-height:1px}

#yregmain {width:218px;margin-right:0;}
.top {position:relative;}
.v5bd{overflow-x:hidden;overflow-y:auto;}
</style>

<link rel="stylesheet" type="text/css" href="https://s.yimg.com/lq/lib/reg/css/container-min-1.css">
        <style type="text/css">
        #captcha, #captcha_c, #captchaDiv {z-index:6;}
        #captcha #captchaV5Header {overflow:hidden;}
        #captchaErr {font-size:11px;color:#E10707;background:url("https://s.yimg.com/lq/i/reg/login/loginsprite_2_18_2010.png") left -199px no-repeat;padding-left:25px;height: 15px;}
        .yui-skin-sam .yui-panel-container.shadow .underlay {position:fixed;}
        #submitC .primaryCta {width: 150px;}
        #submitC #cdiv {width:45%;position:absolute;bottom:13px;right:-35px;}
        html body div#captcha_mask {display:none }
        .yui-skin-sam .yui-panel .bd {padding-top:13px}
        .yui-skin-sam #captcha .hd,.yui-skin-sam #captcha .bd {background:none}
        .yui-skin-sam #captcha .bd{height:320px ;}
        /*.yui-skin-sam #captcha {background-color: #F0F4F8;}*/        .yui-skin-sam #captcha .bd, .yui-skin-sam #captcha .hd {}
         .yui-skin-sam #captcha .hd{border-bottom: 1px solid #D5D5D5;font-size:13px;color:#5B7EA1;}
         #captchaV5{margin-left:72px}
        .yui-skin-sam .yui-panel{border-style:none;}
        /*#captcha_c #captcha {border: 10px solid #8DA6B9;}*/
            /* New css for panel*/
    .yui-skin-sam #captcha {background-color:#777777;border:0px;border-radius:5px;box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.6);color:#3f3f3f;}
    .yui-skin-sam #captcha .hd {border:0px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#777777');
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#777777));
    background: -moz-linear-gradient(top,  #999999,  #777777);
    border-radius:5px;
    overflow:auto;
    padding-top:3px;
    padding-bottom:3px;
    color:#FFFFFF;
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25);
    }
    .yui-skin-sam .container-close {background: url("https://s.yimg.com/lq/i/reg/icn_sprite_close-_6_21_11.gif") no-repeat scroll -2px 0 transparent;right:0px;top:15px;}
    .yui-skin-sam #captcha .bd {border:0px;background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    }

    .lockedPage, .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSHeader .VoiceSMSInstruction, .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSHeader .VoiceSMSPrompt, .aeaEmailVerify, .aeaContent,.pwqaContent {font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#454545;}
    .sec-chal-popup {position:absolute;width:440px;right:10px;margin-top:5px;z-index:9999;}
    .sec-chal-popup p {margin-bottom:5px;}
    .sec-chal-popup .clspopup {background: url("https://s.yimg.com/lq/i/reg/sprite_pg_20100719_ltr.png") no-repeat scroll left -689px transparent; cursor: pointer; display: block; height: 16px; padding: 0; position: absolute; right: 6px; top: 6px; width: 13px;}
    .hide-offscreen {position: absolute;top: -999em}
    .nodisp {display:none;}
    .sec-chal-popup .pointer-up {background-image: url("https://s.yimg.com/lq/i/reg/sprite_pg_slate_20100809_ltr.png");background-position: left -3583px;background-repeat: no-repeat;display: block;height: 8px;position: absolute;top: -6px;width: 10px;}
    #learn_more_content p, #pwqa-popup .sec-chal-content p {font-size:12px;padding-right:8px;}
    .sec-chal-popup .sec-chal-content {background-color:#EFF3F5;border:1px solid #333333;padding:10px;position:relative;}

    .aeaContent .sec-chal-popup #learn_more_content .pointer-up {left: 135px;}
    .pwqaContent .pwqa-question {padding-top:30px;padding-left:0px;}
    .pwqaContent .pwqa-question span {display: block; float: left; padding-right: 10px; text-align: right; width: 175px;}
    .pwqaContent .pwqa-question span .small {font-size:85%;}
    .aeaContent #submitC #cdiv {margin-top:20px;width:50%;}
    .pwqaContent #verifybtn {margin-top:35px;margin-right:20px;margin-left:182px;}
    .aeaEmailVerify #submitC #cdiv {width:50%;*right:-25px;}
    .aeaPhoneVerify #submitC #cdiv .primaryCta, .aeaEmailVerify #submitC #cdiv .primaryCta, .aeaContent #submitC #cdiv .primaryCta, .pwqaContent #submitC #cdiv .primaryCta {width:120px;margin-right:10px;}
    .aeaPhoneVerify #submitC #cdiv .secondaryCta, .aeaEmailVerify #submitC #cdiv .secondaryCta, .aeaContent #submitC #cdiv .secondaryCta, .pwqaContent #submitC #cdiv .secondaryCta {padding-top:5px;}

    .pwqaContent .pwqa-aea-text #receivebtn {margin-left:182px;margin-right:20px;margin-top:20px;}
    .pwqaContent .pwqa-aea-text .center {padding-bottom: 15px; padding-top: 20px;text-align:center;}
    .pwqaContent .pwqa-aea-text .center .lthru {text-decoration: line-through; color:#B1B1B1;}
    .pwqaContent .pwqa-aea-text .center .or {font-weight:bold;font-size:14px;}
    .aeaContent .mobileList {margin-top:30px;}
    .aeaContent .adjust-margin {margin-top:15px;}
    .aeaContent .aeaList {margin-top:20px;margin-bottom:10px;}
    .aeaContent .aeaList, .aeaContent .mobileList {padding-left:60px;}
    .aeaContent .aeaList .be, .aeaContent .mobileList .bm {float:left;}
    .aeaContent ul {margin-top:5px;margin-left:0px;padding-left:70px;}
    .aeaContent ul li{list-style-type:none;padding-bottom:5px}
    .aeaContent ul li input {margin-right:10px;}
    #pwqa-popup {margin-top: 18px;}
    #pwqa-popup #pwqa_popup_content .pointer-up {left: 365px;}
    #pwqa-popup #pwqa_popup_content ul {padding-left:20px;margin-top:0px;margin-left:0px;}
    #pwqa-popup #pwqa_popup_content ul li {padding-bottom:5px;list-style-type:disc;}
    .aeaContent .charges {font-size:85%;}
    .pwqaContent .next-line {display:block;}
    .aeaContent .strong, .pwqaContent .strong, .aeaEmailVerify .strong, .aeaContent ul li .strong{font-weight:bold;}
    .aeaContent .strong a, .pwqaContent .strong a, .aeaEmailVerify .strong a, .aeaContent ul li .strong a{font-weight:normal;}
    .aeaEmailVerify .spacer, .aeaContent .spacer, .aeaContent ul li .strong span{padding:0 5px;}
    .aeaEmailVerify .aeaEnterCode {margin-top:20%;margin-left:60px;}
    .aeaEmailVerify .aeaEnterCode #aeaEmailCode {width:100px;}

    .aeaPhoneVerify #captchaV5 {margin-left:0px;}
    .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSHeader {padding-left:0px;}
    .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSInputBox {padding-top:40px; padding-left:0px;}
    .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSInputBox #captchaV5CodePrompt {float:left;}
    .aeaPhoneVerify .yAbuseVoiceSMSCaptcha .VoiceSMSHelp {float:none; font-size:14px;}
    .aeaPhoneVerify #submitC #cdiv {width:50%;}
    .error2 {background-image:url("https://s.yimg.com/lq/i/reg/login/loginsprite_2_18_2010.png");background-position:left -197px;background-repeat:no-repeat;padding-left:24px;padding-bottom:5px; color:#E10707; font-size:12px; font-weight:bold;padding-top:3px;}
    #lockedErr {margin-top:5px;}
    .lockedContent {padding-top:10px;}

        </style>
        <!--[if lt IE 7]>
        <style type="text/css">
        .yui-skin-sam .yui-panel-container.shadow .underlay {display:none;}
        .yui-skin-sam #captchaDiv .yui-overlay-iframe#captcha_f{width:1000px ;height:1000px ; top:0px ;right:0px ;}
        </style>
        <![endif]-->
        <!--[if lte IE 7]>
        <style type="text/css">
        .aeaContent #submitC #cdiv {width:54%;}
        .aeaPhoneVerify #submitC #cdiv {width:54%;}
        .aeaEmailVerify #submitC #cdiv {width:54%;}
        .yAbuseVoiceSMSCaptcha .VoiceSMSPrompt button {margin-left:5px;}
        .aeaContent .sec-chal-popup #learn_more_content .pointer-up {left: 70px;}
        </style>
        <![endif]-->


<style type="text/css">


.top {position:relative}
#antiphish{position:absolute;right:5px;top:5px;}
#antiphish.dogear{right:0px;top:0px;}
#antiphish a {font-size:92%;}
img.picture {border:2px solid}

</style>



<!--[if gt IE 6]>
<style type="text/css">
.yregclb,.yregbxi,.yregbx {height:1%}
#yreglgtb td{text-align:left}
#yregtxt #banner div{position:static} /* ie z-index context stacking bug work-around */#yregtpopup #yregtxt{float:left;}
#yregct{padding:0 0 30px}
.yregbx{width: 100%}
</style>
<![endif]-->



<style type="text/css">

#yreglgtb, #yreglgtb th {text-align: left; width: 100%;}
#yreglgtb td { width:179px;  text-align: left; padding: 0 0 16px 0}
#yreglgtb td input{ width:179px  }
.dbidTip {padding: 3px 0 0 0;  font-size:85%}
</style>







<style type="text/css">
div.yregdsilu h2.yregdnt, div.yregdsilu p.yregsueasy{width:110px}
/* persistency message right above "sign in" bottom *//* em.nwred a {font-style: normal;font-size: 85%;top:0;position:relative;} */.kmsibold {font-weight:bold; font-size: 114%;}
p#sigcopys {text-align: left; font-size: 85%; padding: .4em; margin: .6em .4em 1em 0; border-bottom: 1px dotted #9D9C9D; border-top: 1px dotted #9D9C9D;}
input#persistent {margin-bottom: -0em;}
.subperstxt {line-height:1.75em;}
.subperstxt2 {margin: 0 0 0 2em; display:block;}
/* #yregft p.yregfb { font-size:120%; padding-bottom: 5px; padding-up: 5px} */</style>
<style type="text/css">


.top {position:relative}
#antiphish{position:absolute;right:5px;top:5px;}
#antiphish.dogear{right:0px;top:0px;}
#antiphish a {font-size:92%;}
img.picture {border:2px solid}

</style>

<!--[if gt IE 6]>
<style type="text/css">
#antiphish.dogear{right:1px;}
</style>
<![endif]-->

<!--[if IE]>
<style type="text/css">
.yregclb{height:1%}
#yregbnrti{height:159px;padding-top:0}
#yregbnrtii{margin-top:0}
.knob{top:-5px}
#yregtml .mailplus{height:60px;padding-top:0}
#yregtml .mailplus div{margin-top:0}
#yregtml .spamguard{height:52px;padding-top:0}
#yregtml .spamguard div{margin-top:0}
#yregtml .addressbook{height:50px;padding-top:0}
#yregtml .addressbook div{margin-top:0}
#yregtml .messenger{height:60px;padding-top:0}
#yregtml .messenger div{margin-top:0}
#yregtml .photos{height:60px;padding-top:0}
#yregtml .photos div{margin-top:0}
#yregtml .mobile{height:60px;padding-top:0}
#yregtml .mobile div{margin-top:0}
#yregtml .antivirus{height:60px;padding-top:0}
#yregtml .antivirus div{margin-top:0}
#yregtml .cnet{height:72px;padding-top:0}
#yregtml .cnet div{margin-top:0}
#yregtml .pcmag{height:94px;padding-top:0}
#yregtml .pcmag div{margin-top:0}

</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.knob{top:-6px}
#antiphish.dogear{top:0;right:0;}
#antiphish{right:5px;}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
.yregclb{height:30em}
#yregtxt {height:1%}
p#sigcopys {margin-right:0.2em}
</style>
<![endif]-->



<style type="text/css">

#yreglgtb, #yreglgtb th {text-align: left; width: 100%;}
#yreglgtb td { width:179px;  text-align: left; padding: 0 0 16px 0}
#yreglgtb td input{ width:179px  }
.dbidTip {padding: 3px 0 0 0;  font-size:85%}
</style>




<style type='text/css'>
html,body{text-align:center;width:100%;}
#adFrame{position:static;visibility:hidden;}
#mainBox{position:relative;top:0;width:100%;height:960px;min-height:680px;margin:0 auto;background-color:transparent;text-align:left;}
#iframeHolder{height:1024px;width:1920px;margin:0 auto 0 -960px;position:absolute;top:50px;left:50%;overflow:visible;}
#loginHolder{height:100%;width:800px;margin:0 auto;position:relative;}
#hdBg{background:transparent url(https://s.yimg.com/lq/lib/uh/15/uh_sprites_1.5-1.0.3.png) repeat-x;height:61px;}
#hdBg #mem_hd{width:800px;margin:0 auto;position:relative;z-index:5;}
#hdBg #mem_hd #ygmaheader .sp{height:40px;padding-bottom:0;}
#hdBg #ygma .bd{background-image:none;width:782px;margin:0 auto;}
#footer{background-color:#FFF;_top:100%;bottom:0px;height:35px;left:0px;width:100%;position:fixed;z-index:3;}
#footer #feedback{font-size:10px;}
#footer #mem_ft{margin-top:0;}
#leftContent{position:absolute;left:0;}
#loginBox{height:600px;width:240px;margin-left:560px;}
#loginBox #yreglg .yregbx{border:3px solid rgba(153,153,153,0.75);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#yregmain{background-position:56px 0px;}
#yreghtxt{margin-top:1em;}

#lisu{margin-left:11px;}
.yregbxi #lisu{margin-left:0;}
#static {width:525px;}

#ylbpix{background:transparent url(https://login.yahoo.com/i/reg/cs.gif) no-repeat}</style>
<!--[if IE 6]>
<style type='text/css'>
  #loginBox {
    float:right;
    margin-left:0;
  }
  #iframeHolder {
    height:1024px;
  }
</style>
<![endif]-->
<!--[if IE]>
<style type='text/css'>
    #loginBox #yreglg .yregbx {
      border:3px solid #999999;
    }
</style>
<![endif]-->




</head>
<body id="mnbd">



<!-- ads: 150002529 INT.OFFSET: 0 -->




  <div id='hdBg'>

<!-- intl = us, spaceid = 150002529 offset = 0 position = HEAD -->
<link type="text/css" rel="stylesheet" href="https://s.yimg.com/lq/lib/uh/15/css/uh_slim_ssl-1.0.7.css"><style type="text/css">#ygma .bd {padding-bottom:10px;}</style><div id="ygma"><div id="ygmaheader"><div class="bd sp"><div id="yahoo" class="ygmaclr"><div id="ygmabot"><a id="ygmalogo" href="https://global.ard.yahoo.com/SIG=15r58u18b/M=650008.13546636.14403860.13057442/D=reglsa/S=150002529:HEAD/Y=YAHOO/EXP=1327163655/L=b02cjGKL8V6wjaPgTxrM3AE.rmHl_E8azOcAA1Sr/B=7J0WD2KImnM-/J=1327156455311110/K=un1xszHzhNHQ4MwuAHLMgg/A=5775037/R=0/SIG=10mgpruen/*http://www.yahoo.com" target="_top"><img id="ygmalogoimg" width="142" height="26" src="https://s.yimg.com/lq/i/brand/purplelogo/uh/us/base.gif" alt="Yahoo!"></a></div><div id="mepanel"><ul id="mepanel-nav"><li class="me1"><a href="https://global.ard.yahoo.com/SIG=15r58u18b/M=650008.13546636.14403860.13057442/D=reglsa/S=150002529:HEAD/Y=YAHOO/EXP=1327163655/L=b02cjGKL8V6wjaPgTxrM3AE.rmHl_E8azOcAA1Sr/B=7J0WD2KImnM-/J=1327156455311110/K=un1xszHzhNHQ4MwuAHLMgg/A=5775037/R=1/SIG=10n95md4p/*https://www.yahoo.com" target="_top">Yahoo!</a></li><li class="me2"><a id="ygmahelp" href="https://global.ard.yahoo.com/SIG=15r58u18b/M=650008.13546636.14403860.13057442/D=reglsa/S=150002529:HEAD/Y=YAHOO/EXP=1327163655/L=b02cjGKL8V6wjaPgTxrM3AE.rmHl_E8azOcAA1Sr/B=7J0WD2KImnM-/J=1327156455311110/K=un1xszHzhNHQ4MwuAHLMgg/A=5775037/R=2/SIG=118aqiaa1/*http://help.yahoo.com/l/us/yahoo/edit/" target="_top">Help</a></li></ul></div></div></div></div></div>
<!--<img src="http://ads.yimg.com/a/i/sh/bl.gif?click=1327156455311110" width=1 height=1 border=0>--><script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['7J0WD2KImnM-']='&U=13g5a7ie8%2fN%3d7J0WD2KImnM-%2fC%3d650008.13546636.14403860.13057442%2fD%3dHEAD%2fB%3d5775037%2fV%3d1';
</script><noscript><img width=1 height=1 alt="" src="https://us.bc.yahoo.com/b?P=b02cjGKL8V6wjaPgTxrM3AE.rmHl_E8azOcAA1Sr&T=18j50hiqd%2fX%3d1327156455%2fE%3d150002529%2fR%3dreglsa%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d373343525%2fH%3dc2VjdXJlPSJ0cnVlIiBzZXJ2ZUlkPSJiMDJjakdLTDhWNndqYVBnVHhyTTNBRS5ybUhsX0U4YXpPY0FBMVNyIiBzaXRlSWQ9IjQ0NTQ1NTEiIHRTdG1wPSIxMzI3MTU2NDU1MjQxNTE4IiA-%2fQ%3d-1%2fS%3d1%2fJ%3d80918B62&U=13g5a7ie8%2fN%3d7J0WD2KImnM-%2fC%3d650008.13546636.14403860.13057442%2fD%3dHEAD%2fB%3d5775037%2fV%3d1"></noscript><!--QYZ ,;;HEAD;150002529;2;-->
  </div>





    <!--[if IE]>
    <div id='iframeHolder'>
<iframe title='Advertising by Yahoo!' id='adFrame' src='https://login.yahoo.net/login_superads/en/superads_iframe_content.html?es=.kkTLMD51u9QXolDaVc-&b=b13d3s17hlj6s%26b%3D3%26s%3Dn8' frameborder='0' scroll='no' height='1200' width='1920' onload='loadTime = new Date().getTime();'></iframe>
    </div>
    <![endif]-->
    <div id='mainBox'>
      <div id='loginHolder'>


        <div id='leftContent'>


          <div id='static'>

              <script type="text/javascript">
                  var av = true;
                  if (av) {
                     document.getElementById("static").style.display = "none";
                  }
              </script>



<style type="text/css">
html{background-color:#fff;}
body,div,p{margin:0;padding:0;}
.lofb_wrap{font:20px arial;color:#000;width:800px;margin:130px auto 0;font-family:Gotham,verdana,sans-serif;line-height:1.5em;}
.lofb{padding-right:280px;margin-left:20px;}
.lofb h2{font-size:3.1em;font-weight:bold;color:#7B0099;margin:10px 0;line-height:1em;}
.lofb h3{margin-left:5px;font-size:1.05em;color:#000;font-weight:bold;margin:10px 5px;}
.lofb p {margin-left:5px;}
</style>
<div class="lofb_wrap">
<div class="lofb">
<h2>Your World.<br>Your Way.</h2>
<h3>Yahoo! makes it easy to enjoy what matters most in your world.</h3>
<p>Best in class Yahoo! Mail, breaking local, national and global news, finance, sports, music, movies and  more. You get more out of the web, you get more out of life.</p>
</div>
</div>


          </div>

        </div>
        <div id='loginBox'>
          <div id='yreglg'>




<div class="top yregbx">
  <div class="yregbxi">


    <div id="ylbpix"></div>




        <div id="yregdsilu">
            <h3>Don't have a Yahoo! ID?</h3>
            <a id="signUpBtn" tabindex="1" class='primaryCta' href='https://edit.yahoo.com/config/eval_register?.intl=us&.lang=en&.pd=_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&new=1&.done=http%3A//my.yahoo.com&.src=&.v=0&.u=atdpjqh7hlj77&partner=&.partner=&pkg=&stepid=&.p=&promo=&.last='>
            Create New Account
            </a>

        <style type="text/css">
        #idp {margin-top:1em;color:#313131;}
        #idp .center {text-align:center;}
        #idp .or {font-size:93%;font-weight:bold;}
        #idp .lthru {text-decoration:line-through;color:#b1b1b1;}
        #idpBtns p {font-size:116%;margin-bottom:0.5em;}
        #idp #idpBtns {padding:0.5em 0 0;font-size:100%;*zoom:1;}
        #idp .primaryCta, #idp .secondaryCta {font-weight:normal;width:100px;}
        #idpBtns .primaryCta{border:1px solid #f6b22b;background:#fbe26e url(https://s.yimg.com/lq/i/reg/login/loginsprite_2_18_2010.png) repeat-x 0 0;text-decoration:none;}
        #idpBtns .secondaryCta {border:1px solid #bdbdbd;background:#E5E6E1 url(https://s.yimg.com/lq/i/reg/login/loginsprite_2_18_2010.png) repeat-x 0 -90px;text-decoration:none;}
        #idpBtns a {padding:4px 12px 3px;display:inline;font-weight:bold;font-size:100%;line-height:200%;color:#313131;text-decoration:none;}
        #fBtn, #gBtn {float:left;padding-left:23px;min-height: 24px;*height:24px;}
        #gBtn {background:transparent url("https://s.yimg.com/lq/i/reg/fb-goog.gif") no-repeat scroll -224px 20%;}
        #fBtn {background:transparent url("https://s.yimg.com/lq/i/reg/fb-goog.gif") no-repeat scroll 0 20%;margin-right:0.75em}
        #lisu {padding-top:0;margin-top:1em}
        #other {margin-top:1em}
        .clear{clear:both}
            </style>
        <div id="idp">
                <div class="center">
                    <span class="lthru">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span class="or">&nbsp; OR &nbsp;</span>
                    <span class="lthru">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div id="idpBtns">
                    <p>Sign in with:</p>
                    <div id="fBtn">
                        <a id="fBtnLnk" href="https://open.login.yahoo.com/openid/yrp/signin?idp=facebook&ts=1327156455&.intl=us&.done=http%3A%2F%2Fmy.yahoo.com&rpcrumb=DX7fg3aKdC6" class="secondaryCta" target="_blank" tabIndex="1">Facebook</a>
                    </div>

                    <div id="gBtn">
                        <a id="gBtnLnk" href="https://open.login.yahoo.com/openid/yrp/signin?idp=google&ts=1327156455&.intl=us&.done=http%3A%2F%2Fmy.yahoo.com&rpcrumb=DX7fg3aKdC6" class="secondaryCta" target="_blank" tabIndex="1">Google</a>
                    </div>
                </div>
                <div class="clear"></div>
        </div>
        <script>
        var fbSigninLnk = "https://open.login.yahoo.com/openid/yrp/signin?idp=facebook&ts=1327156455&.intl=us&.done=http%3A%2F%2Fmy.yahoo.com&rpcrumb=DX7fg3aKdC6";
        var googSigninLnk = "https://open.login.yahoo.com/openid/yrp/signin?idp=google&ts=1327156455&.intl=us&.done=http%3A%2F%2Fmy.yahoo.com&rpcrumb=DX7fg3aKdC6";
        </script>


        </div>
        <div id="yregmain">

<h2>Sign in to Yahoo!</h2>

            <fieldset id='fsLogin' class='clear'>
                <legend>Login Form</legend>



                <form method="post" action="https://login.yahoo.com/config/login?" autocomplete="" name="login_form" id="login_form" onsubmit="return hash2(this)">

                <input type="hidden" name=".tries" value="1">
                <input type="hidden" name=".src" value="">
                <input type="hidden" name=".md5" value="">
                <input type="hidden" name=".hash" value="">
                <input type="hidden" name=".js" value="">
                <input type="hidden" name=".last" value="">
                <input type="hidden" name="promo" value="">
                <input type="hidden" name=".intl" value="us">
    <input type="hidden" name=".lang" value="en">
                <input type="hidden" name=".bypass" value="">
                <input type="hidden" name=".partner" value="">
                <input type="hidden" name=".u" value="atdpjqh7hlj77">
                <input type="hidden" name=".v" value="0">
                <input type="hidden" name=".challenge" value="77tF3s1CUJkZYNi97CjheBy5.MIH">
                <input type="hidden" name=".yplus" value="">
                <input type="hidden" name=".emailCode" value="">
                <input type="hidden" name="pkg" value="">
                <input type="hidden" name="stepid" value="">
                <input type="hidden" name=".ev" value="">
                <input type="hidden" name="hasMsgr" value="0">
                <input type="hidden" name=".chkP" value="Y">
                <input type="hidden" name=".done" value="http://my.yahoo.com">
                <input type="hidden" name=".pd" value="_ver=0&c=&ivt=&sg=">
    <input type="hidden" name=".ws" id=".ws" value="0">
    <input type="hidden" name=".cp" id=".cp" value="0">

    <input type="hidden" name="pad" id="pad" value="5">
    <input type="hidden" name="aad" id="aad" value="5">

                    <div id='inputs'>

                    <label for='username'>Yahoo! ID</label>
                         <input name='login' id='username' maxlength='96' tabindex='1' value=''>

                     <p id='ex'>(e.g. free2rhyme@yahoo.com)</p>

                    <label for='passwd'>Password</label>
                    <input name='passwd' id='passwd' type='password' maxlength='64' tabindex='2'>


     <div id="captchaDiv"></div>
                </div>
 <div id='fun'></div>

            <div id='persistency'>
                <input type='checkbox' name='.persistent' id='persistent' tabindex='4' value='y' >
                <p>
                  <label for='persistent'>Keep me signed in</label>
                  <br>
                  <span id='uncheck'>(Uncheck if on a shared computer)</span>
                </p>
            </div>


        <div id='submit'>
            <button type='submit' id='.save' name='.save' class='secondaryCta' tabindex='5'>
              Sign In
            </button>         </div>
    </form>
    </fieldset>


<div id="fc1">
 <div id="fcue_c1" class="yui-panel-container fcue-yellow">
  <div id="fcue1" class="yui-module yui-overlay yui-panel fcue-outer fcue-small">
   <div class="fcue-inner">
    <div class="fcue-t"></div>
    <div id="fcue-bd"class="fcue-content">
        <div class="hd">CAPS LOCK is On</div>
     <div class="bd">
                     <p>Your Yahoo! password is case sensitive</p>
     </div>
    </div>
   </div>
   <div class="fcue-b"><div></div></div>
   <div class="fcue-pnt fcue-pnt-r"></div>
  </div>
 </div>
</div>






      <div id='help'>

          <a id="forgotLnk" href="https://edit.yahoo.com/config/eval_forgot_pw?new=1&.done=http%3A//my.yahoo.com&.src=&partner=&.intl=us&.lang=en&pkg=&stepid=&.pd=_ver%3d0%26c=&.ab=&.last=" tabindex="6">I can't access my account</a>

&nbsp;&nbsp;|&nbsp;&nbsp;<a id="helpLnk" href= "https://login.yahoo.com/config/login?.src=&.intl=us&.lang=en&.help=1&.v=0&.u=atdpjqh7hlj77&.last=&.last=&promo=&.bypass=&.partner=&pkg=&stepid=&.pd=_ver%253D0%2526c%253D%2526ivt%253D%2526sg%253D&.ab=&.done=http%3A//my.yahoo.com" tabindex="7">Help</a>

            </div>
       </div>

  </div>
  </div>



          </div>
        </div>

      </div><!-- end loginHolder -->
    </div><!-- end mainBox -->



    <![if !IE]>
    <div id='iframeHolder'>
<iframe title='Advertising by Yahoo!' id='adFrame' src='https://login.yahoo.net/login_superads/en/superads_iframe_content.html?es=.kkTLMD51u9QXolDaVc-&b=b13d3s17hlj6s%26b%3D3%26s%3Dn8' frameborder='0' scroll='no' height='1200' width='1920' onload='loadTime = new Date().getTime();'></iframe>    </div>
    <![endif]>



    <div id="footer">

<!-- intl = us, spaceid = 150002529 offset = 0 position = FOOT -->
<!-- fall back to US -->
<!-- static compact footer -->

 <style type="text/css">
 #mem_ft {border-top:1px solid #CCCCCC;font-size:10px;margin-top:1em;padding-top:0.5em;font-family:arial,helvetica,clean,sans-serif;text-align:center}
 #mem_ft p {margin:0;padding:0;}
 #mem_ft .updt{color: #DC1A22; font-weight: bold;}
 </style>
 <!--[if IE]>
 <style type="text/css">
 #mem_ft p {margin:0.25em 0 0 0;}
 </style>
 <![endif]--><div id="mem_ft">
    <p> Copyright © 2012 Yahoo! Inc. All rights reserved.</p>
    <p>
        <a href="https://legalredirect.yahoo.com/copyright?intl=us" target='_blank'>Copyright/IP Policy</a> |
        <a href="https://legalredirect.yahoo.com/utos?intl=us" target='_blank'>Terms of Service</a> |
        <a href="http://security.yahoo.com" target="_blank">Guide to Online Security</a> |
        <a href="https://legalredirect.yahoo.com/privacy?intl=us" target="_blank">Privacy Policy</a> (<span class="updt">Updated</span>)    </p>
</div>
    </div>

<span id="cache"></span>
<script type="text/javascript">
var ps3 = false;
var bb = false;
</script>
<script type="text/javascript" src="https://s.yimg.com/lq/lib/reg/js/yahoo_dom_event_animation_connection_2.8.2_inc_superads_capslock_loginmd5_min_12.js"></script>

 <script src="https://s.yimg.com/lq/lib/reg/js/yahoo_container-min_json-min_connection_main-min-new.js"></script>
  <script type="text/javascript">
 var isIE = false;
 errClNm = "nodisp";
 var aeaJson = {};
 var pwqaJson = {};
 var verifyJson, selEmail, pwqaPresent=0, aeaPresent=0, captchaData= new Array();
 var s_result = new Array();

 function setFocusOnCaptcha(){
  var cp = document.getElementById('captchaV5Answer');
  cp.focus();
 }
 YAHOO.util.Event.onAvailable('captchaV5Answer', setFocusOnCaptcha);
 function adipcl(e){
   YAHOO.util.Dom.addClass("inputs", 'yui-skin-sam');
  }
  YAHOO.util.Event.onAvailable("inputs",this.adipcl,this);
  function adbdcl(e){
   YAHOO.util.Dom.addClass("mnbd", 'masked v5bd yui-skin-sam');
  }
  //YAHOO.util.Event.onAvailable("mnbd",this.adbdcl,this);
 cPanel = new YAHOO.widget.Panel("captcha", {
     width: "460px",
        height: "380px",
     fixedcenter: true,
     close: true,
     visible: false,
     draggable: true,
     modal: true,
     zIndex:100,
     constraintoviewport: true
 });
    cPanel.beforeHideEvent.subscribe(function(){
        cPanel.setBody('');
    });
 YAHOO.util.Event.addListener("login_form", "submit", sbmCp);
   var callback = {
    success:function(o) {
     var resp = YAHOO.lang.JSON.parse(o.responseText);
     var erstr = "";
      if(resp.status == "redirect"){
       window.location = resp.url;
      }else if(resp.status == "error"){
       if(resp.code != '1213' && resp.code != '1214'){
        cPanel.hide();
       }else {
        YAHOO.membership.clearError();
       }
       switch(resp.code){
        case '1212':
         erstr += "<strong>Invalid ID or password.</strong><br/> Please try again using your full Yahoo! ID.";
         YAHOO.membership.showXhrErr(erstr);
        break;
        case '1213':
        case '1214':
         if(resp.captchaSubmitted == "1"){
          errClNm = "showdisp";
         } else {
          errClNm = "nodisp";
         }
         getCv5();
        break;
        case '1219':
         erstr += "<strong>Invalid ID or password.</strong><br/> Please try again using your full Yahoo! ID.";
         YAHOO.membership.showXhrErr(erstr);
        break;
        case '1235':
         erstr += '<strong>This ID is not yet taken.</strong><br>Are you trying to <a href="https://edit.yahoo.com/config/eval_register?login=&.intl=us&.lang=en&.done=http%3A//my.yahoo.com&.src=&.v=0&.u=atdpjqh7hlj77&partner=&.p=&promo=&.last=&.testid=sprads_tst"> register</a> for a new account?';
         YAHOO.membership.showXhrErr(erstr);
        break;
        case '1236':
         erstr += "<strong>Invalid ID or password.</strong><br/> Please try again using your full Yahoo! ID.";
         YAHOO.membership.showXhrErr(erstr);
        break;
        case '1250':
         erstr += "The browser you're using refuses to sign in. (cookies rejected)";
         YAHOO.membership.showXhrErr(erstr);
        break;
        case '9999':
                                                                        showSecondChallenge(resp);
                                                                break;
                                                                case '9998':
                                                                        showUserLocked();
                                                                break;
        default:
        break;
       }
      }
      },
     failure:function(o) {
      var erstr = "<strong>Invalid ID or password.</strong><br/> Please try again using your full Yahoo! ID.";
      YAHOO.membership.showError(erstr);
     }
    };
  var callback1 = {
   cache:false,
    success : function(o) {
                cPanel.setHeader("Verification: Type The Code Shown Below");
                var html = '<div id="captchaErr" class="'+errClNm+'">Invalid code: try again</div><div id="captchaV5"></div><div id="submitC"><div id="cdiv"><button id=".saveC" type="submit" name=".saveC" class="primaryCta" tabindex="5">Continue</button></div>';
     var respXML = getXmlDomObj(o.responseText);
                cPanel.setBody(html);
                cPanel.render("captchaDiv");
    var scriptNode = respXML.getElementsByTagName("CaptchaScript")[0];
     if (scriptNode) {
         var scriptText = isIE ? scriptNode.text : scriptNode.textContent;
         eval(scriptText);
         YAHOO.CAPTCHA.wrapper.execute(o.responseText);
    }
                YAHOO.util.Dom.getElementsByClassName("captchaButToSecondary")[0].tabIndex = "0";
                YAHOO.util.Dom.getElementsByClassName("container-close")[0].tabIndex = "0";
                YAHOO.util.Dom.getElementsByClassName("captchaButTry")[0].tabIndex = "1";
                document.getElementById(".saveC").tabIndex = "0";
                YAHOO.util.Dom.getElementsByClassName("captchaAnswerBox")[0].tabIndex = "0";
                YAHOO.util.Event.onAvailable('captchaV5Answer', setFocusOnCaptcha);
                cPanel.showMask();
                cPanel.show();
                cPanel.setFirstLastFocusable();
    },
    failure : function(o) {
     var erstr = "<strong>Invalid ID or password.</strong><br/> Please try again using your full Yahoo! ID.";
     YAHOO.membership.showError(erstr);
    }
  };
  function getXmlDomObj(sourceXml) {
   var xmlDoc;
   if (window.ActiveXObject) {
       if (typeof(xmlDoc) == 'undefined') {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    isIE=true;
       }
       xmlDoc.loadXML(sourceXml);
   } else {
       var parser=new DOMParser();
       xmlDoc=parser.parseFromString(sourceXml,"text/xml");
       isIE=false;
   }
   return xmlDoc;
  }

  //Static strings for second challenge
  var secChalStr = {
      pwqa_content : "You are logging in from a device we don't recognize. <a href='' id='pwqa_why_popup'>Learn why</a>",
      pwqa_content_next_line : "For your account safety, please answer your security question below.",
      pwqa_content_aea_text : "We can send a verification code to your listed phone number or alternate email address.",
      sec_chal_header : "Confirm Your Identity: ",
            pwqa_header : "Answer Security Question",
      pwqa_wrong_answer : "The answer you entered is incorrect. Please try again.",
      pwqa_verify_answer : "Verify Answer",
      sec_chal_continue : "Continue",
      sec_chal_back : "Back",
      sec_chal_close : "Close",
      pwqa_show_verification_cta : "Receive Code",
      aea_header : "Receive Verification Code",
      aea_content : "For your account safety, please choose either a listed phone number (carrier charges may apply) or email address below to receive a verification code.",
      aea_learn_more : "Learn more",
      aea_sms_text : "SMS",
      aea_voice : "Voice",
      aea_by_phone : "By phone",
      aea_by_email : "By email",
      aea_receive_code : "Receive Code",
      aea_err_temp_not_delivered : "We cannot deliver the verification code to your selected phone number or email at this time. Please choose another one or try later again.",
      aea_err_not_delivered : "We cannot deliver the verification code to your selected phone number or email. Please choose another one.",
      aea_err_not_selected : "Please select either a phone number or an email address listed below to receive your login verification code.",
      aea_verify_header : "Enter Verification Code",
      aea_email_verify_content : "A verification code has been sent to <span class='strong'>{email}</span>",
      aea_email_idetification_code : "Verification code",
      sec_chal_enter_code : "Verify Code",
      sec_chal_err_no_answer : "No answer provided. Please try again.",
      sec_chal_err_empty_verification : "Please enter the verification code to continue",
      locked_header : "Unsuccessful Login: Account Locked Temporarily",
      locked_content : "This account is temporarily locked for 12 hours because of security concerns. Please try signing in later or contact online <a href='{lock_link}' target='_blank'>Yahoo! Customer Care</a> for further assistance.",
      aea_err_pwqa_locked : "You failed to answer your security question correctly multiple times. Please continue to confirm your identity by selecting another verification method below.",
      why_recognize : "Why don't we recognize your device?",
      why_point_one : "You are using a device or browser you haven't previously used.",
      why_point_two : "You may have deleted your browser cookies or your browser is set to clear cookies whenever it closes.",
      why_point_three : "You are using &quot;Private Browsing&quot; mode.",
      sec_chal_or : "OR",
      aea_learn_more_content_para_one : "To help prevent unauthorized person from accessing your account, we need to verify your identity with a one-time verification code sent to your account's mobile phone or alternate non-Yahoo! email address.",
      aea_learn_more_content_para_two : "How does Yahoo! use the telephone number?",
      aea_learn_more_content_para_three : "We and TeleSign Corporation, our partner who helps provide this service, shall use the phone number to send a validation code. We also track each number to make sure it isn't used too many times. We will not use the number to send you promotional or other unwanted messages, unless you've given us permission elsewhere. We do not share the number with any other company or organization except TeleSign Corporation, which retains the number no longer than 90 days. Learn more about <a href='{learn_link}' target='_blank'>Yahoo!'s privacy practices.</a>",
      aea_invalid_code : "The code you entered is invalid. Please try again.",
            lock_link : "http://help.yahoo.com/l/us/yahoo/edit/general-01.html",
            learn_more_link : "http://info.yahoo.com/privacy/us/yahoo/details.html",
            aea_locked_msg : "You did not confirm your identity via the login code verification method. Please confirm your identity again by answering the security question below.",
            aea_enter_code : "Enter the code received",
            added_date_format : "Added {month} {day}, {year}"
  }

  function removeVoiceCaptchaJS() {
   var head = document.getElementsByTagName("head")[0];
   var scripts = head.getElementsByTagName("script");
   var styles = head.getElementsByTagName("link");

            var voiceCaptchaJSFile = 'VoiceSMSCaptcha.js';
            var imageCaptchaJSFile = 'Captcha_AudioCaptcha.js';
   var captchaCSSFile = 'VoiceSMSCaptchaSecure.css';


   for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].src.indexOf(voiceCaptchaJSFile) > 0 || scripts[i].src.indexOf(imageCaptchaJSFile) > 0) {
     head.removeChild(scripts[i]);
    }
   }
  }

  function showUserLocked() {
            cPanel.cfg.setProperty("height", "380px");
      cPanel.setHeader('&nbsp;');
            var lck_cnt = secChalStr.locked_content;
            lck_cnt = lck_cnt.replace('{lock_link}', secChalStr.lock_link);
      var panelBody = '<div class="lockedPage"><div id="lockedErr" class="error2">'+secChalStr.locked_header+'</div><div class="lockedContent">'+lck_cnt+'</div><div id="submitC"><div id="cdiv"><button id="closeLocked" type="button" name="closeLocked" class="primaryCta" tabindex="5">'+secChalStr.sec_chal_close+'</button></div></div></div>';
      cPanel.setBody(panelBody);
      cPanel.showMask();
      cPanel.show();
      YAHOO.util.Event.addListener('closeLocked', 'click', function(e) {
       cPanel.hide();
      });
  }

  function showSecChalPopup(id) {
      if(YAHOO.util.Dom.hasClass(id, "nodisp")){
                YAHOO.util.Dom.removeClass(id, "nodisp");
                YAHOO.util.Dom.addClass(id, "showdisp");
      } else {
                YAHOO.util.Dom.removeClass(id,"showdisp");
                YAHOO.util.Dom.addClass(id,"nodisp");
      }
  }

  function hideSecChalPopup(e, id) {
      if(YAHOO.util.Dom.hasClass(id,'showdisp')){
                YAHOO.util.Dom.removeClass(id,'showdisp');
                YAHOO.util.Dom.addClass(id,'nodisp');
      }
  }

        function showSecondChallenge(jsonResult) {
            result =  YAHOO.lang.JSON.parse(jsonResult.challenge_data);
            var zValue = result.z;
            var sub_code = (jsonResult.sub_code != null) ? jsonResult.sub_code : null;
            pwqaPresent=0; aeaPresent = 0;
            for(var i=0;i<result.challenges.length;i++) {
                s_result[i] = result.challenges[i];
                if (s_result[i].type == 1) {
                    pwqaPresent = 1;
                } else if (s_result[i].type == 3 || s_result[i].type == 4) {
                    aeaPresent = 1;
                }
            }
            //Sort by priority
            for(i=0;i<s_result.length;i++) {
                imin = i;
                for(j=i+1;j<s_result.length;j++) {
                    if(s_result[j].priority < s_result[imin].priority) {
                        imin = j;
                    }
                }
                tmp = s_result[i];
                s_result[i] = s_result[imin];
                s_result[imin] = tmp;
            }
            //Based on 'type' field display PWQA or AEA first
            secondChalJson = s_result;
            if(sub_code !== null) {
                switch(sub_code) {
                    //PWQA wrong answer
                    case '9997':
                        if(s_result[0].type === 1 && pwqaPresent == 1) {
                            showPWQA(s_result[0], zValue, 1, "9997");
                        } else if(aeaPresent == 1) {
                            showAEA(s_result, zValue, 0, "9997");
                        } else {
                            showUserLocked();
                        }
                    break;
                    //Email wrong verification code
                    case '9996':
                        if(aeaPresent == 1) {
                            showVerify("EMAIL", zValue, verifyJson, selEmail, "9996");
                        } else if(pwqaPresent == 1) {
                            showPWQA(s_result[0], zValue, 0, "9995");
                        } else {
                            showUserLocked();
                        }
                    break;
                    //Phone wrong verification code
                    case '9995':
                        if(aeaPresent == 1) {
                            showVerify("PHONE", zValue, verifyJson, '', "9995");
                        } else if(pwqaPresent == 1) {
                            showPWQA(s_result[0], zValue, 0, "9995");
                        } else {
                            showUserLocked();
                        }
                    break;
                    //Phone communication error - temporary
                    case '9994':
                        showAEA(s_result, zValue, 0, "9994");
                    break;
                    default:
                        if(s_result[0].type == 4 || s_result[0].type == 3) {
                            showAEA(s_result, zValue, 1);
                        } else if(s_result[0].type == 1) {
                            showPWQA(s_result[0], zValue, 1);
                        }
                    break;
                }
            }
        }

        function digitToMonth(date) {
            if(date) {
                switch(date) {
                    case 1:
                        return 'January';
                    break;
                    case 2:
                        return 'Feb';
                    break;
                    case 3:
                        return 'March';
                    break;
                    case 4:
                        return 'April';
                    break;
                    case 5:
                        return 'May';
                    break;
                    case 6:
                        return 'June';
                    break;
                    case 7:
                        return 'July';
                    break;
                    case 8:
                        return 'August';
                    break;
                    case 9:
                        return 'September';
                    break;
                    case 10:
                        return 'October';
                    break;
                    case 11:
                        return 'Novemeber';
                    break;
                    case 12:
                        return 'December';
                    break;
                    default:
                        return null;
                }
            } else {
                return null;
            }
        }

        function showPWQA(resJson, zValue, showAEABtn, error) {
            res = resJson.data;
            question = res[0];
            addedDateTs = new Date(resJson.ts*1000);
            addedDate = secChalStr.added_date_format;
            addedDate = addedDate.replace("{month}",digitToMonth(addedDateTs.getMonth()+1));
            addedDate = addedDate.replace("{day}", addedDateTs.getDate());
            addedDate = addedDate.replace("{year}", addedDateTs.getFullYear());

            cPanel.cfg.setProperty("height", "380px");
            cPanel.setHeader(secChalStr.sec_chal_header+secChalStr.pwqa_header);
            panelBody = '<div id="pwqaErr" class="error2"></div><div class="pwqaContent" id="pwqaContent"><div class="sec-chal-popup nodisp" id="pwqa-popup"><div id="pwqa_popup_content" class="sec-chal-content"><span class="pointer-up"></span><a class="clspopup"><span class="hide-offscreen">'+secChalStr.sec_chal_close+'</span></a><p><span class="strong">'+secChalStr.why_recognize+'</span></p><p><ul><li>'+secChalStr.why_point_one+'</li><li>'+secChalStr.why_point_two+'</li><li>'+secChalStr.why_point_three+'</li></ul></p></div></div><span class="strong">'+secChalStr.pwqa_content+'</span><span class="next-line">'+secChalStr.pwqa_content_next_line+'</span><div class="pwqa-question"><span>'+question+'<br><span class="small">'+addedDate+'</span></span><input type="input" name=".2ndChallenge_pwqa_ans_in" id=".2ndChallenge_pwqa_ans_in" autocomplete="off" style="width:125px;"></div><input type="hidden" name=".z" id=".z" value='+zValue+'><input type="hidden" name=".2ndChallenge_type_in" id=".2ndChallenge_type_in" value="1"><input type="hidden" id=".2ndChallenge_pwqa_quest_in" name=".2ndChallenge_pwqa_quest_in" value="'+question+'"><div id="verifybtn"><button id=".savePWQA" type="submit" name=".savePWQA" class="primaryCta" tabindex="5">'+secChalStr.pwqa_verify_answer+'</button></div>';
            for(i=0;i<secondChalJson.length;i++) {
                if(secondChalJson[i].type === "3") {
                    aeaJson = secondChalJson[i];
                }
                if(secondChalJson[i].type === "2") {
                    pwqaJsoe = secondChalJson[i].data;
                }
            }
            if(showAEABtn == 1) {
                if(aeaPresent == 1) {
                    panelBody += '<div class="pwqa-aea-text"><div class="center"><span class="lthru">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="or">&nbsp; '+secChalStr.sec_chal_or+' &nbsp;</span><span class="lthru">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>'+secChalStr.pwqa_content_aea_text+'<div id="receivebtn">';
                    panelBody += '<button id=".sendVC" name=".sendVC" class="primaryCta" tabindex="6" type="button" >

Screenshot of Old Yahoo Messenger Login/Register UI Clone in HTML5 CSS3 Javascript

Old Yahoo Messenger Login/Register UI Clone in HTML5 CSS3 Javascript
Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.

Recent Posts

Llama 3.1 vs GPT-4 Benchmarks

We evaluated the performance of Llama 3.1 vs GPT-4 models on over 150 benchmark datasets…

July 24, 2024

Transforming Manufacturing with Industrial IoT Solutions and Machine Learning

The manufacturing industry is undergoing a significant transformation with the advent of Industrial IoT Solutions.…

July 6, 2024

How can IT Professionals use ChatGPT?

If you're reading this, you must have heard the buzz about ChatGPT and its incredible…

September 2, 2023

ChatGPT in Cybersecurity: The Ultimate Guide

How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…

September 1, 2023

Add Cryptocurrency Price Widget in WordPress Website

Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…

August 30, 2023

Best Addons for The Events Calendar Elementor Integration

The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…

August 30, 2023