.men4ik { position:absolute;top:-1px;left:0px;width:60px;bottom:0;z-index:5;background: #383e49;border-right:1px dashed rgb(23,25,28);
	font-size: 28px;right:8%;color:rgb(23,25,28);text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);padding:14px;}
.men4ik a { color:rgb(23,25,28);text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);font-size: 28px; }
input[type="checkbox"]#menu_state {
display:none;
}
input[type="checkbox"]:checked ~ nav {
  width: 310px;z-index:12;
}
input[type="checkbox"]:checked ~ nav label[for="menu_state"] i::before {
  content: "\f053";z-index:12;
}
input[type="checkbox"]:checked ~ nav ul {
  width: 100%;
}
input[type="checkbox"]:checked ~ nav ul li a i {
  border-right: 1px solid #2f343e;
}
input[type="checkbox"]:checked ~ nav ul li a span {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;z-index:12;
}
input[type="checkbox"]:checked ~ main {
  left: 310px;z-index:12;
}
nav {
  position: absolute;
  z-index: 1;
  -webkit-box-shadow: inset 0px 2px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 2px 12px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 2px 12px 0px rgba(0,0,0,0.75);
  top: 41px;
  left: 0;
  bottom: 65px;
  background: #383e49;
  color: #9aa3a8;
  width: 60px;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  transition: all 0.15s ease-in-out;
}
nav label[for="menu_state"] i {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
  background: #383e49;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  border-radius: 50px;
  border: 0px dashed rgb(23,25,28);
  transition: width 0.15s ease-in-out;z-index:12;
}
nav label[for="menu_state"] i::before {
  margin-top: 2px;
  content: "\f054";z-index:12;
}
nav ul {
  overflow: hidden;
  display: block;
  width: 50px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  border: 1px solid #2f343e;
  position: relative;
}
nav ul li.unread:after {
  content: attr(data-content);
  position: absolute;
  top: 10px;
  left: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;
  background: #ef5952;
  font-size: 8px;
  z-index:8;
}
nav ul li:not(:last-child) {
  border-bottom: none;
}
nav ul li.active a {
  background: #4c515d;
  color: #fff;
}
nav ul li a {
  position: relative;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: #9aa3a8;
  height: 50px;
  width: 100%;
  transition: all 0.15s ease-in-out;
  font-size: 18px;
}
nav ul li a:hover {
  background: #4c515d;
  color: #fff;
}
nav ul li a * {
  height: 100%;
  display: inline-block;
}
nav ul li a i {
  text-align: center;
  width: 50px;
  z-index: 2;
}
nav ul li a i.fa {
  line-height: 50px;
}
nav ul li a span {
  padding-left: 25px;
  opacity: 0;
  line-height: 50px;
  transition: opacity 0.1s ease-in-out;
}
main {
  position:absolute;
  transition: all 0.15s ease-in-out;
  top: 0;
  left: 60px;
  right:0;
  bottom:0px;
  background-image: url(img/alice_in_wonderland_pattern.jpg);z-index:14;

}

main #topdiv {
  position:fixed;
  top: 0;
  left:0px;
}
main #bottomdiv {
  position: fixed;
  bottom: 0;
  left: 0;
}
main section {
  padding: 25px;
  font-family: helvetica;
  font-weight: lighter;
  padding: 50px;
   margin: 285px 508px;
  left:0px;
  transition: all 0.15s ease-in-out;
}

/* nicklist */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Work+Sans:400,300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #F8F8FF;
  color: White;
  font-size: 16px;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { 
  padding: 0;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.statusbar {
  position: absolute;
  top: 5rem;
  width: 100%;
  height: 2rem;
  padding: 0 1rem;
  background-color: #343841;
  border-bottom: 2px solid #292C33;
  font-size: 0.8rem;
  line-height: 2rem;
  color: #cccccc;
}
.statusbar .notification {
  float: left;
}
.statusbar .notification i {
  margin-right: 0.5rem;
}
.statusbar .date {
  float: right;
}
.statusbar .date i {
  margin-left: 0.5rem;
}

.container {
  position: absolute;
  top: 7rem;
  bottom: 0rem;
  width: 100%;
  display: -webkit-flex;
  display: flex;
}
.container .navbar {
  width: 6rem;
  display: inline-block;
  border-right: 1px solid #343841;
}
.container .navbar ul {
  padding: 0;
  list-style: none;
}
.container .navbar ul li {
  border-bottom: 1px solid #343841;
  padding: 2rem;
  cursor: pointer;
  color: #b3b3b3;
  -moz-transition: border-left 0.2s linear, color 0.2s linear;
  -o-transition: border-left 0.2s linear, color 0.2s linear;
  -webkit-transition: border-left 0.2s linear, color 0.2s linear;
  transition: border-left 0.2s linear, color 0.2s linear;
  border-left: 4px solid #292C33;
  border-right: 4px solid #292C33;
}
.container .navbar ul li i {
  font-size: 2.0rem;
}
.container .navbar ul li:hover {
  color: White;
  border-left: 4px solid #2776C5;
}
.container .navbar ul li.active, .container .navbar ul li:active {
  color: White;
  text-shadow: 0 0 20px #4590da;
  border-left: 4px solid #2776C5;
}
.container .list-group {
  width: 20rem;
  display: inline-block;
  vertical-align: top;
  background-color: #343841;
}
.container .list-group ul {
  padding: 0;
  list-style: none;
}
.container .list-group ul li {
  position: relative;
  padding: 0.5rem;
  cursor: pointer;
  color: #cccccc;
  border-bottom: 1px solid #292C33;
  -moz-transition: background-color 0.2s linear, color 0.2s linear;
  -o-transition: background-color 0.2s linear, color 0.2s linear;
  -webkit-transition: background-color 0.2s linear, color 0.2s linear;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.picture {
  float: left;
  width: 3rem;
  position: relative;
}
.picture img {
  width: 3rem;
  height: 3rem;
  -moz-border-radius: 2rem;
  -webkit-border-radius: 2rem;
  border-radius: 2rem;
  border:2px solid rgb(23,25,28);
}
.badge {
position: relative; left: 37px; top: -20px; margin-top: 45px; margin-left: -5px; background-color: #2776C5; -moz-transition: border 0.2s linear; -o-transition: border 0.2s linear; -webkit-transition: border 0.2s linear; transition: border 0.2s linear; color: White; font-size: 0.6rem; line-height: 1.1rem; width: 1.5rem; height: 1.5rem; text-align: center; border: 3px solid #343841; -moz-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -webkit-border-radius: 1rem;
  border-radius: 1rem;
}
.badge.orange {
  background-color: #D28C1D;
}
.badge.blue {
  background-color: #3198FD;
}
.badge.green {
  background-color: #59BA37;
}
.badge.red {
  background-color: #8A262E;
}
.container .list-group ul li .content {
  float: right;
  width: calc(100% - 4rem);
}
.title {
  color: White;
  font-size: 1.3em;
  font-family: "Work Sans", Arial, sans-serif;
}
.container .list-group ul li .content .description {
  font-size: 0.8rem;
  line-height: 1.2rem;
}
.container .list-group ul li .content .description .location {
  display: none;
  color: #1f5e9e;
}
.container .list-group ul li .content .description .location i {
  margin-right: 0.3rem;
}
.tags {
  margin-top: 0.4rem;
}
.tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0px 5px;
  margin: 2px;
  color: White;
  background-color: #2776C5;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.tag.orange {
  background-color: #D28C1D;
}
.tag.alizarin {
  background-color: #e74c3c;
}
.tag.blue {
  background-color: #3198FD;
}
.tag.green {
  background-color: #59BA37;
}
.tag.red {
  background-color: #8A262E;
}
.container .list-group ul li .footer {
  display: block;
  clear: both;
  width: 100%;
  padding-top: 0.8rem;
  font-size: 0.7rem;
}
.container .list-group ul li .footer .info i {
  margin-right: 0.3rem;
}
.container .list-group ul li .footer .info.left {
  float: left;
}
.container .list-group ul li .footer .info.right {
  float: right;
}
.container .list-group ul li .footer:before, .container .list-group ul li .footer:after {
  content: "";
  display: table;
}
.container .list-group ul li .footer:after {
  clear: both;
}
.container .list-group ul li .functions {
  opacity: 0.1;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  color: #b3b3b3;
  font-size: 0.8rem;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.container .list-group ul li .functions .func {
  display: inline-block;
  padding: 2px;
  cursor: pointer;
}
.container .list-group ul li .functions .func:hover {
  color: White;
}
.container .list-group ul li:hover {
  background-color: rgba(39, 118, 197, 0.3);
}
.container .list-group ul li:hover .picture .badge {
  border: 3px solid rgba(39, 118, 197, 0.6);
}
.container .list-group ul li.active, .container .list-group ul li:active {
  background-color: rgba(39, 118, 197, 0.6);
}
.container .list-group ul li.active .picture .badge, .container .list-group ul li:active .picture .badge {
  border: 3px solid #2776C5;
}
.container .list-group ul li.active, .container .list-group ul li:active, .container .list-group ul li:hover {
  color: White;
}
.container .list-group ul li.active .content .description .location, .container .list-group ul li:active .content .description .location, .container .list-group ul li:hover .content .description .location {
  color: White;
}
.container .list-group ul li.active .functions, .container .list-group ul li:active .functions, .container .list-group ul li:hover .functions {
  color: White;
  opacity: 0.7;
}
.container .list-group ul li:before, .container .list-group ul li:after {
  content: "";
  display: table;
}
.container .list-group ul li:after {
  clear: both;
}
.container > .content {
  flex: 1;
  padding: 1rem;
}
.container > .content .profile {
  position: relative;
  margin-right: 0.2rem;
  color: #cccccc;
}
.container > .content .profile .picture {
  float: left;
  width: 8rem;
  margin: 0 1rem;
  position: relative;
}
.container > .content .profile .picture img {
  width: 8rem;
  height: 8rem;
  -moz-border-radius: 4rem;
  -webkit-border-radius: 4rem;
  border-radius: 4rem;
}
.container > .content .profile .picture .badge {
  position: absolute;
  bottom: 0.5rem;
  right: -0.5rem;
  background-color: #2776C5;
  color: White;
  font-size: 1.0rem;
  line-height: 1.6rem;
  width: 2.3rem;
  text-align: center;
  border: 6px solid #292C33;
  -moz-border-radius: 2rem;
  -webkit-border-radius: 2rem;
  border-radius: 2rem;
}
.badge.orange {
  background-color: #D28C1D;
}
.badge.amethyst {
  background-color: #9b59b6;
}
.badge.TURQUOISE {
  background-color: #1abc9c;
}
.badge.blue {
  background-color: #3198FD;
}
.badge.green {
  background-color: #59BA37;
}
.badge.red {
  background-color: #8A262E;
}
.container > .content .profile .details {
  margin-bottom: 1rem;
}
.container > .content .profile .details .tags {
  margin-bottom: 0.5rem;
}
.tag {
  display: inline-block;
  font-size: 0.6rem;
  padding: 2px 8px;
  margin: 2px;
  color: White;
  background-color: #2776C5;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.tag.orange {
  background-color: #D28C1D;
}
.tag.blue {
  background-color: #3198FD;
}
.container > .content .profile .details .tags .tag.green {
  background-color: #59BA37;
}
.tag.red {
  background-color: #8A262E;
}
.container > .content .profile .details .title {
  color: White;
  font-weight: 300;
  font-size: 2.3rem;
  font-family: "Work Sans", Arial, sans-serif;
}
.container > .content .profile .details .titulus {
  display: none;
  line-height: 1.5rem;
  font-size: 0.9rem;
}
.container > .content .profile .details .description {
  margin-top: 0.6rem;
  line-height: 1.3rem;
  font-size: 0.9rem;
}
.container > .content .profile .details .description .info-row {
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.container > .content .profile .details .description .info-row i {
  width: 1.5rem;
}
.container > .content .profile .details .description .info-row .caption {
  display: inline-block;
  width: 5rem;
}
.container > .content .profile .details .description .info-row .value {
  margin-left: 0.5rem;
  color: White;
  font-weight: 400;
}
.container > .content .profile hr {
  margin: 2rem 0;
  border: none;
  border-bottom: 1px solid #40444f;
}
.container > .content .profile .further {
  margin: 1rem 2rem;
}
.container > .content .profile .further .info-row .info-block {
  display: inline-block;
  width: 40%;
  color: #b3b3b3;
  font-size: 0.9rem;
  line-height: 1.3rem;
}
.container > .content .profile .further .info-row .info-block i {
  width: 1.5rem;
}
.container > .content .profile .functions {
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 40%;
  text-align: right;
}
.container > .content .profile .functions .func {
  cursor: pointer;
  display: inline-block;
  margin: 0 0.2rem;
  color: #cccccc;
  font-size: 1.0rem;
  line-height: 2.3rem;
  width: 2.3rem;
  text-align: center;
  background-color: #40444f;
  -moz-border-radius: 2rem;
  -webkit-border-radius: 2rem;
  border-radius: 2rem;
  -moz-transition: background-color 0.2s linear, color 0.2s linear;
  -o-transition: background-color 0.2s linear, color 0.2s linear;
  -webkit-transition: background-color 0.2s linear, color 0.2s linear;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.container > .content .profile .functions .func:hover {
  color: White;
  background-color: #2776C5;
}
.title {
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: #2776C5;
  font-weight: 400;
}
.container > .content .profile .logs table {
  width: 100%;
  font-size: 0.8rem;
  line-height: 1.4rem;
}
.container > .content .profile .logs table tr {
  height: 1.4rem;
}
.container > .content .profile .logs table tr td a {
  color: #2776C5;
  text-decoration: none;
}
.container > .content .profile .logs table tr td a:hover {
  text-decoration: underline;
}
.container > .content .profile .logs table tr td:nth-child(1) {
  width: 5rem;
}

@font-face {
font-family: 'OldTown';
src: url('https://snami.mpchat.com/fonts/OldTown.ttf');
}