body {
    font-family: Roboto,sans-serif;
    line-height:1.5;
}
.shadow-box{
    -webkit-box-shadow: 2px 2px 3px 1px rgba(0,0,0,05);
    -moz-box-shadow:    2px 2px 3px 1px  rgba(0,0,0,0.5);
    box-shadow:         2px 2px 3px 1px  rgba(0,0,0,0.5)

}

form ul.errors{margin:0;padding:0;list-style:none;color:red;margin-top:.3em}

.task-description{height:330px;margin-bottom:20px;overflow-y:auto;padding:10px 1em}

.editor-container{position:relative;height:350px;margin-bottom:20px}

.editor-container .editor-label{position:absolute;z-index:500;right:10px;margin-top:5px}

.editor-container .editor-label-switch{cursor:pointer}

.editor-container .editor{height:350px;width:100%}

.browser-column{position:relative;min-height:720px}

.task-notification{position:absolute;width:94%;padding:10px 3%;left:0;bottom:0;text-align:right;font-size:.9em;color:#333;border:1px dashed #ccc;border-radius:3px}

.browser-container{position:relative;height:315px;width:100%;margin-bottom:20px;border:4px solid #618ad2;border-top:30px solid #618ad2;border-radius:3px}

.browser-container .tab{
    position:absolute;
    width:174px;height:23px;
    padding-top:5px;padding-left:20px;padding-right:20px;
    font-size:.85em;color:#666;margin-top:-28px;
    background:url(/themes/htmlacademy/img/browser_tab.png) no-repeat 0 0;z-index:100}

.browser-container .tab .title-container{white-space:nowrap;overflow:hidden}

.browser-container .second-tab{position:absolute;right:0;text-align:right;width:194px;height:23px;padding-top:5px;padding-right:20px;font-size:.85em;color:#666;margin-top:-28px;background:url(/themes/htmlacademy/img/browser_tab.png) no-repeat 0 0;z-index:50}
.browser-container .tab-toggle{cursor:pointer;z-index:50;opacity:.5}
.browser-container .tab-toggle-active{z-index:100;opacity:1}
.browser-container iframe{height:313px;width:100%;border:none}
.browser-container .reload-browser{position:absolute;top:-27px;right:12px;padding:2px 5px;height:17px}
.tab-pane .browser-container{width:auto}
.task-completed{display:none;margin-top:1em}
.tip .tip-content{display:none;margin-top:.5em}
.tip .tip-toggle{cursor:pointer;color:#3A87AD;border-bottom:1px dashed #3A87AD}
.tip .tip-toggle:hover{border-bottom:none}
.tip a.tip-toggle{text-decoration:none}
.no-limits-left{padding-bottom:60px;background:url(/assets/course13/cat_grumpy.png) no-repeat 50% 100%}
.no-limits-left h3{line-height:1.1;margin-bottom:.5em}
.ha-wide-task{margin-top:-20px;padding-top:20px}
.ha-wide-task .ha-task-controls{position:relative;min-height:30px;margin:20px 190px;margin-top:0;margin-left:170px;padding:9px;background-color:#F5F5F5;border:1px solid rgba(0,0,0,0.05);border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,0.05) inset}
.ha-wide-task .ha-task-controls:after{display:table;content:'';clear:both}
.ha-wide-task .ha-task-summary{position:absolute;left:-170px;width:160px;top:-2px}
.ha-wide-task .ha-task-navigation{margin-bottom:4px;color:#666;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ha-wide-task .ha-task-results{position:absolute;right:-220px;top:10px;width:200px;text-align:right}
.ha-wide-task .ha-task-goals{float:left;max-width:570px;margin-top:5px;padding-left:55px}
.ha-wide-task .ha-task-goals ul,.ha-wide-task .ha-task-goals ol{margin:0;padding:0;list-style:none}
.ha-wide-task .ha-task-goals li{display:none}
.ha-wide-task .ha-task-goals li:first-child{display:block}
.ha-wide-task .ha-task-goals .ha-goal-label{position:absolute;left:10px;line-height:14px}
.ha-wide-task .ha-task-goal-switcher{float:right;margin-left:20px}
.ha-wide-task .ha-task-goal-switcher button{transition:background-color .5s}
.ha-wide-task .ha-next-task{transition:background-color 1s}
.ha-wide-task .browser-container{height:610px}
.ha-wide-task .browser-container iframe{height:608px}
.ha-quest-task .browser-container{position:relative;height:685px}
.ha-quest-task .browser-container iframe{height:635px}
.ha-quest-task .ha-task-goals{position:absolute;bottom:70px;left:0;width:80%;padding:10px 3%;background-color:#f5f5f5;background-color:rgba(245,245,245,0.95);border:1px solid #618AD2;border-left:none;border-top-right-radius:3px;border-bottom-right-radius:3px;box-shadow:0 0 3px rgba(97,138,210,0.5)}
.ha-quest-task .ha-task-goals-completed{border-color:#5BB75B;border-width:3px;background-image:url(/themes/htmlacademy/img/retina.svg);background-repeat:no-repeat;background-position:90% 50%;background-size:auto 80%}
.ha-quest-task .ha-task-goals-top{bottom:auto;top:20px}
.ha-quest-task .ha-next-task{float:right;transition:background-color 1s}
.ha-quest-task .ha-task-controls{position:absolute;width:94.1%;bottom:0;padding:10px 3%;background:#618AD2;box-shadow:0 1px 1px rgba(0,0,0,0.05) inset}
.ha-quest-task .ha-task-goals ul,.ha-quest-task .ha-task-goals ol{position:relative;margin:0;padding:0;padding-left:55px;list-style:none}
.ha-quest-task .ha-task-goals li{margin-bottom:5px}
.ha-quest-task .ha-task-goals .ha-goal-label{position:absolute;left:0;line-height:14px}
.ha-quest-task .ha-task-goals .bonus-goal{display:none;padding-top:10px;margin-top:10px;border-top:1px solid #ccc}
.ha-quest-task .ha-goals-position-toggle{position:absolute;right:-7px;top:-7px;padding:2px 5px;cursor:pointer;z-index:1500}
.ha-quest-task .ha-task-goals-top .icon-arrow-up{background-position:-312px -96px}
.ha-quest-task .task-notification{position:static}
.ha-task-description-popup{position:absolute;top:110px;left:50%;width:660px;min-height:300px;margin-left:-330px;background:#fff;z-index:2000;box-shadow:0 2px 5px #999}
.ha-task-description-popup .ha-task-description{padding:20px 30px}
.ha-task-description-overlay{position:fixed;left:0;top:0;right:0;bottom:0;z-index:1900;background:rgba(0,0,0,0.2);cursor:pointer}
.ha-task-description h1{font-size:24px;line-height:30px;margin-bottom:.5em}
.ha-task-description .course{margin-bottom:.5em;color:#666}
.ha-task-description .course a{color:#666;text-decoration:none;box-shadow:0 1px 0 #ccc}
.ha-task-description .course a:hover{box-shadow:none}
.ha-task-description-overlay,.ha-task-description-popup{display:none}
.ha-challenge-view-controls{position:absolute;top:-27px}
.ha-challenge-view-controls button{padding:3px 8px;font-size:12px;line-height:16px}
.ha-challenge-view-controls .ha-popover{position:absolute;width:15px;height:16px;line-height:15px;right:-20px;top:4px;background:#fff;color:#000;opacity:.5;font-size:12px;text-align:center;font-weight:700;border-radius:5px;cursor:pointer}
.ha-quest-challenge .ha-challenge-view-mode{display:none;width:100%;height:313px;overflow:auto}
.ha-quest-challenge .ha-challenge-view-mode:nth-child(2){display:block}
.ha-challenge-mode-overlay{position:relative}
.ha-challenge-mode-overlay .server-view{position:absolute;top:0;left:0;z-index:5;opacity:.5}
.ha-code-controls{margin-top:-5px;margin-bottom:20px}
.ha-code-controls #reset-code{margin-left:20px}
.ha-quest-challenge .ha-task-controls{width:100%;margin-top:-25px;border:4px solid #618AD2;border-top:none;border-radius:3px}
.ha-quest-challenge .ha-task-controls-container{position:relative;padding:10px 5px;background:#618AD2}
.ha-quest-challenge .ha-task-controls-container:after{content:'';display:table;clear:both}
.ha-quest-challenge .ha-task-controls .btn{vertical-align:top}
.ha-quest-challenge .ha-task-controls .progress{display:inline-block;width:170px;vertical-align:top;margin:5px 0}
.ha-quest-challenge .ha-task-controls #check{margin-right:5px}
.ha-quest-challenge .ha-next-task{float:right}
.ha-quest-challenge .no-limits-left{margin:0;padding:10px;padding-right:70px;background:#fff url(/assets/course13/cat_grumpy.png) no-repeat 98% 10%;z-index:100;border:2px solid #ccc;border-radius:3px;clear:both}
.learn-map{width:720px;margin:0 auto;margin-bottom:20px}
.learn-map .map-left{float:left;width:320px}
.learn-map .map-right{float:right;width:320px}
.learn-theme{width:320px;margin:20px 0;margin-bottom:40px;-webkit-box-shadow:0 0 2px rgba(0,0,0,05);-moz-box-shadow:0 0 2px rgba(0,0,0,0.5);box-shadow:0 0 2px rgba(0,0,0,0.5);border-radius:5px;position:relative}
.learn-theme .icon{position:absolute;width:21px;height:20px;top:8px;left:8px;background:#0092BE url(/themes/htmlacademy/img/web_icons.png) no-repeat 3px 2px;border-radius:3px}
.learn-theme .icon-css{background-position:-212px 2px}
.learn-theme .title{font-size:14px;line-height:1.2;padding:10px 20px;padding-left:35px;padding-right:30px;border-bottom:1px solid #ccc;text-align:center}
.learn-theme .description{font-size:12px;color:#333;padding:10px 20px;border-bottom:1px solid #ccc;background:#f5f5f5}
.learn-theme .courses{position:relative;padding:10px 20px}
.learn-theme .courses b{position:absolute;top:10px;left:10px;font-weight:400}
.learn-theme .courses ol{margin-left:60px}
.learn-theme .courses ol .inactive{color:#999}
.arrow-horizontal{position:absolute;width:70px;height:3px;background:#ccc;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.5);box-shadow:0 1px 2px rgba(0,0,0,0.5);top:60px;right:-71px}
.arrow-horizontal .pointer{position:absolute;top:-5px;right:-15px;width:0;height:0;border:8px solid transparent;border-left-color:#ccc}
.arrow-vertical{position:absolute;width:3px;height:30px;background:#ccc;-webkit-box-shadow:-1px 0 2px rgba(0,0,0,0.5);-moz-box-shadow:-1px 0 2px rgba(0,0,0,0.5);box-shadow:-1px 0 2px rgba(0,0,0,0.5);bottom:-31px;left:50px}
.arrow-vertical .pointer{position:absolute;right:-5px;bottom:-15px;width:0;height:0;border:8px solid transparent;border-top-color:#ccc}
.demo-course .browser-container{height:650px}
.demo-course .browser-container iframe{height:650px;width:100%;border:none}
.demo-course .demo-description{height:260px;margin-bottom:20px;height:280px;margin-bottom:20px}
.demo-course .demo-content{padding:10px 1em;height:210px;overflow-y:auto}
.demo-course .demo-controls{height:30px;padding:10px 1em;background:#f5f5f5}
.demo-course .demo-controls .yashare-auto-init{float:right;margin-left:1em;margin-bottom:.5em;margin-top:-4px}
.demo-course .demo-content h3{margin-bottom:.6em}
.achievment{position:relative;display:inline-block;width:200px;margin-right:20px;margin-bottom:20px;min-height:50px;padding:5px;padding-left:55px;border:1px solid #fff;vertical-align:top;border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,0.2)}
.achievment-badge{position:absolute;left:5px;width:44px;height:44px;border:3px solid #ccc;border-radius:4px;box-shadow:inset 0 0 3px rgba(0,0,0,0.2);text-align:center;opacity:.5;-moz-transition:opacity .5s;transition:opacity .5s;background:#08C}
.achievment:hover .achievment-badge{opacity:1}
.achievment-title{width:180px;margin-left:10px;-moz-transition:opacity .5s .3s;transition:opacity .5s .3s}
.achievment-title strong{display:block;font-size:15px;margin-bottom:.2em}
.achievment-title .description{color:#666;font-size:12px}
.achievment-title .date{color:#999;font-size:10px}
.aq-bronze{border-color:rgba(230,204,128,0.5);box-shadow:0 1px 4px rgba(230,204,128,0.5)}
.aq-bronze:hover{border-color:rgba(230,204,128,1)}
.aq-bronze .achievment-badge{background:#08C url(/themes/htmlacademy/img/icons/medal.png) no-repeat 50% 50%}
.aq-silver{border-color:rgba(0,112,255,0.5);box-shadow:0 1px 4px rgba(0,112,255,0.5)}
.aq-silver:hover{border-color:rgba(0,112,255,1)}
.aq-silver .achievment-badge{background:#08C url(/themes/htmlacademy/img/icons/medal.png) no-repeat 50% 50%}
.aq-gold{border-color:rgba(255,128,0,0.5);box-shadow:0 1px 4px rgba(255,128,0,0.5)}
.aq-gold:hover{border-color:rgba(255,128,0,1)}
.aq-gold .achievment-badge{background:#08C url(/themes/htmlacademy/img/icons/medal.png) no-repeat 50% 50%}
.achievment-1 .achievment-badge,.achievment-2 .achievment-badge,.achievment-3 .achievment-badge,.achievment-4 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/crown.png)}
.achievment-5 .achievment-badge,.achievment-6 .achievment-badge,.achievment-7 .achievment-badge,.achievment-8 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/wyvern.png)}
.achievment-9 .achievment-badge,.achievment-10 .achievment-badge,.achievment-11 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/hydra.png)}
.achievment-12 .achievment-badge,.achievment-13 .achievment-badge,.achievment-14 .achievment-badge,.achievment-15 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/black-flag.png)}
.achievment-16 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/muscle-up.png)}
.achievment-17 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/anvil-impact.png)}
.achievment-18 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/feather.png)}
.achievment-19 .achievment-badge,.achievment-35 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/maze.png)}
.achievment-20 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/black-cat.png)}
.achievment-21 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/fairy-wand.png)}
.achievment-22 .achievment-badge,.achievment-34 .achievment-badge,.achievment-45 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/archery-target.png)}
.achievment-23 .achievment-badge,.achievment-47 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/fountain-pen.png)}
.achievment-24 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/stone-tower.png)}
.achievment-25 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/crown-coin.png)}
.achievment-26 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/cargo-crane.png)}
.achievment-27 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/dragon-head.png)}
.achievment-29 .achievment-badge,.achievment-33 .achievment-badge,.achievment-46 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/flying-flag.png)}
.achievment-40 .achievment-badge,.achievment-41 .achievment-badge,.achievment-42 .achievment-badge,.achievment-43 .achievment-badge{background-image:url(/themes/htmlacademy/img/icons/fairy-wand.png)}
.achievment-notification{display:none;position:fixed;bottom:0;left:0;width:100%;height:auto;z-index:1000;background-image:-moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.5));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.5));background-image:linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,0.5))}
.achievment-notification .notification-container{width:50%;margin:0 auto;padding-bottom:50px;text-align:center}
.achievment-notification .notification-title{font-size:20px;margin-bottom:20px}
.achievment-notification .achievment{display:block;margin:0 auto;margin-bottom:20px;text-align:left;background:#fff;box-shadow:0 0 10px rgba(0,112,255,0.7)}
.achievments-stats td{padding-right:50px;padding-top:20px;vertical-align:middle;text-align:center}
.achievments-stats th{padding-right:50px;padding-bottom:10px;vertical-align:middle;text-align:left;font-weight:400;border-bottom:1px solid #eee}
.achievments-stats .achievment{margin:0;text-align:left}
.achievments-stats td.completed-count{font-size:25px}
.achievments-stats tr th:last-child,.achievments-stats tr td:last-child{padding-right:10px}
.achievments-stats .total td{border-top:1px solid #eee}
.social-sharing .share-item{display:inline-block;vertical-align:middle}
.social-sharing .share-item-fb{margin-left:-10px;margin-right:10px}
.social-sharing .share-item-ya{margin-top:-2px}
.social-sharing .share-item-tw{width:80px}
.social-sharing-course{margin:1em 0}
.social-sharing-task{margin:.5em 0}
.ha-container{font-family:"PT Sans",Helvetica,Arial,sans-serif;min-width:700px;max-width:1000px;margin:0 auto}
.ha-container:after{clear:both}
.ha-container:before,.ha-container:after{content:"";display:table;line-height:0}
.ha-layout-1-3{float:left;width:29.3%;margin-right:3%}
.ha-layout-1-3:first-child,.ha-layout-1-3-first{margin-left:3%}
.ha-layout-2-3{float:left;width:61.6%;margin-right:3%}
.ha-layout-2-3:first-child{margin-left:3%}
.ha-layout-3-3{width:94%;margin:0 auto}
.ha-header{padding-bottom:40px;background:#2c3039 url(/themes/htmlacademy/img/header-bg.png) repeat;background-size:50px 50px;color:#b9cbdd}
.ha-header-logo{margin-top:40px}


.ha-footer-menu{color:#fff;margin-top:40px;padding-top:20px;background:#34495e}
.ha-footer-alone{margin-top:40px}
.ha-footer-list{line-height:25px}
.ha-footer-list-block{float:left;margin-right:30px}
.ha-footer-list-block:nth-child(2){margin-right:50px;padding-top:32px}
.ha-footer-list-block:nth-child(4){margin-right:0}
.ha-footer-list h3{margin:0 0 8px;color:#fff}
.ha-footer-list a{color:#bdc3c7;text-decoration:none;-webkit-transition:color .1s linear;-moz-transition:color .1s linear;-o-transition:color .1s linear;transition:color .1s linear}
.ha-footer-list a:hover{color:#fff;border-bottom:1px solid #ccc}
.ha-footer-nav{margin:0;padding:0;list-style:none}
.ha-footer-nav li{display:inline-block;width:140px;margin-right:20px;margin-bottom:20px}
.ha-footer-nav a{display:block;padding:5px 0;color:#fff;text-align:center;text-decoration:none;background:#2c3e50;border-radius:5px;-webkit-transition:all .25s;-moz-transition:all .25s;transition:all .25s}
.ha-footer-nav a:hover{background:#2980b9}

.ha-footer {
    color: #fff;
    padding: 20px 0;
    background: #666 url('img/bg.jpg') repeat;
}

.footer-logo{margin-bottom:20px}
.footer-logo img{width:140px}
.ha-social{display:inline-block;width:30px;height:30px;border:5px solid #2c3743;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#34495e;line-height:30px;vertical-align:middle;text-align:center;color:#fff;text-decoration:none;cursor:pointer;font-weight:700;-webkit-transition:border-color .2s;-moz-transition:border-color .2s;transition:border-color .2s}
.ha-social:hover{color:#fff;background:#2980b9;border-color:#3498db;text-decoration:none}
.ha-footer .ha-copy{display:block;margin-top:20px;font-size:.85em;color:#95a5a6}
.ha-page-min-height{min-height:600px}
.ha-inner-container{width:940px;min-width:0;max-width:1170px}
.ha-inner-container .ha-layout-3-3{width:auto}
.ha-inner-container .ha-layout-1-3:first-child,.ha-inner-container .ha-layout-1-3-first{margin-left:0}
.ha-inner-header
    {padding-top:15px;
     padding-bottom:10px;
     margin-bottom:20px;
     background:#666 url('img/bg.jpg') repeat;
     background-size:50px 50px;
     color:#bdc3c7
}
.ha-inner-header .ha-header-logo{float:left;width:250px;margin-top:0}
.ha-inner-header .ha-header-logo img{width:140px}
.ha-inner-header .ha-header-nav,.ha-inner-header .ha-header-profile{float:left;margin:0;padding:0;list-style:none}
.ha-inner-header .ha-header-profile{float:right}
.ha-inner-header .ha-header-nav li{display:inline-block;margin-right:10px}
.ha-inner-header .ha-header-profile li{display:inline-block;margin-left:10px}
.ha-inner-header .ha-header-nav a,.ha-inner-header .ha-header-profile a{display:block;padding:8px 15px;color:#fff;text-align:center;text-decoration:none;background:#34495E;border-radius:5px;-webkit-transition:all .25s;-moz-transition:all .25s;transition:all .25s}
.ha-inner-header .ha-header-nav a:hover,.ha-inner-header .ha-header-profile a:hover{background:#4E6D8D}
.ha-inner-header .ha-header-nav a:active,.ha-inner-header .ha-header-profile a:active{background:#2C3E50}
.ha-course-nav{float:left;position:relative;max-width:515px;min-height:20px;margin-left:-70px;margin-right:10px;margin-bottom:10px;padding-top:10px;padding-right:55px;color:#ccc;font-size:1.2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-course-nav .divider{color:#fff}
.ha-course-nav a{color:#fff}
.ha-course-nav .task-number{position:absolute;right:0}
@media (max-width: 768px){.ha-inner-container{width:auto;padding:0 20px}
.ha-footer-menu-inner{padding-top:10px}
.ha-inner-container .ha-footer-nav li{margin-bottom:10px}
.ha-inner-header .ha-header-nav,.ha-inner-header .ha-header-profile{float:none;display:inline-block}
.ha-inner-header .ha-header-nav li{margin-right:10px;margin-bottom:5px}
.ha-inner-header .ha-header-profile li{margin-left:0;margin-right:10px;margin-bottom:5px}
.ha-course-nav{float:none;display:inline-block;margin-left:0;max-width:auto;overflow:visible;white-space:normal}
.ha-course-nav .task-number{position:static}
.ha-task-description-popup{left:10%;width:80%;margin-left:0}
}
@media (min-width: 768px) and (max-width: 980px){.ha-inner-container{width:724px}
.ha-footer-menu-inner{padding-top:10px}
.ha-inner-container .ha-footer-nav li{margin-bottom:10px}
.ha-course-nav{max-width:300px}
}
@media (min-width: 1200px){.ha-inner-container{width:1170px}
.ha-course-nav{max-width:660px}
}
@media (max-width: 1200px){.ha-wide-task .ha-task-goals{max-width:340px}
}
.ads{text-align:center}
.ads img{max-width:100%}
.ha-blog-inner p,.ha-blog-inner li,.ha-blog-inner blockquote{font-size:16px;line-height:24px}
.ha-blog-inner p{margin-bottom:16px}
.ha-blog-inner ul,.ha-blog-inner ol{margin:0 0 20px 50px}
.profile-image{border:1px solid #ddd;border-radius:3px;text-align:center;margin-bottom:10px;padding:10px;line-height:0;background:url(/themes/htmlacademy/img/logo-gray.png) no-repeat 50% 50%;background-size:50% auto;width:140px;height:140px;box-sizing:border-box}
@media (min-width: 1200px){.profile-image{width:170px;height:170px}
}
@media (min-width: 768px) and (max-width: 979px){.profile-image{width:104px;height:104px}
}
.cerficate-ready{display:block;height:100px;background:#2c3e50 url(/themes/htmlacademy/img/certificate/cert.png) no-repeat 20px 50%;border-radius:5px;margin-bottom:20px;color:#fff;text-transform:uppercase;text-decoration:none;box-sizing:border-box;padding:20px 20px 20px 100px;background-size:auto 60%;transition:background-color .4s}
.cerficate-ready:hover{color:#fff;text-decoration:none;background-color:#34495e}
@media (min-width: 768px) and (max-width: 979px){.cerficate-ready{padding:100px 20px 20px;height:150px;background-position:50% 20px;background-size:60% auto;text-align:center}
}
@media (max-width: 767px){.cerficate-ready{width:220px}
}
.ha-challenge-view-controls .popover{width:276px}
.payment-block{display:inline-block;width:32%;box-sizing:border-box;padding:20px 0;margin:0 1% 20px 0;border-radius:5px;text-align:center;border:1px solid #e1e1e1;vertical-align:top;position:relative}
.payment-block:before{position:absolute;content:'';display:block;top:10px;left:10px;width:5px;height:5px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 0 0 2px #ccc}
.payment-check:checked + .payment-block{background:#dff0d8}
.payment-check:checked + .payment-block:before{background:#468847;box-shadow:0 0 0 2px #468847}
#pay-1day:checked ~ .payment-way-1day,#pay-1month:checked ~ .payment-way-1month,#pay-1year:checked ~ .payment-way-1year{display:block}
#give-present ~ .present-for{display:none}
#give-present:checked ~ .present-for{display:block}
.new-year h1{margin-bottom:30px;font-weight:400}
.new-year-content{width:700px;margin:auto}
@media(max-width:767px){.new-year-content{width:auto}
}
.new-year-share{text-align:center;margin-bottom:30px}
.new-year-content + .new-year-share{margin-bottom:0}
.stats-block{font-size:0;clear:left}
.stats-block__item{display:inline-block;width:22.33%;font-size:21px;text-align:center;margin:30px 5.5%}
.stats-block__item-value{font-weight:700;margin-bottom:20px;font-size:50px;background:#3498db;color:#fff;line-height:90px;border-radius:5px}
.action-till{font-size:21px;margin-bottom:30px}
.action-till__title{margin-bottom:19px}
.action-till__time{color:#3498DB;font-size:33px;font-weight:400;text-transform:lowercase}
.new-year-progress{height:100px;width:900px;margin:0 auto 30px;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 0 5px rgba(0,0,0,0.4);border:3px solid #fff;position:relative;box-sizing:border-box}
.new-year-col4{float:left;width:400px}
.new-year-col3{float:left;width:250px;margin-left:50px}
@media(max-width:979px){.new-year-progress{width:auto}
.new-year-col4,.new-year-col3{float:none;width:auto;margin-left:auto}
.new-year-content img{display:none}
}
.new-year-progress__bar{position:absolute;left:0;top:0;bottom:0;box-sizing:border-box;border-radius:8px;background:#d9534f}
.new-year-progress__bar--half{background:#f0ad4e}
.new-year-progress__bar--done{background:#5cb85c}
.new-year-progress__status{line-height:100px;text-align:center;position:relative;background:url(/themes/htmlacademy/img/newyear/deer-runs.gif) no-repeat 50% 50%;font-size:40px;color:#fff;text-shadow:1px 1px 1px #333}
.new-year h1{margin-bottom:14px;font-size:3.5em;font-weight:700}
.new-year h2{margin-bottom:30px;font-size:1.65em;font-weight:400}
.new-year h4{margin-bottom:19px;font-size:1.65em;font-weight:400}

.statistic {
    border-left: solid 2px #2c3e50;
    font-weight:bold;
    display:inline;
    padding-left:5px;
}
    .statistic b {
        font-size: 3em;
        color: #086fff;
    }

.list-year {
    margin-right:10px;
}
.center {
    text-align:center;
}
.well-large {
    background-color:#fff;
}

.answer {
   
}

.table-input > input {
    display:inline;
}

pre, pre code {
    background-color:rgba(234, 232, 232, 0.45);
    font-size: 1em;
    margin: 10px 5px;
    font-weight: normal;

}
    
.upload {
    margin: 15px 0;
    border:solid 1px #08C;
    font-size:16px;
}

    .upload > input, .upload > .label{
        margin:5px;
    }


#ticket, .ticket {
    width:95%;
}

table td.digitPercent {
    color: #9fd197;
    font-size:1.2em;
    font-weight:bold;
     text-align:center;
}
table td.TaskName {
    vertical-align: middle;
    font-size: 14px;
    text-transform: uppercase;
    color: #468847;
    font-weight:bold;
}

table td.digitOcenka {
   color: #e09f9f;
    font-size:1.2em;
    font-weight:bold;
    text-align:center;
}

table td.digit {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
}

table td.delete a{
    color:red;
}

table td.edit a {
    color:white;
    background-color:rgba(70, 136, 71, 0.85);
    padding:3px;
    border-radius: 3px;
    font-weight:bold;
}
table td.delete a {
    color:white;
    background-color:rgba(247, 72, 72, 0.86);
    padding:3px;
    border-radius: 3px;
    font-weight:bold;
}

table td.edit a:hover, table td.delete a:hover {
   text-decoration:none;
}

th {
    text-align: center;
}

.bs-docs-example {
    position: relative;
    margin: 5px 0;
    padding: 5px ;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width:98%;
}

.black {
    background-color: black;
    color:white;
}

.codestr {
    width: 95%;
    border:none;
    background-color:none;
}

.code-table {
    border: none;
    font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    margin: 5px 0;
   
}


.code-table td, .code-table th{
    border:none;
    padding:0px;
    margin:0;
    font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

td.codeline, th.codeline  {
    border-right:solid 1px #ddd;
    background: rgba(221,221,221, 0.3);
    color: #686868;
    text-align:right;
    width:25px;
    font-size: 14px;
    font-weight:bold;
    padding:8px 7px 0 3px;
}

.codestr pre textarea {
    border:none;
    padding:5px;
    margin:0;
    background: none;
    font: 16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    width:98%;
    max-width:98%;
    border:solid 1px #ccc;
    color:black;
    resize:vertical;
    min-height:20px;
    height:auto;
    
}

.codestr pre{
    border:none;
    padding:5px 0 0 5px;
    margin:0;
    background: none;
    font-size:16px;
}


.code-console{
    border: solid 2px #ccc;
    font: 16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    color:white;
    background-color:#404040;
    padding:5px;
    margin: 5px 0;
    min-height:250px;
}

.table-input input {
    float: left;
    margin-right:7px;
    margin-top: 1px;
}

.table-input {
    width: 95%;
}

.blockcode textarea{
    min-height: 150px;
}


.text-success{
    font-size: 16px;
    text-transform:uppercase;  
    vertical-align:middle;
    font-weight:bold;
}

.text-notsuccess {
    font-size: 16px;
    vertical-align: middle;
}

.text-success small{
    font-size: 14px;   
}

.editor{
    font-size:16px;
    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-style: normal;
    color:#34495e;
}


/*--загрузка файлов--*/
.modalBackground
{
	background-color: Gray;
	filter: alpha(opacity=50);
	opacity: 0.50;
    
}
.pnl{
	background: #333;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	color:White;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}
.close { 
    DISPLAY: block;BACKGROUND: url(Images/close.png) no-repeat 0px 0px; 
    LEFT: -12px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute; 
    TOP: -12px;HEIGHT: 26px; 
}  
/*-----*/

.alert .zadanie {
    color:#5D4037;

}
.alert-info
{
    background-color:rgba(231, 251, 255, 0.74);
}
.dnevnik-header {
    font-weight: normal;
    font-size: 10px;
}

.modal {
 width:79%;
 left: 10%;
 right:10%;
 margin-left:0;
}
.modal-header h3{
    color: #2c3e50;
}
.modal-body {
    max-height: 500px;
}
.editor .text-theory {
    font-family: 
        -apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-style: normal;
    color: #2c3e50;
}
.table-attemps
{
    font-size: 10px;
    padding:2px;
}
code
 {
     padding:2px 4px;
     color: #2c3e50;
     white-space:nowrap pre-line;
     background-color: rgb(254, 247, 226);
     border:1px solid #e1e1e8;
     font-weight:bolder;
     font-size: 1em;
     font-family: Consolas, monospace;
}

li.course-widjet {
    margin: 5px;
    width: 22%;
    vertical-align: top;
    border-radius: 3px;
    padding: 10px;
    border: 1px solid #D8D8D8;
    margin: 5px 0;
    height: 150px;
    text-align:center;
}

li.course-widjet img 
{
        width: 80px;
        height: 80px;
        text-align:center;
        box-shadow: #ccc 0 1px 1px 0;
}
a.course-widjet-title {
    overflow: hidden;
    width: 100%;
    line-height: 1.33;
    margin: 12px 0 18px;
    font-size: 16px;
    color: #666;
}

a.course-widjet-title:hover {
    text-decoration:underline;
    color:#4E6D8D; 
    }

div.bs-callout{
    font-size: 16px;
}