135 lines
No EOL
5.6 KiB
CSS
135 lines
No EOL
5.6 KiB
CSS
@charset "UTF-8";
|
|
|
|
/** CSS-Reset **/
|
|
|
|
html{font-family:'Open Sans',sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
|
|
body{margin:0;background:#f7f5f2;color:#5e5c58;font:100%/1.6 'Open Sans',sans-serif;-webkit-animation:bugfix infinite 1s}
|
|
a:focus{outline:thin dotted}
|
|
a:active,a:hover{outline:0}
|
|
b,strong,.fwb{font-weight:bold}
|
|
dfn,.fsi{font-style:italic}
|
|
img{border:0}
|
|
h1,h2,h3{color:#103a3e}
|
|
h2{font-size:120%}
|
|
h3{font-size:100%}
|
|
ul,ol,nav{padding:0;list-style-type:none}
|
|
p{margin:0 0 16px;padding:0}
|
|
audio,canvas,video{display:inline-block}
|
|
audio:not([controls]){display:none;height:0}
|
|
[hidden]{display:none}
|
|
abbr[title]{border-bottom:.0625em dotted}
|
|
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
|
|
mark{background:#ff0;color:#000}
|
|
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
|
|
pre{white-space:pre-wrap}
|
|
q{quotes:"\201C" "\201D" "\2018" "\2019"}
|
|
small{font-size:80%}
|
|
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
|
|
sup{top:-.5em}
|
|
sub{bottom:-.25em}
|
|
svg:not(:root){overflow:hidden}
|
|
figure{margin:0}
|
|
fieldset{border:.0625em solid #c0c0c0;margin:0 .125em;padding:.35em .625em .75em}
|
|
legend{border:0;padding:0}
|
|
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
|
|
button,input{line-height:normal}
|
|
button,select{text-transform:none}
|
|
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
|
|
button[disabled],html input[disabled]{cursor:default}
|
|
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
|
|
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
|
|
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
|
|
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
|
|
textarea{overflow:auto;vertical-align:top}
|
|
table{border-collapse:collapse;border-spacing:0}
|
|
|
|
|
|
/** Initial **/
|
|
|
|
@-webkit-keyframes bugfix{from{padding:0}to{padding:0}}
|
|
|
|
.cf:before,.cf:after{display:table;content:""}
|
|
.cf:after{clear:both}
|
|
.cf{zoom:1}
|
|
.cb{clear:both}
|
|
|
|
.wrap{margin:0 5%;max-height:999999px;min-height:1px}
|
|
|
|
a{color:#50a4ab;text-decoration:none}
|
|
.fa{padding:0 10px 0 0}
|
|
.fwb{font-weight:700}
|
|
|
|
header{background:#0f373c;margin-bottom:1.1875em;position:fixed;width:100%;z-index:99}
|
|
header .fa{color:#5e9499}
|
|
|
|
header nav{z-index:99;margin:0 5%}
|
|
menu{display:none;opacity:0;position:absolute;margin:0;padding:0 0 15px;background:#0f373c;right:0;left:0}
|
|
menu li{display:block;margin:0 5%}
|
|
menu a,#profile{display:block;padding:15px 0;color:#fff}
|
|
|
|
#profile{float:right}
|
|
.circlenote{margin-left:15px;background:#bcd75e;border-radius:0.8em;display:inline-block;color:#0f373c;font-weight:bold;line-height:1.6em;text-align:center;width:1.6em;font-size:.8em}
|
|
|
|
#toggle,.toggle{display:none}
|
|
.toggle{display:inline-block;padding:15px 15px 15px 0;position:relative;cursor:pointer;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
|
|
#toggle:checked ~ menu{display:block;opacity:1}
|
|
#navicon{display:block;color:#fff}
|
|
|
|
article{padding:70px 0 30px}
|
|
|
|
.breadcrumbs li{display:block;font-size:.875em}
|
|
.breadcrumbs .fa{padding-right:5px;font-size:.75em}
|
|
|
|
.questgroups li{margin:0 0 25px 0;border-radius:3px;overflow:hidden}
|
|
.questgroups img{display:block}
|
|
.questgroups section{padding:20px;background:#fff}
|
|
|
|
.qg li{margin-left:10px;padding:0 0 25px 30px;border:2px solid #dbd9d5;border-width:0 0 0 2px}
|
|
.qgicon{margin:17px 0 0 -39px;background:#f7f5f2;font-size:1.25em;float:left}
|
|
.qgicon.locked{margin-top:-2px}
|
|
.qgtitle a{background:#5cb6bd;border-radius:3px 3px 0 0;display:block;padding:20px;color:#fff;font-weight:700}
|
|
.qgprogress,.qghidden{margin-bottom:4px;padding:20px 20px 4px 20px;background:#fff;border-radius:0 0 3px 3px}
|
|
|
|
.qglist li{margin: 0 0 5px 0}
|
|
.qglist .qgtitle a{padding:14px;border-radius:3px}
|
|
.qglist .qgtitle .solved{background:#fff;color:#50a4ab}
|
|
.qglist .qgtitle .solved .fa{color:#bcd75e}
|
|
.qglist .qgtitle .bonus{background:#f5821f}
|
|
|
|
.xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}
|
|
.xpbar span{display:block;height:100%;border-radius:20px;background:#bcd75e;position:relative;overflow:hidden}
|
|
.xpnumeric{float:right;color:#869845}
|
|
|
|
.cta,input[type="submit"]{display:inline-block;margin-top:10px;color:#fff;font-weight:700;padding:7px 20px;border-radius:4px}
|
|
.orange,input[type="submit"]{text-shadow:1px 2px #d4701a;background:#f5821f;border:solid #d4701a;border-width:0 0 3px 0}
|
|
input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;border-color:#d48c4e}
|
|
|
|
.qtextbox{font-size:0.875em;background:#fff;height:200px;padding:0 20px;margin:0;border:20px solid #fff;border-width:20px 0 10px;border-radius:3px 3px 0 0;overflow-y:scroll;-webkit-overflow-scrolling:touch}
|
|
.qtexticon{background:#fff;background:linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(247,245,242,1) 100%);padding-bottom:5px;border-radius:0 0 3px 3px;text-align:center}
|
|
|
|
/** Media Queries **/
|
|
|
|
@media only screen and (min-width:480px){
|
|
.questgroups li{width:48%;float:left}
|
|
.questgroups li:nth-child(even){float:right}
|
|
}
|
|
|
|
@media only screen and (min-width:768px){
|
|
|
|
}
|
|
|
|
@media only screen and (min-width:1024px){
|
|
header{position:fixed;left:0;top:0;bottom:0;width:300px;margin:0}
|
|
header nav{margin:0 10%}
|
|
menu{display:block;opacity:1;position:relative}
|
|
menu a{padding:10px 0}
|
|
#profile{float:none;margin:30px 0 15px 12px}
|
|
#toggle,.toggle{display:none}
|
|
.wrap{margin:0 20px 0 340px}
|
|
article{padding-top:20px}
|
|
.breadcrumbs li{display:inline;padding-right:10px}
|
|
}
|
|
|
|
@media only screen and (min-width:1200px){
|
|
.wrap{width:860px;max-width:860px}
|
|
} |