Layout practice - Like a GMail

index.html

<aside>
	  <h1 class='title'>Gmail</h1>
	  <button class='button-silver  mail-compose'>Compose</button>

	  <div class='tabs'>
		<input type='radio' name='tabs' id='chat-toggle' checked>
		<label for='chat-toggle'>
		  <button class='button-large button-grey'><i class="fa fa-comment"></i></button>
		</label>
		<input type='radio' name='tabs' id='gadgets-toggle'>
		<label for='gadgets-toggle'>
		  <button class='button-large button-grey'><i class="fa fa-ellipsis-h"></i></button>
		</label>
	  </div>
	  
	  <div class='tab-content'>
		  <div class='chatbox'>
        <div class='seperator'></div>
		    <div class='status-bar'>    
		      <button class='button-grey button-large right'><i class="fa fa-video-camera"></i></button>
		      <button class='button-grey button-large left'><i class="fa fa-phone"></i></button>
		      
			  <div class="status-change">
				  <button class="button-grey button-large">
					<div class='right chat-status'>
						<span class="available"></span>
						<i class="fa fa-sort-asc"></i>
					</div>	           
				  </button>
				  <img class='profile-thumb'  src='http://gravatar.com/avatar/798a4f92680d0678f1034006f0af7952'> 
			  </div>     
		    </div>
		    <input class='input-small' type='text' placeholder='Search people'>
		    <ul class='contact-list'>
		      <li><span class='available'></span>Amy Lee</li>
		      <li><span class='available'></span>Coco</li>
		      <li><span class='available'></span>Jessie Huang</li>
		      <li><span class='busy'></span>Simon</li>
		      <li><span class='busy'></span>James Tong</li>
		      <li><span class='busy'></span>Eric Cheng</li>
		      <li><span class='busy'></span>Mandy Lau</li>
		      <li><span class='offline'></span>David Chak</li>
		      <li><span class='offline'></span>Lucy Lu</li>
		      <li><span class='offline'></span>Kevin Xu</li>
		    </ul>
		  </div>
		  <div class='gadgetbox hide'>
        <div class='seperator'></div>
		  	Google Calendar
		  	<button class='right button-grey'><i class="fa fa-plus-square-o"></i></button>
		  </div>
	  </div>
	  <ul class='mail-categories'>
	    <li class='unread'>Inbox (77)</li>
	    <li>Starred</li>
	    <li>Important</li>
	    <li>Sent Mail</li>
	    <li>Drafts (2)</li>
	    <li>All Mail</li>
	    <li class='unread'>Spam (18)</li>
	    <li class='label orange'>Design</li>
	    <li class='unread label green'>Front End (41)</li>
	    <li class='unread label blue'>Job (23)</li>
	    <li class='label pink'>Family</li>
	  </ul>
	</aside>
	<main>
	  <div class='mail-search'>
	    <button class='button-blue button-large right'><i class="fa fa-search"></i></button>
	    <button class='more right'><i class="fa fa-sort-asc"></i></button>
	    <div class='input-box'>
	      <input class='input-medium' type='text'>

		  <form class='search-pref popup-window hide'>
		    <button class='right button-small button-silver button-exit'><i class="fa fa-times"></i></button>
		    <label>Search </label>
		      <span class='options-wrapper'>
		        <button class="button-options button-silver button-large">
		          <div class='more'><i class="fa fa-sort"></i></div>
		          <span> All Mail </span>
		        </button>
		        <ul class='dropdown-menu hide'>
		          <li>All Mail</li>
		          <li>Inbox</li>
		          <li>Stared</li>
		          <li>Sent Mail</li>
		          <li>Drafts</li>
		        </ul>
		      </span>
		    <br/>
		    <label>From</label><input class='input-small' type='text'>
		    <label>To</label><input class='input-small' type='text'>
		    <label>Subject</label><input class='input-small' type='text'>
		    <label>Has the words</label><input class='input-small' type='text'>
		    <label>Doesn't have</label><input class='input-small' type='text'>
		    <input type='checkbox'><label> Has attachment</label>  <br/>
		    <input type='checkbox'><label> Don't include chats</label>
		    <br/>

		    <label>Size</label>
		      <span class='options-wrapper'>
		        <button class="button-options button-silver button-large">
		          <div class='more'><i class="fa fa-sort"></i></div>
		          <span> greater than </span>
		        </button>
		        <ul class='dropdown-menu hide'>
		          <li>greater than</li>
		          <li>less than</li>
		        </ul>
		      </span>

		      <input class='input-small input-inline' type='text'>
		      <span class='options-wrapper'>
		        <button class="button-options button-silver button-large">
		          <div class='more'><i class="fa fa-sort"></i></div>
		          <span> MB </span>
		        </button>
		        <ul class='dropdown-menu hide'>
		          <li>MB</li>
		          <li>KB</li>
		          <li>Bytes</li>
		        </ul>
		      </span>
		    <br/>
		    <br/>
		    <label>Date within</label>
		    <span class='options-wrapper'>
		      <button class="button-options button-silver button-large">
		        <div class='more'><i class="fa fa-sort"></i></div>
		        <span> 1 day </span>
		      </button>
		      <ul class='dropdown-menu hide'>
		          <li> 1 day </li>
		          <li> 3 days </li>
		          <li> 1 week </li>
		          <li> 2 weeks </li>
		          <li> 1 month </li>
		          <li> 2 months </li>
		          <li> 6 months </li>
		          <li> 1 year </li>
		      </ul>
		    </span>
		    <label> of </label><input class='input-small input-inline' type='text'>

		    <br/><br/>
		    <p class='comment right'>Examples: Friday, today, Mar 26, 3/26/04</p><br/>
		    <button class='button-blue button-large'><i class="fa fa-search"></i></button>
		  </form>
	    </div>
	  </div>
	 

	  <ul class='mail-menu'>
	  	<li>
	  		<div class='options-wrapper'>
		  		<button class="button-checkAll button-options button-large button-grey">
			        <div class='more'><i class="fa fa-sort-asc"></i></div>
			        <input type='checkbox' class='mail-check' id='chkAll'>
			        <label for='chkAll'></label>		      
			    </button>
			    <ul class='dropdown-menu drop-bottom hide'>
			        <li>All</li>
			        <li>None</li>
			        <li>Read</li>
			        <li>Unread</li>
			        <li>Starred</li>
			        <li>Unstarred</li>
			    </ul>
			</div>
		</li>
	    <li>
	    	<button class='button-grey button-large'><i class="fa fa-refresh"></i></button>
	    </li>
	    <li>
		    <div class='options-wrapper'>
		  		<button class="button-options button-large button-grey">
			        <div class='more'><i class="fa fa-sort-asc"></i></div>
		  			<p>More</p>	      
			    </button>
			    <ul class='dropdown-menu drop-bottom hide'>
			        <li>Mark all as read</li>
			        <li class='splitLine'></li>
			        <li class='disable'>Select messages to <br/> see more actions</li>
			    </ul>
			</div>
		</li>
	  </ul>

	  <div class='mail-box'>
		  <table>
		    <tr>
		      <td class='blank-cell'>  </td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk1'>
		        <label for='chk1'></label>
		        <input type='checkbox' class='mail-star' id='star1'>
		        <label for='star1'></label>
		        <input type='checkbox' class='mail-important' id='im1'>
		        <label for='im1'></label>
		      </td>
		      <td class='mail-sender'>Sit salutatus</td>
		      <td class='mail-title'> libris repudiandae</td>
		      <td class='mail-time'>02:33 pm</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk2'>
		        <label for='chk2'></label>
		        <input type='checkbox' class='mail-star' id='star2'>
		        <label for='star2'></label>
		        <input type='checkbox' class='mail-important' id='im2'>
		        <label for='im2'></label>
		      </td>
		      <td class='mail-sender'>Pinterest Weekly</td>
		      <td class='mail-title'>Fresh Pins for you!</td>
		      <td class='mail-time'>11:09 am</td>
		    </tr>
		    <tr class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk3'>
		        <label for='chk3'></label>
		        <input type='checkbox' class='mail-star' id='star3'>
		        <label for='star3'></label>
		        <input type='checkbox' class='mail-important' id='im3'>
		        <label for='im3'></label>
		      </td>
		      <td class='mail-sender'>Amy Lee</td>
		      <td class='mail-title'>mea praesent vituperata</td>
		      <td class='mail-time'>10:27 am</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk4'>
		        <label for='chk4'></label>
		        <input type='checkbox' class='mail-star' id='star4'>
		        <label for='star4'></label>
		        <input type='checkbox' class='mail-important' id='im4'>
		        <label for='im4'></label>
		      </td>
		      <td class='mail-sender'>June, me(2)</td>
		      <td class='mail-title'>Blood Test</td>
		      <td class='mail-time'>7:30 am</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk5'>
		        <label for='chk5'></label>
		        <input type='checkbox' class='mail-star' id='star5'>
		        <label for='star5'></label>
		        <input type='checkbox' class='mail-important' id='im5'>
		        <label for='im5'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>Your Order</td>
		      <td class='mail-time'>7:02 am</td>
		    </tr>
		    <tr  class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk6'>
		        <label for='chk6'></label>
		        <input type='checkbox' class='mail-star' id='star6'>
		        <label for='star6'></label>
		        <input type='checkbox' class='mail-important' id='im6'>
		        <label for='im6'></label>
		      </td>
		      <td class='mail-sender'>Agam </td>
		      <td class='mail-title'> copiosae quo in, te vix eligendi</td>
		      <td class='mail-time'>5:28 am</td>
		    </tr>
		    <tr class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk7'>
		        <label for='chk7'></label>
		        <input type='checkbox' class='mail-star' id='star7'>
		        <label for='star7'></label>
		        <input type='checkbox' class='mail-important' id='im7'>
		        <label for='im7'></label>
		      </td>
		      <td class='mail-sender'>Mei eu</td>
		      <td class='mail-title'>Issue #101</td>
		      <td class='mail-time'>Apr 18</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk8'>
		        <label for='chk8'></label>
		        <input type='checkbox' class='mail-star' id='star8'>
		        <label for='star8'></label>
		        <input type='checkbox' class='mail-important' id='im8'>
		        <label for='im8'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>Your Order</td>
		      <td class='mail-time'>Apr 17</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk9'>
		        <label for='chk9'></label>
		        <input type='checkbox' class='mail-star' id='star9'>
		        <label for='star9'></label>
		        <input type='checkbox' class='mail-important' id='im9'>
		        <label for='im9'></label>
		      </td>
		      <td class='mail-sender'>HTML5 Weekly</td>
		      <td class='mail-title'>This Week's HTML5 and Browser Technology News</td>
		      <td class='mail-time'>Apr 17</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk10'>
		        <label for='chk10'></label>
		        <input type='checkbox' class='mail-star' id='star10'>
		        <label for='star10'></label>
		        <input type='checkbox' class='mail-important' id='im10'>
		        <label for='im10'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>ea has ludus audiam</td>
		      <td class='mail-time'>Apr 17</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk11'>
		        <label for='chk11'></label>
		        <input type='checkbox' class='mail-star' id='star11'>
		        <label for='star11'></label>
		        <input type='checkbox' class='mail-important' id='im11'>
		        <label for='im11'></label>
		      </td>
		      <td class='mail-sender'>ne nam</td>
		      <td class='mail-title'>Qui tritani accumsan!</td>
		      <td class='mail-time'>Apr 17</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk12'>
		        <label for='chk12'></label>
		        <input type='checkbox' class='mail-star' id='star12'>
		        <label for='star12'></label>
		        <input type='checkbox' class='mail-important' id='im12'>
		        <label for='im12'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>mea laoreet maluisse</td>
		      <td class='mail-time'>Apr 15</td>
		    </tr>
		    <tr class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk13'>
		        <label for='chk13'></label>
		        <input type='checkbox' class='mail-star' id='star13'>
		        <label for='star13'></label>
		        <input type='checkbox' class='mail-important' id='im13'>
		        <label for='im13'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>ferri ridens mei ad</td>
		      <td class='mail-time'>Apr 14</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk14'>
		        <label for='chk14'></label>
		        <input type='checkbox' class='mail-star' id='star14'>
		        <label for='star14'></label>
		        <input type='checkbox' class='mail-important' id='im14'>
		        <label for='im14'></label>
		      </td>
		      <td class='mail-sender'>eu agam</td>
		      <td class='mail-title'>modus id nam</td>
		      <td class='mail-time'>Apr 14</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk15'>
		        <label for='chk15'></label>
		        <input type='checkbox' class='mail-star' id='star15'>
		        <label for='star15'></label>
		        <input type='checkbox' class='mail-important' id='im15'>
		        <label for='im15'></label>
		      </td>
		      <td class='mail-sender'>fierent</td>
		      <td class='mail-title'>Lorem ipsum dolor</td>
		      <td class='mail-time'>Apr 12</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk16'>
		        <label for='chk16'></label>
		        <input type='checkbox' class='mail-star' id='star16'>
		        <label for='star16'></label>
		        <input type='checkbox' class='mail-important' id='im16'>
		        <label for='im16'></label>
		      </td>
		      <td class='mail-sender'>Agam </td>
		      <td class='mail-title'>labitur accusam officiis</td>
		      <td class='mail-time'>Apr 10</td>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk17'>
		        <label for='chk17'></label>
		        <input type='checkbox' class='mail-star' id='star17'>
		        <label for='star17'></label>
		        <input type='checkbox' class='mail-important' id='im17'>
		        <label for='im17'></label>
		      </td>
		      <td class='mail-sender'>sit amet</td>
		      <td class='mail-title'>Ut alia viris</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk18'>
		        <label for='chk18'></label>
		        <input type='checkbox' class='mail-star' id='star18'>
		        <label for='star18'></label>
		        <input type='checkbox' class='mail-important' id='im18'>
		        <label for='im18'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>copiosae quo in, te vix eligendi</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk19'>
		        <label for='chk19'></label>
		        <input type='checkbox' class='mail-star' id='star19'>
		        <label for='star19'></label>
		        <input type='checkbox' class='mail-important' id='im19'>
		        <label for='im19'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>complectitur et vi</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk20'>
		        <label for='chk20'></label>
		        <input type='checkbox' class='mail-star' id='star20'>
		        <label for='star20'></label>
		        <input type='checkbox' class='mail-important' id='im20'>
		        <label for='im20'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>dolorem iudicabit democritum?</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk21'>
		        <label for='chk21'></label>
		        <input type='checkbox' class='mail-star' id='star21'>
		        <label for='star21'></label>
		        <input type='checkbox' class='mail-important' id='im21'>
		        <label for='im21'></label>
		      </td>
		      <td class='mail-sender'>detracto in me</td>
		      <td class='mail-title'>praesent eu, liber dicant?</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk22'>
		        <label for='chk22'></label>
		        <input type='checkbox' class='mail-star' id='star22'>
		        <label for='star22'></label>
		        <input type='checkbox' class='mail-important' id='im22'>
		        <label for='im22'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>Et scaevola phaedrum gloriatur</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk23'>
		        <label for='chk23'></label>
		        <input type='checkbox' class='mail-star' id='star23'>
		        <label for='star23'></label>
		        <input type='checkbox' class='mail-important' id='im23'>
		        <label for='im23'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>Do you know XXX, XXX or XXX?</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk24'>
		        <label for='chk24'></label>
		        <input type='checkbox' class='mail-star' id='star24'>
		        <label for='star24'></label>
		        <input type='checkbox' class='mail-important' id='im24'>
		        <label for='im24'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>Ullum ludus reformidans</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk25'>
		        <label for='chk25'></label>
		        <input type='checkbox' class='mail-star' id='star25'>
		        <label for='star25'></label>
		        <input type='checkbox' class='mail-important' id='im25'>
		        <label for='im25'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>sensibus temporibus</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr class='unread'>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk26'>
		        <label for='chk26'></label>
		        <input type='checkbox' class='mail-star' id='star26'>
		        <label for='star26'></label>
		        <input type='checkbox' class='mail-important' id='im26'>
		        <label for='im26'></label>
		      </td>
		      <td class='mail-sender'>doctus ne</td>
		      <td class='mail-title'>mel te quod</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk27'>
		        <label for='chk27'></label>
		        <input type='checkbox' class='mail-star' id='star27'>
		        <label for='star27'></label>
		        <input type='checkbox' class='mail-important' id='im27'>
		        <label for='im27'></label>
		      </td>
		      <td class='mail-sender'>salutandi </td>
		      <td class='mail-title'>Duo habeo congue</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		    <tr>
		      <td class='blank-cell'></td>
		      <td class='mail-labels'>
		        <input type='checkbox' class='mail-check' id='chk28'>
		        <label for='chk28'></label>
		        <input type='checkbox' class='mail-star' id='star28'>
		        <label for='star28'></label>
		        <input type='checkbox' class='mail-important' id='im28'>
		        <label for='im28'></label>
		      </td>
		      <td class='mail-sender'>omittantur</td>
		      <td class='mail-title'>Quidam expetenda in ius</td>
		      <td class='mail-time'>Apr 10</td>
		    </tr>
		  </table>
		  <br><br><br><br><br><br>
	  </div>
	</main>
	<div class='overlay hide'></div>
	<div class='bottom-panel'></div>

  <ul class='dropdown-menu status-menu hide'>
              <li>Try the new Hangouts</li>
            <li class='splitLine'></li>
              <li><span class='available'></span>Available</li>
              <li><span class='busy'></span>Busy</li>
              <li><span class='offline'></span>Invisible</li>
              <li><span class='offline'></span>Sign Out</li>
            <li class='splitLine'></li>
             <li class='subtitle'>Show in chat list:</li>
               <li>Most popular</li>
               <li>All contacts</li>   
            <li class='splitLine'></li>     
               <li>Add Contact</li>
              <li>Change picture</li>
              <li>Chat settings</li>         
            </ul>

	<div class='profile-detail popup-window hide'>
	    <img class='profile-img' src='http://gravatar.com/avatar/798a4f92680d0678f1034006f0af7952'>
	    <div class='content'>
	      <a href='#' class='user-name'>Y--p--Y (you)</a>
	      <span class='user-status available'></span>
	      <p class='user-email comment'>xxxxxxxx@gmail.com</p>
	      <p class='user-info'>Chinese University of Hong Kong</p>
	    </div>
	    <div class='menu'>
	      <button class='button-small button-silver'>Contact info</button>
	      <button class='button-small button-silver'>Emails</button>
	      <button class='right button-small button-silver'><i class="fa fa-envelope"></i></button>
	    </div>
	</div>

layout-practice-like-a-gmail.markdown

Layout practice - Like a GMail

A Pen by Rebecca Lu on CodePen.

License.

script.js

// ************************
// display profile detail
// ************************
var thumb = $('.profile-thumb'),
    detail = $(".profile-detail"),
    hideId = null;

// hide profile detail
$('body').mousemove(function(e){
  var target = e.target;
  
  if($(target).hasClass('profile-thumb')){       
      displayProfile( e.pageY+10,
                      e.pageX+10,
                      'Rebecca Lu',
                      $(target).next('.chat-status').find('span').attr('class'));
    
  } else if($.contains(document.querySelector('.contact-list'), target)){
    var status;
    if(target.tagName.toLowerCase()=='span'){
      status = $(target).attr('class');
      target = $(target).parent('li');
    }else{
      status = $(target).find('span').attr('class');
    }
            
    var offset = $(target).offset(),
        left = offset.left + $(target).width()-10;
        
    displayProfile(offset.top-10,
                  left,
                  $(target).text(),
                  status);
                 
  } else if($(target).hasClass('profile-detail') ||
            $.contains(document.querySelector('.profile-detail'), target)){
    
    if(hideId){
      clearTimeout(hideId);
      hideId=null;
    }
    detail.show();
  } else if($(detail).is(':visible') && !hideId){
    hideId = setTimeout(function(){
                detail.hide();
    }, 1000);
  }
});

function displayProfile(top, left, name, status){
    if(hideId){
      clearTimeout(hideId);
      hideId=null;
    }
	
  detail.find('.user-name').text(name);
  setStatus(detail, status);
  detail.css({
    'top': Math.min(top, window.innerHeight-detail.height()),
    'left': left
  }).show();
}
//*********************************
//change chat status
//*********************************
$('.status-change').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.profile-detail').hide();

  var menu = $('.status-menu');
  menu.toggle();

  if (menu.css('display') != 'none') {
    var height = menu.outerHeight(),
        top = $('.status-change').offset().top - height, 
        left = $('.status-change').offset().left;

    if (top < 0) {
      top = Math.min(window.innerHeight - height, 
                    $('.status-change').offset().top+$('.status-change').outerHeight());
    }

    menu.offset({
      top: top,
      left: left
    });
  }
});

function setStatus(dom, status){
  dom.find('.user-status').attr( "class", status+' user-status');
}
//*****************
//seperator
//******************
var data = null;

$('.seperator').on('mousedown', function(e){
    data = {};
    data.minY =  $('.mail-categories').offset().top;
    data.maxY = $('.tabs').offset().top;
    data.target = $('.tab-content');
    $(document).on('mousemove', onDrag);
});

function onDrag(e){
  var target = e.target;
  e.preventDefault();
  e.stopPropagation();
  
  if(data){    
    var pageY = e.pageY;
    
    if(pageY > data.minY+60 && pageY < data.maxY - 70){
      var top = pageY -4;
      data.target.offset({
        top: top
      });
      $('.mail-categories').outerHeight(top - data.minY);
    }
    $('.mail-categories').removeClass('onHover');
  }
}

$(window).on('mouseup', function(){
  data = null;
  $(document).off('mousemove', onDrag);
});

$(document).on('mouseup', function(){
  data = null;
  $(document).off('mousemove', onDrag);
});
//*********************************
// tab menu
//*********************************
//toggle
$('label[for=chat-toggle]').click(function(e){
  toggleMenu($('.chatbox'), $('.gadgetbox'));
});
$('label[for=gadgets-toggle]').click(function(e){
  toggleMenu( $('.gadgetbox'), $('.chatbox'));
});

function toggleMenu(menu, other){
  if ($('.tabs').hasClass('hideTabs') || menu.css('display') == 'none') {// if not active, show menu
    $('.tabs').removeClass('hideTabs');
    menu.show();
    other.hide();
  } else { // active, hide menu
    menu.hide();
    $('.tabs').addClass('hideTabs');
  }
}

//*********************************
// display mail categories on hover
//*********************************
$('.mail-categories').hover(onHover);
$('.title').hover(onLeave);
$('.tabs').hover(onLeave);
$('main').hover(onLeave);

function onHover(){
  if (!$(this).hasClass('onHover')) {
    $(this).attr('prevHeight', $(this).height());
    $(this).css('height', 'auto');
    $(this).addClass('onHover');
    rePos();
  };
}

function onLeave(){
  var categories = $('.mail-categories');
  if (categories.hasClass('onHover')) {
    categories.height(categories.attr('prevHeight'));
    categories.removeClass('onHover');
    rePos();
  }
}

function rePos(){
  $('.tab-content').css('top', $('.mail-categories').offset().top+$('.mail-categories').height()+'px');
}

//*********************************
// display search preferences
//*********************************
var pref = document.querySelector('.search-pref');

$('.mail-search .more').click(function(e) {
  $(pref).toggle();
  return false;
});

$('body').click(function(e){
  $('.dropdown-menu').hide();
  
  var target = e.target;
  if(!$(target).hasClass('search-pref') && !$.contains(pref, target)){
    $(pref).hide();
  }

});
$(pref).on('click', '.button-exit', function(e){
  $(pref).hide();
});
//***********************************
// display new mail
//***********************************
var hideStack =[];

$('.mail-compose').click(function() {
  newMail();
});

function newMail(recipient) {
  recipient = recipient || '';
  var width = $('.bottom-panel').width(),
      win = $(["<div class='popup-window new-mail'><div class='header'><div class='title'>New Message<div class='right'><button class='button-grey button-small button-minimize'>＿</button><button class='button-grey button-small button-fullscreen'><i class='fa fa-expand'></i></button><button class='button-grey button-small button-exit'><i class='fa fa-times'></i></button></div></div><div class='min-hide'><input class='receiver input-large' type='text' placeholder='Recipients' value='",
              recipient,
              "'/><input class='input-large' type='text' placeholder='Subject'/></div></div><textarea class='min-hide'></textarea><div class='menu footer min-hide'><button class='button-large button-blue'>Send</button> <button class='button-large button-silver'><i class='fa fa-font'></i></button> | <button class='button-large button-silver'><i class='fa fa-paperclip'></i></button><button class='button-large button-silver'><i class='fa fa-plus'></i></button><div class='right'><button class='button-large button-silver'><i class='fa fa-trash-o'></i></button>|<button class='button-large button-silver'><i class='fa fa-sort-asc'></i></button></div></div>"].join('')
            );
  
  win.appendTo($('.bottom-panel'));
  if (win.height() > window.innerHeight) {
    win.css('height', window.innerHeight+'px');
  }
  hideOverflow(win.width() +  width, win);
}

//***********************************
// diaplay new talk
//***********************************
$('.contact-list > li').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  var userName = $(this).text(),
      shown = false,
      span = $(this).find('span'),
      wrapper = $('.bottom-panel');
      
  //hide profile detail
  $(detail).hide();
  
  $('.bottom-panel .user-name').each(function(){
    if($(this).text() === userName){
      shown = true;
    }
  });
  
  if(!(shown && span.hasClass('talk'))){
    var status = span.attr('class'), 
        width = wrapper.width();

    //can't chat with the user if he/she is offline
    if(status === 'offline'){
      newMail(userName);
      return false;
    } else if (status === 'talk'){
      status = span.attr('prev_status');
    } else {
      span.attr('prev_status', status);
      span.attr('class', 'talk');
    }
        
    var talk = $(["<div class='popup-window new-talk'>  <div class='title'><span class='user-status ",
                status,
                "'></span><span class='user-name'>",
                userName,
                "</span><div class='right'><button class='button-grey button-small button-minimize'>_</button><button class='button-grey button-small'><i class='fa fa-share'></i></button><button class='button-grey button-small button-exit'><i class='fa fa-times'></i></button></div></div><div class='min-hide'><div class='menu'><button class='button-silver button-small'><i class='fa fa-video-camera'></i></button><button class='button-silver button-small'><i class='fa fa-phone'></i></button><button class='button-silver button-small'><i class='fa fa-users'></i></button><button class='right button-small button-silver'>More <i class='fa fa-sort-asc'></i></button></div><div class='chat-history'><textarea></textarea><button class='expressions'><i class='fa fa-smile-o fa-2x'></i></button></div></div></div></div>"
               ].join('')
              );
    
    talk.prependTo(wrapper);
    //hide window if total length exceeds window.innerWidth
    hideOverflow( width+talk.width(), talk); 
  }
});

//minimize
$('.bottom-panel').on('click', '.popup-window .title', function(e) {
  e.preventDefault();
  e.stopPropagation();
  minWindow($(this).closest('.popup-window'));
});

function minWindow(win){
  var width = $('.bottom-panel').width() - win.width(),
      title = win.find('.title');

  if (win.hasClass('minimized')) {
    win.removeClass('minimized');
    hideOverflow(width + win.width(), win);
  } else { // win is not minimized
    win.addClass('minimized').removeClass('fullscreen');
    showHidden(width + win.width(), win);
  }
  toggleButtonText(title, win.hasClass('minimized'));
}

function toggleButtonText(elem, isMin, isFull){
  elem.find('.button-minimize').text(isMin? '—': '_');   
  elem.find('.button-fullscreen i').attr('class', isMin||isFull ? 'fa fa-compress' : 'fa fa-expand');
}

//full screen
$('.bottom-panel').on('click', '.new-mail .button-fullscreen', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var win = $(this).closest('.new-mail'),
      width = $('.bottom-panel').width();

  if (win.hasClass('minimized')) {
    width -= win.width();
    win.removeClass('minimized');
    toggleButtonText(win, false);
    hideOverflow(win.width() + width, win);
  } else if (win.hasClass('fullscreen')) {
    win.removeClass('fullscreen'); 
    $('.overlay').hide();  
    toggleButtonText(win, false);
    hideOverflow(win.width() + width, win);
  } else {
    //if any window is already fullscreen, minimize it
    minWindow($('.popup-window.fullscreen'));

    toggleButtonText(win, false, true);
    win.addClass('fullscreen');  
    $('.overlay').show();  
    showHidden();
    $('.bottom-panel .popup-window:not(.fullscreen)').addClass('minimized');
  }
});

$('.overlay').click(function(e){
  e.preventDefault();
  e.stopPropagation();
  $(this).hide();
  $('.new-mail.fullscreen').removeClass('fullscreen');
});

//exit
$('.bottom-panel').on('click', '.popup-window .button-exit', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var popup = $(this).closest('.popup-window'),
      wrapper = $('.bottom-panel');
  
  //reset user chat status
  if($(this).closest('.popup-window').hasClass('new-talk')){
    $('.contact-list > li > span.talk').each(function(){
      var li = $(this).parent();
      
      if(popup.find('.user-name').text()===li.text()){
         $(this).attr('class', $(this).attr('prev_status'));
      }
    });
  }
  if (popup.hasClass('fullscreen')) {
    $('.overlay').hide();
  }
  //remove window
  popup.remove();  

  //show hidden windows
  showHidden();
});

function hideOverflow(width, newElem){
  var wrapper = $('.bottom-panel'), elem;

  if (wrapper.children('.popup-window').length === 1) { //no elements to hide
    return;
  }

  while(width >= window.innerWidth){ 
    var talkChildren = wrapper.children('.new-talk');

    if (wrapper.children('.new-mail.minimized').length) { 
      //hide minimized window first
      elem = wrapper.children('.new-mail.minimized').first();
      width -= elem.width();
      hide(elem);
    } else if( (talkChildren.length>1 && newElem.hasClass('new-talk')) ||
        (talkChildren.length && newElem.hasClass('new-mail'))) {
      //if newElem is new-talk and there is >1 new-talk window  OR
      //newElem is new-mail and there is >0 new-talk window, hide one talk window 
      elem = talkChildren.last();
      width -= elem.width();
      hide(elem);
    } else {
      elem = wrapper.children('.new-mail').first();
      width -= elem.width(); 
      elem.addClass('minimized');  
      width += elem.width();       
    }   
  }

  function hide(elem){
    hideStack.push(elem);
    elem.remove();
  }
}

function showHidden(){
  while(hideStack.length){
    var elem = hideStack[hideStack.length - 1], 
        width = $('.bottom-panel').width();
    $(elem).appendTo($('.bottom-panel'));
    width += $(elem).width();

    if( width >= window.innerWidth){
      $(elem).remove();
      break;
    } else {
      hideStack.pop();
    }
  }
}
//******************************
// button options
//******************************
$('.button-options').click(function(e){  
  e.stopPropagation();

  if(e.target.tagName != 'LABEL' && e.target.tagName != 'INPUT'){
    var menu = $(this).next('.dropdown-menu'),
        visibility = menu.css('display');
    if (visibility == 'none') {
      $('.dropdown-menu').hide();
      menu.show(); 

      // adjust menu position
      if ((menu.hasClass('drop-top') && menu.offset().top < 0) ||
          (!menu.hasClass('drop-top') && menu.offset().top + menu.height() > window.innerHeight)) {
        menu.offset({
          top: window.innerHeight - menu.height()-10
        });
        menu.css('bottom', 'auto');      
      }

    } else {
      menu.hide();
    }
    e.preventDefault();
  }
});

$('.dropdown-menu').click(function(e){
  e.preventDefault();
  e.stopPropagation();
  if (e.target.tagName === 'LI') {
    $(this).closest('.options-wrapper').find('.button-options > span').text($(e.target).text());
    $(this).hide();
  }
});

//****************************
// check mails
//****************************
$('#chkAll').change(function(e){
  $(this).removeClass('partlyChecked');
  $('.mail-box .mail-check').prop('checked', this.checked);
});

$('.mail-box .mail-check').change(function(e){
  var totalNum = $('.mail-box tr').length,
      checkedNum = $('.mail-box .mail-check:checked').length;
  if (checkedNum === 0){
    $('#chkAll').prop('checked', false).removeClass('partlyChecked');
  } else if(totalNum === checkedNum) {
    $('#chkAll').prop('checked', true).removeClass('partlyChecked');
  } else {
    $('#chkAll').prop('checked', true).addClass('partlyChecked');
  } 
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

//colors
$c-silver: #eeeeee;
$c-lightGrey: #BBB;
$c-grey: #999;
$c-darkGrey: #484848;
$c-dimGrey: #282828;
$c-gold: #DAA520;
$c-paleGold: #FFE300;
$c-green: #3f3;
$c-darkGreen: #008000;
$c-orange: #FF4500;
$c-aqua: #00FFFF;
$c-blue: #3F90FE;
$c-pink: #FFC0CB;
$c-white: #ffffff;

$splitLine: solid 1px $c-darkGrey;

$sidebar-width: 10.8rem;
$sidebar-marginLeft: .6rem;
$sideheader-height: 6.6rem;
$mailcategories-height: 13rem;
$seperator-height: .8rem;
$tabs-height: 2rem;
$popup-width: 17rem;
$search-height: 2.2rem;
$title-height:  3.4rem;
$mail-header-height: 7.8rem;
$mail-footer-height: 2rem;
$popup-title-height: 2.6rem;

*, *:before, *:after{
  margin: 0;
  padding: 0;
  border: none
}

:before, :after{
  content: '';
}

*:focus {
    outline: 0;
}

body{
  text-align: left;
  background: #000;
  font-family:'Open Sans', sans-serif;
  overflow: hidden;
}

ul, li{
  list-style: none;
}

.comment{
  font-size: .8rem;
  color: $c-grey;
}

button{
  display: inline-block;
  text-align: center;
}
      
input[type=checkbox]{
  //position:absolute;
  //left: -9999px;
   display: none;
}

.options-wrapper{
  position: relative;
  white-space: nowrap;
}
span.options-wrapper{
  display:inline-block;
}

.button-options{
  position: relative;
  display: block;
    
  span{
    margin-right: .2rem;
  }
  .more{
    float: right;
  }
}

.button-large{
  padding: .5rem;
  height: 2rem;
}

.button-small{
  padding: .2rem;
  height: 1.4rem;
}

.button-silver{
  font-weight: bold;
  border: solid 1px $c-lightGrey;
  border-radius: .2rem;
  background: $c-silver;
  color: $c-darkGrey;
 
  &:active{
    border: solid 1px $c-blue;
  }
  &:hover{
    background: lighten($c-silver, 1%);
    box-shadow: 0 0 1px $c-darkGrey;
  }
}

.button-grey{
  font-weight: bold;
  background: $c-dimGrey;
  color: $c-lightGrey;
  border-radius: .2rem;

  &:hover{
    color: $c-white;
    background: $c-darkGrey;
  }
}

.button-blue{
  background: $c-blue;
  color: $c-white;
  font-weight: bold;
  border-radius: .2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.right{
  display: inline-block;
  float: right;
}
p.right{
  text-align: right;
}

.hide{
  display: none;
}

.unread{
  font-weight: bold;
}

input[type=text], textarea{
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: inset 0 0 1px $c-grey;

  &:focus{
    box-shadow:
      inset 0 0 1px $c-aqua,
      inset 0 0 4px $c-grey;
  }
}

.input-small{
  padding: .25rem;
}

.input-medium{
  padding: .55rem;
}
.input-large{
  padding: .8rem;
}
input.input-inline{
  display: inline-block;
  max-width: 10rem;
  margin: 0 .2rem;
}

aside{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: $c-white;
  margin-left: $sidebar-marginLeft;
  left: 0;
  top: .8rem;
  height: 100%;
  width: $sidebar-width;
  z-index: 1;
  
  .title{
    height: $title-height;
    line-height: $title-height;
    padding-left: .4rem;
    border-bottom: $splitLine;
  }
  
  li {
    cursor: pointer;
    &:hover{
      background: $c-dimGrey;
    }
  }
}

button.mail-compose{
  text-transform: uppercase;
  width: 130px;
  line-height: 2rem;
  margin: .5rem .4rem;
}

.tab-content, .tabs{
  position: absolute;
  left: $sidebar-marginLeft;
  width: $sidebar-width;
}

.mail-categories, .tab-content{
  overflow:hidden;
  &:hover { overflow-y:auto; }
}

.tabs{
  bottom: 0;
  height: $tabs-height;
  border-top: $splitLine;
  text-align: center;
  
  input[type='radio']{
    display: none;
  }
  input[type='radio']:checked + label button{
      background: $c-dimGrey;
  }
  label{
    display:inline-block;
    cursor: pointer;
  }
  button, button:hover{
      background: transparent;
  }
  button{
    display:block;
    width: $tabs-height;
    border-radius: 0;
    pointer-events:none;
  }
}

.mail-categories{
 // top: $sideheader-height;
  height: $mailcategories-height;
  position: relative;
  
  li{
    padding: .1rem .4rem;
    position: relative;
  }
  
  li.label:after{
      width: .8rem;
      height: .8rem;
      position: absolute;
      top: 50%;
      margin-top: -.4rem;
      right: .3rem;
  }
  li.orange:after{
    background: $c-orange;
  }
  li.green:after{
    background: $c-green;
  }
  li.blue:after{
    background: $c-blue;
  }
  li.pink:after{
    background: $c-pink;
  }
}

.seperator{
  border-top: $splitLine;
  height: $seperator-height;
  cursor: row-resize;
  position: relative;
  z-index: 1;

  &:after{
    width: 2px;
    height: 2px;
    background: $c-darkGrey;
    position: absolute;
    left: 50%;
    bottom: 40%;
    box-shadow: 4px 0 $c-darkGrey, -4px 0 $c-darkGrey;
    opacity: 0;
  }
  &:hover:after{
    opacity: 1;
  }
}

.tab-content{
  top: $sideheader-height + $mailcategories-height + $seperator-height;
  bottom: $mail-footer-height;
}
  
.chatbox{
  padding-left: .4rem;
}

.available, .busy, .offline, .talk{
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  margin-top: .3rem;
  margin-right: .4rem;
}
.available{
    background: linear-gradient($c-green, $c-darkGreen);
}
.busy{
    background: linear-gradient($c-gold, $c-orange);
}
.offline{
    background: linear-gradient($c-grey, $c-darkGrey);
}
.talk{
    background: $c-white;
}

.status-bar{
  padding-bottom: .6rem;
  .status-change{
    position: relative;
    background: transparent;
	
	button{
		display:block;
		padding-right: .2rem;
		width: 4.4rem;
		
		&:hover{
		  background: $c-darkGrey;
		}
	}
  }

  .profile-thumb{
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
  }
    
  .left, .right{
    width: 2.2rem;
    float: right;
  }
  .left{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 1px;
  }
  .right{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.contact-list{
  margin-top: .3rem;
  font-size: .9rem;
  
  li{
    line-height: 1.4rem;
    padding-left: .3rem;
  }
}


.hideTabs ~ .mail-categories{
  height: auto;
  bottom: $mail-footer-height;
}
.hideTabs ~ .tab-content{
  display: none;
}

main{
  position: fixed;
  left: $sidebar-width + 1.4rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding-right: 2.2rem;
  color: $c-grey;
  min-width: 37rem;
  height: 100%;
  z-index: 0;

  .mail-check{
      & + label{
        background: $c-dimGrey;
        border: solid 1px $c-darkGrey;
        width: .8rem;
        height: .8rem;
        display: inline-block;
      }
      & + label:before{
        color: $c-dimGrey;
        content:'✔';
        opacity: 0;
        display: block;
        margin-top: -.2rem;
      }
      & + label:hover{
        border: solid 1px $c-grey;
      }
      &:checked + label{
        border: solid 1px darkCyan;
        background: $c-grey;
      }
      &:checked + label:before{
        opacity: 1;
      }
  }
}

.mail-search{
  padding-top: .6rem;
  padding-bottom: .6rem;
  
  & > button, .input-box > input[type=text]{
      height: $search-height;
  }
  & > .button-blue{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 4rem;
  }

  & > .more{
    background: $c-white;
    color: $c-silver;
    padding: .5rem 0;
    width: 1rem;
    &:hover{
      color: $c-grey;
    }
  }
  
  .input-box{
    margin-right: 4rem;
    padding-right: 1rem;
    position:relative;
    pointer-events:none;
    
    & > input[type=text]{
      box-shadow: none;
      pointer-events:auto;
    }
    
    .search-pref{
      position: absolute;
      left: 0;
      right: 0;
      
      color: $c-grey;
      left: 0;
     
      padding: .8rem;
      box-shadow: 0 0 0 1px $c-grey,
        1px 1px 2px $c-grey;
        
      input[type=checkbox]{
          display: inline;
          margin-right: .4rem;
      }
      .options-wrapper button{
        min-width: 6.2rem;
      }
      
      .button-blue{
        width: 4.8rem;
      }
    }
  }
}

.mail-menu{
  border-top: $splitLine;
  padding: .5rem 0 .5rem 1rem;
  margin-left: -1.2rem;
  
  input[type=checkbox].partlyChecked + label:before{
    content:'−';
  }
  
  & > li{
    display: inline-block;
    margin-left: .8rem;
    &:first-of-type{
      margin-left: 0;
    }
  }
      
  button{
    width: 5rem;
  }
  li > button{
    display: block;
  }
}

.mail-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-right:1rem;
  top: 6.4rem;
  overflow-y: auto;
  overflow-x: hidden;
  
  .unread{
    color: $c-white;
    background: darken($c-dimGrey, 5%);
  }
  
  table{
    border-collapse:collapse;
    border-spacing: 0;
    width: 100%;
  }
  tr{
    line-height: 1rem;
    text-align: left;
    cursor: pointer;
    position: relative;
    border-bottom: $splitLine;
    padding-left: .4rem;
    
    &:first-of-type{
      border-top: $splitLine;
    }

    &:hover .blank-cell:before{
        opacity: 1;
    }
    
    td{
      height: 1rem;
      line-height:1rem;
      padding: .4rem;
      white-space: nowrap;
    }
    
    label{
      margin-right: .4rem;
      display: inline-block;
      &:last-of-type{
        margin-right: .6rem;
      }
    }
    
    .blank-cell{
      min-width: .2rem;
      max-width: .2rem;
      padding: 0;
      position: relative;
    
      &:before{
        height: 1.4rem;
        width: 8px;background: red;
        background: -webkit-radial-gradient($c-darkGrey 1px, transparent 1px);
        background: -moz-radial-gradient($c-darkGrey 1px, transparent 1px);
        background: radial-gradient($c-darkGrey 1px, transparent 1px);
        background-size: 4px 4px;
        position: absolute;
        left: 2px;
        bottom: .2rem;
        opacity: 0;
      }
    }
    
    .mail-star{
      & + label:before{
        content: '☆';
        color: $c-darkGrey;
      }
      &:checked + label:before{
        content: '★';
        color: $c-paleGold;
        text-shadow: 1px 0 $c-gold,
          -1px 0 $c-gold,
          0 1px $c-gold,
          0 -1px $c-gold;
      }
    }
    
    .mail-important{
      & + label{
        width: .7rem;
        height: .7rem;
        border: solid 1px $c-darkGrey;
        border-right: none;
        &:before{
          width: 62%;
          height: 62%;
          border-top: 1px solid $c-darkGrey;
          border-right: 1px solid $c-darkGrey;
          background: inherit;
          -webkit-transform-origin: center center;
          transform-origin: center center;
          -webkit-transform: translateX(.41rem) translateY(.1rem) rotate(35deg) skewY(30deg);
          transform: translateX(.41rem) translateY(.1rem) rotate(35deg) skewY(30deg);
          display: block;
        }
      }
      
      & + label:hover{
        border: solid 1px $c-grey;
        border-right: none;
        &:before{
          border-top: 1px solid $c-grey;
          border-right: 1px solid $c-grey;
        }
      }
      
      &:checked + label{
          background:$c-paleGold;
          border: solid 1px $c-gold;
        border-right: none;
          &:before{
            border-top: 1px solid $c-gold;
            border-right: 1px solid $c-gold;
          }
      }
    }
    
  }
  
  span{
     display: inline-block;
  }
  .mail-labels{
    width: 3rem;
  }
  .mail-sender{
    width: 9rem;
  }
  
  .mail-title{
    width: auto;
  }
  
  .mail-time{
    text-align: right;
    width: 5rem;
    padding-right: .8rem;
  }
}

.bottom-panel{
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
  z-index: 201;
  padding: 0 .4rem;
  pointer-events:none;
}

.new-talk{
  vertical-align: bottom;
  display: inline-block;
  width: $popup-width;
  margin-left: .4rem;
  pointer-events: auto;
  .chat-history{
    height: 7rem;
    margin: .4rem;
    position: relative;
   
    .expressions{
      position: absolute;
      right: 0;
      bottom: 0;
      background: transparent;
      color: $c-blue;
      cursor: pointer;
    }
    
    textarea{
      position: absolute;
      bottom: 0;
      padding: .2rem 1.4rem .2rem .4rem;
    }
  }
}

.new-mail{
  width: 35rem;
  height: 27rem;
  
  display: inline-block;
  margin-left: .4rem;
  vertical-align: bottom;
  position: relative;

  input, textarea{
    &:focus{
      box-shadow: none;
    }
  }
  
  textarea{
    padding: .6rem;
    overflow-y: auto;
    position: absolute;
    top: $mail-header-height;
    bottom: $mail-footer-height;
    left: 0;
    right: 0;
  }
  
  .footer{
    height: $mail-footer-height;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

.popup-window{
  background: $c-white;
  color: $c-dimGrey;
  position: relative;
  z-index: 30;
  text-align: left;
  box-shadow: 0 0 3px $c-darkGrey;
  pointer-events: auto;
  
  .title{
    height: 1.4rem;
    padding: .6rem .8rem;
    background: $c-dimGrey;
    color: $c-lightGrey;
  }
  
  .menu{
    padding: .4rem;
    background: $c-silver;
    color: $c-grey;
        
    .button-silver{
      border-radius: 0;
      border: none;
      color: $c-grey;
      
      &:hover{
        box-shadow: 0 0 1px $c-darkGrey;
      }
    }
  }
  
  &.minimized{
    height: $popup-title-height;
    width: $popup-width;
  }
  &.minimized .min-hide{
    display: none;
  }
  
  &.fullscreen{
    z-index: 0;
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
  }
}

.profile-detail{
  position: absolute;
  width: 23rem;
  box-shadow: 1px 1px 3px $c-grey;
  z-index: 300;
  .content{
    margin-right: 9rem;
    padding: .8rem 0 .8rem 1rem;
  
    a {
     // position: relative;
    }
  }
  .profile-img{
    width: 6rem;
    height: 6rem;
    border: solid 5px $c-white;
    box-shadow: 1px 1px 3px $c-lightGrey;
    margin: 1rem;
    float: right;
  }

  .menu{
    border-top: solid 1px $c-lightGrey;
    clear: both;
    .button-silver{
      font-weight: normal;
    }
  }
}

.dropdown-menu{
  border: solid 1px $c-silver;
  padding: .4rem 0;
  font-weight: normal;
  text-align: left;
  color: $c-dimGrey;
  position: absolute;
  top: 0;
  left: 0;
  background: $c-white;
  min-width: 10rem;
  z-index: 22;

  li{
    padding: .1rem 1.8rem;
    cursor: pointer;
    &:hover{
        background: $c-silver;
    }
    &.subtitle{
      padding-left:.8rem;
    }
    &.disable{
      font-style: italic;
      color: $c-grey;
    }
    &.splitLine{
      height: 1px;
      margin-bottom: .2rem;
      border-bottom: solid 1px $c-silver;
    }
  }
  
  .splitLine, .subtitle, .disable{
    &:hover{
     background: inherit;
    }
  }
}

.dropdown-menu.drop-bottom {
  top: 100%;
}
.dropdown-menu.drop-top {
  top: auto;
  bottom: 100%;
}
.dropdown-menu.temp-insert{
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
}
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(150, 150, 150, .5);
  z-index: 200;
}

styles

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />