/*
 * Styles
 * ------------------------------------------ */
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: default; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%; }

body {
  color: #000000;
  font: 13px system, -apple-system, "Lucida Grande", Lucida, sans-serif;
  overflow-y: hidden;
  position: relative;
  background: #f8f8f8 url("../img/bg.png") repeat 0 0;
  /*border-top: 1px solid #696a69;*/
  -webkit-font-smoothing: subpixel-antialiased; }

a {
  color: #1b94d5;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

/* Structural Layout */
#main {
  position: absolute;
  top: 0;
  right: 0;
  left: 230px;
  bottom: 0;
  z-index: 40;
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  transition: transform 300ms ease; }

.main-view-panel {
  height: 100%;
  width: auto; }

#expired-beta-splash {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 50px;
  z-index: 9999;
  background: #f8f8f8 url("../img/bg.png") repeat 0 0;
  text-align: center; }
  #expired-beta-splash .ra-circle-logo {
    margin: 20px auto 40px;
    width: 338px;
    height: 283px;
    background-image: url("../img/logo-mac-app-grayscale.png");
    background-position: 0 0;
    background-repeat: no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
      #expired-beta-splash .ra-circle-logo {
        background-image: url("../img/logo-mac-app-grayscale_2x.png");
        background-size: 338px 283px; } }
  #expired-beta-splash h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 10px auto 20px;
    text-shadow: 0 1px 0 #fff;
    color: #303030; }
  #expired-beta-splash p {
    color: #807e80;
    margin: 0 0 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }

.expired {
  pointer-events: none; }

#view-apps-list {
  height: 100%;
  padding-top: 53px;
  position: relative;
  overflow: hidden;
  -webkit-transition: opacity 700ms ease; }
  #view-apps-list.fade-in-pre, #view-apps-list.fade-out {
    opacity: 0; }
  #view-apps-list.fade-in {
    opacity: 1; }
  #view-apps-list.fade-out {
    -webkit-transition: opacity 99ms linear; }

#apps-list-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 59px;
  z-index: 10; }

#apps-scrollable {
  height: 100%;
  padding-bottom: 70px;
  overflow-y: auto; }

/* Loading */
#view-loading {
  width: 160px;
  height: 30px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -194px;
  -webkit-transition: -webkit-transform 700ms ease; }
  #view-loading #progress-description {
    display: block;
    margin: 5px 0 0;
    color: #333;
    font-size: 11px;
    text-shadow: 0 1px 0 #fff; }
  #view-loading.out {
    -webkit-transform: translate(0, 1000px); }

/* Error */
#view-error,
#view-local-error {
  width: 400px;
  text-align: center;
  padding: 200px 20px 20px;
  margin: 20px auto 0; }

/* Landing / splash */
#view-landing {
  padding: 20px;
  text-align: center;
  width: 500px;
  margin: 20px auto 0; }
  #view-landing h1 {
    font-size: 28px;
    font-weight: bold;
    margin: 10px auto 20px;
    display: block;
    width: 168px;
    height: 50px;
    background: url("../img/header.png") no-repeat 50% 0; }
    #view-landing h1 span {
      opacity: 0; }
  #view-landing p {
    margin: 0 0 5px;
    font-weight: bold;
    color: #686868;
    text-shadow: 0 1px 0 #fff;
    font-size: 11px; }
  #view-landing img {
    margin: 40px auto 40px; }
  #view-landing.fade-in-pre, #view-landing.fade-out {
    opacity: 0; }
  #view-landing.fade-in {
    opacity: 1; }
  #view-landing.fade-out {
    -webkit-transition: opacity 99ms linear; }
  #view-landing .onboard-box {
    background: #444;
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 5px 20px 5px 10px;
    border-radius: 3px;
    position: absolute;
    width: 200px;
    z-index: 10;
    -webkit-transform: translate(-40px, 0);
    opacity: 0; }
    #view-landing .onboard-box p {
      font-weight: normal;
      color: #eaeaea;
      text-shadow: none; }
    #view-landing .onboard-box .num {
      display: block;
      text-align: center;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      width: 28px;
      height: 28px;
      background: #f8f8f8;
      background-color: #fff;
      background-image: -webkit-linear-gradient(top, #fff, #f8f8f8);
      background-image: linear-gradient(to bottom,#fff, #f8f8f8);
      padding: 4px;
      border-radius: 20px;
      border: 1px solid;
      border-color: #444;
      color: #444;
      position: absolute;
      top: 50%;
      margin-top: -14px;
      right: -14px; }
    #view-landing .onboard-box::before {
      content: '';
      display: block;
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 4px;
      -webkit-transform: rotate(45deg);
      background: #444;
      top: 50%;
      margin-top: -7px;
      left: -7px;
      z-index: -10;
      border: 1px solid;
      border-color: transparent transparent rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3); }
    #view-landing .onboard-box.step-1 {
      top: 20px;
      left: 10px; }
    #view-landing .onboard-box.step-2 {
      top: 320px;
      left: 600px; }
    #view-landing .onboard-box.step-3 {
      top: 298px;
      left: -135px; }
  #view-landing.in .onboard-box {
    -webkit-transform: translate(0, 0);
    opacity: 1;
    -webkit-transition: opacity 250ms linear, -webkit-transform 500ms ease-out; }
    #view-landing.in .onboard-box.step-1 {
      -webkit-transition-delay: 200ms; }
    #view-landing.in .onboard-box.step-2 {
      -webkit-transition-delay: 400ms; }
    #view-landing.in .onboard-box.step-3 {
      -webkit-transition-delay: 600ms; }

/* Login view */
#view-login,
#view-account-options {
  padding: 20px 50px 20px 0;
  width: 600px;
  margin: 80px 0 0;
  font-family: Helvetica Neue; }
  #view-login img,
  #view-account-options img {
    display: block;
    position: absolute;
    left: 600px;
    margin-top: 25px; }
  #view-login h2,
  #view-account-options h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 10px auto 0;
    text-shadow: 0 1px 0 #fff;
    color: #303030; }
  #view-login h4,
  #view-account-options h4 {
    font-size: 18px;
    margin: 0 0 15px; }
  #view-login p,
  #view-account-options p {
    color: #807e80;
    margin: 0 0 5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
  #view-login h4 + p,
  #view-account-options h4 + p {
    font-size: 15px;
    line-height: 20px; }
  #view-login hr,
  #view-account-options hr {
    border: none;
    height: 1px;
    margin: 20px auto 25px;
    position: relative;
    background-color: #c1c3c1;
    background-image: -webkit-linear-gradient(left, #c1c3c1 0%, #c1c3c1 60%, rgba(193, 195, 193, 0) 100%);
    background-image: linear-gradient(to right,#c1c3c1 0%, #c1c3c1 60%, rgba(193, 195, 193, 0) 100%); }
    #view-login hr::after,
    #view-account-options hr::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      top: 1px;
      background-color: rgba(255, 255, 255, 0.9);
      background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%);
      background-image: linear-gradient(to right,rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%); }
  #view-login.pre-in,
  #view-account-options.pre-in {
    opacity: 0;
    -webkit-transform: translate(100px, 0); }
  #view-login.in,
  #view-account-options.in {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -webkit-transition: opacity 300ms ease, -webkit-transform 400ms ease; }
  #view-login.out,
  #view-account-options.out {
    opacity: 0;
    -webkit-transform: translate(100px, 0);
    -webkit-transition: opacity 300ms ease, -webkit-transform 400ms ease; }
  #view-login .login-back-btn,
  #view-account-options .login-back-btn {
    font-size: 11px;
    position: relative;
    top: -20px;
    color: #999; }
  #view-login.pre-in .login-back-btn,
  #view-account-options.pre-in .login-back-btn {
    opacity: 0; }
  #view-login.in .login-back-btn,
  #view-account-options.in .login-back-btn {
    opacity: 1;
    -webkit-transition: opacity 100ms linear 600ms; }

.form-group {
  margin: 0 0 10px; }
  .form-group label {
    display: block;
    text-align: left;
    margin: 0 0 2px;
    color: #484848;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff; }
  .form-group .form-hint {
    float: right;
    font-size: 12px;
    margin-right: 170px; }

input[type=email],
input[type=text],
input[type=password],
textarea {
  width: 180px;
  display: inline-block;
  margin: 0 20px 0 0;
  -webkit-user-select: auto;
  padding: 3px 5px;
  font-size: 12px;
  color: #484848; }

.form-group .radio-label {
  font-size: 13px;
  font-weight: normal;
  margin-left: 5px; }

.form-group label input[type=radio] {
  display: inline-block;
  margin-right: 5px; }

#login-form {
  position: relative; }

#login-spinner {
  position: absolute;
  top: 12px;
  left: 410px; }

/* Applications view */
#contribute-bar,
.apps-view-Contribute #apps-selector,
.apps-view-Contribute #status-selector {
  display: none; }

.apps-view-Contribute #contribute-bar {
  display: block; }

.apps-view-Contribute #topbar {
  top: auto;
  bottom: 20px; }

.apps-view-Contribute #view-apps-list {
  padding: 0 0 60px; }

.apps-view-Contribute #apps-list-header {
  top: 0; }

/* Applications Table */
table#applications {
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed; }

/* Table column widths */
#applications .col-icon {
  width: 74px !important; }

#applications .col-favourites {
  width: 40px !important; }

#applications-header {
  overflow: hidden;
  height: 21px;
  width: 100%;
  background: url("../img/table-header-bg.png") repeat-x; }
  #applications-header .resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px !important;
    right: -8px;
    cursor: ew-resize;
    z-index: 20; }
  #applications-header .col-favourites {
    width: 40px !important; }

#applications > thead {
  visibility: hidden; }
  #applications > thead th {
    height: 20px; }

#applications-header > div {
  height: 21px;
  position: relative;
  float: left;
  padding: 3px 10px !important;
  font-weight: bold;
  font-size: 11px;
  color: #626262;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  background: transparent;
  border-bottom: 1px solid #dbdbdb;
  box-shadow: 0 1px 0px rgba(0, 0, 0, 0.04) inset; }
  #applications-header > div span {
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 100%; }
  #applications-header > div::after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.06);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.16));
    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.16)); }
  #applications-header > div::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.06);
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.6));
    background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.6)); }
  #applications-header > div:first-child::before {
    display: none; }
  #applications-header > div:last-child::after {
    display: none; }

#applications td {
  vertical-align: middle;
  padding: 5px 10px;
  font-size: 13px;
  background-color: #f9faf9;
  border-bottom: 1px solid #ecedec;
  border-top: 1px solid #fdfefd;
  position: relative; }

#applications.view-Detail td {
  vertical-align: top; }

#applications tr.even td,
#applications tr:nth-child(odd) td {
  background-color: #f1f4f6;
  border-bottom-color: #e8eaec;
  border-top-color: #f7f9fb; }

#applications .icon-container {
  width: 48px;
  height: 48px;
  float: left;
  margin: 0 5px; }
  #applications .icon-container .app-icon {
    max-width: 48px;
    max-height: 48px; }

#applications .app-meta {
  font-size: 12px;
  display: block;
  color: #999; }

#applications .app-actions-toggle {
  opacity: 0;
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  top: 3px;
  left: 5px;
  background: url("../img/options-toggle.png") no-repeat 0 0; }

#applications tr:hover .app-actions-toggle,
#applications .popover ~ .app-actions-toggle {
  opacity: 1 !important;
  cursor: default; }

#applications tr:hover .app-actions-toggle {
  -webkit-transition: opacity 50ms linear 200ms; }

/* Status icons */
#applications .status-icon,
.contribute-review-status .status-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  background-color: transparent; }
  #applications .status-icon.status-worksfine,
  .contribute-review-status .status-icon.status-worksfine {
    background-color: #abfd67; }
  #applications .status-icon.status-nodata, #applications .status-icon.status-unknown,
  .contribute-review-status .status-icon.status-nodata,
  .contribute-review-status .status-icon.status-unknown {
    background-color: #66c2fc; }
  #applications .status-icon.status-doesntwork,
  .contribute-review-status .status-icon.status-doesntwork {
    background-color: #FC0017; }
  #applications .status-icon.status-someproblems,
  .contribute-review-status .status-icon.status-someproblems {
    background-color: #f7fc67; }
  #applications .status-icon::after,
  .contribute-review-status .status-icon::after {
    content: '';
    display: block;
    position: absolute;
    width: 38px;
    height: 38px;
    background: url("../img/status-icons.png") no-repeat; }
  #applications .status-icon.status-worksfine::after,
  .contribute-review-status .status-icon.status-worksfine::after {
    background-position: -174px 6px; }
  #applications .status-icon.status-nodata::after, #applications .status-icon.status-unknown::after,
  .contribute-review-status .status-icon.status-nodata::after,
  .contribute-review-status .status-icon.status-unknown::after {
    background-position: -54px 5px; }
  #applications .status-icon.status-doesntwork::after,
  .contribute-review-status .status-icon.status-doesntwork::after {
    background-position: 7px 6px; }
  #applications .status-icon.status-someproblems::after,
  .contribute-review-status .status-icon.status-someproblems::after {
    background-position: -113px 6px; }
  #applications .status-icon.status-draw::after,
  .contribute-review-status .status-icon.status-draw::after {
    background-position: -233px 4px; }

/* watch list icon */
#applications td:last-child {
  text-align: left; }
  #applications td:last-child i.entypo {
    opacity: 0;
    font-size: 36px;
    color: #575857;
    -webkit-transition: opacity 250ms ease;
    -moz-transition: opacity 250ms ease;
    transition: opacity 250ms ease; }

#applications tr.data-watch-list td:last-child i.entypo {
  opacity: 1; }

#applications i.favourite {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  background: url("../img/popover-icons2.png") no-repeat -64px 16px;
  opacity: 0;
  -webkit-transition: background 220ms ease, opacity 200ms ease;
  -moz-transition: background 220ms ease, opacity 200ms ease;
  transition: background 220ms ease, opacity 200ms ease; }
  #applications i.favourite.fav-yes {
    background-position: -64px 0;
    opacity: 1; }
  #applications i.favourite.remoteFav {
    margin: -17px 0 0 2px; }

/* not found list */
#not-found {
  border-top: 1px solid #fff;
  color: #555;
  padding: 10px 10px; }
  #not-found ul {
    padding: 0;
    margin: 20px 0 0;
    width: 580px;
    margin: 10px auto 0;
    overflow: hidden;
    -webkit-column-count: 3;
    -webkit-column-width: 180;
    -webkit-column-gap: 20; }
    #not-found ul li {
      display: block;
      line-height: 18px; }

/* Contribute */
.col-contrib-status .status-icon,
.contribute-review-status .status-icon {
  display: inline-block;
  margin: 0 20px !important;
  background-color: transparent !important; }
  .col-contrib-status .status-icon.selected.status-worksfine,
  .contribute-review-status .status-icon.selected.status-worksfine {
    background-color: #abfd67 !important; }
  .col-contrib-status .status-icon.selected.status-doesntwork,
  .contribute-review-status .status-icon.selected.status-doesntwork {
    background-color: #FC0017 !important; }
  .col-contrib-status .status-icon.selected.status-someproblems,
  .contribute-review-status .status-icon.selected.status-someproblems {
    background-color: #f7fc67 !important; }

.other-status-reports {
  font-size: 11px;
  margin: 10px 0 0;
  color: #999; }

/* Contribute review */
#view-contribute-review {
  padding: 50px 0 0;
  overflow-y: auto; }

#contribute-review-container h2 {
  position: fixed;
  top: 0;
  left: 230px;
  right: 0;
  z-index: 20;
  font-size: 13px;
  margin: 0 0 20px;
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
  font-weight: bold; }
  #contribute-review-container h2 .btn {
    position: absolute;
    right: 5px;
    top: 5px;
    font-weight: normal; }

#contribute-review-container h3 {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
  color: #444; }

.review-icon-container {
  width: 116px;
  margin: 0 auto;
  position: relative; }
  .review-icon-container button {
    position: absolute;
    top: 40px; }
    .review-icon-container button#review-paginator-prev {
      left: -60px; }
    .review-icon-container button#review-paginator-next {
      right: -40px; }

.review-app-name {
  font-size: 14px; }

.review-app-version {
  font-size: 12px;
  color: #999;
  margin: 0 0 20px; }

.contribute-review-status {
  margin: 20px 0; }

.app-container {
  float: left;
  width: 280px;
  margin: 10px 0 0 20px;
  padding: 0 20px;
  text-align: center;
  position: fixed; }

.review-additional-container {
  float: left;
  width: 400px;
  margin-left: 300px; }
  .review-additional-container label {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: top; }
  .review-additional-container textarea {
    width: 100%; }

.form-hint {
  font-size: 11px;
  color: #999; }

.paginator-state {
  color: #666; }

.inset-box {
  margin: 5px 0 20px;
  padding: 10px;
  background: #e3e4e3;
  overflow: hidden;
  border: 1px solid #c1c2c1;
  font-size: 12px;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.07) inset; }
  .inset-box .form-hint {
    color: #666; }

.review-match-check {
  margin: 10px 10px 0 0;
  text-align: center;
  width: 119px;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  float: left;
  overflow: hidden; }
  .review-match-check p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 12px; }
  .review-match-check .developer {
    font-size: 10px;
    color: #666; }
    .review-match-check .developer.nomatch {
      overflow: visible;
      white-space: inherit; }
  .review-match-check:nth-child(3n+1) {
    margin-right: 0; }

.review-match-icon {
  width: 48px;
  min-height: 48px;
  margin: 0 auto 5px; }

/*
 * Bootstrap Popovers
 * ------------------------------------------ */
.popover {
  position: absolute;
  top: 0 !important;
  left: 0;
  z-index: 80;
  display: none;
  width: 200px;
  padding: 1px;
  background-color: #f3f3f3;
  border: 1px solid rgba(180, 180, 180, 0.5);
  border-bottom-color: rgba(180, 180, 180, 0.7);
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 2px 10px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 2px 10px rgba(0, 0, 0, 0.1);
  -webkit-background-clip: padding-box; }

.popover.top {
  margin-top: -10px; }

.popover.right {
  margin-left: 10px; }

.popover.bottom {
  margin-top: 10px; }

.popover.left {
  margin-left: -10px; }

.popover-title {
  display: none;
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0; }

.popover-content {
  padding: 2px; }
  .popover-content ul {
    list-style: none;
    padding: 0;
    margin: 0; }
    .popover-content ul li {
      display: block;
      height: 25px;
      line-height: 11px;
      border-radius: 3px; }
      .popover-content ul li.text {
        height: auto;
        min-height: 25px;
        padding: 5px 6px;
        margin-top: 5px;
        font-size: 11px;
        line-height: 13px;
        color: #3a3b48; }
        .popover-content ul li.text:hover {
          background: none;
          border: none;
          color: #3a3b48; }
      .popover-content ul li.divider {
        padding: 0;
        height: 1px;
        margin: 5px 0;
        background-color: rgba(203, 204, 203, 0);
        background-image: -webkit-linear-gradient(left, rgba(203, 204, 203, 0) 0%, #cbcccb 50%, rgba(203, 204, 203, 0) 100%);
        background-image: linear-gradient(to right,rgba(203, 204, 203, 0) 0%, #cbcccb 50%, rgba(203, 204, 203, 0) 100%); }
        .popover-content ul li.divider:hover {
          border: none;
          background: inherit; }
      .popover-content ul li.disabled {
        pointer-events: none;
        opacity: 0.5; }
      .popover-content ul li a {
        display: block;
        color: #3a3b48;
        font-size: 11px;
        line-height: 11px;
        font-weight: bold;
        padding: 5px 3px; }
      .popover-content ul li i.entypo {
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        color: transparent;
        display: block;
        width: 16px;
        height: 16px;
        float: left;
        position: relative;
        margin: 0 7px 0 0;
        top: -1px;
        background: url("../img/popover-icons2.png") no-repeat; }
      .popover-content ul li:hover {
        background-color: #8aa7c8;
        border: 1px solid #829dbc; }
        .popover-content ul li:hover a {
          color: #f4f7f9;
          text-decoration: none; }
    .popover-content ul li .popover-action-add-favourite i {
      background-position: -64px 0; }
    .popover-content ul li:hover .popover-action-add-favourite i {
      background-position: -64px -16px; }
    .popover-content ul li .popover-action-remove-favourite i {
      background-position: -32px 0; }
    .popover-content ul li:hover .popover-action-remove-favourite i {
      background-position: -32px -16px; }
    .popover-content ul li .popover-action-show-on-roaringapps i {
      background-position: 0 0; }
    .popover-content ul li:hover .popover-action-show-on-roaringapps i {
      background-position: 0 -16px; }
    .popover-content ul li .popover-action-report-mismatch i {
      background-position: -48px 0; }
    .popover-content ul li:hover .popover-action-report-mismatch i {
      background-position: -48px -16px; }
    .popover-content ul li .popover-action-details i {
      background-position: -96px 0; }
    .popover-content ul li:hover .popover-action-details i {
      background-position: -96px -16px; }
    .popover-content ul li .popover-action-share-experience i {
      background-position: -80px 0; }
    .popover-content ul li:hover .popover-action-share-experience i {
      background-position: -80px -16px; }
    .popover-content ul li .popover-action-visit-website i {
      background-position: -112px 0; }
    .popover-content ul li:hover .popover-action-visit-website i {
      background-position: -112px -16px; }

.popover-content p,
.popover-content ul,
.popover-content ol {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px; }

.popover .arrow,
.popover .arrow::after,
.popover .arrow::before {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.popover .arrow::after {
  z-index: -1;
  content: ""; }

.popover .arrow::before {
  z-index: 2;
  content: ""; }

.popover.top .arrow {
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  border-top-color: #ffffff;
  border-width: 10px 10px 0; }

.popover.top .arrow:after {
  bottom: -1px;
  left: -11px;
  border-top-color: rgba(0, 0, 0, 0.25);
  border-width: 11px 11px 0; }

.popover.right .arrow {
  top: 11px;
  left: -10px;
  border-right-color: #fff;
  border-width: 10px 10px 10px 0; }

.popover.right .arrow::after {
  bottom: -11px;
  left: -1px;
  border-right-color: rgba(180, 180, 180, 0.5);
  border-width: 11px 11px 11px 0; }

.popover.right .arrow::before {
  bottom: -9px;
  left: 2px;
  border-right-color: #f3f3f3;
  border-width: 9px 9px 9px 0; }

.popover.bottom .arrow {
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border-bottom-color: #ffffff;
  border-width: 0 10px 10px; }

.popover.bottom .arrow:after {
  top: -1px;
  left: -11px;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  border-width: 0 11px 11px; }

.popover.left .arrow {
  top: 50%;
  right: -25px;
  margin-top: -10px;
  border-left-color: #ffffff;
  border-width: 25px 0 25px 25px; }

.popover.left .arrow:after {
  right: -1px;
  bottom: -11px;
  border-left-color: rgba(0, 0, 0, 0.25);
  border-width: 24px 0 24px 24px; }

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear; }

.fade.in {
  opacity: 1; }

/* popover click catcher */
#catcher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50; }

/*
Copyright (c) 2010-2012 Ivan Vanderbyl
Originally found at http://ivan.ly/ui

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/
/* Webkit animation keyframes */
@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0; }
  to {
    background-position: 44px 0; } }

@-moz-keyframes animate-stripes {
  from {
    background-position: 0 0; }
  to {
    background-position: 36px 0; } }

/* Window not focussed styles */
.window-blur {
  border-top-color: #b2b3b2; }
  .window-blur #side {
    background-color: #f5f6f5;
    border-right: 1px solid #dedfde; }
  .window-blur .side-group {
    border-bottom: 1px solid #e5e6e5;
    -webkit-box-shadow: none;
    box-shadow: none; }
    .window-blur .side-group.bottom {
      border-bottom: none;
      border-top: 1px solid #e5e6e5;
      -webkit-box-shadow: none;
      box-shadow: none; }

.text-centre, .text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-left {
  text-align: left; }

.btn {
  display: inline-block;
  padding: 4px 7px;
  width: auto;
  position: relative;
  color: #111;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  background-color: #fff;
  background-image: -webkit-linear-gradient(top, #fff, #e8e9e8);
  background-image: linear-gradient(to bottom,#fff, #e8e9e8);
  border: 1px solid #aaabaa;
  border-radius: 3px;
  box-shadow: 0 2px 0 #fff inset, 0 1px 0 rgba(255, 255, 255, 0.4);
  /* Mac selected action button */
  /* White button next to the above one */ }
  .btn:hover {
    text-decoration: none;
    cursor: default; }
  .btn:active {
    background-color: #f1f2f1;
    background-image: -webkit-linear-gradient(top, #f1f2f1, #f8f9f8);
    background-image: linear-gradient(to bottom,#f1f2f1, #f8f9f8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) inset; }
  .btn:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default; }
  .btn.go {
    padding: 4px 20px 4px 7px; }
    .btn.go::after {
      content: '';
      display: block;
      width: 8px;
      height: 13px;
      position: absolute;
      right: 6px;
      top: 5px;
      background: url("../img/btn-go2.png") no-repeat 0 0; }
  .btn.btn-action {
    border: 1px solid #27597c;
    background-color: #4ca4e9;
    background-image: -webkit-linear-gradient(top, #4ca4e9, #2974d2);
    background-image: linear-gradient(to bottom,#4ca4e9, #2974d2);
    box-shadow: inset 0 1px 0 #80c0f1;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    padding: 4px 15px 6px;
    font-size: 13px;
    line-height: 1; }
  .btn.btn-action:active {
    background-color: #0e5490;
    background-image: -webkit-linear-gradient(top, #0e5490, #5493cc);
    background-image: linear-gradient(to bottom,#0e5490, #5493cc);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 3px rgba(0, 0, 0, 0.2) inset;
    outline: none; }
  .btn.btn-blue {
    font-weight: normal;
    height: 25px;
    line-height: 10px;
    background: #2587fa;
    color: #fff;
    padding: 6px 10px;
    margin: 2px 1px 0 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    -webkit-user-select: none;
    box-shadow: none;
    text-shadow: none; }
  .btn.btn-primary {
    padding: 3px 16px 4px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    background-color: #6cb2f8;
    background-image: -webkit-linear-gradient(top, #6cb2f8, #1b83fb);
    background-image: linear-gradient(to bottom,#6cb2f8, #1b83fb);
    border-top-color: #3c9af5;
    border-right-color: #2e82f8;
    border-bottom-color: #1464fa;
    border-left-color: #2e82f8;
    box-shadow: 0 1px #f7f7f7;
    border-radius: 4px; }
    .btn.btn-primary:hover {
      cursor: default; }
  .btn.btn-secondary {
    padding: 3px 16px 4px;
    line-height: 1;
    background: #fff;
    border-top-color: #d9d9d9;
    border-right-color: #d2d2d2;
    border-bottom-color: #bababa;
    border-left-color: #d2d2d2;
    box-shadow: 0 1px #f7f7f7;
    border-radius: 4px; }
    .btn.btn-secondary:hover {
      cursor: default; }
  .btn.btn-primary:active, .btn.btn-secondary:active {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    background-color: #4d98fa;
    background-image: -webkit-linear-gradient(top, #4d98fa, #176be2);
    background-image: linear-gradient(to bottom,#4d98fa, #176be2);
    border-top-color: #2a80fa;
    border-right-color: #1e67ec;
    border-left-color: #1a60e8;
    border-bottom-color: #0d45d8;
    box-shadow: 0 1px #f7f7f7;
    cursor: default; }

#side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 230px;
  background-color: #f5f6f5;
  border-right: 1px solid #d8d9d8;
  overflow-y: auto;
  z-index: 50;
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  transition: transform 300ms ease; }

#side h2 {
  font-size: 11px;
  font-weight: 600;
  margin: 5px 0;
  color: #737070;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-user-select: none;
  cursor: default; }

#side .side-h-action {
  color: #737070;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  float: right;
  font-weight: normal; }
  #side .side-h-action:active {
    opacity: 0.8; }

#side .side-inline-action {
  color: #737070; }
  #side .side-inline-action:active {
    opacity: 0.8; }

#side p {
  margin: 5px 0 0;
  font-size: 11px;
  padding: 0 5px;
  color: #8d8989;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }

#side ul:not(.dropdown-menu) {
  color: #414c54;
  list-style: none;
  padding: 0 0 0 0;
  margin: 0; }
  #side ul:not(.dropdown-menu) li {
    display: block;
    word-wrap: break-word;
    margin: 0;
    padding: 5px 0 5px 10px;
    position: relative;
    line-height: 1;
    font-style: normal;
    font-size: 11px;
    color: #000; }
    #side ul:not(.dropdown-menu) li.user-dir {
      padding: 5px 0 5px 30px;
      background-repeat: no-repeat;
      background-position: 10px 3px;
      background-image: url("../img/NewerGenericFolderIcon.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        #side ul:not(.dropdown-menu) li.user-dir {
          background-image: url("../img/NewerGenericFolderIcon_2x.png");
          background-size: 16px 16px; } }
    #side ul:not(.dropdown-menu) li em {
      font-style: normal;
      float: right;
      color: #595959;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
    #side ul:not(.dropdown-menu) li .dir-remove,
    #side ul:not(.dropdown-menu) li .app-watchlist-remove {
      position: absolute;
      left: -5px;
      top: 6px;
      display: block;
      width: 13px;
      height: 14px;
      padding: 1px;
      opacity: 0;
      cursor: default;
      font-size: 14px;
      font-weight: normal;
      line-height: 8px;
      text-align: left;
      color: #737070; }
    #side ul:not(.dropdown-menu) li:hover .dir-remove {
      opacity: 1; }
    #side ul:not(.dropdown-menu) li .dir-remove:active {
      opacity: 0.6; }

#side .dir-add {
  display: block;
  font-weight: bold;
  font-size: 14px;
  height: 18px;
  line-height: 12px;
  cursor: default;
  float: right;
  margin: -2px 0 0;
  padding: 1px 4px;
  border-radius: 10px; }
  #side .dir-add:hover {
    color: #fff;
    text-shadow: 0 1px 0 #848b9c;
    background-color: #b4bfd6;
    -webkit-box-shadow: 0 1px 0 #e8ecef, 0 -1px 0 #8690a7, inset 0 1px 1px rgba(103, 123, 169, 0.42);
    box-shadow: 0 1px 0 #e8ecef, 0 -1px 0 #8690a7, inset 0 1px 1px rgba(103, 123, 169, 0.42); }
  #side .dir-add:active {
    text-shadow: 0 1px 0 #848b9c;
    background-color: #b4bfd6;
    -webkit-box-shadow: 0 1px 0 #e8ecef, 0 -1px 0 #8690a7, inset 0 1px 1px rgba(103, 123, 169, 0.42);
    box-shadow: 0 1px 0 #e8ecef, 0 -1px 0 #8690a7, inset 0 1px 1px rgba(103, 123, 169, 0.42); }

#side progress {
  display: block;
  margin: 0 auto;
  width: 120px; }

#side.out {
  -webkit-transform: translate(-300px, 0);
  margin-right: -300px; }

#side {
  -webkit-transition: -webkit-transform 280ms ease 65ms; }

.side-group {
  padding: 0 10px 20px; }
  .side-group.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px; }

.apps-list-2016 {
  position: relative;
  height: 100%;
  padding-top: 0px;
  padding-bottom: 70px;
  overflow-y: auto; }
  .apps-list-2016 [class^=col] {
    display: table-cell;
    height: 70px;
    padding: 10px 10px;
    font-size: 13px;
    vertical-align: top; }
  .apps-list-2016 .col-icon {
    width: 74px; }
  .apps-list-2016 .col-application {
    width: 250px !important;
    min-width: 250px;
    max-width: 250px; }
  .apps-list-2016 .col-os {
    width: 80px; }

.apps-list-2016 .header {
  position: fixed;
  top: 34px;
  left: 230px;
  right: 0;
  z-index: 10; }

.apps-list-2016 .header .row {
  height: 23px;
  background: #fefffe;
  border-bottom: 1px solid #e5e6e5;
  white-space: nowrap;
  overflow: hidden; }
  .apps-list-2016 .header .row [class^=col] {
    float: left;
    position: relative;
    height: 23px;
    min-width: 50px;
    padding: 4px 10px;
    font-size: 11px; }
    .apps-list-2016 .header .row [class^=col]::after {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 2px;
      bottom: 3px;
      width: 1px;
      background: #e5e6e5;
      z-index: 1; }
  .apps-list-2016 .header .row .col-os {
    text-align: center; }

.apps-list-2016 .row {
  background-color: #fefffe;
  position: relative; }

.apps-list-2016 .row:nth-child(even) {
  background-color: #f4f5f4; }

.apps-list-2016 .row:nth-child(even) [class^=col] {
  background-color: #f4f5f4; }

.apps-list-2016 .row:nth-child(odd) [class^=col] {
  background-color: #fefffe; }

.apps-list-2016 .icon-container {
  width: 48px;
  height: 48px;
  float: left;
  margin: 0 5px; }
  .apps-list-2016 .icon-container .app-icon {
    max-width: 48px;
    max-height: 48px; }

.apps-list-2016 .col-application p {
  margin: 5px 0 5px; }

.apps-list-2016 .col-application .app-meta {
  display: block;
  min-height: 16px; }

.apps-list-2016 .col-application .app-meta.app-bundle-id {
  color: #999; }

.apps-list-2016 .col-application p strong {
  display: inline-block;
  padding: 0 22px 0 0;
  background-image: url("../img/2016/three-dots.png");
  background-repeat: no-repeat;
  background-position: 200% 0; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    .apps-list-2016 .col-application p strong {
      background-image: url("../img/2016/three-dots_2x.png");
      background-size: 15px 15px; } }

.apps-list-2016 .row:hover .col-application p strong {
  background-position: 100% 0;
  -webkit-transition: background 0 linear 300ms;
  -moz-transition: background 0 linear 300ms;
  transition: background 0 linear 300ms; }

.apps-list-2016 .status-icon {
  width: 38px;
  height: 38px;
  margin: 5px auto 0;
  position: relative;
  background-image: url("../img/status-icons-full.png"); }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    .apps-list-2016 .status-icon {
      background-image: url("../img/status-icons-full_2x.png");
      background-size: 190px 38px; } }
  .apps-list-2016 .status-icon.status-worksfine {
    background-position: 0 0; }
  .apps-list-2016 .status-icon.status-nodata, .apps-list-2016 .status-icon.status-unknown {
    background-position: -38px 0; }
  .apps-list-2016 .status-icon.status-doesntwork {
    background-position: -76px 0; }
  .apps-list-2016 .status-icon.status-someproblems {
    background-position: -114px 0; }
  .apps-list-2016 .status-icon.status-draw {
    background-position: -152px 0; }

.apps-list-2016 .body .row {
  height: 70px;
  -webkit-transition: all 500ms cubic-bezier(0.8, -0.55, 0.265, 1);
  -moz-transition: all 500ms cubic-bezier(0.8, -0.55, 0.265, 1);
  transition: all 500ms cubic-bezier(0.8, -0.55, 0.265, 1); }
  .apps-list-2016 .body .row .app-detail-view {
    display: block;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity 150ms linear;
    -moz-transition: opacity 150ms linear;
    transition: opacity 150ms linear; }

.apps-list-2016 .row.active .app-detail-view {
  opacity: 1;
  -webkit-transition: opacity 150ms linear 200ms;
  -moz-transition: opacity 150ms linear 200ms;
  transition: opacity 150ms linear 200ms; }

.apps-list-2016 .row.active ~ .row {
  -webkit-transform: translateY(180px);
  -moz-transform: translateY(180px);
  -ms-transform: translateY(180px);
  -o-transform: translateY(180px);
  transform: translateY(180px);
  -webkit-transition: all 500ms cubic-bezier(0.8, 0, 0.265, 1.3);
  -moz-transition: all 500ms cubic-bezier(0.8, 0, 0.265, 1.3);
  transition: all 500ms cubic-bezier(0.8, 0, 0.265, 1.3); }

.apps-list-2016 .app-detail-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 200px;
  padding: 20px 0 0 80px;
  margin: 0;
  background: #dfe2df; }
  .apps-list-2016 .app-detail-view ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .apps-list-2016 .app-detail-view tt {
    display: inline-block;
    padding: 1px 4px;
    font-family: Menlo, Courier, monospace;
    font-size: 11px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto; }

.local-app-details,
.remote-app-details {
  margin: 0;
  word-wrap: break-word; }

.table.table-clear th {
  text-align: right;
  padding-right: 5px;
  font-weight: normal;
  color: #6e6b6b; }

.table.table-clear td:only-child {
  padding-top: 5px; }

.pretend-link::after {
  content: '';
  display: inline-block;
  margin: 0 0 0 8px;
  width: 8px;
  height: 13px;
  position: relative;
  top: 2px;
  opacity: 0.5;
  background: url("/img/btn-go2.png") no-repeat left top; }

/* Match indicators */
.match-indicator {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: red;
  opacity: 0;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  transition: opacity 200ms ease; }
  .match-indicator.pc-99 {
    background: green; }
  .match-indicator.pc-95 {
    background: #00b300; }
  .match-indicator.pc-50 {
    background: #ffb733; }
  .match-indicator.pc-40 {
    background: #ffff33; }

.show-match-indicators .match-indicator {
  opacity: 1; }

.landing-logo {
  width: 300px;
  height: 250px;
  margin: 20px auto;
  background-image: url("../img/logo-mac-app-grayscale-bare.png");
  background-position: 50% 50%;
  opacity: 0.7; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    .landing-logo {
      background-image: url("../img/logo-mac-app-grayscale-bare_2x.png");
      background-size: 338px 283px; } }

.topbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  background: red; }

.testdiv {
  color: #f4f5f4; }

.filter-bar {
  width: 100%;
  height: 34px;
  padding: 2px 10px;
  font-size: 12px;
  white-space: nowrap;
  background: #fff;
  border-bottom: 1px solid #d9d9d9; }
  .filter-bar > div {
    display: table-cell;
    position: relative;
    z-index: 20; }
  .filter-bar label {
    display: block;
    font-weight: normal;
    height: 25px;
    line-height: 12px;
    color: #494a49;
    padding: 6px 10px;
    margin: 2px 1px 0 0;
    border-radius: 5px;
    border: 1px solid transparent;
    -webkit-user-select: none;
    z-index: 30; }
  .filter-bar .label {
    clear: left;
    margin-bottom: 3px; }
    .filter-bar .label span {
      font-weight: normal;
      display: inline-block;
      width: 50px; }
  .filter-bar input[type="checkbox"],
  .filter-bar input[type="radio"] {
    opacity: 0;
    display: block;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none; }
  .filter-bar input:checked + label {
    background-color: #d2e3f7;
    color: #1e65b9; }
  .filter-bar label:active {
    background-color: #e4e5e4; }
  .filter-bar .divider {
    height: 30px;
    width: 1px;
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    transform: translateX(5px);
    background-color: rgba(136, 136, 136, 0);
    background-image: -webkit-linear-gradient(top, rgba(136, 136, 136, 0) 0%, rgba(136, 136, 136, 0) 10%, rgba(136, 136, 136, 0.6) 50%, rgba(136, 136, 136, 0) 90%, rgba(136, 136, 136, 0) 100%);
    background-image: linear-gradient(to bottom,rgba(136, 136, 136, 0) 0%, rgba(136, 136, 136, 0) 10%, rgba(136, 136, 136, 0.6) 50%, rgba(136, 136, 136, 0) 90%, rgba(136, 136, 136, 0) 100%); }
  .filter-bar .divider ~ div {
    -webkit-transform: translateX(12px);
    -moz-transform: translateX(12px);
    -ms-transform: translateX(12px);
    -o-transform: translateX(12px);
    transform: translateX(12px); }

.filter-bar .dropdown {
  position: relative;
  z-index: 100; }
  .filter-bar .dropdown .dropdown-toggle {
    display: block;
    height: 23px;
    border: 1px solid;
    border-color: #d8d9d8 #d1d2d1 #b9bab9;
    background: #fff;
    box-shadow: 0 1px 0 #fdfefd inset, 0 1px 0 #f6f7f6;
    border-radius: 4px;
    margin: 3px 10px 0 0;
    padding: 2px 5px;
    line-height: 17px;
    position: relative; }
  .filter-bar .dropdown .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 39px;
    padding: 10px 10px;
    width: 220px;
    background: rgba(244, 245, 244, 0.95);
    border: 1px solid #bfc0bf;
    border-radius: 5px;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
    z-index: 200; }
  .filter-bar .dropdown .dropdown-menu.centre {
    left: 50%;
    margin-left: -115px; }
  .filter-bar .dropdown.open .dropdown-menu {
    display: block; }
  .filter-bar .dropdown .dropdown-menu.extrude::before {
    content: '';
    display: block;
    position: absolute;
    top: -26px;
    left: 50%;
    margin-left: -13px;
    width: 0px;
    height: 0px;
    border: 13px solid;
    border-color: transparent transparent #bfc0bf transparent; }
  .filter-bar .dropdown .dropdown-menu.extrude::after {
    content: '';
    display: block;
    position: absolute;
    top: -24px;
    left: 50%;
    margin-left: -12px;
    width: 0px;
    height: 0px;
    border: 12px solid;
    border-color: transparent transparent #f4f5f4 transparent; }
  .filter-bar .dropdown .dropdown-menu li {
    display: block;
    height: 23px;
    font-size: 12px;
    line-height: 17px;
    padding: 2px 20px;
    color: #222;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent; }
    .filter-bar .dropdown .dropdown-menu li em {
      font-style: normal;
      display: inline-block;
      width: 28px;
      text-align: right; }
    .filter-bar .dropdown .dropdown-menu li.current {
      background-image: url("../img/2016/select-tick.png");
      background-position: 5px 5px;
      background-repeat: no-repeat; }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        .filter-bar .dropdown .dropdown-menu li.current {
          background-image: url("../img/2016/select-tick_2x.png");
          background-size: 11px 11px; } }
    .filter-bar .dropdown .dropdown-menu li.current:hover {
      background-image: url("../img/2016/select-tick-white.png");
      background-position: 5px 5px;
      background-repeat: no-repeat; }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        .filter-bar .dropdown .dropdown-menu li.current:hover {
          background-image: url("../img/2016/select-tick-white_2x.png");
          background-size: 11px 11px; } }
    .filter-bar .dropdown .dropdown-menu li:hover {
      color: #fff;
      border-top-color: #0050d1;
      border-bottom-color: #004bcc;
      background: #0068d9;
      cursor: default; }
  .filter-bar .dropdown .dropdown-menu h4 {
    text-align: center;
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase; }
  .filter-bar .dropdown .dropdown-menu p {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 15px;
    color: #222; }
  .filter-bar .dropdown .dropdown-menu input[type=text],
  .filter-bar .dropdown .dropdown-menu input[type=email],
  .filter-bar .dropdown .dropdown-menu input[type=password] {
    width: 100%;
    margin: 0; }

.filter-bar .select-osx {
  width: 170px; }
  .filter-bar .select-osx .dropdown-toggle {
    padding: 2px 16px 2px 10px; }
    .filter-bar .select-osx .dropdown-toggle::after {
      content: '';
      display: block;
      width: 7px;
      height: 11px;
      position: absolute;
      right: 5px;
      top: 5px;
      background-image: url("../img/2016/select-arrows-2016.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        .filter-bar .select-osx .dropdown-toggle::after {
          background-image: url("../img/2016/select-arrows-2016_2x.png");
          background-size: 7px 11px; } }
  .filter-bar .select-osx .dropdown-menu {
    top: -15px;
    padding: 6px 0;
    width: 180px; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px); } }

@-moz-keyframes shake {
  0%, 100% {
    -moz-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -moz-transform: translateX(10px); } }

@-ms-keyframes shake {
  0%, 100% {
    -ms-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -ms-transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -ms-transform: translateX(10px); } }

@-o-keyframes shake {
  0%, 100% {
    -o-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    -o-transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    -o-transform: translateX(10px); } }

@keyframes shake {
  0%, 100% {
    transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px); }
  20%, 40%, 60%, 80% {
    transform: translateX(10px); } }

.modal {
  position: absolute;
  width: 320px;
  height: 290px;
  padding: 10px 30px;
  overflow: hidden;
  background: #ecedec;
  border-top: 1px solid #fafafa;
  border-radius: 6px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  text-align: center;
  top: 45%;
  left: 50%;
  margin-left: -160px;
  margin-top: -145px;
  z-index: 70;
  -webkit-transition: -webkit-transform 450ms cubic-bezier(0.4, 1.35, 0.5, 1), height 400ms ease;
  -moz-transition: -moz-transform 450ms cubic-bezier(0.4, 1.35, 0.5, 1), height 400ms ease;
  transition: transform 450ms cubic-bezier(0.4, 1.35, 0.5, 1), height 400ms ease; }
  .modal.out {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(300px);
    -moz-transform: translateY(300px);
    -ms-transform: translateY(300px);
    -o-transform: translateY(300px);
    transform: translateY(300px); }
  .modal.in {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }

.preferences-modal {
  width: 440px;
  height: 360px;
  margin-left: -220px;
  margin-top: -180px; }
  .preferences-modal.show-screen-2 .modal-close-btn {
    opacity: 0; }
  .preferences-modal.show-screen-2 .modal-back-btn {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all 400ms cubic-bezier(0.4, 1.35, 0.5, 1) 50ms;
    -moz-transition: all 400ms cubic-bezier(0.4, 1.35, 0.5, 1) 50ms;
    transition: all 400ms cubic-bezier(0.4, 1.35, 0.5, 1) 50ms; }

.experience-modal {
  width: 420px;
  height: 400px;
  margin-left: -210px;
  margin-top: -200px; }

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  border-radius: 0 0 4px 4px;
  opacity: 0;
  z-index: 60;
  -webkit-transition: opacity 300ms ease;
  -moz-transition: opacity 300ms ease;
  transition: opacity 300ms ease; }
  .modal-backdrop.out {
    pointer-events: none; }
  .modal-backdrop.in {
    opacity: 0.5; }

.modal-close-btn {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 8px;
  width: 12px;
  height: 12px;
  background: #fe5e56;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1); }
  .modal-close-btn:active {
    background: #d80c01; }

.modal-back-btn {
  position: absolute;
  top: 0;
  left: 0;
  margin: 8px;
  opacity: 0;
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  -o-transform: translateX(80px);
  transform: translateX(80px); }
  .modal-back-btn:hover {
    cursor: default; }

.modal-header h2 {
  font-family: Myriad Pro, -apple-system, Verdana, sans-serif;
  font-weight: 300;
  font-size: 18px;
  margin-top: 0px; }

.modal form label {
  text-shadow: none; }

.modal form input {
  width: 100%; }
  .modal form input.ng-dirty.ng-invalid:not(:focus) {
    border: 1px solid #ed0d01;
    padding: 4px 6px; }

.modal-loading {
  margin: -10px 0 0; }

.modal-error-msg {
  font-size: 12px;
  text-align: left;
  color: #d80c01;
  display: inline-block;
  margin: 6px 0 0; }

.modal .form-group h4 {
  text-align: left;
  margin: 0 0 5px; }
  .modal .form-group h4 + p {
    margin: 0; }

.modal .checkbox-group label {
  position: relative;
  padding-left: 25px;
  font-weight: normal;
  font-size: 12px; }

.modal .checkbox-group input {
  position: absolute;
  left: 0;
  top: -2px; }

.modal form .hint {
  font-size: 11px;
  text-align: left;
  color: #888; }
  .modal form .hint p {
    margin: 0; }

.modal-inset {
  margin: 10px 0;
  padding: 5px 10px;
  max-height: 230px;
  overflow-y: auto;
  background-color: #e2e3e2;
  border-radius: 4px;
  box-shadow: 0 1px 0 #d3d4d3 inset, 0 1px 1px rgba(211, 212, 211, 0.4) inset; }
  .modal-inset ul {
    padding-left: 10px;
    list-style: none; }

/* For list of uploaded macs */
.pref-list-item {
  position: relative;
  margin: 0 0 10px; }

.pref-list-remove {
  display: block;
  position: absolute;
  right: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  color: #fff;
  background: #aaa;
  border-radius: 7px;
  text-align: center;
  font-size: 14px;
  line-height: 12px; }
  .pref-list-remove:hover {
    background: #999; }
  .pref-list-remove:active {
    background: #777; }

/* Shake modal on error */
.modal.error {
  -webkit-animation: shake 0.8s ease;
  -moz-animation: shake 0.8s ease;
  animation: shake 0.8s ease; }

/* Modal screens */
.modal-screen {
  position: absolute;
  left: 30px;
  width: 260px;
  height: 270px;
  -webkit-transition: -webkit-transform 450ms cubic-bezier(0.4, 1.3, 0.5, 1);
  -moz-transition: -moz-transform 450ms cubic-bezier(0.4, 1.3, 0.5, 1);
  transition: transform 450ms cubic-bezier(0.4, 1.3, 0.5, 1); }

.show-screen-1 .screen-1 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.show-screen-1 .screen-2 {
  -webkit-transform: translateX(320px);
  -moz-transform: translateX(320px);
  -ms-transform: translateX(320px);
  -o-transform: translateX(320px);
  transform: translateX(320px); }

.show-screen-2 .screen-1 {
  -webkit-transform: translateX(-320px);
  -moz-transform: translateX(-320px);
  -ms-transform: translateX(-320px);
  -o-transform: translateX(-320px);
  transform: translateX(-320px); }

.show-screen-2 .screen-2 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.signin-modal.show-screen-1 {
  height: 240px; }

.preferences-modal .modal-screen {
  width: 380px;
  height: 340px; }

.preferences-modal.show-screen-1 .screen-1 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.preferences-modal.show-screen-1 .screen-2 {
  -webkit-transform: translateX(440px);
  -moz-transform: translateX(440px);
  -ms-transform: translateX(440px);
  -o-transform: translateX(440px);
  transform: translateX(440px); }

.preferences-modal.show-screen-2 .screen-1 {
  -webkit-transform: translateX(-440px);
  -moz-transform: translateX(-440px);
  -ms-transform: translateX(-440px);
  -o-transform: translateX(-440px);
  transform: translateX(-440px); }

.preferences-modal.show-screen-2 .screen-2 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.experience-modal .modal-screen {
  width: 360px;
  height: 380px; }

.experience-modal.show-screen-1 .screen-1 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

.experience-modal.show-screen-1 .screen-2 {
  -webkit-transform: translateX(420px);
  -moz-transform: translateX(420px);
  -ms-transform: translateX(420px);
  -o-transform: translateX(420px);
  transform: translateX(420px); }

.experience-modal.show-screen-2 .screen-1 {
  -webkit-transform: translateX(-420px);
  -moz-transform: translateX(-420px);
  -ms-transform: translateX(-420px);
  -o-transform: translateX(-420px);
  transform: translateX(-420px); }

.experience-modal.show-screen-2 .screen-2 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0); }

/* Info-style modal (modelled off iTunes 'song info' modal) */
.info-modal {
  padding: 0 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  background: #ffffff;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4); }
  .info-modal .modal-header {
    padding: 10px;
    text-align: left;
    background: #f2f2f2;
    border-bottom: 1px solid #dfdfdf;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; }
    .info-modal .modal-header .icon-container {
      float: left;
      margin: 0 10px 0 0; }
    .info-modal .modal-header h2, .info-modal .modal-header h3, .info-modal .modal-header h4 {
      margin: 0; }
      .info-modal .modal-header h2:first-of-type, .info-modal .modal-header h3:first-of-type, .info-modal .modal-header h4:first-of-type {
        margin-top: 12px; }
    .info-modal .modal-header p {
      margin: 0; }
      .info-modal .modal-header p.sub {
        font-size: 12px;
        color: #666; }
    .info-modal .modal-header h2:last-child, .info-modal .modal-header h3:last-child, .info-modal .modal-header h4:last-child, .info-modal .modal-header p:last-child {
      margin-bottom: 15px; }
  .info-modal .modal-body {
    display: block;
    max-height: 251px;
    width: 100%;
    overflow-y: auto;
    padding: 0 20px 40px; }
  .info-modal .modal-footer {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 20px;
    background: #fff; }
    .info-modal .modal-footer .modal-loading-indicator {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: -10px; }
    .info-modal .modal-footer .modal-action-buttons {
      text-align: right; }

/* Modal forms */
.modal-form {
  margin: 0 auto;
  border-collapse: collapse; }
  .modal-form td {
    vertical-align: top;
    padding-top: 5px; }
  .modal-form td:first-child {
    text-align: right; }
  .modal-form td:nth-child(2) {
    text-align: left;
    padding-left: 6px; }
  .modal-form label {
    color: #888; }
  .modal-form textarea {
    height: 21px;
    margin: -2px 0;
    width: 100%; }
  .modal-form input[type=text], .modal-form textarea {
    border-color: #cccccc; }

/* Share experience modal */
.experience-modal .icon-container img {
  width: 64px; }

.experience-modal .modal-form {
  width: 300px; }
  .experience-modal .modal-form td:first-child {
    width: 60px; }

.experience-modal .new-compatibility-status-buttons {
  display: block;
  margin: 0 0 10px;
  padding: 0; }
  .experience-modal .new-compatibility-status-buttons li {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin: 0 10px 6px;
    position: relative;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 200px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(to bottom,transparent, rgba(0, 0, 0, 0.1)); }
    .experience-modal .new-compatibility-status-buttons li.works-fine.selected {
      background-color: #abfd67; }
    .experience-modal .new-compatibility-status-buttons li.doesnt-work.selected {
      background-color: #fc0017; }
    .experience-modal .new-compatibility-status-buttons li.some-problems.selected {
      background-color: #f7fc67; }
    .experience-modal .new-compatibility-status-buttons li:hover {
      cursor: pointer; }
    .experience-modal .new-compatibility-status-buttons li:active {
      background-color: transparent;
      background-image: -webkit-linear-gradient(top, transparent, transparent);
      background-image: linear-gradient(to bottom,transparent, transparent); }
    .experience-modal .new-compatibility-status-buttons li .icon {
      display: block;
      width: 36px;
      height: 36px;
      margin: 7px 0 0 4px;
      background-image: url("../img/status-icons-clear.png"); }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        .experience-modal .new-compatibility-status-buttons li .icon {
          background-image: url("../img/status-icons-clear_2x.png");
          background-size: 267px 36px; } }
      .experience-modal .new-compatibility-status-buttons li .icon:hover {
        cursor: pointer; }
      .experience-modal .new-compatibility-status-buttons li .icon.s-works-fine {
        background-position: -175px 0; }
      .experience-modal .new-compatibility-status-buttons li .icon.s-some-problems {
        background-position: -119px 0;
        margin-left: 9px; }
      .experience-modal .new-compatibility-status-buttons li .icon.s-doesnt-work {
        background-position: 0 0;
        margin-left: 9px; }

.version-upgrade-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px 15px;
  height: 40px;
  background: rgba(37, 135, 250, 0.1);
  border-bottom: 1px solid #d7d9d7;
  z-index: 60;
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  transition: transform 300ms ease; }

.upgrade-available .version-upgrade-banner {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0); }

.upgrade-available .side,
.upgrade-available .main {
  -webkit-transform: translateY(40px);
  -moz-transform: translateY(40px);
  -ms-transform: translateY(40px);
  -o-transform: translateY(40px);
  transform: translateY(40px); }

.upgrade-available .apps-list-2016 .header {
  left: 0; }

.version-upgrade-banner p {
  margin: 0; }

.upgrade-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  text-align: center;
  font-size: 20px;
  padding: 6px 0 0; }
  .upgrade-close-btn:hover {
    cursor: pointer; }

#side {
  border-radius: 0 0 0 4px; }

#main {
  border-radius: 0 0 4px 0; }
