maingui.html

<html>
   <head>
      <title>SkyliveX 0.1.0</title>
      <script type="text/javascript" src="SkyliveX.js"></script>
      <style>
         #page {
            background-color: #FFFFFF;
            color: #000000;
            text-align: center;
            margin: 0 auto;
            overflow:hidden;
         }
         #top {
            height:40px;
            border: 1px solid #000000;
				width:auto;
				position: absolute;
				top: 8px;
				right: 8px;
				left: 8px;
         }  

         #left {
            width: 330px;
				position: absolute;
				top:48px;
				left: 8px;
				right: 8px;
				bottom: 8px;
				border: 1px solid #FF0000;
         }
         #livearea {
            border: 1px solid #00FF00;           
				position: relative;
         }

			#toolsarea {
				 border: 1px solid #0000FF;
				 position: absolute;
				 bottom: 0px;
				 right: 0px;
				 left: 0px;
				 top: 242px;
		   }
         #right {
			   position: absolute;
				top: 48px;
				left: 338px;
				right: 8px;
				bottom: 8px;
				border: 1px solid #FF0FF0;
         }
         #chatarea {
            overflow-y: auto;
				border: 1px solid #00FF00;
				position: absolute;
				bottom: 70px;
				top: 0px;
				right: 130px;
				left: 0px;
         }
         #chatlist {
            overflow-y: auto;
            width: 130px;
            position: absolute;
            border: 1px solid #00FF00;
            bottom: 70px;
            top: 0px;
            right: 0px;
         }
         #chatinput {
				position: absolute;
            height: 70px;
				bottom: 0px;
				right: 0px;
				left: 0px;
				border: 1px solid #0000FF;
         }

      </style>
   </head>
   <body>
      <div id="page">
         <div id="top">
         </div>
         <div id="left">
            <div id="livearea">
               <img src="http://live1.skylive.name/tele1/live640.jpg"></img>
            </div>
				<div id="toolsarea">
					TOOL
			   </div>
         </div>
         <div id="right">
            <div id="chatarea">
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>CHAT</p>
               <p>PIPPO</p>
            </div>
            <div id="chatlist">
               <p>user1</p>
               <p>user2</p>
            </div>
            <div id="chatinput">
               <p>INPUT</p>
            </div>
         </div>
      </div>
   </body>
</html>