/*---- PROFILBOX */
#colourfulmadness {
    background-color:#e6e6e6;
    width: 1100px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items:flex-start;
    align-content:flex-start;
    text-align:justify;
    color:#161616;
	padding: 0 5px;
    box-sizing:border-box;
}

#colourfulmadness a {
    color: var(--highlightcolor);
    font-family:Abel;
    font-size:12px;
    line-height:15px;
    font-weight: bold;
    text-transform:uppercase;
}

#colourfulmadness a:hover {
    font-size:13px;
    line-height:15px;
}

/*---- TOP & BOTTOM */
.cmtop {
    width: 1100px;
    height:90px;
    background-color: var(--highlightcolor);
    padding:18px 15px;
    text-align:right;
	outline: 1px solid #cccccc;
    box-sizing:border-box;
	overflow: hidden;
}

.cmbottom {
    margin-top:15px;
    width: 1100px;
    height:20px;
    background-color: var(--highlightcolor);
    padding:18px 15px;
    text-align:right;
	outline: 1px solid #cccccc;
    box-sizing:border-box;
}


/*---- HEADER: NAMEN */
.cmchara {
    font-family:Abel;
    font-size:33px;
    line-height:38px;
    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:5px;
}

.cmuser {
    font-family:Abel;
    font-size:12px;
    line-height:12px;
    color:#ffffff;
    font-style:italic;
    text-transform:uppercase;
    letter-spacing:3px;
}

.cmaway {
	width: 100%;
	text-align: center;
	font-family: Abel; 
	font-size: 12px!important; 
	text-transform: uppercase; 
	padding: 10px; 
	letter-spacing: 0px;
    margin-top: 15px;
	color: #e6e6e6;
    background-color: var(--highlightcolor);
	outline: 1px solid #cccccc;
    box-sizing:border-box;
}


/*---- BOXEN: REIHE 1 */
.cmava {
	width: 30%;
    height:290px;
    margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color:#d3d3d3;
	outline: 1px solid #cccccc;
    box-sizing:border-box;
}

.cmcharafacts {
    width: 36%;
    height: 290px;
	margin-top:15px;
    overflow:hidden;
    padding: 10px;
    background-color:#d3d3d3;
   outline: 1px solid #cccccc;
    box-sizing:border-box;
}

.cmright {
	width: 30%;
    height: 290px;
    margin-top:15px;
    box-sizing:border-box;
}

.cmicon {
    width: 100%;
    height:130px;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color:#d3d3d3;
	outline: 1px solid #cccccc;
    box-sizing:border-box;
}

.cmtitle {
    margin-top:11px;
    width: 100%;
    height:30px;
    background-color:#d3d3d3;
    outline: 1px solid #cccccc;
    overflow:hidden;
    font-family:Abel;
    font-size:12px;
    line-height:30px;
    font-weight:bold;
    font-style:italic;
    text-align:center;
    text-transform:uppercase;
    box-sizing:border-box;
}

.cmcontact {
    margin-top:11px;
    width: 100%;
    height:106px;
    padding:10px;
    background-color:#d3d3d3;
    outline: 1px solid #cccccc;
    box-sizing:border-box;
}

/*---- BOXEN: REIHE 2 */

.cmgroup {
    margin-top: 15px;
    width: 30%;
    height:143px;
    border:10px solid rgba(0,0,0,0);
    background-color:#d3d3d3;
	overflow: auto;
    outline: 1px solid #cccccc;
    box-sizing:border-box;
	scrollbar-color: var(--highlightcolor) #c6c6c6;
  	scrollbar-width: thin;
}

.cmdescr {
    margin-top: 15px;
    width: 68%;
    height:143px;
    overflow: auto;
    border:15px solid rgba(0,0,0,0);
    padding-right:10px;
    background-color:#d3d3d3;
   outline: 1px solid #cccccc;
    font-family:Verdana;
    font-size:11px;
    line-height:17px;
    box-sizing:border-box;
	scrollbar-color: var(--highlightcolor) #c6c6c6;
  	scrollbar-width: thin;
}

/*---- BOXEN: REIHE 3 */

.cmsig {
    margin-top: 15px;
    width: 68%;
    height: 290px;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color:#d3d3d3;
    outline: 1px solid #cccccc;
    box-sizing:border-box;
}

.cmuserfacts {
    margin-top: 15px;
    width: 30%;
    height: 290px;
    padding:10px;
    overflow: hidden;
    background-color:#d3d3d3;
    outline: 1px solid #cccccc;
    box-sizing:border-box;
}


/*---- SONSTIGES */

.cmfactb {
    margin-bottom: 10px;
    width: 100%;
    height: 25px;
    background-color:#c6c6c6;
    padding:5px 10px;
    font-family:Abel;
    font-size:12px;
    line-height:15px;
    font-weight: bold;
    text-transform:uppercase;
	box-sizing:border-box;
}

.cmfacts {
    margin-bottom: 6px;
    width: 100%;
    height: 25px;
    background-color:#c6c6c6;
    padding:5px 10px;
    font-family:Abel;
    font-size:12px;
    line-height:15px;
    text-align: right;
	text-transform:uppercase;
	overflow: hidden;
	box-sizing:border-box;
}

.cmfacta {
    float:right;
    display:inline;
    font-weight: normal;
}


/*---- SCROLLBAR */
#colourfulmadness ::-webkit-scrollbar {
    width:7px;
}
#colourfulmadness ::-webkit-scrollbar-track-piece {
    background-color:#c6c6c6;
}
#colourfulmadness ::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: var(--highlightcolor);
}


/*---- AKKORDION */

.profilaccordion {
  background-color: var(--highlightcolor);
  color: #e6e6e6;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
	font-weight: bold;
  transition: 0.4s;
	margin-top: 5px;
}

.profilpanel {
	width: 100%;
  padding: 15px 20px;
  display: none;
  background-color: #d3d3d3;
  overflow: hidden;
	font-size: 12px;
}

.profilpanel_active, .profilaccordion:hover {
	color: #eaeaea;
	font-weight: bold;
	letter-spacing: 3px;
}


/*---- STECKBRIEF */

#mlstecki {
	width: 1000px; 
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content: space-between; 
	align-items:flex-start; 
	align-content:flex-start; 
	text-align:justify; 
	color:#161616; 
	box-sizing:border-box;
}

#mlstecki ul {
	margin-top: -15px;
	padding: 12px;
}

#mlstecki b {
	font-family: Abel;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: bold;
}

.steckiantwort {
	white-space: pre-line;
	padding: 10px 15px;
	font-family: Verdana;
	font-size: 11px;
	line-height: 17px;
}

.steckimemoryout {
	background-color: #c6c6c6; 
	width: 32%; 
	height: 310px; 
	padding: 15px; 
	outline: 1px solid #cccccc; 
	margin-bottom: 20px; 
	box-sizing: border-box;
}

.steckimemoryin {
	margin: 5px 0; 
	width: 280px; 
	height: 240px; 
	overflow: auto; 
	border: 10px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckifamilie {
	float: left;
	background-color: #c6c6c6; 
	width: 77%; 
	height: 144px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	margin-bottom: 20px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckiicon {
	float: right;
	background-color: #c6c6c6; 
	width: 20%; 
	height: 144px; 
	outline: 1px solid #cccccc; 
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px; 
	box-sizing: border-box;
}


.steckicharakter {
	clear: both;
	background-color: #c6c6c6; 
	width: 100%; 
	height: 144px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	margin-bottom: 20px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckicharakterfacts {
	background-color: #c6c6c6; 
	width: 32%; 
	height: 145px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	margin-bottom: 20px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckiverwandlung {
	background-color: #c6c6c6; 
	width: 49%; 
	height: 145px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	margin-bottom: 20px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckiangst {
	background-color: #c6c6c6; 
	width: 32%; 
	height: 120px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	margin-bottom: 20px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckilebenslauf {
	background-color: #c6c6c6; 
	width: 49%; 
	height: 250px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}

.steckisituation {
	background-color: #c6c6c6; 
	width: 49%; 
	height: 250px; 
	outline: 1px solid #cccccc; 
	overflow: auto; 
	border: 15px solid rgba(0,0,0,0); 
	padding-right: 7px; 
	box-sizing: border-box;
	scrollbar-color: #B0B0B0 #d3d3d3;
  	scrollbar-width: thin;
}


/*---- INPLAYTRACKER */
.profiltrackerdate {
	background: var(--highlightcolor); 
	padding: 10px; 
	color: #eaeaea; 
	font-family: Abel; 
	font-size: 15px; 
	text-align: center;
}


.profiltrackerinfos {
	font-family: Abel; 
	font-size: 12px; 
	text-transform: uppercase; 
	font-style: italic;
}


/*---- SCROLLBAR */
#mlstecki ::-webkit-scrollbar {
    width:7px;
}
#mlstecki ::-webkit-scrollbar-track-piece {
    background-color:#d3d3d3;
}
#mlstecki ::-webkit-scrollbar-thumb:vertical {
    height:10px;
    background-color: #B0B0B0;
}