html css card Выглядите по-разному в сафари по сравнению с Chrome и другими - PullRequest
0 голосов
/ 20 марта 2019

Это контрольная карта моего приложения.он отлично работает на Chrome и Firefox, но в браузере Apple Safari фоновая карта (при нажатии на кнопку колеса) все элементы передней карты перекрываются на фоне.Я перепробовал много вещей, но не смог найти никакого решения.Любая помощь будет высоко оценен. Посмотрите в сафари Посмотрите в Chrome

function letsrotate(ida,p1) {
             
             document.getElementById(ida).style.transform = 'rotateY(' + p1 + ')';
             document.getElementById(ida).style.WebkitTransform = 'rotateY(' + p1 + ')';
            document.getElementById(ida).style.msTransform = 'rotateY(' + p1 + ')';
           
            
        }
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-color: #ecf0f1; }
.mrg {

    margin-left: 3%;
    margin-bottom: 2%;

}
.crds {

    
    margin-bottom: -35%;

}
#navbar-container {

   
    height: 41px;

}
@media screen and (min-width: 425px) and  (max-width: 600px) {
    .modal-content {
       
       width: 50% !important;
   }
    .scroll-top.in {

    display: none !important;
    }
.navbar-header {

width: 30%;

}
.navbar-content {

width: 71%;

top: -39px;
    left: 30% !important;
height: 100%;


}
.last{
left: 0% !important;
}

}

@media screen and (max-width: 424px) {
   .modal-content {
       
       width: 60% !important;
   }
    #footer {
        
        height : unset !important;
    }
    
.dropdown-menu-md {
    width: 135%;
    min-width: 370% !important;
}
    
    .scroll-top.in {

    display: none !important;
    }
.navbar-header {

width: 15%;

}
.navbar-content {

width: 85%;

top: -39px;
    left: 17% !important;
height: 100%;


}
.last{
left: 0% !important;
}

}
@media only screen and (min-width: 600px) and (max-width: 767px){
 
   .modal-content {
       
       width: 40% !important;
   }
 
    .scroll-top.in {

    display: none !important;
    }

.navbar-header {

width: 24%;

}
.navbar-content {

width: 76%;

top: -39px;
    left: 24% !important;
height: 100%;


}
.last{
left: 0% !important;
}

}

.navbar-header {

    left: 0;
    position: relative;
    float: none;
    background-color: #fff;

}
.navbar-content {

    position: relative;
    left: 0;
    background-color: #fff;

}
header {
  display: block;
  overflow: hidden;
  position: relative;
  padding-bottom: 2em;
  -moz-border-radius-topleft: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-left-radius: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  border-top-right-radius: 8px; }

.container1 {
  width: 320px;
  margin: 1em auto 1em auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  padding-bottom: 1.5em;
  background-color: #dde1e2;
  -webkit-box-shadow: #bdc3c7 0 5px 5px;
  -moz-box-shadow: #bdc3c7 0 5px 5px;
  box-shadow: #bdc3c7 0 5px 5px; }

.bg {
  border-bottom: 8px solid #5cc0ff; }

.bio:hover > .desc {
  cursor: pointer;
  opacity: 1; }

.avatarcontainer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  display: block; }
  .avatarcontainer:hover > .hover {
    opacity: 1; }

.avatar {
  width: 100%;
  border: 8px solid #5cc0ff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative; }
  .avatar img {
    width: 65px;
    height: 65px; }
  .avatar:hover + .hover {
    opacity: 1;
    cursor: pointer; }

.hover {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  top: 0;
  font-size: 1.8em;
  text-align: center;
  color: white;
  padding-top: 18%;
  opacity: 0;
  font-family: 'FontAwesome';
  font-weight: 300;
  border: 8px solid #5cc0ff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease; }

.data {
  margin-top: .6em;
  color: #81878b; 
    left: -20px;
    position: relative;
}
  .data li {
    width: 32%;
    text-align: center;
    display: inline-block;
    font-size: 1.5em;
    font-family: 'Lato';
    border-right: solid 1px #bdc3c7; }
    .data li:last-child {
      border: none; }
    .data li span {
      display: block;
      text-transform: uppercase;
      font-family: 'Quicksand';
      font-size: .5em;
      margin-top: .6em;
      font-weight:700;
    }

.desc {
  position: absolute;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 107px;
  padding: 1.2em 1em 0 1em;
  color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in; }
  .desc h3 {
    font-family: "Lato";
    font-size: 1.2em;
    margin-bottom: .5em; }
  .desc p {
    font-size: .9em;
    font-family: 'Quicksand';
    line-height: 1.5em; }

.follow {
  margin: 1.5em auto 0 auto;
  background-color: #fe1a01;
  width: 150px;
  color: white;
  font-family: "Lato";
  text-align: center;
  padding: .5em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
 height: 35px;
 }
  .follow:hover {
    background-color: #167abd;
    cursor: pointer;
   
 }


.col1 {
display: block;
  margin-left: auto;
  margin-right: auto;
display: table;
}
.col2{
width : 45%;
float: left;
}




p{
  font-size: 10pt;
}
.misc
{
  font-size: 9pt;
}
h2{
  margin-bottom: 0;
}
a:link{
  color:#0095DD;
}
.flipBtnWrapper{
  width: 90%;
  height: 90%;
  position: relative;
  float: left;
  margin: 6% 4%;
}
.flipBtn, .flipBtn_checkbox, .flipBtn_face{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.flipBtn {    
 transition: transform 2s cubic-bezier(1, 0.02, 0, 1.44);
 -webkit-transition: -webkit-transform 2s cubic-bezier(1, 0.02, 0, 1.44);
  transform-style: preserve-3d;  
  -webkit-transform-style: preserve-3d; 
  pointer-events: none;
 
}
.flipBtnWrapper:hover >  .flipBtn{
   box-shadow: 0px 0px 4px #828282;
}
.flipBtn_back{  
  transform:  translateZ( -1px );
  -webkit-transform:  translateZ( -1px );
}
.flipBtn_front{
  transform: translateZ( 1px );
  -webkit-transform: translateZ( 1px );
  backface-visibility: hidden;
}
.flipBtn_back, .flipBtn_front{
  background-repeat: no-repeat;
  background-position: center;
}
.flipBtn_checkbox{
  opacity: 0;
  cursor: pointer;
}

/* Demo No 1 */
img.avatarback {
    width: 100%;
    border: 8px solid #5cc0ff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    top: 0px;
    left: 0px;
}


.flipBtn_mid.demo1{
  height: 20px;  
	background-color: #d5485a;
  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  top: -10px;
}

.flipBtn_checkbox:checked + .flipBtn.demo1{
  transform: rotatey( -180deg );
  -webkit-transform: rotatey( -180deg );
}



/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */

.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 180px; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #fd1a014d; padding: 30px 0; border-radius: 5px;}
.count-title { font-size: 200%; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }

.wrapper-dropdown-3 {
   position: relative;

width: 57px;

margin: 0 auto;

padding: 8px;

background: rgb(254, 26, 1);

border-radius: 7px;


box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

cursor: pointer;

outline: none;

font-weight: bold;

color: #000;

right: -74px;

height: 35px;
}
.wrapper-dropdown-3:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent;
}

.wrapper-dropdown-3 .dropdown {
  position: absolute;

top: 140%;

left: -61px;

right: 0;

background: white;

border-radius: inherit;

border: 1px solid rgba(0,0,0,0.17);

box-shadow: 0 0 5px rgba(0,0,0,0.1);

font-weight: normal;

transition: all 0.5s ease-in;

list-style: none;

opacity: 0;

pointer-events: none;

width: 120px;
  pointer-events: none;
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border-radius: 0 0 7px 7px;
    border: none;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}



*{
	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;
}




.card:hover{ 
	transform: scale(1.04) translateY(-5px);
	-webkit-transform: scale(1.04) translateY(-5px);
}
.card:hover .image,
.card:hover .shadow {
		background-size: 103%;
}
.card:hover .shadow {
	transform: scale(0.85) translateY(40px);
	-webkit-transform: scale(0.85) translateY(40px);
	-webkit-filter: blur(30px);
	filter: blur(30px);
}

.pricing .pricing-title {
    font-size: 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    color: #4d627b;
}
.pricing {
    text-align: center;
}
.pricing .pricing-price {
    margin: 25px 0;
}
.pricing .pricing-price span:first-child {
    font-size: 4.5em;
    vertical-align: -.5em;
}
.text-normal {
    font-weight: normal;
}
.pricing .pricing-price span:not(:first-child) {
    font-size: 1.2em;
    font-weight: 700;
}
.pricing .pricing-list {

    list-style: none;
    padding: 0;
    margin: 25px 0;

}
.pricing .pricing-list li {

    padding: 5px 0;
    color: #4d627b;

}
.pricing .pricing-list strong {

    color: #4d627b;

}
.btn-purple, .btn-purple:focus {

    background-color: #b052c0;
    border-color: #ab47bc !important;
    color: #fff;

}
.ribbon {

    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 0;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;

}.ribbon span {

    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #E53F50;
    box-shadow: 0 3px 10px -5px #000;
    position: absolute;
    top: 19px;
    right: -21px;

}
.pricing .panel > .panel-body {

    padding: 20px;

}
.panel .panel-footer, .panel > :last-child {

    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;

}
.panel-body {

    padding: 15px 20px 25px;

}
.panel-body {

    padding: 15px;

}
.container1.back {

    position: relative;
    top: -420px;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

}
.innercard {

    transition: all 0.8s ease-in-out 0s;
    transform-style: preserve-3d;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -webkit-transform-style: preserve-3d;

}
.container1
{
     
backface-visibility: hidden;

}

.container1
{
     

    -webkit-backface-visibility: hidden;

}

.material-icons.rotate {

    position: relative;
    top: -15px;
    left: 258px;
    cursor: pointer;

}
.onb {

   position: fixed;

top: 19%;

left: 34%;

z-index: 1000;

}
.onbt {

   position: fixed;

top: 65%;

left: 0%;

z-index: 1000;
display : none;
width: 100%;
}
.onbk {

    position: absolute;
    top: 15%;
    left: 15%;
     display: none;
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 0;
    width: 100%;
    height: 110%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);

}
.banner{
width:150px;
      height:219px;
      min-width:1350px;
      overflow:hidden;
      display:block;
      border:1px solid red;
      background-color: red;
}
.skipb {
position: absolute;

top: 6%;

left: 71%;

z-index: 10000;

width: 7%;

cursor: pointer;

}
.dropdown-backdrop {
    display:none;
}
.switch {
    display: table-cell;
    float: none;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round + label {
    padding: 2px;
    width: 52px;
    height: 40px;
    background-color: #dddddd;
    border-radius: 60px;
}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 40px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 16px;
}
<link href="https://app.btweeps.com/tweet/data/bootstrap.min.css" rel="stylesheet" >
<div class="innercard" id="1010852919623610368" style="transform: rotateY(180deg);">
					                	<div class="container1 face style=&quot;height: 400px;">
		<header>
			<div class="bio">
        <img src="http://app.btweeps.com/tweet/data/1530773813" alt="background" class="bg" width="320">
	
	 <div class="desc">
				 	
					<p> Raksha Bandhan 2018 We Provide Way to Send #Rakhi to your brother with love #rakhi2018</p>  
				</div>
			</div>



                          <div id="gridWrapper" class="avatarcontainer">  
  <div class="flipBtnWrapper" data-toggle="tooltip" title="Click There" id="flpfrt">    <input class="flipBtn_checkbox" type="checkbox" checked="" onclick="sendaction(this)" id="2AD1010852919623610368USProAC">
    <div class="flipBtn demo1">
      <div class="flipBtn_face flipBtn_back demo1"><img src="http://app.btweeps.com/tweet/data/twitter.png" class="avatarback"></div>
      <div class="flipBtn_face flipBtn_mid demo1"></div>
      <div class="flipBtn_face flipBtn_front demo1"><img src="https://pbs.twimg.com/profile_images/1014764745965035520/4Ii-hX40_normal.jpg" class="avatar"></div>
    </div>
  </div>



  
</div>
		</header>

<img src="http://app.btweeps.com/tweet/data/Flip.png" data-toggle="tooltip" title="Click Here" class="material-icons rotate" onclick="letsrotate(&quot;1010852919623610368&quot;,&quot;180deg&quot;)" style="width: 40px;">
		<div class="content">
			<div class="data">
				<ul>
					<li>
				 <div class="timer count-number" data-to="10" data-speed="1500" id="1010852919623610368UStweetsAC">10</div>
						<span>Tweets</span>
					</li>
					<li>
						<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USfollowersAC">0</div>
						<span>Followers</span>
					</li>
					<li>
					       <div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USfollowingsAC">0</div>
						<span>Following</span>
					</li>
				</ul>
			</div>

			<div class="follow"> <div class="icon-twitter"></div> @online_rakhis</div>
		</div>
<div class="data">
				<ul>
					<li>
				 <div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368USctargetAC">0</div>
						<span>Targeted</span>
					</li>
					<li>
						<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368UScunfollowAC">0</div>
						<span>Unfollowed</span>
					</li>
					<li>
						<div class="timer count-number" data-to="0" data-speed="1500" id="1010852919623610368UScfollowbackAC">0</div>
						<span>Followed-Back</span>
					</li>
				</ul>
			</div>

	</div>

   					                <!--===================================================-->
					
					
					                <!--Control Widget-->
					                <!--========================demo-psi-=======================-->
					               <div class="container1 back" style="height: 400px;">

		<header>
			<div class="bio">
                <img src="http://app.btweeps.com/tweet/data/1500x500" alt="background" class="bg" width="320">

	
	 <div class="desc">
				 	
					<p> Remain Actions:  0</p>
				</div>
			</div>



                          <div id="gridWrapper" class="avatarcontainer">  
  <div class="flipBtnWrapper" data-toggle="tooltip" title="Click There" id="flpbk">   <input id="2AD1010852919623610368USmainAC" class="flipBtn_checkbox" type="checkbox" onclick="sendaction(this)" disabled="">
    <div class="flipBtn demo1">
      <div class="flipBtn_face flipBtn_back demo1"><img src="http://app.btweeps.com/tweet/data/MANUAL.png" class="avatarback"></div>
      <div class="flipBtn_face flipBtn_mid demo1"></div>
      <div class="flipBtn_face flipBtn_front demo1"><img src="http://app.btweeps.com/tweet/data/AUTOMATED.png" class="avatar"></div>
    </div>
  </div>



  
</div>







		



		</header>
<img src="http://app.btweeps.com//tweet/data/Flip.png" data-toggle="tooltip" title="Click Here" class="material-icons rotate" onclick="letsrotate(&quot;1010852919623610368&quot;,&quot;0deg&quot;)" style="width: 40px;">

		<div class="content">
			<div class="data">
				<ul>
					<li>
				 <div><div class="switch tg" data-toggle="tooltip" title="Click There" style="position: relative;top: 0px;left: 16px;">
 
  <input id="2AD1010852919623610368USUAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" disabled="">
  <label for="2AD1010852919623610368USUAC" style="cursor: not-allowed" ;="" id=" 2AD1010852919623610368USUACL"></label>
</div></div>
						<span>Unfollow</span>
					</li>
					<li>
						<div> <div class="switch tg" data-toggle="tooltip" title="Click There" style="position: relative;top: 0px;left: 16px;">
 
  <input id="2AD1010852919623610368USFAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" disabled="">
  <label for="2AD1010852919623610368USFAC" style="cursor: not-allowed" ;="" id=" 2AD1010852919623610368USFACL"></label>
</div></div>
						<span>Follow Back</span>
					</li>
					<li>
					       <div><div class="switch tg" style="position: relative;top: 0px;left: 16px;">
 
  <input id="2AD1010852919623610368USTAC" class="cmn-toggle cmn-toggle-round" type="checkbox" onclick="sendaction(this)" checked="" disabled="" ;="">
  <label for="2AD1010852919623610368USTAC" style="cursor: not-allowed" ;="" id="2AD1010852919623610368USTACL"></label>
</div></div>
						<span>Target</span>
					</li>
				</ul>
			</div>

			<div class="follow" style="position: relative;left: -23px;"> <div class="icon-twitter"></div> <label class="targetlabel" data-toggle="tooltip" title="Double-click and Enter your Targeted Username here (without @ Sign)." id="2AD1010852919623610368USTTAC" ondblclick="convert(this) " onchange="save(this,this.id)" onfocusout="reconvert(this)"><p>Btweeps</p></label>
			</div>
		

		
				<div id="2AD1010852919623610368USTAAAC" data-toggle="tooltip" title="Click There" class="wrapper-dropdown-3" tabindex="1" onclick="happy(this)" onblur="unhappy(this.id)" style="top: -35px;left: 90px;">
						<span>  </span>
						<ul class="dropdown">
							<li><a href="#" onclick="sendaction(this);" id="2AD1010852919623610368USTAIAC">Followers</a></li>
							<li><a href="#" onclick="sendaction(this);" id="2AD1010852919623610368USTAOAC">Following</a></li>
						</ul>
					</div> 		

	</div>
	    		<div class="mainlock" style="position: relative;top: -25px;left: 130px; z-index: -1; "><img src="http://app.btweeps.com//tweet/data/Locked.png" style="width: 65px;"></div>
	</div>
					                <!--===================================================-->
					
					            </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...