/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2015/04/01, 17:44:34
    Author     : atsushi
*/
/************************************
** 自作のバルーンシェアボタン
************************************/
ul.snsb-balloon{
  padding:0;
  /*margin:1rem 0;*/
}
 
ul.snsb-balloon li {
  /*float: left;*/
  display: inline-block;
  list-style-type: none;
  margin-right: 0.1rem;
}
 
 
.balloon-btn-set{
  display:block;
  width:4rem;
  height:5rem;
}
 
.balloon-btn-set a{
  display:block;
  color:#777;
  font-size:1rem;
  text-decoration:none;
 
}
 
a.arrow-box-link{
  font-weight:bold;
  text-align:center;
  font-family: Arial;
  display:block;
}
 
a.balloon-btn-link{
  border:1px solid #ddd;
  width:3rem;
  /*width:58px;*/
  height:20px;
  line-height:20px;
  /*position:relative;*/
  top:4px;
  color:white;
  border-radius:3px;
  text-align:center;
  display:block;
}
 
.arrow-box {
  /*position: relative;*/
  background: #fff;
  border: 1px solid #bbb;
  text-align:center;
  width:3rem;
  /*width:58px;*/
  height:2rem;
  border-radius:3px;
  line-height:2rem;
  display:inline-block;
}
 
.arrow-box:after,
.arrow-box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
 
.arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  margin-left: -3px;
}
.arrow-box:before {
  border-color: rgba(187, 187, 187, 0);
  border-top-color: #ddd;
  border-width: 5px;
  margin-left: -5px;
}
 
/************************************
** Twitterタイプボタン表示CSS
************************************/
a.balloon-btn-link {
  font-size:1rem;
  font-weight:normal;
  border:1px solid #bbb;
  text-decoration:none;
  background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
  background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
  background-color:#f9f9f9;
  color:#666666;
  display:inline-block;
  text-shadow:1px 1px 0px #ffffff;
   -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
   -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
   box-shadow:inset 1px 1px 0px 0px #ffffff;
}
 
a.twitter-balloon-btn-link{color:#55acee;}
a.facebook-balloon-btn-link{color:#3c5a99;}
a.googleplus-balloon-btn-link{color:#dd4b39;}
a.hatena-balloon-btn-link{color:#3c7dd1;}
a.pocket-balloon-btn-link{color:#ee4257;}
a.line-balloon-btn-link{color:#00c300;}
a.evernote-balloon-btn-link{color:#51b125;}
a.feedly-balloon-btn-link{color:#87bd33;}
 
a.twitter-balloon-btn-link:hover{color:#55acee;}
a.facebook-balloon-btn-link:hover{color:#3c5a99;}
a.googleplus-balloon-btn-link:hover{color:#dd4b39;}
a.hatena-balloon-btn-link:hover{color:#3c7dd1;}
a.pocket-balloon-btn-link:hover{color:#ee4257;}
a.line-balloon-btn-link:hover{color:#00c300;}
a.evernote-balloon-btn-link:hover{color:#51b125;}
a.feedly-balloon-btn-link:hover{color:#87bd33;}