popup arabic

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://leanmodal.finelysliced.com.au/js/jquery.leanModal.min.js"></script>
		<div class= "c1">
			<div class="row demo-row">
			        <div class="col-xs-3">
					<a id="go" rel="leanModal" name="signup" href="#signup" class="btn btn-block btn-lg btn-primary">Mention this month</a>
				</div>
			      
			</div>
		</div>

		
		<div id="signup">

    <div class="container">
<div class="row" style="
    width: 404px; 
    /* background-color:aqua; */
">

          

           <div class="col-xs-4 col-md-4" style="
    width: 17%;
"></div><div class="col-xs-4 col-md-4" style="
    width: 33%;
">

                <div class="row" style="margin-right: -35px;
margin-left: -15px;">



		        <div class="row" style="margin-top: 5%;">

		            <div class="col-md-12" >

		                <div class="col-xs-10 col-md-10">

				    Aabic : 

		                </div>

		            </div>

		            <div class="col-md-12">

		                <div class="col-xs-10 col-md-10">

				    <textarea style="height:200px" id="arabic" name="arabic" type="text" class="form-control"></textarea>                            

		                </div>

		            </div>

		        </div>



		        <div class="row">

		            <div class="col-md-12">

		                <div class="col-xs-10 col-md-10">

		                    <a class="btn btn-block btn-lg btn-success" id="ar2en" href=""> Ar to En </a>

		                </div>

		            </div>

		        </div>

		</div>

	   </div>

           <div class="col-xs-4 col-md-4" style="
    width: 33%;
">
 <div class="row" style="margin-right: -35px;
margin-left: -15px;">



		        <div class="row" style="margin-top: 5%;">

		            <div class="col-md-12">

		                <div class="col-xs-10 col-md-10">

				    English : 

		                </div>

		            </div>

		            <div class="col-md-12">

		  ...

CSS

.c1
		{
		    margin :5%;
		    
		}

/*---------------------------------------

	RESET, BODY

-----------------------------------------*/


* { margin: 0; padding: 0; }
html { height: 100%; background: fixed url(../img/bg.png) repeat; }
body { background: url(../img/grad.png) fixed center top no-repeat; font-size: 62.5%; font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif; padding: 140px 0 30px 0; }

#banner { position: fixed; top: 0px; left: 0px; width: 100%; background: #052739; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,.4); -moz-box-shadow: 0 2px 1px rgba(0,0,0,.4); box-shadow: 0 2px 1px rgba(0,0,0,.4); z-index: 100; overflow: hidden; }
#banner-left { float: left; width: 120px; }
#banner-right { float: right; width: 900px; }
#banner p { text-align: center; font-size: 1.2em; margin: 0; line-height: 140%; padding: 20px 20px 18px 20px; }


/*---------------------------------------

	STRUCTURE

-----------------------------------------*/

.section { position: relative; margin: 0 auto; width: 664px; overflow: hidden; margin-bottom: 20px; }
.section-split { position: relative; margin: 0 auto; width: 700px; overflow: hidden; margin-bottom: 20px; }
.section-lt { position: relative; float: left; width: 304px;  }
.section-rt { position: relative; float: right; width: 304px; }

.box { background: #2C7AA5; background: rgba(40, 118, 160, 0.3); padding: 18px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#examples { text-align: center; }
 /*
h1 { margin: 0 auto; width: 700px; font-size: 6em; font-weight: 200; color: #17516E; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: center; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.2); letter-spacing: -2px; margin-bottom: 14px; } */

h1 { margin: 0 auto 14px auto; width: 237px; height: 67px; background: url(../img/logo.png) no-repeat; text-indent: -9999px; }

#logo { }
#go { margin: 0 auto; width: 200px; }

#intro { margin: 0 auto; width: 500px;...

JavaScript

$(function() {
    			$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });		
			});


			$("#go").leanModal();

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-3318823-14']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();