erezsob/_contact_details.scss

## _contact_details.scss
p {
  line-height: 18px;
}

.contactItem {
  padding-left: 15px;
  padding-right: 15px;
  margin-right: auto;
  margin-left: auto;
}

.contactItem>header {
	padding-top: 45px;
	overflow: hidden;
	margin-bottom: 20px;
}

.contactItem .col1	{
	width: 45.76271%;
	float: left;
	margin-right: 1.69492%;
}

.contactItem .col2 {
  width:  25.42373%;
  float: left;
  margin-right: 1.69492%;
}

.contactItem .col3 {
  width: 25.42373%;
  float: right;
  margin-right: 0;
}

.contactimage {
  width: 105px;
  height: 105px;
  background: $navi;
  float: left;
  margin-right: 15px;
}

.contactname {
  line-height: 36px;
  text-transform: uppercase;
  font-style: 32px;
  font-family: $inform3-font-bold;
}

.tabs {
  overflow: hidden;
}

.tabs li {
  width: 11.86441%;
  float: left;
  margin-right: 1.69492%;
  position: relative;
}

.tabs li span {
  display: block;
  padding: 4px 0 2px 10px;
  background: $navi;
  color: #000;
  cursor: pointer;
}

ul.tabs li.active span {
  background: #000;
  color: $navi;
  z-index: 1;
}

.tabs li.active span:after {
  border-bottom-color: #000;
}

.tabs li span:after {
  content: '';
  position: absolute;
  top: 0;
  right: -25px;
  border-bottom: 25px solid $navi;
  border-right: 25px solid transparent;
}

.tabs li.active span:after {
  z-index: 1;
}

.tabviews header {
  position: relative;
  background: #000;
  cursor: pointer;
}

.tabviews header:before,
.tabviews header:after {
  content: '';
  position: absolute;
  top: 0;
  background: inherit;
  width: 15px;
  height: 100%;
  display: block;
  border-bottom: inherit;
}
.tabviews header:before{
  left: -15px;
}

.tabviews header:after {
  right: -15px;
}

.tabviews .play {
  display: block;
  line-height: 1.7em;
  width: 100%;
  color: $navi;
  font-family: $inform3-font-light;
}

.iconic.play:before {
  content: '4';
  font-family: IconicStroke;
  margin: 0 5px 0 2px;
  font-size: 0.8em;
  display: inline-block;
  -moz-transition: all 5s linear;
  -webkit-transition: all 5s linear;
  transition: all 0.5s linear;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.tabviews .icon--down:before {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.tabviews header .plus {
  position: absolute;
  top: 0;
  right: 0;
  color: $navi;
  padding: 5px 0 5px 5px;
}

.iconic.plus:before {
  content: '+';
  font-family: IconicStroke;
}

.accordion--content {
  overflow: hidden;
  padding: 20px 0;
}

.accordion--toolbar {
  float: right;
  display: none;
}

.accordion--content:hover .accordion--toolbar {
  display: block;
}

.accordion--toolbar a:hover {
  background-color: $cyan;
}

.accordion--toolbar li {
  float: left;
  padding-right: 4px;
  padding-left: 4px;
}

.accordion--toolbar a {
  height: 22px;
  text-align: center;
  background: #b3b3b3;
  color: #fff;
  width: 38px;
  line-height: 22px;
  display: inline-block;
}

.iconic.remove:before {
  content: 't';
  font-family: IconicStroke;
}

.iconic.edit:before {
  content: 'p';
  font-family: IconicStroke;
}

.tab,
.accordion--content {
  display: none;
}

.tab.active {
  display: block;
}

## _contacts.scss
/* Contacts page  */

#contactListTitle {
	display: inline;
	float: left;
	padding-left: 15px;
}

.dataTables_info {
  height: 22px;
  line-height: 22px;
  padding: 11px 0;
  margin: 0 8px;
  display: inline;
  float: left;
}

.dataTables_paginate {
	@extend .dataTables_info;
	float: right;
	margin-right: 0;
	padding-right: 15px;

}

.dataTables_filter {
	@extend .dataTables_info;
	margin-right: 0;
	float: right;
}

input[type="text"] {
	@include box-sizing(border-box);
	padding: 4px 2px 0;
	border: 1px #666 solid;
}

.contactList {
  table-layout: fixed;
	width: 100%;
	float: right;
	margin-right: 0;
	display: table;
}

colgroup {
	display: table-column-group;
}

table thead {
	background: #000;
	color: #fff;
}

tr {
	display: table-row;
}

table tr th,
table tr td {
  line-height: 22px;
  vertical-align: top;
  padding-right: 5px;
}

th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

#content table th,
#content table td {
	padding-left: 15px;
}

table tbody tr {
  border-bottom: 1px #b3b3b3 solid;

  .sorting_1 {
  	background: #fff;
  }
}


.sorting {

  &:nth-child(1) {
    width: 6.5%;
  }

  &:nth-child(2) {
    width: 16.2%;
  }

  &:nth-child(3) {
    width: 43%;
  }
}

.contactList tbody tr:hover td {
	background: $navi;
}

.contactList .toolbar {
	display: none;
  float: right;
  margin: 0;
  padding: 0;
  bottom: 0;
  overflow: hidden;

  li {
  	list-style-image: none;
  	list-style-type: none;
  	margin-left: 0;
  	display: inline;
    float: left;
    padding-right: 8px;
  }

  a {
  	height: 21px;
  	text-align: center;
  	background: #b3b3b3;
  	border: 0;
  	color: #fff;
  	width: 38px;
  	vertical-align: middle;

  	&:hover {
	  	background: #00e1ff;
  	}
  }
}

.contactList tbody tr:hover .toolbar {
  display: inline;

  a {
  	display: inline-block;
  }
}

.iconic.trash_stroke:before {
	content: 't';
  font-family: IconicStroke;
}

.iconic.pen:before {
	content: 'p';
	font-family: IconicStroke;
}

## contact_details.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="css/print.css" media="print" rel="stylesheet" type="text/css" />

  <script src="js/moment.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/scripts.js"></script>
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  <header class="main">
    <!-- Clock -->
  	<time class="clock"></time>

  	<div class="container">
      <!-- Logo + Date -->
  		<div class="brand">
  			<h1>Inform</h1>

  			<time class="date"></time>
  		</div>

  		<nav class="mainmenu">

  			<ul class="horizontal-list">

          <li><a href="dashboard.html">Dashboard</a></li>

  				<li><a href="contacts.html">Contacts</a></li>

  				<li><a href="#/calendar">Calendar</a></li>

  				<li>
            <!-- Drop down list -->
  				  <a href="#">Projects</a>

  				  <ul class="submenu">

  				  	<li><a href="#">Projekte</a></li>
  				  	<li><a href="#">Stundenzettel</a></li>
  				  	<li><a href="#">Materialbuch</a></li>
  				  	<li><a href="#">Ressourcenplanung</a></li>
  				  	<li><a href="#">Forecastplanung</a></li>
  				  	<li class="line"></li>
  				  	<li><a href="#">Angebote</a></li>
  				  	<li><a href="#">Offene Posten</a></li>
  				  	<li class="line"></li>
  				  	<li><a href="#">Rechnungsausgang</a></li>
  				  	<li><a href="#">Eingangsrechnungen</a></li>
              <li class="line"></li>
  				  	<li><a href="#">Reports</a></li>
              <li class="line"></li>
  				  	<li><a href="#">Kassenbuch</a></li>

  				  </ul>

  				</li>

  				<li>
            <!-- Drop down list -->
            <a href="#">Library</a>
            <ul class="submenu">

              <li><a href="#/wiki">Wiki</a></li>

            </ul>
          </li>
  			</ul>
  		</nav>

      <!-- Login/Logout + User name -->
      <div class="login">
        <a href="#logout" class="iconic stroke user after">User</a>
      </div>

  	</div>

  </header>
  <!-- end of header -->

  <div id="content">

    <div class="contactItem">
      <header>

        <div class="col col1">
          <div class="contactimage"></div>
          <h2 class="contactname">Contact Name</h2>
        </div>

        <div class="col col2">
          <p>
            Fiktivstr. 76 <br>
            80336  Fablestadt <br>
            +49 89 530729-13 <br>
            <a href="mailto:contactname@something.de">contactname@something.de</a>
          </p>
        </div>

        <div class="col col3">
          <p>Date of birth: 01.01.2000</p>
        </div>

      </header>
      <div class="addressAccordion">

        <div class="tabLayout">

          <ul class="tabs">

            <li class="active">
              <span>Contact Information</span>
            </li>

            <li>
              <span>Business Information</span>
            </li>

            <li>
              <span>Tags</span>
            </li>

            <li>
              <span>History</span>
            </li>

          </ul>

          <div class="tabviews"> <!-- tabviews -->

            <div class="tab active">

              <div class="modelType">

                <header class="title">

                  <span class="iconic stroke play">Address</span>
                  <span class="iconic stroke plus"></span>

                </header>

                <div class="accordion--content">

                  <div class="col1">
                    Teststr. 101 <br>
                    99999, Testburg
                  </div>

                  <div class="col2">
                    Phone: <br>
                    Website: <a href="#" target="_blank"></a><br>
                    Email: <a href="mailto:"></a>
                  </div>

                  <div class="col3">

                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>

                  </div>

                </div> <!-- accordion--content -->

              </div> <!-- modelType -->

              <div class="modelType">

                <header class="title">
                  <span class="iconic stroke play rotate">Network</a>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content">

                  <p>
                    <a href="#" class="plus">Create a new private address</a>
                  </p>

                </div>  <!-- accordion--content -->

              </div> <!-- modelType -->

              <div class="modelType">

                <header class="title">
                  <span class="iconic stroke play rotate">Staff members</a>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content">

                  <div class="col1">
                    <p>
                      <a href="#">Contact person #1</a>
                    </p>
                    <p>Test</p>
                    <p>PM</p>
                  </div>

                  <div class="col2">

                  </div>

                  <div class="col3">
                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>
                  </div>

                </div>  <!-- accordion--content -->

              </div> <!-- modelType -->

            </div> <!-- tab-0 -->

            <div class="tab">
              <div class="modelType">
                <header class="title">
                  <span class="iconic stroke play rotate">Bank details</span>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content default">

                  <div class="col1">
                    Teststr. 101 <br>
                    99999, Testburg
                  </div>

                  <div class="col2">
                    Phone: <br>
                    Website: <a href="#" target="_blank"></a><br>
                    Email: <a href="mailto:"></a>
                  </div>

                  <div class="col3">

                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>

                  </div>

                </div> <!-- accordion--content -->


                <header class="title">
                  <span class="iconic stroke play rotate">Project settings</span>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content">

                  <div class="col1">
                    <p>Test</p>
                  </div>
                  <div class="col2">lorem ipsum</div>
                  <div class="col3">

                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>
                  </div>

                </div>

              </div> <!-- modelType -->

            </div> <!-- tab -->

            <div class="tab">
              <div class="modelType">
                <header class="title">
                  <span class="iconic stroke play rotate">Tags</span>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content">

                  <div class="col1">
                    Lorem Ipsum
                  </div>

                  <div class="col2">
                    Test
                  </div>

                  <div class="col3">

                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>

                  </div>

                </div> <!-- accordion--content -->

              </div> <!-- modelType -->

            </div> <!-- tab -->

            <div class="tab">
              <div class="modelType">
                <header class="title">
                  <span class="iconic stroke play rotate">Comments</span>
                  <span class="iconic stroke plus"></span>
                </header>

                <div class="accordion--content default">
                  <div class="col1">
                    <p><a href="#">Create new comment</a></p>
                  </div>

                  <div class="col2">

                  </div>

                  <div class="col3">
                    <ul class="accordion--toolbar">

                      <li>
                        <a href="#" class="iconic stroke remove"></a>
                      </li>

                      <li>
                        <a href="#" class="iconic stroke edit"></a>
                      </li>

                    </ul>
                  </div>

                </div>

              </div> <!-- modelType -->

            </div> <!-- tab -->

          </div> <!-- tabviews -->

        </div> <!-- tabLayout -->

      </div> <!-- addressAccordion -->

    </div> <!-- contactItem -->

  </div> <!-- #content-->

  <footer class="main">
    <div class="container">
      Inform 3.0
    </div>
  </footer>

</body>
</html>

## contacts.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="css/print.css" media="print" rel="stylesheet" type="text/css" />

  <script src="js/moment.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/scripts.js"></script>
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  <header class="main">
    <!-- Clock -->
  	<time class="clock"></time>

  	<div class="container">
      <!-- Logo + Date -->
  		<div class="brand">
  			<h1>Inform</h1>

  			<time class="date">Mittwoch, 31/12/1999</time>
  		</div>

  		<nav class="mainmenu">

  			<ul class="horizontal-list">

  				<li><a href="dashboard.html">Dashboard</a></li>

  				<li><a href="#/contacts">Contacts</a></li>

  				<li><a href="#/calendar">Calendar</a></li>

  				<li>
            <!-- Drop down list -->
  				  <a href="#">Projects</a>

  				  <ul class="submenu">

  				  	<li><a href="#">Projekte</a></li>
  				  	<li><a href="#">Stundenzettel</a></li>
  				  	<li><a href="#">Materialbuch</a></li>
  				  	<li><a href="#">Ressourcenplanung</a></li>
  				  	<li><a href="#">Forecastplanung</a></li>
  				  	<li class="line"></li>
  				  	<li><a href="#">Angebote</a></li>
  				  	<li><a href="#">Offene Posten</a></li>
  				  	<li class="line"></li>
  				  	<li><a href="#">Rechnungsausgang</a></li>
  				  	<li><a href="#">Eingangsrechnungen</a></li>
              <li class="line"></li>
  				  	<li><a href="#">Reports</a></li>
              <li class="line"></li>
  				  	<li><a href="#">Kassenbuch</a></li>

  				  </ul>

  				</li>

  				<li>
            <!-- Drop down list -->
            <a href="#">Library</a>
            <ul class="submenu">

              <li><a href="#/wiki">Wiki</a></li>

            </ul>
          </li>
  			</ul>
  		</nav>

      <!-- Login/Logout + User name -->
      <div class="login">
        <a href="#logout" class="iconic stroke user after">User</a>
      </div>
  	</div>

  </header>
  <!-- end of header -->

  <!-- contacts section   -->
  <section class="main">
	  <div id="content">
	  	<div>

	  		<h2 id="contactListTitle">Contacts</h2>

	  		<div id="dataTables_Table_2_wrapper" class="dataTables_wrapper" role="grid">
	        <div class="dataTables_info" id="dataTables_Table_2_info">Showing 1 to 10 of 44 entries</div>
	        <div class="dataTables_paginate paging_full_numbers">
		        <a tabindex="0" class="first paginate_button paginate_button_disabled" id="DataTables_Table_2_first"></a>
		        <a tabindex="0" class="previous paginate_button paginate_button_disabled" id="DataTables_Table_2_previous"></a>
		        <span>
		        	<a textindex="0" class="paginate_active">1</a>
		        	<a textindex="0" class="paginate_active">2</a>
		        	<a textindex="0" class="paginate_active">3</a>
		        	<a textindex="0" class="paginate_active">4</a>
		        	<a textindex="0" class="paginate_active">5</a>
		        </span>
		        <a tabindex="0" class="next paginate_button" id="DataTables_Table_2_next"></a>
		        <a tabindex="0" class="last paginate_button" id="DataTables_Table_2_last"></a>
		  		</div>
		  		<div class="dataTables_filter" id="DataTables_Table_2_filter">
		  			<label>Search <input type="text" aria-controls="DataTables_Table_2"></label>
		  		</div>
		  		<table class="contactList dataTable" id="DataTables_Table_2" aria-describedby="DataTables_Table_2_info">
		  			<colgroup>
		  				<col>
		  				<col>
		  				<col>
		  				<col>
		  				<col>
		  			</colgroup>
		  			<thead>
		  				<tr role="row">
		  					<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Type</th>
		  					<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Name</th>
		  					<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Timezone</th>
		  					<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1">Created:</th>
		  					<th class="sorting" role="columnheader" tabindex="0" rowspan="1" colspan="1"></th>
		  				</tr>
		  			</thead>
		  			<tbody>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  				<tr>
		  					<td>
		  						<span class="iconic stroke user"></span>
		  					</td>
		  					<td class="sorting_1">Mark Watney</td>
		  					<td>(GMT) Dublin, London, Lisbon, Monrovia, Casablanca</td>
		  					<td>31-12-1999 - 23:59:59</td>
		  					<td>
		  						<ul class="toolbar">
		  							<li>
		  								<a href="#" class="remove iconic stroke trash_stroke"></a>
		  							</li>
	  								<li>
		  								<a href="#" class="edit iconic stroke pen"></a>
	  								</li>
		  						</ul>
		  					</td>
		  				</tr>
		  			</tbody>
		  		</table>
		  		<div class="dataTables_paginate paging_full_numbers">
		        <a tabindex="0" class="first paginate_button paginate_button_disabled" id="DataTables_Table_2_first"></a>
		        <a tabindex="0" class="previous paginate_button paginate_button_disabled" id="DataTables_Table_2_previous"></a>
		        <span>
		        	<a textindex="0" class="paginate_active">1</a>
		        	<a textindex="0" class="paginate_active">2</a>
		        	<a textindex="0" class="paginate_active">3</a>
		        	<a textindex="0" class="paginate_active">4</a>
		        	<a textindex="0" class="paginate_active">5</a>
		        </span>
		        <a tabindex="0" class="next paginate_button" id="DataTables_Table_2_next"></a>
		        <a tabindex="0" class="last paginate_button" id="DataTables_Table_2_last"></a>
		  		</div>
	  		</div>
	  	</div>
	  </div>
  </section>

  <footer class="main">
    <div class="container">
      Inform 3.0
    </div>
  </footer>

</body>
</html>

## scripts.js
$(function () {


// Main nav clock //

	var renderClock = function() {

		var _self = this;

		this.format = function(number) {
			return number < 10 ? '0' + number : number;
		};

		this.render = function() {
			var date = new Date();

			$('.clock').html([
				_self.format(date.getHours()),
				_self.format(date.getMinutes()),
				_self.format(date.getSeconds())
			].join(':'));

			$('.date').html([
        moment().format("dddd, DD/MM/YYYY")
			]);
		};

		window.setInterval(this.render, 1000);
		this.render();
	};

	new renderClock();


// Main nav dropdown list effect //

	$('nav li').hover(
	  function () {
	    $('.submenu', this).toggle();
	});


// Tabs for accordion in contact details //

  $("ul.tabs li").click(function() {
    if (!$(this).hasClass("active")) {
			var tabNum = $(this).index();
			var nthChild = tabNum+1;
			$("ul.tabs li.active").removeClass("active");
			$(this).addClass("active");
			$(".tab.active").removeClass("active");
			$(".tab:nth-child("+nthChild+")").addClass("active");
		}
	});


//  Accordion feature in contact details //

  $('.addressAccordion .accordion--content').hide();
	$('.addressAccordion .iconic.play:first').addClass('icon--down').parent().next().slideDown('slow');
	$('.addressAccordion .iconic.play').click(function() {
		if($(this).parent().next().is(':hidden')) {
			$('.addressAccordion .iconic.play').removeClass('icon--down').parent().next().slideUp('slow');
			$(this).toggleClass('icon--down').parent().next().slideDown('slow');
		}
	});

});
	p {
	line-height: 18px;
	}

	.contactItem {
	padding-left: 15px;
	padding-right: 15px;
	margin-right: auto;
	margin-left: auto;
	}

	.contactItem>header {
	padding-top: 45px;
	overflow: hidden;
	margin-bottom: 20px;
	}

	.contactItem .col1 {
	width: 45.76271%;
	float: left;
	margin-right: 1.69492%;
	}

	.contactItem .col2 {
	width: 25.42373%;
	float: left;
	margin-right: 1.69492%;
	}

	.contactItem .col3 {
	width: 25.42373%;
	float: right;
	margin-right: 0;
	}

	.contactimage {
	width: 105px;
	height: 105px;
	background: $navi;
	float: left;
	margin-right: 15px;
	}

	.contactname {
	line-height: 36px;
	text-transform: uppercase;
	font-style: 32px;
	font-family: $inform3-font-bold;
	}

	.tabs {
	overflow: hidden;
	}

	.tabs li {
	width: 11.86441%;
	float: left;
	margin-right: 1.69492%;
	position: relative;
	}

	.tabs li span {
	display: block;
	padding: 4px 0 2px 10px;
	background: $navi;
	color: #000;
	cursor: pointer;
	}

	ul.tabs li.active span {
	background: #000;
	color: $navi;
	z-index: 1;
	}

	.tabs li.active span:after {
	border-bottom-color: #000;
	}

	.tabs li span:after {
	content: '';
	position: absolute;
	top: 0;
	right: -25px;
	border-bottom: 25px solid $navi;
	border-right: 25px solid transparent;
	}

	.tabs li.active span:after {
	z-index: 1;
	}

	.tabviews header {
	position: relative;
	background: #000;
	cursor: pointer;
	}

	.tabviews header:before,
	.tabviews header:after {
	content: '';
	position: absolute;
	top: 0;
	background: inherit;
	width: 15px;
	height: 100%;
	display: block;
	border-bottom: inherit;
	}
	.tabviews header:before{
	left: -15px;
	}

	.tabviews header:after {
	right: -15px;
	}

	.tabviews .play {
	display: block;
	line-height: 1.7em;
	width: 100%;
	color: $navi;
	font-family: $inform3-font-light;
	}

	.iconic.play:before {
	content: '4';
	font-family: IconicStroke;
	margin: 0 5px 0 2px;
	font-size: 0.8em;
	display: inline-block;
	-moz-transition: all 5s linear;
	-webkit-transition: all 5s linear;
	transition: all 0.5s linear;
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}

	.tabviews .icon--down:before {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	}

	.tabviews header .plus {
	position: absolute;
	top: 0;
	right: 0;
	color: $navi;
	padding: 5px 0 5px 5px;
	}

	.iconic.plus:before {
	content: '+';
	font-family: IconicStroke;
	}

	.accordion--content {
	overflow: hidden;
	padding: 20px 0;
	}

	.accordion--toolbar {
	float: right;
	display: none;
	}

	.accordion--content:hover .accordion--toolbar {
	display: block;
	}

	.accordion--toolbar a:hover {
	background-color: $cyan;
	}

	.accordion--toolbar li {
	float: left;
	padding-right: 4px;
	padding-left: 4px;
	}

	.accordion--toolbar a {
	height: 22px;
	text-align: center;
	background: #b3b3b3;
	color: #fff;
	width: 38px;
	line-height: 22px;
	display: inline-block;
	}

	.iconic.remove:before {
	content: 't';
	font-family: IconicStroke;
	}

	.iconic.edit:before {
	content: 'p';
	font-family: IconicStroke;
	}

	.tab,
	.accordion--content {
	display: none;
	}

	.tab.active {
	display: block;
	}
	/* Contacts page */

	#contactListTitle {
	display: inline;
	float: left;
	padding-left: 15px;
	}

	.dataTables_info {
	height: 22px;
	line-height: 22px;
	padding: 11px 0;
	margin: 0 8px;
	display: inline;
	float: left;
	}

	.dataTables_paginate {
	@extend .dataTables_info;
	float: right;
	margin-right: 0;
	padding-right: 15px;

	}

	.dataTables_filter {
	@extend .dataTables_info;
	margin-right: 0;
	float: right;
	}

	input[type="text"] {
	@include box-sizing(border-box);
	padding: 4px 2px 0;
	border: 1px #666 solid;
	}

	.contactList {
	table-layout: fixed;
	width: 100%;
	float: right;
	margin-right: 0;
	display: table;
	}

	colgroup {
	display: table-column-group;
	}

	table thead {
	background: #000;
	color: #fff;
	}

	tr {
	display: table-row;
	}

	table tr th,
	table tr td {
	line-height: 22px;
	vertical-align: top;
	padding-right: 5px;
	}

	th,
	td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
	}

	#content table th,
	#content table td {
	padding-left: 15px;
	}

	table tbody tr {
	border-bottom: 1px #b3b3b3 solid;

	.sorting_1 {
	background: #fff;
	}
	}


	.sorting {

	&:nth-child(1) {
	width: 6.5%;
	}

	&:nth-child(2) {
	width: 16.2%;
	}

	&:nth-child(3) {
	width: 43%;
	}
	}

	.contactList tbody tr:hover td {
	background: $navi;
	}

	.contactList .toolbar {
	display: none;
	float: right;
	margin: 0;
	padding: 0;
	bottom: 0;
	overflow: hidden;

	li {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
	display: inline;
	float: left;
	padding-right: 8px;
	}

	a {
	height: 21px;
	text-align: center;
	background: #b3b3b3;
	border: 0;
	color: #fff;
	width: 38px;
	vertical-align: middle;

	&:hover {
	background: #00e1ff;
	}
	}
	}

	.contactList tbody tr:hover .toolbar {
	display: inline;

	a {
	display: inline-block;
	}
	}

	.iconic.trash_stroke:before {
	content: 't';
	font-family: IconicStroke;
	}

	.iconic.pen:before {
	content: 'p';
	font-family: IconicStroke;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link href="css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
	<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />

	<script src="js/moment.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script src="js/scripts.js"></script>
	<!--[if IE]>
	<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
	<![endif]-->
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<header class="main">
	<!-- Clock -->
	<time class="clock"></time>

	<div class="container">
	<!-- Logo + Date -->
	<div class="brand">
	<h1>Inform</h1>

	<time class="date"></time>
	</div>

	<nav class="mainmenu">

	<ul class="horizontal-list">

	<li><a href="dashboard.html">Dashboard</a></li>

	<li><a href="contacts.html">Contacts</a></li>

	<li><a href="#/calendar">Calendar</a></li>

	<li>
	<!-- Drop down list -->
	<a href="#">Projects</a>

	<ul class="submenu">

	<li><a href="#">Projekte</a></li>
	<li><a href="#">Stundenzettel</a></li>
	<li><a href="#">Materialbuch</a></li>
	<li><a href="#">Ressourcenplanung</a></li>
	<li><a href="#">Forecastplanung</a></li>
	<li class="line"></li>
	<li><a href="#">Angebote</a></li>
	<li><a href="#">Offene Posten</a></li>
	<li class="line"></li>
	<li><a href="#">Rechnungsausgang</a></li>
	<li><a href="#">Eingangsrechnungen</a></li>
	<li class="line"></li>
	<li><a href="#">Reports</a></li>
	<li class="line"></li>
	<li><a href="#">Kassenbuch</a></li>

	</ul>

	</li>

	<li>
	<!-- Drop down list -->
	<a href="#">Library</a>
	<ul class="submenu">

	<li><a href="#/wiki">Wiki</a></li>

	</ul>
	</li>
	</ul>
	</nav>

	<!-- Login/Logout + User name -->
	<div class="login">
	<a href="#logout" class="iconic stroke user after">User</a>
	</div>

	</div>

	</header>
	<!-- end of header -->

	<div id="content">

	<div class="contactItem">
	<header>

	<div class="col col1">
	<div class="contactimage"></div>
	<h2 class="contactname">Contact Name</h2>
	</div>

	<div class="col col2">
	<p>
	Fiktivstr. 76 <br>
	80336 Fablestadt <br>
	+49 89 530729-13 <br>
	<a href="mailto:contactname@something.de">contactname@something.de</a>
	</p>
	</div>

	<div class="col col3">
	<p>Date of birth: 01.01.2000</p>
	</div>

	</header>
	<div class="addressAccordion">

	<div class="tabLayout">

	<ul class="tabs">

	<li class="active">
	<span>Contact Information</span>
	</li>

	<li>
	<span>Business Information</span>
	</li>

	<li>
	<span>Tags</span>
	</li>

	<li>
	<span>History</span>
	</li>

	</ul>

	<div class="tabviews"> <!-- tabviews -->

	<div class="tab active">

	<div class="modelType">

	<header class="title">

	<span class="iconic stroke play">Address</span>
	<span class="iconic stroke plus"></span>

	</header>

	<div class="accordion--content">

	<div class="col1">
	Teststr. 101 <br>
	99999, Testburg
	</div>

	<div class="col2">
	Phone: <br>
	Website: <a href="#" target="_blank"></a><br>
	Email: <a href="mailto:"></a>
	</div>

	<div class="col3">

	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>

	</div>

	</div> <!-- accordion--content -->

	</div> <!-- modelType -->

	<div class="modelType">

	<header class="title">
	<span class="iconic stroke play rotate">Network</a>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content">

	<p>
	<a href="#" class="plus">Create a new private address</a>
	</p>

	</div> <!-- accordion--content -->

	</div> <!-- modelType -->

	<div class="modelType">

	<header class="title">
	<span class="iconic stroke play rotate">Staff members</a>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content">

	<div class="col1">
	<p>
	<a href="#">Contact person #1</a>
	</p>
	<p>Test</p>
	<p>PM</p>
	</div>

	<div class="col2">

	</div>

	<div class="col3">
	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>
	</div>

	</div> <!-- accordion--content -->

	</div> <!-- modelType -->

	</div> <!-- tab-0 -->

	<div class="tab">
	<div class="modelType">
	<header class="title">
	<span class="iconic stroke play rotate">Bank details</span>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content default">

	<div class="col1">
	Teststr. 101 <br>
	99999, Testburg
	</div>

	<div class="col2">
	Phone: <br>
	Website: <a href="#" target="_blank"></a><br>
	Email: <a href="mailto:"></a>
	</div>

	<div class="col3">

	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>

	</div>

	</div> <!-- accordion--content -->


	<header class="title">
	<span class="iconic stroke play rotate">Project settings</span>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content">

	<div class="col1">
	<p>Test</p>
	</div>
	<div class="col2">lorem ipsum</div>
	<div class="col3">

	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>
	</div>

	</div>

	</div> <!-- modelType -->

	</div> <!-- tab -->

	<div class="tab">
	<div class="modelType">
	<header class="title">
	<span class="iconic stroke play rotate">Tags</span>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content">

	<div class="col1">
	Lorem Ipsum
	</div>

	<div class="col2">
	Test
	</div>

	<div class="col3">

	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>

	</div>

	</div> <!-- accordion--content -->

	</div> <!-- modelType -->

	</div> <!-- tab -->

	<div class="tab">
	<div class="modelType">
	<header class="title">
	<span class="iconic stroke play rotate">Comments</span>
	<span class="iconic stroke plus"></span>
	</header>

	<div class="accordion--content default">
	<div class="col1">
	<p><a href="#">Create new comment</a></p>
	</div>

	<div class="col2">

	</div>

	<div class="col3">
	<ul class="accordion--toolbar">

	<li>
	<a href="#" class="iconic stroke remove"></a>
	</li>

	<li>
	<a href="#" class="iconic stroke edit"></a>
	</li>

	</ul>
	</div>

	</div>

	</div> <!-- modelType -->

	</div> <!-- tab -->

	</div> <!-- tabviews -->

	</div> <!-- tabLayout -->

	</div> <!-- addressAccordion -->

	</div> <!-- contactItem -->

	</div> <!-- #content-->

	<footer class="main">
	<div class="container">
	Inform 3.0
	</div>
	</footer>

	</body>
	</html>
	$(function () {


	// Main nav clock //

	var renderClock = function() {

	var _self = this;

	this.format = function(number) {
	return number < 10 ? '0' + number : number;
	};

	this.render = function() {
	var date = new Date();

	$('.clock').html([
	_self.format(date.getHours()),
	_self.format(date.getMinutes()),
	_self.format(date.getSeconds())
	].join(':'));

	$('.date').html([
	moment().format("dddd, DD/MM/YYYY")
	]);
	};

	window.setInterval(this.render, 1000);
	this.render();
	};

	new renderClock();


	// Main nav dropdown list effect //

	$('nav li').hover(
	function () {
	$('.submenu', this).toggle();
	});


	// Tabs for accordion in contact details //

	$("ul.tabs li").click(function() {
	if (!$(this).hasClass("active")) {
	var tabNum = $(this).index();
	var nthChild = tabNum+1;
	$("ul.tabs li.active").removeClass("active");
	$(this).addClass("active");
	$(".tab.active").removeClass("active");
	$(".tab:nth-child("+nthChild+")").addClass("active");
	}
	});


	// Accordion feature in contact details //

	$('.addressAccordion .accordion--content').hide();
	$('.addressAccordion .iconic.play:first').addClass('icon--down').parent().next().slideDown('slow');
	$('.addressAccordion .iconic.play').click(function() {
	if($(this).parent().next().is(':hidden')) {
	$('.addressAccordion .iconic.play').removeClass('icon--down').parent().next().slideUp('slow');
	$(this).toggleClass('icon--down').parent().next().slideDown('slow');
	}
	});

	});