@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,400italic,600italic);body{background:url(/images/blur.jpg) no-repeat !important}p{margin-bottom:20px}h1{font-size:34px;margin-bottom:20px}.btn.green{box-shadow:0px 3px 10px rgba(0,0,0,0.2)}#transcript-panel,#map_holder,.codewriting-area{box-shadow:0px 8px 10px rgba(0,0,0,0.2)}#top-navbar>.languages{position:absolute;bottom:-50px;right:0;text-align:center;background:#ECEBEC;padding:5px 10px;border-radius:4px;min-width:60px}#top-navbar>.languages>a{color:#825D9C}#top-navbar>.languages>a:hover{color:#825D9C}#top-navbar>.languages>a.selected{color:#ffaf31}#landing{display:none;position:relative;padding:70px 0}#landing .instructions{color:#fafafa;font-size:16px;text-shadow:0 3px 6px rgba(0,0,0,0.61)}.cm-s-ambiance.CodeMirror{height:200px}#logger,.action-area,.nav-tabs{display:none}.action-area{margin-bottom:15px}ul.singlestep li{box-shadow:0px 1px 1px rgba(0,0,0,0.6)}ul.singlestep li>span{display:none}.action-area .player{display:none}ul.singlestep li,.player .btn{display:block;background-color:#f7f7f7;background-image:-webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));background-image:-webkit-linear-gradient(top, #f7f7f7, #e7e7e7);background-image:-moz-linear-gradient(top, #f7f7f7, #e7e7e7);background-image:-ms-linear-gradient(top, #f7f7f7, #e7e7e7);background-image:-o-linear-gradient(top, #f7f7f7, #e7e7e7);color:#a7a7a7;position:relative;text-align:center;padding:9px 13px}@media (max-width: 991px){ul.singlestep li,.player .btn{padding:8px 10px;font-size:12px}}#map_holder{margin:30px 0}#map-canvas{margin:0;padding:0}#logger .title>div{float:left;margin:0;border-top-left-radius:5px;border-top-right-radius:5px;background:#fff;font-size:12px;padding:4px 9px;border-bottom:1px solid #fff}#logger .title button{display:none}.instructions-panel{display:none}.instructions-panel.active{display:inline-block}.hints{position:relative;top:-60px}.continue{display:none;float:left;margin:10px 130px;text-shadow:none;padding:15px 30px}.continue.finish{margin-left:70px}.continue>a{color:#fff}.code{display:block;margin:5px 0 20px;padding:12px 17px;border-radius:4px;background:#fff;text-shadow:none;color:#333}.toggle-solutions .code{font-size:13px;padding:10px 0;margin:10px 0 0}.code .orange{color:#feb68d}.code .purple{color:#a397cf}.code .green{color:#469e5c}.code .brown{color:#d07408}.toggle-solutions{display:none;font-size:12px;padding:10px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;text-shadow:none;margin-bottom:10px}.toggle-solutions p{margin:0}.toggle-hints{font-size:12px}.toggle-hints>span{border-bottom:1px dotted #fff;cursor:pointer}.hints>div{position:absolute;left:0;top:0;background:red;z-index:1;padding:12px;background:rgba(61,56,87,0.9);border:1px solid #3d3857;border-radius:5px;font-size:12px;text-shadow:0 1px 1px rgba(0,0,0,0.5);box-shadow:0px 4px 10px rgba(0,0,0,0.2)}.hints>div:after{top:100%;left:13%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:transparent;border-top-color:rgba(61,56,87,0.9);border-width:10px;margin-left:-10px}.hints>div.point-left:after{top:25%;right:100%;left:auto;border-color:transparent;border-right-color:rgba(61,56,87,0.9)}.hints>div.point-top:after{top:auto;right:47%;left:auto;bottom:100%;border-color:transparent;border-bottom-color:rgba(61,56,87,0.9)}.hints>div[data-target='welldone']{display:none}.action-area{display:block;width:100%}.step-0 .action-area{display:block}.step-0 .continue{display:block}.step-0 .hints>div[data-target='code']{left:-410px;top:-100px}.step-0 .hints>div[data-target='code']:after{left:auto;right:4%}.step-0 .hints>div[data-target='map']{left:-99px;top:360px}.step-3 .hints>div[data-target='stepwise']{display:none}.step-3 .hints>div[data-target='welldone'],.step-3 .hints>div[data-target='logger']{left:-49px;top:490px}@media (min-width: 992px){.step-0 .hints>div[data-target='code']{left:-430px}.step-0 .hints>div[data-target='map']{top:390px}.step-3 .hints>div[data-target='welldone'],.step-3 .hints>div[data-target='logger']{left:-59px;top:530px}}@media (min-width: 1200px){.step-0 .hints>div[data-target='code']{left:-450px}.step-0 .hints>div[data-target='map']{top:410px}.step-3 .hints>div[data-target='welldone'],.step-3 .hints>div[data-target='logger']{left:-89px;top:560px}}.step-1 .action-area{display:inline-block}.step-5 .hints>div[data-target='singlestep'],.step-3 .hints>div[data-target='stepwise'],.step-2 .hints>div[data-target='stepwise'],.step-1 .hints>div[data-target='singlestep']{left:-440px;top:-56px}.step-2 .hints>div[data-target='stepwise']{left:-357px}.step-3 .hints>div[data-target='stepwise']{left:-387px}.step-1 .hints>div[data-target='continuously']{display:none;left:-467px;top:-56px}@media (min-width: 992px){.step-5 .hints>div[data-target='singlestep'],.step-1 .hints>div[data-target='singlestep']{left:-567px}.step-2 .hints>div[data-target='stepwise'],.step-3 .hints>div[data-target='stepwise']{left:-467px}}@media (min-width: 1200px){.continue{margin-left:150px}.step-5 .hints>div[data-target='singlestep'],.step-1 .hints>div[data-target='singlestep']{left:-679px}.step-2 .hints>div[data-target='stepwise'],.step-3 .hints>div[data-target='stepwise']{left:-584px}.step-1 .hints>div[data-target='continuously']{left:-584px}}.step-9 .action-area .helper,.step-8 .action-area .helper,.step-7 .action-area .helper,.step-6 .action-area .helper,.step-5 .action-area .helper,.step-4 .action-area .helper,.step-3 .action-area .helper,.step-2 .action-area .helper,.step-9 #logger,.step-8 #logger,.step-7 #logger,.step-6 #logger,.step-5 #logger,.step-4 #logger,.step-3 #logger{display:block}.step-4 #main-tab-single-step-btn,.step-3 #main-tab-single-step-btn,.step-2 #main-tab-single-step-btn{border-radius:4px;border-bottom-right-radius:0;border-top-right-radius:0}.step-9 .action-area,.step-8 .action-area,.step-7 .action-area,.step-6 .action-area,.step-5 .action-area,.step-4 .action-area,.step-3 .action-area,.step-2 .action-area{display:inline-block}.step-4 .action-area .player,.step-3 .action-area .player,.step-2 .action-area .player{display:none}.step-9 #logger .title button,.step-8 #logger .title button,.step-7 #logger .title button,.step-6 #logger .title button,.step-5 #logger .title button,.step-4 #logger .title button{display:inline-block;padding:2px 7px;color:#333}.step-4 .hints>div[data-target='clear']{left:-75px;top:460px}@media (min-width: 992px){.step-4 .hints>div[data-target='clear']{left:-75px;top:500px}}@media (min-width: 1200px){.step-4 .hints>div[data-target='clear']{top:530px}}.step-5 .hints>div[data-target='stepwise']{left:-547px;top:-56px}.step-7 .hints>div[data-target='stepwise'],.step-6 .hints>div[data-target='stepwise']{left:-537px;top:-56px}