!-- coded by weiman@ij / part of the text message coding is adapted from tessisamess -->

<title>phone</title>

<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

<style type="text/css">
/* ---- GENERAL ---- */
body {
	background: #f9f9f9 url();  
  overflow: hidden;
}

#container {
	width: 420px;
	height: 500;
	margin: 0 auto;
	margin-top: 30px;
	background: transparent;
}

#s-m-t-tooltip {
  max-width:200px;
  padding:3px 5px;
  margin:10px 0px 0px 10px;
  background-color: rgba(250, 250, 250, 0.8);
  font-family: montserrat, sans-serif;
  font-size:8pt;
  font-weight:light;
  letter-spacing:+1px;
  text-transform:uppercase;
  text-align: justify;
  color:#000;
  z-index:999999999999999999;
  -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1);
  -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);
}

::-webkit-scrollbar {
	width: 4px;
}

::-webkit-scrollbar-thumb {
	background-color: #0072ff;
}

html, a, a:hover {
  cursor:url(http://i.imgur.com/ONVDMqu.png), default;
}

#options {
  float: left;
  margin-top:150;
  height:550;
  width:130;
}

#telephone {
  float: right;
  height:550;
  overflow: hidden;
  width:262;
}

.icons {
  width:50;
  padding:5px;
}

.phone {
  background: url('http://i.imgur.com/sJ1HyO6.png') no-repeat;
  width: 262;
  height: 550;
  overflow: hidden;
}

.a, .b, .c, .d, .e, .f, .g, .h {
  width: 221;
  height: 377;
  display: none;
  overflow: hidden;
  background-color: #fff;
  margin: 95 0 0 180;
  position: fixed;
  z-index: 10;
}

/* ---- CALL ---- */
.callcontent {
  width: 217;
  height: 310;
  overflow: auto;
  margin: 0;
  padding:2px;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.callheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align: center;
  text-transform: none;
  border-bottom:1px solid #ccc;  
}

.callsender {
  padding: 5px;
  height:30;
}

.callfrom {
  padding-left:5;
  padding-right:5;
  font-size:12px;
  color: #000;
  float: left;
}

.callstats {
  padding-left:5;
  padding-right:5;
  padding-bottom:5;
  font-size:10px;
  color: #ccc;
  float: left;
}

.callinfo {
  float: right;
  margin-top:-15px;
}

.callbreak {
  margin-left: auto;
  margin-right: auto;
  height: 1px;
  width: 85%;
  background-color: #ececec;
}

.calltranscript {
  padding-top:10px;
}

.caller {
  background-color: #f7f7f7;
  padding: 5px;
  min-height: 25px;
  width: 207;
}

.callerpic {
  width: 25px;
  float: left;
  margin-right: 5px;
}

.callername {
  font-weight: bold;
  color: #348DC3;
  text-decoration: none;
}

.caller2 {
  background-color: #FFF;
  padding: 5px;
  min-height: 25px;
  width: 207;
}

.caller2pic {
  width: 25px;
  float: left;
  margin-right: 5px;
}

.caller2name {
  font-weight: bold;
  color: #348DC3;
  text-decoration: none;
}

.callbottom {
  height:36px;
  width:221px;
  background:#f7f7f7;
  padding-top:5px;
  border-top:1px solid #ccc;
  margin-left:-5;
  margin: 0;
}


/* ---- EMAIL ---- */
.emailcontent {
  width: 221;
  height: 377;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size: 12px;
  line-height: 14px;
  text-transform: none;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
}
.emailheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:normal;
  text-align:left;
  text-transform: none;
  border-bottom:1px solid #ccc;    
}

.emailsubject {
  background-color: #f7f7f7;
  width:179;
  margin-bottom:-5px;
  height:auto;
  padding:5px;
  font-family: helvetica, arial, sans serif;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  text-transform: none;
}

.emailbody {
  margin:3px;
  background-color: #FFF;
  padding:3px;
  height:auto;
}

.emailsender {
  padding-top:3px;
  height:32;
  padding-bottom:7px;
}

.emailsend{
  padding-left:5px;
}

.emailfrom {
  font-size:12px;
  line-height:13px;
  font-weight: bold;
  color:#000;
}

.emailto {
  font-size:11px;
  line-height:12px;
  font-weight:normal;
  color: #999;
}

.emailreply {
  float:right;
  margin-top:-25px;
}

.emailwords {
  margin:0;
  height: auto;
  margin-top:5px;
  padding:3px;
  margin-bottom:5px;
}

/* ---- VOICEMAIL ---- */
.vmcontent {
  width: 217;
  height: 310;
  overflow: auto;
  margin: 0;
  padding:2px;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.vmheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align: center;
  text-transform: none;
  border-bottom:1px solid #ccc;  
}

.vmsender {
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 5px;
  height:30;
}

.vmfrom {
  padding-left:5;
  padding-right:5;
  font-size:12px;
  color: #000;
  float: left;
}

.vmstats {
  padding-left:5;
  padding-right:5;
  padding-bottom:5;
  font-size:10px;
  color: #ccc;
  float: left;
}

.vminfo {
  float: right;
  margin-top:-15px;
}

.vmplay {
  padding:10px;
  height:15;
  margin-top:0px;
  font-size:11px;
  margin-bottom:10px;
}

.vmbuttons {
  padding-left:5;
  padding-right:5;
  font-size:12px;
  font-weight: none;
  text-align:center;
  margin-bottom:10px;  
}

.vmbreak {
  margin-left: auto;
  margin-right: auto;
  height: 1px;
  width: 85%;
  background-color: #ececec;
}

.vmtranscript {
  padding:5px;
  padding-top:10px;
}

.vmbottom {
  height:36px;
  width:221px;
  background:#f7f7f7;
  padding-top:5px;
  border-top:1px solid #ccc;
  margin-left:-5;
  margin: 0;
}

/* ---- CALENDAR ---- */
.calheader {
  margin: 0;
  height: 75;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:none;
  text-align:center;
  text-transform: none;
  border-bottom:1px solid #ccc;
  color: #fd3d32;
}

.calcontent {
  width: 221;
  padding:0;
  height: 260;
  overflow: auto;
  margin: 0;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.caldays {
  width:217;
  height:40;
  overflow:none;
  padding-top:4px;
  padding-bottom:4px;
}

.calday {
  font-family: helvetica, arial, sans serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  text-align:center;
}

.caldate {
  font-family: helvetica, arial, sans serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  text-align:center;
}

.caldated {
  text-align: center;
  font-family: helvetica, arial, sans serif;  
  font-size: 14px;
  padding-top:5px;
  padding-bottom:5px;
}

.calleft {
  float: left;
  width: 40px;
  padding-right:7px;
  font-family: helvetica, arial, sans serif;
  font-size:10px;
  text-transform: uppercase;
  text-align: right;
}

.calright {
  float:right;
  width:160px;
}

.calhour {
  min-height:30px;
  padding: 5px;
  float: right;
}

.calapt {
  background-color: #feebcb;
  border-left: 3px solid #cb9348;
  display: inline-block;
  padding: 3px;
  width: 95%;
  font-weight: bold;
}

.calbottom {
  height:20px;
  width:212px;
  background:#f7f7f7;
  border-top:1px solid #ccc;
  font-family: helvetica, arial, sans serif;
  font-size: 12px;
  color: #fd3d32;
  line-height: 12px;
  text-align: center;
  margin: 0;
  padding:5;
  padding-top:10;
}


/* ---- CAMERA ROLL ---- */
.photocontent {
  width: 217;
  height: 305;
  overflow: auto;
  margin: 0;
  padding:2px;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.photoheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  text-transform: none;
  border-bottom:1px solid #ccc;
}

.photo {
  width:65px;
  padding:1px;
}

.photobottom {
  height:40px;
  width:221px;
  background:#f7f7f7;
  padding-top:1px;
  border-top:1px solid #ccc;
  padding-top:5px;
  margin: 0;
}

/* ---- TEXT ---- */
.textcontent {
  width: 217;
  height: 315;
  overflow: auto;
  margin: 0;
  padding:2px;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.textfrom {
  margin:10px 20px 10px 10px;
  width:80%;
  padding-left:8px;
  background:url('http://i.imgur.com/zUBnlmE.png')top left no-repeat;
}

.textfrom2 {
  background:#eee;
  padding:5px;
  -webkit-border-radius:15px;
  border-radius:15px;
}

.textto {
  margin:10px 10px 10px 30px;
  width:80%;
  padding-right:8px;
  background:url('http://i.imgur.com/389QXGV.png')top right no-repeat;
}

.textto2 {
  background:#C8D4EA;
  padding:5px;
  -webkit-border-radius:15px;
  border-radius:15px;
}


.textheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  text-transform: none;
  border-bottom:1px solid #ccc;  
}

.textbottom {
  height:35px;
  width:221px;
  background:#f7f7f7;
  padding-top:5px;
  border-top:1px solid #ccc;
  margin: 0;
}

.textcompose {
  font-family: helvetica,arial,sans-serif;
  font-size:12px;
  line-height:20px;
  width:160px;
  height:25px;
  margin-left:5px;
  padding-left:5px;
  border:none;
  -webkit-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0 0 3px 1px #bbb;
  box-shadow:inset 0 0 3px 1px #bbb;
}

.textbutton {
  float:right;
  width:45px;
  background:#348DC3;
  text-align:center;
  font-size: 11px;
  margin-right:5px;
  height:25px;
  line-height:25px;
  -webkit-border-radius:5px;
  border-radius:5px;
  font-weight:bold;
  letter-spacing:1px;
  color:#fff;
  text-shadow:1px 1px 0 #444;
  font-family: helvetica, arial, sans serif;
}


/* ---- NOTES ---- */
.notesheader {
  margin: 0;
  height: 15;
  width: 215;
  padding:3px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  text-transform: none;
  color: #e1c400;
}

.notescontent {
  width: 217;
  height: 327;
  overflow: auto;
  margin: 0;
  padding:2px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
  color: #000;
}

.notesdate {
  text-align:center;
  font-size:11px;
  line-height:15px;
  margin: 0;
  padding-top:5px;
  padding-bottom:5px;
  height:15px;
  width: 217;
  font-family: helvetica, arial, sans serif;
  width:217;
  background-color: #f7f7f7;  
  color: #000;
}

/* ---- MUSIC ---- */
.musicheader {
  margin: 0;
  height: 17;
  width: 213;
  padding:5px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  text-transform: none;
  border-bottom:1px solid #ccc;
}

.musicedit {
  margin: 0;
  height: 17;
  width: 213;
  padding:5px;
  background-color: #f7f7f7;
  font-family: helvetica, arial, sans serif;
  font-size:11px;
  font-weight: none;
  text-align:center;
  text-transform: none;
  color: #cccccc;
  border-bottom:1px solid #ccc;
}

.musiccontent {
  width: 221;
  padding:0;
  height: 280;
  overflow: auto;
  margin: 0;
  background-color: #fff;
  font-family: helvetica, arial, sans serif;
  font-size:12px;
  line-height:14px;
  text-transform:none;
  text-align:left;
}

.musicsong {
  min-height:30px;
  padding: 3px;
  display: inline block;
  border-bottom:1px solid #ccc;
}

.musicsong a {
  text-decoration: none;
  color: #fd3d32;
}

.musicartist {
  font-size:10px;
  color: #000;
}

.musicalbum {
  font-size: 10px;
  color: #cccccc;
}


.musicbottom {
  height:36px;
  width:221px;
  background: linear-gradient(to right, #e9e7ea, #eeeeee, #f4f4f4, #f7f7f7, #f6f4f5);
  padding-top:3px;
  border-top:1px solid #ccc;
  margin-left:-5;
  margin: 0;
}


</style>

<html>
<head>

<!--- THIS IS THE SCRIPT FOR A FANCY HOVER ---->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
    <script>
    (function($){
    $(document).ready(function(){
    $("a[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:90,
    tip_fade_speed:600,
    attribute:"title"
    });
    });
    })(jQuery);
    </script>

<!--- THIS IS THE SCRIPT FOR YOUR BOXES APPEARING AND HIDING; MAKE SURE TO EDIT THIS ACCORDING TO HOW MANY LINKS/BOXES YOU NEED --->
<script src="http://code.jquery.com/jquery-1.10.0.min.js">
</script>
<script>
$(document).ready(function(){
  $(".one").click(function(){
    $(".a").toggle();
    $(".b,.c,.d,.e,.f,.g,.h").hide();
  });
  $(".two").click(function(){
    $(".b").toggle();
    $(".a,.c,.d,.e,.f,.g,.h").hide();
  });
  $(".three").click(function(){
    $(".c").toggle();
    $(".d,.e,.f,.g,.h,.a,.b").hide();
  });
  $(".four").click(function(){
    $(".d").toggle();
    $(".e,.f,.g,.h,.a,.b,.c").hide();
  }); 
  $(".five").click(function(){
    $(".e").toggle();
    $(".f,.g,.h,.a,.b,.c,.d").hide();
  });   
  $(".six").click(function(){
    $(".f").toggle();
    $(".e,.d,.g,.h,.a,.b,.c").hide();
  }); 
  $(".seven").click(function(){
    $(".g").toggle();
    $(".e,.d,.f,.h,.a,.b,.c").hide();
  }); 
  $(".eight").click(function(){
    $(".h").toggle();
    $(".e,.f,.g,.d,.a,.b,.c").hide();
  });    
});
</script>

</head>

<body>
<div id="container">
  <div id="options">
    <a href="#" class="one" title="call from XXXXX at mon XX, 20XX at XX:XX pm"><img src="http://i.imgur.com/dBi5hvt.png" class="icons"></a>
    <a href="#" class="two" title="email from XXXXX"><img src="http://i.imgur.com/f6nAsef.png" class="icons"></a><BR>
    <a href="#" class="three" title="voicemail from XXXXX at mon xx, XXXX at XX:XXpm"><img src="http://i.imgur.com/MEldSu6.png" class="icons"></a>
    <a href="#" class="four" title="calendar"><img src="http://i.imgur.com/GZ66lZ8.png" class="icons"></a><BR>
    <a href="#" class="five" title="camera roll"><img src="http://i.imgur.com/sCVWRsV.png" class="icons"></a>
    <a href="#" class="six" title="text from XXXXX"><img src="http://i.imgur.com/6y9dtEc.png" class="icons"></a><BR>
    <a href="#" class="seven" title="notes"><img src="http://i.imgur.com/1o0BNgb.png" class="icons"></a>
    <a href="#" class="eight" title="music"><img src="http://i.imgur.com/2crjIXR.png" class="icons"></a>
  </div>
  <div id="telephone">
    <div class="phone"></div>
  </div>
  
  <div class="a">
    <div class="callheader">
      Recent Calls
      <div style="float:right;"><font style="color:#0072ff; font-weight:normal;">Edit</font>
      </div>
    </div>
    <div class="callcontent">
      <div class="callsender">
        <div class="callfrom">
          Caller Name
        </div>
        <div class="callstats">
          Month XX, 2015 at X:XX PM
        </div>
        <div class="callinfo">
          <img src="http://i.imgur.com/hv2AQuV.png" width=17>
        </div>
      </div>
      <div class="callbreak"></div>
      <div class="calltranscript">
        <div class="caller">
          <img src="http://imgur.com/orHgiO9.jpg" class="callerpic"><font class="callername">Name</font> 
          This is what this person said
        </div>
        <div class="caller2">
          <img src="http://imgur.com/orHgiO9.jpg" class="caller2pic"><font class="caller2name">Name</font> 
          This is what this person said
        </div>        
      </div>
    </div>
    <div class="callbottom">
      <center><img src="http://i.imgur.com/1vsXIR0.png" width=190></center>
    </div>
  </div>


  <div class="b">
    <div class="emailheader">
      <div style="float:left; margin-right:5px;">
        <img src="http://i.imgur.com/q9OspB1.png">
      </div>
      Inbox
      <div style="float:right; margin-right:3px;">
        <img src="http://i.imgur.com/TXUscXl.png">
      </div>
    </div>
    <div class="emailcontent">
      <div class="emailsubject">Subject</div>
      <div class="emailbody">
        <div class="emailsender">
          <img src="http://imgur.com/orHgiO9.jpg" width=30 align="left">
          <div class="emailsend">
			  	  <div class="emailfrom">
				      Sender Name
				    </div>
				    <div class="emailto">
				      to me
            </div>
            <div class="emailreply">
              <img src="http://i.imgur.com/Bv9ClTp.png">
            </div>
			  	</div>   
        </div>
        <div class="emailwords">
          This is an email from this person who sent this to you.
        </div>
      </div>
    </div>
  </div>


  <div class="c">
    <div class="vmheader">
      <div style="float:left; margin-right:-5px;">
        <font style="color:#0072ff; font-weight:normal;">Greeting</font>
      </div>
      Voicemail
      <div style="float:right;"><font style="color:#0072ff; font-weight:normal;">Edit</font>
      </div>
    </div>
    <div class="vmcontent">
      <div class="vmsender">
        <div class="vmfrom">
          Caller Name
        </div>
        <div class="vmstats">
          Month XX, 2015 at X:XX PM
        </div>
        <div class="vminfo">
          <img src="http://i.imgur.com/hv2AQuV.png" width=17>
        </div>
      </div>
      <div class="vmplay">
        <img src="http://i.imgur.com/nFhhJwG.png" width=15 style="padding-right:3px;">0:00<img src="http://i.imgur.com/9P8nkPO.png" width=125 style="padding-left:3px; padding-right:3px;">0:XX
      </div>
      <div class="vmbuttons">
        <div style="float:left;"><font style="color:#0072ff;">Speaker</font></div><font style="color:#0072ff;">Call Back</font><div style="float:right;"><font style="color:#a64651;">Delete</div></font>
      </div>
      <div class="vmbreak"></div>
      <div class="vmtranscript">
        Transcript of voicemail goes here. 
      </div>
    </div>
    <div class="vmbottom">
      <center><img src="http://i.imgur.com/LAjLWXI.png" width=190></center>
    </div>
  </div>
  
  <div class="d">
    <div class="calheader">
      <div style="float:left; margin-right:-5px;">
        <img src="http://i.imgur.com/AW2S7Bp.png" width=12 align=left>Month</font>
      </div>
      <div style="float:right;">
        <img src="http://i.imgur.com/A1zIr9Q.png" height=17>
      </div>
      <div class="caldays">
        <center>
        <table width=100% cellspacing=0 cellpadding=0>
          <tr height=10>
            <td width=30 valign=middle><font class="calday"><center><font color="#999;">S</font>
            <td width=30 valign=middle><font class="calday"><center>M
            <td width=30 valign=middle><font class="calday"><center>T
            <td width=30 valign=middle><font class="calday"><center>W
            <td width=30 valign=middle><font class="calday"><center>T
            <td width=30 valign=middle><font class="calday"><center>F
            <td width=30 valign=middle><font class="calday"><center><font color="#999;">S</font>
          </tr>
          <tr height=20>
            <td width=30 valign=middle><font class="caldate"><font color="#999;"><center>#</center></font>
            <td width=30 valign=middle><font class="caldate"><center>#
            <td width=30 valign=middle><font class="caldate"><font color="#fd3d32" class="TODAY"><center>#
            <td width=30 valign=middle><font class="caldate"><center>#
            <td width=30 valign=middle><font class="caldate"><center>#
            <td width=30 valign=middle><font class="caldate"><center>#
            <td width=30 valign=middle><font class="caldate"><center><font color="#999;">#</font>
          </tr>
        </table>
        <div class="caldated">
          Day Month XX, 20XX
        </div>
        </center>
      </div>
    </div>
    <div class="calcontent">
      <div class="calhour">
        <div class="calleft"><font class="caltime">12 AM</font></div>
        <div class="calright"><hr></div>
        <div class="calright"><div class="calapt">Some event here</div></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">1 AM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">2 AM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">3 AM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">4 AM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">5 AM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">6 AM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">7 AM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">8 AM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">9 AM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">10 AM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">11 AM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">12 PM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">1 PM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">2 PM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">3 PM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">4 PM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">5 PM</font></div>
        <div class="calright"><hr></div>
      </div>      

      <div class="calhour">
        <div class="calleft"><font class="caltime">6 PM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">7 PM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">8 PM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">9 PM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">10 PM</font></div>
        <div class="calright"><hr></div>
      </div>

      <div class="calhour">
        <div class="calleft"><font class="caltime">11 PM</font></div>
        <div class="calright"><hr></div>
      </div>
      
      <div class="calhour">
        <div class="calleft"><font class="caltime">12 AM</font></div>
        <div class="calright"><hr></div>
      </div>
    </div>
    <div class="calbottom">
      <div style="float:left;">
        Today
      </div>
      Calendars
      <div style="float:right;">
        Inbox (X)
      </div>
    </div>
  </div>
  
  <div class="e">
    <div class="photoheader">
      <div style="float:left; margin-right:-5px;">
        <img src="http://i.imgur.com/nj9rM4t.png" width=10 align=left><font style="color:#0072ff; font-weight:normal;">Albums</font>
      </div>
      Camera Roll
      <div style="float:right;"><font style="color:#0072ff; font-weight:normal;">Select</font>
      </div>
    </div> 
    <div class="photocontent">
      <center>
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      <img src="http://imgur.com/orHgiO9.jpg" class="photo">
      </center>
    </div>
    <div class="photobottom">
      <center>
      <img src="http://i.imgur.com/1hsREIP.png" width=170>
      </center>
    </div>
  </div>
  
  <div class="f">
      <div class="textheader">
        <div style="float:left; margin-right:-5px;">
          <img src="http://i.imgur.com/nj9rM4t.png" width=10 align=left><font style="color:#0072ff; font-weight:normal;">Messages</font>
        </div>
        Name
        <div style="float:right;"><font style="color:#0072ff; font-weight:normal;">Details</font>
        </div>
      </div>
      <div class="textcontent">
        
        <div class="textfrom"><div class="textfrom2">
          Text from this person
        </div></div>

        <div class="textto"><div class="textto2">
          Text to someone
        </div></div>
      </div>
      <div class="textbottom">
        <textarea placeholder="Compose Message..." class="textcompose"></textarea><div class="textbutton">Send</div>
      </div>  
  </div>
  
  <div class="g">
    <div class="notesheader">
        <div style="float:left; margin-right:-5px;">
          <img src="http://i.imgur.com/LJ6jcyU.png" width=10 align=left>Back
        </div>
        <div style="float:right;">
          Done
        </div>
    </div>
    <div class="notesdate">
      Month XX, 20XX, XX:XX AM/PM
    </div>
    <div class="notescontent">
      This is a note.
    </div>
  </div>
  
  <div class="h">
    <div class="musicheader">
      <div style="float:left; margin-right:-5px;">
        <img src="http://i.imgur.com/AW2S7Bp.png" width=12 align=left><font style="color: #fd3d32; font-weight:normal;">Playlists</font>
      </div>
      Playlist Name
    </div>
    <div class="musicedit">
      <div style="float:left;">
        Edit
      </div>
      Clear
      <div style="float:right;">
        <font color=#fd3d32>Delete</font>
      </div>
    </div>
    <div class="musiccontent">
    
      <div class="musicsong">
        <img src="http://imgur.com/orHgiO9.jpg" width=30 align=left>
        <B><a href="">Song</a></b><BR>
        <font class="musicartist">Singer</font> <font class="musicalbum">Album</font>
      </div>

      <div class="musicsong">
        <img src="http://imgur.com/orHgiO9.jpg" width=30 align=left>
        <B><a href="">Song</a></b><BR>
        <font class="musicartist">Singer</font> <font class="musicalbum">Album</font>
      </div>

      
    </div>
    <div class="musicbottom">
      <center><img src="http://i.imgur.com/ejyH8zB.png" width=200></center>
    </div>
  </div>
  

</div>
</body>
</html>