VESARGE THM.

/* SIDEBAR TOTAL */
.sh-box1{position:fixed; width:250px; height:450px; margin-left:100px; top:100px; background:#fff; z-index:9999999999999;}

/* BOX DAS BORDAS, OS CODES (AFTER E BEFORE), É PRA APAGAR AS LINHAS DA BORDAS DO BOX, ENTÃO SÓ MUDAR AS CORES, TAMANHO E TALS. */
.sh-boxb1{position:fixed; width:228px; height:260px; margin-left:10px; margin-top:130px; border:2px solid #000;}
.sh-boxb1:after {position:fixed; width:240px; height:230px; margin-left:-10px; margin-top:15px; background:#fff; content:" ";}
.sh-boxb1:before {position:fixed; width:198px; height:280px; margin-left:15px; margin-top:-15px; background:#fff; content:" ";}

.sh-tit{position:fixed; width:200px; height:14px; margin-left:70px; margin-top:15px; padding:5px; font-family:'Raleway'; font-size:15px; color:#000; text-align:justify;}

.sh-tit2{position:fixed; width:190px; height:auto; margin-left:25px; margin-top:145px; padding:5px; font-family:'Arial'; font-size:12px; color:#000; text-align:justify; background:#eee; line-height:20px;}

.sh-img img {position:fixed; margin-left:75px; margin-top:80px; width:75px; border-radius:100%; padding:.5px; border:6px double #ddd; -webkit-transition: all 1s ease-out; z-index:99999999;}

.sh-img img:hover {-webkit-transform:rotate(360deg);}

#sh-menuc{position:fixed; width:200px; margin-top:50px; margin-left:60px; float:left; text-align:left;}
.sh-menu {position:fixed; margin-left:1px; margin-top:33px; width:auto; height:auto; display:inline-block; cursor: hand; float:left; z-index:9999999;}
.sh-menu a{display:inline-block; width:8px; height:8px; margin:1px; text-align:center; padding:5px; background:#ddd; font-family:'Montserrat'; text-transform:uppercase; letter-spacing:1px; border-radius:100%;}

.sh-cont{position:fixed; width:180px; margin-top:380px; margin-left:40px; text-align:center; color:#ddd;}
.sh-cont a{display:inline-block; width:auto; height:14px; margin:.5px; text-align:center; line-height:15px; color:#ddd; text-shadow: 1px 1px 0px rgba( 255, 255, 255, .5); font-family:'Rationale'; font-size:11px; text-align:center; text-transform:uppercase; letter-spacing:1px; border-radius:0px 0px 4px 4px; padding-top:4px; transition:1s;}
/* SIDEBAR TOTAL */


</STYLE>


<link href="https://fonts.googleapis.com/css?family=Rationale|Montserrat" rel="stylesheet">


<BODY>


<!-- INÍCIO SIDE -->
<div class="sh-box1">

<div class="sh-boxb1"></div>

<div class="sh-tit"> root beer float <i class="ion-ios-color-wand-outline"></i> </div>

<div class="sh-tit2"><font style="font-family:'Montserrat'; font-size:13px; letter-spacing:4px;"> I'VE &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; BEEN &nbsp;  THINKING,</font> thinking it over, i've been <i style="letter-spacing:1.5px; font-weight:bold;">wishing</i> that i was <font style="letter-spacing:3px; font-size:13px;"> [sober]</font>; maybe later you can <b>come over,</b> and we can make a <font style="font-weight:bold;">ROOT BEER FLOAT?</font> i've  been rolling, rolling with <font style="letter-spacing:2.4px;"> [paper],</font> wanna <i style="letter-spacing:2px;">get high...</i> and see you later. pour some <b>whiskey,</b> i'm feeling <font style="font-weight:bold;">FRISKY,</font> we <i>should,</i> make a root beer <u>float.</u> </div>

<div class="sh-img"><img src="{image:sidebar}">

<div id='sh-menuc'>
<div class="sh-menu"><a href="{text:link1}" title="{text:link1 nome}"></a></div>

<div class="sh-menu" style="margin-left:20px; margin-top:14px;"><a href="{text:link2}" title="{text:link2 nome}"></a></div>

<div class="sh-menu" style="margin-left:45px; margin-top:6px;"><a href="{text:link3}" title="{text:link3 nome}"></a></div>

<div class="sh-menu" style="margin-left:70px; margin-top:11px;"><a href="{text:link4}" title="{text:link4 nome}"></a></div>

<div class="sh-menu" style="margin-left:92px; margin-top:27px;"><a href="{text:link5}" title="{text:link5 nome}"></a></div>
</div>

</div>

<div class="sh-cont">
<a>C. ONLINES</a>
•
<a>C. VISITAS</a>
</div>

</div>
<!-- FIM SIDE -->