claranet worklife documentation

by Jason Rose

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="header">
  <div class="headerouter">
    <div id="headeritemleftlogo">
      <span>
        <img src="http://www.claranet.pt/sites/all/themes/claranet_2011/logo.png" height="40px">
        <h1>WorkLife Email Documentation</h1>
      </span>
      </div>
      <div id="headeritemright">
        menu
        </div>
      <div id="headeritemright">
        menu
        </div>
  </div>
</div>
<div id="NavMenu">
    
    
    <div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1"><span>Control Panel</span></a>
        <div id="accordion-1" class="accordion-section-content">
            <p><a href="#anctest">Mauris</a></p>
            <p><a href="#">Mauris</a></p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-2"><span>Outlook 2013</span></a>
        <div id="accordion-2" class="accordion-section-content">
            <p><a href="#">Mauris</a></p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-3"><span>Outlook 2010</span></a>
        <div id="accordion-3" class="accordion-section-content">
            <p><a href="#">Mauris</a></p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-4"><span>Outlook 2007</span></a>
        <div id="accordion-4" class="accordion-section-content">
            <p><a href="#">Mauris</a></p>
        </div><!--end .accordion-section-content-->
    </div><!--end...

CSS

html {
    font-family:'Roboto', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 700;
  src: local('Segoe UI Bold'), local('SegoeUI-bold'), local('segoeuib');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 600;
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 400;
  src: local('Segoe UI'), local('SegoeUI');
}
@font-face {
  font-family: 'Myname';
  font-style: normal;
  font-weight: 300;
  src: local('Segoe UI Light'), local('SegoeUI-Light');
}
body {
 font-family: 'Segoe UI Light';
  font-weight: 100;
}
body, html {
    height:100%;
    min-height:100%
    font-size: 100%;
    padding: 0;
    margin: 0;
    color: #6D7B89;
}
body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	background-color: #ffffff;
}
body::-webkit-scrollbar {
	width: 4px;
	background-color: #ffffff;
}
body::-webkit-scrollbar-thumb {
	background-color: #6D7B89;
}
#NavMenu::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
	background-color: #ffffff;
}
#NavMenu::-webkit-scrollbar {
	width: 0px;
	background-color: #ffffff;
}
#NavMenu::-webkit-scrollbar-thumb {
	background-color: #6D7B89;
}
a {
    text-decoration: none;
}
a.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.content {
    height:auto;
    min-height:100%;
    background: #f5f5f5;
    overflow: auto;
}
.main {
    height:auto;
    min-height:100%;
    /*background:#ffffff;*/
    padding-left:310px;
    padding-right: 35px; 
    margin-top: 100px;
    padding-bottom: 50px;
}
.content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
#header {
    top: 0;
    height: 80px;
    width: 100%;
    position: fixed;
    z-index:...

JavaScript

// Nav Menu Open / Close
    $('#TogleMenu').click(function(){
        if ($('#NavMenu').is(':hidden')) {
            $('#NavMenu').show('slide',{direction:'left'},250 );
            var padding = $('.main').css('padding-left');
            var newPadding = (padding=='310px')?'310px':'310px';
            $('.main').css('padding-left',newPadding);
           
        } else {
            $('#NavMenu').hide('slide',{direction:'left'},250);
            var padding = $('.main').css('padding-left');
            var newPadding = (padding=='0px')?'310px':'10px';
            $('.main').css('padding-left',newPadding);
        }
    });
    
    
    // Limit characters in bookmark
    $('.accordion-section span').each(function (i) {
        n = 27;
        l = $(this).text().length;
        if (l > n) $(this).text($(this).text().substr(0, n) + '...');
    });
    
    $('.accordion-section a').each(function (i) {
        n = 35;
        l = $(this).text().length;
        if (l > n) $(this).text($(this).text().substr(0, n) + '...');
    });
    //stop scrolling
    $( '#NavMenu' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;
        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
        });

$('.menu > li').click(function() {
   $('.menu > li').not(this).find('ul').hide();
   $(this).find('ul').toggle();
});

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
 
    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');
 
        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            // Add active class to section...