.socialBar {
  position: fixed;
  top: 186px;
  right: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  background:#90001c;
}
.buttons{
  width:48px;
  background:#fff;
  position: fixed;
  top: 186px;
  right: -48px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;  
}
.socialBar:hover{
right:48px;
}
.socialBar:hover .buttons{
  right: 0;
}

.socialBar a{
text-decoration:none;
}

/*Without Share Button*/

.buttons-wsb{
  display:block;
  height:250px;
  width:48px;
  background:#fff;
  position: fixed;
  top: 50px;
  right: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;  
}

/*                */
/*      SHARE     */
/*                */
.share{
background:#6a6a6a;
border-bottom:2px solid #333;
}
.share:hover{
opacity:0.90;
}

/*                */
/*     Buttons    */
/*                */

/*Facebook*/

.facebook{
width:48px;
height:48px;
background:url(../../images/icons/dark/Facebook.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.facebook:hover{
opacity:0.90
}
.facebook:active{
opacity:0.80;
}
.facebook:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Facebook";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}



/*Tweet*/

.tweet{
width:48px;
height:48px;
background:url(../../images/icons/dark/Twitter.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.tweet:hover{
opacity:0.90
}
.tweet:active{
opacity:0.80;
}
.tweet:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Twitter";
font: bold 15px Arial, sans-serif;
border-left:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Tumblr*/

.tumblr{
width:48px;
height:48px;
background:url(../../images/icons/dark/Tumblr.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.tumblr:hover{
opacity:0.90
}
.tumblr:active{
opacity:0.80;
}
.tumblr:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Tumblr";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Vimeo*/

.vimeo{
width:48px;
height:48px;
background:url(../../images/icons/dark/Vimeo.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.vimeo:hover{
opacity:0.90
}
.vimeo:active{
opacity:0.80;
}
.vimeo:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Vimeo";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*YouTube*/

.youtube{
width:48px;
height:48px;
background:url(../../images/icons/dark/Youtube.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.youtube:hover{
opacity:0.90
}
.youtube:active{
opacity:0.80;
}
.youtube:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "YouTube";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*MySpace*/

.myspace{
width:48px;
height:48px;
background:url(../../images/icons/dark/Myspace.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.myspace:hover{
opacity:0.90
}
.myspace:active{
opacity:0.80;
}
.myspace:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "MySpace";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Flickr*/

.flickr{
width:48px;
height:48px;
background:url(../../images/icons/dark/Flickr.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.flickr:hover{
opacity:0.90
}
.flickr:active{
opacity:0.80;
}
.flickr:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Flickr";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*LinkedIn*/

.linkedin{
width:48px;
height:48px;
background:url(../../images/icons/dark/Linkedin.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.linkedin:hover{
opacity:0.90
}
.linkedin:active{
opacity:0.80;
}
.linkedin:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "LinkedIn";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Dribbble*/

.dribbble{
width:48px;
height:48px;
background:url(../../images/icons/dark/Dribbble.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.dribbble:hover{
opacity:0.90
}
.dribbble:active{
opacity:0.80;
}
.dribbble:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Dribbble";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Forrst*/

.forrst{
width:48px;
height:48px;
background:url(../../images/icons/dark/Forrst.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.forrst:hover{
opacity:0.90
}
.forrst:active{
opacity:0.80;
}
.forrst:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Forrst";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Last FM*/

.lastfm{
width:48px;
height:48px;
background:url(../../images/icons/dark/LastFM.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.lastfm:hover{
opacity:0.90
}
.lastfm:active{
opacity:0.80;
}
.lastfm:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "LastFM";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Blogger*/

.blogger{
width:48px;
height:48px;
background:url(../../images/icons/dark/Blogger.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.blogger:hover{
opacity:0.90
}
.blogger:active{
opacity:0.80;
}
.blogger:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Blogger";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Digg*/

.digg{
width:48px;
height:48px;
background:url(../../images/icons/dark/Digg.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.digg:hover{
opacity:0.90
}
.digg:active{
opacity:0.80;
}
.digg:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Digg";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Reddit*/

.reddit{
width:48px;
height:48px;
background:url(../../images/icons/dark/Reddit.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.reddit:hover{
opacity:0.90
}
.reddit:active{
opacity:0.80;
}
.reddit:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Reddit";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Google Plus*/

.googleplus{
width:48px;
height:48px;
background:url(../../images/icons/dark/GooglePlus.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.googleplus:hover{
opacity:0.90
}
.googleplus:active{
opacity:0.80;
}
.googleplus:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Google+";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Pinterest*/

.pinterest{
width:48px;
height:48px;
background:url(../../images/icons/dark/Pinterest.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.pinterest:hover{
opacity:0.90
}
.pinterest:active{
opacity:0.80;
}
.pinterest:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Printerest";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Rss*/

.rss{
width:48px;
height:48px;
background:url(../../images/icons/dark/Rss.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.rss:hover{
opacity:0.90
}
.rss:active{
opacity:0.80;
}
.rss:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Rss";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Delicious*/

.delicious{
width:48px;
height:48px;
background:url(../../images/icons/dark/Delicious.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.delicious:hover{
opacity:0.90
}
.delicious:active{
opacity:0.80;
}
.delicious:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Delicious";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Behance*/

.behance{
width:48px;
height:48px;
background:url(../../images/icons/dark/Behance.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.behance:hover{
opacity:0.90
}
.behance:active{
opacity:0.80;
}
.behance:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Behance";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Wordpress*/

.wordpress{
width:48px;
height:48px;
background:url(../../images/icons/dark/Wordpress.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.wordpress:hover{
opacity:0.90
}
.wordpress:active{
opacity:0.80;
}
.wordpress:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Wordpress";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}


/*Yahoo*/

.yahoo{
width:48px;
height:48px;
background:url(../../images/icons/dark/Yahoo.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.yahoo:hover{
opacity:0.90
}
.yahoo:active{
opacity:0.80;
}
.yahoo:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Yahoo";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Deviantart*/

.deviantart{
width:48px;
height:48px;
background:url(../../images/icons/dark/Deviantart.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.deviantart:hover{
opacity:0.90
}
.deviantart:active{
opacity:0.80;
}
.deviantart:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Deviantart";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Stumbleupon*/

.stumbleupon{
width:48px;
height:48px;
background:url(../../images/icons/dark/Stumbleupon.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.stumbleupon:hover{
opacity:0.90
}
.stumbleupon:active{
opacity:0.80;
}
.stumbleupon:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Stumbleupon";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}

/*Picasa*/

.picasa{
width:48px;
height:48px;
background:url(../../images/icons/dark/Picasa.png) no-repeat #f7f7f7;
border-bottom:2px solid #ddd;
}
.picasa:hover{
opacity:0.90
}
.picasa:active{
opacity:0.80;
}
.picasa:hover:after{
position:absolute;
right: 48px;
height:28px;
background:#f7f7f7;
padding: 10px;
color:#3d3d3d;
text-align:center;
content: "Picasa";
font: bold 15px Arial, sans-serif;
border-right:1px solid #ddd;
border-bottom:2px solid #ddd;
text-shadow:0px 1px 1px white;
}