<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-16"/> 
    <title>The Internet for Left-Handers©</title>
    <link rel="shortcut icon" href="favicon.gif">
    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/ldegcjgpepfdjmddeicmmacfkfccidcp">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="css_browser_selector.js" type="text/javascript"></script>
    <style type="text/css">

        body {
        background-image: url(leftkeyb.gif);
        background-attachment: fixed;
        font-family: Verdana, sans;
        font-size: 13px;
        overflow: hidden;
        margin: 0;
        color: white; text-shadow: black 0.1em 0.1em 0.2em
        }
        
        div#scroll {
        direction:rtl;
        overflow-y: scroll;
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        }
        
        a {
        cursor:url(hand.png),url(hand.cur),auto !important;
        color: #996633;
        font-weight: bold;
        text-decoration: none;
        }
        
        a img {
        border: 0;
        }
        
        .pluginButton button {
        cursor:url(hand.png),url(hand.cur),auto !important;
        color: blue;
        }
        
        a:hover {
        text-decoration: underline;
        }
        
        .skew {
        transform: skew(10deg,0);
        -ms-transform: skew(10deg,0);
        -webkit-transform: skew(10deg,0); 
        -o-transform: skew(10deg,0); 
        -moz-transform: skew(10deg,0);
        }
    
        div#wrap {
        direction:ltr;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        width: 516px;
        }

        div#footer, div#title, div#subtitle, img#hand, div#plugin, div#plug2, div#try, div#try-medium, div#try-big, div#try div, div#try-medium div, div#try-big div{
        border-style: ridge;
        border-width: 7px;
        border-color: #ddd;
        padding-left: 12px; 
        }
        
        div#title, div#subtitle {
        width: 490px;     
        }
        
        
        div#title {
        background-color: #555;
        }
        

        div#title h1 {
        font-size: 24px;
        color: white;
        }
        
        div#subtitle {
        background-color: #ccc;
        }
        
        div#subtitle h3 {
        font-size: 15px;
        }
        
        img#hand {
        height: 200px;
        padding-left: 0;
        width: 502px;
        margin-bottom: -3px;
        }
        
        div#plugin {
        background-color: #ccc;
        height: 120px;
        background-image: url(chrome-bw.png);
        padding-left: 0;
        width: 502px;
        }
        
        div#plug2 {
        height: 45px;
        width: 440px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        background-color: #444;
        }
        
        div#plug2 p {
        margin-bottom: 0;
        font-size: 12px;
        text-align: center;
        padding: 0;
        }
        
        button#plugin-down {
        transform: skew(-10deg,0);
        -ms-transform: skew(-10deg,0);
        -webkit-transform: skew(-10deg,0); 
        -o-transform: skew(-10deg,0); 
        -moz-transform: skew(-10deg,0);
        font-weight: bold;
        cursor:url(hand.png),url(hand.cur),auto;
        width: auto;
        }
        
        div#try, div#try-medium, div#try-big {
        background-color: #ccc;
        background-image: url(metal.jpg);
        position: relative;
        }
        
        div#try:hover, div#try-medium:hover, div#try-big:hover {
        background-color: #fff;
        background-image: none;
        }
        
        div#try div, div#try-medium div, div#try-big div {
        background-color: #444;
        width: 100px;
        height: 28px;
        margin-top: 10px;
        }
        
        div#try div p, div#try-medium div p, div#try-big div p {
        font-size: 12px;
        line-height: 1px;
        }
        
        .ie7 div#try div p {
        line-height: 30px;
        }
        
        
        p.percent {
        color: black;
        text-shadow: none;
        font-weight: bold;
        position: absolute;
        bottom: -5px;
        right: 10px;
        display: none;
        } 
        
        
        
        div#try {
        cursor:url(hand.png),url(hand.cur),auto;
        height: 140px;
        width: 140px;
        float: left;
        }
        
        div#try-medium {
        cursor:url(hand-medium.png),auto;
        height: 140px;
        width: 324px;
        float: right;
        }
        
        div#try-big {
        cursor:url(hand-big.png),auto;
        height: 250px;
        width: 490px;
        clear: both;
        }
        
        
        .ie div#try {
        width: 490px;
        float: none;
        }
        
        .ie div#try-medium, .ie div#try-big {
        display: none;
        }
        
        
        div#footer {
        font-size: 11px;
        line-height: 14px;
        width: 478px;
        background-color: #444;
        margin-bottom: 70px;  
        padding-right: 12px;
        padding-bottom: 6px;
        }
        
        div#social {
        float:left;
        margin-left: 10px;
        margin-right: 20px;
        margin-top: 10px;  
        }
        
        div#tw-butt {
        width: 56px;
        height: 20px;
        background-image: url(twButton.png);
        }
        
        div#tw-butt:hover {
        background-position: right;
        }
        
        p#credits {
        margin-left: 80px;
        margin-top: 20px;
        }
    </style>
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-17080297-46']);
      _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);
      })();
    
    </script>
</head>
<body>
<div id="scroll">
    <div id="wrap">
        <div id="title">
            <h1 class="skew" >The Internet for Left-Handers©</h1>
        </div>
        <div id="subtitle">
            <h3 class="skew">The right to be left-handed. NO MORE discrimination.</h3>
        </div>
        <img id="hand" src="left-hand.jpg" />
        <div id="try">
            <div class="blink">
                <p class="skew">
                Try It Here
                </p>
            </div>
            <p class="skew percent">100%</p>
        </div>
        <div id="try-medium">
            <div class="blink">
                <p class="skew">
                Here
                </p>
            </div>
            <p class="skew percent">200%</p>
        </div>
        <div id="try-big">
            <div class="blink">
                <p class="skew">
                ...And Here!
                </p>
            </div>
            <p class="skew percent">500%</p>
        </div>
        <div id="plugin">
            <div id="plug2">
                <p class="skew">
                Install <button onclick="chrome.webstore.install()" id="install-button">THE INTERNET FOR LEFT-HANDERS©</button> plugin for CHROME!
                </p>
            </div>
        </div>
        <div id="footer">
            <div id="social">
                <script>function fbs_click() {u=location.href;t=document.title;window.open(‘http://www.facebook.com/sharer.php?u=’+encodeURIComponent(u)+’&t=’+encodeURIComponent(t),’sharer’,'toolbar=0,status=0,width=626,height=436′);return false;}</script>
                <a href="http://www.facebook.com/share.php?u=http://www.silviolorusso.com/theinternet4left-handers/" onclick="return fbs_click()" target="_blank">
                    <img src="fbbutton.png" alt="Share on Facebook" style="width:56px;">
                </a>
                <a href="https://twitter.com/share" class="twitter-share-button" data-text="The Internet for Left-Handers http://www.silviolorusso.com/theinternet4left-handers/" data-lang="it">
                    <div id="tw-butt">
                    </div>
                </a>
            </div>
            <p class="skew" id="credits">
                <b>THE INTERNET FOR LEFT-HANDERS©</b> is kindly offered<br/> by <a href="http://silviolorusso.com">Silvio Lorusso</a>, always been faithful to his left hand. 2012
            </p>
        </div>
    </div>
</div>
<img src="leftkeyb.gif" style="display:none;" />
<script type="text/javascript">
        function blink() {
          $('.blink').each(function() {
            $(this).css('visibility', $(this).css('visibility') != 'hidden' ? 'hidden' : 'visible');
          });
        }
        
        $(document).ready(function() {
          setInterval("blink()", 800);
        });
    

        $('#try').hover(function() {
         $('#try div').css('display','none'); $('#try p.percent').css('display','block');
        }, function() {
            $("#try div").css('display','block'); $('#try p.percent').css('display','none');
        });
        
        
        $('#try-medium').hover(function() {
         $('#try-medium div').css('display','none'); $('#try-medium p.percent').css('display','block');
        }, function() {
            $("#try-medium div").css('display','block'); $('#try-medium p.percent').css('display','none');
        });
        
        $('#try-big').hover(function() {
         $('#try-big div').css('display','none'); $('#try-big p.percent').css('display','block');
        }, function() {
            $("#try-big div").css('display','block'); $('#try-big p.percent').css('display','none');
        });
</script>
</body>
</html>