/* ============================ Base ============================ */
body,h1,h2,h3,h4,h5,h5,p,ul,ol,li,dl,dt,dd,form,textarea,blockquote {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size:100%;
	font-weight: normal;
	font-style: normal;
}
body {
  background:#fff;
  color:#333;
  font: 16px/1.5 Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, sans-serif;
}
body.os-win {
  font-family:Helvetica, Arial, Meiryo, "メイリオ", sans-serif;
}

ul,ol,li {
  list-style:none;
}
select,input {
  vertical-align: middle;
}
lable {
  cursor:pointer;
}
img {
  border: none;
  vertical-align: middle;
}
pre {
  margin: 0.5em 1.5em;
  padding: 0.5em;
  border: 1px solid #ddd;
  font-family: monospace;
  font-size: 90%;
}
input.text,
input.input-text,
textarea {
  padding:5px;
  border:1px solid #bbb;
  font-size:80%;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  box-shadow:inset 0 1px 3px #ccc;
  -webkit-box-shadow:inset 0 1px 3px #ccc;
  -moz-box-shadow:inset 0 1px 3px #ccc;
  -ms-box-shadow:inset 0 1px 3px #ccc;
  -o-box-shadow:inset 0 1px 3px #ccc;
}
blockquote cite {
  font-style: normal;
}
blockquote cite a {
  white-space: nowrap;
}
.fleft {
  float:left;
}
.fright {
  float:right;
}
.tleft {
  text-align:left;
}
.tright {
  text-align:right;
}
.center {
  text-align:left;
}
.clear {
  clear:both;
}
.clearfix {
  width:100%;
}
.clearfix:after {
  clear:both;
  display:block;
  content:"";
}
.radius {
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
}

/* ============================ UI / Form Control ============================ */
h1.current-element {
  background-color: transparent !important;
}
.current-element {
  background-color: #EAF1F9 !important;
}
.trigger {
  cursor: pointer;
}
.placeholder-text {
  position: absolute;
  color: #aaa;
  padding: 3px;
  cursor: text;
}
.shadow-layer {
  font-weight: bold;
  background-color: #fff;
  filter:alpha(opacity=80);
  -ms-filter:"alpha(opacity=80)";
  opacity:0.8;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

/* ============================ Layout ============================ */
.wrapper-container,
.fixed-width #header {
  width:100%;
  text-align:center;
}
.wrapper-container-inner,
.fixed-width #header-body {
  position:relative;
  width:960px;
  text-align:left;
  margin:0 auto;
  height:100%;
}
.wrapper-container-inner {
  padding-top:10px;
}
.wrapper-container-inner.left-column-line {
  background:url(/images/user/background-line-ddd.gif) repeat-y 180px 0;
}
#left-container {
  float:left;
  width:180px;
  font-size:75%;
}
#center-container {
  float:left;
  width:500px;
  padding:0 20px;
}
#right-container {
  width:240px;
  margin-left:720px;
  font-size:75%;
}
#right-container {
  _margin:0;/* ie6 */
  _float:right;/* ie6 */
}
.wrapper-container-inner:after,
#left-container:after,
#center-container:after,
#right-container:after {
  clear:both;
  content:"";
  display:block;
}
#left-container .left-content,
#page-navi {
  margin-right:10px;
}

/* ============================ Header ============================ */
#header {
  height:auto;
  border-bottom:1px solid #16375e;
  background:#2c6ebd;
  font-size:100%;
}
#header-body {
  width:auto;
  zoom:1;
}
#header-body:after {
  content:"";
  display:block;
  clear:both;
}
#header h1 {
  float:left;
  width:160px;
  height:37px;
  padding-left:9px;
}
.fixed-width #header h1 {
  padding-left:0;
}
#header h1 a {
  display:block;
  height:37px;
}
#header h1 a img {
  margin:12px 0;
}
#header img#logo {
  width:160px;
  height:13px;
}
#header #navigation {
  position:relative;
}
#header ul.service-menu {
  float:right;
  position:relative;
  padding-right:9px;
  font-size:90%;
}
.fixed-width #header ul.service-menu {
  padding-right:0;
}
#header li {
  font-size:11px;
}
#header ul.service-menu li {
  line-height:37px;
}
#header #header-username .header-dropdown img {/* Height Adjust */
  margin:6px 0;
}
#header #header-notify .header-dropdown img {/* Height Adjust */
  margin:5px 0 6px;
}
#header ul.service-menu li.global-logo img {/* Height Adjust */
  margin:12px 0 13px;
}
#header .header-notify .notify-count {/* Position Adjust */
  height:13px;
  line-height:13px;
  _top:3px;/* ie6 */
}
#header ul.service-menu li a {
  color:#fff;
}
#header ul.service-menu .header-window a {
  color:#333;
}
#header span.header-dropdown {
  background-image:url(/images/dropdown-wh.png);
}

/* ============================ Info Header ============================ */
#info-header {
  background-color:#FFF0C2;
  border-bottom:1px solid #999;
  width:100%;
  height:25px;
  overflow:hidden;
  display:none;
  line-height:2;
  position:relative;
}
body.info-header-visible #info-header {
  display:block;
}
#info-header-spacer {
  display:none;
}
body.info-header-visible #info-header-spacer {
  display:block;
}
body.fixed-header #info-header-spacer {
  height:26px;
}
body.fixed-header #info-header {
  position:fixed;
  _position:relative;/* ie6 */
  top:38px;
  left:0;
  z-index:990;
}
#info-header-close-button {
  vertical-align:middle;
  cursor:pointer;
  position:absolute;
  background:url(/images/info-header-close-bg.gif) left 0px no-repeat;
  right:3px;
  width:54px;
  height:19px;
  text-indent:-9999px;
  display:block;
  overflow:hidden;
  top:3px;
}
#info-header-close-button:hover {
  background-position:left -19px;
}
#info-header-message {
  text-align:center;
  padding:0;
  margin:0;
}
#info-header-message a,
#info-header-message a:link,
#info-header-message a:hover,
#info-header-message a:visited {
  font-size:80%;
  text-decoration:none;
  color:#333;
  font-weight:bold;
  background:url(/images/new.gif) left center no-repeat;
  padding-left:27px;
}
#info-header-message a:hover {
  text-decoration:underline;
}
#header .info-new {
  color:yellow;
}
#page-loading-message {
  margin:20px 0;
}

/* ============================ Category Menu ============================ */
#category {
  background:url(/images/menu_category_bg.gif);
  text-align:center;
  letter-spacing:0;
  line-height:0;
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  height:30px;
  zoom:1;
}
#category #category-container {
  position:relative;
  display:inline-block;
  *display:inline;
}
#category #current-category {
  background:url(/images/scategory.png) left -30px;
  position:absolute;
  top:0px;
  left:0;
  width:30px;
  height:30px;
}
#category-container img {
  vertical-align: baseline;
}

/* ============================ Fixed Header ============================ */
body.fixed-header {
  padding-top: 38px;
  _padding-top: 0;/* ie6 */
}

body.fixed-header #header {
  position: fixed;
  _position: relative;/* ie6 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 998;
}

/* ============================ Users Link ============================ */
.users {
  white-space: nowrap;
  font-size:90%;
}
.users em a:link,
.users em a:hover,
.users em a:visited,
.users strong a:link,
.users strong a:hover,
.users strong a:visited {
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  font-style:normal !important;
  font-weight:bold !important;
  text-decoration:underline !important;
}
.users strong a:link,
.users strong a:hover,
.users strong a:visited {
  color:#ff0000 !important;
/*  background:#FFE9E9 !important;*/
/*  background:#FFCCCC !important;*/
}
.users em a:link,
.users em a:hover,
.users em a:visited {
  color:#FF7777 !important;
/*  color:#FF6666 !important;*/
/*  background:#FFFFFF !important;*/
/*  background:#FFF0F0 !important;*/
}

/* ============================ Favicon ============================ */
a.favicon {
  text-decoration:none;
}
a.favicon img {
  width:16px;
  height:16px;
}

/* ============================ Links ============================ */
a {
  color:#2d6bc4;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
a:visited {
  color:#838;
}
a.username {
  color:#2d6bc4 !important;
}
a.tag {
  color:green;
}
a.domain,
.timestamp {
  color:#999;
}
a.category {
  color:#333;
}
a.selected {
  color:#333;
  font-weight:bold;
}
a.more {
  margin:10px 0;
  text-align:right;
}

/* ============================ Buttons ============================ */
.button,
a.button {
  display:block;
  padding:8px 14px 6px;
  border:1px solid #d6d6d6;
  border-bottom-color:#c0c0c0;
  background-color:#f5f5f5;
  color:#333;
  line-height:1;
  text-align:center;
  vertical-align:middle;
  cursor:pointer;
  text-shadow:0 1px 0 #fff;
  box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;
  -webkit-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;
  -moz-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;
  -ms-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;
  -o-box-shadow:inset 0 1px 0 #fff,0 1px 0 #fff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;
}
.button:hover,
a.button:hover {
  border-color:#bbb;
  background-color:#eee;
  text-decoration:none;
}
.button:active,
a.button:active {
  border-color:#bbb;
  background-color:#eee;
  box-shadow:inset 0 1px 3px #aaa,0 1px 0 #fff;
  -webkit-box-shadow:inset 0 1px 3px #aaa,0 1px 0 #fff;
  -moz-box-shadow:inset 0 1px 3px #aaa,0 1px 0 #fff;
  -ms-box-shadow:inset 0 1px 3px #aaa,0 1px 0 #fff;
  -o-box-shadow:inset 0 1px 3px #aaa,0 1px 0 #fff;
}

/* ============================ Pager ============================ */
.pager {
  clear:both;
  margin:15px 0;
  font-size:90%;
  text-align:center;
}
.pager strong,
.pager a,
.pager span {
  margin:0 2px;
}

/* ============================ Tooltip ============================ */
a.tooltip-handle {
  position:relative;
  text-decoration:none;
}
a.tooltip-handle .tooltip,
.bookmark-entry-tooltip {
  display:none;
  position:absolute;
  width:240px;
  top:16px;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
  -webkit-box-shadow:0 3px 5px rgba(0,0,0,0.4);
  -moz-box-shadow:0 3px 5px rgba(0,0,0,0.4);
  -ms-box-shadow:0 3px 5px rgba(0,0,0,0.4);
  -o-box-shadow:0 3px 5px rgba(0,0,0,0.4);
  z-index:100;
}
.bookmark-entry-tooltip,
a.tooltip-handle:hover .tooltip {
  display:block;
}
div.tooltip {
    position: absolute;
}
.bookmark-entry-tooltip {
  padding:6px 7px 4px 45px;
  font-size:75%;
}
.bookmark-entry-tooltip .service-icon {
  position:absolute;
  top:27px;
  left:27px;
  width:12px;
  height:12px;
  background:#fff;
}
.bookmark-entry-tooltip .profile-image {
  float: left;
  width: 32px;
  height: 32px;
  margin-left: -40px;
  margin-top: 1px;
}
.bookmark-entry-tooltip span {
  margin-right:5px;
}
.bookmark-entry-tooltip .username {
  color:#2d6bc4;
}
.bookmark-entry-tooltip .tags,
.bookmark-entry-tooltip .tags a {
  color:#999;
}
div.bookmark-entry-tooltip .comment {
  word-break: break-all;
  word-wrap: break-word;
}

/* ============================ Message ============================ */
.message {
  clear:both;
  margin:10px 0;
  padding:8px 5px 5px 40px;
  font-weight:bold;
}
.message img{
  vertical-align:middle;
  margin-right:3px;
}
.error {
  color:#d17777;
}
.message.error {
  background:#ffebed url(/images/error-bg.gif) 8px 5px no-repeat;
  border:1px solid #ebbdc3;
}
.success {
  color:#517B29;
}
.message.success{
  background:#e3f9db url(/images/success-bg.gif) 8px 5px no-repeat;
  border:1px solid #c5daba;
}
.info {
  color:#555;
}
.message.info {
  background:#FFFEC5 url(/images/info-bg.gif) 5px 4px no-repeat;
  border:1px solid #e9e89b;
}

/* ============================ Form Parts ============================ */
.text-form {
  padding:5px;
  border:1px solid #bbb;
  font-size:80%;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  box-shadow:inset 0 1px 3px #ccc;
  -webkit-box-shadow:inset 0 1px 3px #ccc;
  -moz-box-shadow:inset 0 1px 3px #ccc;
  -ms-box-shadow:inset 0 1px 3px #ccc;
  -o-box-shadow:inset 0 1px 3px #ccc;
}

/* ============================ Note ============================ */
.note {
  font-size:85%;
  color:#999;
}

/* ============================ User Navigator ============================ */
/* Dropdown and popup for user icons */
.user-navigator-large {
    width: 51px !important;
    height: 36px !important;
    cursor: pointer;
}
.user-navigator-large-24 {
    width: 42px !important;
    height: 28px !important;
    cursor: pointer;
}
#user-navigator {
    position: absolute;
    border:1px solid #eee;
    border-color: #ddd #aaa #aaa #ddd;
    width: 35px;
    height: 20px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    *margin-left: -2px;
    *margin-top: -2px;
    text-align: left;
    z-index: 2;
    cursor: pointer;
}
#user-navigator-subwindow {
    position: absolute;
    z-index: 2;
    border:1px solid #eee;
    border-color: #ddd #aaa #aaa #ddd;
    padding: 5px;
    margin: 0 0 0 0;
    text-align: left;
    line-height: 1;
    background-color: #FFF;
    font-size: 80%;
    width: 205px;
}
#user-navigator-subwindow ul {
  clear: both;
  overflow: hidden;
  zoom: 1;
  padding: 0 3px;
}
#user-navigator-subwindow ul li {
  margin: 0;
}
#user-navigator-subwindow ul li.followers img {
  margin:2px 0;
}
#user-navigator-subwindow ul li a.navigator-homepage {
  background: transparent left top no-repeat;
  padding: 1px 0 1px 18px;
}
#user-navigator-subwindow ul.navigator-user-info {
  padding: 5px 5px 0 5px;
  background: #f6f6f6;
}
#user-navigator-subwindow ul.following {
  background: #e6f8b8;
}
#user-navigator-subwindow ul li.navigator-profile-icon {
  width: 8em;
  overflow: hidden;
  float: right;
}
#user-navigator-subwindow ul li.navigator-username {
  font-weight: bold;
  text-align: left;
  font-size: 100%;
}
#user-navigator-subwindow ul li.navigator-following {
  margin-right: 74px;
  width:100px;
  text-align: left;
}
#user-navigator-subwindow ul li.navigator-following a {
  display: block;
  margin: 3px 0;
}
#user-navigator-subwindow ul.hatena-service-list {
    margin-top: 2px;
}
#user-navigator-subwindow ul.hatena-service-list li {
    display: inline;
}
#user-navigator-subwindow a.follow-link,
#user-navigator-subwindow a.ignore-link {
    cursor: pointer;
    text-decoration: none !important;
    margin-bottom: 5px;
}
#user-navigator-subwindow a:hover {
}
#user-navigator-button {
    display: block;
    width: 14px;
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: #eee url(/images/down_arrow.gif) 2px center no-repeat;
    text-indent:-1000em;
}
.navigator-open {
  background-image: url(/images/up_arrow.gif) !important;
}
div#user-navigator-list {
    position: absolute;
}
span.remove-ignore, a.remove-ignore,
span.remove-favorite, a.remove-favorite,
span.add-ignore, a.add-ignore,
span.add-favorite, a.add-favorite {
    text-decoration: none;
    color: #0000ee;
    padding-bottom:2px;
}
span.remove-favorite, a.remove-favorite {
    color: #333;
}
span.add-ignore, a.add-ignore {
}
span.remove-ignore, a.remove-ignore {
    color: #333;
}
span.remove-ignore span, a.remove-ignore span,
span.remove-favorite span, a.remove-favorite span {
    padding-left: 0.1em;
    letter-spacing: 1px;
    font-size: 90%;
    color: #0000ee;
}
#user-navigator-subwindow .ignore-twitter-user .left {
  float: left;
}
#user-navigator-subwindow .ignore-twitter-user .right {
  margin-left: 55px;
}
#user-navigator-subwindow .ignore-twitter-user .right img {
  cursor: pointer;
}
#user-navigator-subwindow .ignore-twitter-user p {
  padding-bottom: 3px;
  font-size: 85%;
  line-height: 1.3em;
}
.ignore-twitter-user-note {
  font-size: 80%;
  filter:alpha(opacity=80);
  opacity:0.8;
  margin-bottom: 8px;
}

div.appbanner {
  font-family: "Roboto", Arial, sans-serif;
  height: 82px;
  background-color: #F5F5F5;
  border-bottom: 2px solid #E9E9E9;
  position: relative;
}
div.appbanner a.close {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
}
div.appbanner a.close img {
  width: 16px;
  height: 16px;
}
div.appbanner a.app-icon {
  width: 58px;
  height: 58px;
  text-align: center;
  display: block;
  position: absolute;
  top: 13px;
  left: 30px;
}
div.appbanner a.app-icon img {
  width: 58px;
  height: 58px;
}
div.appbanner ul.app-info {
  position: absolute;
  top: 18px;
  left: 98px;
  list-style: none;
  margin: 0;
  padding: 0;
}
div.appbanner ul.app-info li {
  font-size: 12px;
  line-height: 17px;
  color: #9E9E9E;
  margin: 0;
  padding: 0;
}
div.appbanner ul.app-info li.title {
  font-size: 14px;
  line-height: 14px;
  color: #565656;
  font-weight: bold;
  margin-bottom: 5px;
  background-color: transparent;
}
div.appbanner a.view {
  width: 56px;
  height: 28px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 28px;
  display: block;
  color: #FFF;
  background-color: #39A9BB;
  border: 1px solid #FFF;
  position: absolute;
  top: 27px;
  right: 6px;
}
div.appbanner a.view:hover {
  background-color: #4BBECE;
}


/* feature_popup */
div.feature-hint-popup-container {
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  position: absolute;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  -ms-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  -o-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  padding: 12px 16px;
  z-index: 100;
}
div.feature-hint-popup-container:before {
  content: "";
  border: 8px solid transparent;
  border-top: 8px solid #CCCCCC;
  position: absolute;
  right: 96px;
  bottom: -16px;
}
div.feature-hint-popup-container:after {
  content: "";
  border: 8px solid transparent;
  border-top: 8px solid #FFFFFF;
  position: absolute;
  right: 96px;
  bottom: -15px;
}
div.feature-hint-popup-container div.feature-hint-popup-close-button {
  position: absolute;
  right: 5px;
  top: 5px;
  height: 20px;
  width: 20px;
  display: block;
  cursor: pointer;
}
div.feature-hint-popup-container h3.feature-hint-popup-title {
  color: #333333;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
}
div.feature-hint-popup-container p.feature-hint-popup-body {
  color: #666666;
  font-size: 12px;
  line-height: 19px;
}
div.feature-hint-popup-container p.feature-hint-popup-body a {
  color: #008FDE;
}
div.feature-hint-popup-container.popup-navi-layout {
  width: 206px;
  height: 82px;
  top: -111px;
  right: 0px;
}

/* read-later-btn */
.readlater-button {
  color: #aaaaaa;
  display: inline-block;
  padding: 0 0 0 12px;
  background-image: url(/images/v3/atode_btn_pc_user.png);
  background-size: 8px 12px;
  background-repeat: no-repeat;
  background-position: left center;
}
.readlater-button:hover,
.readlater-button.active {
  cursor: pointer;
  color: #ec8294;
  background-image: url(/images/v3/atode_btn_pc_user_hover.png);
}
.readlater-button:visited {
  color: #ec8294;
}
.readlater-button.active:hover {
  cursor: auto;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.readlater-button {
    background-image: url(/images/v3/atode_btn_pc_user@2x.png);
  }
.readlater-button:hover,
.readlater-button.active {
    background-image: url(/images/v3/atode_btn_pc_user_hover@2x.png);
  }
}

/* readlater button feature popup */
div.feature-hint-popup-container.popup-login {
  width: 206px;
  height: 62px;
  top: -91px;
  right: 0px;
}
div.feature-hint-popup-container.popup-login:before,
div.feature-hint-popup-container.popup-login:after {
  content: "";
  border: 8px solid transparent;
  border-top: 8px solid #FFFFFF;
  position: absolute;
  right: 11px;
  bottom: -15px;
}

div.feature-hint-popup-container.popup-login p {
  color: #666666;
}

div.feature-hint-popup-container.popup-login a {
  color: #008FDE !important;
  text-decoration: underline;
}

div.feature-hint-popup-container.popup-login .popup-section {
  color: #666666;
  font-size: 12px;
  line-height: 19px;
}
div.feature-hint-popup-container.popup-login .feature-hint-popup-close-button {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
  cursor: pointer;
  display: block;
  background-image: url(../../images/delete-button.gif);
  background-size: 22px 22px;
  background-repeat: no-repeat;
  background-position: center center;
}