arnebrasseur-compass 0.3.5

data/examples/compass/stylesheets/compass.sass

@@ -0,0 +1,47 @@
+=compass(!s)
+  :position relative
+  :width= 4 * !s
+  :height= 4 * !s
+  :font-size 24px
+  :font-family "Academy Engraved LET", "Papyrus"
+  .n, .s, .e, .w
+    :position absolute
+    :width= !s
+    :height= !s
+    :text-align center
+    :vertical-align middle
+  .w
+    :left 0px
+  .n.w, .s.w
+    :left= 0.5 * !s
+  .n, .s
+    :left=  1.5 * !s
+  .n.e, .s.e
+    :left= 2.5 * !s
+  .e
+    :left= 3 * !s
+  .n
+    :top 0px
+  .n.w, .n.e
+    :top= 0.5 * !s
+  .w, .e
+    :top= 1.5 * !s
+  .s.w, .s.e
+    :top= 2.5 * !s
+  .s
+    :top= 3 * !s
+
+.compass
+  :margin 1em auto
+  +compass(4em)
+  .n, .s, .e, .w
+    p
+      :margin
+        :top 1.5em
+        :bottom 1.5em
+  .n.w, .s.w, .n.e, .s.e
+    p
+      :margin
+        :top 1em
+        :bottom 1em
+  

data/examples/compass/stylesheets/sticky_footer.sass

@@ -0,0 +1,11 @@
+@import compass/reset.sass
+@import compass/layout.sass
+
++sticky-footer(72px, "#layout", "#layout_footer", "#footer")
+
+#header
+  :background #999
+  :height 72px
+
+#footer
+  :background #ccc

data/examples/compass/stylesheets/utilities.sass

@@ -0,0 +1,65 @@
+@import compass/reset.sass
+@import compass/utilities.sass
+@import yui/modules/base.sass
+@import blueprint/modules/grid.sass
+@import blueprint/modules/scaffolding.sass
+
+html
+  +yui-base
+
+h2
+  :margin-top 0
+  :border-bottom 2px solid #777
+
+#utilities
+  +container
+
+.example
+  :border 2px solid #ccc
+  :padding 4px
+
+#links
+  +column(8)
+
+  .hover a
+    +hover-link
+  .colored a
+    +link-colors(#C00, #C0C, #700, #707, #777)
+  .unstyled
+    :color #333
+    a
+      +unstyled-link
+.mixin
+  :font-family monospace
+  :border
+    :width 1px
+    :style solid
+  :border-color #ccc
+  :border-color -moz-use-text-color
+  :padding 2px
+  :line-height 22px
+  
+
+#tag-cloud
+  +column(8)
+  ol
+    :margin 0
+    +inline-list
+    +tag-cloud(1em)
+    li
+      +no-bullets
+
+#lists
+  +column(8, true)
+  ul.inline
+    +inline-list
+  ul.comma-delimited
+    +comma-delimited-list
+  ol.pretty
+    +pretty-bullets("images/blue_arrow.gif", 5px, 7px, 24px)
+
+#tables
+  +column(16)
+  table.alternating
+    :width 100%
+    +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)

data/examples/compass/utilities.html.haml

@@ -0,0 +1,136 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}
+    %title Compass Utilities Example
+    %link{:rel=>"stylesheet", :href=>"stylesheets/utilities.css", :type=>"text/css", :media=>"screen, projection"}
+  %body
+    #utilities
+      %h1 Compass Utilities Demo
+      #links
+        .example
+          %h2 Link Styling
+          %ul
+            %li.normal
+              %a{:href => "#normal-link"} This is a link, nothing special about it.
+            %li.hover
+              %a{:href => '#hover-link'}
+                This is underlined when hovered because it is using the
+                %code.mixin +hover-link
+                mixin.
+            %li.colored
+              %a{:href => '#colored-link'}
+                This should have different colors
+                because it is using the
+                %code.mixin +link-colors
+                mixin.
+            %li.unstyled
+              This is some text
+              %a{:href => '#unstyled-link'} with a link in it.
+              But you shouldn't see it
+              because it is using the
+              %code.mixin +unstyled-link
+              mixin.
+      #tag-cloud
+        .example
+          %h2 Tag Cloud
+          %p
+            This tag cloud is actually an ordered list so that the markup semantics are correct.
+            It demonstrates the following mixins:
+          %ul
+            %li
+              %code.mixin +inline-list
+            %li
+              %code.mixin +tag-cloud(1em)
+            %li
+              %code.mixin +no-bullets
+          %ol
+            %li.xxs lorem
+            %li.xs ipsum
+            %li.s dolor
+            %li sit
+            %li.l amet
+            %li.xl consectetur
+            %li.xxl adipisicing
+            %li.xs elit
+            %li.s sed
+            %li.l eiusmod
+            %li.xxl tempor
+            %li.xxs incididunt
+            %li labore
+            %li.xs dolore
+            %li magna
+            %li.xl aliqua
+      #lists
+        .example
+          %h2 Lists
+          .p
+            This text contains
+            %ul.inline
+              %li a
+              %li list
+              %li that
+              %li is
+              %li completely
+              %li inline
+            so be semantic!
+            My favorite colors are:
+            %ul.comma-delimited
+              %li red
+              %li yellow
+              %li blue
+          %ol.pretty
+            %li
+              This uses the
+              %code.mixin +pretty-bullets
+              mixin.
+            %li Do you like them?
+            %li If you don't...
+            %li Make them yourself!
+      #tables
+        .example
+          %h2 Tables
+          %p
+            This table is styled using
+            %code.mixin +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
+            The first colors are the even/odd colors respectively
+            and the last argument is a shade that is subtracted from those
+            colors for the even columns.
+          %table.alternating
+            %thead
+              %tr
+                %td  
+                %th.even Header #1
+                %th.odd Header #2
+                %th.even Header #3
+            %tr.odd
+              %th Row #1
+              %td.numeric.even 1.1
+              %td.numeric.odd  1.2
+              %td.numeric.even 1.3
+            %tr.even
+              %th Row #2
+              %td.numeric.even 2.1
+              %td.numeric.odd  2.2
+              %td.numeric.even 2.3
+            %tr.odd
+              %th Row #3
+              %td.numeric.even 3.1
+              %td.numeric.odd  3.2
+              %td.numeric.even 3.3
+            %tr.even
+              %th Row #4
+              %td.numeric.even 4.1
+              %td.numeric.odd  4.2
+              %td.numeric.even 4.3
+            %tr.odd
+              %th Row #5
+              %td.numeric.even 5.1
+              %td.numeric.odd  5.2
+              %td.numeric.even 5.3
+            %tfoot
+              %tr
+                %th Totals
+                %td.numeric.even 15.5
+                %td.numeric.odd  16.0
+                %td.numeric.even 17.5                    

data/examples/yui/divisions.html.haml

@@ -0,0 +1,179 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title Yahoo Grid Divisions Example
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+    :javascript
+      function changeTemplate() {
+        var templateClass = document.getElementById("current-template").value;
+        document.getElementById("doc4").className = templateClass;
+      }
+    %style{:type => "text/css"}
+      :sass
+        .yui-b
+          border: 1px dotted #ccc
+  %body
+    #doc4.yui-t2
+      #hd
+        %h1 Yahoo Grid Divisions Example
+      #bd
+        .yui-b
+          %h3 YUI Examples
+          %ul
+            %li
+              %a{:href=>"templates.html"} Template Presets
+            %li
+              %a{:href=>"typography.html"} Typography
+            %li
+              %a{:href=>"divisions.html"} Grid Divisions
+          %label{:for => "current-template"} Select Template Preset
+          %select{:id=>"current-template", :onchange => "changeTemplate()"}
+            %option{:value => "yui-t1"}= ".yui-t1"
+            %option{:value => "yui-t2", :selected => "selected"}= ".yui-t2"
+            %option{:value => "yui-t3"}= ".yui-t3"
+            %option{:value => "yui-t4"}= ".yui-t4"
+            %option{:value => "yui-t5"}= ".yui-t5"
+            %option{:value => "yui-t6"}= ".yui-t6"
+              
+        #yui-main
+          .yui-b
+            %h2 50/50 Division
+            %hr
+            .yui-g
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/33/33 Division
+            %hr
+            .yui-gb
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Middle
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 67/33 Division
+            %hr
+            .yui-gc
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/67 Division
+            %hr
+            .yui-gd
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 75/25 Division
+            %hr
+            .yui-ge
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 25/75 Division
+            %hr
+            .yui-gf
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+      #ft
+        Copyright © 2008. All Rights Reserved. 
+        

data/examples/yui/index.html.haml

@@ -0,0 +1,19 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title YUI Typography Demo
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+  %body
+    #doc4.yui-t2
+      .yui-b
+        %h3 YUI Examples
+        %ul
+          %li
+            %a{:href=>"templates.html"} Template Presets
+          %li
+            %a{:href=>"typography.html"} Typography
+      #yui-main
+        .yui-b
+          %h1 YUI Examples
+          %p
+            Please select an example.

data/examples/yui/stylesheets/screen.sass

@@ -0,0 +1,13 @@
+@import yui.sass
+@import compass/reset.sass
+
++yui
+
+.bigger
+  +font-size(16px)
+
+.biggest
+  +font-size(18px)
+
+.bigger .biggest
+  +font-size(18px, 16px)

data/examples/yui/sub_divisions.html.haml

@@ -0,0 +1,169 @@
+!!! Transitional
+%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
+  %head
+    %title YUI Grid Sub-Divisions Example
+    %link{:rel=>"stylesheet", :href=>"stylesheets/screen.css", :type=>"text/css", :media=>"screen, projection"}
+    %style{:type => "text/css"}
+      :sass
+        .yui-b
+          border: 1px dotted #ccc
+  %body
+    #doc4.yui-t2
+      #hd
+        %h1 Yahoo Grid Sub-Divisions Example
+      #bd
+        .yui-b
+          %h3 YUI Examples
+          %ul
+            %li
+              %a{:href=>"templates.html"} Template Presets
+            %li
+              %a{:href=>"typography.html"} Typography
+            %li
+              %a{:href=>"divisions.html"} Grid Divisions
+        #yui-main
+          .yui-b
+            %h2 50/50 Division
+            %hr
+            .yui-g
+              .yui-g.first
+                .yui-u.first
+                  %h4 Left Side of 50/50 Sub-Division (25%)
+                  %p
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                .yui-u
+                  %h4 Right Side of 50/50 Sub-Division (25%)
+                  %p
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              .yui-u
+                %h4 Right Side of 50/50 Division (50%)
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/33/33 Division
+            %hr
+            .yui-gb
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Middle
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 67/33 Division
+            %hr
+            .yui-gc
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 33/67 Division
+            %hr
+            .yui-gd
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 75/25 Division
+            %hr
+            .yui-ge
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+            %h2 25/75 Division
+            %hr
+            .yui-gf
+              .yui-u.first
+                %h3 Left Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+              .yui-u
+                %h3 Right Side
+                %p
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                  officia deserunt mollit anim id est laborum.
+
+      #ft
+        Copyright © 2008. All Rights Reserved. 
+