@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%;margin-top:30px}
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:1px 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:87.5%}
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}
a:hover{color:#5bbac2}
.fa{padding:0 10px 0 0}
.fwb{font-weight:700}

header{background:#0f373c;margin-bottom:19px;position:fixed;width:100%;z-index:99}
header nav{z-index:99;margin:0 5%}

header .fa{color:#5e9499}
header a:hover .fa{color:#7fb0b4}

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:#d9e5e7}
menu a:hover,#profile:hover{color:#fff}

menu .active{color:#fff}
menu .active .fa,.crewards .unlocked .fa{color:#bcd75e}

menu .smnry{font-size:0.875em;padding:8px 0 8px 12px;background:#0c2e32;border-bottom:2px solid #0f373c;border-radius:3px}

#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:#d9e5e7}

article{padding:70px 0 30px}
aside{display:none}

.moodpic{margin:-15px -5.5% 0 -5.5%;overflow:hidden}
.moodpic img{width:100vw}

.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;width:100%;}
.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}

#qtextbox{font-size:.875em;border-radius:5px;background:#fff;border:15px solid #fff;height:200px;overflow:hidden}
.qtext{padding-right:15px}
.qtext img{float:right;margin-left:15px;max-width:30%;border-radius:3px}

.xpinfo{display:none}
.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}
.orange:hover,input[type="submit"]:hover{color:#fff;background:#f09140}

input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;border-color:#d48c4e}


/** Character Profile **/

.cportrait img{width:100%}

.cdata{display:inline-block;background:#fff;border-radius:3px;padding:12px 20px 0 20px;margin-bottom:5px}
.cdata.square{text-align:center;width:10%;padding-top:0}
.cdata.square.blue{background:#5cb6bd;color:#fff}
.cdata .xpbar,.ctopics .xpbar{width:100%}
.cdata .value{font-size:1.5em;margin:0;padding-top:8px}

.crewards li{background:#fff;margin-bottom:5px;padding:15px 15px 1px 15px;border-radius:3px;font-size:.875em}
.crewards li:last{margin-bottom:0}
.crewards li .fa{font-size:1.25em}
.crewards .locked{color:#aca8a1;padding:10px;}

.cgroups img{float:left;border-radius:3px;margin-right:5px;height:35px}
.cgroups p{float:left;0;padding:0 12px;line-height:35px;background:#fff;border-radius:0 3px 3px 0}
.cgroups a{float:left;padding:0 12px;line-height:35px;background:#50a4ab;color:#fff;background:#50a4ab;border-radius:3px 0 0 3px}

.cranks li{clear:both;padding:8px 0 8px 8px;border-radius:3px}
.cranks li:nth-child(odd){background:#fff}
.cranks img{float:left;margin-right:15px;width:50px;height:50px;border-radius:25px}
.cranks p,.ctopics p{margin:0;padding:0}

.ctopics .xpbar{background:#e4e1dd}
.ctopics .xpbar span{background:#50a4ab}


/** Charactergroup Profile **/

.gdata{margin-top:20px}
.gdata img{border-radius:3px;margin-bottom:15px}
.gdata h1{margin:0;padding:0}
.gdata .fa{color:#aca8a1}

.gchars li{background:#fff;padding:15px 0;border-radius:3px;float:left;margin-bottom:5px;width:49%}
.gchars li:nth-child(even){float:right}
.gchars img{width:50px;height:50px;border-radius:25px}
.gchars p{margin:0;padding:0;text-align:center}
.gchars .fa{position:absolute;margin:-10px 0 0}

.gquests li{padding:12px 15px 0 15px;border-radius:3px}
.gquests li:nth-child(odd){background:#fff}
.gquests .date{color:#aca8a1;display:block}
.gquests .xp{display:block}


/** Quest Types **/

.crossword table{width:100%;max-width:800px;border-spacing:2px;border-collapse:separate}
.crossword td{background:#d7d4cf;padding:1px}
.crossword input[type=text]{text-align:center;height:26px;width:100%;min-width:8px;max-width:40px;margin:0;padding:0;border:none;text-transform:uppercase}
.crossword ol{list-style-type:decimal;margin-left:25px}
.crossword li{margin-top:20px}
.crossword .index{position:absolute;font-size:0.625em;margin:-2px 0 0 2px}

.opponent{width:50%;float:left}
.opponent .portrait{height:250px;overflow:hidden;margin-bottom:15px}
.opponent .hero{background:#fff;max-width:130px}
.opponent .boss{max-width:100%}
.opponent p{text-align:center}
.opponent .fa{font-size:1.25em;color:#c7135b;padding-right:0}


/** Media Queries **/

@media only screen and (min-width:480px){
.questgroups li,.ctopics li,.fll48{width:48%;float:left}
.questgroups li:nth-child(even),.ctopics li:nth-child(even),.flr48{width:48%;float:right}
.xpinfo{display:inline-block;float:left;padding-right:20px}
.xpbar{width:50%}

.cinfo{float:left;width:70%}
.cportrait{float:right;width:25%}

.gdata .gbanner{float:left;min-width:100px}
.gdata .gdesc{float:left;width:75%}
.gdata ul{clear:both}
.gchars li{width:32%;margin-right:5px}
.gchars li:nth-child(even){float:left}

.opponent .hero{max-width:200px}
}

@media only screen and (min-width:768px){
.xpbar{width:70%}

.gdata{margin-top:40px}
.gdata .gdesc{width:60%}
.gdata li{font-size:.875em;padding-bottom:5px}
.gdata ul{clear:none;float:right;width:20%;margin:0;padding:0}
.gchars li{width:19%}

.gquests .date{display:inline;margin-right:15px}
.gquests .xp{float:right}
}

@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 0 0 300px}
article{padding:20px 40px 80px 40px}
.moodpic{margin:-20px -40px}
.breadcrumbs li{display:inline;padding-right:10px}

.gchars li{width:19%}
}

@media only screen and (min-width:1366px){
html{overflow-y:scroll;height:100%}
body{background:#eae8e4;height:100%}
.wrap{width:800px;max-width:800px;height:auto !important;min-height:100%;height:100%;position:relative;overflow:hidden}
article{background:#f7f5f2;float:left}
.moodpic{margin:-20px 0 0 -40px;width:880px;height:230px}
.moodpic img{width:100%}
}

@media only screen and (min-width:1600px){
aside{display:block;float:left;width:350px;min-width:350px;margin:0 0 0 40px}
aside section{margin:20px 0 40px 0}
aside .char{width:120px;float:left;margin-right:10px}
aside .charstats{background:#f7f5f2;border-radius:3px;padding:10px 0;margin-top:50px}
aside .charstats li{font-size:.875em;padding:2px 0}
aside .cranks li:nth-child(odd){background:#f7f5f2}
}