.select-list, .select-list ul, .select-list li {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    cursor: pointer;
}

.select-list > li { /* First level */
    border-bottom: 1px solid #aaa;
}

.select-list > li > ul > li { /* Second level */
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.select-list > li > ul > li:last-child { /* Second level, final item */
    border-bottom: none;
}

.select-list li > a {
    display: block;
    position: relative;
    overflow: hidden; /* Contain floating extras */
    padding: .75rem 1.25rem;
    padding-left: 3rem;
}

.select-list li >a:hover {
    background-image: repeating-linear-gradient(
            -45deg,
            rgba(240, 220,  78, 0.4),
            rgba(240, 220,  78, 0.4) 10px,
            rgba(240, 220,  78, 0.3) 10px,
            rgba(240, 220,  78, 0.3) 20px);
}

.select-list > li > a { /* i.e. tutorial / class items */
    background-color: rgba(0,0,0,0.05);
}

.select-list li.selected > a {
    font-weight: bold;
    color: darkred;
}

.select-list li > ul {
    padding-left: 1rem;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.select-list ul ul li > a {
    padding-left: 3em;
}

/* Plus-minus signs next to expandable sections */

.select-list li.has-children > a:before,
.select-list li.has-children > a:after {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.95rem;
    width: 0;
    height: 1rem;
    border-right: 2px solid black;
    transition: transform 0.3s;
    transform: rotate(90deg);
}

.select-list li.has-children:not(.selected) > a:after {
    transform: rotate(0deg);
    opacity: 1;
}

.select-list .extras {
    float: right;
}

.select-list .extras > * + * {
    margin-left: 1rem;
}

/* Grades should float to the right, and have a colour matching your score */

.select-list .grade {
    font-weight: bold;
    color: #666;
}

.select-list .grade.aced   { color: hsl( 43, 74%, 49%); }

.select-list .grade.high   { color: hsl(117, 40%, 49%); }

.select-list .grade.medium { color: hsl(209, 40%, 49%); }

.select-list .grade.low    { color: hsl(  0, 40%, 49%); }

.progress {
    height: 1.5rem;
    border: 1px solid #AAA;
    border-radius: 3px;
    box-shadow: 0 0 3px #CCC;
    margin: 1rem 0;

    /* Contain the bar */
    overflow: hidden;
}

.progress > .bar {
    height: 100%;
    background: #08C;
    box-shadow: -10px 0 5px 10px #08C;

    /* Contain the bar highlight */
    position: relative;
    overflow: hidden;
}

.progress > .bar:before,
.progress > .bar:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    width: 50%;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, #85cee9 50%, rgba(0,0,0,0) 100%);

    animation: progress-bar-swipe 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.progress > .bar:after {
    animation-delay: -1.5s;
}

@keyframes progress-bar-swipe {
    from {
        left: -50%;
    }
    to {
        left: 100%;
    }
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#tw-usermenu.open .dropdown-menu {
    display: block;
}

#tw-usermenu {
    position: fixed;
    top: 0;
    right: 10px;
    z-index: 1; /* Sit above #tw-quiz */
    min-width: 160px;
    background: #EEE no-repeat 3px center;
}

#tw-usermenu > span,
#tw-usermenu > a {
    max-height: 1.5em;
    overflow: hidden;
    background: #EEE no-repeat 3px center;
    outline: none;
    padding: 0 4px 0 23px;
    border-radius: 0 0 2px 2px;
    cursor: pointer;
}

#tw-usermenu > a[data-toggle=dropdown]:after {
    content: "▼";
    float: right;
}

#tw-usermenu.open > a[data-toggle=dropdown]:after {
    content: "▲";
}

#tw-usermenu > a > .smly {
    background: #EEE no-repeat 13px center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAADKUlEQVQ4y12SX2yTZRTGf+/3fl3X0sHabXZ2HeLWrG5zTJ2MgYBhYIbTmOC88NZookKMEFESgxqvvNBLCUbijJkazWAkGqOQAAliZsQ5iX8ihnVOu3ZljHVs/fr1a9/v9YJQNp67k5xz8jvPeQTL5LouhmGU67179npTyaS3IRr1RyKRmslEYl0mk7nHdd3YHeFw6rEnHv9YACilkFKWB48dO1794ZEPNudyS086hUKX4zhNVi63utLnc6WU37S3tx/57MsvvuV2jY7+GN65vfeV9njruV2925fWt7bquxqiuj0e11u3bNNt93Zmhz79vOVm//nvzyMARk6MRIc+GTrw7+Tk0652Q12dbZ6/L08xnUoTi8eZnb9OYvIflKtY29h48o+LY7vKJw8ODj46Mnz8aNFxeh7ccH/mwP49nsy1HHV3RujZ9jCJZJp0ZgYECCGYzsz2PXPwrX0AhmHcILgprfUDvX39Y5aVR6kSlmUhpUQIUC54onEatvRT09yq7q6ufPntna2HzRUmpC5EvKbB9GwaU5oIaYIhwDBp3v0s9RsfAUPiWDmZXLAPvXP20rhcPh8aOPh6bVPzfZ6eAWrbNlAZqic/lyb21AuEN/YhDAlaIz0VuIiAVsWrxjJ8/2/5wOaOkIO/sYXg+k24QtO57z3qunawOPUXyTPDuKUiANLro2JV1UPlBRevLAQR2l9wHBrVDI5lsTj5J0v/JQCNszBH9tI4WpVuBc8w68UtAhV88XTql2qW1vVnR/go9DxcnaJidRAhTZRTwC0W8PirQAg0UOeTv5YJhJDzgQoxkdU+AqUFwnYSYXpuGAmYXh/KzsPKx10wAJR2AYit8RwGoScCHejxr5j56TTKttCqhKuKJM8Mk038DkLgMbB8pvhO3B7nN3+YPrpkF56zTT/p0VPY81cwpIlybKoaYwTbugGorZSDr3YHXyovSGQtmqr9/Jy5XvX1RO7QbL70WhGBPZuiZC1i+qvwhsKYhkE0IN/fFFn1xo61a7IrCE5cnmN3rIaMrcyTE9e6EwvO/mzB3WqXtN9rinzQa5zrqK18F/TYQEutAvgfPUhRglU+OIAAAAAASUVORK5CYII=);
    padding-left: 33px;
}

#tw-usermenu.online > a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJkSURBVDjLhVLPSxRhGH5mf8yOs9O6aa2b6BJhsW3RilAXDSW65clDdgwkEBH/gIiI6FC3uoRBQYeooP4Aw9isQ2xG5YZEVFrINmnFto67s7sz33xf76wedEfwgxdm4H1+vO/zSkIINL7Bax/PpxLRkXhUTVuMY/7Hci4z++2e/njofmNvYDvwqe726/2pcJsa9MMhgd7D4T5NUQ8GBibBZka3kPgaCZKk7IKbVT8qNodpcUToe6g33tadOjCyo4NYREkrpGyYHLYDMEfArHFoioTE/o70jgRVC3AIZDMqLogA9fKR12qVefblGWHui54rmDZCsoSaLVClUkMSVlYZZl7P53YkyGQ/T9+dWqoaFY6K5ZaDEo1w42GOVWaz7xv7pc0x9kxkh/uOxa6c6JSSnDz/MgJgFGM0ZCLALTzKrhZePnh1S+gXr3p2cHQ0kx7oSVwePtmWbNUCKFsCKb6+i3K1GXKQY2JfrCW/XJqQfGNvBL/9bMsILRF1/MzxWGo3RfbHoK3VjUkgDlhEsqDXEKJ0Lgx2tSJ56JJnB13tLf3NYR9+F20CCwJSuSnw9W8hJHxdMtHeqiAYix/xEGia0ilLPuRXKnVVx41vYwRG6XEOGGsMst8PWVF3eXZgWUyixChvCc6GMiNwja7RJjR3x3GLRFwyj4PFvPFzQTehNUn1f4e6LIfXCdxDovGR2BvEh+9lVArFNQ/BdCY/Pjq5eGfqbQGC1IPkpEkGwnREMvl09/DkxQpuPs0beDd3ets7cF/HuefL8ViU7YnIYbpcTS+Y0P9apXLe+IeSWRSfzvZs7v8PV6U0ly704DwAAAAASUVORK5CYII=);
}

#tw-usermenu.processing > a,
#tw-usermenu.next > a {
    /* arrow_refresh_small.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGMSURBVDjLY/j//z8DJZiggtx9Sasyd8Yxk21Axo7YSymbow4QZUDJ8QyHoiNpB/IPJP/P3pPwP3177P+mQ5X/6/aV/o9cFrATrwHFxzIcCg+nnplzacr/TbdW/19/c8X/tTeW/l91bdH/5Vfn/y/ZkvPfb7rbHZwGFBxKnTn9fN//jTdX/W8+XPU/cX34/5iVQf8rtuf/L9mc/d9nqutuvC7I2Zv4AOjf/0D//o9fG3YIJh4wy+OS9xTnQ2699kyO7VacRAUi0L/wUPea5LTGtceW9FgA+ncNyekgfJEfZ9AcTyagfw+59ztcgolbVBsdMi7V/a+Xr/lfK0v1AV4XAP27O2tl0v/UJbH/rRtM/5tVGf6PmB74v/dE0//khdH/VVMUZ+I0AOjflxnLE/5PP9v7f8rprv8TT7X/7zvZ8r/nRON/kLhKssIZxXhZB7wusGu22Bk3N+x/1Mzg//qFWv+1s9X+q6cp/1dOUjigEIeqGWcgAv17AOjfS2RnJt08DWbNTNVVVMmNhDAANau2t3wToKQAAAAASUVORK5CYII=);
    animation: blink-background 0.7s steps(5) infinite; -webkit-animation: blink-background 0.7s steps(5) infinite;
}

@keyframes blink-background {
    from {
        background-position-y: center;
    }
    50% {
        background-position-y: center;
    }
    to {
        background-position-y: 999px;
    }
}

@-webkit-keyframes blink-background {
    from {
        background-position-y: center;
    }
    50% {
        background-position-y: center;
    }
    to {
        background-position-y: 999px;
    }
}

#tw-usermenu.uptodate > a, #tw-usermenu.sync-force > a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKFSURBVDjLhVNNaxNRFD3vzUwSJ622YEwgYoVaNBUVilZwqStBtJBNxC4EEel/sDsXLhRcVxSUQo07QVy0jbpQqiANsS5ciNpowBhM2kk7nWS+vPdJqi0tXjhz39x595zz7syIMAxRKBSilM8TLgZBcIjyAIGWwQfKnyjfIxRGRkZ8bAoxOzs7SJumEonE0VQqhXg8DtM0wcTLy8toNpsol8uo1WqvqJbLZrOVDQzT09MvFhcXWS7cLlzXDYvFYpjP5x8w8b+QdDmcTCbxv0in0yCRs5vrOhUVU7VaRSwWQzQahWEYqmbbNur1OiqVCvr7+5kA2xLouo5GowHHcdS953mwLAutVks949qWBJ2zaJqmHPBmxs0ndXRHe2G3PfR2RfBo/geEHEy8v1sKg1CgYa3hebFyct0BK9KwVBZCYM12cHr4IC4MdeHpm+8Yv5TZoPzwZY0cibeyQ+D7vmpm8Npuuag3PbV55l11vdGhktUCakttEgr+zoDVGdzMx5FSQAsB1w9we2yI1OioRKDR1dShZmOttv8QMDrqHcKYIeGQixv5ryAueEQUEJiEn/PCNAJIVuRXRV+ieoWd8Eix5XvQpEFWdZAfyho1SiIQcEmsTQNmB5fn5uYeZzKZeF9fnyLhITbtKgxqHDvXTWRtopRKNaRzx/QIbk2V8ctahZ7L5Z5NTk4eWVhYuF4qlbJSyl38L/hBijQNBFjD/flr2G3uIxcSNfsbrp64Q6sYDZpmwHZHR0e/ULrCmJiY6F5ZWTmg6+n5/Skg2dXEmWPD6ImklYklJ409cQ9mhD4icirUQLaI42Mzrwf27jjVE+0hyzvpGC4EDViEPgJh42P5M35aLn4DnlayCCcx84IAAAAASUVORK5CYII=);
}

#tw-usermenu.error-neterror > a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAE4SURBVCjPZdBLSwIBGIXh/lHQb4guyza1CEIqpNoIQdHKXEQQrkS6IUSLFhYFtpCIwUAG07IstTTnqjNTjnSRZmPg4m3lpYZvd84DB74BBjq36zkXk07CORB9nl7aVydtkwZ1NKL2tMcFYqLJOxYGb1QIiC5w5dhYGOgo6EQcFxCcOjV0VCRUdtxgX1R4RaZClTzz7okF/2FLo0SRChvtkdA/sDl1Wk6RQuASAYHg54S/D6wPnjzrNLAwqVJBJsfax/BoFwQjZWw0LEx0SmQocsGk2AVHko6MhoGByhMZEqSZ++qCs5bBLSo1qkgUSBMny1K7C45/qtwho6NQ4oFr4mRZ7IGwmqWAjMILee65IUWMmd6Ed3xlL4qEjkqZR9KE8X2PDf151Kq9ZW03Q+1Ae7np1WZznfwXGfNkzblrzUIAAAAASUVORK5CYII=);
}

#tw-usermenu.error-unauth > a {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI8SURBVDjLpVNNiFJRFP70ac80w6FEJ2FqsDKmSRpmU6taBRGE4aaCYPatat1qtu3aRosJI4Ro0Q+EIP0QCTM4WhSBBqmkJJr2cvx53vfu69w3vXIapUUPPs69553zne+ee67NMAz8z+cY3aTTaZkIzxMucc6PkD1EoCV/T/YT2TuEdCwW060cm6WAkudofd/v90eDwSA8Hg/cbjfEf0VR0Ol0UKlU0Gg0XpPvYjwer5qJIkAglUo9L5fLopwx6WOMGblczkgmkytWnt2SQpujgUDgn2cOhUKgIme39YCcJmO9XofL5YIsy3A6naav1+uh1WqhWq0iHA6bsRMJHA4H2u02BoOBudc0DUzJw8PygHTG9I0lsM4kSZKpQBAJMHUDanMNe2ZOQS3lKXkeuv77Ev70wFJgVmTMhAjUGi8xte8Edk8vwNl9C32jtEXBNgIziUhMdGsYfn0B714f9B+PMH3sCvrlJ+A6m0xgVdc0BvXLM/gjF4DBOlbv3sMuXx+DWhZevSSPJRCwquvKR8i2IbxTPXD1MzWJk/w1zJ6+jiBb96zeOundQiCki6uiSYS8QwKvPIVv5jh47x3l9rEYj4APa9TgAg5Ez0maOrz2t4KlTCbTLRaLcH7PUuOicHubMLRvNPASsg8LIgp8UID/8H7oKrv6anl+zjb6GhOJxCwR3TiorCwtXL5tl+wlImiLSx6ZRTuknRHUP+RReLz8wDbuOb+5udg0dO6mY9sN0Vyu801Ls/LLYrPp2Z9W3anPTwD1kQAAAABJRU5ErkJggg==);
    color: darkred !important;
}

#tw-usermenu.appcache-reload > a {
    /* server_lightning.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJrSURBVDjLpVPNS1RxFD1vPpwPefoGG+1FZllWEkZSLYIWpiiJSEgt1VUQ/RXSMmgx4LLQRS1CgmpT2DLogz5khoTRwKaiMckZmtHnPN97v4/u+80M5SJc+OBwNr9z7rn33atJKbGXL7Tbg4WFhVnG2LjneSFiECu4ruvzQ+1/CTKZTDMJ7hmGcS0SicMhEYSAek2aRMLA/PzzvwmKmf4BycU0ISh4uLGFN7YFtEAIqxyOG0YhehMeDAgpyEiCk5njOFWDYro/KIW4Gk2c7w6Gk5AeU+CuDfv3EsrBS0h/WiGRpBBCYXBoWLWhDKhqO2E8HOsAK39AINoLzovYLn1GpfEyNitn0H0KqrqsVfdbVwkKH/saSHw9YpzWgSCEvUajdVD6/gIiOQHRPAhh/UIm/Z4qc1Wdcw5z5Eo1geC8VzJxI6J3QTKbPEzQeKkSmVXykJszaCqVcKE9Bit2EV4ooVLI2gwCJJ6OtpzbZxeXUCksQ4scU3/XMAcQd3KI21nECs/gch1Mi2Fdz2GmlAKNspaA8bmt/JuXxB4hLNnrSaNjLMm2S3ArBVjyMFbN22ChVjWDmeW72NpkKoVvsGMPvj7taZKM/4w2nYxXymuQ5ji2jT78yK+ryELKGgOH2k08uD+7cxOFxx83xA/Ev61xnBiew8YWh71hQXB/6nUDWWVZbSFQF3951D0sPNZpF3Nji87ou1dv07AsC7quIxqL0AZqyojXUvjJ/ZUO/VM9Txg9Prmy2AU8SaVSI9ls9pZpmmePdB5Fa/KgEtRb3t+WhH8b2m7XODU1NUTCO4Se+jH57IP2YUnb6zn/Ad9Qrbi4Y2W9AAAAAElFTkSuQmCC);
    color: darkred !important;
}

#tw-usermenu.appcache-error > a {
    /* server_error.png */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI4SURBVDjLpVPNaxNBFP9tNx9N0zW7ENRFE6ygpYaCNXrQkwWtFUUEc6hgD/0TxKsS1KOX4LlQEAUPfoAKpScDAcHUhI1VCr2kF4VWsRBCk93szPhmYqJt0pMLj8fMzu/jvTejCSHwP19g90a5XF7wff9Wq9UKUAZlFZ7nyfw8k8nc7EtQqVRiBJg3TTMTDg/BJRA4h/JHLi3LxNLS4gytegkcx5mW4Hg8figajaK6/g1SnXMBLjgRCTAic123fwl0eDGZTKqNRqOJFoFXKiUi4N24OHVZldGXQNYYCoVQq9XayozhROqkUhd/1GWz93QgmRmB5CE5FGm94ixTZkrdjv3CSNCHxs29HbR7JRSRJEiNn1LqEE0cFq9h2ZM4auZ7CAY6DjoEikQqs3btgUAe8cQ57LMnkDA2sPrq+pm+BF0w+9s4nf2AsfUFRtwEq71BYmIOzPXurTydDu4gkM3p3EjZODU+cmE0PuJIahZollF88gzDZgN+07tKca3HgZyCruuqbmk/7FWxPxaCYW2Du1Wqj4PVlzFy/o7mu+7D4uOzxr8OioVCAfV6HYZhYHAwgOHae5hJGuX2Z8I2kL4xCu59p39rODA+M+a73m2J1TrWc7ncFZrGfdu208fMTRqdhoPHI6RapPI8lF6uEskYND0GRC7h0/zdTcH5pLb7NWaz2akLVv7d6dmFoD6wDuFvyfns6LseGcXGVwdrbx+80Po95w+P0j8F40OyH0Lewm6Ibkb7dpZ+A2HofmbUgVesAAAAAElFTkSuQmCC);
    color: darkred !important;
}

#tw-usermenu > ul {
    left: auto;
    right: 0;
    text-align: right;
    padding: 5px 10px;
}

#tw-usermenu > ul a:link,
#tw-usermenu > ul a:active,
#tw-usermenu > ul a:visited {
    color: black;
    white-space: nowrap;
}

#tw-usermenu > ul a:hover {
    color: #2a3f98;
}

.alert {
    border: 1px solid black;
    border-radius: 3px;
    padding: 1rem;
}

div.preview-box {
    position: relative;
    min-height: 3em;
    overflow: hidden;
    margin: 0 1% 10px 1%;
    padding: 0.5% 0.5% 0 5em;
    border: 1px solid #CCC;
    border-radius: 4px;
}

div.preview-box > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 0.5%;
    background: #CCC;
}

div.preview-box > :first-child > a {
    display: block;
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

html {
    overflow-y: scroll;
}

body {
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

body.expanding {
    max-width: none;
}

@media all and (min-width: 900px) {
    body.expanding > h1, body.expanding > h2 {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.5em;
        margin: 0;
        margin-top: 0.5em;
    }
    body.expanding > h1 {
        width: 30%;
        margin-right: 1%;
    }
    body.expanding > h2 {
        width: 68%;
    }
}

h1, h2 {
    text-align: center;
    font-size: 200%;
}

h1, h3 {
    margin-top: 0;
}

img {
    max-width: 100%;
}

a, a:link, a:visited {
    color: #08c;
    text-decoration: none;
}

a:focus, a:hover {
    color: #005580;
    text-decoration: none;
}

label, input, button, select, textarea {
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

@media screen and (max-width:480px) {
	h2{
		font-size: 160%;
	}
	
}

/* === Buttons ============================================================= */

.button{
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 2px;
	text-decoration: none;
	padding:  8px 10px;
	background: #eeeeee;
	border: 1px solid #dfdfdf;
	color: #333;
	transition: background 0.2s ease-in-out;	
}

.button:hover{
	background-color: #e7e7e7;
}

.button:link, .button:visited{
	background: #eeeeee;
	color: #333;
}

/* The first child is the default button (blue) */

#tw-actions .button:first-child,
#tw-actions button:first-child{
	background: #08C;
	border: solid 1px #08C;
	color: #fff;
	transition: background 0.2s ease-in-out;	
}

#tw-actions .button:first-child:hover,
#tw-actions button:first-child:hover{
	background: #006da3;
}

/* The last child always floats left and should not have a left margin */

#tw-actions .button:last-child,
#tw-actions button:last-child{
	margin-left: 0;
	float: left;
}

/* The last child always floats left but the other buttons float right */

#tw-actions .button, #tw-actions button:first-child{
	float: right;
}

/* Last child on the load page is the deafult button (blue) */

body.quiz-load #tw-actions a:last-child{
	background: #08C;
	border: solid 1px #08C;
	color: #fff;
	transition: background 0.2s ease-in-out;
	margin-left: 5px;	
}

body.quiz-load #tw-actions a:last-child-child:hover{
	background: #006da3;
}

/* Disabled state of the buttons on the start page */

div#tw-actions a.disabled { 
	background-color: #f6f6f6;
	border-color:#eeeeee;
	color: #878383;
}

div#tw-actions a:last-child.disabled { 
	background-color: #6a9db7;
	border-color:#6a9db7;
	color: #fff;
}

/* Buttons on small devices */

@media screen and (max-width:480px) {
	#tw-actions .button{
		margin-top: 3px;
	}
	/* The Primary action */
	#tw-actions button:first-child{
	  	width:100%;
	}
	/* Even children float right and odd children float left */
	#tw-actions button:nth-child(odd){
	 	float: left;
		margin-left: 0 !important;
	}
	#tw-actions button:nth-child(even){
		float: right;
	}
	
}

/* Button to Show/hides details about grade for small screens (hidden by default) */

#tw-quiz .show-grades {
    display: none;
    margin: 10px 10px 0 auto;
    padding:3px;
    border: none;
    background: none;
    outline: none;
    font-size: smaller;
    font-weight: bold;
    color: #08C;
}

/* === Quiz questions ====================================================== */

#tw-quiz {
    position: relative;
    clear: both;
    padding: 5%;
    margin-bottom: 10px;
    border-radius: 2px;
}

#tw-quiz.busy > * {
    opacity: 0;
}

#tw-quiz.busy:before {
    content: "Please wait...";
    display: block;
    text-align: center;
}

@media screen and (max-width:480px) {
	body.quiz-start #tw-quiz {
	    padding-left: 0;
	    padding-right: 0;
	}	
}

#tw-quiz img.mainfigure {
    display: block;
    margin: 1em auto;
}

#tw-quiz ol {
    position: relative;
    list-style-type: none;
}

#tw-quiz ol label {
    position: relative;
    padding-left: 1.2rem;
}

#tw-quiz ol label input[type=checkbox],
#tw-quiz ol label input[type=radio] {
    position: absolute;
    /* (line-height - element-height) / 2 */
    top: calc((20px - 13px) / 2);
    left: 0;
}

#tw-quiz ol label p:last-child {
    /* Don't bother with final margin */
    margin-bottom: 0;
}

#tw-quiz ol + ol {
    margin-top: -1rem;
}

#tw-quiz ol li {
    margin-left: 25px;
    line-height: 30px;
}

#tw-quiz ol input.correct + *:before { /* NB: We can't have :before on an input, but something will be after it */
    position: absolute;
    left: -1.1em;
    top: calc((20px - 14px) / 2);
    line-height: 12px;
    padding: 1px 0;
    content: "\2714";
    color: green;
}

#tw-quiz ol input.incorrect:checked + *:before { /* NB: We can't have :before on an input, but something will be after it */
    position: absolute;
    left: -1.1em;
    top: calc((20px - 14px) / 2);
    line-height: 12px;
    padding: 1px 0;
    content: "\2717";
    color: red;
}

#tw-quiz blockquote {
    margin-left: 2rem;
    margin-right: 2rem;
}

#tw-quiz pre, #tw-quiz code {
    border: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(128,128,128,0.05);
    padding: 1px 3px 0px 3px;
}

#tw-quiz .explanation {
    border-radius: 3px;
    padding: 1rem;
    /* Same as alert-success */
    border: 1px solid #d6e9c6;
    color: #468847;
    background-color: #dff0d8;
}

#tw-quiz > .incorrect .explanation {
    /* Same as alert */
    border: 1px solid #fbeed5;
    background-color: #fcf8e3;
    color: #c09853;
}

#tw-quiz textarea {
    min-width: 100%;
    max-width: 100%;
    height: 10em;
}

#tw-quiz input[type='email'],
#tw-quiz input[type='text'] {
    width: 100%;
}

#tw-quiz table {
    width: 100%;
}

#tw-quiz table .grand-total,
#tw-quiz table .numeric {
    text-align: right;
}

#tw-quiz tr.claimed {
    color: #999;
}

#tw-quiz .coinlogo {
    float: right;
}

#tw-quiz .parse-as-rst .system-message {
    white-space: pre;
    padding-left: 3px;
    background: hsla(47, 100%, 27%, 0.2);
    border: 2px solid hsl(47, 100%, 27%);
}

#tw-quiz .parse-as-rst .system-message.severe {
    background: hsla(0, 100%, 27%, 0.2);
    border: 2px solid hsl(0, 100%, 27%);
}

#tw-quiz .parse-as-rst .system-message-title {
    font-weight: bold;
}

/* === Footer ============================================================== */

#tw-grade {
    float: left;
    margin: 3px 0 10px 0;
    font-weight: bold;	
}

@media screen and (max-width:480px) {
    #tw-grade {
        font-size: 12px;	
        margin: 3px 0 5px;
    }
}

#tw-timer {
    text-align: right;
    font-weight: bold;
    width: 40%;
    float:right;
    margin: 3px 0 10px 0;
}

#tw-timer span {
    display: none;
}

#tw-timer span:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAAMFBMVEX////////////+/v77+/v09PTm5ubd3d3BwcGnp6eMjIxubm5dXV1NTU1AQEBAQEA4t+VPAAAAgklEQVQY002PQQ4EIQgEK1FRQdL//+0e1HX6RCqVBmBnSYtPSiGlpJRLWgZIENkOmnLzCDfXvNoIhXsoxiVdAbVCqB+kCZQOTG0SAVDmm9u2W+yOBpgqQE+AKgNMZ8fu/aC1Hmqy95qpAeR8aOZpsSedW/0yk/91rQFj6VNhnlL6ln9/awULbw0bAgAAAABJRU5ErkJggg==);
    vertical-align: sub;
    padding-right: 3px;
}

@media screen and (max-width:480px) {
	#tw-timer {
	    font-size: 12px;
	}
}

.status {
    font-size: 95%;
}

.status #tw-actions{
	width: 100%;
	float: right;
}

.status #tw-actions > * {
    margin-left: 5px;
    margin-bottom: 3px
}

#tw-answers {
    clear: both;
}

#tw-answers ol.previous {
    margin: 0;
}

#tw-answers ol.previous li {
    float: left;
    width: 3em;
    list-style-position: inside;
    padding-left: 2em;
    font-weight: bold;
}

#tw-answers ol.previous .correct * { color: green; }

#tw-answers ol.previous .incorrect * { color: red; }

/* Hide previous answers on small screens */

@media screen and (max-width:480px) {
	#tw-answers ol.previous {
	    display: none;
	}	
}

footer {
    clear: both;
    margin-top: 1em;
    font-size: 85%;
}

/* === Quiz load page ====================================================== */

body.quiz-load #tw-proceed {
    opacity: 0;
}

body.quiz-load #tw-proceed.ready {
    opacity: 1;
}

/* === Slide styling ======================================================= */

#tw-slide-prev, #tw-slide-next {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    padding: 0 10px;
    font-size: 200%;
    line-height: 500%;
    text-align: left;
}

#tw-slide-prev.disabled, #tw-slide-next.disabled {
    display: none;
}

#tw-slide-prev:link, #tw-slide-next:link,
#tw-slide-prev:active, #tw-slide-next:active,
#tw-slide-prev:visited, #tw-slide-next:visited {
    text-decoration: none;
    color: #777;
}

#tw-slide-prev:hover, #tw-slide-next:hover {
    color: #300;
}

#tw-slide-next {
    left: auto;
    right: 0;
    text-align: right;
}

.slide-collection > * {
    display: none;
}

.slide-collection > *.selected {
    display: block;
}

.slide-content > * {
    position: relative;
    overflow: hidden;
}

.slide-content h2 {
    display: none;
}

.slide-content figure {
    width: 100%;
    margin: 0;
    text-align: center;
    cursor: pointer;
}

.slide-content figure > button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGSSURBVCjPVVFNSwJhEF78Ad79Cf6PvXQRsotUlzKICosuRYmR2RJR0KE6lBFFZVEbpFBSqKu2rum6llFS9HHI4iUhT153n6ZtIWMOM+/MM88z7wwH7s9Ub16SJcnbmrNcxVm2q7Z8/QPvEOtntpj92NkCqITLepEpjix7xQtiLOoQ2b6+E7YAN/5nfOEJ2WbKqOIOJ4bYVMEQx4LfBBQDsvFMhUcCVU1/CxVXmDBGA5ZETrhDCQVcYAPbyEJBhvrnBVPiSpNr6cYDNCQwo4zzU/ySckkgDYuNuVpI42T9k4gLKGMPs/xPzzovQiY2hQYe0jlJfyNNhTqiWDYBq/wBMcSRpnyPzu1oS7WtxjVBSthU1vgVksiQ3Dn6Gp5ah2YOKQo5GiuHPA6xT1EKpxQNCNYejgIR457KKio0S56YckjSa9jo//3mrj+BV0QQagqGTOo+Y7gZIf1puP3WHoLhEb2PjTlCTCWGXtbp8DCX3hZuOdaIc9A+aQvWk4ihq95p67a7nP+u+Ws+r0dql9z/zv0NCYhdCPKZ7oYAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: center;
}

.slide-content figure pre {
    text-align: left;
}

.slide-content figure svg,
.slide-content figure img {
    max-width: 100%;
}

.slide-content figure figcaption small {
    display: block
}

.slide-content figure pre.code-block {
    display: none;
}

.slide-content figure.show-code > * {
    display: none;
}

.slide-content figure.show-code pre.code-block,
.slide-content figure.show-code > button {
    display: block;
}

@media all and (min-width: 900px) {
    .slide-content figure {
        float: right;
        width: 50%;
    }

    .slide-content details summary {
        line-height: 2em;
        padding: 0 1em;
        cursor: pointer;
    }
}

/* === Chatbox ============================================================= */

.chatbox {
    display: block;
    width: 100%;
    height: 10em;
    overflow-y: scroll;
    margin:0 0 10px 0;
    padding: 6px;
    background-color: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    list-style-type: none;
}

.chatbox .author {
	color: #880000;
}

.chatbox .author.me {
	color: #000088;
}

.chatbox .author:before {
    content: "<";
}

.chatbox .author:after {
    content: "> ";
}

body {
    background-color: #f8f9fa;
}

h1 {
    text-align: center;
    margin: 0.5rem;
}

h1 img {
    max-width: 100%;
}

main > section {
    background-color: white;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    padding: 1rem;
    margin-bottom: 1rem;
}

/*# sourceMappingURL=index.min.css.mktmp.map */