Untitled

<html>
<head>

<title>Curios - Watching</title>

<link rel="shortcut icon" href="http://www.iconj.com/ico/o/h/oht62g125e.ico" type="image/x-icon" />

<style>

    body {
        background-color:#141414
    }

    .button {
        border-top: 1px solid #757575;
        border-right: 1px solid #757575;
        background: #363536;
        background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#363536));
        background: -webkit-linear-gradient(top, #4d4d4d, #363536);
        background: -moz-linear-gradient(top, #4d4d4d, #363536);
        background: -ms-linear-gradient(top, #4d4d4d, #363536);
        background: -o-linear-gradient(top, #4d4d4d, #363536);
        padding: 4px 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
        -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
        box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
        color: #c9c9c9;
        font-size: 12px;
        font-family: Helvetica, Arial, Sans-Serif;
        text-decoration: none;
        vertical-align: middle;
        margin:0px;
        }
    .button:hover {
        border-top-color: #303030;
        background: #303030;
        color: #ccc;
        }
    .button:active {
        border-top-color: #2e2e2e;
        background: #2e2e2e;
        }
    .button a {
        text-decoration: none;
        color: #c9c9c9;
        }
    .button a:visited{
        text-decoration: none;
        color: #c9c9c9;
        }
    .button a:hover{
        text-decoration: none;
        color: #c9c9c9;
        }
    .button a:active{
        text-decoration: none;
        color: #c9c9c9;
        }
    .button a:link{
        text-decoration: none;
        color: #c9c9c9;
        }
    #chat iframe {
        background-color: transparent;
        border: 1px solid #353535;
        padding: 0px;
        overflow: hidden;
    }

    #player {
    width: 640px;
    height: 385px;
    }

    .handle {
    cursor: move;
    z-index: 10;
    }

    #dragvideo {
        position: absolute;
        left: 2em;
        top: 1em;
    }

    #dragchat {
        position: absolute;
        left: 750px;
        top: 1em;
    }

    #dragcontrols {
        position: absolute;
        left: 2em;
        top: 500px;
    }

    .resizableaspect {
        padding-right: 0.5em;

    .ui-resizable-helper {
        border: 1px dotted #DEDEDE;
    }

    #chat {
        width: 600px;
        height: 470px;
    }

    #player {
        width: 640px;
        height: 385px;
    }
</style>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet"/>

    <script type="text/javascript" language="Javascript"
              src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

     <script>
    $(function() {
         $( ".resizableaspect" ).resizable({
            aspectRatio: true,
              helper: "ui-resizable-helper",
              stop: function(e, ui) {
                     var pl=$('#player iframe')[0];pl.src=pl.src;
              }
         });
     });
  </script>

   <script>
  $(function() {
    $( "#resizable" ).resizable();
     helper: "ui-resizable-helper"
  });
  </script>

</head>

<body>

<div id="dragvideo" class="drag">
<div id="player" class="resizableaspect">
<iframe width="100%" height="100%" src="http://cdn.livestream.com/embed/curios?layout=4&color=0x000000&autoPlay=true&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc&allowchat=true&height=385&width=640" style="border:0;outline:0" frameborder="0" scrolling="no" class="resizableaspect"></iframe>
</div><span id="videohandle" class="button handle">|||</span>
</div>

<div id="dragchat" class="drag">
<div id="chat" class="resizable">
<iframe width="100%" height="100%" scrolling="no" src="http://widget.mibbit.com/?settings=d80e31e826bb643c095282161f131216&server=irc.biolizard.net&channel=%23curios"></iframe>
</div>
<span id="chathandle" class="button handle" style="border-right:none;">|||</span>
</div>

<div id="dragcontrols" class="drag">
<div id="controls">
<span class="button"><a href="javascript:var pl=$('#player iframe')[0];pl.src=pl.src;">↺ Repair</a></span><span class="button"><a href="http://www.livestream.com/curios" target="_blank">View on livestream.com</a></span><span class="button"><a href="http://curios-channel.tumblr.com/ask" target="_blank">Make a request</a></span><span class="button"><a href="http://curios-channel.tumblr.com/submit" target="_blank">Submit a video</a></span><span class="button"><a href="http://curios-channel.tumblr.com/" target="_blank">Back to blog page</a></span>
</div>
<span id="controlshandle" class="button handle" style="border-right:none;">|||</span>
</div>

</body>
</html>