index.html

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="index.html">
  <title>AMP Surface CSS Framework</title>
  <meta name="description" content="AMP version of Surface CSS framework">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    @font-face{font-family:'Gentium Book Basic';font-style:normal;font-weight:400;src:local('Gentium Book Basic'),local('GentiumBookBasic'),url(https://fonts.gstatic.com/s/gentiumbookbasic/v7/IRFxB2matTxrjZt6a3FUnsQ6HWhO-urg7Zd40mHsFaI.ttf) format('truetype')}@font-face{font-family:'Gentium Book Basic';font-style:normal;font-weight:700;src:local('Gentium Book Basic Bold'),local('GentiumBookBasic-Bold'),url(https://fonts.gstatic.com/s/gentiumbookbasic/v7/T2vUYmWzlqUtgLYdlemGnbdiNC2EW_LVDR83j5uZVEA.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}body,html{width:100%}body{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;box-sizing:border-box}.g--1,.g--10,.g--11,.g--12,.g--2,.g--3,.g--4,.g--5,.g--7,.g--8,.g--9{margin-top:40px;margin-bottom:40px}.table-header,tr{line-height:52px}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}button{border:none;cursor:pointer}.g--1{width:8.33333%}.m--1{margin-left:8.33333%}.g--2{width:16.66667%}.m--2{margin-left:16.66667%}.g--3{width:25%}.m--3{margin-left:25%}.g--4{width:33.33333%}.m--4{margin-left:33.33333%}.g--5{width:41.66667%}.m--5{margin-left:41.66667%}.g--6{width:50%;margin-top:40px;margin-bottom:40px}.m--6{margin-left:50%}.g--7{width:58.33333%}.m--7{margin-left:58.33333%}.g--8{width:66.66667%}.m--8{margin-left:66.66667%}.g--9{width:75%}.m--9{margin-left:75%}.g--10{width:83.33333%}.m--10{margin-left:83.33333%}.g--11{width:91.66667%}.m--11{margin-left:91.66667%}.g--12{width:100%}.m--12{margin-left:100%}.m--0{margin-left:0}[class*=container]{display:-ms-flexbox;display:flex}.container--baseline{-ms-flex-align:baseline;align-items:baseline}.container--center{-ms-flex-align:center;align-items:center}.container--start{-ms-flex-align:start;align-items:flex-start}.container--end{-ms-flex-align:end;align-items:flex-end}.container--justify{-ms-flex-pack:center;justify-content:center}.container--wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.nudge--right{margin-right:20px}.nudge--left{margin-left:20px}@media screen and (max-width:1200px){.g-m--1,.g-m--10,.g-m--11,.g-m--12,.g-m--2,.g-m--3,.g-m--4,.g-m--5,.g-m--7,.g-m--8,.g-m--9{margin-top:26px;margin-bottom:26px}.g-m--1{width:8.33333%}.m-m--1{margin-left:8.33333%}.g-m--2{width:16.66667%}.m-m--2{margin-left:16.66667%}.g-m--3{width:25%}.m-m--3{margin-left:25%}.g-m--4{width:33.33333%}.m-m--4{margin-left:33.33333%}.g-m--5{width:41.66667%}.m-m--5{margin-left:41.66667%}.g-m--6{width:50%;margin-top:26px;margin-bottom:26px}.m-m--6{margin-left:50%}.g-m--7{width:58.33333%}.m-m--7{margin-left:58.33333%}.g-m--8{width:66.66667%}.m-m--8{margin-left:66.66667%}.g-m--9{width:75%}.m-m--9{margin-left:75%}.g-m--10{width:83.33333%}.m-m--10{margin-left:83.33333%}.g-m--11{width:91.66667%}.m-m--11{margin-left:91.66667%}.g-m--12{width:100%}.m-m--12{margin-left:100%}.m-m--0,.no-nudge--m{margin-left:0}.container--wrap--m{-ms-flex-wrap:wrap;flex-wrap:wrap}.no-nudge--m{margin-right:0}}@media screen and (max-width:900px){.g-s--1,.g-s--10,.g-s--11,.g-s--12,.g-s--2,.g-s--3,.g-s--4,.g-s--5,.g-s--7,.g-s--8,.g-s--9{margin-top:18px;margin-bottom:18px}.g-s--1{width:8.33333%}.m-s--1{margin-left:8.33333%}.g-s--2{width:16.66667%}.m-s--2{margin-left:16.66667%}.g-s--3{width:25%}.m-s--3{margin-left:25%}.g-s--4{width:33.33333%}.m-s--4{margin-left:33.33333%}.g-s--5{width:41.66667%}.m-s--5{margin-left:41.66667%}.g-s--6{width:50%;margin-top:18px;margin-bottom:18px}.m-s--6{margin-left:50%}.g-s--7{width:58.33333%}.m-s--7{margin-left:58.33333%}.g-s--8{width:66.66667%}.m-s--8{margin-left:66.66667%}.g-s--9{width:75%}.m-s--9{margin-left:75%}.g-s--10{width:83.33333%}.m-s--10{margin-left:83.33333%}.g-s--11{width:91.66667%}.m-s--11{margin-left:91.66667%}.g-s--12{width:100%}.m-s--12{margin-left:100%}.m-s--0{margin-left:0}.container--wrap--s{-ms-flex-wrap:wrap;flex-wrap:wrap}.nudge--right{margin-right:15px}.nudge--left{margin-left:15px}.no-nudge--s{margin-left:0;margin-right:0}}@media screen and (max-width:520px){.g-t--1,.g-t--10,.g-t--11,.g-t--12,.g-t--2,.g-t--3,.g-t--4,.g-t--5,.g-t--7,.g-t--8,.g-t--9{margin-top:10px;margin-bottom:10px}.g-t--1{width:8.33333%}.m-t--1{margin-left:8.33333%}.g-t--2{width:16.66667%}.m-t--2{margin-left:16.66667%}.g-t--3{width:25%}.m-t--3{margin-left:25%}.g-t--4{width:33.33333%}.m-t--4{margin-left:33.33333%}.g-t--5{width:41.66667%}.m-t--5{margin-left:41.66667%}.g-t--6{width:50%;margin-top:10px;margin-bottom:10px}.m-t--6{margin-left:50%}.g-t--7{width:58.33333%}.m-t--7{margin-left:58.33333%}.g-t--8{width:66.66667%}.m-t--8{margin-left:66.66667%}.g-t--9{width:75%}.m-t--9{margin-left:75%}.g-t--10{width:83.33333%}.m-t--10{margin-left:83.33333%}.g-t--11{width:91.66667%}.m-t--11{margin-left:91.66667%}.g-t--12{width:100%}.m-t--12{margin-left:100%}.m-t--0{margin-left:0}.container--wrap--t{-ms-flex-wrap:wrap;flex-wrap:wrap}.nudge--right{margin-right:10px}.nudge--left{margin-left:10px}.no-nudge--t{margin-left:0;margin-right:0}}.nav--horizontal ol,.nav--horizontal ul,.nav--vertical ol,.nav--vertical ul{margin-left:0}.card{box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07);border-radius:3px}.card,.tile{padding:20px;background:#fff}a,aside,body,div,h1,h2,h3,h4,h5,h6,header,input,label,menu,p{font-family:Roboto,sans-serif;color:#212121}h1,h2,h3,h4,h5,h6{margin-bottom:.8em;line-height:130%}p{margin-bottom:20px}h1{font-size:40px}h2{font-size:34px}h3{font-size:28px}h4{font-size:24.8px}h5{font-size:20.8px}h6{font-size:18px}a,p{font-size:16px}.subtitle{font-style:italic;color:#919191}body{background:#fcfcfc;line-height:130%}a:not([class^=btn]){background:linear-gradient(to top,rgba(40,225,189,.8) 50%,rgba(255,255,255,0) 50%);background-size:100% 200%;background-position:0 10%;background-repeat:no-repeat;text-decoration:none;color:inherit;transition:background-position .3s cubic-bezier(.64,.09,.08,1);will-change:background-position}a:not([class^=btn]):active{color:inherit}a:not([class^=btn]):hover{background-position:0 100%}a[class^=btn]{text-decoration:none}[class^=btn]{box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);position:relative;cursor:pointer;text-transform:uppercase;margin-bottom:10px;background-image:none;background-size:0;background-repeat:no-repeat;background-position:50% 50%;transition:background-color .3s cubic-bezier(.64,.09,.08,1),box-shadow .3s cubic-bezier(.64,.09,.08,1);will-change:background-size,background-image;padding:10px 20px;display:inline-block;font-family:Roboto;border:0}[class^=btn]:after{position:absolute;content:'';transition:none;background:radial-gradient(circle,#fff 95%,transparent 95%);background-size:.7%;background-position:50% 50%;background-repeat:no-repeat}[class^=btn]:focus{outline:0;background-size:1000%;transition:all 1s cubic-bezier(.64,.09,.08,1)}.btn--float{border-radius:50%;width:50px;height:50px;background-image:radial-gradient(circle,#ffeb3b 1%,#fff388 15%,transparent 30%);background-color:#ffeb3b;will-change:box-shadow,background-color;font-size:22px;padding:0}.btn--float:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,.16),0 4px 15px 0 rgba(0,0,0,.13);background-color:#fe5}.btn--raised,.modal-trigger,.modal-trigger:after{border-radius:1.98px;box-shadow:0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);background-image:radial-gradient(circle,#3498db 1%,#75b9e7 15%,transparent 30%);background-color:#3498db;will-change:box-shadow,background-color;color:#fff}.btn--raised:hover,.modal-trigger:hover,.modal-trigger:hover:after{box-shadow:0 5px 11px 0 rgba(0,0,0,.16),0 4px 15px 0 rgba(0,0,0,.13);background-color:#4aa3df}.btn--flat{background-image:radial-gradient(circle,#28e1bd 1%,#6bebd1 15%,transparent 30%);background-color:#fcfcfc;box-shadow:none}.btn--primary{background-image:radial-gradient(circle,#1abc9c 1%,#3ee4c4 15%,transparent 30%);background-color:#1abc9c}.btn--primary:hover{background-color:#1dd2af}.btn--secondary{background-image:radial-gradient(circle,#28e1bd 1%,#6bebd1 15%,transparent 30%);background-color:#28e1bd}.btn--secondary:hover{background-color:#3ee4c4}.btn--accent{background-image:radial-gradient(circle,#ffeb3b 1%,#fff388 15%,transparent 30%);background-color:#ffeb3b}.btn--accent:hover{background-color:#fe5}.btn--red{background-image:radial-gradient(circle,#e74c3c 1%,#ef8b80 15%,transparent 30%);background-color:#e74c3c}.btn--red:hover{background-color:#ea6153}.btn--yellow{background-image:radial-gradient(circle,#f1c40f 1%,#f5d657 15%,transparent 30%);background-color:#f1c40f}.btn--yellow:hover{background-color:#f2ca27}.btn--green{background-image:radial-gradient(circle,#4caf50 1%,#80c883 15%,transparent 30%);background-color:#4caf50}.btn--green:hover{background-color:#5cb860}.btn--blue{background-image:radial-gradient(circle,#2196f3 1%,#6ab8f7 15%,transparent 30%);background-color:#2196f3}.btn--blue:hover{background-color:#39a1f4}table{border-collapse:collapse;border-spacing:0;width:100%}.table-header{color:#474747;font-size:16px}tr{font-size:17px;border-bottom:solid 1px #ebebeb;will-change:background}tr:not(.table-header):hover{background:#ebebeb}td:first-child{padding-left:40px}td:last-child{padding-right:40px}header{width:100%;padding-top:10px;padding-bottom:10px;background:#1abc9c;margin-bottom:70px}header h1,header h2,header h3{color:#fff}@media screen and (max-width:1200px){td:first-child{padding-left:32px}td:last-child{padding-right:32px}header{margin-bottom:34px;padding-top:20px}}@media screen and (max-width:900px){td:first-child{padding-left:20px}td:last-child{padding-right:20px}header{padding-top:40px;padding-bottom:5px;margin-bottom:8.5px}}.nav--horizontal,.nav--vertical{margin-top:0;margin-bottom:0}.nav--horizontal{display:-ms-flexbox;display:flex}.nav--horizontal>li,.nav--horizontal>ul{display:-ms-flexbox;display:flex}.nav--horizontal a{display:inline-block}.nav--vertical a,.nav--vertical li,.nav--vertical ul{display:inline-block;float:left;clear:left}.nav--vertical li:first-child a{margin-bottom:7px}.nav--vertical li:last-child a{margin-top:7px}.nav--vertical li a{margin-top:7px;margin-bottom:7px}.logo-area{width:100%;height:152px;border-bottom:solid 1px #e0e0e0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#474747}.nav--super-vertical{margin-top:0;margin-bottom:0;position:fixed;height:100%;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;background:#fff;z-index:7;overflow-Y:auto;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}.dropdown ul,.toggle+label:after{box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)}.nav--super-vertical a,.nav--super-vertical label{width:100%;display:block;text-decoration:none;color:#474747;cursor:pointer;font-weight:500;padding:20px 24px;transition:none;background-image:none}.nav--super-vertical a:hover,.nav--super-vertical label:hover{background:#e0e0e0}.nav--super-vertical input{display:none}.nav--super-vertical input:checked+label{transition:background .2s cubic-bezier(.64,.09,.08,1),color .2s cubic-bezier(.64,.09,.08,1);background:#e0e0e0}.nav--super-vertical input:checked~.nav-collapsible-links{height:auto;transform:scaleY(1)}.nav--super-vertical input:checked~.nav-collapsible-links a{height:54px}.nav-collapsible-links{height:100%;transform:scaleY(0);transform-origin:0 0;transition:transform .3s cubic-bezier(.64,.09,.08,1)}.nav-collapsible-links a{padding:0 24px 0 34px;height:0;font-weight:400;transition:height .3s cubic-bezier(.64,.09,.08,1);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}#nav--horizontal-responsive,#nav--horizontal-responsive+label,#nav--super-vertical-responsive,#nav--super-vertical-responsive+label{display:none}@media screen and (max-width:1200px){.nav--super-vertical{padding-top:40px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.64,.09,.08,1)}#nav--super-vertical-responsive+label{display:block;position:fixed;z-index:8;top:0;left:0;padding:10px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07);cursor:pointer;transition:background .3s cubic-bezier(.64,.09,.08,1),color .3s cubic-bezier(.64,.09,.08,1)}#nav--super-vertical-responsive:checked+label{background:#1abc9c;color:#fff}#nav--super-vertical-responsive:checked~.nav--super-vertical{transform:translateX(0)}}@media screen and (max-width:900px){#nav--horizontal-responsive+label,.nav--horizontal>ul{background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)}.nav--horizontal{position:absolute;top:0;left:0;width:100%;z-index:7;transform:translateY(-100%);transition:transform .3s cubic-bezier(.64,.09,.08,1)}.nav--horizontal a,.nav--horizontal li,.nav--horizontal ul{width:100%;display:block;margin:0}.nav--horizontal a{line-height:40px}.nav--horizontal>ul{padding-top:50px}#nav--horizontal-responsive+label{display:block;position:fixed;z-index:8;top:0;left:0;padding:10px;cursor:pointer;transition:background .3s cubic-bezier(.64,.09,.08,1),color .3s cubic-bezier(.64,.09,.08,1)}#nav--horizontal-responsive:checked+label{background:#1abc9c;color:#fff}#nav--horizontal-responsive:checked~.nav--horizontal{transform:translateY(0)}}.nav--horizontal a,.nav--vertical a{color:#1abc9c;background:#fff;padding:10px;transition:none;will-change:background}.nav--horizontal a:hover,.nav--vertical a:hover{background:#e5e5e5}.dropdown{position:relative}.dropdown ul{position:absolute;background:#fff;left:0;transition:all .3s ease;transform:scale(0);transform-origin:0 0;z-index:2;width:100%}.dropdown ul li{width:100%;margin:0;padding:0}.dropdown ul li a{width:100%;padding:8px 10px;display:inline-block;margin:0;border-radius:0}.dropdown:hover ul{transform:scale(1)}ol,ul{list-style:none;margin-left:20px;margin-bottom:20px}ol li,ul li{margin-top:10px}ol{list-style-type:decimal;white-space:nowrap}footer{display:block;width:100%;background:#28e1bd;padding-top:20px;padding-bottom:20px}input[id*=modal-]{display:none}input[id*=modal-]:checked+label{outline:0;background-size:1000%;transition:all 1s cubic-bezier(.64,.09,.08,1)}input[id*=modal-]:checked+label:before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);transition:all .3s cubic-bezier(.64,.09,.08,1);z-index:9}input[id*=modal-]:checked~.modal-content{transition:opacity .3s cubic-bezier(.64,.09,.08,1);opacity:1;display:block;height:auto;width:auto;padding:40px;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10}input[id*=modal-]:checked~.modal-content *{height:auto;width:auto}.modal-trigger{white-space:pre;cursor:pointer;transition:all .3s cubic-bezier(.64,.09,.08,1);padding:10px 20px;background-size:1%;background-repeat:no-repeat;background-position:50% 50%}.modal-trigger:after{white-space:nowrap;padding:10px;cursor:pointer;transition:all .2s cubic-bezier(.64,.09,.08,1);background-image:none}.modal-content{position:fixed;opacity:0;height:0;background:#fff;border-radius:3px}.modal-content *{width:0;height:0}.tooltip{position:relative}.tooltip:hover:after{position:absolute;content:attr(data-text);background:#b8b8b8;border-radius:3px;padding:8px;bottom:-2.5em;left:50%;transform:translateX(-50%);z-index:2}.tabs{display:-ms-flexbox;display:flex;position:relative;padding:0}.tabs input[type=radio][name=tabs]{position:absolute;z-index:-1}.tabs input[type=radio][name=tabs]:checked+.tab-label-content label{color:#fff}.tabs input[type=radio][name=tabs]:checked+.tab-label-content .tab-content{display:block}.tabs input[type=radio][name=tabs]:first-of-type:checked~.slide{left:0}.tabs input[type=radio][name=tabs]:nth-of-type(1):checked~.slide-demo{left:0;left:calc((100% / 3) * 0)}.tabs input[type=radio][name=tabs]:nth-of-type(2):checked~.slide-demo{left:33.33333%;left:calc((100% / 3) * 1)}.tabs input[type=radio][name=tabs]:nth-of-type(3):checked~.slide-demo{left:66.66667%;left:calc((100% / 3) * 2)}.slide-demo{width:33.33333%;width:calc(100% / 3)}.tab-label-content:nth-of-type(1) .tab-content{left:0}.tab-label-content:nth-of-type(2) .tab-content{left:-100%}.tab-label-content:nth-of-type(3) .tab-content{left:-200%}.tab-content{width:300%}.tabs label{cursor:pointer;color:rgba(255,255,255,.8);background-color:#1abc9c;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:56px;transition:color .2s cubic-bezier(.64,.09,.08,1);will-change:color;width:100%}.tabs label,.text-center{text-align:center}.slide{background:#ffeb3b;height:4px;position:absolute;left:0;top:52px;transition:left .3s cubic-bezier(.64,.09,.08,1);will-change:left}.tab-label-content{width:100%}.tab-label-content .tab-content{position:relative;padding:20px;display:none}.card.tabs .tab-label-content:first-of-type label{border-top-left-radius:3px}.card.tabs .tab-label-content:nth-last-child(2) label{border-top-right-radius:3px}label{color:#2e2e2e}input[type=email],input[type=text],input[type=password]{margin-bottom:40px;width:200px;display:block;border:none;padding:10px 0;border-bottom:solid 1px #1abc9c;will-change:background-position;transition:all .3s cubic-bezier(.64,.09,.08,1);background:linear-gradient(to bottom,rgba(255,255,255,0) 96%,#1abc9c 96%);background-position:-200px 0;background-size:200px 100%;background-repeat:no-repeat;color:#0e6252}input[type=email]:focus,input[type=email]:valid,input[type=text]:focus,input[type=text]:valid,input[type=password]:focus,input[type=password]:valid{box-shadow:none;outline:0;background-position:0 0}input[type=email]:focus::-webkit-input-placeholder,input[type=email]:valid::-webkit-input-placeholder,input[type=text]:focus::-webkit-input-placeholder,input[type=text]:valid::-webkit-input-placeholder,input[type=password]:focus::-webkit-input-placeholder,input[type=password]:valid::-webkit-input-placeholder{color:#1abc9c;font-size:11px;transform:translateY(-20px);visibility:visible}input[type=email]::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder{transition:all .2s cubic-bezier(.64,.09,.08,1)}input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]){position:relative;cursor:pointer}input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):before{content:'';width:16px;height:16px;border:2px solid #1abc9c;border-radius:3px;background:#fff;position:absolute}input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):after{content:'✓';color:#fff;background:#1abc9c;position:absolute;top:0;left:0;width:16px;height:16px;border:2px solid #1abc9c;border-radius:3px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0;transition:opacity .3s cubic-bezier(.64,.09,.08,1);will-change:opacity}input[type=radio]:after,input[type=radio]:before{transition:all .3s cubic-bezier(.64,.09,.08,1);height:16px;width:16px;content:''}input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):checked:after{opacity:1}input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):focus{outline:0}input[type=radio]{position:relative;top:2px;left:2px;margin:0 8px;cursor:pointer}input[type=radio]:before{background-color:#fff;border-radius:50%;border:2px solid #1abc9c;display:inline-block;position:absolute;top:-2px;left:-2px;background-image:radial-gradient(circle,#1abc9c 40%,#fff 50%);background-size:0;background-position:50% 50%;background-repeat:no-repeat;will-change:background-size;z-index:2}input[type=radio]:after{background:#fff;border-radius:50%;position:absolute}input[type=radio]:checked:before{background-size:14px 14px}input[type=radio]:focus,input[type=range]:focus{outline:0}select{border:none;border-bottom:solid 1px #9e9e9e;color:#212121;padding:6px;cursor:pointer}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{height:3px;cursor:pointer;background:#9e9e9e}input[type=range]::-webkit-slider-thumb{height:16px;width:16px;border-radius:50%;background:#2ecc71;cursor:pointer;-webkit-appearance:none;margin-top:-6px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)}input[type=range]::-moz-range-track{height:3px;cursor:pointer;background:#9e9e9e}input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;border:none;background:#2ecc71;cursor:pointer}input[type=range]::-ms-track{cursor:pointer;background:0 0;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#2ecc71}input[type=range]::-ms-fill-upper{background:#9e9e9e}input[type=range]::-ms-thumb{background:#2ecc71}.toggle{display:none}.toggle:checked+label{background:#93e7b6}.toggle:checked+label:after{background:#2ecc71;margin-left:18px}.toggle+label{position:absolute;width:30px;height:6px;margin-top:12px;background:#9e9e9e;transition:background .3s cubic-bezier(.64,.09,.08,1);will-change:background}.toggle+label:after{position:absolute;content:'';width:14px;height:14px;border-radius:50%;background:#dedede;display:inline-block;cursor:pointer;margin-top:-4px;margin-left:-1px;transition:all .3s ease;will-change:background,margin-left}textarea{border:1px solid #9e9e9e;transition:border .3s cubic-bezier(.64,.09,.08,1)}textarea:focus{border:1px solid #1abc9c;outline:0}label[for*=lightbox-]{cursor:pointer;width:100%;transition:none}input[id*=lightbox-]{display:none}input[id*=lightbox-]:checked{display:block;position:absolute;top:50%;left:50%}input[id*=lightbox-]:checked:before{content:'';position:fixed;z-index:9;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4)}input[id*=lightbox-]:checked+label{top:50%;left:50%;transform:translate(-50%,-50%);width:50vw;position:fixed;z-index:10}.right{float:right}.left{float:left}.clear{clear:both}.inline{display:inline}.inline-block{display:inline-block}.block{display:block}.fixed{display:fixed}.no-pad{padding:0}.no-margin-vertical{margin-top:0;margin-bottom:0}.no-margin{margin:0}.center{margin:0 auto}.fade-in-from-top{opacity:0;transform:translateY(-6px);animation:fadeInVert .5s ease-out forwards;-webkit-animation:fadeInVert .5s ease-out forwards}.fade-in-from-bottom{opacity:0;transform:translateY(6px);animation:fadeInVert .5s ease-out forwards;-webkit-animation:fadeInVert .5s ease-out forwards}@keyframes fadeInVert{to{opacity:1;transform:translateY(0)}}.fade-in-from-left{opacity:0;transform:translateX(-6px);animation:fadeInHoriz .5s ease-out forwards;-webkit-animation:fadeInHoriz .5s ease-out forwards}.fade-in-from-right{opacity:0;transform:translateX(6px);animation:fadeInHoriz .5s ease-out forwards;-webkit-animation:fadeInHoriz .5s ease-out forwards}@keyframes fadeInHoriz{to{opacity:1;transform:translateX(0)}}.anim-delay--5{animation-delay:.5s;-webkit-animation-delay:.5s}.anim-delay--10{animation-delay:1s;-webkit-animation-delay:1s}.anim-delay--15{animation-delay:1.5s;-webkit-animation-delay:1.5s}.anim-delay--20{animation-delay:2s;-webkit-animation-delay:2s}.anim-delay--25{animation-delay:2.5s;-webkit-animation-delay:2.5s}.anim-delay--30{animation-delay:3s;-webkit-animation-delay:3s}.anim-delay--35{animation-delay:3.5s;-webkit-animation-delay:3.5s}.anim-delay--40{animation-delay:4s;-webkit-animation-delay:4s}.anim-delay--45{animation-delay:4.5s;-webkit-animation-delay:4.5s}.anim-delay--50{animation-delay:5s;-webkit-animation-delay:5s}audio,img,video{width:100%;vertical-align:middle}.alert-wrap{position:relative}.alert{padding-bottom:50px}#alert-check,#alert-check:checked~div,#alert-check:checked~label,[id*=collapsible-]{display:none}#alert-check+label{position:absolute;right:16px;bottom:10px;cursor:pointer}[id*=collapsible-]:checked~[class*=collapsible-][class$=area]{transform:scaleY(1);height:auto;padding:15px 20px;margin-bottom:20px}[id*=collapsible-]:checked+label:before{transform:rotate(45deg)}[id*=collapsible-]:checked+label:after{transform:rotate(-45deg)}label[for*=collapsible-]{width:100%;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;padding:15px 24px;border-bottom:solid 1px #ebebeb;color:#474747;border-radius:3px}label[for*=collapsible-]:after,label[for*=collapsible-]:before{content:'';position:absolute;right:20px;width:2px;height:8px;background:#9e9e9e;transition:all .3s ease}label[for*=collapsible-]:before{margin-top:6px;transform:rotate(-45deg)}label[for*=collapsible-]:after{margin-top:6px;transform:rotate(45deg);right:15px}[class*=collapsible-][class$=area]{transform:scaleY(0);transform-origin:0 0;height:0;will-change:height,transform;transition:all .3s ease;padding-left:20px}code{font-family:monospace;font-size:16px;padding-left:40px;padding-right:40px;min-width:500px;max-width:800px}@media screen and (max-width:900px){code{width:400px}}@media screen and (max-width:520px){code{width:100%;min-width:100%;max-width:100%}}.bg--turqoise{background:#1abc9c}.bg--green-sea{background:#16a085}.bg--emerald{background:#2ecc71}.bg--nephritis{background:#27ae60}.bg--green{background:#4caf50}.bg--light-green{background:#8bc34a}.bg--lime{background:#cddc39}.bg--river{background:#3498db}.bg--belize{background:#2980b9}.bg--asphalt{background:#34495e}.bg--midnight-blue{background:#2c3e50}.bg--blue{background:#2196f3}.bg--light-blue{background:#03a9f4}.bg--cyan{background:#00bcd4}.bg--teal{background:#009688}.bg--alizarin{background:#e74c3c}.bg--pomegranate{background:#c0392b}.bg--red{background:#f44336}.bg--carrot{background:#e67e22}.bg--pumpkin{background:#d35400}.bg--dull-orange{background:#f39c12}.bg--orange{background:#ff9800}.bg--blood-orange{background:#ff5722}.bg--amber{background:#ffc107}.bg--sunflower{background:#f1c40f}.bg--yellow{background:#ffeb3b}.bg--amethyst{background:#9b59b6}.bg--plum{background:#8e44ad}.bg--purple{background:#9c27b0}.bg--deep-purple{background:#673ab7}.bg--pink{background:#e91e63}.bg--indigo{background:#3f51b5}.bg--brown{background:#795548}.bg--grey{background:#9e9e9e}.bg--gun-metal{background:#607d8b}.bg--asbestos{background:#7f8c8d}.bg--concrete{background:#95a5a6}.bg--silver{background:#bdc3c7}.bg--clouds{background:#dde4e6}.bg--paper{background:#efefef}.bg--black{background:#212121}.color--turqoise{color:#1abc9c}.color--green-sea{color:#16a085}.color--emerald{color:#2ecc71}.color--nephritis{color:#27ae60}.color--green{color:#4caf50}.color--light-green{color:#8bc34a}.color--lime{color:#cddc39}.color--river{color:#3498db}.color--belize{color:#2980b9}.color--asphalt{color:#34495e}.color--midnight-blue{color:#2c3e50}.color--blue{color:#2196f3}.color--light-blue{color:#03a9f4}.color--cyan{color:#00bcd4}.color--teal{color:#009688}.color--alizarin{color:#e74c3c}.color--pomegranate{color:#c0392b}.color--red{color:#f44336}.color--carrot{color:#e67e22}.color--pumpkin{color:#d35400}.color--dull-orange{color:#f39c12}.color--orange{color:#ff9800}.color--blood-orange{color:#ff5722}.color--amber{color:#ffc107}.color--sunflower{color:#f1c40f}.color--yellow{color:#ffeb3b}.color--amethyst{color:#9b59b6}.color--plum{color:#8e44ad}.color--purple{color:#9c27b0}.color--deep-purple{color:#673ab7}.color--pink{color:#e91e63}.color--indigo{color:#3f51b5}.color--brown{color:#795548}.color--grey{color:#9e9e9e}.color--gun-metal{color:#607d8b}.color--asbestos{color:#7f8c8d}.color--concrete{color:#95a5a6}.color--silver{color:#bdc3c7}.color--clouds{color:#dde4e6}.color--paper{color:#efefef}.color--white{color:#fff}.color--black{color:#212121}.color--primary{color:#1abc9c}.color--secondary{color:#28e1bd}.color--accent{color:#ffeb3b}
    pre{overflow:auto}
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<div class="g--12">
		<h1 class="text-center">⚡ AMP Surface CSS Framework</h1>
		<h2 class="text-center"><a href="https://github.com/niutech/amp-surface/">Download from GitHub</a></h2>
		<header>
			<h1 class="m--1 g--4 g-s--12">Alerts</h1>
		</header>
		<div class="g--10 m--1">
			<p>Alerts are dialog boxes that the user can make disappear.</p>
			<div class="alert-wrap g--5 g-s--12 g-s--12">
				<input type="checkbox" id="alert-check">
				<label for="alert-check">CLOSE</label>
				<div class="alert card">
					<p>Surface rules! That is all.</p>
				</div>
			</div>
			<h2>Code</h2>
			<pre>
				<code>
&lt;div class=&quot;alert-wrap&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;alert-check&quot;&gt;
  &lt;label for=&quot;alert-check&quot;&gt;CLOSE&lt;/label&gt;
  &lt;div class=&quot;alert&quot;&gt;
    &lt;p&gt;Surface rules! That is all.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Animations</h1>
		</header>
		<div class="g--10 m--1">
			<p>Animations bring your page to life.</p>
			<div class="g--5 g-s--12 g-s--12 tile fade-in-from-top">
				I fade in from the top
			</div>
			<div class="g--5 g-s--12 g-s--12 tile fade-in-from-left anim-delay--15">
				I fade in from the right with a 1.5s delay
			</div>
			<h2>Code</h2>
			<h3>Direction</h3>
			<p>There are 4 classes for fading in.</p>
			<ul>
				<li>.fade-in-from-top</li>
				<li>.fade-in-from-bottom</li>
				<li>.fade-in-from-left</li>
				<li>.fade-in-from-right</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;fade-in-from-top&quot;&gt;
  I fade in from the top
&lt;/div&gt;
&lt;div class=&quot;fade-in-from-left&quot;&gt;
  I fade in from the right
&lt;/div&gt;
				</code>
			</pre>
			<h3>Delays</h3>
			<p>You can delay an animation for up to 10 seconds.</p>
			<p>The suffixes go up to 100. 5 is 0.5s, 25 is 2.5s and so on.</p>
			<ul>
				<li>.anim-delay--5</li>
				<li>.anim-delay--10</li>
				<li>.anim-delay--15</li>
				<li>.anim-delay--20</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;fade-in-from-top anim-delay--5&quot;&gt;
  I have 0.5s delay
&lt;/div&gt;
&lt;div class=&quot;fade-in-from-left anim-delay--50&quot;&gt;
  I have a 5s delay
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Buttons</h1>
		</header>
		<div class="g--10 m--1">
			<p>Buttons are essential web elements for interaction.</p>
			<div class="g--5 g-s--12">
				<button class="btn--flat">Flat</button>
				<button class="btn--float nudge--left nudge--right color--white btn--primary">+</button>
				<button class="btn--raised">Raised</button>
			</div>
			<div class="g--7 g-s--12">
				<button class="btn--raised btn--red">Red</button>
				<button class="btn--raised btn--yellow">Yellow</button>
				<button class="btn--raised btn--green">Green</button>
				<button class="btn--raised btn--blue">Blue</button>
				<button class="btn--raised btn--primary">Primary</button>
				<button class="btn--raised btn--secondary color--black">Secondary</button>
				<button class="btn--raised btn--accent color--black">Accent</button>
			</div>
			<h2>Code</h2>
			<h3>Types</h3>
			<p>There are 3 different types of button.</p>
			<ul>
				<li>.btn--flat</li>
				<li>.btn--float</li>
				<li>.btn--raised</li>
			</ul>
			<h3>Colors</h3>
			<p>By default, the flat and the raised buttons are the $primary variable color and the floating button is the $accent variable. If you want a specific color, there are 7 different colors.</p>
			<ul>
				<li>.btn--red</li>
				<li>.btn--yellow</li>
				<li>.btn--green</li>
				<li>.btn--blue</li>
				<li>.btn--primary</li>
				<li>.btn--secondary</li>
				<li>.btn--accent</li>
			</ul>
			<pre>
				<code>
&lt;button class=&quot;btn--flat&quot;&gt;Flat&lt;/button&gt;
&lt;button class=&quot;btn--float&quot;&gt;+&lt;/button&gt;
&lt;button class=&quot;btn--raised&quot;&gt;Raised&lt;/button&gt;

&lt;button class=&quot;btn--raised btn--green&quot;&gt;Green&lt;/button&gt;
&lt;button class=&quot;btn--raised btn--blue&quot;&gt;Blue&lt;/button&gt;
&lt;button class=&quot;btn--raised btn--accent&quot;&gt;Accent&lt;/button&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Cards &amp; Tiles</h1>
		</header>
		<div class="g--10 m--1">
			<p>Cards and tiles are fundamental components of Google's Material Design guidelines.</p>
			<div class="g--5 g-s--12 card">
				I'm a card!
			</div>
			<div class="g--5 g-s--12 tile">
				I'm a tile!
			</div>
			<h2>Code</h2>
			<ul>
				<li>.card</li>
				<li>.tile</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;card&quot;&gt;
  I&apos;m a card!
&lt;/div&gt;
&lt;div class=&quot;tile&quot;&gt;
  I&apos;m a tile!
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Collapsibles</h1>
		</header>
		<div class="g--10 m--1">
			<p>Have information that the user might want be don't want it cluttering up the page if they don't want it? Use a collapsible.</p>
			<div class="g--5 g-s--12">
				<div class="collapsible-wrap card no-pad">
					<input type="checkbox" id="collapsible-1">
					<label for="collapsible-1">Collapsible 1</label>
					<div class="collapsible-1-area">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare elit aliquet, eleifend eros a, viverra nibh. Suspendisse rhoncus sed sem quis placerat. Maecenas sed malesuada ipsum, vel luctus odio. Morbi quis orci eu nisl consequat molestie. Suspendisse tempor nulla sapien, non mattis nibh mollis in.</p>
					</div>
				</div>
				<div class="collapsible-wrap card no-pad">
					<input type="checkbox" id="collapsible-2">
					<label for="collapsible-2">Collapsible 2</label>
					<div class="collapsible-2-area">
						<p>Cras lobortis elit sem, ut vulputate nisl aliquet vitae. Fusce luctus orci tincidunt, efficitur arcu nec, mattis tellus. Praesent mollis laoreet nibh in consectetur. Ut facilisis nunc eget lectus consequat, sed auctor nibh dapibus. Nam erat velit, eleifend quis gravida ac, cursus ut tellus. Praesent ut dui justo.</p>
					</div>
				</div>
				<div class="collapsible-wrap card no-pad">
					<input type="checkbox" id="collapsible-3">
					<label for="collapsible-3">Collapsible 3</label>
					<div class="collapsible-3-area">
						<p>Donec efficitur condimentum lacus, ut efficitur libero pretium quis. Donec accumsan, dolor id congue vulputate, ante lacus consectetur mauris, sit amet aliquet turpis nunc vitae tortor.</p>
					</div>
				</div>
			</div>
			<h2>Code</h2>
			<p>If you want a collapsible to be open by default, simply add the checked attribute to the input. For example, the left hand navigation is checked to be open when in the documentation.</p>
			<pre>
				<code>
&lt;div class=&quot;collapsible-wrap card no-pad&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;collapsible-1&quot;&gt;
  &lt;label for=&quot;collapsible-1&quot;&gt;Collapsible 1&lt;/label&gt;
  &lt;div class=&quot;collapsible-1-area&quot;&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;collapsible-wrap card no-pad&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;collapsible-2&quot;&gt;
  &lt;label for=&quot;collapsible-2&quot;&gt;Collapsible 2&lt;/label&gt;
  &lt;div class=&quot;collapsible-2-area&quot;&gt;
    &lt;p&gt;Cras lobortis elit sem.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;collapsible-wrap card no-pad&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;collapsible-3&quot;&gt;
  &lt;label for=&quot;collapsible-3&quot;&gt;Collapsible 3&lt;/label&gt;
  &lt;div class=&quot;collapsible-3-area&quot;&gt;
    &lt;p&gt;Donec efficitur condimentum lacus.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Colors</h1>
		</header>
		<h2 class="g--11 m--1">Background</h2>
		<div class="g--12 container--wrap">
			<div class="tile g--2 g-s--4 no-margin-vertical bg--red color--white">Red</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--alizarin color--white">Alizarin</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--pomegranate color--white">Pomegranate</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--pumpkin color--white">Pumpkin</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--carrot color--white">Carrot</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--blood-orange color--white">Blood Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--orange color--white">Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--dull-orange color--white">Dull Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--amber color--white">Amber</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--sunflower color--white">Sunflower</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--yellow">Yellow</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--lime color--white">Lime</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--light-green color--white">Light Green</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--green color--white">Green</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--nephritis color--white">Nephritis</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--emerald color--white">Emerald</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--green-sea color--white">Green Sea</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--turqoise color--white">Turqoise</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--teal color--white">Teal</div>	
			<div class="tile g--2 g-s--4 no-margin-vertical bg--cyan color--white">Cyan</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--light-blue color--white">Light Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--blue color--white">Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--river color--white">River</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--belize color--white">Belize</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--asphalt color--white">Asphalt</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--midnight-blue color--white">Midnight Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--indigo color--white">Indigo</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--deep-purple color--white">Deep Purple</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--purple color--white">Purple</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--plum color--white">Plum</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--amethyst color--white">Amethyst</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--pink color--white">Pink</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--brown color--white">Brown</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--asbestos color--white">Asbestos</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--gun-metal color--white">Gun Metal</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--grey color--white">Grey</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--silver color--white">Silver</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--concrete color--white">Concrete</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--clouds">Clouds</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--paper">Paper</div>
			<div class="tile g--2 g-s--4 no-margin-vertical bg--black color--white">Black</div>
		</div>
		<div class="g--11 m--1">
			<h3>Code</h3>
			<p>Use the .bg-- class suffixed with your color of choice.</p>
			<pre>
				<code>
&lt;div class=&quot;tile bg--pink&quot;&gt;Pink&lt;/div&gt;
				</code>
			</pre>
		</div>
		<h2 class="g--11 m--1">Text</h2>
		<div class="g--12 container--wrap">
			<div class="tile g--2 g-s--4 no-margin-vertical color--red">Red</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--alizarin">Alizarin</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--pomegranate">Pomegranate</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--pumpkin">Pumpkin</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--carrot">Carrot</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--blood-orange">Blood Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--orange">Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--dull-orange">Dull Orange</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--amber">Amber</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--sunflower">Sunflower</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--yellow">Yellow</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--lime">Lime</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--light-green">Light Green</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--green">Green</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--nephritis">Nephritis</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--emerald">Emerald</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--green-sea">Green Sea</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--turqoise">Turqoise</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--teal">Teal</div>	
			<div class="tile g--2 g-s--4 no-margin-vertical color--cyan">Cyan</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--light-blue">Light Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--blue">Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--river">River</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--belize">Belize</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--asphalt">Asphalt</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--midnight-blue">Midnight Blue</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--indigo">Indigo</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--deep-purple">Deep Purple</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--purple">Purple</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--plum">Plum</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--amethyst">Amethyst</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--pink">Pink</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--brown">Brown</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--asbestos">Asbestos</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--gun-metal">Gun Metal</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--grey">Grey</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--silver">Silver</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--concrete">Concrete</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--clouds bg--grey">Clouds</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--paper bg--grey">Paper</div>
			<div class="tile g--2 g-s--4 no-margin-vertical color--black">Black</div>
		</div>
		<div class="g--11 m--1">
			<h3>Code</h3>
			<p>Use the .color-- class suffixed with your color of choice.</p>
			<pre>
				<code>
&lt;div class=&quot;tile color--pink&quot;&gt;Pink&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Footer</h1>
		</header>
		<div class="g--10 m--1">
			<p>Use a footer to show extra information or links that aren't necessary elsewhere.</p>
	    <footer class="g--12">
		    <div class="g--10 m--1 color--white">
			    Some footer information
		    </div>
	    </footer>
			<h2>Code</h2>
			<p>Simply use the HTML5 footer element.</p>
			<pre>
				<code>
&lt;footer class=&quot;g--10 m--2 no-margin-vertical&quot;&gt;
  &lt;div class=&quot;g--10 m--1&quot;&gt;
    Some footer information
  &lt;/div&gt;
&lt;/footer&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Forms</h1>
		</header>
		<div class="g--10 m--1">
			<p>Form elements.</p>
			<form action="index.html" target="_top" class="card g--4 g-m--6 g-s--10 g-t--12">
				<input type="text" required placeholder="Username">
				<label>Label</label>
				<div class="g--12">
					<textarea></textarea>
				</div>
				<div class="g--12">
					<input type="checkbox">
					<input type="radio" name="radio">
					<input type="radio" name="radio">
					<input type="radio" name="radio">
				</div>
				<div class="g--12">
					<select>
						<option>Option 1</option>
						<option>Option 2</option>
						<option>Option 3</option>
						<option>Option 4</option>
					</select>
				</div>
				<div class="g--12">
					<input type="range">
					<input type="checkbox" class="toggle" id="toggle">
					<label for="toggle"></label>
				</div>
			</form>
			<h2>Code</h2>
			<h3>HTML5 Elements</h3>
			<p>The following elements need only for you to use the HTML5 elements.</p>
			<ul>
				<li>Text inputs (password, text)</li>
				<li>Textarea</li>
				<li>Checkboxes</li>
				<li>Radio Buttons</li>
				<li>Selects</li>
				<li>Range selector</li>
			</ul>
			<pre>
				<code>
&lt;input type=&quot;text&quot; required placeholder=&quot;Username&quot;&gt;
&lt;input type=&quot;password&quot; required placeholder=&quot;Password&quot;&gt;
&lt;label&gt;Label&lt;/label&gt;
&lt;textarea&gt;&lt;/textarea&gt;
&lt;input type=&quot;checkbox&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;radio&quot;&gt;
&lt;input type=&quot;range&quot;&gt;
				</code>
			</pre>
			<h3>Class Based</h3>
			<p>The following elements need to be used as the code shows, in order and with classes.</p>
			<ul>
				<li>Toggles</li>
			</ul>
			<pre>
				<code>
&lt;input type=&quot;checkbox&quot; class=&quot;toggle&quot; id=&quot;toggle&quot;&gt;
&lt;label for=&quot;toggle&quot;&gt;&lt;/label&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Grid</h1>
		</header>
		<div class="g--10 m--1">
			<p>The grid system is the basis of Surface layouts.</p>
			<div class="card g--5 g-s--12">
				I'm a g--5 and g-s--12
			</div>
			<div class="card g--1 g-m--12">
				I'm a g--1 and g-m--12
			</div>
			<div class="card g--2 m--3 g-m--8 m-m--2">
				I'm a g--2 with a m--3, and a g-m--8 with a m-m--2
			</div>
			<div class="card g--3 m--1">
				I'm a g--3 with a m--1
			</div>
			<div class="container g--6 g-s--12">
				<div class="g--5 g-s--12 tile">
					We're in a container
				</div>
				<div class="g--5 g-s--12 tile">
					We're in a container
				</div>
			</div>
			<h2>Code</h2>
			<h3>Grid</h3>
			<p>The grid system by default is 12 columns wide. This can be changed in the _variables file by altering the $grid-columns variable.</p>
			<p>To give an element a grid size, use the class .g-- suffixed by the size of the grid. For example, .g--5 g-s--12 will be 5/12ths wide.</p>
			<p>To make your grid elements responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.</p>
			<ul>
				<li>.g-m--12 or .g-m--4 - Use the m- for medium size breakpoints, which is &lt;1200px by default.</li>
				<li>.g-s--12 or .g-s--4 - Use the s- for small size breakpoints, which is &lt;900px by default.</li>
				<li>.g-t--12 or .g-t--4 - Use the t- for tiny size breakpoints, which is &lt;520px by default.</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;g--5 g-s--12&quot;&gt;
  I&apos;m a g--5 g-s--12
&lt;/div&gt;
&lt;div class=&quot;g--1 g-m--4 g-t--12&quot;&gt;
  I&apos;m a g--1 at regular size, g--4 at medium and g--12 at tiny size.
&lt;/div&gt;
				</code>
			</pre>
			<h3>Margins</h3>
			<p>The margins work exactly the same as the grid system. Each m--1 is equal size to a g--1</p>
			<p>To give an element a margin, use the class .m-- suffixed by the size of the margin. For example, .m--3 will push your element along a quart of the grid (assuming you have a 12 column grid).</p>
			<p>To make your margins responsive, include the breakpoint classes listed below. The breakpoint sizes can be changed in the _variables file.</p>
			<ul>
				<li>.m-m--12 or .m-m--4 - Use the m- for medium size breakpoints, which is &lt;1200px by default.</li>
				<li>.m-s--12 or .m-s--4 - Use the s- for small size breakpoints, which is &lt;900px by default.</li>
				<li>.m-t--12 or .m-t--4 - Use the t- for tiny size breakpoints, which is &lt;520px by default.</li>
				<li>All margins can be zero, ie .m-s--0.</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;m--3&quot;&gt;
  I have a 3 grid wide margin
&lt;/div&gt;
&lt;div class=&quot;m--1 m-s--5&quot;&gt;
  I have a 1 grid wide margin at regular size and a m--5 at small size.
&lt;/div&gt;
				</code>
			</pre>
			<h3>Containers</h3>
			<p>Containers are a way of display elements that are usually block level inline. A container has the display flex declaration. Such as displaying divs next to each other. It also gets rid of those pesky gaps between inline-blocks.</p>
			<p>To add a container class simply use the .container class. The following suffixes will control where the elements align vertically.</p>
			<ul>
				<li>.container--baseline - This class aligns elements so that the text baselines align</li>
				<li>.container--center - This class aligns elements centrally</li>
				<li>.container--start - This class aligns elements at the top of the container</li>
				<li>.container--end - This class aligns elements at the bottom of the container</li>
				<li>.container--justify - This class aligns elements horizontally central</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;container g--6&quot;&gt;
  &lt;div class=&quot;g--5 g-s--12 tile&quot;&gt;
    We&apos;re in a container
  &lt;/div&gt;
  &lt;div class=&quot;g--5 g-s--12 tile&quot;&gt;
    We&apos;re in a container
  &lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
			<p>You can also apply flex-wrap: wrap to your containers at different breakpoints with the following classes.</p>
			<ul>
				<li>.container--wrap</li>
				<li>.container--wrap--m</li>
				<li>.container--wrap--t</li>
				<li>.container--wrap--s</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;container container--wrap--t g--6&quot;&gt;
  &lt;div class=&quot;g--5 g-s--12 tile&quot;&gt;
    This container wraps at the tiny breakpoint
  &lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
			<h3>Nudges</h3>
			<p>Sometimes 1 margin space is too big. That's what nudges are for. Use the .nudge--left and .nudge--right classes. These classes have a margin on their respective side that gets smaller as the screen width gets smaller. Particularly useful for buttons and smaller elements.</p>
			<p>You can remove the nudges at small screen sizes using the following classes.</p>
			<ul>
				<li>.no-nudge--m</li>
				<li>.no-nudge--s</li>
				<li>.no-nudge--t</li>
			</ul>
			<pre>
				<code>
&lt;button class=&quot;btn--flat&quot;&gt;Flat&lt;/button&gt;
&lt;button class=&quot;btn--float nudge--left nudge--right&quot;&gt;+&lt;/button&gt;
&lt;button class=&quot;btn--raised&quot;&gt;Raised&lt;/button&gt;

&lt;div class=&quot;card nudge--left nudge--right no-nudge--s&quot;&gt;
I have a nudge left and right, but no nudge when smaller than the small breakpoint size.
  &lt;p&gt;Words...&lt;/p&gt;
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Header</h1>
		</header>
		<div class="g--10 m--1">
			<p>Headers display titles, website names, navigation and logos.</p>
			<p>You can see an example of a header at the top of this page</p>
			<h2>Code</h2>
			<p>Simply use the HTML5 header element.</p>
			<pre>
				<code>
&lt;header class=&quot;container&quot;&gt;
  &lt;h1 class=&quot;m--1 g--4&quot;&gt;Header&lt;/h1&gt;
&lt;/header&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Lightbox</h1>
		</header>
		<div class="g--10 m--1">
			<p>A lightbox is used to display images without other distractions.</p>
			<div class="g--5 g-s--12 tile">
				<input type="checkbox" id="lightbox-1">
				<label for="lightbox-1"><amp-img src="https://via.placeholder.com/600x400" width="600" height="400" layout="responsive"></amp-img></label>
			</div>
			<h2>Code</h2>
			<p>Use a checkbox, followed by a label with your img inside. Be sure to make your lightboxes have different numbered suffixes.</p>
			<pre>
				<code>
&lt;input type=&quot;checkbox&quot; id=&quot;lightbox-1&quot;&gt;
&lt;label for=&quot;lightbox-1&quot;&gt;&lt;amp-img src=&quot;https://via.placeholder.com/600x400&quot; width=&quot;600&quot; height=&quot;400&quot; layout=&quot;responsive&quot;&gt;&lt;/amp-img&gt;&lt;/label&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Links</h1>
		</header>
		<div class="g--10 m--1">
			<p>We all know what links are, right?</p>
			<div class="g--4 g-m--8 g-s--12 tile">
				<p>Check out this amazing website <a href="http://www.example.com">example.com</a>.</p>
			</div>
			<h2>Code</h2>
			<p>Simply use the HTML a tag.</p>
			<pre>
				<code>
&lt;a href=&quot;http://www.example.com&quot;&gt;example.com&lt;/a&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Media</h1>
		</header>
		<div class="g--10 m--1">
			<p>Images, video and audio.</p>
			<div class="g--4 g-m--8 g-s--12 tile">
				<amp-img src="https://via.placeholder.com/600x400" width="600" height="400" layout="responsive"></amp-img>
			</div>
			<h2>Code</h2>
			<p>Simply use the required HTML tag, img, video or audio.</p>
			<p>By default, all media will be 100% width of their parent</p>
			<pre>
				<code>
&lt;amp-img src=&quot;https://via.placeholder.com/600x400&quot; width=&quot;600&quot; height=&quot;400&quot; layout=&quot;responsive&quot;&gt;&lt;/amp-img&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Modals</h1>
		</header>
		<div class="g--10 m--1">
			<p>Modals are pop out peices of information.</p>
			<div class="g--4">
				<input type="checkbox" id="modal-1">
				<label class="modal-trigger" for="modal-1">Modal Link</label>
				<div class="modal-content g--4">
					<p>Lorem ipsum dolor.</p>
				</div>
			</div>
			<h2>Code</h2>
			<pre>
				<code>
&lt;div class=&quot;g--4&quot;&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;modal-1&quot;&gt;
  &lt;label class=&quot;modal-trigger&quot; for=&quot;modal-1&quot;&gt;Modal Link&lt;/label&gt;
  &lt;div class=&quot;modal-content g--4&quot;&gt;
    &lt;p&gt;Lorem ipsum dolor.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
				</code>
			</pre>
		</div>
		<header class="container--baseline">
			<h1 class="m--1 g--4 g-s--12">Navigation</h1>
			<nav class="g--5 g-m--8 nav--horizontal">
				<ul>
					<li><a href="http://www.google.com">Nav link</a></li>
					<li><a href="http://www.google.com">Hello</a></li>
					<li><a href="http://www.google.com">Contact</a></li>
					<li class="dropdown"><a href="http://www.g.com">Dropdown</a>
						<ul>
							<li><a href="http://www.google.com">D Link</a></li>
							<li><a href="http://www.google.com">D Link</a></li>
							<li><a href="http://www.google.com">D Link</a></li>
							<li><a href="http://www.google.com">D Link</a></li>
						</ul>
					</li>
					<li><a href="http://www.google.com">Portfolio</a></li>
				</ul>
			</nav>
		</header>
		<div class="g--10 m--1">
			<p>Navigation systems are the fundamental method of moving around a website.</p>
			<p>An example of a horizontal navigation bar can be found at the top of this page.</p>
			<p>An example of a super vertical navigation can be found on the left hand side of this page.</p>
			<h2>Code</h2>
			<h3>Horizontal Navigation</h3>
			<pre>
				<code>
&lt;header class=&quot;container--baseline&quot;&gt;
  &lt;h1 class=&quot;m--1 g--4&quot;&gt;Navigation&lt;/h1&gt;
  &lt;nav class=&quot;g--3 nav--horizontal&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Nav link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Hello&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;dropdown&quot;&gt;&lt;a href=&quot;http://www.g.com&quot;&gt;Dropdown&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;D Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;D Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;D Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;D Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;http://www.google.com&quot;&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/header&gt;
				</code>
			</pre>
			<h5>Responsive</h5>
			<p>To make your horizontal navigation responsive, use the following code before the .nav--horizontal class.</p>
			<pre>
				<code>
&lt;input type=&quot;checkbox&quot; id=&quot;nav--horizontal-responsive&quot;&gt;
&lt;label for=&quot;nav--horizontal-responsive&quot;&gt;MENU&lt;/label&gt;
&lt;nav class=&quot;nav--horizontal g--4&quot;&gt;
    ....
				</code>
			</pre>
			<h3>Super Vertical Navigation</h3>
			<pre>
				<code>
&lt;aside class=&quot;nav--super-vertical g--2 g-med--3 g-small--6 g-tiny--12 no-margin-vertical&quot;&gt;
  &lt;div class=&quot;g--12 logo-area no-margin-vertical&quot;&gt;
    Your logo here
  &lt;/div&gt;
  &lt;nav class=&quot;g--12&quot;&gt;
    &lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
    &lt;div class=&quot;nav-collapsible&quot;&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;nav-collapsible-1&quot;&gt;
      &lt;label for=&quot;nav-collapsible-1&quot;&gt;Components&lt;/label&gt;
      &lt;div class=&quot;nav-collapsible-links&quot;&gt;
        &lt;a href=&quot;../docs/alerts.html&quot;&gt;Alerts&lt;/a&gt;
        &lt;a href=&quot;../docs/animations.html&quot;&gt;Animations&lt;/a&gt;
        &lt;a href=&quot;../docs/buttons.html&quot;&gt;Buttons&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
  &lt;/nav&gt;
&lt;/aside&gt;
				</code>
			</pre>
			<h5>Responsive</h5>
			<p>To make your super vertical navigation responsive, use the following code before the .nav--super-vertical class.</p>
			<pre>
				<code>
&lt;input type=&quot;checkbox&quot; id=&quot;nav--super-vertical-responsive&quot;&gt;
&lt;label for=&quot;nav--super-vertical-responsive&quot;&gt;MENU&lt;/label&gt;
&lt;nav class=&quot;nav--super-vertical g--2&quot;&gt;
    ....
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Tables</h1>
		</header>
		<div class="g--10 m--1">
		<table class="g--8 g-s--12 card">
			<tr class="table-header">
				<td>Number</td>
				<td>Name</td>
				<td>Age</td>
				<td>Job</td>
			</tr>
			<tr>
				<td>521</td>
				<td>Ben</td>
				<td>23</td>
				<td>Front End Dev</td>
			</tr>
			<tr>
				<td>951</td>
				<td>Zoe</td>
				<td>21</td>
				<td>Care Worker</td>
			</tr>
			<tr>
				<td>444</td>
				<td>Simon</td>
				<td>22</td>
				<td>Film Producer</td>
			</tr>
		</table>
			<h2>Code</h2>
			<p>Simple use the HTML table elements along with the .table-header class for the header.</p>
			<pre>
				<code>
&lt;table class=&quot;g--8 card&quot;&gt;
  &lt;tr class=&quot;table-header&quot;&gt;
    &lt;td&gt;Number&lt;/td&gt;
    &lt;td&gt;Name&lt;/td&gt;
    &lt;td&gt;Age&lt;/td&gt;
    &lt;td&gt;Job&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;521&lt;/td&gt;
    &lt;td&gt;Ben&lt;/td&gt;
    &lt;td&gt;23&lt;/td&gt;
    &lt;td&gt;Front End Dev&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;951&lt;/td&gt;
    &lt;td&gt;Zoe&lt;/td&gt;
    &lt;td&gt;21&lt;/td&gt;
    &lt;td&gt;Care Worker&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Tooltips</h1>
		</header>
		<div class="g--10 m--1">
			<p>Tooltips are hidden snippets of information that show when the user hovers over.</p>
			<div class="g--5 g-s--12">
				<p>Lorem ipsum <span class="tooltip" data-text="Hello">tooltip</span></p>
				<p>Lorem ipsum <span class="tooltip" data-text="Hello">really loooooooooooong tooltip</span></p>
			</div>
			<h2>Code</h2>
			<p>To use a tooltip, add an element with the class .tooltip and use data-text="" to specify the tooltips text.</p>
			<pre>
				<code>
&lt;p&gt;Lorem ipsum &lt;span class=&quot;tooltip&quot; data-text=&quot;Hello&quot;&gt;tooltip&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Lorem ipsum &lt;span class=&quot;tooltip&quot; data-text=&quot;Hello&quot;&gt;really loooooooooooong tooltip&lt;/span&gt;&lt;/p&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Typography</h1>
		</header>
		<div class="g--10 m--1">
			<p>The base elements of text.</p>
			<div class="g--5 g-s--12 tile">
				<h1>Heading 1</h1>
				<h2>Heading 2</h2>
				<h3>Heading 3</h3>
				<h4>Heading 4</h4>
				<h5>Heading 5</h5>
				<h6>Heading 6</h6>
				<p>Pellentesque luctus scelerisque odio at euismod. Integer purus massa, varius eget justo sed, ultricies ornare massa. Suspendisse commodo tortor maximus magna pulvinar, vel porta ligula placerat. Sed feugiat tortor quis nisl mattis, nec lobortis nisi faucibus. Pellentesque sed risus vel nisl molestie tincidunt. In suscipit quis nisl et iaculis. Ut sit amet sodales odio. Aenean pretium nec velit eget dictum. Aenean vestibulum magna quis nunc iaculis, ut accumsan nisl accumsan. Nunc ante metus, accumsan sed ornare porta, finibus ac odio. Integer eu tempus lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam elementum, nulla a viverra tempor, lacus mauris auctor ex, quis pulvinar massa nulla id massa. Suspendisse convallis, ligula vitae auctor ultrices, lectus ex condimentum nisi, nec lobortis ipsum lectus et mauris. Phasellus ultricies mollis sapien, id elementum justo gravida non.</p>
				<h2 class="subtitle">Subtitle</h2>
			</div>
			<h2>Code</h2>
			<p>Simply use the base HTML elements for text.</p>
			<p>For emphasis on a subtitle, add the .subtitle class.</p>
			<p>For white or black text, add the .color--white class or the .color--black class.</p>
			<pre>
				<code>
&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2 class=&quot;subtitle&quot;&gt;Heading 2 which is a subtitle&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;h4 class=&quot;color--white&quot;&gt;Heading 4 which is white&lt;/h4&gt;
				</code>
			</pre>
		</div>
		<header>
			<h1 class="m--1 g--4 g-s--12">Utility</h1>
		</header>
		<div class="g--10 m--1">
			<p>A bunch of useful utility classes.</p>
			<h2>Code</h2>
			<h3>Floats</h3>
			<p>Classes for floating and clearing elements.</p>
			<ul>
				<li>.left</li>
				<li>.right</li>
				<li>.clear</li>
			</ul>
			<pre>
				<code>
&lt;p class=&quot;left&quot;&gt;I&apos;m floating left.&lt;/p&gt;
&lt;p class=&quot;right&quot;&gt;I&apos;m floating right.&lt;/p&gt;
&lt;p class=&quot;clear&quot;&gt;I&apos;m clearing both.&lt;/p&gt;
				</code>
			</pre>
			<h3>Display</h3>
			<p>Classes for changing the display attribute on an element.</p>
			<ul>
				<li>.inline</li>
				<li>.inline-block</li>
				<li>.block</li>
			</ul>
			<pre>
				<code>
&lt;p class=&quot;inline&quot;&gt;I&apos;m inline.&lt;/p&gt;
&lt;p class=&quot;inline-block&quot;&gt;I&apos;m inline-block.&lt;/p&gt;
&lt;p class=&quot;block&quot;&gt;I&apos;m block.&lt;/p&gt;
				</code>
			</pre>
			<h3>Padding &amp; Margin</h3>
			<p>By default, the grid system will apply padding and vertical margins. To remove these, use these classes.</p>
			<ul>
				<li>.no-pad</li>
				<li>.no-margin</li>
				<li>.no-margin-vertical</li>
			</ul>
			<pre>
				<code>
&lt;div class=&quot;g--1 no-pad&quot;&gt;I have no padding.&lt;/div&gt;
&lt;div class=&quot;g--1 no-margin&quot;&gt;I have no margin.&lt;/div&gt;
&lt;div class=&quot;g--1 no-margin-vertical&quot;&gt;I have no vertical margins.&lt;/div&gt;
				</code>
			</pre>
			<h3>Centering</h3>
			<p>Classes for centering text or elements.</p>
			<ul>
				<li>.center</li>
				<li>.text-center</li>
			</ul>
			<pre>
				<code>
&lt;p class=&quot;center&quot;&gt;I have margin: 0 auto&lt;/p&gt;
&lt;p class=&quot;text-center&quot;&gt;I have text-align: center&lt;/p&gt;
				</code>
			</pre>
		</div>
</div>
</body>
</html>