@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

*{margin: 0; padding:0; box-sizing: border-box;}
html{height: 100%; line-height: 1.5; font-size: 62.5%;/*=10px*/font-family:  Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;}

body{
	font-size: 12px;
	font-size: 1.2rem;
}
#f-block,
#periodic-table{
  display: block;
  width: 100%;
}
#f-block:after ,
#periodic-table:after {
  content: "";
  display: table;
  clear: both;
}
#descriptions {
	width: 70%;
	max-width:1000px;
	margin: 0 auto;
	
}
#descriptions .info{
    opacity: 0; 
    height: 0;
    overflow: hidden;
	transition: opacity 2s ease-out;
	-moz-transition: opacity 2s ease-out;
	-webkit-transition: opacity 2s ease-out;
	-o-transition: opacity 2s ease-out;
}
#descriptions .info:target{
    opacity: 1; 
    height: auto;
	padding: 2rem 5rem;
	background: rgba(255,255,255, .1);
	border-radius: 10%;
	border: solid 5px rgba(255,255,255, .2);
}

.descriptions p{font-size:2rem;}

#container{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 5em; 
}
#container:after {
  content: "";
  display: table;
  clear: both;
}
.row{ 
	width: 100%;
	display: block;
}
.row span{ 
	float: left;
}
#f-block span{
	float: right;
}
.element{
	padding: 2px;
	width: 50%;
	height: 5%;
}
.row span{ 
	display: block;
}
@media only screen and (min-width : 768px) {
	.element{
		width: 5.55%; 
		height: 5rem;
	}
	#f-block{
		margin-top: 30px;
	}
	.span-15{ 
		width: 83.325%;
		height: 1px;
	}
	.span-9{ 
		width: 49.999%;
		height: 1px;
	}
}
.element a{
	border-radius: .4rem;
	text-align: center;
	color: #333;
	display: block;
	width: 100%; 
	height: 100%;
	padding: 1.5rem 0;
	text-decoration: none;
}
.key{
	line-height: 3rem;
	/* margin: 2rem auto;
	width: 60%; */
	margin: 0.5em auto 2em auto;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
.key li { 
	display: inline-block; 
	margin: 0 .2rem;
}

.key li:hover{
	background:#fff;
	color:#333;
}
.swatch{ 
	width: 1rem;
	height: 1rem;
	border: solid 1px #777;
	display: inline-block;
}

.swatch.root,
.element.root a{
	background: #9BFF9B;
}
.swatch.text,
.element.text a{
	background:#B8FFED;
}
.swatch.form,
.element.form a{
	background:#EDFFEB;
}
.swatch.table,
.element.table a{
	background:#FFE4C1;
}
.swatch.meta,
.element.meta a{
	background:#FFCC99;
}
.swatch.group,
.element.group a{
	background:#FF9376;
}
.swatch.doc,
.element.doc a{
	background:#FFF79F;
}
.swatch.interactive,
.element.interactive a{
	background:#FFCAD4;
}
.swatch.embed,
.element.embed a{
	background:#FFCA22;
}
.links{
	margin-left: 2rem;
}
h1{
	text-align: center;
	font-size: 4rem;
	color: #FFF;
}
.by{
	text-align: center;
	font-size: 1.8rem;
	color: #FFF;
}
.by a{
	color: #CCC;
}


html {
  background: #222;
  height: 100%;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; }

body {
  width: 90%;
  width: 90vw;
  margin: 1vh auto;
  color: black; }

h1 {
  text-align: center;
  font-size: 2.5rem;
  color: #FFF; }

.elements {
  font-size: 10px; }
  @media screen and (min-width: 600px) {
    .elements {
      font-size: calc(10px + 8 * ((100vw - 600px) / 1320)); } }
  @media screen and (min-width: 1920px) {
    .elements {
      font-size: 18px; } }

.element {
  display: none; }

.key {
  display: none; }

@media screen and (min-width: 600px) {
  .row {
    display: flex;
    text-align: center;
   /*  height: 6vmin; */
    justify-content: space-around; }
  .f-block .row {
    justify-content: flex-end; }
  .element {
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    flex: 6vw 0 0;
    color: black;
    box-sizing: border-box;
    border-radius: 3px;
    margin: 1px;
    text-decoration: none; }
  .description {
    display: none; }
  .description:target {
    display: block; }
  .key {
    display: block;
    padding: 0;
   /*  width: 60%;
   max-width: 650px; */
    list-style-type: none;
    color: #fff;
    line-height: 1.8;
    font-weight: normal; }
  .key li {
    display: inline-block;
    margin: 0 .2rem;
    position: relative;
    padding-left: 20px;
    cursor: pointer; 
    padding:.3em .5em .3em 2.5em;
    border-radius:3px;
    background:grey;
    }
  .key li:before {
    content: '';
    display: block;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translate(0, -50%);
    width: 16px;
    height: 16px; 
    border-radius:3px} }

.description {
  padding: 1em;
  margin: 2em 0;
  text-overflow: ellipsis; }
  .description h2 {
    margin: 0; }
  .description a {
    color: #1d2441;
    text-decoration: none; }
  .description a:visited {
    color: #3C4C88; }
  .description a:hover, .description a:focus {
    color: #3C4C88;
    text-decoration: underline; }
  .description .moz-link {
    position: relative;
    padding-left: 24px; }
  .description .moz-link:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    background: url("../moz.png");
    transform: translate(0, -50%);
    width: 16px;
    height: 16px; }

.element.group-base {
  background-color: #d48489; }
  .element.group-base:hover {
    background-color: #e1aaad; }

.description.group-base {
  background-color: rgba(225, 170, 173, 0.5); }
  .description.group-base:hover {
    background-color: rgba(212, 132, 137, 0.8); }

.key li.group-base:before {
  background-color: #d48489; }

.hover-group-base .element {
  opacity: .5; }

.hover-group-base .element.group-base {
  opacity: 1; }

.element.group-metadata {
  background-color: #d49384; }
  .element.group-metadata:hover {
    background-color: #e1b4aa; }

.description.group-metadata {
  background-color: rgba(225, 180, 170, 0.5); }
  .description.group-metadata:hover {
    background-color: rgba(212, 147, 132, 0.8); }

.key li.group-metadata:before {
  background-color: #d49384; }

.hover-group-metadata .element {
  opacity: .5; }

.hover-group-metadata .element.group-metadata {
  opacity: 1; }

.element.group-sectioning {
  background-color: #d4a784; }
  .element.group-sectioning:hover {
    background-color: #e1c2aa; }

.description.group-sectioning {
  background-color: rgba(225, 194, 170, 0.5); }
  .description.group-sectioning:hover {
    background-color: rgba(212, 167, 132, 0.8); }

.key li.group-sectioning:before {
  background-color: #d4a784; }

.hover-group-sectioning .element {
  opacity: .5; }

.hover-group-sectioning .element.group-sectioning {
  opacity: 1; }

.element.group-text-content {
  background-color: #d4bb84; }
  .element.group-text-content:hover {
    background-color: #e1d0aa; }

.description.group-text-content {
  background-color: rgba(225, 208, 170, 0.5); }
  .description.group-text-content:hover {
    background-color: rgba(212, 187, 132, 0.8); }

.key li.group-text-content:before {
  background-color: #d4bb84; }

.hover-group-text-content .element {
  opacity: .5; }

.hover-group-text-content .element.group-text-content {
  opacity: 1; }

.element.group-text-semantics {
  background-color: #d4cf84; }
  .element.group-text-semantics:hover {
    background-color: #e1deaa; }

.description.group-text-semantics {
  background-color: rgba(225, 222, 170, 0.5); }
  .description.group-text-semantics:hover {
    background-color: rgba(212, 207, 132, 0.8); }

.key li.group-text-semantics:before {
  background-color: #d4cf84; }

.hover-group-text-semantics .element {
  opacity: .5; }

.hover-group-text-semantics .element.group-text-semantics {
  opacity: 1; }

.element.group-media {
  background-color: #c5d484; }
  .element.group-media:hover {
    background-color: #d7e1aa; }

.description.group-media {
  background-color: rgba(215, 225, 170, 0.5); }
  .description.group-media:hover {
    background-color: rgba(197, 212, 132, 0.8); }

.key li.group-media:before {
  background-color: #c5d484; }

.hover-group-media .element {
  opacity: .5; }

.hover-group-media .element.group-media {
  opacity: 1; }

.element.group-embedded {
  background-color: #b1d484; }
  .element.group-embedded:hover {
    background-color: #c9e1aa; }

.description.group-embedded {
  background-color: rgba(201, 225, 170, 0.5); }
  .description.group-embedded:hover {
    background-color: rgba(177, 212, 132, 0.8); }

.key li.group-embedded:before {
  background-color: #b1d484; }

.hover-group-embedded .element {
  opacity: .5; }

.hover-group-embedded .element.group-embedded {
  opacity: 1; }

.element.group-script {
  background-color: #9dd484; }
  .element.group-script:hover {
    background-color: #bbe1aa; }

.description.group-script {
  background-color: rgba(187, 225, 170, 0.5); }
  .description.group-script:hover {
    background-color: rgba(157, 212, 132, 0.8); }

.key li.group-script:before {
  background-color: #9dd484; }

.hover-group-script .element {
  opacity: .5; }

.hover-group-script .element.group-script {
  opacity: 1; }

.element.group-edits {
  background-color: #89d484; }
  .element.group-edits:hover {
    background-color: #ade1aa; }

.description.group-edits {
  background-color: rgba(173, 225, 170, 0.5); }
  .description.group-edits:hover {
    background-color: rgba(137, 212, 132, 0.8); }

.key li.group-edits:before {
  background-color: #89d484; }

.hover-group-edits .element {
  opacity: .5; }

.hover-group-edits .element.group-edits {
  opacity: 1; }

.element.group-table {
  background-color: #84d493; }
  .element.group-table:hover {
    background-color: #aae1b4; }

.description.group-table {
  background-color: rgba(170, 225, 180, 0.5); }
  .description.group-table:hover {
    background-color: rgba(132, 212, 147, 0.8); }

.key li.group-table:before {
  background-color: #84d493; }

.hover-group-table .element {
  opacity: .5; }

.hover-group-table .element.group-table {
  opacity: 1; }

.element.group-forms {
  background-color: #84d4a7; }
  .element.group-forms:hover {
    background-color: #aae1c2; }

.description.group-forms {
  background-color: rgba(170, 225, 194, 0.5); }
  .description.group-forms:hover {
    background-color: rgba(132, 212, 167, 0.8); }

.key li.group-forms:before {
  background-color: #84d4a7; }

.hover-group-forms .element {
  opacity: .5; }

.hover-group-forms .element.group-forms {
  opacity: 1; }

.element.group-interactive {
  background-color: #84d4bb; }
  .element.group-interactive:hover {
    background-color: #aae1d0; }

.description.group-interactive {
  background-color: rgba(170, 225, 208, 0.5); }
  .description.group-interactive:hover {
    background-color: rgba(132, 212, 187, 0.8); }

.key li.group-interactive:before {
  background-color: #84d4bb; }

.hover-group-interactive .element {
  opacity: .5; }

.hover-group-interactive .element.group-interactive {
  opacity: 1; }

.element.group-web-components {
  background-color: #84d4cf; }
  .element.group-web-components:hover {
    background-color: #aae1de; }

.description.group-web-components {
  background-color: rgba(170, 225, 222, 0.5); }
  .description.group-web-components:hover {
    background-color: rgba(132, 212, 207, 0.8); }

.key li.group-web-components:before {
  background-color: #84d4cf; }

.hover-group-web-components .element {
  opacity: .5; }

.hover-group-web-components .element.group-web-components {
  opacity: 1; }

code{font-size:2.2rem; background: rgba(234, 234, 234, 0.67); padding: 0 0.25em; border-radius:3px}