h1: iDash logo (header) - 200%

h2: Employee Name/ID, Process Headlines - 150%

h3: My Notifications Employee ID #

h4: Milestone Headlines, Alert Headlines - 100% (16px)

p: Paragraph text looks like this. - 95%

p class="font-smaller": Font-smaller paragraph text looks like this. (class="font-smaller" can be used with any headline or paragraph tags to reduce size by 85%) - 85%

p class="font-small": Font-small paragraph text looks like this. - 75%

<div class="alert--complete">
<div><span class="fa fa-check fa-lg fa-fw complete"></span></div>
<div class="alert__flex--content"><h4>Complete alert headline here.</h4></div>
</div>

---

<div class="alert--witness">
<div><span class="fa fa-info fa-lg fa-fw notice"></span></div>
<div class="alert__flex--content"><h4>[insert witness name/badge #] signed as witness.</h4></div>
</div>

---

<div class="alert--complete-legacy">
<div><span class="fa fa-check fa-lg fa-fw complete"></span></div>
<div class="alert__flex--content">
<h3>This is a simple COMPLETE alert, with borders (legacy).</h3>
</div>
</div>

---

<div class="alert--notice">
<div><span class="fa fa-info fa-lg fa-fw notice"></span></div>
<div class="alert__flex--content">
<h4>This is a simple NOTICE alert. Headline text will wrap if it gets long enough.</h4>
</div>
</div>

---

<div class="alert--notice">
<div><span class="fa fa-info fa-lg fa-fw notice"></span></div>
<div class="alert__flex--content">
<h4>This is a NOTICE alert with additional paragraph information.</h4>
<p>More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here.</p>
</div>
</div>

---

<div class="alert--notice">
<div><span class="fa fa-info fa-lg fa-fw notice"></span></div>
<div class="alert__flex--content">
<h4>This is a NOTICE alert with additional bulleted information.</h4>
<ul>
<li>Bullet point goes here. More info goes here. More info goes here. More info goes here. More info goes here.</li>
<li>Bullet point goes here.</li>
<li>Bullet point goes here.</li>
</ul>
</div>
</div>

---

<div class="alert--warning">
<div><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span></div>
<div class="alert__flex--content">
<h4>This is a simple WARNING alert.</h4>
</div>
</div>

---

<div class="alert--warning">
<div><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span></div>
<div class="alert__flex--content">
<h4>This is a WARNING alert with additional paragraph information.</h4>
<p>More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here.</p>
</div>
</div>

---

<div class="alert--warning">
<div><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span></div>
<div class="alert__flex--content">
<h4>This is a WARNING alert with additional bulleted information.</h4>
<ul>
<li>Bullet point goes here. More info goes here. More info goes here. More info goes here. More info goes here.</li>
<li>Bullet point goes here.</li>
<li>Bullet point goes here.</li>
</ul>
</div>
</div>

---

<div class="alert--warning">
<div><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span></div>
<div class="alert__flex--content">
<h4>Signature(s) required from:</h4>
<div class="alert__flex--item">
<div class="marginTop5">
<ul>
<li>[insert employee name/badge #]</li>
<li>[insert manager name]</li>
</ul>
</div>
<div class="marginTop5">
<input type="button" name="" id="" value="Acquire Signature(s)" class="button--save" />
</div>
</div>
</div>
</div>

---

<div class="alert--warning">
<div><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span></div>
<div class="flex-container__row-spacebtwn-top">
<h4>This is an ACTIONABLE alert with a checkbox (icon optional).</h4>
<div>
<form action="index.html" class="checkbox">
<input name="refuse-SO" id="refuse-SO" type="checkbox" />
Refuses to Sign
</form>
</div>
</div>
</div>

---

<div class="alert--danger">
<div><span class="fa fa-exclamation-circle fa-lg fa-fw danger"></span></div>
<div class="alert__flex--content">
<h4>This is a simple DANGER alert.</h4>
</div>
</div>

---

<div class="alert--danger">
<div><span class="fa fa-exclamation-circle fa-lg fa-fw danger"></span></div>
<div class="alert__flex--content">
<h4>This is a DANGER alert with additional paragraph information.</h4>
<p>More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here. More info goes here.</p>
</div>
</div>

---

<div class="alert--danger">
<div><span class="fa fa-exclamation-circle fa-lg fa-fw danger"></span></div>
<div class="alert__flex--content">
<h4>This is a DANGER alert with additional bulleted information.</h4>
<ul>
<li>Bullet point goes here. More info goes here. More info goes here. More info goes here. More info goes here.</li>
<li>Bullet point goes here.</li>
<li>Bullet point goes here.</li>
</ul>
</div>
</div>

---

<div class="alert--neutral">
<div class="alert__flex--content">
<h4>This is a NEUTRAL/POPUP alert with additional information.</h4>
<p>More info goes here.</p>
</div>
</div>

Complete

Re-Open

Large green button w/ dark green rollover

<button name="uniqueID" class="button--complete" value="Complete" />Complete</button>

---

Complete as Exception

Large gray button w/ dark green rollover

<button name="uniqueID" class="button--exception" value="Complete as Exception" />Complete as Exception</button>

---

Save

Large gray button w/ blue rollover

<button name="uniqueID" class="button--generic" value="Save" />Save</button>

---

Cancel

Large gray button w/ red rollover

<button name="uniqueID" class="button--cancel" value="Cancel" />Cancel</button>

---

Defective

Large gray button w/ red text and red rollover

<button name="uniqueID" class="button--defective" value="Defective" /><span class="fa fa-lg fa-fw fa-exclamation-circle"></span> Defective</button>

---

OK

Large gray button w/ green text and dark green rollover

<button name="uniqueDocID" class="button--ok" value="OK" /><span class="fa fa-lg fa-fw fa-check"></span> <strong>OK</strong></button>

---

Return to Milestone (Sign-off)
Apply: 006 Employee Ill (FMLA sidebar)

Small green button w/ dark green rollover

<button name="uniqueID" class="button--complete" value="Return to Milestone" />Return to Milestone</button>

---

Save (Notes)
Retrieve Absences (Grouping)

Small gray button w/ blue rollover

<button name="uniqueID" class="button-small button--save" value="Save" />Save</button>
<button name="uniqueID" class="button-small button--generic" value="Retrieve Absences" />Retrieve Absences</button>

---

Cancel (Notes)
Remove: 003 Continuous (FMLA sidebar)

Small gray button w/ red rollover

<button name="uniqueID" class="button-small button--cancel" value="Cancel" />Cancel</button>

---

Button Groups

For right-aligned buttons:

<div class="flex-container__button">
Insert button code here.
</div>

---

For left-aligned buttons:

<div class="flex-container__button-left">
Insert button code here.
</div>

CANNOT USE BOOTSTRAP.CSS with this code; the hover list will NOT work.

<!-- START NOTIFICATION CARD -->
<div class="flex-item__notifications">
<div class="flex-item__notifications--info">
<!-- notification image-->
<div class="flex-item__avatar-notification">
<div class="avatar-circle"><a href="PAGE.HTML" tabindex="-1" aria-hidden="true"><img src="IMAGE.JPG" alt="" /></a></div>
</div>
<!-- end notification image -->
<!-- employee name/badge id -->
<div class="flex-item__name"><a href="PAGE.HTML">
<h3>EMPLOYEE ID</h3>
<h4 class="font-thin">EMPLOYEE NAME</h4>
</a></div>
<!-- end employee name/badge id -->
</div>
<div class="flex-item__notifications--info">
<!-- notification number/icon -->
<div class="padLeft padRight">
<div class="tooltip__trigger" style="cursor: pointer;" tabindex="0">
<div class="notification-number__danger">
<div><a href="TOOLTIP-TRIGGER.HTML">2</a></div>
</div>
<div class="tooltip-container">
<div class="tooltip">
<div class="triangle-top"></div>
<ul>
<li class="notification__link-hover"><a href="PAGE.HTML">NOTIFICATION</a></li>
<li class="notification__link-hover"><a href="PAGE.HTML">NOTIFICATION</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- end notification number/icon -->
</div>
</div>
<!-- end notifications card -->

This code has an non-hoverable alert number.

<!-- START CARD GROUP -->
<div id="flex-container__boxes">
<!-- START BUTTON 1 -->
<div class="flex-item__box--clickable" onClick="location.href='ps-equipment-list.shtml'">
<div class="flex-container__row-flexstart padAll">
<!-- icon image-->
<div> <span class="fa fa-2x fa-fw fa-search"></span> </div>
<!-- process sheet category -->
<div class="flex-item__name padLeft">
<h3><a href="ps-equipment-list.shtml">General Inspections</a></h3>
</div>
</div>
<div class="flex-item__notifications--info">
<!-- pending processes number/icon -->
<div class="notification-number__danger marginRight">
<div>5</div>
<!-- NOTE: do not count submitted inspections -->
</div>
</div>
</div>
<!-- end button 1 -->
<!-- START BUTTON 2 -->
<div class="flex-item__box--clickable" onClick="location.href='#'">
<div class="flex-container__row-flexstart padAll">
<!-- icon image-->
<div> <span class="fa fa-2x fa-fw fa-superpowers"></span> </div>
<!-- process sheet category -->
<div class="flex-item__name padLeft">
<h3><a href="#">Belts</a></h3>
</div>
</div>
<div class="flex-item__notifications--info">
<!-- pending processes number/icon -->
<div class="notification-number__warning marginRight">
<div>9</div>
</div>
</div>
</div>
<!-- end button 2 -->
<!-- START LAST: empty spacer: PLACE AT THE END OF ALL BUTTON GROUPS -->
<div class="flex-item__box--clickable">
<div class="flex-container__row-flexstart padAll"> &nbsp; </div>
</div>
<!-- end last -->
</div>
<!-- end card group -->

<!-- START BUTTON 1 -->
<div class="flex-item__box--clickable marginBottom5 highlight--danger" onClick="location.href='#'">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart padAll">
<!-- icon image-->
<div> <span class="fa fa-2x fa-fw fa-search"></span> </div>
<!-- Process Sheet Category -->
<div class="flex-item__name padLeft">
<h3><a href="#">Evaluation</a></h3>
</div>
</div>
<div class="flex-container__row-flexend">
<div class="marginRight20"><em>[insert clocked-in employee name]</em></div>
<div class="marginRight">[insert % complete]</div>
</div>
</div>
</div>
<!-- end button 1 -->

Module: Custom JS. Must click +/- to expand/collapse:

<!-- START MODULE -->
<div class="module highlight--warning">
<!-- START MODULE HEADER -->
<div class="module__heading" id="">
<h4><span class="fa fa-exclamation-triangle fa-lg fa-fw warning"></span> Module headline</h4>
<div><a class="module__expand-collapse collapsed" href="#/"> <span class="fa fa-lg fa-fw fa-plus"></span><span class="fa fa-lg fa-fw fa-minus"></span></a></div>
</div>
<!-- END MODULE HEADER-->
<!-- START COLLAPSIBLE AREA -->
<div id="" class="module-collapse collapse">
<div class="module__content" id="" style="display: block">
<p>All content goes here.</p>
<div class="flex-container__button">Buttons go inside this div.</div>
<!-- START BOTTOM LINKS -->
<div class="flex-container__row-spacebtwn padTop padLeft padRight">
<div><a href="#" class="font-small marginRight20"><span class="fa fa-desktop fa-lg fa-fw"></span> &nbsp;Print Snapshot</a><a href="#" class="font-small"><span class="fa fa-file-text-o fa-lg fa-fw"></span>&nbsp;Audit Log</a></div>
<div class="font-small">#unique doc id</div>
</div>
<!-- END BOTTOM LINKS -->
</div>
</div>
<!-- END COLLAPSIBLE AREA -->
</div>
<!-- END MODULE -->

Use this module/card when you DON'T want an accordian effect, and want all modules to remain open until manually closed. Uses Bootstrap JS and modified Bootstrap CSS.

Primary use: Absence Hub

<!-- START CARD -->
<div class="card highlight--warning">
<!-- START CARD HEADLINE -->
<div class="card-header accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" role="tab" id="heading1">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart">
<div>
<h3 class="marginRight20"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><span class="fa fa-check fa-lg complete"></span> Headline Goes Here</a></h3>
</div>
</div>
<div class="flex-container__row-flexend clickable">
<div class="marginRight20">Right-aligned content</div>
</div>
</div>
</div>
<!--- end card headline --->
<!-- START COLLAPSIBLE CONTENT -->
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1"> <!-- add class "show" to show contents on default -->
<div class="card-block">
<div class="module__content">
<!-- START CONTENTS -->
<div class="flex-container__row-spacebtwn-top">
<div class="module__heading">
<h4>Sub-Headline Goes Here</h4>
</div>
<div>
<p><a href="#"><span class="fa fa-file-text-o fa-lg"></span>&nbsp;Print Record</a></p>
</div>
</div>
<!-- START MAIN CONTENT-->
<p>Content goes here.</p>
<!-- end main content-->
<!-- START BOTTOM LINKS -->
<div class="flex-container__row-spacebtwn padTop padLeft padRight">
<div>
<a href="#" class="font-small marginRight20"><span class="fa fa-desktop fa-lg"></span> &nbsp;Print Snapshot</a>
<a href="#" class="font-small"><span class="fa fa-file-text-o fa-lg"></span>&nbsp;Audit Log</a>
</div>
<div class="font-small">#unique doc id</div>
</div>
<!-- end bottom links -->
</div>
<!-- end module__content -->
</div>
<!-- end card-block -->
</div>
<!-- end collapsible content -->
</div>
<!--- end card 4 --->

Use this module/card when you WANT an accordian effect, where an open module automatically closes when a another module is clicked/opened. Uses Bootstrap JS and modified Bootstrap CSS.

Primary use: eProcess Sheets

Use the Standard Cards/Modules code above, and put it inside this div:

<div id="accordion" role="tablist" aria-multiselectable="true" class="marginBottom20">
<!-- INSERT MODULE/CARDS CODE HERE -->
</div>

<!-- START CARD 1 -->
<div class="card highlight--complete">
<!-- START CARD HEADLINE -->
<div class="card-header accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" role="tab" id="heading1">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart">
<div class="col-180">
<h3 class="marginRight20"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><span class="fa fa-lg fa-fw fa-check complete marginRight"></span><span class="fa fa-lg fa-fw fa-bus"></span> 3238</a></h3>
</div>
<div class="col-100">48000N</div>
<div class="col-100">1,111</div>
</div>
<div class="flex-container__row-flexend clickable"><!-- CLICKABLE class adds +/- to the row -->
<div class="marginRight20"><em></em></div>
<div class="marginRight20">SUBMITTED</div>
</div>
</div>
</div>
<!--- end card headline --->
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1"> <!-- add class "show" to show contents on default -->
<div class="card-block">
<!-- START COLLAPSIBLE CONTENT -->
<div class="module__content">

<!-- START BUTTON 1 -->
<div class="flex-item__box--clickable marginBottom5 highlight--complete" onClick="location.href='[insert url here]'">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart padAll">
<div><span class="fa fa-2x fa-fw fa-search"></span></div><!-- icon image-->
<!-- Process Sheet Category -->
<div class="flex-item__name padLeft">
<h3><a href="[insert url here]">Evaluation</a></h3>
</div>
</div>
<div class="flex-container__row-flexend">
<div class="marginRight20"><em>[insert employee name here]</em></div>
<div class="marginRight">[insert % complete here]</div>
</div>
</div>
</div>
<!-- end button 1 -->

<!-- START BUTTON 2 -->
<div class="flex-item__box--clickable highlight--complete" onClick="location.href='[insert url here]'">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart padAll">
<div><span class="fa fa-2x fa-fw fa-wrench"></span></div><!-- icon image-->
<!-- Process Sheet Category -->
<div class="flex-item__name padLeft">
<h3><a href="[insert url here]">Service</a></h3>
</div>
</div>
<div class="flex-container__row-flexend">
<div class="marginRight20"><em>[insert employee name here]</em></div>
<div class="marginRight">[insert % complete here]</div>
</div>
</div>
</div>
<!-- end button 2 -->

<!-- START WO INFO DATA -->
<div class="flex-container__row-spacebtwn" style="margin: 3px;">
<div class="flex-container__col-flexstart" style="top: 0;">
<div>
<p class="font-small">Work Order #</p>
</div>
<div>
<p class="marginTop0">[insert work order # here]</p>
</div>
</div>
<div class="flex-container__col-flexstart" style="top: 0;">
<div>
<p class="font-small">Min Scan Date</p>
</div>
<div>
<p class="marginTop0">[insert min scan date here]</p>
</div>
</div>
<div class="flex-container__col-flexstart" style="top: 0;">
<div>
<p class="font-small">Last Run</p>
</div>
<div>
<p class="marginTop0">[insert last run date here]</p>
</div>
</div>
<div class="flex-container__col-flexstart" style="top: 0;">
<div>
<p class="font-small">Stub Flag</p>
</div>
<div>
<p class="marginTop0">[insert stub flag here]</p>
</div>
</div>
</div>
<!--- end wo info data --->

<!-- START ACTIVE WO/WR MODULE -->
<div class="card highlight--neutral" style="margin: 3px;">
<!-- START CARD HEADLINE -->
<div class="card-header card-header-tight accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseA" role="tab" id="headingA">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart">
<div>
<h4 class="marginRight20"><a class="collapsed" data-toggle="collapse" href="#collapseA" aria-expanded="false" aria-controls="collapseA">Active Work Requests/Orders</a></h4>
</div>
</div>
<div class="flex-container__row-flexend clickable"><!-- CLICKABLE class adds +/- to the row -->
<div class="marginRight20"><em></em></div>
<div class="marginRight20"></div>
</div>
</div>
</div>
<!--- end card headline --->
<div id="collapseA" class="collapse" role="tabpanel" aria-labelledby="headingA"> <!-- add class "show" to show contents on default -->
<div class="card-block">
<!-- START COLLAPSIBLE CONTENT -->
<div class="module__content">
<div class="absence-table__ER">
<table>
<tr class="tr_borderTop">
<th align="left">Order #</th>
<th align="left" class="padLeft">Procedure id / Description</th>
<th align="left">Status</th>
<th align="left">Date</th>
</tr>
<tr>
<td align="left">[insert WO/WR # here]</td>
<td align="left" class="font-thin padLeft">[insert procedure id/description here]</td>
<td align="left" class="font-thin">[insert status here]</td>
<td align="left" class="font-thin">[insert date here]</td>
</tr>
<tr>
<td align="left">[insert WO/WR # here]</td>
<td align="left" class="font-thin padLeft">[insert procedure id/description here]</td>
<td align="left" class="font-thin">[insert status here]</td>
<td align="left" class="font-thin">[insert date here]</td>
</tr>
</table>
</div>
</div>
<!-- end collapsible content -->
</div>
</div>
</div>
<!--- end active wo/wr module --->

<!-- START WORK HISTORY MODULE -->
<div class="card highlight--neutral" style="margin: 3px;">
<!-- START CARD HEADLINE -->
<div class="card-header card-header-tight accordion-toggle collapsed" data-toggle="collapse" data-target="#collapseB" role="tab" id="headingB">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart">
<div>
<h4 class="marginRight20"><a class="collapsed" data-toggle="collapse" href="#collapseB" aria-expanded="false" aria-controls="collapseB">Work History</a></h4>
</div>
</div>
<div class="flex-container__row-flexend clickable">
<div class="marginRight20"><em></em></div>
<div class="marginRight20"></div>
</div>
</div>
</div>
<!--- end card headline --->
<div id="collapseB" class="collapse" role="tabpanel" aria-labelledby="headingB"> <!-- add class "show" to show contents on default -->
<div class="card-block">
<!-- START COLLAPSIBLE CONTENT -->
<div class="module__content">
<div class="absence-table__ER">
<table>
<tr class="tr_borderTop">
<th align="left" valign="top">Date</th>
<th align="left" valign="top" class="padLeft">W/O#</th>
<th align="center" valign="top" class="padLeft">STATUS</th>
<th align="center" valign="top" class="padLeft"><nobr>PROC ID</nobr></th>
<th align="left" class="padLeft">Comments</th>
</tr>
<tr>
<td valign="top">[insert date here]</td>
<td valign="top" class="font-thin padLeft">[insert W/O# here]</td>
<td align="center" valign="top" class="font-thin padLeft">[insert status here]</td>
<td align="center" valign="top" class="font-thin padLeft">[insert PROC ID here]</td>
<td valign="top" class="font-thin padLeft"><em >[insert defect comments here]</em>
<p style="border-top: 1px dashed gray; padding-top: 10px;">[insert repair comments here]</p></td>
</tr>
</table>
</div>
</div>
<!-- end collapsible content -->
</div>
</div>
</div>
<!--- end work history module --->
</div>
<!-- end collapsible content -->
</div>
</div>
</div>
<!--- end card 1 --->

When using this code, attach the standard css files (common, desktop, tablet, and mobile) and be sure to remove all the style="border: 1px solid black; padding: 5px;" -- the border is just a mock-up visual aid.

Hamburger menu

<!-- Latest Bootstrap CSS (4.0 Alpha) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

<!-- CUSTOM CSS -->
<link rel="stylesheet" href="../PSHEETS-wip/iDash-CSS/common.css" type="text/css" />
<link rel="stylesheet" href="iDash-CSS/common-p2.css" type="text/css" media="only screen and (min-width: 1025px)" />
<link rel="stylesheet" href="iDash-CSS/desktop-p2.css" type="text/css" media="only screen and (min-width: 1025px)" />
<link rel="stylesheet" href="iDash-CSS/tablet-p2.css" type="text/css" media="only screen and (max-width: 1024px)" />
<link rel="stylesheet" href="iDash-CSS/mobile-p2.css" type="text/css" media="only screen and (max-width: 450px)" />
<link rel="stylesheet" href="iDash-CSS/bs-overrides.css" type="text/css" />
<meta name="viewport" content="initial-scale=1.0" />

<!-- JQUERY -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- CUSTOM JAVASCRIPT -->
<script type="text/javascript" src="iDash-CSS/slide-out-menu-script.js"></script>
<script type="text/javascript" src="iDash-CSS/idash.module.js"></script><!-- only needed for old module expand/collapse -->

<!-- FONT AWESOME -->
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/c96ff9505b.js"></script>

<!-- GOOGLE FONTS -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300,400,500,600,700" />

<!-- Latest Bootstrap JavaScript (4.0 Alpha) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<!-- ---------------------------------------- -->
<!-- START HAMBURGER NAV (for mobile devices) -->
<header>
Hamburger menu
</header>
<!--- end hamburger nav (for mobile devices) --->

<!-- START SITE WRAPPER (to allow hamburger menu to sit on top of site) -->
<div class="wrapper">

<!-- START SITE HEADER -->
<div style="border: 1px solid black; padding: 5px;">
Header
</div>
<!-- end site header -->

<!-- START SIDE MARGINS -->
<div class="sideMargins">

<!-- START CONTENT CONTAINER -->
<div id="flex-container__site-body">

<!-- START SECTION 1: name container for mobile -->
<div id="container__section1" style="border: 1px solid black; padding: 5px;">
Section 1 (mobile only)
</div>
<!--- end section 1: name container for mobile --->

<!-- START SECTION 2: INFO CONTAINER -->
<div id="flex-container__section2" style="border: 1px solid black; padding: 5px;">
Section 2 (employee info section)
</div>
<!--- end section 2: info container --->

<!-- START INSIDE CONTENT CONTAINER -->
<div id="flex-container__body2">

<!-- START SECTION 3: SECONDARY CONTENT -->
<div class="flex-item__section3" style="border: 1px solid black; padding: 5px;"><!-- add class "no-content" to hide this section and make Section 4 fill the space -->
Section 3 (secondary content)
</div>
<!--- end section 3: secondary content --->

<!-- START SECTION 4: PRIMARY CONTENT -->
<div class="flex-item__section4" role="main" style="border: 1px solid black; padding: 5px;">
Section 4 (primary content)
</div>
<!--- end section 4: primary content --->
</div>
<!--- end inside content container --->
</div>
<!--- end content container --->
</div>
<!--- end side margins --->
</div>
<!--- end site wrapper (to allow hamburger menu to sit on top of site) --->

<!-- START SITE HEADER -->
<div class="header" role="banner">
<!-- start sidemargings for wide desktop -->
<div class="sideMargins">
<!-- start flex-container__header -->
<div id="flex-container__header">
<!-- START HEADER-a: TOP 1/2 HEADER -->
<div class="flex-container__row-spacebtwn width100">
<!-- start iDash logo -->
<div role="button" tabindex="0" id="flex-container__logo" onClick="location.href='index.shtml'" onKeyPress="location.href='index.shtml'" style="cursor: pointer;">
<div><img src="iDash-images/met-logo.png" width="40" height="40" /></div>
<div class="idash-logo">
<h1>iDash</h1>
</div>
</div>
<!--- end iDash logo --->
<!-- start iDash search bar -->
<!-- end iDash seach bar --->
</div>
<!--- end header-a: top 1/2 header --->
</div>
<!--- end flex-container__header --->
</div>
<!--- end sidemargins --->
<!-- START HEADER-B: TABBED NAV -->
<div style="background-color: #252525;">
<div class="sideMargins">
<div class="flex-container__row-spacebtwn--tabnav width100 desktop-only">
<div class="wrapper-tab">
<nav role="navigation" aria-label="Employee Process Menu">
<ul role="menubar" id="tab-nav" class="menu">
<div class="tab-fixed" onClick="location.href='#'"><a href="#" tabindex="0">My Notifications</a></div>
<li role="menuitem" class="menu-item-has-children" onClick="location.href='#'"><a href="#" aria-haspopup="true">New</a>
<ul role="menu" aria-hidden="true">
<li role="menuitem" onClick="location.href='#'"><a href="#">Admin Leave</a></li>
<li role="menuitem" onClick="location.href='#'"><a href="#">Coaching</a></li>
<li role="menuitem" onClick="location.href='#'"><a href="#">FMLA Packet</a></li>
</ul>
</li>
<li role="menuitem" class="menu-item-has-children" onClick="location.href='#'">
<div class="flex-container__row-center"> <a href="#" aria-haspopup="true" name="absenceTab">Absence</a> <!-- name attribute used for skip menu jump to here -->
<span class="fa fa-chevron-down neutral" aria-hidden="true"></span>
<div class="notification-number__danger-xs marginLeft">
<div>6</div>
</div>
</div>
<ul role="menu" aria-hidden="true">
<li role="menuitem" class="flex-container__menurow-spacebtwn" onClick="location.href='#';"> <a href="#">Absence Hub</a>
<div class="flex-container__row-flexend">
<div class="notification-number__notice-xs">
<div>2</div>
</div>
<div class="notification-number__warning-xs">
<div>1</div>
</div>
<div class="notification-number__danger-xs">
<div>1</div>
</div>
</div>
</li>
<li role="menuitem" class="flex-container__menurow-spacebtwn" onClick="location.href='#'"> <a href="#">Admin Leave</a>
<div class="flex-container__row-flexend">
<div class="notification-number__warning-xs">
<div>1</div>
</div>
</div>
</li>
<li role="menuitem" class="flex-container__menurow-spacebtwn" onClick="location.href='#'"> <a href="#">FMLA Hub</a> </li>
<li role="menuitem" class="flex-container__menurow-spacebtwn" onClick="location.href='#'"> <a href="#">Leave of Absence</a>
<div class="flex-container__row-flexend">
<div class="notification-number__notice-xs">
<div>1</div>
</div>
</div>
</li>
</ul>
</li>
<li role="menuitem" onClick="location.href='#'">
<div class="flex-container__row-center"> <a href="#" name="disabilityTab">Disability</a><!-- name attribute used for skip menu jump to here -->
<div class="notification-number__notice-xs marginLeft">
<div>1</div>
</div>
</div>
</li>
<li class="menu-item-has-children" role="menuitem" onClick="location.href='#'">
<div class="flex-container__row-center"> <a href="#" aria-haspopup="true">Development</a> <span class="fa fa-chevron-down neutral" aria-hidden="true"></span>
<div class="notification-number__warning-xs marginLeft">
<div>1</div>
</div>
</div>
<ul role="menu" aria-hidden="true">
<li role="menuitem" onClick="location.href='#'"><a href="#">Probation/Evaluation</a></li>
<li class="submenu-item-has-children" role="menuitem" onClick="location.href='#'">
<div class="flex-container__row-spacebtwn">
<div class="flex-container__row-flexstart"> <a href="#" aria-haspopup="true">Training</a> <span class="fa fa-chevron-right neutral" aria-hidden="true" style="font-size: 10px; padding-left: 5px;"></span> </div>
<div class="notification-number__warning-xs">
<div>1</div>
</div>
</div>
<ul role="menu" aria-hidden="true">
<li role="menuitem" class="flex-container__menurow-spacebtwn" onClick="#'"> <a href="#">Coaching</a>
<div class="flex-container__row-flexend">
<div class="notification-number__warning-xs">
<div>1</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="empty-tab" aria-hidden="true">&nbsp;</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- end header-b: tabbed nav -->
</div>
<!--- end site header --->

<!-- START SITE HEADER -->
<div class="header" role="banner">
<!-- start sidemargings for wide desktop -->
<div class="sideMargins">
<!-- start flex-container__header -->
<div id="flex-container__header">
<!-- START HEADER-a: TOP 1/2 HEADER -->
<div class="flex-container__row-spacebtwn width100">
<!-- start iDash logo -->
<div role="button" tabindex="0" id="flex-container__logo" onClick="location.href='index.shtml'" onKeyPress="location.href='index.shtml'" style="cursor: pointer;">
<div><img src="iDash-images/met-logo.png" width="40" height="40" /></div>
<div class="idash-logo">
<h1>eProcess Sheets</h1>
</div>
</div>
<!--- end iDash logo --->
<!-- start iDash search bar -->
<!-- end iDash seach bar --->
</div>
<!--- end header-a: top 1/2 header --->
</div>
<!--- end flex-container__header --->
</div>
<!--- end sidemargins --->
<!-- START HEADER-B: TABBED NAV -->
<div class="width100 marginTop0 padTop0">
<!-- skinny black line to replace tabs -->
<div style="border-bottom: 4px solid #252525; height: 4px;" aria-hidden="true">&nbsp;</div>
</div>
<!--- end header-b: tabbed nav --->
</div>
<!--- end site header --->

• My Notifications
• Absence
  • Absence Hub
  • Admin Leave
  • FMLA Hub
  • Leave of Absence
  • Time Off Management
• Disability
• Development
  • Probation/Evaluation
  • Training
    • Coaching

<!-- START HAMBURGER NAV (for mobile devices) -->
<header> <span class="hamburger-toggle">
<div class="hamburger-bar hamburger-bar-top"></div>
<div class="hamburger-bar hamburger-bar-middle"></div>
<div class="hamburger-bar hamburger-bar-bottom"></div>
</span>
<div class="mobile-menu-wrap">
<div class="mobile-menu-sidebar">
<ul>
<li><a href="#">My Notifications</a></li>
<li class="menu-item-has-children"><span class="sidebar-menu-arrow">Absence</span>
<ul class="mobile-sub-menu">
<li><a href="#">Absence Hub</a></li>
<li><a href="#">Admin Leave</a></li>
<li><a href="#">FMLA Hub</a></li>
<li><a href="#">Leave of Absence</a></li>
<li><a href="#">Time Off Management</a></li>
</ul>
</li>
<li><a href="#">Disability</a></li>
<li class="menu-item-has-children"><span class="sidebar-menu-arrow">Development</span>
<ul class="mobile-sub-menu">
<li><a href="#">Probation/Evaluation</a></li>
<li class="menu-item-has-children"><span class="sidebar-menu-arrow">Training</span>
<ul class="mobile-sub-menu">
<li><a href="#">Coaching</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<!-- end hamburger nav -->

<!-- START PRIMARY HEADLINE -->
<div class="flex-container__main-headline">
<div class="breadcrumbs">
<p><a href="#">My Notifications</a> > <a href="#">Employee Info</a></p>
</div>
<div class="flex-container__row-flexstart-top main-headline">
<div class="heading-arrow__section4 desktop-only">
<div class="marginRight">
<div class="triangle-right"></div>
</div>
</div>
<div class="flex-container__row-spacebtwn-top desktop-only"> <!-- class "desktop-only" here is for employee name/id headlines only; otherwise remove -->
<div>
<h1><a href="#">Joshua Jackson <span class="font-thin marginLeft">00001</span></a></h1>
</div>
</div>
</div>
</div>
<!--- end primary headline --->