Last active
August 29, 2015 14:15
-
-
Save manorius/1b7e20568703bbd4d2da to your computer and use it in GitHub Desktop.
Dualcolor pixel drawing matrix that exports the drawing in array form - PaperJS with Zepto framework// source http://jsbin.com/kezizi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Template - PaperJS with Zepto framework</title> | |
| <meta name="description" content="Template - PaperJS with Zepto framework"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style id="jsbin-css"> | |
| *, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: sans-serif; | |
| } | |
| body, | |
| form, | |
| fieldset, | |
| legend, | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 100%; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 21px; | |
| line-height: 1.3125rem; | |
| color: #434343; | |
| background-color: #fff; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| .clear:before, | |
| .clear:after { | |
| content: ""; | |
| display: table; | |
| } | |
| .clear:after { | |
| clear: both; | |
| } | |
| .clear { | |
| zoom: 1; | |
| } | |
| i, | |
| em, | |
| .em, | |
| dfn, | |
| blockquote, | |
| q { | |
| font-style: italic; | |
| } | |
| a { | |
| color: #27ae61; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| p { | |
| margin: 0 0 1.6em 0; | |
| } | |
| pre { | |
| margin: 1em 0; | |
| } | |
| ul + p, | |
| ul + pre, | |
| ol + p, | |
| ol + pre { | |
| margin-top: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #111; | |
| } | |
| audio:not([controls]) { | |
| height: 0; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| img { | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| hr { | |
| border: 0; | |
| background: none; | |
| outline: 0; | |
| background-color: #ddd; | |
| margin: 2em 0; | |
| *margin: 1em 0; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 1px; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| line-height: normal; | |
| font-weight: normal; | |
| margin: 0 0 0.33em 0; | |
| } | |
| h1, | |
| .h1 { | |
| font-size: 40px; | |
| font-size: 2.5rem; | |
| } | |
| h2, | |
| .h2 { | |
| font-size: 32px; | |
| font-size: 2rem; | |
| } | |
| h3, | |
| .h3 { | |
| font-size: 26px; | |
| font-size: 1.625rem; | |
| } | |
| h4, | |
| .h4 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| } | |
| h5, | |
| .h5 { | |
| font-size: 18px; | |
| font-size: 1.125rem; | |
| } | |
| h6, | |
| .h6 { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| } | |
| .no-style-heading { | |
| font-size: 100%; | |
| } | |
| dl, | |
| menu, | |
| ol, | |
| ul { | |
| margin: 1em 0; | |
| } | |
| dd, | |
| ul ul, | |
| ol ol, | |
| ul ol, | |
| ol ul { | |
| margin: 0; | |
| } | |
| dd { | |
| margin-bottom: 1em; | |
| } | |
| menu, | |
| ol, | |
| ul { | |
| padding: 0 0 0 22px; | |
| } | |
| nav ul, | |
| nav ol { | |
| list-style: none; | |
| list-style-image: none; | |
| } | |
| .list-unstyled, | |
| .list-inline { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .list-unstyled li, | |
| .list-inline li { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| blockquote { | |
| font-size: 22px; | |
| font-size: 1.375rem; | |
| line-height: 32px; | |
| line-height: 2rem; | |
| color: #434343; | |
| margin: 1em 0; | |
| } | |
| blockquote p { | |
| margin: 1em 0; | |
| } | |
| cite { | |
| color: #434343; | |
| font-style: normal; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: normal; | |
| } | |
| q { | |
| quotes: none; | |
| } | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| word-wrap: break-word; | |
| font-family: 'courier new', monospace, serif; | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: normal; | |
| font-weight: normal; | |
| background-color: #f1f1f1; | |
| padding: 10px; | |
| } | |
| code { | |
| color: #111; | |
| } | |
| table { | |
| width: 100%; | |
| margin: 1em 0; | |
| table-layout: fixed; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| border-right: 1px solid #f1f1f1; | |
| border-bottom: 1px solid #f1f1f1; | |
| word-wrap: break-word; | |
| -ms-word-wrap: break-word; | |
| *white-space: normal; | |
| } | |
| table th, | |
| table td { | |
| padding: 8px; | |
| text-align: left; | |
| vertical-align: top; | |
| border-top: 1px solid #eee; | |
| border-left: 1px solid #eee; | |
| } | |
| table thead th, | |
| table tfoot th { | |
| vertical-align: bottom; | |
| background-color: #f1f1f1; | |
| color: #333; | |
| } | |
| table caption { | |
| padding: 8px; | |
| font-weight: normal; | |
| font-style: normal; | |
| border-bottom: 0; | |
| } | |
| fieldset { | |
| border: 0; | |
| padding: 0; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| white-space: normal; | |
| *margin-left: -7px; | |
| } | |
| label { | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| *vertical-align: middle; | |
| } | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| padding: 5px; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| line-height: normal; | |
| background-color: #fff; | |
| border: 1px solid #ccc; | |
| color: #111; | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| cursor: pointer; | |
| box-sizing: border-box; | |
| line-height: normal; | |
| margin: 0; | |
| padding: 0; | |
| *height: 13px; | |
| *width: 13px; | |
| } | |
| .checkbox { | |
| margin: 0.2em 0; | |
| } | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| margin-top: 0.05em; | |
| } | |
| .checkbox label { | |
| padding-left: 5px; | |
| overflow: hidden; | |
| display: table; | |
| *zoom: 1; | |
| } | |
| button, | |
| input { | |
| line-height: normal; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| textarea { | |
| overflow: auto; | |
| vertical-align: top; | |
| resize: none; | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; | |
| *overflow: visible; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| .button { | |
| border: 0; | |
| padding: 1em 3em; | |
| background-color: #e74b3c; | |
| color: #fff; | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .button:hover { | |
| background-color: #f43f3f; | |
| } | |
| .button:active { | |
| top: 1px; | |
| } | |
| .grey-button { | |
| background-color: #eee; | |
| color: #434343; | |
| } | |
| .grey-button:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .button[disabled], | |
| .button.disabled { | |
| color: #999; | |
| background-color: #f1f1f1; | |
| } | |
| .button-unstyled { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| color: #27ae61; | |
| text-decoration: underline; | |
| border: 0; | |
| background: transparent; | |
| height: auto; | |
| padding: 0; | |
| cursor: pointer; | |
| outline: 0; | |
| } | |
| .button-unstyled:hover { | |
| text-decoration: none; | |
| } | |
| .button-unstyled[disabled], | |
| .button-unstyled.disabled { | |
| text-decoration: none; | |
| color: #999; | |
| background-color: #ccc; | |
| } | |
| .left, | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| float: left; | |
| } | |
| .right { | |
| float: right; | |
| } | |
| .block, | |
| .checkbox { | |
| display: block; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .inline-block, | |
| audio, | |
| canvas, | |
| video, | |
| .list-inline, | |
| .list-inline li, | |
| .button { | |
| display: inline-block; | |
| *zoom: 1; | |
| *display: inline; | |
| } | |
| .none, | |
| [hidden], | |
| audio:not([controls]) { | |
| display: none; | |
| } | |
| .font-ultra-bold { | |
| font-weight: 900; | |
| } | |
| .font-bold, | |
| b, | |
| strong, | |
| .strong { | |
| font-weight: 700; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-weight: 500; | |
| } | |
| .font-light { | |
| font-weight: 300; | |
| } | |
| .font-thin { | |
| font-weight: 100; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-style: normal; | |
| } | |
| .capitalize { | |
| text-transform: capitalize; | |
| } | |
| .uppercase { | |
| text-transform: uppercase; | |
| } | |
| .text-left, | |
| table caption { | |
| text-align: left; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .text-center, | |
| .button { | |
| text-align: center; | |
| } | |
| .visuallyhidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| left: -9999em; | |
| } | |
| .image-left { | |
| margin-right: 20px; | |
| } | |
| .image-right { | |
| margin-left: 20px; | |
| } | |
| .section { | |
| position: relative; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .container-full { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .col { | |
| float: left; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| [class*="pull-"], | |
| [class*="push-"] { | |
| position: relative; | |
| } | |
| .no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .col-3, | |
| .col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .col-4, | |
| .col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .col-6, | |
| .col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .col-9, | |
| .col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .col-12 { | |
| width: 100%; | |
| } | |
| .push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .push-3, | |
| .push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .pull-3, | |
| .pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .push-4, | |
| .push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .pull-4, | |
| .pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .push-6, | |
| .push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .pull-6, | |
| .pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .push-9, | |
| .push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .pull-9, | |
| .pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .no-desktop { | |
| display: none; | |
| } | |
| .no-margin, | |
| .no-style-heading { | |
| margin: 0; | |
| } | |
| .no-padding { | |
| padding: 0; | |
| } | |
| @media only screen and (min-width: 740px) and (max-width: 959px) { | |
| .container, | |
| .tablet-container { | |
| max-width: 960px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .tablet-container:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .tablet-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .tablet-col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-col-3, | |
| .tablet-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-col-4, | |
| .tablet-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-col-6, | |
| .tablet-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-col-9, | |
| .tablet-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-col-12 { | |
| width: 100%; | |
| } | |
| .tablet-push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .tablet-push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .tablet-push-3, | |
| .tablet-push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-pull-3, | |
| .tablet-pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .tablet-push-4, | |
| .tablet-push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-pull-4, | |
| .tablet-pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .tablet-push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .tablet-push-6, | |
| .tablet-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-pull-6, | |
| .tablet-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .tablet-push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .tablet-push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .tablet-push-9, | |
| .tablet-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-pull-9, | |
| .tablet-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .tablet-push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .tablet-push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .tablet-no-push, | |
| .tablet-no-pull { | |
| left: auto; | |
| } | |
| .tablet-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .tablet-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 1em 0 0 0; | |
| display: block; | |
| } | |
| .tablet-full:first-child { | |
| margin-top: 0; | |
| } | |
| .tablet-text-left { | |
| text-align: left; | |
| } | |
| .tablet-text-right { | |
| text-align: right; | |
| } | |
| .tablet-text-center { | |
| text-align: center; | |
| } | |
| .tablet-left { | |
| float: left; | |
| } | |
| .tablet-right { | |
| float: right; | |
| } | |
| .tablet-no-float { | |
| float: none; | |
| } | |
| .tablet-no-margin { | |
| margin: 0; | |
| } | |
| .tablet-no-padding { | |
| padding: 0; | |
| } | |
| .no-tablet { | |
| display: none; | |
| } | |
| .show-tablet { | |
| display: block; | |
| } | |
| } | |
| @media only screen and (max-width: 739px) { | |
| .container, | |
| .mobile-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .mobile-container:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .mobile-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .mobile-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .mobile-push-1-3 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-pull-1-3 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .mobile-push-1-4 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-pull-1-4 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .mobile-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .mobile-no-push, | |
| .mobile-no-pull { | |
| left: auto; | |
| } | |
| .mobile-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .mobile-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 0.2em 0 0 0; | |
| display: block; | |
| } | |
| .mobile-full:first-child { | |
| margin-top: 0; | |
| } | |
| .mobile-text-left { | |
| text-align: left; | |
| } | |
| .mobile-text-right { | |
| text-align: right; | |
| } | |
| .mobile-text-center { | |
| text-align: center; | |
| } | |
| .mobile-left { | |
| float: left; | |
| } | |
| .mobile-right { | |
| float: right; | |
| } | |
| .mobile-no-float { | |
| float: none; | |
| } | |
| .mobile-no-margin { | |
| margin: 0; | |
| } | |
| .mobile-no-padding { | |
| padding: 0; | |
| } | |
| .no-mobile { | |
| display: none; | |
| } | |
| .show-mobile { | |
| display: block; | |
| } | |
| } | |
| @media print { | |
| * { | |
| background: transparent; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; | |
| } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| thead { | |
| display: table-header-group; | |
| } | |
| tr, | |
| img { | |
| page-break-inside: avoid; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| @page { | |
| margin: 0.5cm; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://zeptojs.com/zepto.min.js"></script> | |
| <script type="text/javascript" src="http://yourjavascript.com/051041113450/paper.js"></script> | |
| <canvas resize id="canvas" > Your browser doesn't support canvas </canvas> | |
| <script id="jsbin-javascript"> | |
| /* ========================================================== | |
| Base Default JavaScript | |
| -- Table of Contents -- | |
| */ | |
| // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW: | |
| paper.install(window); | |
| // VARIABLE FOR THE CANVAS ELEMENT | |
| var c; | |
| // EXECUTE CALLBACK WHEN THE PAGE IS READY: | |
| Zepto(function($){ | |
| // CANAVAS ELEMENT | |
| c = document.getElementById("canvas"); | |
| // DRAW STAGE | |
| drawStage(); | |
| }); | |
| function drawStage() | |
| { | |
| // GET WINDOW ELEMENT | |
| var _window = $( window ); | |
| // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS: | |
| paper.setup(c); | |
| // SET A STYLE FOR THE PROJECT | |
| project.currentStyle = { | |
| fillColor:'red' | |
| }; | |
| // CREATE A CIRCLE | |
| var leds = []; | |
| var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; | |
| //noprotect | |
| for(n=0;n<20;n++) | |
| { | |
| var row=[]; | |
| for(i=0;i<40;i++) | |
| { | |
| var round = new Path.Circle(new Point(10,10),10); | |
| round.position = new Point(i*20+20,n*20+20); | |
| // console.log(round.position.y); | |
| var nm = "r"+n+"c"+i; | |
| //round.name=nm; | |
| // console.log("-----"+round.name); | |
| round.name = 'red'; | |
| round.data.coordinates={r:n,c:i}; | |
| round.onMouseDown = function(event) { | |
| console.log(this.data.coordinates); | |
| if(this.name=='red'){this.fillColor = 'black'; | |
| this.name = 'black';} | |
| else | |
| { | |
| this.fillColor = 'red'; | |
| this.name = 'red'; | |
| } | |
| // CHANGE BLACK VALUE | |
| darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1; | |
| // RETURN NEW ARRAY | |
| console.log(visualiseArray(darkShape)); | |
| }; | |
| row.push(round); | |
| } | |
| leds.push(row); | |
| } | |
| // DRAW THE CÅURRENT VIEW | |
| // paper.view.draw(); | |
| // OR DRAW REPEATEDLY | |
| view.onFrame = function(event) { | |
| // MOVE COLOURS | |
| // for(n=0;n<20;n++) | |
| // { | |
| // for(i=0;i<40;i++) | |
| // { | |
| // //console.log(leds[n][i].name); | |
| // //c = new Color(Math.random(), Math.random(), Math.random()); | |
| // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random()); | |
| // } | |
| // } | |
| // UPDATE ARRAY | |
| for(n=0;n<20;n++) | |
| { | |
| for(i=0;i<40;i++) | |
| { | |
| } | |
| } | |
| }; | |
| } | |
| function visualiseArray(ar) | |
| { | |
| var visArr = "["; | |
| for(n=0;n<20;n++) | |
| { | |
| visArr = visArr.concat("["); | |
| for(i=0;i<40;i++) | |
| { | |
| //console.log(ar[n][i]); | |
| var v = ar[n][i]; | |
| visArr = visArr.concat(v); | |
| } | |
| visArr = visArr+="]"; | |
| if(n!=19)visArr = visArr.concat(","); | |
| } | |
| visArr = visArr.concat("]"); | |
| return visArr | |
| } | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html lang="en" class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Template - PaperJS with Zepto framework</title> | |
| <meta name="description" content="Template - PaperJS with Zepto framework"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <script src="http://zeptojs.com/zepto.min.js"><\/script> | |
| <script type="text/javascript" src="http://yourjavascript.com/051041113450/paper.js"><\/script> | |
| <canvas resize id="canvas" > Your browser doesn't support canvas </canvas> | |
| </body> | |
| </html> | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">*, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: sans-serif; | |
| } | |
| body, | |
| form, | |
| fieldset, | |
| legend, | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 100%; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 21px; | |
| line-height: 1.3125rem; | |
| color: #434343; | |
| background-color: #fff; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| .clear:before, | |
| .clear:after { | |
| content: ""; | |
| display: table; | |
| } | |
| .clear:after { | |
| clear: both; | |
| } | |
| .clear { | |
| zoom: 1; | |
| } | |
| i, | |
| em, | |
| .em, | |
| dfn, | |
| blockquote, | |
| q { | |
| font-style: italic; | |
| } | |
| a { | |
| color: #27ae61; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| p { | |
| margin: 0 0 1.6em 0; | |
| } | |
| pre { | |
| margin: 1em 0; | |
| } | |
| ul + p, | |
| ul + pre, | |
| ol + p, | |
| ol + pre { | |
| margin-top: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #111; | |
| } | |
| audio:not([controls]) { | |
| height: 0; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| img { | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| hr { | |
| border: 0; | |
| background: none; | |
| outline: 0; | |
| background-color: #ddd; | |
| margin: 2em 0; | |
| *margin: 1em 0; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 1px; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| line-height: normal; | |
| font-weight: normal; | |
| margin: 0 0 0.33em 0; | |
| } | |
| h1, | |
| .h1 { | |
| font-size: 40px; | |
| font-size: 2.5rem; | |
| } | |
| h2, | |
| .h2 { | |
| font-size: 32px; | |
| font-size: 2rem; | |
| } | |
| h3, | |
| .h3 { | |
| font-size: 26px; | |
| font-size: 1.625rem; | |
| } | |
| h4, | |
| .h4 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| } | |
| h5, | |
| .h5 { | |
| font-size: 18px; | |
| font-size: 1.125rem; | |
| } | |
| h6, | |
| .h6 { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| } | |
| .no-style-heading { | |
| font-size: 100%; | |
| } | |
| dl, | |
| menu, | |
| ol, | |
| ul { | |
| margin: 1em 0; | |
| } | |
| dd, | |
| ul ul, | |
| ol ol, | |
| ul ol, | |
| ol ul { | |
| margin: 0; | |
| } | |
| dd { | |
| margin-bottom: 1em; | |
| } | |
| menu, | |
| ol, | |
| ul { | |
| padding: 0 0 0 22px; | |
| } | |
| nav ul, | |
| nav ol { | |
| list-style: none; | |
| list-style-image: none; | |
| } | |
| .list-unstyled, | |
| .list-inline { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .list-unstyled li, | |
| .list-inline li { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| blockquote { | |
| font-size: 22px; | |
| font-size: 1.375rem; | |
| line-height: 32px; | |
| line-height: 2rem; | |
| color: #434343; | |
| margin: 1em 0; | |
| } | |
| blockquote p { | |
| margin: 1em 0; | |
| } | |
| cite { | |
| color: #434343; | |
| font-style: normal; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: normal; | |
| } | |
| q { | |
| quotes: none; | |
| } | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| word-wrap: break-word; | |
| font-family: 'courier new', monospace, serif; | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: normal; | |
| font-weight: normal; | |
| background-color: #f1f1f1; | |
| padding: 10px; | |
| } | |
| code { | |
| color: #111; | |
| } | |
| table { | |
| width: 100%; | |
| margin: 1em 0; | |
| table-layout: fixed; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| border-right: 1px solid #f1f1f1; | |
| border-bottom: 1px solid #f1f1f1; | |
| word-wrap: break-word; | |
| -ms-word-wrap: break-word; | |
| *white-space: normal; | |
| } | |
| table th, | |
| table td { | |
| padding: 8px; | |
| text-align: left; | |
| vertical-align: top; | |
| border-top: 1px solid #eee; | |
| border-left: 1px solid #eee; | |
| } | |
| table thead th, | |
| table tfoot th { | |
| vertical-align: bottom; | |
| background-color: #f1f1f1; | |
| color: #333; | |
| } | |
| table caption { | |
| padding: 8px; | |
| font-weight: normal; | |
| font-style: normal; | |
| border-bottom: 0; | |
| } | |
| fieldset { | |
| border: 0; | |
| padding: 0; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| white-space: normal; | |
| *margin-left: -7px; | |
| } | |
| label { | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| *vertical-align: middle; | |
| } | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| padding: 5px; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| line-height: normal; | |
| background-color: #fff; | |
| border: 1px solid #ccc; | |
| color: #111; | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| cursor: pointer; | |
| box-sizing: border-box; | |
| line-height: normal; | |
| margin: 0; | |
| padding: 0; | |
| *height: 13px; | |
| *width: 13px; | |
| } | |
| .checkbox { | |
| margin: 0.2em 0; | |
| } | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| margin-top: 0.05em; | |
| } | |
| .checkbox label { | |
| padding-left: 5px; | |
| overflow: hidden; | |
| display: table; | |
| *zoom: 1; | |
| } | |
| button, | |
| input { | |
| line-height: normal; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| textarea { | |
| overflow: auto; | |
| vertical-align: top; | |
| resize: none; | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; | |
| *overflow: visible; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| .button { | |
| border: 0; | |
| padding: 1em 3em; | |
| background-color: #e74b3c; | |
| color: #fff; | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .button:hover { | |
| background-color: #f43f3f; | |
| } | |
| .button:active { | |
| top: 1px; | |
| } | |
| .grey-button { | |
| background-color: #eee; | |
| color: #434343; | |
| } | |
| .grey-button:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .button[disabled], | |
| .button.disabled { | |
| color: #999; | |
| background-color: #f1f1f1; | |
| } | |
| .button-unstyled { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| color: #27ae61; | |
| text-decoration: underline; | |
| border: 0; | |
| background: transparent; | |
| height: auto; | |
| padding: 0; | |
| cursor: pointer; | |
| outline: 0; | |
| } | |
| .button-unstyled:hover { | |
| text-decoration: none; | |
| } | |
| .button-unstyled[disabled], | |
| .button-unstyled.disabled { | |
| text-decoration: none; | |
| color: #999; | |
| background-color: #ccc; | |
| } | |
| .left, | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| float: left; | |
| } | |
| .right { | |
| float: right; | |
| } | |
| .block, | |
| .checkbox { | |
| display: block; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .inline-block, | |
| audio, | |
| canvas, | |
| video, | |
| .list-inline, | |
| .list-inline li, | |
| .button { | |
| display: inline-block; | |
| *zoom: 1; | |
| *display: inline; | |
| } | |
| .none, | |
| [hidden], | |
| audio:not([controls]) { | |
| display: none; | |
| } | |
| .font-ultra-bold { | |
| font-weight: 900; | |
| } | |
| .font-bold, | |
| b, | |
| strong, | |
| .strong { | |
| font-weight: 700; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-weight: 500; | |
| } | |
| .font-light { | |
| font-weight: 300; | |
| } | |
| .font-thin { | |
| font-weight: 100; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-style: normal; | |
| } | |
| .capitalize { | |
| text-transform: capitalize; | |
| } | |
| .uppercase { | |
| text-transform: uppercase; | |
| } | |
| .text-left, | |
| table caption { | |
| text-align: left; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .text-center, | |
| .button { | |
| text-align: center; | |
| } | |
| .visuallyhidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| left: -9999em; | |
| } | |
| .image-left { | |
| margin-right: 20px; | |
| } | |
| .image-right { | |
| margin-left: 20px; | |
| } | |
| .section { | |
| position: relative; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .container-full { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .col { | |
| float: left; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| [class*="pull-"], | |
| [class*="push-"] { | |
| position: relative; | |
| } | |
| .no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .col-3, | |
| .col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .col-4, | |
| .col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .col-6, | |
| .col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .col-9, | |
| .col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .col-12 { | |
| width: 100%; | |
| } | |
| .push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .push-3, | |
| .push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .pull-3, | |
| .pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .push-4, | |
| .push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .pull-4, | |
| .pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .push-6, | |
| .push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .pull-6, | |
| .pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .push-9, | |
| .push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .pull-9, | |
| .pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .no-desktop { | |
| display: none; | |
| } | |
| .no-margin, | |
| .no-style-heading { | |
| margin: 0; | |
| } | |
| .no-padding { | |
| padding: 0; | |
| } | |
| @media only screen and (min-width: 740px) and (max-width: 959px) { | |
| .container, | |
| .tablet-container { | |
| max-width: 960px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .tablet-container:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .tablet-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .tablet-col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-col-3, | |
| .tablet-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-col-4, | |
| .tablet-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-col-6, | |
| .tablet-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-col-9, | |
| .tablet-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-col-12 { | |
| width: 100%; | |
| } | |
| .tablet-push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .tablet-push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .tablet-push-3, | |
| .tablet-push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-pull-3, | |
| .tablet-pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .tablet-push-4, | |
| .tablet-push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-pull-4, | |
| .tablet-pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .tablet-push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .tablet-push-6, | |
| .tablet-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-pull-6, | |
| .tablet-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .tablet-push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .tablet-push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .tablet-push-9, | |
| .tablet-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-pull-9, | |
| .tablet-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .tablet-push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .tablet-push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .tablet-no-push, | |
| .tablet-no-pull { | |
| left: auto; | |
| } | |
| .tablet-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .tablet-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 1em 0 0 0; | |
| display: block; | |
| } | |
| .tablet-full:first-child { | |
| margin-top: 0; | |
| } | |
| .tablet-text-left { | |
| text-align: left; | |
| } | |
| .tablet-text-right { | |
| text-align: right; | |
| } | |
| .tablet-text-center { | |
| text-align: center; | |
| } | |
| .tablet-left { | |
| float: left; | |
| } | |
| .tablet-right { | |
| float: right; | |
| } | |
| .tablet-no-float { | |
| float: none; | |
| } | |
| .tablet-no-margin { | |
| margin: 0; | |
| } | |
| .tablet-no-padding { | |
| padding: 0; | |
| } | |
| .no-tablet { | |
| display: none; | |
| } | |
| .show-tablet { | |
| display: block; | |
| } | |
| } | |
| @media only screen and (max-width: 739px) { | |
| .container, | |
| .mobile-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .mobile-container:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .mobile-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .mobile-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .mobile-push-1-3 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-pull-1-3 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .mobile-push-1-4 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-pull-1-4 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .mobile-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .mobile-no-push, | |
| .mobile-no-pull { | |
| left: auto; | |
| } | |
| .mobile-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .mobile-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 0.2em 0 0 0; | |
| display: block; | |
| } | |
| .mobile-full:first-child { | |
| margin-top: 0; | |
| } | |
| .mobile-text-left { | |
| text-align: left; | |
| } | |
| .mobile-text-right { | |
| text-align: right; | |
| } | |
| .mobile-text-center { | |
| text-align: center; | |
| } | |
| .mobile-left { | |
| float: left; | |
| } | |
| .mobile-right { | |
| float: right; | |
| } | |
| .mobile-no-float { | |
| float: none; | |
| } | |
| .mobile-no-margin { | |
| margin: 0; | |
| } | |
| .mobile-no-padding { | |
| padding: 0; | |
| } | |
| .no-mobile { | |
| display: none; | |
| } | |
| .show-mobile { | |
| display: block; | |
| } | |
| } | |
| @media print { | |
| * { | |
| background: transparent; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; | |
| } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| thead { | |
| display: table-header-group; | |
| } | |
| tr, | |
| img { | |
| page-break-inside: avoid; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| @page { | |
| margin: 0.5cm; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/* ========================================================== | |
| Base Default JavaScript | |
| -- Table of Contents -- | |
| */ | |
| // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW: | |
| paper.install(window); | |
| // VARIABLE FOR THE CANVAS ELEMENT | |
| var c; | |
| // EXECUTE CALLBACK WHEN THE PAGE IS READY: | |
| Zepto(function($){ | |
| // CANAVAS ELEMENT | |
| c = document.getElementById("canvas"); | |
| // DRAW STAGE | |
| drawStage(); | |
| }); | |
| function drawStage() | |
| { | |
| // GET WINDOW ELEMENT | |
| var _window = $( window ); | |
| // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS: | |
| paper.setup(c); | |
| // SET A STYLE FOR THE PROJECT | |
| project.currentStyle = { | |
| fillColor:'red' | |
| }; | |
| // CREATE A CIRCLE | |
| var leds = []; | |
| var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; | |
| //noprotect | |
| for(n=0;n<20;n++) | |
| { | |
| var row=[]; | |
| for(i=0;i<40;i++) | |
| { | |
| var round = new Path.Circle(new Point(10,10),10); | |
| round.position = new Point(i*20+20,n*20+20); | |
| // console.log(round.position.y); | |
| var nm = "r"+n+"c"+i; | |
| //round.name=nm; | |
| // console.log("-----"+round.name); | |
| round.name = 'red'; | |
| round.data.coordinates={r:n,c:i}; | |
| round.onMouseDown = function(event) { | |
| console.log(this.data.coordinates); | |
| if(this.name=='red'){this.fillColor = 'black'; | |
| this.name = 'black';} | |
| else | |
| { | |
| this.fillColor = 'red'; | |
| this.name = 'red'; | |
| } | |
| // CHANGE BLACK VALUE | |
| darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1; | |
| // RETURN NEW ARRAY | |
| console.log(visualiseArray(darkShape)); | |
| }; | |
| row.push(round); | |
| } | |
| leds.push(row); | |
| } | |
| // DRAW THE CÅURRENT VIEW | |
| // paper.view.draw(); | |
| // OR DRAW REPEATEDLY | |
| view.onFrame = function(event) { | |
| // MOVE COLOURS | |
| // for(n=0;n<20;n++) | |
| // { | |
| // for(i=0;i<40;i++) | |
| // { | |
| // //console.log(leds[n][i].name); | |
| // //c = new Color(Math.random(), Math.random(), Math.random()); | |
| // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random()); | |
| // } | |
| // } | |
| // UPDATE ARRAY | |
| for(n=0;n<20;n++) | |
| { | |
| for(i=0;i<40;i++) | |
| { | |
| } | |
| } | |
| }; | |
| } | |
| function visualiseArray(ar) | |
| { | |
| var visArr = "["; | |
| for(n=0;n<20;n++) | |
| { | |
| visArr = visArr.concat("["); | |
| for(i=0;i<40;i++) | |
| { | |
| //console.log(ar[n][i]); | |
| var v = ar[n][i]; | |
| visArr = visArr.concat(v); | |
| } | |
| visArr = visArr+="]"; | |
| if(n!=19)visArr = visArr.concat(","); | |
| } | |
| visArr = visArr.concat("]"); | |
| return visArr | |
| } | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *:before, | |
| *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| html, | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-family: sans-serif; | |
| } | |
| body, | |
| form, | |
| fieldset, | |
| legend, | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 100%; | |
| } | |
| body { | |
| font-family: sans-serif; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: 21px; | |
| line-height: 1.3125rem; | |
| color: #434343; | |
| background-color: #fff; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| .clear:before, | |
| .clear:after { | |
| content: ""; | |
| display: table; | |
| } | |
| .clear:after { | |
| clear: both; | |
| } | |
| .clear { | |
| zoom: 1; | |
| } | |
| i, | |
| em, | |
| .em, | |
| dfn, | |
| blockquote, | |
| q { | |
| font-style: italic; | |
| } | |
| a { | |
| color: #27ae61; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| p { | |
| margin: 0 0 1.6em 0; | |
| } | |
| pre { | |
| margin: 1em 0; | |
| } | |
| ul + p, | |
| ul + pre, | |
| ol + p, | |
| ol + pre { | |
| margin-top: 0; | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #111; | |
| } | |
| audio:not([controls]) { | |
| height: 0; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| img { | |
| border: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| hr { | |
| border: 0; | |
| background: none; | |
| outline: 0; | |
| background-color: #ddd; | |
| margin: 2em 0; | |
| *margin: 1em 0; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 1px; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| line-height: normal; | |
| font-weight: normal; | |
| margin: 0 0 0.33em 0; | |
| } | |
| h1, | |
| .h1 { | |
| font-size: 40px; | |
| font-size: 2.5rem; | |
| } | |
| h2, | |
| .h2 { | |
| font-size: 32px; | |
| font-size: 2rem; | |
| } | |
| h3, | |
| .h3 { | |
| font-size: 26px; | |
| font-size: 1.625rem; | |
| } | |
| h4, | |
| .h4 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| } | |
| h5, | |
| .h5 { | |
| font-size: 18px; | |
| font-size: 1.125rem; | |
| } | |
| h6, | |
| .h6 { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| } | |
| .no-style-heading { | |
| font-size: 100%; | |
| } | |
| dl, | |
| menu, | |
| ol, | |
| ul { | |
| margin: 1em 0; | |
| } | |
| dd, | |
| ul ul, | |
| ol ol, | |
| ul ol, | |
| ol ul { | |
| margin: 0; | |
| } | |
| dd { | |
| margin-bottom: 1em; | |
| } | |
| menu, | |
| ol, | |
| ul { | |
| padding: 0 0 0 22px; | |
| } | |
| nav ul, | |
| nav ol { | |
| list-style: none; | |
| list-style-image: none; | |
| } | |
| .list-unstyled, | |
| .list-inline { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .list-unstyled li, | |
| .list-inline li { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| blockquote { | |
| font-size: 22px; | |
| font-size: 1.375rem; | |
| line-height: 32px; | |
| line-height: 2rem; | |
| color: #434343; | |
| margin: 1em 0; | |
| } | |
| blockquote p { | |
| margin: 1em 0; | |
| } | |
| cite { | |
| color: #434343; | |
| font-style: normal; | |
| font-size: 16px; | |
| font-size: 1rem; | |
| line-height: normal; | |
| } | |
| q { | |
| quotes: none; | |
| } | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| word-wrap: break-word; | |
| font-family: 'courier new', monospace, serif; | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| line-height: normal; | |
| font-weight: normal; | |
| background-color: #f1f1f1; | |
| padding: 10px; | |
| } | |
| code { | |
| color: #111; | |
| } | |
| table { | |
| width: 100%; | |
| margin: 1em 0; | |
| table-layout: fixed; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| border-right: 1px solid #f1f1f1; | |
| border-bottom: 1px solid #f1f1f1; | |
| word-wrap: break-word; | |
| -ms-word-wrap: break-word; | |
| *white-space: normal; | |
| } | |
| table th, | |
| table td { | |
| padding: 8px; | |
| text-align: left; | |
| vertical-align: top; | |
| border-top: 1px solid #eee; | |
| border-left: 1px solid #eee; | |
| } | |
| table thead th, | |
| table tfoot th { | |
| vertical-align: bottom; | |
| background-color: #f1f1f1; | |
| color: #333; | |
| } | |
| table caption { | |
| padding: 8px; | |
| font-weight: normal; | |
| font-style: normal; | |
| border-bottom: 0; | |
| } | |
| fieldset { | |
| border: 0; | |
| padding: 0; | |
| } | |
| legend { | |
| border: 0; | |
| padding: 0; | |
| white-space: normal; | |
| *margin-left: -7px; | |
| } | |
| label { | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 100%; | |
| vertical-align: baseline; | |
| *vertical-align: middle; | |
| } | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| padding: 5px; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| line-height: normal; | |
| background-color: #fff; | |
| border: 1px solid #ccc; | |
| color: #111; | |
| } | |
| input[type=checkbox], | |
| input[type=radio] { | |
| cursor: pointer; | |
| box-sizing: border-box; | |
| line-height: normal; | |
| margin: 0; | |
| padding: 0; | |
| *height: 13px; | |
| *width: 13px; | |
| } | |
| .checkbox { | |
| margin: 0.2em 0; | |
| } | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| margin-top: 0.05em; | |
| } | |
| .checkbox label { | |
| padding-left: 5px; | |
| overflow: hidden; | |
| display: table; | |
| *zoom: 1; | |
| } | |
| button, | |
| input { | |
| line-height: normal; | |
| } | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| textarea { | |
| overflow: auto; | |
| vertical-align: top; | |
| resize: none; | |
| } | |
| button, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| cursor: pointer; | |
| -webkit-appearance: button; | |
| *overflow: visible; | |
| } | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: textfield; | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; | |
| box-sizing: content-box; | |
| } | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| .button { | |
| border: 0; | |
| padding: 1em 3em; | |
| background-color: #e74b3c; | |
| color: #fff; | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .button:hover { | |
| background-color: #f43f3f; | |
| } | |
| .button:active { | |
| top: 1px; | |
| } | |
| .grey-button { | |
| background-color: #eee; | |
| color: #434343; | |
| } | |
| .grey-button:hover { | |
| background-color: #f1f1f1; | |
| } | |
| .button[disabled], | |
| .button.disabled { | |
| color: #999; | |
| background-color: #f1f1f1; | |
| } | |
| .button-unstyled { | |
| font-size: 16px; | |
| font-size: 1rem; | |
| color: #27ae61; | |
| text-decoration: underline; | |
| border: 0; | |
| background: transparent; | |
| height: auto; | |
| padding: 0; | |
| cursor: pointer; | |
| outline: 0; | |
| } | |
| .button-unstyled:hover { | |
| text-decoration: none; | |
| } | |
| .button-unstyled[disabled], | |
| .button-unstyled.disabled { | |
| text-decoration: none; | |
| color: #999; | |
| background-color: #ccc; | |
| } | |
| .left, | |
| .checkbox input[type=checkbox], | |
| .checkbox input[type=radio] { | |
| float: left; | |
| } | |
| .right { | |
| float: right; | |
| } | |
| .block, | |
| .checkbox { | |
| display: block; | |
| } | |
| .inline { | |
| display: inline; | |
| } | |
| .inline-block, | |
| audio, | |
| canvas, | |
| video, | |
| .list-inline, | |
| .list-inline li, | |
| .button { | |
| display: inline-block; | |
| *zoom: 1; | |
| *display: inline; | |
| } | |
| .none, | |
| [hidden], | |
| audio:not([controls]) { | |
| display: none; | |
| } | |
| .font-ultra-bold { | |
| font-weight: 900; | |
| } | |
| .font-bold, | |
| b, | |
| strong, | |
| .strong { | |
| font-weight: 700; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-weight: 500; | |
| } | |
| .font-light { | |
| font-weight: 300; | |
| } | |
| .font-thin { | |
| font-weight: 100; | |
| } | |
| .font-normal, | |
| dt, | |
| cite, | |
| table thead th, | |
| table tfoot th, | |
| table caption, | |
| legend, | |
| input[type=text], | |
| input[type=password], | |
| input[type=email], | |
| input[type=search], | |
| input[type=tel], | |
| textarea { | |
| font-style: normal; | |
| } | |
| .capitalize { | |
| text-transform: capitalize; | |
| } | |
| .uppercase { | |
| text-transform: uppercase; | |
| } | |
| .text-left, | |
| table caption { | |
| text-align: left; | |
| } | |
| .text-right { | |
| text-align: right; | |
| } | |
| .text-center, | |
| .button { | |
| text-align: center; | |
| } | |
| .visuallyhidden { | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| height: 1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| width: 1px; | |
| left: -9999em; | |
| } | |
| .image-left { | |
| margin-right: 20px; | |
| } | |
| .image-right { | |
| margin-left: 20px; | |
| } | |
| .section { | |
| position: relative; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| .container-full { | |
| max-width: 960px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .col { | |
| float: left; | |
| padding-left: 10px; | |
| padding-right: 10px; | |
| } | |
| [class*="pull-"], | |
| [class*="push-"] { | |
| position: relative; | |
| } | |
| .no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .col-3, | |
| .col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .col-4, | |
| .col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .col-6, | |
| .col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .col-9, | |
| .col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .col-12 { | |
| width: 100%; | |
| } | |
| .push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .push-3, | |
| .push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .pull-3, | |
| .pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .push-4, | |
| .push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .pull-4, | |
| .pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .push-6, | |
| .push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .pull-6, | |
| .pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .push-9, | |
| .push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .pull-9, | |
| .pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .no-desktop { | |
| display: none; | |
| } | |
| .no-margin, | |
| .no-style-heading { | |
| margin: 0; | |
| } | |
| .no-padding { | |
| padding: 0; | |
| } | |
| @media only screen and (min-width: 740px) and (max-width: 959px) { | |
| .container, | |
| .tablet-container { | |
| max-width: 960px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .tablet-container:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .tablet-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .tablet-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .tablet-col-1 { | |
| width: 8.33333%; | |
| width: calc(100% / 12 * 1); | |
| width: -webkit-calc(100% / 12 * 1); | |
| width: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-col-2 { | |
| width: 16.66667%; | |
| width: calc(100% / 12 * 2); | |
| width: -webkit-calc(100% / 12 * 2); | |
| width: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-col-3, | |
| .tablet-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-col-4, | |
| .tablet-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-col-5 { | |
| width: 41.66665%; | |
| width: calc(100% / 12 * 5); | |
| width: -webkit-calc(100% / 12 * 5); | |
| width: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-col-6, | |
| .tablet-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-col-7 { | |
| width: 58.33333%; | |
| width: calc(100% / 12 * 7); | |
| width: -webkit-calc(100% / 12 * 7); | |
| width: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-col-8 { | |
| width: 66.66666%; | |
| width: calc(100% / 12 * 8); | |
| width: -webkit-calc(100% / 12 * 8); | |
| width: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-col-9, | |
| .tablet-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-col-10 { | |
| width: 83.33333%; | |
| width: calc(100% / 12 * 10); | |
| width: -webkit-calc(100% / 12 * 10); | |
| width: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-col-11 { | |
| width: 91.66666%; | |
| width: calc(100% / 12 * 11); | |
| width: -webkit-calc(100% / 12 * 11); | |
| width: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-col-12 { | |
| width: 100%; | |
| } | |
| .tablet-push-1 { | |
| left: 8.33333%; | |
| left: calc(100% / 12 * 1); | |
| left: -webkit-calc(100% / 12 * 1); | |
| left: -moz-calc(100% / 12 * 1); | |
| } | |
| .tablet-pull-1 { | |
| left: -8.33333%; | |
| left: calc(-100% / 12 * 1); | |
| left: -webkit-calc(-100% / 12 * 1); | |
| left: -moz-calc(-100% / 12 * 1); | |
| } | |
| .tablet-push-2 { | |
| left: 16.66667%; | |
| left: calc(100% / 12 * 2); | |
| left: -webkit-calc(100% / 12 * 2); | |
| left: -moz-calc(100% / 12 * 2); | |
| } | |
| .tablet-pull-2 { | |
| left: -16.66667%; | |
| left: calc(-100% / 12 * 2); | |
| left: -webkit-calc(-100% / 12 * 2); | |
| left: -moz-calc(-100% / 12 * 2); | |
| } | |
| .tablet-push-3, | |
| .tablet-push-1-4 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .tablet-pull-3, | |
| .tablet-pull-1-4 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .tablet-push-4, | |
| .tablet-push-1-3 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .tablet-pull-4, | |
| .tablet-pull-1-3 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .tablet-push-5 { | |
| left: 41.66665%; | |
| left: calc(100% / 12 * 5); | |
| left: -webkit-calc(100% / 12 * 5); | |
| left: -moz-calc(100% / 12 * 5); | |
| } | |
| .tablet-pull-5 { | |
| left: -41.66665%; | |
| left: calc(-100% / 12 * 5); | |
| left: -webkit-calc(-100% / 12 * 5); | |
| left: -moz-calc(-100% / 12 * 5); | |
| } | |
| .tablet-push-6, | |
| .tablet-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .tablet-pull-6, | |
| .tablet-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .tablet-push-7 { | |
| left: 58.33333%; | |
| left: calc(100% / 12 * 7); | |
| left: -webkit-calc(100% / 12 * 7); | |
| left: -moz-calc(100% / 12 * 7); | |
| } | |
| .tablet-pull-7 { | |
| left: -58.33333%; | |
| left: calc(-100% / 12 * 7); | |
| left: -webkit-calc(-100% / 12 * 7); | |
| left: -moz-calc(-100% / 12 * 7); | |
| } | |
| .tablet-push-8 { | |
| left: 66.66666%; | |
| left: calc(100% / 12 * 8); | |
| left: -webkit-calc(100% / 12 * 8); | |
| left: -moz-calc(100% / 12 * 8); | |
| } | |
| .tablet-pull-8 { | |
| left: -66.66666%; | |
| left: calc(-100% / 12 * 8); | |
| left: -webkit-calc(-100% / 12 * 8); | |
| left: -moz-calc(-100% / 12 * 8); | |
| } | |
| .tablet-push-9, | |
| .tablet-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .tablet-pull-9, | |
| .tablet-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .tablet-push-10 { | |
| left: 83.33333%; | |
| left: calc(100% / 12 * 10); | |
| left: -webkit-calc(100% / 12 * 10); | |
| left: -moz-calc(100% / 12 * 10); | |
| } | |
| .tablet-pull-10 { | |
| left: -83.33333%; | |
| left: calc(-100% / 12 * 10); | |
| left: -webkit-calc(-100% / 12 * 10); | |
| left: -moz-calc(-100% / 12 * 10); | |
| } | |
| .tablet-push-11 { | |
| left: 91.66666%; | |
| left: calc(100% / 12 * 11); | |
| left: -webkit-calc(100% / 12 * 11); | |
| left: -moz-calc(100% / 12 * 11); | |
| } | |
| .tablet-pull-11 { | |
| left: -91.66666%; | |
| left: calc(-100% / 12 * 11); | |
| left: -webkit-calc(-100% / 12 * 11); | |
| left: -moz-calc(-100% / 12 * 11); | |
| } | |
| .tablet-no-push, | |
| .tablet-no-pull { | |
| left: auto; | |
| } | |
| .tablet-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .tablet-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 1em 0 0 0; | |
| display: block; | |
| } | |
| .tablet-full:first-child { | |
| margin-top: 0; | |
| } | |
| .tablet-text-left { | |
| text-align: left; | |
| } | |
| .tablet-text-right { | |
| text-align: right; | |
| } | |
| .tablet-text-center { | |
| text-align: center; | |
| } | |
| .tablet-left { | |
| float: left; | |
| } | |
| .tablet-right { | |
| float: right; | |
| } | |
| .tablet-no-float { | |
| float: none; | |
| } | |
| .tablet-no-margin { | |
| margin: 0; | |
| } | |
| .tablet-no-padding { | |
| padding: 0; | |
| } | |
| .no-tablet { | |
| display: none; | |
| } | |
| .show-tablet { | |
| display: block; | |
| } | |
| } | |
| @media only screen and (max-width: 739px) { | |
| .container, | |
| .mobile-container { | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .container:first-child, | |
| .mobile-container:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-container-full { | |
| padding-left: 0; | |
| padding-right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| } | |
| .mobile-container-full:first-child { | |
| margin-left: auto; | |
| } | |
| .mobile-no-gutter { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .mobile-col-1-2 { | |
| width: 50%; | |
| width: calc(100% / 12 * 6); | |
| width: -webkit-calc(100% / 12 * 6); | |
| width: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-col-1-3 { | |
| width: 33.33333%; | |
| width: calc(100% / 12 * 4); | |
| width: -webkit-calc(100% / 12 * 4); | |
| width: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-col-1-4 { | |
| width: 25%; | |
| width: calc(100% / 12 * 3); | |
| width: -webkit-calc(100% / 12 * 3); | |
| width: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-col-3-4 { | |
| width: 75%; | |
| width: calc(100% / 12 * 9); | |
| width: -webkit-calc(100% / 12 * 9); | |
| width: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-push-1-2 { | |
| left: 50%; | |
| left: calc(100% / 12 * 6); | |
| left: -webkit-calc(100% / 12 * 6); | |
| left: -moz-calc(100% / 12 * 6); | |
| } | |
| .mobile-pull-1-2 { | |
| left: -50%; | |
| left: calc(-100% / 12 * 6); | |
| left: -webkit-calc(-100% / 12 * 6); | |
| left: -moz-calc(-100% / 12 * 6); | |
| } | |
| .mobile-push-1-3 { | |
| left: 25%; | |
| left: calc(100% / 12 * 3); | |
| left: -webkit-calc(100% / 12 * 3); | |
| left: -moz-calc(100% / 12 * 3); | |
| } | |
| .mobile-pull-1-3 { | |
| left: -25%; | |
| left: calc(-100% / 12 * 3); | |
| left: -webkit-calc(-100% / 12 * 3); | |
| left: -moz-calc(-100% / 12 * 3); | |
| } | |
| .mobile-push-1-4 { | |
| left: 33.33333%; | |
| left: calc(100% / 12 * 4); | |
| left: -webkit-calc(100% / 12 * 4); | |
| left: -moz-calc(100% / 12 * 4); | |
| } | |
| .mobile-pull-1-4 { | |
| left: -33.33333%; | |
| left: calc(-100% / 12 * 4); | |
| left: -webkit-calc(-100% / 12 * 4); | |
| left: -moz-calc(-100% / 12 * 4); | |
| } | |
| .mobile-push-3-4 { | |
| left: 75%; | |
| left: calc(100% / 12 * 9); | |
| left: -webkit-calc(100% / 12 * 9); | |
| left: -moz-calc(100% / 12 * 9); | |
| } | |
| .mobile-pull-3-4 { | |
| left: -75%; | |
| left: calc(-100% / 12 * 9); | |
| left: -webkit-calc(-100% / 12 * 9); | |
| left: -moz-calc(-100% / 12 * 9); | |
| } | |
| .mobile-no-push, | |
| .mobile-no-pull { | |
| left: auto; | |
| } | |
| .mobile-row { | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| } | |
| .mobile-full { | |
| left: auto; | |
| clear: both; | |
| float: none; | |
| width: 100%; | |
| margin: 0.2em 0 0 0; | |
| display: block; | |
| } | |
| .mobile-full:first-child { | |
| margin-top: 0; | |
| } | |
| .mobile-text-left { | |
| text-align: left; | |
| } | |
| .mobile-text-right { | |
| text-align: right; | |
| } | |
| .mobile-text-center { | |
| text-align: center; | |
| } | |
| .mobile-left { | |
| float: left; | |
| } | |
| .mobile-right { | |
| float: right; | |
| } | |
| .mobile-no-float { | |
| float: none; | |
| } | |
| .mobile-no-margin { | |
| margin: 0; | |
| } | |
| .mobile-no-padding { | |
| padding: 0; | |
| } | |
| .no-mobile { | |
| display: none; | |
| } | |
| .show-mobile { | |
| display: block; | |
| } | |
| } | |
| @media print { | |
| * { | |
| background: transparent; | |
| } | |
| a, | |
| a:visited { | |
| text-decoration: underline; | |
| } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; | |
| } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; | |
| } | |
| thead { | |
| display: table-header-group; | |
| } | |
| tr, | |
| img { | |
| page-break-inside: avoid; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| @page { | |
| margin: 0.5cm; | |
| } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; | |
| } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ========================================================== | |
| Base Default JavaScript | |
| -- Table of Contents -- | |
| */ | |
| // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW: | |
| paper.install(window); | |
| // VARIABLE FOR THE CANVAS ELEMENT | |
| var c; | |
| // EXECUTE CALLBACK WHEN THE PAGE IS READY: | |
| Zepto(function($){ | |
| // CANAVAS ELEMENT | |
| c = document.getElementById("canvas"); | |
| // DRAW STAGE | |
| drawStage(); | |
| }); | |
| function drawStage() | |
| { | |
| // GET WINDOW ELEMENT | |
| var _window = $( window ); | |
| // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS: | |
| paper.setup(c); | |
| // SET A STYLE FOR THE PROJECT | |
| project.currentStyle = { | |
| fillColor:'red' | |
| }; | |
| // CREATE A CIRCLE | |
| var leds = []; | |
| var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | |
| [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; | |
| //noprotect | |
| for(n=0;n<20;n++) | |
| { | |
| var row=[]; | |
| for(i=0;i<40;i++) | |
| { | |
| var round = new Path.Circle(new Point(10,10),10); | |
| round.position = new Point(i*20+20,n*20+20); | |
| // console.log(round.position.y); | |
| var nm = "r"+n+"c"+i; | |
| //round.name=nm; | |
| // console.log("-----"+round.name); | |
| round.name = 'red'; | |
| round.data.coordinates={r:n,c:i}; | |
| round.onMouseDown = function(event) { | |
| console.log(this.data.coordinates); | |
| if(this.name=='red'){this.fillColor = 'black'; | |
| this.name = 'black';} | |
| else | |
| { | |
| this.fillColor = 'red'; | |
| this.name = 'red'; | |
| } | |
| // CHANGE BLACK VALUE | |
| darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1; | |
| // RETURN NEW ARRAY | |
| console.log(visualiseArray(darkShape)); | |
| }; | |
| row.push(round); | |
| } | |
| leds.push(row); | |
| } | |
| // DRAW THE CÅURRENT VIEW | |
| // paper.view.draw(); | |
| // OR DRAW REPEATEDLY | |
| view.onFrame = function(event) { | |
| // MOVE COLOURS | |
| // for(n=0;n<20;n++) | |
| // { | |
| // for(i=0;i<40;i++) | |
| // { | |
| // //console.log(leds[n][i].name); | |
| // //c = new Color(Math.random(), Math.random(), Math.random()); | |
| // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random()); | |
| // } | |
| // } | |
| // UPDATE ARRAY | |
| for(n=0;n<20;n++) | |
| { | |
| for(i=0;i<40;i++) | |
| { | |
| } | |
| } | |
| }; | |
| } | |
| function visualiseArray(ar) | |
| { | |
| var visArr = "["; | |
| for(n=0;n<20;n++) | |
| { | |
| visArr = visArr.concat("["); | |
| for(i=0;i<40;i++) | |
| { | |
| //console.log(ar[n][i]); | |
| var v = ar[n][i]; | |
| visArr = visArr.concat(v); | |
| } | |
| visArr = visArr+="]"; | |
| if(n!=19)visArr = visArr.concat(","); | |
| } | |
| visArr = visArr.concat("]"); | |
| return visArr | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment