html,body{margin:0;padding:0; font: 13px 'Roboto', sans-serif; color:#fff}
body{background:#222222}
a{text-decoration: none;color:#fff}
p{text-align:justify;line-height: 150%}
h1{font-size: 20px;font-family: 'Pacifico', cursive;font-weight: normal;}
h2{font-size: 16px;}
ol>li{margin-bottom:10px;}
input,textarea {width:100%;padding:3px;border-radius:3px;border:1px solid #000}

header{background:#E66546;padding:10px;}
footer{background:#E66546;padding:10px;color:#000;}
footer a{color:#000;}
#header_blurb{padding:10px;font-size:13px; border-top:1px dashed white;color:#000}
#header_count{text-align: center;margin:10px;}
#header_count>.large{color:#000;font-size: 20px;font-weight:bold;padding:10px}
#search_txt{width:200px}

nav{background:#333;text-align: center;}
nav ul{list-style:none;margin:0px;padding:0px;padding-top:12px;}
nav ul li{display:inline;margin-left: 5px;padding:10px;}
nav #filter_menu span {font-size: 20px;display: inline-block;padding:8px;border-left:1px #333 solid;cursor: pointer}
nav #filter_menu span.active {background:#F6796C;color:#222}
nav #search_menu {padding:10px;}

.l,.ml{float:left}
.r,.mr{float:right}
.m10{margin:10px;}
.clear{clear:both}
.bl{color:blue;cursor: pointer;}
.btn{background:inherit;border:0px;padding:3px;color:#fff}
.btn_red{background:#E66546;border:0px;border-radius:3px;padding:3px;color:#000;font-weight:bold;padding:5px 10px 5px 10px;cursor:pointer}
.table{width:100%}
.table th{text-align:left}
.mobile_hide{display:none}

#main_left {text-align: center;display:none}
#main_right{display:none}
.home_napkin{width:80%;margin:auto}
.tags{width:130px;height:250px;overflow-y:auto;padding:10px;background:#333;margin-right:15px;}
.tags table {border-collapse: collapse;}
.tags td{margin:0px;padding:3px}
.tags tr{cursor:pointer;transition: 0.2s background}
.tags tr:hover,.tags tr.active {background:#F6796C}
.tags tr.active{color:#000}
.swipe_msg{display:block;text-align: center;font-size: 10px;}

.comm_block{border-bottom:1px solid #999;padding:10px;font-size:12px;}
.comm_block > .username {font-weight:bold;color:#F6796C}

#item_right{background:#333;padding:10px;}
.item_napkin{width:90%;margin:auto}
.napkin_small{height:120px;}

#story{margin:20px;}

.napkin_search{display:inline-block;text-align: center;font-size: 11px;margin-bottom:10px;}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 480px) {
  .l{float:none}
  .r{float:none}

  #header_count{float:right}
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-width : 480px) and (max-width : 800px){
  #header_count{float:right}
  .home_napkin{width:initial;height:135px;margin:5px;}
  #main_left {text-align:left;display:block}
  #main_right{display:block}

  #item_left{float:none}
  #item_right{float:none}
}

/* Desktops screens ----------- */
@media only screen and (min-width : 800px) {

  .mobile_hide{display:inline}

  .table{width:inherit;}
  input,textarea{width:300px}

  #header_blurb{width:230px;margin-left:20px;margin-top:10px;padding-left:10px;font-size:14px; border:0px; border-left:1px dashed white;}
  #header_count{margin-top: 10px;margin-right: 20px;}
  #header_count>.large{font-size: 40px;}

  nav{text-align: left;}

  #main_left {text-align:left;display:block;width:68%;padding:1%;}
  #main_right {display:block;;width:30%}
  .home_napkin{width:initial;height:135px;margin:5px;}
  .swipe_msg{display:none;}

  #comments_panel{margin-top:30px;}

  #story,#privacy-policy{margin-left:50px;margin-right:50px;}

  #item_left{width:60%;}
  #item_right{width:30%;background:#333;margin-top:60px;padding:10px;}
  .item_napkin{width:inherit}

  #item_comments>#comment_div{width:80%}

}


/**Fontello */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?95046904');
  src: url('../font/fontello.eot?95046904#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?95046904') format('woff2'),
       url('../font/fontello.woff?95046904') format('woff'),
       url('../font/fontello.ttf?95046904') format('truetype'),
       url('../font/fontello.svg?95046904#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?95046904#fontello') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";  font-style: normal;  font-weight: normal;  speak: none;
  display: inline-block;  text-decoration: inherit;  width: 1em; margin-right: .2em; text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal; text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-search:before { content: '\e800'; } /* '' */
.icon-filter:before { content: '\f0b0'; } /* '' */
.icon-comment:before { content: '\f27b'; } /* '' */