/* ==========================
       Hatena-touch.css
============================ */

/* ==========RESET========== */

h1,h2,h3,h4,h5 {
  font-size:100%;
  margin:0;
  padding:0;
}

ul,ol {
  margin:0;
  padding:0;
  list-style:none;
}

p {

}

img {
  border:none;
  vertical-align:bottom;
}

/* ==========COMMON========== */

body {
  margin:0;
  padding:0;
  background:#fff;
  color:#000000;
  font-family:'Helvetica','Arial',sans-serif;
}

div#container {
  text-align:left;
  margin:0 auto;
  width:100%;
  overflow:hidden;
  font-size:90%;
}

a {
  text-decoration:none;
  color:#1841ce;
  font-weight:bold;
}

.edit ,.note a {
  font-weight:normal;
}

a:visited {
  color:#5279e7;
}

.clear {
  clear:both;
}

.clearfix:after {
  content:"";
  display:block;
  clear:both;
}

.center {
  text-align:center;
}

.right {
  text-align:right;
}

.left {
  text-align:left;
}

.s {
  font-size:90%;
}

.ss {
  font-size:72%;
}

.l {
  font-size:120%;
}

.ll {
  font-size:150%;
}

.b {
  font-weight:bold;
}

.normal {
  font-weight:normal;
  font-style:normal;
}

.note {
/*  font-size:90%; */
  color:#7D8FA6;
}

.timestamp ,time{
  color:#999;
  font-weight:normal;
}

.comment, a:visited.comment {
  font-weight:normal;
  color:#999;
}

.domain {
  color:#999;
  font-weight:normal;
}

.range {
  color:#999;
}

.users {
  color:#ff0000;
  background:#ffcccc;
}

.entry {
  color:#000;
}

.black {
  color:#000;
}

.gray {
  color:#999;
}

.blue {
  color:#456e9e;
}

.navy {
  color:#6D7BAA
}

.green {
  color:#6b9337;
}

.red {
  color:#ff0000;
}

/* coco-only ? */

.username, .username:visited {
  color:#bf5100;
}

.here , .here:visited{
  color:#88A0BB;
}

.rally, .rally:visited {
  color:#358660;
}

.f-right {
  float:right;
  margin:8px;
}

.f-left {
  float:left;
  margin:8px;
}

.f-right.plain {
  margin:0;
}

.f-left.plain {
  margin:0;
}

.v-middle {
  vertical-align:middle;
}

.v-top {
  vertical-align:top;
}

.v-bottom {
  vertical-align:bottom;
}

.section {
  margin:8px;
  line-height:1.5;
}

.section p {
  margin:3px 0;
}

.insert-block {
  overflow:hidden;
  background:#fff ;
  border-top:1px solid #c8d2d9;
  border-bottom:1px solid #c8d2d9;
  padding:8px 0;
  -moz-box-shadow: inset 0 0 8px #bbb;
  -webkit-box-shadow: inset 0 0 8px #bbb;
  box-shadow: inset 0 0 8px #bbb;
  clear:both;
}

.radius {
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
 background-clip: padding-box;
}

.radius-s {
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
 background-clip: padding-box;
}

.border-radius {
  border:1px solid #cccccc;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
 background-clip: padding-box;
}

.icon, .icon img, .icon input{
  vertical-align:middle;
  margin-right:3px;
  margin-bottom:5px;
}

.hatena-star-star-container img {
  vertical-align:middle;
}

.profile-image, .happie-image {

}

/* ==========HEADER========== */

#header {
  display:block;
  width:100%;
  background:#9CC9F6;
  height:44px;
  overflow:hidden;
  text-align:center; 
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#C6E1FC), 
    to(#ABD2F8), 
    color-stop(0.5, #A8D3FF),
    color-stop(0.5, #9CC9F6) 
  );
  background: -moz-linear-gradient(
    top,
    #C6E1FC 0%,
    #A8D3FF 50%,
    #9CC9F6 51%,
    #ABD2F8 100%
  );
  border-top:1px solid #EEF5FC;
  border-bottom:1px solid #84B6E8;
  position:relative;
}

#header span#header-center {
  color:#fff;
  font-weight:bold;
  display:block;
  padding-top:3px;
  text-shadow:-1px -1px #87b4cf;
  font-size:160%;
}


#header img#header-button-top {
  position:absolute;
  top:6px;
  left:5px;
}

#header.wh {
  background:#ffffff;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#ffffff), 
    color-stop(0.5, #ffffff),
    to(#ebebec)
  );
  background: -moz-linear-gradient(
    top,
    #ffffff 0%,
    #ffffff 50%,
    #ebebec 100%
  );
  border-top:1px solid #e6e6e6;
  border-bottom:1px solid #cccccc;
}

#header.wh span#header-center {
  color:#5279e7;
  text-shadow:0 1px 1px #ffffff;
}


#header img#header-button-config, #header img#header-button-reload {
  position:absolute;
  top:6px;
  right:5px;
}

#header .profile-image {
  width:27px;
  height:27px;
  position:absolute;
  right:6px;
  top:6px;
  background:#fff;
 -webkit-border-radius:6px;
 -moz-border-radius:6px;
  border-radius:6px;
  border:1px solid #ccc;
}



#footer {
  font-size:80%;
  padding-top:10px;
  border-top:1px solid #ddd;
  margin-top:18px;
  margin-bottom:10px;
  text-align:center;
}

#footer address {
  font-style:normal;
}

.list + #footer {
  border-top:0;
}

/* ==========NAVIGATION========== */

.tab {
  background:none repeat scroll 0 0 #F4F9FF;
  border-bottom:1px solid #C9DCF1;
  padding-top:10px;
  text-align:center;
}

.tab ul {
  border-left:1px solid #C9DCF1;
  border-top:1px solid #C9DCF1;
  list-style:none outside none;
  margin:0 auto -1px;
  padding:0;
  width:94%;
}

.tab ul li.selected {
  background:none repeat scroll 0 0 #FFFFFF;
}

.tab ul li.selected span,
.tab ul li.selected a {
  color:#000;
}

.tab ul li span,
.tab ul li a {
  display: block;
  font-weight:bold;
  border-right:1px solid #C9DCF1;
  padding: 5px 0;
}

.tab ul li {
  display:inline-block;
  text-align:center;
}

.tab.menu-2 ul li { width:50%;}
.tab.menu-3 ul li { width:33%;}
.tab.menu-3 ul li:nth-child(2) { width:34%;}
.tab.menu-4 ul li { width:25%;}
.tab.menu-5 ul li { width:20%;}


.pager {
 -webkit-background-clip: padding-box;
 -webkit-border-radius:10px;
 -webkit-box-sizing:border-box;
 -moz-border-radius:10px;
 -moz-box-sizing:border-box;
 -moz-background-clip: padding-box;
  box-sizing:border-box;
  background-clip: padding-box;
  border-radius:10px;
  border:1px solid #bbb;
  background:#fff;
  color:#333;
  font-size:100%;
  height:44px;
  line-height:44px;
  margin:15px 10px;
  overflow:hidden;
}

.pager .pager-l {
  float:left;
  color:#333;
  display:block;
  width:50%;
  padding-left:25px;
 -webkit-box-sizing:border-box;
 -webkit-border-top-left-radius:14px;
 -webkit-border-bottom-left-radius:14px;
 -moz-box-sizing:border-box;
 -moz-border-radius-topleft:14px;
 -moz-border-radius-bottomleft:14px;
  box-sizing:border-box;
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
  background: url(/images/touch/arrow-left.png) 8px 15px no-repeat;

}

.pager .pager-l img.icon{
  margin-left:10px;
  margin-right:5px;
}

.pager .pager-r {
  float:right;
  color:#333;
  display:block;
  width:48%;
  padding-right:18px;
 -webkit-box-sizing:border-box;
 -webkit-border-top-right-radius:14px;
 -webkit-border-bottom-right-radius:14px;
 -moz-box-sizing:border-box;
 -moz-border-radius-topright:14px;
 -moz-border-radius-bottomright:14px;
  box-sizing:border-box;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  text-align:right;
  background: url(/images/touch/arrow-right.png) right 15px no-repeat;
  margin-right:8px;
  margin-left:-8px;
  border-left:1px solid #bbb;
}

.pager .pager-r img.icon {
  margin-right:10px;
  margin-left:5px;
}

.pager.button .pager-l {
  background:transparent url(/images/touch/arrow-left.png) 8px 15px no-repeat;
  text-align:left;
}

.pager.button .pager-r {
  background:transparent url(/images/touch/arrow-right.png) right 15px no-repeat;
  text-align:right;
}

.pager.button {
  padding-top:0;
  width:auto;
  margin:15px 10px;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#ffffff), 
    to(#f3f3f3), 
    color-stop(0.5, #f7f7f7),
    color-stop(0.5, #e9e9e9) 
  );
  background: -moz-linear-gradient(
    top,
    #ffffff 0%,
    #f7f7f7 50%,
    #e9e9e9 51%,
    #f3f3f3 100%
  );
}

.more {
  border-top:1px solid #d2dadf;
  clear:both;
}

.more a {
  display:block;
  padding:12px 20px 12px 8px;
  background:url(/images/touch/arrow-right.png) 97% 50% no-repeat;
}

.list + .more {
  border-top:0;
}

.list.plain + .more {
  border-top:1px solid #d2dadf;
}

.list.plain + .more.sub-title {
  border-top:0;
}

.sub-title.more {
  border-top:0;
  padding:0;
}

.sub-title.more a{
  padding:8px 0 8px 8px;
}

/* ==========TITLE========== */

.page-title {
  display:block;
  padding:8px ;
  background:#F4F9FF;
  border-bottom:1px solid #C9DCF1;
  color:#3F82CD;
  font-size:110%;
}

.page-title img{
  vertical-align:middle;
  margin-right:3px;
  border:1px solid #C9DBEE;
  background:#fff;
}

.title {
  padding:4px 0 4px 7px;
  color:#fff;
  background:#8abdf6;
  font-weight:bold;
  font-size:90%;
  position:relative;
  clear:both;
}

.title.gr {
  background:#8da2bb;
}

.sub-title {
  padding:4px 0 4px 7px;
  color:#3478C4;
  background:#CEE3FA;
  font-weight:bold;
  font-size:90%;
  position:relative;
}

.sub-title.gr {
  color:#7e8893;
  background:#e3e9f0;
}

/* ==========MESSAGE========== */

.message.section {
  background:#eef6f9;
  padding:8px;
}

.border-radius.section {
  border:1px solid #;
  padding:8px;
}

.ok.section {
  background:#E3F9DB;
  color:#517B29;
  border:1px solid #C5DABA;
  padding:8px;
}

.error.section {
  background:#FFEED8;
  color:#9B2E2E;
  border:1px solid #F5C8A7;
  padding:8px;
}

.attention.section {
  text-align:center;
  padding:5px 0;
  color:#978d01;
  background:#fefbd2;
  margin:0;
  padding:8px;
}

.attention.section a{
  color:#978d01;
}

#config-container > .message.section {
  background:#F2F9FF;
}

#config-container > .ok.section {
  background: none repeat scroll 0 0 #E7FFDF;
  border: 1px solid #A2CD8C;
}

#config-container > .error.section {
  background: none repeat scroll 0 0 #FFF2E1;
  border: 1px solid #D7B093;
}

/* ==========BUTTON========== */

.button {
  display:block;
  width:280px;
  height:44px;
  margin:10px auto;
  border:1px solid #bbb;
  font-weight:bold;
  text-align:center;
  text-shadow:1px 1px 0 #fff;
  line-height:44px;
 -webkit-border-radius:10px;
 -webkit-box-sizing:border-box;
 -webkit-background-clip: padding-box;
 -moz-border-radius:10px;
 -moz-box-sizing:border-box;
 -moz-background-clip: padding-box;
  border-radius:10px;
  box-sizing:border-box;
  background-clip: padding-box;
  overflow:hidden;
  color:#333;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#ffffff), 
    to(#f3f3f3), 
    color-stop(0.5, #f7f7f7),
    color-stop(0.5, #e9e9e9) 
  );
  background: -moz-linear-gradient(
    top,
    #ffffff 0%,
    #f7f7f7 50%,
    #e9e9e9 51%,
    #f3f3f3 100%
  );
}

.button.blue {
  color:#fff;
  border-top:1px solid #93a6b4;
  border-right:1px solid #204365;
  border-bottom:1px solid #14324d;
  border-left:1px solid #204365;
  font-size:120%;
  text-shadow:-1px -1px 0 #4b70a3;
  background:#9CC9F6;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#b5d0f3), 
    to(#5e94f3), 
    color-stop(0.5, #5c98ea),
    color-stop(0.5, #4789e3) 
  );
  background: -moz-linear-gradient(
    top,
    #b5d0f3 0%,
    #5c98ea 50%,
    #4789e3 51%,
    #5e94f3 100%
  );
}

.button.white, .button.more {
  font-size:100%;
}



/* ==========LIST========== */

.list {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid #D2DADF;
  line-height:1.5;
  background:#ffffff;
}

.title + .list {
  border-top:0;
}

.list li{
  border-bottom:1px solid #D2DADF;
}

.list li > .section {
  margin:8px;
}

.list li > .section.timeline-right {
  margin-left:50px;
}

.list li:after {
  clear:both;
  content:"";
  display:block;
}

.list li .f-right {
  margin-top:0;
}

.list li .f-left {
  margin-top:0;
}

.list.block-link li{
  border-bottom:0;
}

.list.block-link li a{
  display:block;
  padding:12px 20px 12px 8px;
  background:url(/images/touch/arrow-right.png) 97% 50% no-repeat;
  border-bottom:1px solid #D2DADF;
}

.list.block-link li a img.f-left, .list.block-link li a img.f-right{
  margin-left:0;
}

.list.stripe li:nth-child(odd){
  background:#EDF4F8;
}

.list.plain {
  border-top:0;
  margin:4px 0;
}

.list.plain li {
  border-bottom:0;
  padding:4px 8px;
}

.list.plain li:after {
  clear:none;
  display:inline;
}

.list.border-radius {
  border:1px solid #D2DADF;
  background:#fff;
}

.list.radius li:first-child {
 -webkit-border-top-left-radius:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-background-clip: padding-box;
 -moz-border-radius-topleft:10px;
 -moz-border-radius-topright:10px;
 -moz-background-clip: padding-box;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-clip: padding-box;
}


.list.radius li:last-child {
 -webkit-border-radius-bottom-left:10px;
 -webkit-border-radius-bottom-right:10px;
 -webkit-background-clip: padding-box;
 -moz-border-radius-topleft:10px;
 -moz-border-radius-topright:10px;
 -moz-background-clip: padding-box;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-clip: padding-box;
}

.list + .block-link {
  border-top:0;
}

/* ==========CONIG==========*/

#config-container {
  background:url(/images/touch/stripe.png);
  padding:8px 0;
}

#config-container > .title, #config-container form > .title {
  background:transparent;
  color:#485066;
  text-shadow:0 1px 0 #ffffff;
  padding-bottom:0;
  padding-top:12px;
  padding-left:15px;
  font-size:110%;
}

#config-container > .section, #config-container form > .section {
 -webkit-border-radius:10px;
 -webkit-background-clip: padding-box;
 -moz-border-radius:10px;
 -moz-background-clip: padding-box;
  border-radius:10px;
  border-background-clip: padding-box;
  background:#fff;
  border:1px solid #A4B3C1;
  padding:8px;
}

#config-container > .list, #config-container form > .list {
 -webkit-border-radius:10px;
 -webkit-background-clip: padding-box;
 -moz-border-radius:10px;
 -moz-background-clip: padding-box;
  border-radius:10px;
  background-clip: padding-box;
  background:#fff;
  border:1px solid #A4B3C1;
  margin:8px;
}

#config-container > .chart, #config-container form > .chart {
  border:1px solid #A4B3C1;
}

#config-container .list li:last-of-type{
  border-bottom:0;
}

#config-container div.section input,#config-container .submit input{
  font-size:100%;
}

#config-container .submit {
  text-align:center;
  padding:8px 0 24px 0;
}

#config-container input[type='text'],
#config-container input[type='mailaddress'],
#config-container input[type='password'],
#config-container input[type='url'],
#config-container input[type='number'],
#config-container input[type='tel'] {
  font-size:16px;
}


/* ==========CHART==========*/

.grid-3, .grid-4 {
  width:100%;
/*  margin:8px 0; */
  text-align:center;
}

.grid-3-1 {
  display:inline-block;
  width:33%;
  padding:8px 0;
}
.grid-3-2 {
  display:inline-block;
  width:34%;
  padding:8px 0;
}
.grid-3-3 {
  display:inline-block;
  width:33%;
  padding:8px 0;
}

.grid-4-1, .grid-4-2, .grid-4-3, .grid-4-4 {
  display:inline-block;
  width:25%;
  padding:8px 0;
}

dl.chart {
  margin:10px;
  border:1px solid #bbb;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
  border-radius:10px;
  background:#fff;
}

dl.chart dt {
  float:left;
  clear:both;
  padding:10px;
  border-bottom:1px solid #bbb;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
  height:40px;
  overflow:hidden;
}

dl.chart dd {
  padding:10px;
  text-align:right;
  border-bottom:1px solid #bbb;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
  height:40px;
}

dl.chart dt:last-of-type ,dl.chart dd:last-of-type {
  border-bottom:0;
}

/* ==========COLORSTAR========== */

.star-container {
  overflow:hidden;
 -webkit-transition:all 1s;
 -webkit-transform-origin:1px 1px;
  background:#fff ;
  border-top:1px solid #c8d2d9;
  padding-top:8px;
  -moz-box-shadow: inset 0 0 8px #bbb;
  -webkit-box-shadow: inset 0 0 8px #bbb;
  box-shadow: inset 0 0 8px #bbb;
  clear:both;
}

#container > .star-container {
 -moz-box-shadow:none;
 -webkit-box-shadow:none;
 box-shadow:none;
}

.star-container .star-buttons li {
  display:inline-block;
  border-bottom:0;
  text-align:center;
  color:#666;
  padding:0 3px;
}

.star-container .star-buttons li.star-yellow {
  width:125px;
}

.star-container.has-purple .star-buttons li.star-yellow {
  width:70px;
}

.star-container .star-buttons li span.star-button{
  display:block;
  padding:5px 8px ;
  border:1px solid #b9c3c9;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.star-container .star-buttons li span.star-button img{
  width:33px;
  height:26px;
}

.star-container ul.list {
  line-height:1;
  background:transparent;
}

.window {
    width: auto !important;
}

.star-container ul.list li:last-of-type a{
  border-bottom:none;
}

/* ==========OTHER========== */

img.emoji {
  display:none;
}

/* ===========================
             iOS4
 =========================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

  .pager .pager-l {
    background:url(/images/touch/arrow-left_2x.png) 8px 15px no-repeat;
    -webkit-background-size: 9px 13px;
  }

  .pager .pager-r {
    background:url(/images/touch/arrow-right_2x.png) right 15px no-repeat;
    -webkit-background-size: 9px 13px;
  }

  .pager.button .pager-l {
    background:transparent url(/images/touch/arrow-left_2x.png) 8px 15px no-repeat;
    -webkit-background-size: 9px 13px;
  }

  .pager.button .pager-r {
    background:transparent url(/images/touch/arrow-right_2x.png) right 15px no-repeat;
    -webkit-background-size: 9px 13px;
  }

  .list.block-link li a{
    background:url(/images/touch/arrow-right_2x.png) 97% 50% no-repeat;
    -webkit-background-size: 9px 13px;
  }

  #config-container {
    background:url(/images/touch/stripe_2x.png);
    -webkit-background-size: 7px 7px;
  }
}