/* Karaboard — stylesheet reconstructed from Pinboard's basic/skeleton/bookmarks/new_main/autocomplete sheets */

:root { --logo-color: #6495ed; }

body {
  color: #333;
  margin: 0;
  font-size: 13px;
  font-family: helvetica, sans-serif;
  word-wrap: break-word;
  text-align: center;
}

td { font-size: 13px; }
p { margin-top: 2px; margin-bottom: 12px; }
li { margin-bottom: 10px; }
code { color: #22a; font-family: monaco, monospace; }

a { text-decoration: none; color: #11a; }
a:visited { color: #51a; }

h1 { font-size: 1.8em; font-family: helvetica, sans-serif; font-weight: normal; margin-top: 10px; }
h2 { font-size: 1.3em; font-family: helvetica, sans-serif; font-weight: normal; }
h3 { font-size: 110%; }

/* link appearance */
a.delete { color: #aaa; }
a.delete:visited { color: #aaa; }
a.delete:hover { color: #44d; }
a.edit { color: #aaa; font-size: 1em; }
a.edit:hover { color: #44d; }
a.edit:visited { color: #ccc; }
a.destroy { color: red; }
a.destroy:visited { color: red; }
a.tag { color: #a51; line-height: 190%; }
a.tag:visited { color: #a51; }
.when { font-size: 90%; color: #777; }
.faint { color: #aaa; }
a.rss_link { color: #ee9922; font-size: 0.8em; }
a.next_prev { color: #777; }
a.filter { color: #999; }
a.filter.selected { color: blue; }
.error { color: red; }
.alert { color: #333; background: #ced; padding: 10px; max-width: 470px; border: 1px solid #acc; }
.cached { color: #aaa; }
.cached:visited { color: #aaa; }
.cached:hover { color: #44d; }

/* page skeleton (desktop) */
#content {
  width: 1050px;
  margin-left: auto;
  margin-right: auto;
  min-height: 400px;
  padding-left: 10px;
}
#main_column {
  max-width: 700px;
  min-height: 700px;
  float: left;
  width: 100%;
  text-align: left;
  position: relative;
}
#right_bar { float: left; margin-left: 10px; text-align: left; width: 320px; }

#banner {
  border-bottom: 1px dotted #aaa;
  margin-bottom: 0.7em;
  max-width: 980px;
  padding-bottom: 9px;
  text-align: left;
}
#logo { float: left; height: 24px; max-width: 400px; }
#pinboard_name { font-size: 1.4em; color: #aaa; }
#pinboard_name:hover { color: red; }
.pin_logo { margin-right: 2px; opacity: 0.8; height: 20px; vertical-align: -4px; }
#banner_user a { color: #11a; }
#top_menu { margin-top: 2px; float: right; }
#banner_searchbox { display: none; }
#sub_banner { display: none; }
#footer { margin-top: 3em; color: #888; text-align: left; clear: both; }

/* user home page */
.user_navbar { margin-bottom: 0.7em; }
.user_navbar a:hover { color: blue; }
.small_username { float: left; padding-right: 1em; }
.bookmark_count_box { float: left; width: 36px; padding-right: 1.1em; }
.bookmark_count { font-size: 80%; color: #aaa; }
.rss_linkbox { float: right; margin-right: 30px; }
.page_heading { color: #555; }

#bookmarks { margin-top: 1em; margin-left: 6px; }
#nextprev { margin-bottom: 1em; }
table.next_prev_widget { float: left; }
table.edit_organize_widget { float: left; }
#bottom_next_prev { float: left; clear: both; margin-top: 0.5em; }
#per_page_picker { color: #888; float: left; margin-left: 90px; text-align: center; }
#per_page_picker a { color: #aaa; }
#per_page_picker .per_page_selected { background: #ff8; color: blue; }

/* bookmark rows */
.bookmark_wrap { clear: both; }
.bookmark {
  margin-bottom: 1.3em;
  padding: 3px;
  width: 95%;
  margin-left: 0;
  float: left;
}
.star {
  color: #ccc;
  margin-left: -18px;
  font-size: 1.3em;
  cursor: pointer;
  float: left;
  user-select: none;
}
.star .selected_star { color: #22a; }
.display { float: left; max-width: 100%; }
.bookmark_title { line-height: 130%; font-size: 110%; overflow-wrap: anywhere; }
.description { line-height: 120%; margin-top: 2px; color: #555; white-space: pre-wrap; }
.edit_links { display: inline; }
.delete_link { display: inline; }
.confirm { color: red; visibility: hidden; display: none; }
.confirm.on { visibility: visible; display: inline; }
.delete_link.confirming a.delete { display: none; }
.bookmark:hover a.edit, .bookmark:hover a.delete { color: #55e; }
.busy { opacity: 0.4; }

/* single bookmark edit form */
#edit_bookmark_form {
  border: 0 solid #aaa;
  width: 500px;
  padding: 4px;
  padding-left: 10px;
  float: left;
  color: #888;
  display: none;
}
#edit_bookmark_form p { line-height: 100%; margin-bottom: 0; color: #888; }
#edit_bookmark_form input, #edit_bookmark_form textarea { font-size: 90%; border: 1px solid #ddd; margin-bottom: 3px; }
#edit_bookmark_form input[type="submit"], #edit_bookmark_form input[type="button"] { margin-top: 8px; }
.edit_form_input { width: 490px; margin-top: 10px; font-size: 12px; padding-top: 3px; box-sizing: border-box; }
#edit_form_checkboxes { margin-top: 10px; margin-bottom: 10px; }
#edit_form_checkboxes input { width: auto; }
.add_page_form { float: none; }
.edit_status { margin-left: 8px; }

/* notes */
.note_body { white-space: pre-wrap; line-height: 140%; color: #333; }

/* howto */
a.bookmarklet { background: #ffe; border: 1px dotted #aaa; color: #444; padding: 1px 2px 0 2px; font-size: 90%; }

/* sidebar */
#searchbox form { position: relative; }
.search_button { margin-top: 10px; }
#tag_cloud {
  float: left;
  width: 350px;
  text-align: justify;
  line-height: 110%;
  margin-top: 20px;
}
#tag_cloud a.selected { font-weight: bold; color: #333; }
#tag_cloud_header a { color: #aaa; }
#tag_cloud a.tag_heading_selected { font-weight: bold; color: #333; }

/* autocomplete dropdown */
form { position: relative; }
.pin-ac { position: absolute; outline: none; z-index: 10; }
.pin-ac .bd {
  position: relative;
  margin-left: 8px;
  background: #fff;
  border: 1px solid #aaa;
  min-width: 200px;
  box-shadow: 1px 1px 3px rgba(0, 0, 110, 0.33);
}
.pin-ac.off { display: none; z-index: 0; }
.pin-ac ul { margin: 0; padding: 0; }
.pin-ac li { padding: 3px 5px; margin: 0; background: #fff; color: #25a; list-style-type: none; cursor: pointer; }
.pin-ac li.active { background: rgb(150, 150, 150); color: #fff; }

/* phone layout (Pinboard's phone_skeleton + mobile_bookmarks) */
@media screen and (max-width: 640px) {
  #content { width: auto; padding-left: 0; }
  #main_column { width: auto; min-height: 500px; margin-left: 1em; margin-right: 1em; float: none; }
  #right_bar { display: none; }
  #bmarks_page_nav { display: none; }
  .user_navbar { display: none; }
  #banner {
    background: #aaa;
    width: 100%;
    height: 16px;
    max-width: none;
    border-bottom: 1px solid #444;
    padding-bottom: 9px;
    margin-bottom: 0;
    text-align: left;
  }
  #banner_searchbox { display: block; float: right; }
  #banner_searchbox input { font-size: 1em; margin-top: 0; margin-right: 2px; }
  #banner_searchbox input[type="text"] { width: 9em; }
  #sub_banner { display: block; text-align: left; margin-left: 5px; margin-top: 4px; padding-bottom: 5px; }
  #logo { width: auto; height: 25px; float: left; font-size: 1.3em; margin-left: 3px; margin-top: 2px; color: #fff; }
  #logo a { color: #fff; }
  #pinboard_name { color: #fff; font-size: 1.1em; }
  #banner_user { display: none; }
  .hideable { display: none; }
  .pin_logo { display: none; }
  #bookmarks { margin-left: 0; }
  .bookmark {
    margin-bottom: 0.6em;
    margin-left: 0;
    padding-left: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    width: 95%;
  }
  .star { display: none; }
  .when { line-height: 200%; }
  #edit_bookmark_form { width: auto; background: #f4f4f4; float: none; }
  .edit_form_input { width: 95%; }
  #footer { margin-left: 1em; }
}