@font-face { font-family: 'geomanistregular'; src: url('/fonts/geomanist/geomanist-book-webfont.woff2') format('woff2'), url('/fonts/geomanist/geomanist-book-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'geomanistitalic'; src: url('/fonts/geomanist/geomanist-book-italic-webfont.woff2') format('woff2'), url('/fonts/geomanist/geomanist-book-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'ubuntubold'; src: url('/fonts/ubuntu/ubuntu-b-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-b-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ubuntubold_italic'; src: url('/fonts/ubuntu/ubuntu-bi-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-bi-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ubuntu_condensedregular'; src: url('/fonts/ubuntu/ubuntu-c-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-c-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ @font-face { font-family: 'ubuntulight'; src: url('/fonts/ubuntu/ubuntu-l-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-l-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ubuntulight_italic'; src: url('/fonts/ubuntu/ubuntu-li-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-li-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ubuntumedium'; src: url('/fonts/ubuntu/ubuntu-m-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-m-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'ubuntumedium_italic'; src: url('/fonts/ubuntu/ubuntu-mi-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-mi-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ubunturegular'; src: url('/fonts/ubuntu/ubuntu-r-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-r-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'ubuntuitalic'; src: url('/fonts/ubuntu/ubuntu-ri-webfont.woff2') format('woff2'), url('/fonts/ubuntu/ubuntu-ri-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } */ body { font-family: 'ubuntulight', Verdana, Geneva, Tahoma, sans-serif; font-size: 16px; color: #333; padding: 0; margin: 0; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } a, a:visited { color:#64d29b; text-decoration: none; } a:hover, a:focus, a:active { color:#64d29b; text-decoration: underline; } #header-bar { margin-bottom:1em } #colibris-menu, #archipel { background: #5a696b; height:22px; } #archipel .archipel__islands a::before { font-weight: 400; font-family: sans-serif; content: ''; display: inline-block; margin-right: 0; } #archipel .archipel__islands a:hover, #archipel .archipel__islands a:focus, #archipel .archipel__islands a:active { color:#64d29b; } .social-links a::before { width: 16px; padding-right: 0; margin-right: 0; } .main-header { display: flex; align-content: space-around; justify-content: space-between; align-items: center; } .title { display: flex; align-content: space-around; align-items: center; } .logo { width: 120px; } .base-line { font-family: 'geomanistitalic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color:#5b6a6c; font-size: 16px; margin-left:1em; } .container { max-width:1140px; margin: 0 auto; } .container-fluid { margin: 1em; } .board-container { margin: 1em auto; width:100%; } .actions { float:right; } .actions a { font-weight: bold; text-transform: uppercase; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin-left:1em; transition: color ease-out .2s; } .actions a:hover { text-decoration: none; color:#e33d8a; } #smallify .fa-search-plus ~ .big { display:inline-block; } #smallify .fa-search-plus ~ .big ~ .small { display:none; } #smallify .fa-search-minus ~ .big { display:none; } #smallify .fa-search-minus ~ .big ~ .small { display:inline-block; } #full-page .fa-expand ~ .full-screen { display:inline-block; } #full-page .fa-expand ~ .full-screen ~ .contain-screen { display:none; } #full-page .fa-compress ~ .full-screen { display:none; } #full-page .fa-compress ~ .full-screen ~ .contain-screen { display:inline-block; } .clearfix { clear:both; } #board { position: relative; background-color: #EEE; height: 100%; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.49, #EEE), color-stop(0.84, #CCC)); -moz-box-shadow: inset 1px 1px 3px #999; box-shadow: inset 1px 1px 3px #999; } .board-outline { border: solid #ddd 6px; display: block; height: 466px; box-shadow: 1px 1px 1px #aaa; margin: 0 auto; } #board-doodles { width: 100%; height: 100%; position: absolute; display: inline; opacity: 0.035; background-image: url('/images/scribbles2.png'); } .card-icon { display: none; position: absolute; top: 3%; left: 82%; opacity: .3; width: 16px; height: 16px; } .card-icon-hover { opacity: .9; } .card-edit-form, .card-edit-form input, .card-edit-form textarea { border: none; font-size: inherit; font-weight: inherit; background-color: inherit; xvertical-align: inherit; font-family: inherit; text-align: center; xcolor: #444; padding: 0; margin: 0; outline-width: 0; overflow: hidden; resize: none; width: 100%; color: #330066; color: #666; } .board-table { xz-index: 1; position: absolute; top: 0px; left: 0px; xborder: solid #5b6a6c 1px; height: 100%; width: 100%; } .board-table .col { xborder-left: dashed #64d29b 5px; text-align: center; vertical-align: top; height: 100%; xopacity: 1; background-image: url('../images/green-board-line.png'); background-repeat: repeat-y; background-position: left top; } .board-table .first { border-left: none; text-align: center; vertical-align: top; height: 100%; background-image: none; } h1, h1 a { color: #b6b6b6; padding: 0px; margin: 0px; margin-left: 1px; font-weight: normal; xtext-shadow: 1px 1px 1px #b6b6b6; font-size: 15px; padding-top: 14px; letter-spacing: +1px; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-decoration: none; } h2 { font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #64d29b; font-size: 18px; } .bottom-icon { padding: 5px; opacity: .4; } .bottom-icon:hover { padding: 5px; opacity: .6; } .faded-icon { opacity: .4; } .faded-icon:hover { opacity: .6; } #add-col { position: absolute; right: 3px; top: 200px; display: none; opacity: .15; } #add-col:hover { opacity: .5; } #delete-col { position: absolute; right: 3px; top: 224px; display: none; opacity: .15; } #delete-col:hover { opacity: .5; } #config-dropdown { border: solid #666 5px; width: 200px; height: 34px; border-radius: 15px; background-color: #888; box-shadow: 0px 0px 10px #444; padding: 2px; display: none; } .config-dropdown-icon { padding: 5px; opacity: .5; } .buttons { float: left; } .names { padding-left: 10px; width: 980px; text-align: right; color: #bbb; letter-spacing: 4px; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 13px; } .names p { padding: 0; margin 0; } .names ul { list-style: none; margin-top: 4px; margin-bottom: 4px; } #yourname-li { color: #888; } .names input { padding: 0; border: none; outline: 0; width: 100px; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); background: none; border-radius: 10px; color: #666; text-align: right; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 13px; letter-spacing: 4px; margin: 0; position: relative; } .names input:hover { outline: 0; width: 100px; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); background: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; border-radius: 10px; color: #aaa; text-align: right; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 13px; letter-spacing: 4px; margin: 0; } .names .focused { color: #444; } .you-text { letter-spacing: 2px; } #user-icon { vertical-align: text-top; position: relative; left: 0px; } .sticker { padding-top: 0px; padding-left: 2px; xz-index: 10; display: inline-block; width: 11px; height: 11px; background-repeat: no-repeat; } .stickers { text-align: right; padding-top: 6px; margin: 0; } #sticker-red { background-image: url('../images/stickers/sticker-red.png'); } #sticker-blue { background-image: url('../images/stickers/sticker-blue.png'); } #sticker-yellow { background-image: url('../images/stickers/sticker-yellow.png'); } #sticker-green { background-image: url('../images/stickers/sticker-green.png'); } #sticker-pink { background-image: url('../images/stickers/sticker-pink.png'); } #sticker-lightblue { background-image: url('../images/stickers/sticker-lightblue.png'); } #sticker-orange { background-image: url('../images/stickers/sticker-orange.png'); } #sticker-purple { background-image: url('../images/stickers/sticker-purple.png'); } #sticker-gold { background-image: url('../images/stickers/sticker-gold.png'); } #sticker-silverstar { background-image: url('../images/stickers/sticker-silverstar.png'); } #sticker-bluestar { background-image: url('../images/stickers/sticker-bluestar.png'); } #sticker-redstar { background-image: url('../images/stickers/sticker-redstar.png'); } #addsticker { background-image: url('../images/icons/iconic/raster/#5b6a6c/plus_8x8.png'); background-position: 2px 2px; opacity: 0.3; display: inline-block; width: 11px; height: 11px; background-repeat: no-repeat; } #addsticker:hover { opacity: 0.7; } #nosticker { background-image: url('../images/stickers/sticker-deletestar.png'); } #sticker-nostar { position: relative; top: 3px; opacity: .5; } #sticker-redstar { top: 1px; } /*.sticker-red { background-image: url('../images/stickers/sticker-red.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-blue { background-image: url('../images/stickers/sticker-blue.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-yellow { background-image: url('../images/stickers/sticker-yellow.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-green { background-image: url('../images/stickers/sticker-green.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-gold { background-image: url('../images/stickers/sticker-gold.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-bluestar { background-image: url('../images/stickers/sticker-bluestar.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-silverstar { background-image: url('../images/stickers/sticker-silverstar.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-redstar { background-image: url('../images/stickers/sticker-redstar.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-pink { background-image: url('../images/stickers/sticker-pink.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-orange { background-image: url('../images/stickers/sticker-orange.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-lightblue { background-image: url('../images/stickers/sticker-lightblue.png'); background-repeat: no-repeat; background-position: right bottom; } .sticker-purple { background-image: url('../images/stickers/sticker-purple.png'); background-repeat: no-repeat; background-position: right bottom; }*/ /* Stuff for landing page */ h1.home { font-size: 100px; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #64d29b; opacity: .8; padding: 0; margin: 0; text-align: center; xline-height: .9em; } .home { font-size: 30px; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #5b6a6c; opacity: 1; padding: 0; margin: 0; text-align: center; } form.home { margin-bottom:2em; } p.home a { color: #64d29b; text-decoration: none; } p.small { font-size: 22px; } #video { height: 450px; width: 1000px; padding-top: 100px; } input.text { width: 230px; background: none; padding: 6px; margin-bottom: 10px; border: none; font-size: 30px; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #64d29b; text-align: center; border-bottom: dashed 3px #64d29b; } #go:hover { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2); text-decoration: none; background-color: #64d29bcc; } #go { display: inline-block; background-color: #64d29b; margin-left: 30px; box-shadow: unset; border: none; padding: 2px 10px; border-radius: 5px; margin-bottom: 0px; font-size: 25px; text-transform: uppercase; font-weight: bold; transition: all ease-out .1s; font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #5b6a6c; } @media (max-width: 442px) { #go { margin-left: 0; } } .notice-bar { padding: 0; margin: 1em 0 0 0; text-align: center; color:#e33d8a; text-transform:uppercase; font-weight: bold; } .notice-bar a { color: #333; } #marker { position: absolute; bottom: 0; right: 200px; z-index: 1; } #eraser { position: absolute; bottom: 0; right: 70px; z-index: 1; } .card-hover-draggable { xborder: 1px dashed blue; box-shadow: inset 0 0 40px rgba(128, 128, 256, 0.2); background-color: rgba(128, 128, 256, 0.1) } /*img ~ .card-hover-draggable { -webkit-filter: hue-rotate(180deg); }*/ img { user-drag: none; -moz-user-select: none; -webkit-user-drag: none; } .config { position: fixed; right: 18px; top: 4px; } .trash { position: fixed; right: 18px; bottom: 4px; } .filler { right: 0; bottom: 0; position: absolute; text-align: right; } .active-connections, .credits { color: #999; margin: 1em 0; } /* states and images */ .ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_222222_256x240.png); } .ui-widget-content .ui-icon { background-image: url(../images/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon { background-image: url(../images/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(../images/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../images/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon { background-image: url(../images/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon { background-image: url(../images/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(../images/ui-icons_cd0a0a_256x240.png); } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; z-index: 99999; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .export button, .import * { margin-right: 15px; } .content h1 { font-family: 'geomanistregular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #64d29b; font-size: 22px; } .content * { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } #revisions-list li>* { cursor: pointer; } #revisions-list li img { margin-left: 10px; } .active-connections { float:left; } .credits { text-align: center; } /** * modal.css * Author: Pedro Laxe * Version: 1.0.6 * License: GPLv2 **/ .modal { left: 50%; margin: -250px 0 0 -32%; opacity: 0; position: absolute; top: -50%; visibility: hidden; width: 65%; box-shadow: 0 3px 3px rgba(0,0,0,.25); box-sizing: border-box; transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; } .modal:target { opacity: 1; top: 50%; visibility: visible; } .modal .header, .modal .footer { border-bottom: 1px solid #e7e7e7; border-radius: 5px 5px 0 0; } .modal .footer { border: none; border-top: 1px solid #e7e7e7; border-radius: 0 0 5px 5px; } .modal h2 { margin: 0; color: #333333; } .modal .btn { float: right; } .modal .copy, .modal .header, .modal .footer { padding: 5px; color: #333333; } .modal-content { background: #f7f7f7; position: relative; z-index: 20; border-radius: 5px; color: #333333; } .modal .copy { background: #fff; min-height:200px; } .modal .overlay { background-color: #000; background: rgba(0,0,0,.8); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10; } .copy ul li a { color: #333333; text-decoration: none; } /* Responsive Options */ @media screen and (min-width: 768px) { .modal{ width:600px; margin:-250px 0px 0px -18.2%; top: -50%; } } .modalcss-button { /* Structure */ display: inline-block; zoom: 1; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Firefox: Get rid of the inner focus border */ .modalcss-button::-moz-focus-inner { padding: 0; border: 0; } .modalcss-button { font-family: inherit; font-size: 100%; padding: 0.5em 1em; color: #444; /* rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.80); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; border-radius: 2px; } .modalcss-button-hover, .modalcss-button:hover, .modalcss-button:focus { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); } .modalcss-button:focus { outline: 0; } .modalcss-button-active, .modalcss-button:active { box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; border-color: #000\9; } .modalcss-button[disabled], .modalcss-button-disabled, .modalcss-button-disabled:hover, .modalcss-button-disabled:focus, .modalcss-button-disabled:active { border: none; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=40); -khtml-opacity: 0.40; -moz-opacity: 0.40; opacity: 0.40; cursor: not-allowed; box-shadow: none; } .modalcss-button-hidden { display: none; } /* Firefox: Get rid of the inner focus border */ .modalcss-button::-moz-focus-inner{ padding: 0; border: 0; } .modalcss-button-primary, .modalcss-button-selected, a.modalcss-button-primary, a.modalcss-button-selected { background-color: rgb(0, 120, 231); color: #fff; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: rgb(28, 184, 65); /* this is a green */ } .button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } /* Responsive Video */ .video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Close Button */ .box3 { width: 25px; right: 0px; position: absolute; margin: 5px; } svg { display: block; } .close-x { stroke: black; fill: transparent; stroke-linecap: round; stroke-width: 5; } .pull-right { float: right; }