/* @import url(http://weloveiconfonts.com/api/?family=entypo); */
/* zocial */
/* [class*="entypo-"]:before { */
  /* font-family: 'entypo', sans-serif; */
/* } */

/*
 * variables
 */
/* *, *:before, *:after { */
  /* box-sizing: border-box; */
  /* -moz-box-sizing: border-box; */
/* } */

/* body { */
  /* min-width: 960px; */
  /* background-color: #2c2c2d; */
  /* color: #dbdcdf; */
  /* font-size: 16px; */
  /* font-family: Sans-Serif; */
/* } */

/* ul { */
  /* list-style: none; */
  /* margin: 0; */
  /* padding: 0; */
/* } */

.ui {
  position: absolute;
  width: 960px;
  height: 600px;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin: -300px 0 0 -480px;
  -moz-box-shadow: 0 2em 6em #000;
  -webkit-box-shadow: 0 2em 6em #000;
  box-shadow: 0 2em 6em #000;
}
.ui .redBackgroundStop1 {
  stop-color: #ff7464;
}
.ui .redBackgroundStop2 {
  stop-color: #ff5440;
}
.ui .purpleBackgroundStop1 {
  stop-color: #c7cbf6;
}
.ui .purpleBackgroundStop2 {
  stop-color: #a8aff1;
}
.ui .cyanBackgroundStop1 {
  stop-color: #82deef;
}
.ui .cyanBackgroundStop2 {
  stop-color: #62d6eb;
}
.ui .redForegroundStop1 {
  stop-color: #fff4f3;
}
.ui .redForegroundStop2 {
  stop-color: #ffbdb5;
}
.ui .purpleForegroundStop1 {
  stop-color: #f3f4fd;
}
.ui .purpleForegroundStop2 {
  stop-color: #cbcff7;
}
.ui .cyanForegroundStop1 {
  stop-color: #e5f8fc;
}
.ui .cyanForegroundStop2 {
  stop-color: #a6e8f4;
}

.ui__downloadList {
  margin: 1em 0 0 -3.333%;
}

.ui__downloadList__graphic {
  margin: 0.5em;
  height: 10em;
}

.ui__downloadList__headline {
  position: absolute;
  bottom: 1.25em;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: 100;
  text-align: center;
  font-size: 1.75em;
  text-shadow: 0.1em 0.1em 0.2em #22262e;
}

.ui__downloadList__backgroundCircle {
  fill: #fff;
}

.ui__downloadList__foregroundCircle {
  fill: #fff;
  stroke-width: 1px;
}

.ui__downloadList__item {
  position: relative;
  width: 30%;
  height: 15em;
  float: left;
  margin-left: 3.333%;
  /*background-color: blue;*/
  /*-moz-box-shadow: 0 0.75em 2.5em #222;*/
  /*-webkit-box-shadow: 0 0.75em 2.5em #222;*/
  /*box-shadow: 0 0.75em 2.5em #222;*/
}
.ui__downloadList__item.red {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxMzAxYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNTQ0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%, color-stop(0%, #f1301a), color-stop(100%, #ff5440));
  background-image: -moz-linear-gradient(right bottom, #f1301a, #ff5440);
  background-image: -webkit-linear-gradient(right bottom, #f1301a, #ff5440);
  background-image: linear-gradient(to left top, #f1301a, #ff5440);
}
.ui__downloadList__item.red .ui__downloadList__backgroundCircle {
  fill: url(#gradientBackgroundRed);
}
.ui__downloadList__item.red .ui__downloadList__foregroundCircle {
  fill: url(#gradientForegroundRed);
}
.ui__downloadList__item.purple {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3N2VjMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E4YWZmMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%, color-stop(0%, #777ec3), color-stop(100%, #a8aff1));
  background-image: -moz-linear-gradient(right bottom, #777ec3, #a8aff1);
  background-image: -webkit-linear-gradient(right bottom, #777ec3, #a8aff1);
  background-image: linear-gradient(to left top, #777ec3, #a8aff1);
}
.ui__downloadList__item.purple .ui__downloadList__backgroundCircle {
  fill: url(#gradientBackgroundPurple);
}
.ui__downloadList__item.purple .ui__downloadList__foregroundCircle {
  fill: url(#gradientForegroundPurple);
}
.ui__downloadList__item.cyan {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThjOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYyZDZlYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 100% 100%, 0% 0%, color-stop(0%, #00a8c9), color-stop(100%, #62d6eb));
  background-image: -moz-linear-gradient(right bottom, #00a8c9, #62d6eb);
  background-image: -webkit-linear-gradient(right bottom, #00a8c9, #62d6eb);
  background-image: linear-gradient(to left top, #00a8c9, #62d6eb);
}
.ui__downloadList__item.cyan .ui__downloadList__backgroundCircle {
  fill: url(#gradientBackgroundCyan);
}
.ui__downloadList__item.cyan .ui__downloadList__foregroundCircle {
  fill: url(#gradientForegroundCyan);
}

.ui__downloadList__subHeadline {
  position: absolute;
  bottom: 1.5em;
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: 100;
  font-size: 16px;
  text-align: center;
  /*text-shadow: 0.125em 0.125em 0.2em #22262e;*/
}

.ui__friendsList {
  padding: 0 1.5em 0 0.5em;
}

.ui__friendsList__headline {
  margin: 1.25em;
  font-size: 0.8em;
  font-weight: 200;
}

.ui__main {
  width: 85%;
  height: 100%;
  float: left;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3MWExZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNzk4ZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #171a1f), color-stop(100%, #6b798f));
  background-image: -moz-linear-gradient(right, #171a1f, #6b798f);
  background-image: -webkit-linear-gradient(right, #171a1f, #6b798f);
  background-image: linear-gradient(to left, #171a1f, #6b798f);
}

.ui__main__content {
  width: 75%;
  padding: 2em;
}

.ui__main__headline {
  margin: 0;
  padding: 0;
  font-weight: 100;
  font-size: 1.75em;
}

.ui__nav__item {
  position: relative;
  padding: 1.5em 0;
  border-bottom: 1px solid #777;
  -moz-transition: background-color 0.2s ease-in, color 0.2s ease-in;
  -o-transition: background-color 0.2s ease-in, color 0.2s ease-in;
  -webkit-transition: background-color 0.2s ease-in, color 0.2s ease-in;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.ui__nav__item:hover {
  color: #18a8f1;
}
.ui__nav__item input {
  display: none;
}
.ui__nav__item input:checked + label:before {
  position: absolute;
  content: '';
  width: 0.25em;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  background-color: #18a8f1;
  z-index: 2;
}
.ui__nav__item input:checked + label:after {
  left: 0;
}
.ui__nav__item label {
  display: block;
  height: 2em;
  line-height: 2em;
  margin: 0 0.5em;
  padding: 0 0 0 3em;
  cursor: pointer;
  z-index: 3;
}
.ui__nav__item label:before {
  position: absolute;
  top: 50%;
  left: 0.5em;
  font-size: 2em;
  margin: -0.5em 0 0 0;
}
.ui__nav__item label:after {
  content: attr(data-label);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  color: #18a8f1;
  line-height: 5em;
  padding: 0 0 0 2em;
  background-color: #22262e;
  -moz-transition: left 0.2s ease-in;
  -o-transition: left 0.2s ease-in;
  -webkit-transition: left 0.2s ease-in;
  transition: left 0.2s ease-in;
  z-index: 1;
}

.ui__sidebar {
  height: 100%;
}
.ui__sidebar.left {
  width: 15%;
  border-right: 1px solid #aaa;
  background-color: #4a5463;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjYyZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRhNTQ2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #22262e), color-stop(100%, #4a5463));
  background-image: -moz-linear-gradient(left bottom, #22262e, #4a5463);
  background-image: -webkit-linear-gradient(left bottom, #22262e, #4a5463);
  background-image: linear-gradient(to right top, #22262e, #4a5463);
}
.ui__sidebar.right {
  width: 25%;
  border-left: 1px solid #444444;
}

.ui__search__input {
  width: calc(100% - 4em);
  line-height: 2em;
  margin: 2em;
  background-color: #4a5463;
  border: 0;
  border-radius: 1em;
  font-style: italic;
  outline: 0;
}
.ui__search__input::-webkit-input-placeholder {
  position: relative;
  color: transparent;
}
.ui__search__input::-webkit-input-placeholder:before, .ui__search__input::-webkit-input-placeholder:after {
  position: absolute;
  color: #96a0b0;
}
.ui__search__input::-webkit-input-placeholder:before {
  content: 'search...';
  left: 2em;
  top: 0;
  width: 100%;
  height: 100%;
}
.ui__search__input::-webkit-input-placeholder:after {
  content: "\1f526";
  top: 0;
  left: 0.25em;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  font-size: 1.25em;
  font-family: 'entypo', sans-serif;
  font-style: normal;
}
.ui__search__input::-webkit-search-cancel-button {
  margin: 0 1em 0 0;
}

.ui__person {
  padding: 1.5em 0;
  border-bottom: 1px solid #777;
}

.ui__person__small {
  padding: 0.5em 0;
}

.ui__person__name {
  position: relative;
  margin: 0 1em 0 0.5em;
  padding: 0 0 0 2.5em;
  height: 2em;
  line-height: 2em;
  cursor: pointer;
}
.ui__person__name:hover:after {
  width: 0.75em;
  height: 0.75em;
  margin: -0.375em -0.175em 0 0;
}
.ui__person__name.away:after {
  border: 0.125em solid #ec6941;
}
.ui__person__name.notDisturb:after {
  border: 0.125em solid #e60012;
}
.ui__person__name.online:after {
  border: 0.125em solid #33aa6b;
}
.ui__person__name.offline:after {
  border: 0.125em solid #4a5463;
}
.ui__person__name:before, .ui__person__name:after {
  position: absolute;
  top: 50%;
  border-radius: 50%;
}
.ui__person__name:before {
  content: url("http://gravatar.com/avatar/22725c2d3eb331146549bf0d5d3c050c?s=30");
  height: 2em;
  width: 2em;
  left: 0;
  margin: -1em 0 0 0;
  border: 0.125em solid #fff;
  overflow: hidden;
}
.ui__person__name:after {
  content: '';
  height: 0.5em;
  width: 0.5em;
  top: 50%;
  right: 0;
  margin: -0.25em 0 0 0;
  border: 0.125em solid #33aa6b;
  z-index: 1;
  -moz-transition: width 0.2s ease-in, height 0.2s ease-in, margin 0.2s ease-in;
  -o-transition: width 0.2s ease-in, height 0.2s ease-in, margin 0.2s ease-in;
  -webkit-transition: width 0.2s ease-in, height 0.2s ease-in, margin 0.2s ease-in;
  transition: width 0.2s ease-in, height 0.2s ease-in, margin 0.2s ease-in;
}

.ui__timeline {
  height: 14em;
  margin: 1em 0 0 0;
}
.ui__timeline .domain {
  display: none;
}
.ui__timeline .tick {
  fill: #dbdcdf;
  font-size: 0.8em;
}

.ui__timeline__area {
  stroke-width: 0.125em;
}
.ui__timeline__area.red {
  fill: rgba(241, 48, 26, 0.7);
  stroke: #ff5440;
}
.ui__timeline__area.purple {
  fill: rgba(119, 126, 195, 0.7);
  stroke: #a8aff1;
}
.ui__timeline__area.cyan {
  fill: rgba(0, 168, 201, 0.7);
  stroke: #62d6eb;
}

/*
 * Helper classes
 */
.left {
  float: left;
}

.right {
  float: right;
}