@charset "utf-8";
@import url("../webfonts/adam_cg_pro/stylesheet.css");
@import url("../webfonts/bebasneue/stylesheet.css");
/* CSS Document */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-margin-before:0;
    -webkit-margin-end:0;
    -webkit-margin-after:0;
    -webkit-margin-start:0;
	-moz-margin-before:0;
	-moz-margin-end:0;
	-moz-margin-after:0;
	-moz-margin-start:0;

    -webkit-padding-before:0;
    -webkit-padding-end:0;
    -webkit-padding-after:0;
    -webkit-padding-start:0;
	-moz-padding-before:0;
	-moz-padding-end:0;
	-moz-padding-after:0;
	-moz-padding-start:0;
}
body {
	font-family: "bebas_neueregular";
}
/* ---- button ---- */

.button {
	display: inline-block;
	border: none;
	color: #FFFFFF;
	font-family: "bebas_neueregular";
	font-size: 20px;
	/* [disabled]text-shadow: 0 1px white; */
	cursor: pointer;
	background-color: #bf181d;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
.button:hover {
	background-color: #FFFFFF;
	color: #666666;
}
.button.is-checked {
	color: white;
	/* [disabled]text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); */
}
/* ---- button-group ---- */

.button-group:after {
	content: '';
	display: block;
	clear: both;
}
.button-group .button {
	float: left;
	border-radius: 0;
	margin-left: 0;
	margin-right: 1px;
}
.button-group .button:first-child {
	border-radius: 0.5em 0 0 0.5em;
}
.button-group .button:last-child {
	border-radius: 0 0.5em 0.5em 0;
}
/* ---- isotope ---- */

.isotope {
	border: 1px solid #333;
}
/* clear fix */
.isotope:after {
	content: '';
	display: block;
	clear: both;
}
/* ---- .element-item ---- */

.element-item {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	margin: 5px;
	padding: 10px;
	background: #888;
	color: #262524;
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .name {
	position: absolute;
	left: 10px;
	top: 60px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 16px;
	font-weight: normal;
}
.element-item .symbol {
	position: absolute;
	left: 10px;
	top: 0px;
	font-size: 42px;
	font-weight: bold;
	color: white;
}
.element-item .number {
	position: absolute;
	right: 8px;
	top: 5px;
}
.element-item .weight {
	position: absolute;
	left: 10px;
	top: 76px;
	font-size: 16px;
}
.element-item.alkali {
	background: #F00;
	background: hsl(   0, 100%, 50%);
}
.element-item.alkaline-earth {
	background: #F80;
	background: hsl(  36, 100%, 50%);
}
.element-item.lanthanoid {
	background: #FF0;
	background: hsl(  72, 100%, 50%);
}
.element-item.actinoid {
	background: #0F0;
	background: hsl( 108, 100%, 50%);
}
.element-item.transition {
	background: #0F8;
	background: hsl( 144, 100%, 50%);
}
.element-item.post-transition {
	background: #0FF;
	background: hsl( 180, 100%, 50%);
}
.element-item.metalloid {
	background: #08F;
	background: hsl( 216, 100%, 50%);
}
.element-item.diatomic {
	background: #00F;
	background: hsl( 252, 100%, 50%);
}
.element-item.halogen {
	background: #F0F;
	background: hsl( 288, 100%, 50%);
}
.element-item.noble-gas {
	background: #F08;
	background: hsl( 324, 100%, 50%);
}
header {
	background-color: #666666;
	/*background-color: #252531;*/
	color: #FFFFFF;
	font-family: "bebas_neueregular";
	font-size: 60px;
	height: 200px;
	padding-top: 60px;
	padding-right: 100px;
	padding-bottom: 50px;
	padding-left: 100px;
	position: absolute;
	top: 40px;
	vertical-align: middle;
	width: 100%
}
footer {
	background-color: #666666;
	bottom: 0px;
	color: #FFFFFF;
	font-family: "bebas_neueregular";
	font-size: 20px;
	padding-top: 20px;
	padding-right: 100px;
	padding-bottom: 20px;
	padding-left: 100px;
	position: absolute;
	width:100%;
}
footer a {
	color: #FFFFFF;
	text-decoration: none;
}
footer a:hover{
	color: #bf181d;
	cursor: pointer;
	text-decoration: none;
}
nav {
	background-color: #bf181d;
	font-family: "bebas_neueregular";
	padding-left: 100px;	
}
#content {
	padding: 100px;
	position: absolute;
	top: 240px;
	font-size: 30px;
	color: #bf181d;
}
.right {
	position: absolute;
	right: 100px;	
}