/*
	example taken from 
	http://sharrre.com/example2.html
	201311*pike

	the javascript is in lima_omega.info,
	and the document call in lima_omega.js,
	the lib in js/jquery/jquery-sharrre
	
	
*/

  .sharrre .box{
    background:#808080;
    height:20px;
    display:inline-block;
    position:relative;
    padding:0px 55px 0 8px;
    font-size:12px;
    float:left;
    clear:both;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
  }
  .sharrre .left{
    line-height:20px;
    display:block;
    white-space:nowrap;
    xtext-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#f5f5f5;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
  }
  .sharrre .middle{
    position:absolute;
    height:20px;
    top:0px;
    right:30px;
    width:0px;
    background:#404040;
    xtext-shadow:0px -1px 1px #363f49;
    color:#f5f5f5;
    white-space:nowrap;
    text-align:left;
    overflow:hidden;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
  }
  .sharrre .middle a{
    color:#f5f5f5;
    font-weight:bold;
    xpadding:0 9px 0 9px;
    text-align:center;
    float:left;
    line-height:20px;
    display:inline-block; width:20px; height:20px;
    background:#c724b1 url('../img/bgmap-social1.png') no-repeat 0 0;
  }
  .sharrre .right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:45px;
    text-align:center;
    line-height:20px;
    color:#f5f5f5;
    background:#a6a6a6;
  }
  .sharrre .box:hover{
    padding-right:130px;
  }
  .sharrre .middle a:hover{
    text-decoration:none;
  }
  .sharrre .box:hover .middle{
    width:94px;
  }
  
.sharrre a { text-decoration:none; }

.sharrre .middle a.facebook 		{ color:transparent; background:#c724b1 url('../img/bgmap-social1.png') no-repeat 0 -20px; }
.sharrre .middle a.twitter 			{ color:transparent; background:#c724b1 url('../img/bgmap-social1.png') no-repeat -20px -20px; }
.sharrre .middle a.linkedin 		{ color:transparent; background:#c724b1 url('../img/bgmap-social1.png') no-repeat -40px -20px; }
.sharrre .middle a.googleplus 		{ background:#c724b1; }