#div_iconoscope_gallery {
	font-family:Verdana, Geneva, sans-serif;
}

.iconoscope-thumbnail {
	border-radius:2px;
	padding: 3px;
	background-color: #f9f5f5;
	width:280px;
}

.leaderboard-thumbnail {
	border-radius:2px;
	padding: 3px;
	background-color: #f9f5f5;
	width:150px;
}

#leaderboardtable table, th, td {
	border: 0px solid black;
   	border-collapse: collapse;
	padding: 0 15px;
	vertical-align: middle;
	text-align: center;
	background-color: #99cccc;
}

#leaderboardtable table {
    width: 100%;
}

#leaderboardtable table tr:nth-child(odd) td{
	background-color:#99cccc;
}
#leaderboardtable table tr:nth-child(even) td{
	background-color:#CAE9E9;
}

#leaderboardtable table tr td:first-child, #leaderboardtable table tr th:first-child {
    padding-left: 40px;
}

#leaderboardtable table tr td:last-child, #leaderboardtable table tr th:last-child {
    padding-right: 40px;
}

#leaderboardtable {
	display:block;
	width: 100%;
}

#leaderboardtable table tr td {
	padding: 20px 0;
}

#leaderboardtable table tr td p {
	padding-bottom: 0 !important;
}

[type="text"] {
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	background-color: aliceblue;
	word-wrap: break-word;
	vertical-align: middle;
	height: 40px;
	transition: all 0.3s;
	border-top: 2px solid #99cccc;
    border-left: 2px solid #99cccc;
    border-bottom: none;
    border-right: none;
	border-radius: 5px;
	padding: 5px 15px;
	display: block;
    margin-bottom: 20px;
}

[type="button"] {
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	background-color: #99cccc;
	display:table-cell;
	word-wrap: break-word;
	vertical-align: middle;
	height: 40px;
	transition: all 0.3s;
	border: none;
	border-radius: 5px;
	padding: 5px 15px;
}

[name="submitTriplets"],
[name="deleteTriplets"]{
	min-width: 180px;
	margin-bottom: 20px;
}

[name="deleteTripletsButton"] {
	max-width: 50px;
	background-color: aliceblue;
}

[type="button"]:hover {
	background-color: #dd9933;
	color:white;
}

[type="button"]:active,
[type="button"]:focus {
	background-color: #3a2e2e;
	color:white;
}

.concepts-div {
	display: table; border-spacing: 5px;
	font-size: 10px;
	width:100%;
}

.concept_cell {
	margin: 0px 10px;
	border-radius: 5px;
	padding: 5px;
	display:table-cell;
}

.concept {
	font-size: 1.1em;
	font-weight: bold;
	cursor: pointer;
	background-color: aliceblue;
	display:table-cell;
	max-width: 50px;
	word-wrap: break-word;
	vertical-align: middle;
	background-color: #99cccc;
	height: 40px;
	transition: all 0.3s;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

.chosen_concept {
	font-size: 1.1em;
	font-weight: bold;
	background-color: #3a2e2e;
	color:white;
	cursor: default;
	display:table-cell;
	max-width: 50px;
	height: 40px;
	max-width: 50px;
	word-wrap: break-word;
	vertical-align: middle;
}

.correct_concept {
	font-size: 1.1em;
	font-weight: bold;
	background-color: #78AB46;
	color:white;
	cursor: default;
	display:table-cell;
	max-width: 50px;
	height: 40px;
	max-width: 50px;
	word-wrap: break-word;
	vertical-align: middle;
}

.wrong_concept {
	font-size: 1.1em;
	font-weight: bold;
	background-color: #ab4746;
	color:white;
	cursor: default;
	display:table-cell;
	max-width: 50px;
	height: 40px;
	max-width: 50px;
	word-wrap: break-word;
	vertical-align: middle;
}

.grayed_concept {
	font-size: 1.1em;
	font-weight: bold;
	cursor: default;
	color: #999;
	background-color: #CCC;
	display:table-cell;
	max-width: 50px;
	height: 40px;
	max-width: 50px;
	word-wrap: break-word;
	vertical-align: middle;
}

.concept:hover {
	background-color: #dd9933;
	color: white;
}

.navig-div {
	display: table; border-spacing: 5px;
	font-size: 13px;
	width:100%;
    padding: 0 15px;
}

.navig_cell {
	margin: 0px 10px;
	border-radius: 5px;
	padding: 5px;
	display:table-cell;
	transition: all 0.3s;
}

.navig {
	font-weight: bold;
	cursor: pointer;
	background-color: #99cccc;
	display:table-cell;
	height: 26px;
	max-width: 25px;
	word-wrap: break-word;
	vertical-align: middle;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

.chosen_navig {
	font-weight: bold;
	background-color: #3a2e2e;
	color:white;
	cursor: default;
	display:table-cell;
	max-width: 25px;
	height: 26px;
	word-wrap: break-word;
	vertical-align: middle;
}

.grayed_navig {
	font-weight: bold;
	cursor: default;
	color: #999;
	background-color: #CCC;
	display:table-cell;
	height: 26px;
	max-width: 25px;
	word-wrap: break-word;
	vertical-align: middle;
}

.navig:hover {
	background-color: #dd9933;
	color:white;
}

.main-div {
	text-align:center;
}

.img-div {
	box-shadow: 0 0 10px -2px rgba(0,0,0,0.5);
	text-align:center;
	margin:15px;
	display:inline-block;
    padding: 10px;
	border-radius:4px;
	background-color:#f9f5f5;
}

.filter_dropdown {
	max-width: 250px;
    word-wrap: normal;
}

.filters {
	text-align:center;
	max-width:700px;
	padding-top:20px;
	margin:auto;
	border: 1px solid black;
	border-radius:4px 4px 0px 0px;
	background-color:#f9f5f5;
}
.icon-info {
	padding-top:5px;
	font-size: 14px;
	text-align: center;
}


.table-row {
	display:table-row;
}
.table-cell {
	display:table-cell;
}

.starRating:not(old){
  display        : inline-block;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > input {
  opacity      : 0;
}

.starRating:not(old) > label {
  cursor		  : pointer;
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label.disabled_star {
  cursor		  : default;
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('star-on.svg');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label.disabled_star {
  cursor		  : default;
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}

#divLoading {
	transition: all 0.5s;
}

.loadingDiv {
	height:3px;
	background-color: #f6f6f6;
	width:100%;
	margin:auto
}

.progress {
	background-color: rgb(245, 245, 245);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	box-shadow: none;
	box-sizing: border-box;
	color: rgb(51, 51, 51);
	display: block;
	font-family: roboto, opensans, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;
	height: 3px;
	line-height: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
	width: auto;
}

@-webkit-keyframes bar {
    from { background-position: 0 0 }
    to { background-position: 700px 0 }
}

.bar {
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 2s;
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-name: bar;
	animation-play-state: running;
	animation-timing-function: linear;
	background-color: rgb(98, 196, 98);
	background-image: linear-gradient(90deg, #99cccc 50%, rgb(246, 246, 246) 0%);
	background-size: 100%;
	box-sizing: border-box;
	color: rgb(51, 51, 51);
	display: block;
	height: 3px;
	line-height: 20px;
	width: 100%;
}

/* added CSS */
a.fancybox {
    min-height: 115px;
    display: inline-block;
    background: #f9f5f5;
    margin-bottom: 15px;
}

.img-div .fancybox {
    min-height: 215px;
}

select {
    height: 40px;
    border-radius: 5px;
    background: #99cccc;
    font-weight: bold;
    border: none;
}

#gallery {
	padding: 0 25px 30px;
}