article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block} audio,canvas,video{display:inline-block} audio:not([controls]){display:none;height:0} [hidden]{display:none} html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} body{margin:0} a:focus{outline:thin dotted} a:active,a:hover{outline:0} h1{font-size:2em} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:bold} dfn{font-style:italic} mark{background:#ff0;color:#000} code,kbd,pre,samp{font-family:monospace, serif;font-size:1em} pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word} q{quotes:"\201C" "\201D" "\2018" "\2019"} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-0.5em} sub{bottom:-0.25em} img{border:0} svg:not(:root){overflow:hidden} figure{margin:0} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em} legend{border:0;padding:0;} button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;} button,input{line-height:normal} button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;} button[disabled],input[disabled]{cursor:default} input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;} input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} textarea{overflow:auto;vertical-align:top;} table{border-collapse:collapse;border-spacing:0}

@font-face { font-family: 'FavsLog'; src: url('FavsLog.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Pompiere'; src: url('Pompiere-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }

body{
  margin: 0;
  padding: 20px 0 30px 0;
  background-color: #fffffa;
  font-family: "Helvetica", Arial, sans-serif;
  text-align: center;
  font-size: 16px;
  line-height: 1.6em;
  color: #4d4d4d;
  cursor: default;
  font-smoothing:antialiased;
  -webkit-font-smoothing:antialiased;
}

a {
  color: #b06228;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: #b03b28;
}

p {
  margin: 0;
  margin-bottom: 20px;
}


h1, h2, h3, h4, h5 {
  font-weight: normal;
}
h1 {
  font-size: 70px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 18px;
}

hr {
  clear: both;
  margin: 10px 0;
  border: 0;
  width: 100%;
  height: 1px;
  background-color: #ddd;
}

.logo {
  margin-left: -50px;
  font-family:"Pompiere", Helvetica, sans-serif;
}
.logo:before {
  content: 'S';
  position: relative;
  top: -5px;
  margin-right: 5px;
  font-family:"FavsLog", Helvetica, sans-serif;
  font-size: 45px;
}
.nav {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  margin: 0;
  margin-bottom: 10px;
  width: auto;
  padding: 0;
  clear: both;
  font-size: 10px;
  list-style: none;
  text-transform: uppercase;
}
.nav li {
  list-style: none;
  float: left;
  margin-right: 3px;
}
.nav li:last-child {
  margin-right: 0;
}
.nav li a, .nav li .on {
  display: inline-block;
  border: #888 1px solid;
  border-radius: 5px;
  padding: 0 8px;
  background-color: #fff;
  text-decoration: none;
  font-size: 14px;
  text-transform: none;
}
.nav li .on {
  color: #888;
  background-color: #f3f3f3;
}
.nav .view .filtered {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.nav .view .full {
  margin-right: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#info {
  margin: 0 auto;
  width: 650px;
  text-align: center;
}

#info ul {
  margin: 0;
  padding: 0;
  text-align: left;
}

.options {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 10px;
  clear: both;
  width: auto;
  padding: 0 5px;
  line-height: 30px;
}
.options ul {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.options ul li {
  margin: 0 3px;
  list-style: none;
  display: inline-block;
}
.options ul li a, .options ul li .on {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
}
.options ul li a:before, .options ul li em:before, #stuff li span:before {
  margin-right: 3px;
  font-family: "FLicons", Helvetica, sans-serif;
  font-size: 13px;
}
.options ul li.book a:before, .options ul li.book em:before, #stuff li span.book:before {
  content: 'b';
}
.options ul li.comic a:before, .options ul li.comic em:before, #stuff li span.comic:before {
  content: 'c';
}
.options ul li.film a:before, .options ul li.film em:before, #stuff li span.film:before {
  content: 'f';
}
.options ul li.tv a:before, .options ul li.tv em:before, #stuff li span.tv:before {
  content: 't';
}
.options ul li.videogame a:before, .options ul li.videogame em:before, #stuff li span.videogame:before {
  content: 'v';
}
.options ul li.live a:before, .options ul li.live em:before, #stuff li span.live:before {
  content: 's';
}
.options ul li.other a:before, .options ul li.other em:before, #stuff li span.other:before {
  content: 'h';
}
.options ul li em {
  font-style: normal;
}
#article ul li {
  margin-bottom:-1px;
}
.options ul li img {
  position: relative;
  top: 1px;
  margin-right: 5px;
}

#stuff {
  padding-left: 0;
  list-style: none;
  text-align: left;
}
#stuff li {
  margin: 0;
  border-bottom: #ddd 1px solid;
  height: 24px;
  padding: 0;
  padding-top: 8px;
  line-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
}
#stuff li.notliked {
  color: #aaa;
}
#stuff li.notsure {
  color: #888;
}
#stuff li.details:hover {
  margin-bottom:-1px;
  height: 45px;
  background-color: #fff;
}
#stuff li span:before {
  font-size: 13px;
}
#stuff li .date {
  position: relative;
  top: -1px;
  float: right;
}
#stuff li em {
  margin-left: 17px;
}
#stuff li .firstline {
  display: inline-block;
  overflow: hidden;
}
#stuff li .editthing {
  float: left;
  margin-right: 10px;
  text-transform: uppercase;
}

#stuff li .firstline .content {
  -webkit-transition: all 2500ms;
  -o-transition: all 2500ms;
  transition: all 2500ms;
}
#stuff li .title {
  margin-right: 10px;
}
#stuff li .artist {
  font-size: 13px;
}
#stuff li .with {
  margin-right: 10px;
}

form input, form select {
  margin-bottom: 8px;
  padding: 6px;
  font-size: 100%;
}
form label {
  display: inline-block;
}
form label input[type='checkbox'], form label input[type='radio'] {
  margin-right: 3px;
}
form input[type='submit'] {
  padding: 6px 15px;
}

#notification {
  margin-top: 10px;
  background-color: #fff8d1;
  padding: 7px 0;
  color: #cc271f;
}
#notification.success {
  color: #5da411;
}
.error {
  margin: 0;
  color: #cc271f;
  font-size: 13px;
}

.add form {
  margin-top: 20px;
}

.dashboard form {
  margin-top: 20px;
  padding: 0 10px;
  text-align: left;
}

.dashboard .things {
  list-style: none;
}
.dashboard .things li {
  margin-bottom: 5px;
}
.dashboard .listings {
  float: right;
}
.dashboard .listings label {
  margin-left: 10px;
}

.onoffswitch {
  position: relative;
  display: inline-block;
  float: right;
  width: 60px;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 20px;
}
.onoffswitch-inner {
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.2s ease-in 0s;
    -webkit-transition: margin 0.2s ease-in 0s;
    -o-transition: margin 0.2s ease-in 0s;
    transition: margin 0.2s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left;
    width: 50%;
    height: 23px;
    padding: 0;
    line-height: 24px;
    font-size: 12px;
    color: #666;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "YES";
    padding-left: 10px;
    background-color: #fff; color: #666;
}
.onoffswitch-inner:after {
    content: "NO";
    padding-right: 10px;
    background-color: #eee; color: #999;
    text-align: right;
}
.onoffswitch-switch {
    margin: 5px;
    width: 15px;
    height: 15px;
    background: #aaa;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 34px;
    -moz-transition: all 0.2s ease-in 0s;
    -webkit-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

@media (max-width: 479px) {
  #info {
    width: 100%;
  }
  #stuff li {
    height: auto;
    padding: 8px 10px;
  }
  #stuff li span.book, #stuff li span.comic, #stuff li span.film, #stuff li span.tv, #stuff li span.videogame, #stuff li span.live, #stuff li span.other {
    display: inline-block;
    margin-top: 2px;
    width: 230px;
  }
  #stuff li span.firstline {
    display: inline-block;
    width: 210px;
    overflow-x: scroll;
    white-space:nowrap;
  }
  #stuff li .date {
    margin-top: 5px;
  }
  #stuff li a {
    color: inherit;
    text-decoration: none;
  }
  #stuff li.details:hover {
    margin-bottom: 0;
    height: auto;
    background-color: none;
  }
  #stuff li .extras {
    display: inline-block;
    width: 100%;
    overflow-x: scroll;
    white-space:nowrap;
  }

  .add form input {
    width: 256px;
  }
  .add form select {
    width: 270px;
  }
  .add form input[type='submit'] {
    width: auto;
  }
}