@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }

*, html, body, button, input, textarea, select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  color: #39464E;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

input, textarea, select {
  font-family: "Lato", "Helvetica Neue", "Arial", "Verdana", "Tahoma", "Lucida Sans", "FreeSans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; }

select {
  cursor: pointer; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

abbr, acronym {
  border: 0; }

::-webkit-input-placeholder {
  color: #abb9c2; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #abb9c2; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #abb9c2; }

:-ms-input-placeholder {
  color: #abb9c2; }

.errorlist {
  font-size: .85em; }
  .errorlist li {
    margin-bottom: 5px;
    color: #f36e65; }

input, textarea, select {
  font-family: "Lato", "Helvetica Neue", "Arial", "Verdana", "Tahoma", "Lucida Sans", "FreeSans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; }

html, body {
  height: 100%; }

body {
  font-family: "Lato", "Helvetica Neue", "Arial", "Verdana", "Tahoma", "Lucida Sans", "FreeSans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
  background: #fff;
  font-size: 13px;
  color: #39464E; }
  body:before {
    content: " ";
    display: block;
    height: 8px;
    background: #3A474F;
    position: fixed;
    z-index: 40;
    width: 100%; }

a {
  color: #1C90F3;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

.contentWrap {
  float: left;
  width: 70%; }

.sidebarWrap {
  float: right;
  width: 30%;
  background: #EAEDF1;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto; }

header {
  position: fixed;
  width: 640px;
  z-index: 30;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1); }

#shadow {
  height: 10px;
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  opacity: 0;
  background: -moz-radial-gradient(50% 0, rgba(0, 0, 0, 0.1) 0%, transparent 85%);
  /* FF3.6+ */
  background: -webkit-radial-gradient(50% 0, rgba(0, 0, 0, 0.1) 0%, transparent 85%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(50% 0, rgba(0, 0, 0, 0.1) 0%, transparent 85%);
  /* Opera 11.10+ */
  background: -ms-radial-gradient(50% 0, rgba(0, 0, 0, 0.1) 0%, transparent 85%);
  /* IE10+ */ }

h1 {
  display: block;
  height: 80px;
  width: 80px;
  position: absolute;
  top: 48px;
  left: -110px;
  background-color: #1C90F3; }

h1 a {
  display: block;
  height: 80px;
  width: 80px;
  text-indent: -900em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../img/logo-white.png); }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    h1 a {
      background-image: url(../img/logo-white@2x.png);
      background-size: 55px; } }

h1 em {
  color: #fff;
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 1.7em;
  opacity: 0;
  -webkit-animation: rotate 1s infinite linear; }

/* ================================================================ */
#sidebar {
  width: 240px;
  float: left;
  border-left: solid 1px #D3D7DC;
  height: 100%;
  color: #767B8D; }

#sidebar .segment {
  border-bottom: solid 1px #D2D5DB;
  padding: 20px 0 20px 20px;
  clear: both; }

#sidebar .face {
  height: 90px; }

#sidebar .face img {
  float: left; }

#sidebar .face h3 {
  margin-left: 90px;
  font-size: 1.2em;
  font-weight: 700;
  color: #39464E; }

#sidebar .face p {
  margin-left: 90px; }

#sidebar .userDetails {
  margin-top: 10px; }

#sidebar .userDetails li {
  margin-top: 6px; }

#sidebar .userDetails .company {
  font-weight: 700;
  color: #39464E; }

#sidebar .icon {
  color: #ADB0BA;
  margin-right: 5px; }

#sidebar .quickStats {
  padding: 0;
  float: left; }

#sidebar .quickStats li {
  border-right: solid 1px #D2D5DB;
  padding: 10px 0 10px 20px;
  width: 98px;
  float: left; }
  #sidebar .quickStats li:last-child {
    border-right: none; }

#sidebar .quickStats strong {
  font-weight: 700;
  font-size: 1.7em;
  color: #39464E;
  display: block; }

#sidebar .quickStats span {
  font-size: .9em; }

#sidebar .libStats h3 {
  font-weight: 700;
  color: #39464E;
  margin-bottom: 10px; }

#sidebar .libStats li {
  height: 20px;
  line-height: 20px;
  margin-bottom: 1px; }

#sidebar .libStats strong {
  width: 90px;
  float: left;
  text-align: right;
  padding-right: 10px;
  font-size: .9em; }

#sidebar .libStats .bar {
  width: 100px;
  height: 20px;
  float: left;
  background: #D2D5DB; }

#sidebar .libStats a {
  color: #767B8D; }
  #sidebar .libStats a:hover {
    color: #1C90F3; }
  #sidebar .libStats a:hover .bar {
    background: #ADB0BA; }

/* ================================================================ */
#content {
  width: 640px;
  float: right;
  margin-right: 30px; }

#content .pageHeader {
  font-size: 1.1em; }

#content .pageHeader h2 {
  font-size: 1.3em;
  font-weight: 700; }

#content .pageHeader p {
  padding: 2px 0 10px;
  color: #767B8C;
  font-weight: 400; }

/* ================================================================ */
#body {
  margin-top: 108px; }

/* ================================================================ */
.commonNav {
  height: 40px;
  width: 100%; }

.commonNav a {
  color: #262B33;
  font-weight: 200; }

.commonNav .selected,
.commonNav .selected a {
  font-weight: 700; }

/* ================================================================ */
#main-nav {
  padding-top: 48px;
  background: #fff;
  margin-left: -20px;
  padding-left: 20px; }

#main-nav li {
  float: left;
  margin-right: 20px; }

/* ================================================================ */
#side-nav {
  margin-top: 48px;
  border-bottom: solid 1px #D2D5DB; }

#side-nav li {
  float: right;
  margin-left: 20px; }

/* ================================================================ */
.fiddleList .item {
  margin-bottom: 20px;
  position: relative; }

.fiddleList h3 {
  font-size: 1.3em;
  font-weight: 700; }

.fiddleList h3 a {
  color: #262B33; }

.fiddleList h3 .latest {
  font-size: .7em;
  font-weight: 400;
  color: #FF4D4D;
  margin-left: 5px; }

.fiddleList .info {
  padding: 2px 0 10px;
  color: #767B8C;
  font-weight: 400; }

.fiddleList pre {
  background: #39464E;
  color: #fff;
  border-radius: 2px;
  overflow: hidden;
  padding: 10px;
  font-size: 14px;
  font-family: "Fira Mono", "Monaco", sans-serif; }

.fiddleList .actions {
  position: absolute;
  top: 2px;
  left: -20px;
  width: 20px;
  opacity: 0; }

.fiddleList .actions a {
  text-decoration: none;
  color: #ADB0BA; }

.fiddleList .item:hover .actions {
  opacity: 1; }

/* ================================================================ */
.commonForm h3 {
  font-size: 1.1em;
  font-weight: 700;
  margin: 20px 0 15px; }

.commonForm fieldset {
  border-bottom: solid 1px #EBEBEB;
  padding-bottom: 10px;
  margin-bottom: 20px; }

.commonForm fieldset p {
  margin-bottom: 10px; }

.commonForm fieldset p label {
  width: 220px;
  display: inline-block;
  color: #767A8C; }

.commonForm fieldset p input[type=text],
.commonForm fieldset p input[type=password] {
  display: inline-block;
  background-color: #F9F9F9;
  width: 300px;
  padding: 8px;
  border: solid 1px #c4c7cb;
  border-radius: 3px;
  box-shadow: inset 0px 1px 1px #e0e4e9;
  outline: none; }
  .commonForm fieldset p input[type=text]:focus,
  .commonForm fieldset p input[type=password]:focus {
    border: solid 1px #767B8C; }

.commonForm .submitCont {
  padding-top: 10px;
  margin-left: 222px; }

.commonForm input[type=submit] {
  border-radius: 3px;
  padding: 10px 20px;
  background: #1C90F3;
  border: none;
  color: #fff;
  font-size: .9em;
  font-weight: 700;
  cursor: pointer; }

.formWarning {
  color: #ff6946;
  margin-left: 5px; }
  .formWarning:hover {
    text-decoration: none; }

/* ================================================================ */
.paginator {
  text-align: center;
  margin-bottom: 20px; }

.paginator li {
  display: inline-block;
  margin: 1px; }

.paginator a,
.paginator span {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  width: 22px;
  border: solid 1px #EBEBEB;
  font-weight: 700;
  border-radius: 1px; }

.paginator a {
  font-weight: 400;
  border: solid 1px #fff;
  color: #39464E; }
  .paginator a:hover {
    border: solid 1px #1C90F3;
    background: #1C90F3;
    color: #fff;
    text-decoration: none; }

/* ================================================================ */
.messages {
  margin: 20px 0; }
  .messages li {
    padding: 10px; }
  .messages .success {
    border: solid 1px #1C90F3;
    color: #1C90F3; }
  .messages .failure {
    border: solid 1px #ff6946;
    color: #ff6946; }

/* ================================================================ */
.errorlist {
  margin-left: 222px; }

/* ================================================================ */
body .twipsy-inner {
  border-radius: 2px; }