/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.button {
display: inline-block;
margin: 0.5em 0;
border: 0;
border-radius: 0.5rem;
background-color: hsl(260, 60%, 60%);
cursor: pointer;
padding: 1em 1.25em;
color: hsl(0, 100%, 100%);
font-size: 0.8rem;
font-weight: bold;
/* USER BUTTON STATES */
}
.button:focus {
outline: none;
}
.button {
/* DATA BUTTON STATES */
}
.button.white {
background-color: hsl(0, 100%, 100%);
color: hsl(260, 60%, 60%);
}
.button.pass {
background-color: hsl(144, 45%, 36%);
}
.button.fail {
background-color: hsl(38, 100%, 55%);
}
.button:disabled {
box-shadow: none;
}
.button.transparent {
background-color: transparent;
}
.button.large {
border-radius: 0.25rem;
font-size: 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0.75rem 1.25rem 0.8125rem;
}
.button.icon-right img {
height: 1.25rem;
margin-bottom: -0.25rem;
margin-left: 0.5rem;
margin-right: -0.25rem;
}
.forms-close-button {
padding: 0;
position: absolute;
top: 0.5rem;
right: 0.5rem;
border-radius: 1rem;
background-color: hsla(0, 0%, 0%, 0.1);
cursor: pointer;
width: 2rem;
height: 2rem;
text-align: center;
line-height: 2rem;
}
.forms-close-button img {
padding-top: 0.5rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.row label {
font-weight: 500;
}
.input {
transition: all 0.5s ease;
margin-bottom: 0.75rem;
border: 1px solid hsla(0, 0%, 0%, 0.1);
border-radius: 5px;
background-color: hsl(0, 0%, 98%);
padding: 0 1rem;
height: 3rem;
color: #fff;
font-size: 0.875rem;
}
.input:focus {
transition: all 0.5s ease;
outline: none;
border: 1px solid hsl(260, 60%, 60%);
}
.input.fail {
border: 1px solid hsl(20, 100%, 40%);
}
.input.pass {
border: 1px solid hsl(144, 45%, 36%);
}
.input {
/* IE10/11-specific style resets */
}
.input::-ms-reveal, .input::-ms-clear {
display: none;
}
/*
* Styles for the Row component used by formsy-react-components
* Should be imported for each component that extends one of
* the formsy-react-components
*/
.row .required-symbol {
display: none;
}
.row label {
display: inline-block;
margin-bottom: 0.75rem;
}
.row.no-label label {
display: none;
}
/* allow elements such as validation errors to position relative to this row */
.row-with-tooltip {
position: relative;
}
.row-label {
margin-bottom: 0.75rem;
line-height: 1.7rem;
}
.row-inline {
display: flex;
}
/* override margin-bottom so placing a label next to a radio button does not
mess up vertical alignment */
.row-inline label {
margin-bottom: 0;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.dropdown {
display: none;
position: absolute;
right: 0;
border: 1px solid hsla(0, 0%, 0%, 0.1);
border-radius: 0 0 5px 5px;
background-color: hsl(260, 60%, 60%);
padding: 10px;
min-width: 9rem;
max-width: 16.25rem;
overflow: visible;
color: hsl(0, 100%, 100%);
font-size: 0.8125rem;
font-weight: normal;
}
.dropdown.open {
display: block;
}
.dropdown a:link, .dropdown a:visited, .dropdown a:active {
background-color: transparent;
color: hsl(0, 100%, 100%);
}
.dropdown input {
margin-bottom: 12px;
width: calc(100% - 30px);
}
.dropdown label {
display: block;
margin-bottom: 5px;
}
.dropdown > li {
display: block;
line-height: 30px;
}
.dropdown > li.divider {
margin-top: 10px;
border-top: 1px solid hsla(0, 0%, 0%, 0.1);
}
.dropdown > li a {
display: block;
padding: 0 10px;
}
.dropdown > li a:hover {
background-color: hsla(0, 0%, 0%, 0.1);
text-decoration: none;
}
.dropdown.with-arrow {
margin-top: 14px;
border-radius: 5px;
overflow: visible;
}
.dropdown.with-arrow:before {
display: block;
position: absolute;
top: -7px;
right: 10%;
transform: rotate(45deg);
border-top: 1px solid hsla(0, 0%, 0%, 0.1);
border-left: 1px solid hsla(0, 0%, 0%, 0.1);
border-radius: 5px;
background-color: hsl(260, 60%, 60%);
width: 14px;
height: 14px;
content: "";
}
.studio-status-icon-spinner {
/* This class can be used on an icon that should spin.
It first plays the intro animation, then spins forever. */
animation-name: intro, spin;
animation-duration: 0.25s, 1s;
animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
animation-delay: 0s, 0.25s;
animation-iteration-count: 1, infinite;
animation-direction: normal;
width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */
height: 1.4rem;
transform-origin: center;
}
@keyframes intro {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(359deg);
}
}
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.flex-row.column {
flex-direction: column;
justify-content: center;
}
.flex-row.uneven {
align-items: flex-start;
}
.flex-row.uneven .short {
width: 13.75em;
}
.flex-row.uneven .long {
width: 38.75em;
text-align: left;
}
@media only screen and (max-width : 767px) {
.flex-row {
flex-direction: column;
}
.flex-row.uneven .short,
.flex-row.uneven .long {
margin: auto;
width: 90%;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.login {
padding: 10px;
width: 200px;
line-height: 1.5rem;
white-space: normal;
color: hsl(0, 100%, 100%);
font-size: 0.8125rem;
}
.login .button {
padding: 0.75em;
}
.login .row {
margin-bottom: 1.25rem;
}
.login .input {
margin-bottom: 12px;
width: calc(100% - 30px);
height: 2.25rem;
}
.login label {
padding-top: 5px;
font-weight: bold;
}
.login .spinner {
margin: 0 0.8rem;
width: 1rem;
vertical-align: middle;
}
.login .submit-row {
justify-content: space-between;
flex-direction: row;
}
.login .submit-button {
margin-top: 5px;
}
.login a {
margin: auto 0;
color: hsl(0, 100%, 100%);
}
.login a:link, .login a:visited, .login a:active {
color: hsl(0, 100%, 100%);
}
.login a:hover {
background-color: transparent;
}
.login .error {
border: 1px solid hsla(0, 0%, 0%, 0.2);
border-radius: 5px;
background-color: hsl(38, 100%, 55%);
padding: 0.75em 1em;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.overflow-hidden {
/* to avoid double scroll bars this
gets added to body while modal is open */
overflow: hidden;
}
.modal-content {
position: relative;
margin: 3.75rem auto;
border-radius: 1rem;
box-shadow: 0 0 0 4px hsla(0, 100%, 100%, 0.15);
background-color: hsl(0, 100%, 100%);
padding: 0;
width: 48.75rem;
}
.modal-content:focus {
outline: none;
}
@media only screen and (max-width : 941px) {
.modal-content {
margin-top: 0;
width: 100%;
overflow: auto;
}
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
.modal-content {
border-radius: 0;
box-shadow: none;
height: 100%;
}
}
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 510;
background-color: hsla(215, 100%, 65%, 0.7);
}
.modal-content-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
border-radius: 1rem;
background-color: hsla(0, 0%, 0%, 0.2);
cursor: pointer;
width: 2rem;
height: 2rem;
text-align: center;
line-height: 2rem;
}
.modal-content-close-img {
padding-top: 0.5rem;
}
/* Close button, Submit button, etc. */
.action-buttons {
display: flex;
margin: 1.125rem 0.8275rem 0.9375rem 0.8275rem;
line-height: 1.5rem;
justify-content: flex-end !important;
align-items: flex-start;
flex-wrap: nowrap;
}
@media only screen and (max-width : 941px) {
.action-buttons {
justify-content: center !important;
flex-direction: row !important;
}
}
/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
margin-bottom: 0.9375rem;
}
/* For action button row where left/right margin is handled by parent element */
.action-buttons.action-buttons-no-inset {
margin-left: 0;
margin-right: 0;
}
.action-button {
margin: 0 0 0 0.54625rem;
border-radius: 0.25rem;
padding: 6px 1.25rem 14px 1.25rem;
height: 36px;
}
.action-button.close-button {
border: 1px solid hsla(0, 0%, 0%, 0.1);
}
.action-button-text {
display: flex;
}
.action-button.disabled {
background-color: hsla(0, 0%, 0%, 0.2);
}
.error-text {
display: block;
border: 1px solid hsla(0, 0%, 0%, 0.1);
border-radius: 5px;
background-color: hsl(38, 100%, 55%);
padding: 1rem;
min-height: 1rem;
overflow: visible;
color: hsl(0, 100%, 100%);
}
.modal-sizes * {
box-sizing: border-box;
}
.modal-sizes {
margin: 100px auto;
outline: none;
padding: 0;
max-width: 36.25rem; /* 580px; */
user-select: none;
}
@media only screen and (min-width : 480px) and (max-width : 767px), only screen and (min-height : 480px) and (max-height : 767px) {
.modal-sizes {
margin: 40px auto;
}
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
.modal-sizes {
margin: 0 auto;
width: auto;
}
}
.modal-sizes .modal-header {
padding-top: 0.75rem;
width: 100%;
height: 3rem;
}
@media only screen and (max-width : 479px), only screen and (max-height : 479px) {
.modal-sizes .modal-header {
border-radius: 0;
}
}
.modal-sizes .modal-content {
font-size: 0.875rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
#navigation {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
box-shadow: 0 0 3px hsla(0, 0%, 0%, 0.25);
background-color: #9eff9e;
width: 100%;
/* NOTE: Height should match offset settings in main.scss file */
height: 50px;
}
.ie9 #navigation {
display: table;
table-layout: fixed;
}
#navigation .inner > ul {
display: flex;
margin: 0;
padding: 0;
height: 50px;
list-style: none;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
}
.ie9 #navigation .inner > ul {
display: table-row;
}
#navigation .inner > ul > li {
display: inline-block;
position: relative;
float: left;
margin: 0;
height: 100%;
align-self: flex-start;
}
#navigation .inner > ul > li.right {
float: right;
margin-left: auto;
align-self: flex-end;
}
.ie9 #navigation .inner > ul > li.right {
float: none;
}
#navigation .inner > ul > li.right a:hover {
background-color: hsla(0, 0%, 0%, 0.1);
}
.ie9 #navigation .inner > ul > li {
display: table-cell;
float: none;
height: 50px;
vertical-align: bottom;
}
#navigation .link > a {
display: block;
padding: 13px 15px 4px 15px;
height: 33px;
text-decoration: none;
white-space: nowrap;
color: #000;
font-size: 0.85rem;
font-weight: bold;
}
#navigation .link > a:hover {
background-color: hsla(0, 0%, 0%, 0.1);
}
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.modal-content-iframe {
border: 0;
}
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.modal-content.mod-registration {
width: 38.125rem;
overflow: hidden;
}
.modal-content-iframe.mod-registration {
width: 38.125rem;
min-height: 27.375rem;
}
.modal-content.recaptcha-open {
min-height: 500px;
}
.modal-content-iframe.recaptcha-open {
min-height: 500px;
}
@media only screen and (max-width : 941px) {
.modal-content.mod-registration {
width: 100%;
overflow: scroll;
}
.modal-content-iframe.mod-registration {
height: 27.375rem;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.account-nav .user-info {
display: inline-block;
padding: 14px 15px 4px 15px;
max-width: 260px;
height: 33px;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(0, 100%, 100%);
font-size: 0.8125rem;
font-weight: normal;
}
.account-nav .user-info .avatar {
margin-right: 10px;
border-radius: 3px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.account-nav .user-info:hover {
background-color: hsla(0, 0%, 0%, 0.1);
}
.account-nav .user-info.open {
background-color: hsla(0, 0%, 0%, 0.1);
}
.account-nav .user-info:after {
display: inline-block;
margin-left: 8px;
background-image: url("/images/dropdown.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 50%;
width: 20px;
height: 20px;
vertical-align: middle;
content: " ";
}
.account-nav .dropdown {
top: 50px;
padding: 0;
padding-top: 5px;
width: 100%;
box-sizing: border-box;
}
@media only screen and (max-width : 479px) {
.account-nav {
margin-left: 0;
}
.account-nav .user-info .avatar {
margin-right: 0;
}
.account-nav .user-info:after {
display: none;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
.account-nav {
margin-left: 0;
}
.account-nav .user-info .avatar {
margin-right: 0;
}
.account-nav .user-info:after {
display: none;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
.account-nav {
margin-left: 0;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
#navigation .logo {
margin-right: 10px;
}
#navigation .logo a {
display: block;
transition: 0.15s ease all;
margin: 0 6px 0 0;
border: 0;
background-image: url("/images/logo_sm.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 95%;
width: 81px;
height: 50px;
}
#navigation .logo a:hover {
transition: 0.15s ease all;
background-size: 100%;
}
#navigation .inner > ul > li.search {
margin: 0 20px;
border-right: 0;
color: hsl(0, 100%, 100%);
flex-grow: 3;
}
.ie9 #navigation .inner > ul > li.search {
width: 100%;
}
#navigation .inner > ul > li.search .form {
margin: 0;
}
#navigation .inner > ul > li.search .row .help-block {
display: none;
}
#navigation .inner > ul > li.search .input,
#navigation .inner > ul > li.search .button {
display: inline-block;
margin-top: 5px;
outline: none;
border: 0;
background-color: hsla(0, 0%, 0%, 0.1);
height: 14px;
}
#navigation .inner > ul > li.search .input[type=text],
#navigation .inner > ul > li.search .button[type=text] {
transition: 0.15s ease background-color;
padding: 0;
padding-right: 10px;
padding-left: 40px;
width: calc(100% - 50px);
height: 40px;
color: hsl(0, 100%, 100%);
font-size: 0.85em;
}
#navigation .inner > ul > li.search .input[type=text]::placeholder,
#navigation .inner > ul > li.search .button[type=text]::placeholder {
color: rgba(255, 255, 255, 0.75);
}
#navigation .inner > ul > li.search .input[type=text]:focus,
#navigation .inner > ul > li.search .button[type=text]:focus {
transition: 0.15s ease background-color;
background-color: hsla(0, 0%, 0%, 0.2);
}
.ie9 #navigation .inner > ul > li.search .input[type=text],
.ie9 #navigation .inner > ul > li.search .button[type=text] {
width: 70px;
}
#navigation .inner > ul > li.search .btn-search {
position: absolute;
box-shadow: none;
background-color: transparent;
background-image: url("/images/nav-search-glass.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 14px 14px;
width: 40px;
height: 40px;
}
#navigation .inner > ul > li.search .btn-search:hover {
box-shadow: none;
}
#navigation .messages > a,
#navigation .mystuff > a {
background-repeat: no-repeat;
background-position: center center;
background-size: 45%;
padding-right: 10px;
padding-left: 10px;
width: 30px;
overflow: hidden;
text-indent: 50px;
white-space: nowrap;
}
#navigation .messages > a:hover,
#navigation .mystuff > a:hover {
background-size: 50%;
}
#navigation .messages > a {
background-image: url("/images/nav-notifications.png");
}
#navigation .messages .message-count {
display: none;
}
#navigation .messages .message-count.show {
display: block;
position: absolute;
top: 0.5rem;
right: 0.25rem;
border-radius: 1rem;
background-color: hsl(38, 100%, 55%);
padding: 0 0.25rem;
text-indent: 0;
line-height: 1rem;
color: hsl(0, 100%, 100%);
font-size: 0.7rem;
font-weight: bold;
}
#navigation .mystuff > a {
background-image: url("/images/mystuff.png");
}
@media only screen and (max-width : 479px) {
#navigation .inner {
width: 18.75em;
}
#navigation .inner > ul > li.login-item {
margin-left: 0;
}
#navigation .inner .create,
#navigation .inner .discuss,
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .help,
#navigation .inner .mystuff,
#navigation .inner .profile-name {
display: none;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#navigation .inner {
width: 28.75em;
}
#navigation .inner > ul > li.login-item {
margin-left: 0;
}
#navigation .inner .discuss,
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .mystuff,
#navigation .inner .profile-name {
display: none;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#navigation .inner {
width: 38.75em;
}
#navigation .inner > ul > li.login-item {
margin-left: 0;
}
#navigation .inner .explore,
#navigation .inner .search,
#navigation .inner .mystuff {
display: none;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
#footer {
display: block;
background-color: #222;
padding: 10px 0;
color: #fff;
font-size: 0.85rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.select label {
font-weight: 500;
}
.select select {
transition: border 0.5s ease;
margin-bottom: 0.75rem;
border: 1px solid hsla(0, 0%, 0%, 0.1);
border-radius: 5px;
background: hsl(0, 0%, 98%) url("/svgs/forms/caret.svg") no-repeat right center;
padding-right: 4rem;
padding-left: 1rem;
width: 100%;
height: 3rem;
color: #fff;
font-size: 0.875rem;
appearance: none;
-webkit-appearance: none; /* added to fix dropdown appearance on safari */
}
.select select::-ms-expand {
display: none;
}
.select select::-ms-value {
background-color: inherit;
padding-left: 1rem;
color: inherit;
}
.select select:focus {
outline: none;
border: 1px solid hsl(260, 60%, 60%);
}
.select select:-moz-focusring {
text-shadow: 0 0 0 #fff;
color: transparent;
}
.select select:focus, .select select:hover {
background: hsl(0, 0%, 98%) url("/svgs/forms/caret-hover.svg") no-repeat right center;
}
.select select > option {
background-color: hsl(0, 100%, 100%);
width: 100%;
}
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.language-chooser .select select {
width: 13.75rem;
/* 3 columns */
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
#footer .lists {
display: flex;
text-align: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
#footer .lists dl {
display: inline-block;
vertical-align: top;
text-align: left;
font-size: 0.8rem;
}
#footer .lists dt {
display: block;
margin-bottom: 8px;
}
#footer .lists dd {
display: block;
margin: 5px 0;
line-height: 1.2rem;
}
#footer .lists dd a {
font-weight: 400;
}
#footer .copyright {
display: block;
width: 100%;
text-align: center;
}
#footer .copyright p {
font-size: 0.7rem;
}
#footer .language-chooser {
text-align: center;
}
.crash-container {
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
}
@media only screen and (max-width : 479px) {
.crash-container #view {
text-align: center;
}
.crash-container .inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
.crash-container #view {
text-align: center;
}
.crash-container .inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
.crash-container #view {
text-align: center;
}
.crash-container .inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.crash-container .inner {
margin: 0 auto;
width: 942px;
}
}
.crash-container {
margin: 3rem auto;
border: 1px solid #111;
border-radius: 10px;
background-color: #000;
width: 60%;
overflow: hidden;
text-align: center;
}
.crash-container img {
width: 100%;
}
.crash-container .crash-message {
margin: 2rem;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.title-banner {
transition: background-image 0.5s ease, background-color 0.5s ease;
margin-bottom: 40px;
background-color: hsl(144, 45%, 36%);
background-position: center;
background-size: cover;
padding: 20px 0;
width: 100%;
}
.title-banner-h1,
.title-banner-p {
margin: 0 auto;
padding: 5px 0;
text-align: center;
color: hsl(0, 100%, 100%);
}
.title-banner-p {
max-width: 500px;
}
.title-banner-strong {
font-weight: 700;
}
.title-banner.mod-blue-bg {
background-color: hsl(215, 100%, 65%);
}
.title-banner.mod-blue-bg a {
color: hsl(0, 100%, 100%);
}
.title-banner.mod-blue-bg a.mod-underline {
text-decoration: underline;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.privacy-aside {
position: sticky;
}
.privacy-banner {
display: flex;
z-index: 8;
background-color: hsl(260, 46%, 54%);
padding: 0;
overflow: hidden;
align-items: center;
justify-content: center;
margin-bottom: -50px;
margin-top: 50px;
}
.privacy-banner .privacy-banner-container {
display: flex;
margin: 0.375rem auto;
align-items: center;
}
.privacy-banner .privacy-banner-container .lightbulb-icon {
margin: 0.6875rem;
width: 1.75rem;
height: 1.75rem;
}
.privacy-banner .privacy-banner-container .privacy-banner-centered {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.privacy-banner .privacy-banner-container .privacy-banner-text {
text-align: left;
color: hsl(0, 100%, 100%);
font-size: 1rem;
font-weight: bold;
margin-right: 1rem;
max-width: 70vw;
}
.privacy-banner .privacy-close-button {
right: 1rem;
top: auto;
}
.privacy-banner a {
color: hsl(0, 100%, 100%);
text-decoration: underline;
}
@media only screen and (max-width: 640px) {
.privacy-banner .privacy-banner-container .privacy-banner-centered {
flex-wrap: wrap;
}
.privacy-banner .privacy-banner-container .lightbulb-icon {
padding-bottom: 2rem;
}
.privacy-banner .privacy-banner-container {
margin-left: 0;
margin-bottom: 1rem;
}
.privacy-banner .donate-close-button {
top: 1rem;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.admin-panel {
position: fixed;
top: 0;
left: 0;
z-index: 99;
border: 1px solid hsl(0, 0%, 95%);
box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.25);
background-color: hsl(0, 0%, 95%);
padding: 1rem;
width: 230px;
height: 100%;
overflow: scroll;
text-shadow: none;
}
.admin-panel.collapsed {
width: 10px;
}
.admin-panel .toggle {
float: right;
cursor: pointer;
}
.admin-panel .button-row {
display: flex;
font-size: small;
align-items: center;
justify-content: space-between;
}
.admin-panel .button-row .button {
padding: 0.5rem 1rem;
}
.admin-panel .button-row .button.inprogress {
background-color: hsl(0, 0%, 70%);
color: #fff;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.box {
display: inline-block;
border: 1px solid #111;
border-radius: 10px 10px 0 0;
}
@media only screen and (max-width : 479px) {
.box {
width: 18.75em;
}
.box .box-header h4,
.box .box-header h5 {
line-height: 0.9rem;
font-size: 0.9rem;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
.box {
width: 28.75em;
}
.box .box-header h4,
.box .box-header h5 {
line-height: 1rem;
font-size: 1rem;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
.box {
width: 38.75em;
}
.box .box-header h4,
.box .box-header h5 {
line-height: 1.1rem;
font-size: 1.1rem;
}
}
@media only screen and (min-width : 942px) {
.box {
width: 58.75em;
}
.box .box-header h4,
.box .box-header h5 {
line-height: 1.1rem;
font-size: 1.1rem;
}
}
.box {
background-color: #000;
width: 100%;
}
.box .box-header {
display: block;
clear: both;
margin: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #111;
border-radius: 10px 10px 0 0;
background-color: #222;
padding: 8px 20px;
height: 20px;
overflow: hidden;
}
.box .box-header h4,
.box .box-header h5 {
display: inline-block;
float: left;
}
.box .box-header h5 {
margin: 0;
padding-left: 5px;
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.box .box-header p {
display: inline-block;
float: right;
margin: 1px 0 0 0;
padding: 0;
font-size: 0.85rem;
}
.box .box-content {
display: block;
clear: both;
background-color: #333;
padding: 8px 20px;
}
.box .empty {
margin-top: 20px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.thumbnail {
position: relative;
}
.thumbnail .thumbnail-image {
display: block;
}
.thumbnail .thumbnail-image img {
margin-bottom: 2px;
border: 1px solid #111;
}
.thumbnail .thumbnail-title,
.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
line-height: 1.2em;
white-space: nowrap;
word-wrap: break-word;
}
.thumbnail .thumbnail-title {
margin-bottom: 1px;
font-size: 0.923em;
font-weight: 800;
}
.thumbnail .thumbnail-title a {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
font-size: 0.8462em;
}
.thumbnail .thumbnail-creator a, .thumbnail .thumbnail-loves a, .thumbnail .thumbnail-favorites a, .thumbnail .thumbnail-remixes a, .thumbnail .thumbnail-views a {
display: inline;
}
.thumbnail .thumbnail-loves,
.thumbnail .thumbnail-favorites,
.thumbnail .thumbnail-remixes,
.thumbnail .thumbnail-views {
display: inline;
margin-right: 10px;
}
.thumbnail .thumbnail-loves:before,
.thumbnail .thumbnail-favorites:before,
.thumbnail .thumbnail-remixes:before,
.thumbnail .thumbnail-views:before {
display: inline-block;
margin-right: 0.1rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 0.93rem;
height: 0.93rem;
vertical-align: text-top;
content: "";
}
.thumbnail .thumbnail-loves:before {
background-image: url("/svgs/love/love_type-gray.svg");
}
.thumbnail .thumbnail-favorites:before {
background-image: url("/svgs/favorite/favorite_type-gray.svg");
}
.thumbnail .thumbnail-remixes:before {
background-image: url("/svgs/remix/remix_type-gray.svg");
}
.thumbnail .thumbnail-views:before {
background-image: url("/svgs/view/view_type-gray.svg");
}
.thumbnail.project {
width: 144px;
}
.thumbnail.project .thumbnail-image img {
width: 144px;
height: 108px;
}
.thumbnail.gallery {
width: 170px;
}
.thumbnail.gallery img {
width: 170px;
height: 100px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.thumbnail-remove-button {
position: absolute;
top: -4px;
right: -4px;
background: hsl(0, 100%, 100%);
border: 1px solid #111;
color: #fff;
font-size: 12px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
cursor: pointer;
z-index: 2;
}
.thumbnail-remove-button:hover {
background: #111;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
}
[dir=rtl] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
@charset "UTF-8";
/* Slider */
.slick-loading .slick-list {
background: #fff url("./ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url("./fonts/slick.eot");
src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir=rtl] .slick-prev {
left: auto;
right: -25px;
}
.slick-prev:before {
content: "←";
}
[dir=rtl] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir=rtl] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir=rtl] .slick-next:before {
content: "←";
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.carousel {
margin-bottom: 0;
padding: 12px 45px;
}
.box-content .carousel {
padding: 12px 25px;
}
.carousel .slick-next,
.carousel .slick-prev {
margin-top: -20px;
width: 40px;
height: 40px;
}
.carousel .slick-next:before,
.carousel .slick-prev:before {
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
width: 40px;
height: 40px;
font-size: 40px;
content: "";
}
.carousel .slick-next.slick-disabled:before,
.carousel .slick-prev.slick-disabled:before {
opacity: 1;
}
.carousel .slick-prev {
left: 0;
}
.carousel .slick-prev:before {
background-image: url("/svgs/carousel/prev_ui-dark-gray.svg");
}
.carousel .slick-prev:before:hover {
background-image: url("/svgs/carousel/prev_ui-blue.svg");
background-size: 90%;
}
.box-content .carousel .slick-prev {
left: -20px;
}
.carousel .slick-next {
right: 0;
}
.carousel .slick-next:before {
background-image: url("/svgs/carousel/next_ui-dark-gray.svg");
}
.carousel .slick-next:before:hover {
background-image: url("/svgs/carousel/next_ui-blue.svg");
background-size: 90%;
}
.box-content .carousel .slick-next {
right: -20px;
}
.carousel .slick-slide {
padding-right: 30px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.banner {
position: sticky;
top: 50px;
z-index: 9;
box-shadow: 0 1px 1px hsl(0, 0%, 70%);
background-color: hsl(38, 100%, 55%);
width: 100%;
overflow: hidden;
text-align: center;
line-height: 50px;
}
.banner,
.banner a {
color: hsl(0, 100%, 100%);
}
.banner a {
text-decoration: underline;
}
.banner .close {
float: right;
margin-top: 12.5px;
border-radius: 12.5px;
background-color: hsla(0, 0%, 0%, 0.25);
width: 25px;
height: 25px;
text-decoration: none;
text-shadow: none;
line-height: 25px;
color: hsl(0, 100%, 100%);
font-weight: normal;
}
.banner.warning {
background-color: hsl(20, 100%, 40%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.email-confirmation-modal {
border-radius: 4px;
overflow: hidden;
max-width: 500px;
}
.email-confirmation-modal h1 {
font-size: 2rem;
line-height: 2.5rem;
}
.email-confirmation-modal .modal-content-close {
top: 5px;
right: 5px;
}
.email-confirmation-modal .modal-main-content {
display: flex;
}
.email-confirmation-modal .modal-text-content {
margin-top: 30px;
margin-bottom: 30px;
margin-right: 20px;
margin-left: 20px;
}
.email-confirmation-modal .modal-image {
margin-left: -70px;
}
.email-confirmation-modal .top-close-bar {
height: 44px;
background-color: #0EBD8C;
}
.email-confirmation-modal .guide-footer {
text-align: center;
border-top: 1px solid rgba(77, 151, 255, 0.15);
padding: 20px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.video-player {
border: 0.25rem solid hsla(0, 0%, 0%, 0.15);
border-radius: 0.75rem;
height: 225px;
overflow: hidden;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.intro-banner {
display: flex;
flex-direction: column;
position: relative;
padding: 0;
justify-content: space-between;
background-color: #000;
}
.intro-banner .intro-container {
min-height: 24rem;
justify-content: space-between;
background-color: #9eff9e;
background-size: 624px 325px;
background-repeat: no-repeat;
background-position: right;
background-image: url("/svgs/intro/background-cropped.svg");
}
.intro-banner {
/* flex: column */
}
.intro-banner .intro-content {
flex: 1;
justify-content: center;
align-items: flex-start;
margin-left: 5%;
min-height: 20rem;
}
.intro-banner .intro-video-container {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 29rem;
}
.intro-banner .intro-video-container .intro-video {
margin-right: 4rem;
}
.intro-banner .intro-video-container .video-image {
position: relative;
cursor: pointer;
margin-right: 4rem;
}
.intro-banner .intro-video-container .video-image .watch-button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
color: hsl(0, 100%, 100%);
padding: 0.625rem 0.75rem;
font-size: 1rem;
}
.intro-banner .intro-video-container:after {
display: block;
position: absolute;
bottom: 0.75rem;
right: 10%;
background-image: url("/svgs/intro/hat-block.svg");
background-repeat: no-repeat;
width: 122px;
height: 81px;
content: "";
}
.intro-banner .intro-header {
margin-bottom: 0.75rem;
font-size: 2rem;
color: hsl(0, 100%, 100%);
line-height: 1.5em;
}
.intro-banner .intro-button {
border-radius: 4px;
background-color: #000;
color: #9eff9e;
padding: 0.625rem 0.75rem;
font-size: 1rem;
margin-right: 0.75rem;
}
.intro-banner .intro-button.create-button:before {
display: inline-block;
margin-right: 0.5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("/svgs/intro/create.svg");
width: 1.5rem;
height: 1.5rem;
vertical-align: -0.35rem;
content: "";
}
.intro-banner .intro-button.join-button:before {
display: inline-block;
margin-right: 0.5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url("/svgs/intro/join.svg");
width: 1.5rem;
height: 1.5rem;
vertical-align: -0.35rem;
content: "";
}
.intro-banner .intro-subnav {
justify-content: center;
background-color: hsla(215, 100%, 65%, 0.1);
}
.intro-banner .intro-subnav .subnav-button {
margin: 0.625rem 0.5rem;
padding: 0.5rem 1.5rem;
border-radius: 1.5rem;
}
@media only screen and (min-width: 900px) and (max-width: 1023px) {
.intro-banner .intro-header {
max-width: 22rem;
text-align: left;
}
}
@media only screen and (min-width: 480px) and (max-width: 899px) {
.intro-banner {
justify-content: flex-start;
}
.intro-banner .intro-header {
margin-top: 1.75rem;
font-size: 1.5rem;
}
.intro-banner .intro-container {
flex-direction: column;
background-position: bottom 32px right 50%;
background-size: 40rem;
background-image: url("/svgs/intro/background.svg");
}
.intro-banner .intro-container .intro-content {
align-items: center;
min-height: 8rem;
margin: 0;
}
.intro-banner .intro-video-container {
flex: 0 0 24rem;
}
.intro-banner .intro-video-container .video-image,
.intro-banner .intro-video-container .video-player {
margin: 0;
}
.intro-banner .intro-video-container:after {
display: none;
}
}
@media only screen and (max-width : 767px) {
.intro-buttons,
.intro-subnav {
flex-direction: row;
}
}
@media only screen and (max-width: 479px) {
.intro-banner .intro-container {
background-image: none;
}
.intro-banner .intro-container .intro-content.column {
margin: auto 5%;
align-items: center;
}
.intro-banner .intro-container .intro-header {
font-size: 1.5rem;
}
.intro-banner .intro-container .intro-video-container {
display: none;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.news ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.news li {
display: block;
clear: both;
margin: 0;
padding: 12px 0;
min-height: 53px;
}
.news li a {
display: flex;
text-decoration: none;
flex-wrap: nowrap;
flex-direction: row;
}
.news li a:hover {
text-decoration: none;
}
.news li img {
margin-right: 12px;
width: initial;
}
.news li h4 {
display: block;
color: hsl(260, 60%, 60%);
font-size: 0.85rem;
}
.news li p {
display: block;
margin: 0;
padding: 0;
line-height: normal;
color: #fff;
font-size: 0.85rem;
}
.news li:nth-child(even) {
border-top: 1px solid #111;
border-bottom: 1px solid #111;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.teacher-banner {
background-color: hsl(260, 100%, 70%);
min-height: 65px;
}
.teacher-banner.title-banner {
transition: none;
margin-bottom: 0;
text-align: left;
}
.teacher-banner.title-banner h3,
.teacher-banner.title-banner p {
margin: 0;
padding: 0;
width: 100%;
text-align: left;
}
.teacher-banner h3 {
color: hsl(0, 100%, 100%);
}
.teacher-banner .flex-row.inner {
justify-content: space-between;
}
.teacher-banner .button {
margin-left: 10px;
background-color: hsl(0, 100%, 100%);
padding: 13px 20px;
color: hsl(260, 60%, 60%);
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
.welcome .box-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 1 100%;
padding: 0;
}
.welcome .box-content .welcome-banner {
width: 100%;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.125rem;
text-align: center;
color: hsl(194, 73%, 36%);
background-color: hsl(195, 63%, 86%);
padding: 0.625rem 0;
}
.welcome .box-content .welcome-options {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.5rem 0;
}
.welcome .box-content .welcome-options .welcome-option-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 10rem;
height: 13rem;
border: 1px solid hsl(215, 50%, 90%);
border-radius: 20px;
text-align: center;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.social-message {
margin: 0;
border-bottom: 1px solid #111;
padding: 1rem;
list-style-type: none;
}
.social-message-icon {
opacity: 0.25;
}
.social-message.mod-unread {
background-color: hsla(215, 100%, 65%, 0.1);
}
.social-message.mod-unread .social-message-icon {
opacity: 1;
}
.flex-row.mod-social-message {
justify-content: space-between;
align-items: flex-start;
}
.social-message-content {
display: flex;
max-width: 38.75rem;
text-align: left;
align-items: flex-start;
}
.social-message-icon {
margin: 0.2rem 1rem 0 0;
min-width: 1.25rem;
}
a.social-messages-profile-link {
color: #fff;
}
a.social-messages-profile-link:hover {
color: hsl(260, 60%, 60%);
}
.flex-row.mod-comment-message {
justify-content: flex-start;
}
.comment-text {
margin-left: 1.5rem;
}
@media only screen and (max-width : 479px) {
.social-message {
text-align: left;
}
.social-message-date {
align-self: flex-end;
}
.social-message-content {
max-width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
.social-message {
text-align: left;
}
.social-message-date {
align-self: flex-end;
}
.social-message-content {
max-width: 100%;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.donate-banner {
display: flex;
position: sticky;
z-index: 8;
background-color: hsl(144, 45%, 26%);
padding: 0;
overflow: hidden;
align-items: center;
justify-content: center;
margin-bottom: 0px;
}
.donate-banner .donate-container {
display: flex;
margin: 0.375rem auto;
align-items: center;
}
.donate-banner .donate-container .donate-icon {
margin: 0.6875rem;
width: 1.75rem;
height: 1.75rem;
}
.donate-banner .donate-container .donate-central-items {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.donate-banner .donate-container .donate-text {
text-align: left;
color: hsl(0, 100%, 100%);
font-size: 1rem;
font-weight: bold;
margin-right: 1rem;
max-width: 70vw;
}
.donate-banner .donate-container .donate-button {
margin: 0 7rem 0 0.5rem;
border-radius: 1.25rem;
background-color: hsl(0, 100%, 100%);
color: hsl(144, 45%, 26%);
padding: 0 1.75rem;
height: 2.25rem;
text-decoration: none;
line-height: 0.875rem;
font-size: 1rem;
font-weight: bold;
}
.donate-banner .donate-close-button {
right: 1rem;
top: auto;
}
.donate-banner a {
color: hsl(0, 100%, 100%);
text-decoration: underline;
}
@media only screen and (max-width: 640px) {
.donate-banner .donate-container .donate-central-items {
flex-wrap: wrap;
}
.donate-banner .donate-container .donate-icon {
padding-bottom: 2rem;
}
.donate-banner .donate-container .donate-button {
margin-left: 0;
margin-bottom: 1rem;
}
.donate-banner .donate-close-button {
top: 1rem;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.hoc-banner {
display: flex;
position: relative;
background-color: hsl(144, 45%, 36%);
background-image: url("/images/hoc/bg-pattern.png");
background-size: cover;
padding: 0;
height: 25rem;
overflow: hidden;
justify-content: center;
}
.hoc-banner.mod-middle-banner {
background-color: hsl(300, 53%, 60%);
}
.hoc-banner .hoc-container {
margin: auto;
width: 942px;
height: 25rem;
justify-content: flex-start;
}
.hoc-banner .hoc-container .hoc-title-container {
margin: 1.5rem 0;
width: 100%;
justify-content: space-between;
}
.hoc-banner .hoc-banner-images {
display: flex;
width: 942px;
justify-content: space-between;
}
.hoc-banner .hoc-banner-image {
border: 2px solid hsl(144, 45%, 36%);
border-radius: 16px;
background-color: hsl(0, 100%, 100%);
width: 18.75em;
height: 244px;
overflow: hidden;
box-sizing: border-box;
justify-content: flex-start;
}
.hoc-banner .hoc-banner-image.mod-middle-image {
border: 2px solid hsl(300, 53%, 60%);
}
.hoc-banner .hoc-banner-image img {
width: 18.75em;
height: 10.3749999938em; /* images are 600 x 332 for retina */
object-fit: cover;
}
.hoc-banner .hoc-banner-image .hoc-image-text {
margin: auto auto;
color: hsl(260, 60%, 60%);
font-size: 1rem;
font-weight: bold;
}
.hoc-banner .hoc-header {
color: hsl(0, 100%, 100%);
}
.hoc-banner .hoc-header {
font-size: 2rem;
}
.hoc-banner .hoc-more-activities {
border-radius: 10px;
background-color: hsl(0, 100%, 100%);
padding: 0.5rem 1rem 0.75rem 1rem;
color: hsl(260, 60%, 60%);
font-size: 0.75rem;
font-weight: bold;
}
.hoc-banner .hoc-more-activities img {
margin-right: 0.25rem;
width: 20px;
height: 20px;
vertical-align: text-bottom;
}
@media only screen and (min-width: 768px) and (max-width: 942px) {
.hoc-banner {
height: 23.5rem;
}
.hoc-banner .hoc-container {
bottom: 4rem;
width: 38.75em;
}
.hoc-banner .hoc-banner-images {
width: 38.75em;
}
.hoc-banner .hoc-banner-image {
width: 18.75em;
}
.hoc-hideable {
display: none;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.feature-banner {
display: flex;
position: relative;
background-color: hsl(144, 45%, 36%);
background-image: url("/images/hoc/bg-pattern.png");
background-size: cover;
padding: 0;
overflow: hidden;
justify-content: center;
}
.feature-banner .feature-container {
margin: auto;
width: 942px;
justify-content: flex-start;
}
.feature-banner .feature-container .feature-title-container {
margin: 1.5rem 0;
width: 100%;
justify-content: space-between;
}
.feature-banner .feature-banner-images {
display: flex;
width: 942px;
justify-content: space-around;
margin-bottom: 3rem;
}
.feature-banner .feature-banner-image {
border: 2px solid hsl(144, 45%, 36%);
border-radius: 16px;
background-color: hsl(0, 100%, 100%);
width: 38.75em;
height: 280px;
overflow: hidden;
box-sizing: border-box;
justify-content: flex-start;
}
.feature-banner .feature-banner-image img {
width: 38.75em;
height: 205px;
object-fit: cover;
}
.feature-banner .feature-banner-image .feature-image-text {
margin: auto auto;
color: hsl(260, 60%, 60%);
font-size: 1rem;
font-weight: bold;
}
.feature-banner .feature-header {
color: hsl(0, 100%, 100%);
font-size: 2rem;
}
.feature-banner .feature-learn-more {
border-radius: 10px;
background-color: hsl(0, 100%, 100%);
padding: 0.75rem 1rem;
color: hsl(260, 60%, 60%);
font-size: 0.75rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) and (max-width: 942px) {
.feature-banner .feature-container {
width: 38.75em;
}
.feature-banner .feature-banner-images {
width: 38.75em;
}
.feature-banner .feature-banner-image {
width: 38.75em;
}
.feature-hideable {
display: none;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
#view {
padding: 0;
}
.inner.mod-splash {
margin-top: 20px;
}
.splash .splash-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.ie9 .splash .splash-header {
display: table;
margin: 0 -20px 20px -20px;
min-width: 100%;
border-spacing: 20px 0;
}
.splash .splash-header .box {
display: inline-block;
width: calc(60% - 20px);
}
.ie9 .splash .splash-header .box {
display: table-cell;
vertical-align: top;
}
.splash .splash-header .box.welcome {
display: flex;
flex-direction: column;
}
.splash .splash-header .news {
width: 40%;
}
.splash .splash-header .news img {
flex-shrink: 0;
}
.splash .box {
margin-bottom: 20px;
}
.splash-admin-panel dl {
list-style: none;
}
.splash-admin-panel dl dt {
margin: 2rem 0 1rem 0;
border-bottom: 1px solid hsl(0, 0%, 70%);
font-size: large;
font-weight: 700;
}
.splash-admin-panel dl dd {
margin-left: 0;
}
.splash-admin-panel ul {
padding: 0;
}
.splash-admin-panel ul li {
margin: 0;
list-style: none;
}
.modal-content.mod-confirmation {
width: 31.25rem;
}
.modal-content-iframe.mod-confirmation {
border-radius: 1rem;
width: 31.25rem;
min-height: 20.625rem;
}
.activity-ul {
margin: 0;
padding: 0;
}
.activity-li {
display: flex;
margin: 0.75rem 0;
list-style: none;
align-items: center;
}
.flex-row.mod-social-message {
line-height: 1.25rem;
flex-direction: column;
}
.social-message {
border: 0;
padding: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.activity-img {
padding-right: 0.825rem;
width: 2rem;
height: 2rem;
vertical-align: middle;
}
.social-message-content {
font-size: 0.9rem;
}
.social-message-date {
color: hsl(0, 0%, 70%);
font-size: 0.65rem;
}
@media only screen and (max-width : 479px) {
.splash .splash-header {
flex-wrap: wrap;
justify-content: center;
}
.splash .splash-header .box {
width: 18.75em;
}
.modal-content.mod-confirmation {
width: 100%;
overflow: scroll;
}
.modal-content-iframe.mod-confirmation {
border-radius: 0;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
.splash .splash-header {
flex-wrap: wrap;
justify-content: center;
}
.splash .splash-header .box {
width: 28.75em;
}
.modal-content.mod-confirmation {
width: 100%;
overflow: scroll;
}
.modal-content-iframe.mod-confirmation {
border-radius: 0;
width: 639px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
.splash .splash-header {
margin: 0 auto;
width: 38.75em;
}
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.navigation-button {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.3rem;
}
.navigation-button .left-arrow {
padding-right: 4px;
}
@media only screen and (max-width : 479px) {
.navigation-button .left-arrow {
padding: 0px;
}
}
.navigation-button .right-arrow {
padding-left: 4px;
}
@media only screen and (max-width : 479px) {
.navigation-button .right-arrow {
padding: 0px;
}
}
.navigation {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin-bottom: 40px;
}
.navigation .hidden {
visibility: hidden;
}
.navigation .dotRow {
display: flex;
justify-content: space-between;
align-items: center;
width: 244px;
min-width: 0px;
padding: 0px 5px;
}
.navigation .dot {
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #d9d9d9;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.navigation .active {
border: solid 2px #4280d9;
background-color: #4c97fe;
margin-top: -2px;
}
@media only screen and (max-width : 479px) {
.navigation .navText {
display: none;
}
}
.navigation .buttonPlaceholder {
width: 20px;
}
/* UI Primary Colors */
/* #FF661A */
/* #CC4400 */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* #BD42BD Sounds Tertiary */
/* #BD42BD Sounds Tertiary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/* chipmunk.land-specific */
/* remapping */
/*
Frameless
by Joni Korpi
licensed under CC0
*/
/* Media Queries */
/* Width */
/*
* ... small | medium | intermediate | big ...
* ... medium-and-smaller |
* ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width : 479px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 100%;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 480px;
}
}
@media only screen and (min-width : 768px) and (max-width : 941px) {
#view {
text-align: center;
}
.inner {
margin: 0 auto;
width: 768px;
}
}
@media only screen and (min-width : 942px) {
.inner {
margin: 0 auto;
width: 942px;
}
}
.col {
display: flex;
flex-direction: column !important;
}
.onboarding {
display: flex;
flex-direction: row;
min-height: 100vh;
line-height: 1.8rem;
font-size: 1.1rem;
}
.onboarding h1 {
line-height: 3rem;
font-size: 2rem;
margin-bottom: 20px;
}
.onboarding button {
padding: 0.3em 0.9em;
}
.onboarding .content {
flex: 1;
display: flex;
max-width: 1000px;
padding: auto;
margin: auto;
}
@media only screen and (max-width : 767px) {
.onboarding .content {
flex-direction: column;
}
}
.onboarding .image-content {
display: flex;
position: relative;
flex: 4;
justify-content: center;
align-items: center;
}
@media only screen and (max-width : 767px) {
.onboarding .image-content {
flex: 12;
order: 1;
align-items: flex-end;
}
}
@media only screen and (max-width : 767px) {
.onboarding .image-content img {
width: 300px;
height: 300px;
}
}
.onboarding .image-inner-content {
position: relative;
}
.onboarding .text-content {
flex: 8;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
padding: 40px;
}
@media only screen and (max-width : 767px) {
.onboarding .text-content {
flex: 12;
order: 2;
padding-top: 0px;
justify-content: flex-start;
}
}
.security-avatar {
position: absolute;
border-radius: 100%;
width: 65px;
height: 65px;
top: 172px;
left: 149px;
}
@media only screen and (max-width : 767px) {
.security-avatar {
width: 60px !important;
height: 60px !important;
top: 140.5px;
left: 121.5px;
}
}