lay_me_out 1.2.8

data/app/views/lay_me_out/common/_segment_io.html.haml

@@ -0,0 +1,3 @@
+:javascript
+  var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
+  analytics.load("#{SegmentIO.config.api_key}");

data/app/views/lay_me_out/common/_user_profile.html.haml

@@ -0,0 +1,12 @@
+.user-profile
+  %div
+    = image_tag user.profile_picture
+  %div
+    .drop-down
+      = link_to user.name, "#"
+      -#span is for drop down arrow
+      %span
+      %ul.user-nav
+        - user.links.each do |key, value|
+          %li= link_to key, value
+    %p= user.position

data/app/views/lay_me_out/styleguide/index.html.haml

@@ -0,0 +1,1786 @@
+- content_for :side_menu do
+  %h3 Core Settings
+  %ul
+    %li
+      = link_to "Account", "#"
+    %li
+      = link_to "Role (System Permissions)", "#"
+    %li
+      = link_to "Time of Day Bonus Rules", "#"
+    %li
+      = link_to "Termination Codes", "#"
+    %li
+      = link_to "Email Templates", "#"
+    %li
+      = link_to "Documents", "#"
+  %h3 Scheduling
+  %ul
+    %li
+      = link_to "Day Types", "#"
+    %li.active
+      = link_to "Shared Calendar", "#"
+    %li
+      = link_to "Compensation", "#"
+    %li
+      = link_to "Shifts", "#"
+    %li
+      = link_to "Schedule Templates", "#"
+  %h3 Multipliers
+  %h3 Undertime Rules
+  %h3 Finances
+  %h3 Compensation
+  %h3 Employees
+
+%section
+  %h4 Introduction - Chrome Only
+  %p Welcome to PayrollHero Style Guide.
+  %p Here you can inspect every element that you can use for the site. Our aim here is to make css styles as general as possible, and could be reusable on any tag by just adding its required class. There are some classes that are targetted though (mostly on forms and calendar). Its because we'll be using them on special cases, in which there are only needed.
+/ Layout
+%h1.bold Layout
+.box
+  %section.sidebox
+    %h4 Side Bar
+    %p This has the sidebox class.
+    %p The sidebox was made for menus and/or supporting details for the main content.
+    %p Our sidebox class has a width of 25% and a right margin of 40px. Right now this has 275px, which is 25% of 1100px.
+    %p
+      Its what makes up the left part of our 2-column layout. Just add a class
+      %span.bold.blue sidebox
+      to your chosen left part container, and that's it!
+.contents.move-30-bottom
+  %h4 Contents Area
+  .move-20-bottom
+    %p This is where our main content goes -- presenting the contents box. It works by putting this container below the sidebox on the code. This uses -webkit-box-flex: 1; to occupy the remaining right part of the column.
+    %p
+      This would not work alone, too. It needs to be enclosed inside the
+      %span.blue.bold .box
+      class for it to work properly.
+  .move-10-bottom
+    %h5 Loading indicators
+    %p Just add a div with a class of .spinner-large or .spinner-small
+  .spinner-container
+    .spinner-large.move-10-right
+    .spinner-small
+  %p.move-10-top Add class .light to use the light version
+  .spinner-container.light
+    .spinner-large.light.move-10-right
+    .spinner-small.light
+.box
+  .contents
+    %h4 Forms
+    .infobox
+      This is an example of helping text or a hint or an instruction. We can put call to action
+      %a.blue.showup{"data-content" => "Hey, how you doin' there?", "data-original-title" => "", "data-placement" => "below", :href => "#"} link here
+      , or even a
+      %input{:type => "button", :value => "button"}
+    %h5 Active
+    %form.forms-normal.move-20-bottom.validate{:action => "http://test.payrollhero.dev/styleguide#", "data-confirm" => "Howdy! Nice to see you there, mate!", "data-method" => "delete", "data-remote" => "true", :method => "post"}
+      %label Enter your name
+      .popover-info
+        %input{:placeholder => "eg. Ozzy Osbourne", :type => "text", :required => "required", "data-errormessage" => "Please enter something"}
+      %label
+        Your email
+        %span.helper-text Required
+      %input{:placeholder => "your@email.com", :required => "", :type => "email"}
+      .popover-info
+        %label Choose a day type
+        %select{:required => "required"}
+          %option{:value => ""}
+            Choose
+          %option{:value => "Secondary Day Type"}
+            Secondary Day Type
+      %label
+        Describe yourself
+        %span.helper-text Required
+      %textarea{:required => "required"}
+      %label
+        Pick a date
+        %input.datepicker{:placeholder => "mm/dd/yy", :type => "text", :required => "required"}
+      %fieldset
+        %div
+          %label List Options - Checkbox
+          %input{:type => "checkbox", :required => "required"}
+            %span I agree to the terms & conditions.
+        %div
+          %input{:type => "checkbox"}
+            %span This is unchecked.
+      %fieldset
+        %label List Options - Radio
+        %div
+          %input{:name => "option-radios", :type => "radio", :required => "required"}
+            %span I agree to the terms & conditions.
+        %div
+          %input{:name => "option-radios", :type => "radio", :required => "required"}
+            %span I disagree.
+      %input.load{"data-loading-text" => "Loading something ..", :type => "submit", :value => "Submit", :class => "validate-button"}
+    :javascript
+      $('.validate-button').click(function() {
+        $('.validate').addClass('submitted');
+      });
+    %h5.move-40-top Disabled
+    .infobox
+      This is an example of helping text or a hint or an instruction. We can put call to action
+      = succeed "," do
+        %a.blue{:href => "#"} link here
+      or even a
+      %input{:type => "button", :value => "button"}
+    %form.forms-normal.move-20-bottom{:action => "http://test.payrollhero.dev/styleguide#", "data-confirm" => "Howdy! Nice to see you there, mate!", "data-method" => "delete", "data-remote" => "true", :method => "post"}
+      %label What's my name?
+      %input{:disabled => "", :placeholder => "eg. Big Daddy", :type => "text"}
+        %label
+          Your email
+          %span Required
+        %input{:disabled => "", :placeholder => "your@email.com", :required => "", :type => "email"}
+          %label Choose a day type
+          %select{:disabled => "disabled", :required => "required"}
+            %option
+              Default Day Type
+            %option
+              Secondary Day Type
+          %label
+            Describe yourself please
+            %span Optional
+          %textarea{:disabled => "disabled"}
+          %label A textarea with no resize -- add a class in the textarea tag: not-resizable
+          %textarea.not-resizable{:disabled => ""}
+          %fieldset
+            %div
+              %label List Options - Checkbox
+              %input{:checked => "", :disabled => "disabled", :type => "checkbox"}
+                %span I agree to the terms & conditions.
+            %div
+              %input{:disabled => "disabled", :type => "checkbox"}
+                %span This is unchecked.
+          %fieldset
+            %label List Options - Radio
+            %div
+              %input{:disabled => "disabled", :name => "option-radios", :type => "radio"}
+                %span I agree to the terms & conditions.
+            %div
+              %input{:disabled => "disabled", :name => "option-radios", :type => "radio"}
+                %span This is unchecked.
+          %input{:disabled => "disabled", :type => "submit", :value => "Submit"}
+/ Buttons
+%h4.move-60-bottom
+.box
+  .sidebox
+  %section.contents
+    %h4 Buttons
+    %div.move-20-bottom
+      %input{:type => "button", :value => "Input Button"}
+        %input{:type => "submit", :value => "Input Submit"}
+          %button Button Tag
+          %a.nice-button.no-icon{:href => "#"} Link Button
+          %a.nice-button{:href => "#"}
+            %span.icon.add_person_link>
+            Button with Icon
+    %div.move-20-bottom
+      %button.test Default
+      %button.primary-button Primary
+      %button.danger-button Danger
+      %button.success-button Finish
+    .move-20-bottom
+      %button.test{:disabled => ""} Default
+      %button.primary-button{:disabled => ""} Primary
+      %button.danger-button{:disabled => ""} Danger
+      %button.success-button{:disabled => ""} Finish
+    .move-20-bottom
+      %span.bold Share this on:
+      %a.nice-button.no-icon.nomargin.facebook{:href => "#"} Facebook
+      %a.nice-button.no-icon.nomargin.twitter{:href => "#"} Twitter
+    .move-20-bottom
+      .move-10-bottom.bold Buttons with dropdown:
+      .dropdown
+        %a.nice-button.small.icon-user{:href => "#"} Add new employee
+        %div.dropdown-menu
+          %div
+            %a{:href => "#"} Wizard
+          %div
+            %a{:href => "#"} Manually Add
+          %div
+            %a{:href => "#"} Mass Import
+/ Tables
+%h1.bold More Styles
+.box
+  %section.contents
+    %h5 Graphs
+    .move-20-bottom
+    %h5 Normal Tabular Data
+    %p.move-20-bottom
+      All tables will be automatically styled by adding
+      %span.blue.bold table
+      class with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.
+    %table.table.move-30-bottom
+      %thead
+        %tr
+          %th
+            Name
+          %th
+            Kind
+          %th
+            Work Day?
+          %th
+            Actions
+      %tbody
+        %tr
+          %td
+            Regular
+          %td
+            Day Type
+          %td
+            Yes
+          %td
+            %a> Edit
+            ,
+            %a Delete
+            or
+            %a Set as Default
+        %tr
+          %td
+            Special Holiday
+          %td
+            Secondary Day Type
+          %td
+            No
+          %td
+            %a> Edit
+            ,
+            %a Delete
+            or
+            %a Set as Default
+    %h5.move-30-top Large Tabular Data
+    %p.move-20-bottom
+      If the tabular data is too large, inclose it with
+      %span.blue.bold div
+      tag and then add a
+      %span.blue.bold scroller
+      class.
+    .scroller
+      %table.table.move-30-bottom
+        %thead
+          %tr
+            %th
+              Column A
+            %th
+              Column B
+            %th
+              Column C
+            %th
+              Column D
+            %th
+              Column E
+            %th
+              Column F
+            %th
+              Column G
+            %th
+              Column H
+            %th
+              Column H
+        %tbody
+          %tr
+            %td
+              Data A
+            %td
+              Data B
+            %td
+              Data C
+            %td
+              Data D
+            %td
+              Data E
+            %td
+              Data F
+            %td
+              Data G
+            %td
+              Data H
+            %td
+              Data H
+          %tr
+            %td
+              Data A.1
+            %td
+              Data B.1
+            %td
+              Data C.1
+            %td
+              Data D.1
+            %td
+              Data E.1
+            %td
+              Data F.1
+            %td
+              Data G.1
+            %td
+              Data H.1
+            %td
+              Data H.1
+          %tr
+            %td
+              Data A.1.2
+            %td
+              Data B.1.2
+            %td
+              Data C.1.2
+            %td
+              Data D.1.2
+            %td
+              Data E.1.2
+            %td
+              Data F.1.2
+            %td
+              Data G.1.2
+            %td
+              Data H.1.2
+            %td
+              Data H.1.2
+          %tr
+            %td
+              Data A.1.2
+            %td
+              Data B.1.2
+            %td
+              Data C.1.2
+            %td
+              Data D.1.2
+            %td
+              Data E.1.2
+            %td
+              Data F.1.2
+            %td
+              Data G.1.2
+            %td
+              Data H.1.2
+            %td
+              Data H.1.2
+          %tr
+            %td
+              Data A.1.2
+            %td
+              Data B.1.2
+            %td
+              Data C.1.2
+            %td
+              Data D.1.2
+            %td
+              Data E.1.2
+            %td
+              Data F.1.2
+            %td
+              Data G.1.2
+            %td
+              Data H.1.2
+            %td
+              Data H.1.2
+          %tr
+            %td
+              Data A.1.2
+            %td
+              Data B.1.2
+            %td
+              Data C.1.2
+            %td
+              Data D.1.2
+            %td
+              Data E.1.2
+            %td
+              Data F.1.2
+            %td
+              Data G.1.2
+            %td
+              Data H.1.2
+            %td
+              Data H.1.2
+    %h5.move-30-top Collpsable Tabular Data
+    %details{:open => ""}
+      %summary{:category_name => ""}
+        Uncategorized
+      %table.table
+        %thead
+          %tr
+            %th
+              Start time
+            %th
+              End time
+            %th
+              Total hours
+            %th
+              Actions
+        %tbody
+          %tr
+            %td
+              05:30
+            %td
+              15:00
+            %td
+              9.5
+            %td
+              %a.icon_link.edit_link{:href => "/setup/shifts/4/edit", :title => "Edit"} Edit
+              %a.icon_link.destroy_link{"data-confirm" => "Are you sure", "data-method" => "delete", :href => "/setup/shifts/4", :rel => "nofollow", :title => "Delete"} Destroy
+          %tr
+            %td
+              14:00
+            %td
+              22:00
+            %td
+              8
+            %td
+              %a.icon_link.edit_link{:href => "/setup/shifts/5/edit", :title => "Edit"} Edit
+              %a.icon_link.destroy_link{"data-confirm" => "Are you sure", "data-method" => "delete", :href => "/setup/shifts/5", :rel => "nofollow", :title => "Delete"} Destroy
+          %tr
+            %td
+              22:00
+            %td
+              06:00
+            %td
+              8
+            %td
+              %a.icon_link.edit_link{:href => "/setup/shifts/6/edit", :title => "Edit"} Edit
+              %a.icon_link.destroy_link{"data-confirm" => "Are you sure", "data-method" => "delete", :href => "/setup/shifts/6", :rel => "nofollow", :title => "Delete"} Destroy
+/ Content Tabs
+%h4 Content Tabs
+%section.box
+  %section.sidebox
+    %p For sub-sections of content like sub-pages settings pages for toggling between pages of like content.
+  %section.contents
+    %p.move-30-bottom
+      Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content
+      areas for swapping out panes of content. Just add
+      %span.blue.bold content_tabs
+      class.
+    %ul.content_tabs.clearfix
+      %li
+        %a{:href => "http://test.payrollhero.dev/styleguide#"} Time Clock
+      %li
+        %a{:href => "http://test.payrollhero.dev/styleguide#"} Time Card & Accruals
+      %li.active
+        %a{:href => "http://test.payrollhero.dev/styleguide#"} Scheduling
+/ Light Boxes
+%h4 Light Boxes
+%section.box
+  %section.sidebox
+  %section.contents
+    %a#opener2.nice-button.no-icon{:href => "#"} Default Lightbox
+    %a#opener.nice-button.no-icon{:href => "#"} Light Box with Calendar
+    .dialog2
+      .move-20-bottom
+        .bold.block.move-10-bottom
+          Normal title of a paragraph
+        %p
+          Normal paragraph explaining something or instructions for something.
+    .dialog.inline-data
+      .boxed-content.move-20-bottom
+        .move-10-bottom
+          %label Date
+          %span.bold February 1, 2012
+        .move-20-bottom
+          %label Shift
+          .inline.bold
+            %span 08:00 - 15:00
+            %br
+              %span 08:00 - 15:00
+      %label.move-10-bottom Select days
+      .lb-datepicker
+        #date
+      .action.align-right
+        %a.nice-button.no-icon.nomargin{:href => "#"} Cancel
+        %input.primary-button{:type => "submit", :value => "Copy schedule"}
+/ Pagination
+%h4 Pagination
+%section.box
+  %section.sidebox
+    %p
+      For paginations, inclose it with a div an put a class of
+      %span.bold.blue pagination
+  %section.contents
+    .pagination.move-20-bottom
+      %span.previous_page.disabled ← Previous
+      %em.current 1
+      %a{:href => "", :rel => "next"} 2
+      %a{:href => ""} 3
+      %a{:href => ""} 4
+      %a{:href => ""} 5
+      %a{:href => ""} 6
+      %a{:href => ""} 7
+      %a.next_page{:href => "", :rel => "next"} Next →
+/ Pagination
+%h4 Icons
+%section
+  %h4 Icons in link buttons
+  %ul.iconset
+    %li= link_to "Employee Wizard", "#", :class => "nice-button icon-magic"
+    %li= link_to "Manual Employee Input", "#", :class => "nice-button icon-pencil"
+    %li= link_to "Mass import / Excel files", "#", :class => "nice-button icon-table"
+    %li= link_to "Share", "#", :class => "nice-button icon-share"
+    %li= link_to "Generate", "#", :class => "nice-button icon-list-alt"
+    %li= link_to "Lock", "#", :class => "nice-button icon-lock"
+    %li= link_to "CSV / PDF icon", "#", :class => "nice-button icon-file"
+    %li= link_to "Submit / Okay sign", "#", :class => "nice-button icon-ok"
+    %li= link_to "Bookmark", "#", :class => "nice-button icon-bookmark"
+    %li= link_to "Previous", "#", :class => "nice-button icon-chevron-left"
+    %li= link_to "Multipliers", "#", :class => "nice-button icon-asterisk"
+
+  %ul.iconset
+    %li= link_to "Edit", "#", :class => "nice-button icon-edit"
+    %li= link_to "Search / Preview", "#", :class => "nice-button icon-search"
+    %li= link_to "Delete", "#", :class => "nice-button icon-trash"
+    %li= link_to "Refresh / Reset", "#", :class => "nice-button icon-refresh"
+    %li= link_to "Remove sign", "#", :class => "nice-button icon-remove-sign"
+    %li= link_to "Clone / Duplicate", "#", :class => "nice-button icon-copy"
+    %li= link_to "Download", "#", :class => "nice-button icon-download-alt"
+    %li= link_to "Core Settings", "#", :class => "nice-button icon-cog"
+    %li= link_to "Upload", "#", :class => "nice-button icon-upload-alt"
+    %li= link_to "Next", "#", :class => "nice-button icon-chevron-right"
+    %li= link_to "Attach files", "#", :class => "nice-button icon-paper-clip"
+
+  %ul.iconset
+    %li= link_to "Revoke / Undo changes?", "#", :class => "nice-button icon-undo"
+    %li= link_to "Map / Location", "#", :class => "nice-button icon-map-marker"
+    %li= link_to "ID Card / Picture", "#", :class => "nice-button icon-picture"
+    %li= link_to "Override", "#", :class => "nice-button icon-pencil"
+    %li= link_to "Disable", "#", :class => "nice-button icon-minus-sign"
+    %li= link_to "Unlock", "#", :class => "nice-button icon-unlock"
+    %li= link_to "Use current location", "#", :class => "nice-button icon-screenshot"
+    %li= link_to "Move / Sort", "#", :class => "nice-button icon-move"
+    %li= link_to "Month View", "#", :class => "nice-button icon-th"
+    %li= link_to "List View", "#", :class => "nice-button icon-th-list"
+    %li= link_to "Add", "#", :class => "nice-button icon-plus-sign"
+  %h4 Icons in button tags
+  %ul.iconset
+    %li
+      %button.nice-button.icon-magic Employee Wizard
+    %li
+      %button.nice-button.icon-pencil Manual Employee Input
+    %li
+      %button.nice-button.icon-table Mass Importing
+    %li
+      %button.nice-button.icon-share Share
+    %li
+      %button.nice-button.icon-list-alt Generate
+    %li
+      %button.nice-button.icon-lock Lock
+    %li
+      %button.nice-button.icon-file CSV / PDF icon
+    %li
+      %button.nice-button.icon-ok Submit / Okay
+    %li
+      %button.nice-button.icon-bookmark Bookmark
+    %li
+      %button.nice-button.icon-chevron-left Previous / Back
+    %li
+      %button.nice-button.icon-asterisk Multipliers
+
+  %ul.iconset
+    %li
+      %button.nice-button.icon-edit Edit
+    %li
+      %button.nice-button.icon-search Search / Preview
+    %li
+      %button.nice-button.icon-trash Delete / Trash
+    %li
+      %button.nice-button.icon-refresh Refresh / Reset
+    %li
+      %button.nice-button.icon-remove-sign Remove
+    %li
+      %button.nice-button.icon-copy Clone / Duplicate
+    %li
+      %button.nice-button.icon-download-alt Download
+    %li
+      %button.nice-button.icon-cog Core Settings
+    %li
+      %button.nice-button.icon-upload-alt Upload
+    %li
+      %button.nice-button.icon-chevron-right Next
+    %li
+      %button.nice-button.icon-paper-clip Attach files
+
+  %ul.iconset
+    %li
+      %button.nice-button.icon-undo Revoke / Undo
+    %li
+      %button.nice-button.icon-map-marker Map marker / Location
+    %li
+      %button.nice-button.icon-picture ID Card / Picture
+    %li
+      %button.nice-button.icon-pencil Override
+    %li
+      %button.nice-button.icon-minus-sign Disable
+    %li
+      %button.nice-button.icon-unlock Unlock
+    %li
+      %button.nice-button.icon-screenshot Use current location
+    %li
+      %button.nice-button.icon-move Move / Sort
+    %li
+      %button.nice-button.icon-th Month view
+    %li
+      %button.nice-button.icon-th-list List view
+    %li
+      %button.nice-button.icon-plus-sign Add
+  %h4.nomargin Icons without the text link
+  %p Hover on the icons
+
+  %p
+    = link_to "Wizard", "#", :class => "font-icon icon-magic", :title => "Add employee wizard"
+    = link_to "Manual input / Override", "#", :class => "font-icon icon-pencil", :title => "Manual input / Override"
+    = link_to "Mass importing", "#", :class => "font-icon icon-table", :title => "Mass importing"
+    = link_to "Calendar", "#", :class => "font-icon icon-calendar", :title => "Calendar icon"
+    = link_to "Share", "#", :class => "font-icon icon-share", :title => "Share"
+    = link_to "Generate", "#", :class => "font-icon icon-list-alt", :title => "Generate something"
+    = link_to "Lock something", "#", :class => "font-icon icon-lock", :title => "Lock something"
+    = link_to "PDF / CSV files", "#", :class => "font-icon icon-file", :title => "CSV / PDF files"
+    = link_to "Okay / Check", "#", :class => "font-icon icon-ok", :title => "Okay / Check"
+    = link_to "Bookmark", "#", :class => "font-icon icon-bookmark", :title => "Bookmark"
+    = link_to "Previous / Back", "#", :class => "font-icon icon-chevron-left", :title => "Previous / Back"
+    = link_to "Edit something", "#", :class => "font-icon icon-edit", :title => "Edit something"
+    = link_to "Search / Preview", "#", :class => "font-icon icon-search", :title => "Search / Preview"
+    = link_to "Delete / Trash", "#", :class => "font-icon icon-trash", :title => "Delete / Trash"
+    = link_to "Remove something", "#", :class => "font-icon icon-remove-sign", :title => "Remove something"
+    = link_to "Clone / Duplicate", "#", :class => "font-icon icon-copy", :title => "Clone / Duplicate"
+    = link_to "Download this", "#", :class => "font-icon icon-download", :title => "Download this"
+    = link_to "Core Settings", "#", :class => "font-icon icon-cog", :title => "Core Settings"
+    = link_to "Upload something", "#", :class => "font-icon icon-upload-alt", :title => "Upload something"
+    = link_to "Next", "#", :class => "font-icon icon-chevron-right", :title => "Next"
+    = link_to "Attach something", "#", :class => "font-icon icon-paper-clip", :title => "Attach something"
+
+    = link_to "Revoke / Undo", "#", :class => "font-icon icon-undo", :title => "Revoke / Undo"
+    = link_to "Map marker / location", "#", :class => "font-icon icon-map-marker", :title => "Map marker / location"
+    = link_to "ID Card / Picture", "#", :class => "font-icon icon-picture", :title => "ID Card / Picture"
+    = link_to "Disable something", "#", :class => "font-icon icon-minus-sign", :title => "Disable something"
+    = link_to "Unlock something", "#", :class => "font-icon icon-unlock", :title => "Unlock something"
+    = link_to "Use current location", "#", :class => "font-icon icon-screenshot", :title => "Use current location"
+    = link_to "Drag / Move", "#", :class => "font-icon icon-move", :title => "Drag / Move"
+    = link_to "Month view", "#", :class => "font-icon icon-th", :title => "Month view"
+    = link_to "List view", "#", :class => "font-icon icon-th-list", :title => "List view"
+    = link_to "Add something", "#", :class => "font-icon icon-plus-sign", :title => "Add something"
+  
+  %h4 Icons with the text link
+  %ul.iconset
+    %li= link_to "New Employee Wizard", "#", :class => "icon-text icon-magic"
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-pencil
+        Manual Input
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-table
+        Mass importing
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-share
+        Share
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-list-alt
+        Generate something
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-lock
+        Lock something
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-file
+        CSV /PDF icon
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-ok
+        Okay / Submit
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-bookmark
+        Bookmark
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-asterisk
+        Multipliers
+  %ul.iconset
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-edit
+        Edit something
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-search
+        Search / Preview
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-trash
+        Delete something
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-refresh
+        Refresh / Reset
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-copy
+        Duplicate / Clone
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-download-alt
+        Download
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-cog
+        Settings
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-upload-alt
+        Upload
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-chevron-left
+        Previous / Back
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-paper-clip
+        Attach something
+  %ul.iconset
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-undo
+        Revoke / Undo
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-map-marker
+        Map marker / Location
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-pencil
+        Override
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-minus-sign
+        Disable
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-unlock
+        Unlock
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-screenshot
+        Use current location
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-move
+        Sort / Drag / Move
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-th
+        Month view
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-th-list
+        List view
+    %li
+      %a.icon_text{:href => ""}
+        %span.icon-plus-sign
+        Add something
+/ Positions Hierarchy
+%h4 Positions Hierarchy
+%section.box
+  %section.sidebox
+  %section.contents
+    %section
+      %h4 Org Chart
+      %ul.org-chart.move-40-bottom
+        %li
+          %a.c-position{:href => "#"} CEO / President
+          %ul.primary-p
+            %li.c-parent
+              .vline
+              %a.c-position{:href => "#"} District Manager
+              %ul
+                %li.c-parent
+                  .vline
+                  %a.c-position{:href => "#"} Senior Store Managers / Team Leaders
+                  %ul
+                    %li
+                      .vline
+                      %a.c-position{:href => "#"} Agents
+                    %li
+                      .vline
+                      %a.c-position{:href => "#"} Baristas
+                    %li
+                      .vline
+                      %a.c-position{:href => "#"} Employee
+                    %li
+                      .vline.last-p
+                      %a.c-position{:href => "#"} Janitor
+            %li
+              .vline.last-p
+              %a.c-position{:href => "#"} Team Leader
+/ Flash Messages
+%h4 Flash Messages
+%section.box
+  %section.sidebox
+    %p
+      Use
+      %span.blue.bold .alert-message
+      for flash messages. Add
+      %span.blue.bold .error
+      for errors,
+      %span.blue.bold .success
+      for success and
+      %span.blue.bold .warning
+      for warning messages.
+  %section.contents
+    .flashes
+      .item.error
+        %div
+          Oh snap! Change this and that and
+          = succeed "." do
+            %a{:href => "#"} try again
+    .flashes
+      .item.success
+        %div
+          Wohoo! You have successfully generate that stuff!
+          = succeed "." do
+            %a{:href => "#"} Wanna try again?
+    .flashes
+      .item.warning
+        %div
+          Got some info you should know.
+          = succeed "." do
+            %a{:href => "#"} Click here
+    #errorExplanation.errorExplanation
+      %h2 1 error prohibited this rollcall day from being saved
+      %p There were problems with the following fields:
+      %ul
+        %li Please select how you want to resolve this.
+        %li
+          There were problems with the following fields. Oh snap! Change this and that and
+          = succeed "." do
+            %a{:href => "#"} try again
+    #successExplanation.successExplanation
+      %h2 Nice! There were no problems occurred in processing the payroll. Congratulations!
+      %p You have successfully, do this without any error:
+      %ul
+        %li Process the payroll
+        %li Generate Attendance for 232 employees
+        %li Publish the payroll
+    #warningExplanation.warningExplanation
+      %h2 Nice! There were no problems occurred in processing the payroll. Congratulations!
+      %p You have successfully, do this without any error:
+      %ul
+        %li Process the payroll
+        %li Generate Attendance for 232 employees
+        %li Publish the payroll
+    .infobox
+      %h2 Nice! There were no problems occurred in processing the payroll. Congratulations!
+      %p You have successfully, do this without any error:
+      %ul
+        %li Process the payroll
+        %li Generate Attendance for 232 employees
+        %li Publish the payroll
+/ Review Attendance Calendar
+%h4 Review Attendance Calendar
+%section.box
+  %section.sidebox
+    .boxed-title
+      Legend
+    .boxed-content
+      %ul.legend-list
+        %li
+          %span.legend.missing_out
+          Missing In / Out
+        %li
+          %span.legend.in_late
+          Early / Late
+        %li
+          %span.legend.overtime
+          Overtime / Undertime
+        %li
+          %span.legend.perfect
+          Perfect / Payroll Ready / Publishing to Payroll
+        %li
+          %span.legend.published_to_payroll
+          Published to Payroll
+  %section.contents
+    .calendar_header
+      %h3.bold.align-center.calendar_header
+        %a{:href => "/rollcall/attendance?month=1&year=2012"} ← January 2012
+        February 2012
+        %a{:href => "/rollcall/attendance?month=3&year=2012"} March 2012 →
+    %ul.boxed-content.gradient-bg.move-20-top.month-traverse-menu.move-20-bottom
+      %li.prev-year.relative.calendar-controls
+        %a{:href => "#"} ← 2011
+      %li
+        %a{:href => "#"} Jan
+      %li.active
+        %span Feb
+      %li
+        %a{:href => "#"} Mar
+      %li
+        %a{:href => "#"} Apr
+      %li
+        %a{:href => "#"} May
+      %li
+        %a{:href => "#"} Jun
+      %li
+        %a{:href => "#"} Jul
+      %li
+        %a{:href => "#"} Aug
+      %li
+        %a{:href => "#"} Sep
+      %li
+        %a{:href => "#"} Oct
+      %li
+        %a{:href => "#"} Nov
+      %li
+        %a{:href => "#"} Dec
+      %li.next-year.relative.calendar-controls
+        %a{:href => "#"} 2013 →
+    %table.calendar
+      %thead
+        %tr
+          %th Sunday
+          %th Monday
+          %th Tuesday
+          %th Wednesday
+          %th Thursday
+          %th Friday
+          %th Saturday
+      %tbody
+        %tr
+          %td#day_01.weekend
+            .day.relative
+              .day_heading
+                1
+          %td#day_02
+            .day.relative
+              .day_heading
+                2
+              %div
+                .day-item.timeclock-status.missing_out.missing_out Missing Clock Out: 1
+                .day-item.timeclock-status.missing_in.missing_in Missing Clock In: 1
+                .day-item.timeclock-status.in_late.in_late In Late: 3
+                .day-item.timeclock-status.out_late.out_late Out Late: 1
+                .day-item.timeclock-status.overtime.overtime Overtime: 3
+                .day-item.timeclock-status.perfect.perfect Perfect: 3
+          %td#day_03
+            .day.relative
+              .day_heading
+                3
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 20
+          %td#day_04
+            .day.relative
+              .day_heading
+                4
+              %div
+                .day-item.timeclock-status.missing_out.missing_out Missing Clock Out: 1
+                .day-item.timeclock-status.missing_in.missing_in Missing Clock In: 1
+                .day-item.timeclock-status.in_late.in_late In Late: 3
+                .day-item.timeclock-status.out_late.out_late Out Late: 1
+                .day-item.timeclock-status.overtime.overtime Undertime: 3
+                .day-item.timeclock-status.sent_to_payroll.sent_to_payroll Payroll Ready: 3
+          %td#day_05
+            .day.relative
+              .day_heading
+                5
+              %div
+                .day-item.timeclock-status.overtime.overtime Overtime: 3
+                .day-item.timeclock-status.undertime.undertime Undertime: 3
+                .day-item.timeclock-status.perfect.perfect Perfect: 3
+          %td#day_06
+            .day.relative
+              .day_heading
+                6
+              %div
+                .day-item.timeclock-status.in_late.in_late In Late: 3
+                .day-item.timeclock-status.out_late.out_late Out Late: 1
+                .day-item.timeclock-status.perfect.perfect Perfect: 3
+          %td#day_07.weekend
+            .day.relative
+              .day_heading
+                7
+        %tr
+          %td#day_08.weekend
+            .day.relative
+              .day_heading
+                8
+          %td#day_09
+            .day.relative
+              .day_heading
+                9
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 20
+          %td#day_10
+            .day.relative
+              .day_heading
+                10
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 23
+          %td#day_11
+            .day.relative
+              .day_heading
+                11
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 12
+          %td#day_12
+            .day.relative
+              .day_heading
+                12
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 34
+          %td#day_13
+            .day.relative
+              .day_heading
+                13
+              %div
+                .day-item.timeclock-status.published_to_payroll Published to Payroll: 23
+          %td#day_14.weekend
+            .day.relative
+              .day_heading
+                14
+        %tr
+          %td#day_15.weekend
+            .day.relative
+              .day_heading
+                15
+          %td#day_16
+            .day.relative
+              .day_heading
+                16
+              %div
+                .day-item.timeclock-status.missing_out.missing_out Missing Clock Out: 1
+                .day-item.timeclock-status.missing_in.missing_in Missing Clock In: 1
+                .day-item.timeclock-status.in_late.in_late In Late: 3
+                .day-item.timeclock-status.out_late.out_late Out Late: 1
+                .day-item.timeclock-status.perfect.perfect Perfect: 3
+          %td#day_17
+            .day.relative
+              .day_heading
+                17
+              %div
+                .day-item.timeclock-status.missing_out.missing_out Missing Clock Out: 1
+                .day-item.timeclock-status.missing_in.missing_in Missing Clock In: 1
+                .day-item.timeclock-status.in_late.in_late In Late: 3
+                .day-item.timeclock-status.out_late.out_late Out Late: 1
+                .day-item.timeclock-status.perfect.perfect Perfect: 3
+          %td#day_18
+            .day.relative
+              .day_heading
+                18
+          %td#day_19
+            .day.relative
+              .day_heading
+                19
+          %td#day_20
+            .day.relative
+              .day_heading
+                20
+          %td#day_21.weekend
+            .day.relative
+              .day_heading
+                21
+        %tr
+          %td#day_22.weekend
+            .day.relative
+              .day_heading
+                22
+          %td#day_23
+            .day.relative
+              .day_heading
+                23
+          %td#day_24
+            .day.relative
+              .day_heading
+                24
+          %td#day_25
+            .day.relative
+              .day_heading
+                25
+          %td#day_26
+            .day.relative
+              .day_heading
+                26
+          %td#day_27
+            .day.relative
+              .day_heading
+                27
+          %td#day_28.weekend
+            .day.relative
+              .day_heading
+                28
+        %tr
+          %td#day_29.weekend
+            .day.relative
+              .day_heading
+                29
+          %td#day_30
+            .day.relative
+              .day_heading
+                30
+          %td#day_31
+            .day.relative
+              .day_heading
+                31
+          %td#day_01.notmonth
+            .day.relative
+              .day_heading
+                1
+          %td#day_02.notmonth
+            .day.relative
+              .day_heading
+                2
+          %td#day_03.notmonth
+            .day.relative
+              .day_heading
+                3
+          %td#day_04.notmonth.weekend
+            .day.relative
+              .day_heading
+                4
+/ Attendance - Scheduling Calendar
+%h4 Attendance - Scheduling Calendar
+%section.box
+  %section.sidebox
+    .boxed-title
+      Legend
+    .boxed-content
+      %ul.legend-list
+        %li
+          %span.legend.schedule
+          Schedule
+        %li
+          %span.legend.restday
+          Rest Day
+        %li
+          %span.legend.holiday
+          Holiday
+        %li
+          %span.legend.override
+          Overriden
+  %section.contents
+    .calendar_header.with-actions
+      %h3.bold.calendar_header
+        February 2012
+      .actions-container
+        %button.nomargin Today
+        #calendar_menu.dropdown
+          %a.dropdown-toggle.actions{"data-toggle" => "dropdown", :href => "#calendar_menu"}
+            Actions
+            %b.caret
+          %ul.dropdown-menu
+            %li
+              %a{:href => "#"} Custom Schedule
+            %li
+              %a{:href => "#"} Day Off - Paid
+            %li
+              %a{:href => "#"} Day Off - Unpaid
+            %li
+              %a{:href => "#"} Unselect All
+        .btn-group{"data-toggle" => "buttons-radio"}
+          %button.thumb.btn.active
+          %button.list.btn
+    %ul.boxed-content.gradient-bg.move-20-top.month-traverse-menu.move-20-bottom
+      %li.prev-year.relative.calendar-controls
+        %a{:href => "#"} ← 2011
+      %li
+        %a{:href => "#"} Jan
+      %li.active
+        %span Feb
+      %li
+        %a{:href => "#"} Mar
+      %li
+        %a{:href => "#"} Apr
+      %li
+        %a{:href => "#"} May
+      %li
+        %a{:href => "#"} Jun
+      %li
+        %a{:href => "#"} Jul
+      %li
+        %a{:href => "#"} Aug
+      %li
+        %a{:href => "#"} Sep
+      %li
+        %a{:href => "#"} Oct
+      %li
+        %a{:href => "#"} Nov
+      %li
+        %a{:href => "#"} Dec
+      %li.next-year.relative.calendar-controls
+        %a{:href => "#"} 2013 →
+    %table.calendar.with-toolbar
+      %thead
+        %tr
+          %th Sunday
+          %th Monday
+          %th Tuesday
+          %th Wednesday
+          %th Thursday
+          %th Friday
+          %th Saturday
+      %tbody
+        %tr
+          %td#day_29.notmonth.weekend
+            .day
+              .day_heading
+                29
+              %div
+          %td#day_30.notmonth
+            .day
+              .day_heading
+                30
+              %div
+          %td#day_31.notmonth
+            .day
+              .day_heading
+                31
+              %div
+          %td#day_01.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                1
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_02.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                2
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_03.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                3
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_04.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                4
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+        %tr
+          %td#day_05.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                5
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+          %td#day_06.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                6
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_07.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                7
+              %div
+                .holiday-category-label
+                  PAID
+                .day-item.timeclock-schedule.holiday
+                  Holiday: Noname Holiday
+                  %br
+          %td#day_08.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                8
+              %div
+                .day-item.timeclock-schedule.override
+                  %span#event_2282202400
+                    Day Off - Paid - 9.0h
+          %td#day_09.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                9
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_10.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                10
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_11.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                11
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+        %tr
+          %td#day_12.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                12
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+          %td#day_13.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                13
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_14.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                14
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_15.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                15
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_16.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                16
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_17.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                17
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_18.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                18
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+        %tr
+          %td#day_19.weekend.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                19
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+          %td#day_20.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                20
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_21.today.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                21
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_22.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                22
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_23.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                23
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_24.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                24
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_25.weekend.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                25
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+        %tr
+          %td#day_26.weekend.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                26
+              %div
+                .day-item.timeclock-schedule.restday
+                  Rest Day
+                  %br
+          %td#day_27.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                27
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_28.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                28
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_29.future.btn{"data-toggle" => "buttons-checkbox"}
+            .day
+              .day_heading
+                29
+              %div
+                .day-item.timeclock-schedule
+                  Morning - 9.00h
+                  %br
+                    05:30 - 11:30
+                    %br
+                      12:00 - 15:00
+                      %br
+          %td#day_01.notmonth.future
+            .day
+              .day_heading
+                1
+              %div
+          %td#day_02.notmonth.future
+            .day
+              .day_heading
+                2
+              %div
+          %td#day_03.notmonth.weekend.future
+            .day
+              .day_heading
+                3
+              %div
+/ CALENDAR LIST VIEW: Sidebar
+.box
+  / CALENDAR LIST VIEW: Content
+  %section.contents
+    .calendar_header.with-actions
+      %h3.bold.calendar_header
+        January 2012
+      .actions-container
+        %a.nice-button.move-10-right{:href => "#"}
+          %span.icon.add_link>
+          Add a New Calendar Item
+        .btn-group{"data-toggle" => "buttons-radio"}
+          %button.thumb.btn
+          %button.list.btn.active
+    %ul.boxed-content.gradient-bg.move-20-top.month-traverse-menu.move-20-bottom
+      %li.prev-year.relative.calendar-controls
+        %a{:href => "#"} ← 2011
+      %li.active
+        %span Jan
+      %li
+        %a{:href => "#"} Feb
+      %li
+        %a{:href => "#"} Mar
+      %li
+        %a{:href => "#"} Apr
+      %li
+        %a{:href => "#"} May
+      %li
+        %a{:href => "#"} Jun
+      %li
+        %a{:href => "#"} Jul
+      %li
+        %a{:href => "#"} Aug
+      %li
+        %a{:href => "#"} Sep
+      %li
+        %a{:href => "#"} Oct
+      %li
+        %a{:href => "#"} Nov
+      %li
+        %a{:href => "#"} Dec
+      %li.next-year.relative.calendar-controls
+        %a{:href => "#"} 2013 →
+    / List View
+    .cal-list-view
+      .left.scroller{"data-toggle" => "buttons-radio"}
+        .item.btn.active
+          .date
+            %span Jan 1
+            %span Sunday
+          .details
+            %span New Year's Eve
+            %span Regular
+        .item.btn
+          .date
+            %span Jan 23
+            %span Monday
+          .details
+            %span Chinese New Year
+            %span Special
+        .item.btn
+          .date
+            %span Apr 5
+            %span Thursday
+          .details
+            %span Maunday Thursday
+            %span Regular
+        .item.btn
+          .date
+            %span Apr 6
+            %span Friday
+          .details
+            %span Good Friday
+            %span Regular
+        .item.btn
+          .date
+            %span Apr 9
+            %span Monday
+          .details
+            %span Araw ng Kagitingan
+            %span Regular
+        .item.btn
+          .date
+            %span May 1
+            %span Tuesday
+          .details
+            %span Labour Day
+            %span Regular
+        .item.btn
+          .date
+            %span Jun 12
+            %span Tuesday
+          .details
+            %span Independence Day
+            %span Regular
+        .item.btn
+          .date
+            %span Jan 1
+            %span Monday
+          .details
+            %span New Year's Eve
+            %span Regular
+      .right
+        .title
+          %span January 1, 2012
+          %span Sunday
+        .container
+          %form
+            %label
+              %span Name
+              %input{:type => "text", :value => "New Year's Eve"}
+            %label
+              %span Date
+              %input.datepicker{:type => "text"}
+            %label
+              %span Type
+              %select
+                %option Regular
+                %option Special
+            %label
+              %span More info
+              %textarea{:placeholder => "optional"}
+            .button-set
+              %input.primary-button{:type => "submit", :value => "Update"}
+                %input{:type => "button", :value => "Delete"}
+%section.contents
+  .tabularized-data
+    .left
+      %ul
+        %li.table-row.list-header
+          %ul
+            %li.table-cell
+              %span Name
+        %li.table-row
+          %ul
+            %li.table-cell
+              %span Billy Bob
+            %li.table-cell
+              %span Text Mate
+    .right
+      %ul
+        %li.table-row.list-header
+          %ul
+            %li.table-cell
+              %a{:href => "javascript:void(0)", :class => "arrow position-left", :direction => "previous"} Previous week
+              %span
+                .regular Sunday
+                %div 2012-10-14
+                %div Regular
+            %li.table-cell
+              %span
+                .holiday Monday
+                %div 2012-10-14
+                %div Good luck day
+            %li.table-cell
+              %span
+                .holiday Tuesday
+                %div 2012-10-14
+                %div Good luck day 2
+            %li.table-cell
+              %span
+                .regular Wednesday
+                %div 2012-10-14
+                %div Regular
+            %li.table-cell
+              %span
+                .regular Thursday
+                %div 2012-10-14
+                %div Regular
+            %li.table-cell
+              %span
+                .regular Friday
+                %div 2012-10-14
+                %div Regular
+            %li.table-cell
+              %span
+                .regular Saturday
+                %div 2012-10-14
+                %div Regular
+        %li.table-row
+          %ul
+            %li.table-cell
+            %li.table-cell
+              %span.sched.dayoff Day off - Unpaid
+              .offset
+                .offset-title.bold
+                  Offset to
+                  .blue Oct 13, 2012
+                .icon-set
+                  .icon-circle-arrow-right{:title => "View October 13, 2012"}
+                  .icon-comment
+              .offset-popup
+                .name
+                  %span By:
+                  %span Flint Beastwood
+                .reason
+                  %span Reason
+                  %span He is going to a conference at SF.
+            %li.table-cell
+              %span.sched.dayoff Day off - Unpaid
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+              %span.sched 15:00 - 18:00 (3h)
+        %li.table-row
+          %ul
+            %li.table-cell
+            %li.table-cell
+              %span.sched.dayoff Day off - Unpaid
+            %li.table-cell
+              %span.sched.dayoff Day off - Unpaid
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)
+            %li.table-cell
+              %span.sched 05:30 - 11:30 (6h)