/**** css presentation of elements ****/
* { box-sizing: border-box; }

/* ---- 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: 15px;
  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: 20px;
}

.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; }

.element {
	
/*	width: 250px;
	height: 250px; */

	width: 200px;
	height: 200px;
	
	
	
    margin: 5px;
    float: left;
    overflow: hidden;
    position: relative;
    background: #888;
    color: #222;
    -webkit-border-top-right-radius: 1.2em;
    -moz-border-radius-topright: 1.2em;
    border-top-right-radius: 1.2em;
	z-index: 0;
}
.element.abdomen {
    background: #F00;
	background: hsl(0, 100%, 50%);
    background: hsl(245, 53%, 22%); /* hex: 201b57 */
	color:#ffd100;
}

.element.abdomen .author {
	color:#ffd100;
}
.element.brain {
    background: #F80;
    background: hsl(36, 100%, 50%);
    background: hsl(196, 83%, 58%); /* hex: 39bced */
}
.element.breast {
    background: #FF0;
    background: hsl(72, 100%, 50%);
    background: hsl(49, 100%, 50%); /* hex: ffd100 */
	}
.element.head {
    background: #0F0;
    background: hsl(108, 100%, 50%);
    background: hsl(334, 73%, 45%); /* hex: c81f68 */
}
.element.musculo {
    background: #0F8;
    background: hsl(144, 100%, 50%);
    background: hsl(20, 86%, 54%); /* hex: ef6724 */
}
.element.pelvis {
    background: #0FF;
    background: hsl(180, 100%, 50%);
    background: hsl(174, 100%, 34%); /* hex: 00ae9c */
}
.element.technique {
    background: #08F;
    background: hsl(216, 100%, 50%);
    background: hsl(270, 31%, 42%); /* hex: 6b4a8b */
}
.element.thorax {
    background: #00F;
    background: hsl(202, 100%, 50%);
    background: hsl(37, 7%, 65%); /* hex: aba69e */
}

.element.basicscience      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.bonemarrow        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.chest         { background: #08F; background: hsl( 216, 100%, 50%); }
.element.misc          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.lymphoma      { background: #F0F; background: hsl(   18, 64%, 40%); }
.element.paediatrics   { background: #0F0; background: hsl(124, 90%, 45%); }


.element * {
    position: absolute;
    margin: 0;
}
.element .symbol {
    left: 0.2em;
    top: 0.3em;
    font-size: 3.8em;
    line-height: 1.0em;
    color: #FFF;
}
.element.large .symbol {
    font-size: 4.5em;
}
.element.fake .symbol {
    color: #000;
}
.element .name {
    left: 0.5em;
    top: 0.2em;
    font-size: 1.05em;
	color:white;
	font-weight: bold;
}

.element .ftype {
    right: 1.5em;
    top: 0.3em;
    font-size: 1.05em;
	color:white;
	font-weight: bold;
}

.element .weight {
    font-size: 0.9em;
    left: 0.5em;
    bottom: 0.2em;
	display:block;
	padding:2px;
	background-color:#000;
	color:#ffcc00;
}
.element .number {
    font-size: 1.0em;
    font-weight: bold;
    color: hsla(0, 0%, 0%, .5);
    right: 0.5em;
    top: 0.2em;
}
.element .author {
    font-size: 0.8em;
    font-weight: bold;
    color: hsla(0, 0%, 0%, .5);
    right: 0.5em;
    bottom: 0.2em;
}

.element .winner {
    font-size: 0.8em;
    font-weight: bold;
    color: hsla(0, 0%, 0%, .5);
	display:block;
	padding:2px;
	background-color:#fff;
	border:1px #000 solid;
	color:#000;
    left: 0.5em;
    bottom: 3.5em;
}

.element .allauthors {
    font-size: 0.8em;
    font-weight: bold;
    color: hsla(0, 0%, 0%, .5);
    right: 0.5em;
    bottom: 0.2em;
	display:none;
}

.element .date {
    font-size: 0.6em;
    font-weight: bold;
    color: hsla(0, 0%, 0%, .5);
    left: 0.5em;
    top: 0.5em;
}
.element .shortdesc {
    font-size: 0.9em;
    left: 0.5em;
    top: 2.5em;
	LINE-HEIGHT: 1.0em;
}
.element .type {
    right: 0.5em;
    bottom: 1.0em;
    font-size: 1.05em;
	color:white;
	font-weight: bold;
}
.element .downloadfile {
    left: 4.7em;
    bottom: 7.2em;
	LINE-HEIGHT: 1.0em;
}