* { box-sizing: border-box; }

body {
  font-family: Fira Sans, sans-serif;
  
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 7px;
}

.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 ---- */

.grid {
  /*border: 1px solid #333;*/
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

/*dimensiunea fiecarui element*/
.element-item {
  position: relative;
  float: left;
  /*width: 75px;*/
  width:auto;
  min-width:115px;
  height: 37px;
  margin: 3px;
  padding: 6px;
  background: #888;
  color: #262524;
  border:0.5px solid #333;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

/*.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  width:auto;
}*/



.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: #E4E6E9; border:none;}
.element-item.alkaline-earth  { background: #F80; background: #E4E6E9; border:none;}
.element-item.lanthanoid      { background: #FF0; background: #E4E6E9; border:none;}
.element-item.actinoid        { background: #0F0; background: #E4E6E9; border:none;}
.element-item.transition      { background: #0F8; background: #E4E6E9; border:none;}
.element-item.post-transition { background: #0FF; background: #E4E6E9; border:none;}
.element-item.metalloid       { background: #0FF; background: #E4E6E9; border:none; }
.element-item.diatomic        { background: #00F; background: #E4E6E9; border:none;}
.element-item.halogen         { background: #F0F; background: #E4E6E9; border:none;}
.element-item.noble-gas       { background: #F08; background: #E4E6E9; border:none;}



/*pana aici tine stylesul ptr izotop; de aici incepe stylesul ptr scrooll*/


.outer-wrapper {
	margin:0 auto;
	width:100%;
}

.outer-wrapper div {
	margin:0 auto;
	width:100%;
	
}

#element {
	    display:block;
        height: auto;
        width: auto;
        overflow: auto;
		margin: 10px auto 5px;
      }
	 
	  
      #el1 {
		display:block;
        height: auto;
        width: 1000px;
      }
	  
	   #el1 div {
		display:block;
        height: auto;
        width: 1000px;
      }
	  
	  #el1 p {
		
		text-align:justify;
      }
	  
	  
      #el2 {
		display:block;
        height: auto;
        width: 1000px;
	  }
		
		#el2 div{
		display:block;
        height: auto;
        width: 1000px;
		}
		
		#el2 p{
		text-align:justify;
		}
		
		
		
		
		
		/* sticky menu css */
		
		/* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: white; /*era #333*/
  height:auto;
  position: fixed;
  width: 100%;
  
}

/* Navbar links aici
#navbar a {
 /* float: left;*//*
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}*/

/* Page content 
.content {
  padding: 16px;
}*/

The sticky class is added to the navbar with JS when it reaches its scroll position *//*
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) aici*/

/*.sticky + .content {
  padding-top: 30px;
}

/* end sticky menu css */
/*
.scroll-element {
  scroll-margin-top: 50px !important;
}


.scroll-element div{
  scroll-margin-top: 50px !important;
}

/* scroll margin*/


/* pentru teste */

#navbar {

	background-color:blue;
	
}


.test {
	padding-top:0;
	margin-top:0;
	}
	
	.test div {
	padding-top:0;
	margin-top:0;
	}
	
	
	
	



/*text casute de izotop, linkuri a*/
.menu .element-item a {
	padding-top:4px;
	padding-bottom:0;
	margin-top:0;
	margin-bottom:0;
	vertical-align:middle !important;
	color:black;
	margin:0 auto;
	text-align:center;
	font-family: Fira Sans, sans-serif !important;
	/*color:red;*/
	font-weight:500 !important;
}


/*text paragraf*/
.menu .element-item p {
	
	vertical-align:middle;
	color:black !important;
	font-family: Fira Sans, sans-serif !important;
}

h1.section-h{
	color:black !important;
	font-size:24px !important;
	text-shadow:none;
	font-family: Fira Sans, sans-serif !important;
	
}