body
{
  min-width: 250px;
  margin: 0px;
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 13px;
  color: #545454;
  background-color: #f8f6f2;
  background-image: url(background.png);
}

#clickhide-instructions,
#clickhide-cancel,
body.clickhide-active li
{
  display: none;
}

body.clickhide-active #clickhide-instructions,
body.clickhide-active #clickhide-cancel
{
  display: block;
}

body.local #enabled,
body.local #clickhide,
body.local #stats-page
{
  display: none;
}

body.nohtml #clickhide,
body.disabled #clickhide
{
  display: none;
}

body.contentblocking-active #stats-container
{
  display: none;
}

header
{
  height: 45px;
  margin-bottom: 40px;
  border-bottom: 1px solid #e1ddd8;
  background-image: url(background-main.png);
}

#logo
{
  display: block;
  position: relative;
  top: 15px;
  margin: 0px auto;
}

#wrapper
{
  padding: 0px 20px;
}

#notification, #menu
{
  margin-bottom: 10px;
}

#notification
{
  position: relative;
  margin-top: -70px;
  min-height: 50px;
  padding: 10px;
  color: #fff;
  border: 3px solid black;
  background-color: #555;
}

#notification.critical
{
  border-color: #a4311c;
  background-color: #c72e12;
}

#notification.information
{
  border-color: #1c5fa4;
  background-color: #1281c7;
}

#notification h1
{
  margin: 0px 15px 5px 0px;
  font-size: 15px;
}

#notification a
{
  color: #fff;
}

#notification-close
{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background-image: url(popup.png);
  background-position: -34px -89px;
}

#notification.closing
{
  border-color: #000;
  background-color: #020D14;
}

#notification.closing #notification-content,
#notification:not(.closing) #notification-close-content
{
  display: none;
}

#notification-close-content li
{
  padding: 7px 7px 7px 17px;
  color: #FFF;
  text-decoration: underline;
  white-space: inherit;
  border: none;
}

#notification-close-content li::before
{
  content: "\0203A";
  display: inline-block; /* prevent pseudo element from being underlined */
  width: 10px;
  margin-left: -10px;
}

#notification-close-content li:hover
{
  background-color: rgba(255, 255, 255, 0.3);
}

footer
{
  cursor: pointer;
  padding: 10px 35px;
  border-top: 1px solid #e1ddd8;
  background-image: url(background-main.png);
}

footer:hover
{
  background: -moz-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
    url(background-main.png);
  background: -webkit-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
    url(background-main.png);
  background: linear-gradient(to bottom, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
    url(background-main.png);
}

footer .icon
{
  background-position: -50px -65px;
}

ul
{
  margin: 0px;
  padding: 0px;
}

li
{
  cursor: pointer;
  list-style-type: none;
  white-space: nowrap;
  border-top: 1px dashed #a5a4a1;
}

li ul
{
  margin-left: 35px;
}

li li
{
  cursor: default;
  padding: 10px 15px;
}

.menu-item
{
  padding: 10px 0px 10px 15px;
}

.menu-item:hover
{
  background-color: #ece7df;
}

.icon
{
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 15px;
  vertical-align: top;
  background-image: url(popup.png);
}

#enabled-yes strong
{
  font-weight: normal;
  color: #12610e;
}

#enabled-no strong
{
  font-weight: normal;
  color: #ac0505;
}

#enabled .icon
{
  background-position: -50px -1px ;
}

body.disabled #enabled .icon
{
  background-position: -50px -17px;
}

#enabled-no,
body.disabled #enabled #enabled-yes
{
  display: none;
}

body.disabled #enabled #enabled-no
{
  display: inline;
}

#clickhide .icon,
#clickhide-cancel .icon
{
  background-position: -50px -33px;
}

#clickhide-instructions
{
  margin: 10px 15px;
}

#stats-container .icon
{
  background-position: -50px -49px;
}


#stats strong
{
  font-size: 15px;
  line-height: 140%;
}

#share
{
  margin-top: 5px;
  font-size: 12px;
  color: #949494;
}

#share-box
{
  margin-top: 5px;
  margin-left: -3px;
}

#share-box div[data-social]
{
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 3px 10px 3px 3px;
  border-radius: 3px;
  background-image: url(popup.png);
}

#share-box div[data-social]:hover
{
  margin: 0px 7px 0px 0px;
  border: 3px solid #cdc6bd
}

#share-box div[data-social="facebook"]
{
  background-position: -1px -1px;
}

#share-box div[data-social="twitter"]
{
  background-position: -1px -34px;
}

#share-box div[data-social="gplus"]
{
  background-position: -1px -67px;
}

.collapse
{
  position: relative;
  padding-right: 25px;
}

.collapse-icon-placeholder
{
  display: none;
  width: 45px;
}

.collapse-icon
{
  display: inline-block;
  position: absolute;
  top: 13px;
  right: 10px;
  width: 11px;
  height: 11px;
  background-image: url(popup.png);
  background-position: -34px -65px;
}

.collapsed .collapse-icon
{
  background-position: -34px -77px;
}

.collapsed .collapsable
{
  display: none;
}

.checkbox
{
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  vertical-align: middle;
  background-image: url(popup.png);
  background-position: -34px -1px;
}

.checkbox:hover
{
  background-position: -34px -17px;
}

.checkbox[aria-checked="false"]
{
  background-position: -34px -33px;
}

.checkbox[aria-checked="false"]:hover
{
  background-position: -34px -49px;
}

label
{
  vertical-align: middle;
}
