Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

oocss integration

  • Loading branch information...
commit 69a9089cf8ef1ecd6d6b3a584aa1ed5d2d96d86b 1 parent 0bd3006
@waxzce waxzce authored
Showing with 1,474 additions and 18 deletions.
  1. +1 −1  .gitignore
  2. +0 −3  app/controllers/Security.java
  3. +79 −14 app/views/main.html
  4. +73 −0 public/stylesheets/core/content.css
  5. +15 −0 public/stylesheets/core/grid/grids.css
  6. +362 −0 public/stylesheets/core/grid/grids_all.html
  7. +12 −0 public/stylesheets/core/grid/grids_debug.css
  8. +225 −0 public/stylesheets/core/grid/grids_doc.html
  9. +10 −0 public/stylesheets/core/libraries.css
  10. +35 −0 public/stylesheets/core/module/mod.css
  11. +11 −0 public/stylesheets/core/module/mod_debug.css
  12. +352 −0 public/stylesheets/core/module/mod_doc.html
  13. +113 −0 public/stylesheets/core/module/mod_skins.css
  14. BIN  public/stylesheets/core/module/skin/about.png
  15. BIN  public/stylesheets/core/module/skin/author.png
  16. BIN  public/stylesheets/core/module/skin/even.png
  17. BIN  public/stylesheets/core/module/skin/even_borders.psd
  18. BIN  public/stylesheets/core/module/skin/even_lr.png
  19. BIN  public/stylesheets/core/module/skin/even_tb.png
  20. BIN  public/stylesheets/core/module/skin/excerpt.png
  21. BIN  public/stylesheets/core/module/skin/faq.png
  22. BIN  public/stylesheets/core/module/skin/gc.png
  23. BIN  public/stylesheets/core/module/skin/gc_header.png
  24. BIN  public/stylesheets/core/module/skin/gc_header2.png
  25. BIN  public/stylesheets/core/module/skin/glow.png
  26. BIN  public/stylesheets/core/module/skin/glow_7px.png
  27. BIN  public/stylesheets/core/module/skin/glow_test.png
  28. BIN  public/stylesheets/core/module/skin/glow_thin.png
  29. BIN  public/stylesheets/core/module/skin/grab.png
  30. BIN  public/stylesheets/core/module/skin/header.png
  31. BIN  public/stylesheets/core/module/skin/header_glossy.png
  32. BIN  public/stylesheets/core/module/skin/header_gradient_light.png
  33. BIN  public/stylesheets/core/module/skin/help.png
  34. BIN  public/stylesheets/core/module/skin/highlight.png
  35. BIN  public/stylesheets/core/module/skin/info.png
  36. BIN  public/stylesheets/core/module/skin/kakapo.png
  37. BIN  public/stylesheets/core/module/skin/me.png
  38. BIN  public/stylesheets/core/module/skin/noted.png
  39. BIN  public/stylesheets/core/module/skin/online.png
  40. BIN  public/stylesheets/core/module/skin/photo.png
  41. BIN  public/stylesheets/core/module/skin/round.png
  42. BIN  public/stylesheets/core/module/skin/simple_corners.png
  43. BIN  public/stylesheets/core/module/skin/simple_extended.png
  44. BIN  public/stylesheets/core/module/skin/store.png
  45. BIN  public/stylesheets/core/module/skin/talk.png
  46. BIN  public/stylesheets/core/module/skin/universe.png
  47. BIN  public/stylesheets/core/module/skin/universe_gray.png
  48. BIN  public/stylesheets/core/module/skin/universe_login.png
  49. +19 −0 public/stylesheets/core/template/template.css
  50. +53 −0 public/stylesheets/core/template/template.html
  51. +6 −0 public/stylesheets/core/template/template_debug.css
  52. +108 −0 public/stylesheets/core/template/template_doc.html
View
2  .gitignore
@@ -5,4 +5,4 @@ test-result
fmkpage/
logs/
models.Tag/
-
+*.DS_Store
View
3  app/controllers/Security.java
@@ -4,9 +4,6 @@
*/
package controllers;
-import controllers.secureStuff.SecureConstants;
-import models.SmallUser;
-
/**
*
* @author waxzce
View
93 app/views/main.html
@@ -1,24 +1,89 @@
-<!DOCTYPE html>
-
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{get 'title' /}</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/libraries.css'}" />
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/template/template.css'}" />
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/grid/grids.css'}" />
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/content.css'}" />
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/module/mod.css'}" />
+ <link rel="stylesheet" type="text/css" media="all" href="@{'/public/stylesheets/core/module/mod_skins.css'}" />
+ <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}" />
#{get 'moreStyles' /}
- <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
+ <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}" />
<script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
#{get 'moreScripts' /}
</head>
<body>
- <div>
- <ul>
- <li>#{pageLink "index" /}</li>
- <li>#{pageLink "another_page" /}</li>
- <li><a href="@{PageController.pagestag("azerty")}">tag azerty</a></li>
- <li><a href="/crud/">admin</a></li>
- </ul>
+ <h1>Template</h1>
+ <div class="page liquid">
+ <div class="head">
+ <h2>Head</h2>
+ <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.</p>
+ </div>
+ <div class="body">
+ <div class="leftCol">
+ <h2>Left Column</h2>
+ <p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
+ <ul>
+ <li>.gMail = 160px</li>
+ <li>.gCal = 180px</li>
+ <li>.yahoo = 240px</li>
+ <li>.myYahoo = 300px</li>
+ </ul>
+ </div>
+ <div class="rightCol">
+ <h2>Right Column</h2>
+ <p>The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.</p>
+ <ul>
+ <li>.gMail = 160px</li>
+ <li>.gCal = 180px</li>
+ <li>.yahoo = 240px</li>
+ <li>.myYahoo = 300px</li>
+ </ul>
+ </div>
+ <div class="main">
+ <h2>Main Content</h2>
+ <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
+ </div>
+ </div>
+ <div class="foot">
+ <h2>Foot</h2>
+ <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.</p>
+ </div>
</div>
- #{doLayout /}
</body>
</html>
+
+
+
+
+
+
+
+
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <title>#{get 'title' /}</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
+ #{get 'moreStyles' /}
+ <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
+ <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
+ #{get 'moreScripts' /}
+ </head>
+ <body>
+ <div>
+ <ul>
+ <li>#{pageLink "index" /}</li>
+ <li>#{pageLink "another_page" /}</li>
+ <li><a href="@{PageController.pagestag("azerty")}">tag azerty</a></li>
+ <li><a href="/crud/">admin</a></li>
+ </ul>
+ </div>
+ #{doLayout /}
+ </body>
+ </html>
View
73 public/stylesheets/core/content.css
@@ -0,0 +1,73 @@
+body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
+/* **************** CONTENT OBJECTS ***************** */
+/* ====== Default spacing ====== */
+h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:10px;}
+h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
+pre{margin: 10px;}
+table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
+/* ====== Elements ====== */
+img{display:block;}
+em{font-style: italic;}
+strong{font-weight:bold;}
+hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
+code{color:#0B8C8F;}
+/* ====== Headings ====== */
+/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
+h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;}
+h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;}
+h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;}
+h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;}
+h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;}
+h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
+/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
+.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
+.category a{color: #333;}
+.important a{font-weight:bold;}
+/* links */
+a {color: #2c4460; text-decoration: none;}
+a:focus, a:hover {text-decoration: underline;}
+a:focus{background-color:#FFFFCC;}
+a:visited { color:#005a9c; }
+/* ====== Lists ======*/
+/* numbered list */
+ol.simpleList li{list-style-type: decimal; margin-left:40px;}
+/* standard list */
+ul.simpleList li{list-style-type:disc; margin-left:40px;}
+/* ====== Tables ====== */
+.data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}
+.data table {width:100%;border:1px solid #AE0345;}
+th, td{vertical-align:top;border:1px solid #AE0345;}
+.txtC, .data .txtC td, .data .txtC th{text-align:center;}
+.txtL, .data .txtL td, .data .txtL th{text-align:left;}
+.txtR, .data .txtR td, .data .txtR th{text-align:right;}
+.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
+.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
+.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
+.data th,.data td{padding:3px 20px}
+.data thead tr{background-color: #fff0f8;}
+.data th{color: #000; font-weight:bold}
+/* specification table - extends data table */
+.spec{padding:10px;}
+.spec table{border-top: 1px solid #e2e2e2; border-bottom-color:#fff; border-left:none; border-right:none;}
+.spec th, .spec td{border:1px solid #e2e2e2; border-width: 1px 0; padding-left:0;}
+.spec .odd, .spec .even{background-color: #fff;}
+/* ====== blockquote ====== */
+cite{display:block; text-align:right; padding-top: 10px;}
+/* ====== callout ====== */
+.callout{font-size:189%;color:#999999; font-style:italic;}
+.callout cite{display:block; text-align:right;padding-top: 30px; font-size:69.25%;}
+.callout span.quot{font-size: 500%; vertical-align: sub; color:#e2e2e2; line-height:25px; font-weight:bold;}
+.callout span.quotLast{vertical-align:middle;}
+/* ====== image treatments (get more from jason santa maria) ====== */
+.caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;}
+/* will need to either
+1. find a way to capture the width of the caption in the width of the image or flash
+2. Set some default widths, mby use flickr widths?
+*/
+/* ====== media ====== */
+.media{overflow:hidden; overflow:visible; zoom:1;margin:10px;}
+.media .img{float:left;margin-right: 10px;}
+.media .img img{display:block;}
+.media .imgExt{float:right; margin-left: 10px;}
+/* ====== special formatting classes ====== */
+.detail{color: #777; font-size:11px;display:block;}
View
15 public/stylesheets/core/grid/grids.css
@@ -0,0 +1,15 @@
+@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}}
+.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
+.line{*zoom:1;}
+.unit{float:left;}
+.size1of1{float:none;}
+.size1of2{width:50%;}
+.size1of3{width:33.33333%;}
+.size2of3{width:66.66666%;}
+.size1of4{width:25%;}
+.size3of4{width:75%;}
+.size1of5{width:20%;}
+.size2of5{width:40%;}
+.size3of5{width:60%;}
+.size4of5{width:80%;}
+.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
View
362 public/stylesheets/core/grid/grids_all.html
@@ -0,0 +1,362 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>All combinations of grids - without nesting</title>
+<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids_debug.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
+</head>
+<body>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5 lastUnit">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5 lastUnit">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5 lastUnit">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size3of5">
+ <h3>3/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size3of5 lastUnit">
+ <h3>3/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size3of5">
+ <h3>3/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size3of5 lastUnit">
+ <h3>3/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size3of5">
+ <h3>3/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of5 lastUnit">
+ <h3>2/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size4of5 lastUnit">
+ <h3>4/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size4of5">
+ <h3>4/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size3of4 lastUnit">
+ <h3>3/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size3of4">
+ <h3>3/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <h3>1/4</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of3 lastUnit">
+ <h3>1/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size2of3 lastUnit">
+ <h3>2/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size2of3">
+ <h3>2/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of3 lastUnit">
+ <h3>1/3</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+<div class="line">
+ <div class="unit size1of1">
+ <h3>1/1</h3>
+ <p>i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i </p>
+ </div>
+</div>
+</body>
+</html>
View
12 public/stylesheets/core/grid/grids_debug.css
@@ -0,0 +1,12 @@
+/* grids debug */
+.line{background-color:#e2e2e2;}
+.size1of1{background-color:pink;}
+.size1of2{background-color:red;}
+.size1of3{background-color:orange;}
+.size2of3{background-color: yellow;}
+.size1of4{background-color:lime;}
+.size3of4{background-color:green;}
+.size1of5{background-color:aqua;}
+.size2of5{background-color:blue;}
+.size3of5{background-color:purple;}
+.size4of5{background-color:magenta;}
View
225 public/stylesheets/core/grid/grids_doc.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Grids Documentation</title>
+<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids_debug.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
+<style type="text/css">
+dt{font-weight:bold;}
+pre strong, dt strong{color: #0B8C8F;}
+pre{padding: 20px;background-color: #FCF8BC;overflow:auto;width:auto;}
+</style>
+</head>
+<body>
+<h1>Lines &amp; Grids</h1>
+<p class="intro">Grids are used to break any space into fractions, they can be nested. A unit can contain another line or it can contain other objects directly. The sum of the fractional sizes of all children of one line should be equal to one. Grids control width, content controls height.</p>
+<h2>Base Classes</h2>
+<div class="data">
+<table>
+ <thead>
+ <tr>
+ <th>Property</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="odd">
+ <th scope="row"><code>line</code></th>
+ <td>Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>unit</code></th>
+ <td>Base class which divides a line into sections (columns).</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>size<strong>X</strong>of<strong>Y</strong></code></th>
+ <td>Extends <code>unit</code>. Indicates the fractional width of the unit, for example <code>size3of4</code> would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1
+
+1/2
+
+1/3
+
+2/3
+
+1/4
+
+3/4
+
+1/5
+
+2/5
+
+3/5
+
+4/5</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>lastUnit</code></th>
+ <td>Extends <code>unit</code>. Applied to the last child of every line.</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+<h2>Halves</h2>
+<div class="line">
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;<strong>line</strong>&quot;&gt;<br />
+ &lt;div class=&quot;<strong>unit size1of2</strong>&quot;&gt;<br />
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit ... &lt;/p&gt;
+ &lt;/div&gt;<br />
+ &lt;div class=&quot;unit size1of2 <strong>lastUnit</strong>&quot;&gt;<br />
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit ... &lt;/p&gt;
+ &lt;/div&gt;<br />
+&lt;/div&gt;</pre>
+<h2>Thirds</h2>
+<div class="line">
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of3 lastUnit">
+ <h3>1/3</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;<strong>line</strong>&quot;&gt;<br /> &lt;div class=&quot;<strong>unit size1of3</strong>&quot;&gt;<br /> &lt;p&gt;&lt;strong&gt;unit size1of3&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit size1of3&quot;&gt;<br /> &lt;p&gt;&lt;strong&gt;unit size1of3&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit size1of3 <strong>lastUnit</strong>&quot;&gt;<br /> &lt;p&gt;&lt;strong&gt;unit size1of3&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre>
+<div class="line">
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <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.</p>
+ </div>
+ <div class="unit size2of3 lastUnit">
+ <h3>2/3</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;line&quot;&gt;<br /> &lt;div class=&quot;unit size1of3&quot;&gt;<br /> &lt;p&gt;&lt;strong&gt;unit size1of3&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit <strong>size2of3</strong> lastUnit&quot;&gt;<br /> &lt;p&gt;&lt;strong&gt;unit size1of3&lt;/strong&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre>
+<h2>Quarters</h2>
+<div class="line">
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of4">
+ <h3>1/4</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;line&quot;&gt;<br /> &lt;div class=&quot;unit <strong>size1of4</strong>&quot;&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit size1of4&quot;&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit size1of2 lastUnit&quot;&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre>
+<div class="line">
+ <div class="unit size3of4">
+ <h3>3/4</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <h3>1/4</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;line&quot;&gt;<br /> &lt;div class=&quot;unit <strong>size3of4</strong>&quot;&gt;<br /> &lt;p&gt;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.&lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit size1of4 lastUnit&quot;&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre>
+
+<h2>Fifths</h2>
+<div class="line">
+ <div class="unit size4of5">
+ <h3>4/5</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <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.</p>
+ </div>
+</div>
+<pre>&lt;div class=&quot;line&quot;&gt;<br /> &lt;div class=&quot;unit <strong>size4of5</strong>&quot;&gt;<br /> &lt;h3&gt;size4of5&lt;/h3&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;unit <strong>size1of5</strong> lastUnit&quot;&gt;<br /> &lt;h3&gt;size1of5&lt;/h3&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre>
+
+<div class="line">
+ <div class="unit size2of5">
+ <h3>2/5</h3>
+ <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.</p>
+ </div>
+ <div class="unit size3of5 lastUnit">
+ <h3>3/5</h3>
+ <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.</p>
+ </div>
+</div>
+
+<h2>Complicated Nesting - the AG test</h2>
+
+<p>Many years ago Arnaud Gueras, an excellent developer I worked with, created this litmus test of a great grid system. It should be able to nest any combination of the units and lines, and so it should be able to create the complicated layout below. His test reminded me of the golden mean, so I still use it today.</p>
+
+<div class="line">
+ <div class="unit size1of5">
+ <h3>1/5</h3>
+ <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.</p>
+ <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.</p>
+ <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.</p>
+ </div>
+ <div class="unit size3of5">
+ <!-- line -->
+ <div class="line">
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+ </div>
+ <!-- /line -->
+ <div class="line">
+ <div class="unit size1of3">
+ <h3>1/3</h3>
+ <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.</p>
+ <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.</p>
+ </div>
+ <div class="unit size2of3 lastUnit">
+ <!-- line -->
+ <div class="line">
+ <div class="unit size1of2">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+ <div class="unit size1of2 lastUnit">
+ <h3>1/2</h3>
+ <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.</p>
+ </div>
+ </div>
+ <!-- /line -->
+ <div class="line">
+ <div class="unit size1of1">
+ <h3>1</h3>
+ <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.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="unit size1of5 lastUnit">
+ <h3>1/5</h3>
+ <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.</p>
+ <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.</p>
+ <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.</p>
+ </div>
+</div>
+</body>
+</html>
View
10 public/stylesheets/core/libraries.css
@@ -0,0 +1,10 @@
+/*
+Copyright (c) 2008, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+version: 3.0.0pr2
+*/
+/* reset */
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
+/* fonts */
+body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
View
35 public/stylesheets/core/module/mod.css
@@ -0,0 +1,35 @@
+/*
+Copyright (c) 2009, Nicole Sullivan. All rights reserved.
+Code licensed under the BSD License:
+version: 0.2
+*/
+/* **************** BLOCK STRUCTURES ***************** */
+/* mod */
+.mod{margin:10px;}
+.mod .inner{/*background: url(skin/transparent.png) repeat left top;*/}
+.inner,.bd,.ft{*zoom:1;}
+.inner:after,.hd:after,.bd:after,.ft:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
+.inner{position:relative;}
+b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
+.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
+.tl{background-position: left top;}
+.tr{background-position: right top;}
+.bl{background-position: left bottom;}
+.br{background-position: right bottom;}
+.br,.tr{float:right;}
+.tr, .tl{overflow:hidden;margin-bottom:-32000px;}/* margin bottom needs to be < -9px */
+.bl,.br{margin-top:-10px;}
+.top{background-position:center top;}
+.bottom{background-position:center bottom;_zoom:1;}/* this zoom required for IE5.5 only*/
+/* complex */
+.complex{overflow:hidden;*position:relative;*zoom:1;}/* position/zoom required for IE7, 6, 5.5 */
+.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;}
+.complex .bl, .complex .br{/*margin-top:0;*/}
+.complex .top{height:5px;}
+.complex .bottom{height:5px;/*margin-top:-10px;*/}
+/* pop */
+.pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top;}
+.pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
+.pop .tl, .pop .br{display:none;}
+.pop .bl{bottom:-10px;}
+.pop .tr{right:-10px;}
View
11 public/stylesheets/core/module/mod_debug.css
@@ -0,0 +1,11 @@
+/* debug modules */
+.top, .bottom{background-color:#e2e2e2;}
+.tl{background-color:red;}
+.tr{background-color:orange;}
+.bl{background-color:yellow;}
+.br{background-color:lime;}
+/*.hd{background-color: green;}
+.bd{background-color: teal;}
+.ft{background-color: blue;}*/
+.mod{background-color:purple;}
+.inner{background-color:#E20074;}
View
352 public/stylesheets/core/module/mod_doc.html
@@ -0,0 +1,352 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Standard Module Format</title>
+<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
+<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_debug.css" /> -->
+</head>
+<body>
+<div class="page">
+
+ <h1>Modules</h1>
+ <h2>Block Structures</h2>
+ <p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, WebKit Inspector or by applying the stylesheet mod_debug.css</p>
+ <div class="line">
+ <div class="unit size1of3">
+ <div class="mod">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>mod </h3>
+ </div>
+ <div class="bd">
+ <p>Mod is the basic container, all other containers inherit from this one. This is the high performance container that should be used unless you specifically need another type of container.</p>
+ <ul class="simpleList">
+ <li>One tiny image</li>
+ <li>Expands to any height or width</li>
+ <li>Compatible with any content</li>
+ <li>Choose for any container object that doesn't require outside transparency or complex borders.</li>
+ </ul>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class="unit size1of3">
+ <div class="mod complex">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>complex</h3>
+ </div>
+ <div class="bd">
+ <p>complex should be used in cases where you require images for borders because borders or drop shadows are too complex to be simulated via borders on mod and/or inner.</p>
+ <ul class="simpleList">
+ <li>One image</li>
+ <li>Height and width limited by image size</li>
+ <li>Compatible with any content</li>
+ <li>Choose when you require complex borders which cannot be simulated via css borders on mod and inner.</li>
+ </ul>
+ <p>Inspired by a conversation with Arnaud.</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class="unit size1of3 lastUnit">
+ <div class="mod pop">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>pop </h3>
+ </div>
+ <div class="bd">
+ <p>Use for popups and other containers that need outside transparency.</p>
+ <ul class="simpleList">
+ <li>One image</li>
+ <li>Height and width limited by image size</li>
+ <li>Compatible with any container, but not any content</li>
+ <li>Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)</li>
+ </ul>
+ <p>Inspired by <a href="http://www.lesliesommer.com/wdw07/html/" title="CSS Mojo: Adding Polish To Your Pages">Leslie Sommer’s Mojo blocks</a>.</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ </div>
+ <h2>Block Skins</h2>
+ <h3>Contour</h3>
+ <div class="line">
+ <div class=" unit size1of3">
+ <h4>Extends mod</h4>
+ <div class="mod grab">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>grab</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod simpleExt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>simpleExt</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod simple">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>simple</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod noted">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>noted</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod talk">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>talk</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod me">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>me</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod basic">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>basic</h3>
+ </div>
+ <div class="bd">
+ <p>Must be combined with a background color or content, adds rounded corners.</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class=" unit size1of3">
+ <h4>Extends complex</h4>
+ <div class="mod complex excerpt">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd section">
+ <h3>excerpt</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ <div class="ft act">
+ <p>Foot</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod complex flow">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>flow</h3>
+ </div>
+ <div class="bd">
+ <p><a href="#">Body</a></p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <!--<div class="mod boo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>flow</h3>
+ </div>
+ <div class="bd">
+ <p><a href="#">Body</a></p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>-->
+ <div class="mod complex photo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="bd">
+ <img src="skin/kakapo.png" alt="boo" />
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class=" unit size1of3 lastUnit">
+ <h4>Extends pop</h4>
+ <div class="mod pop sommers">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>sommers</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod pop gonzalo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd gonz">
+ <h3>gonzalo</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ </div>
+ <h2>Background Objects</h2>
+ <div class="line">
+ <div class="unit size1of3">
+ <div class="mod highlight">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>highlight</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod universe">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>universe</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class="unit size1of3">
+ <div class="mod comment">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>comment</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod foo">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>foo</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+ <div class="unit size1of3 lastUnit">
+ <div class="mod nicole">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>nicole</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ <div class="mod login">
+ <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="inner">
+ <div class="hd">
+ <h3>login</h3>
+ </div>
+ <div class="bd">
+ <p>Body</p>
+ </div>
+ </div>
+ <b class="bottom"><b class="bl"></b><b class="br"></b></b>
+ </div>
+ </div>
+
+ </div>
+ <h2>Block Headers</h2>
+ <h3 class="bam">Bam</h3>
+ <br />
+ <h3 class="topper">Topper</h3>
+ <br />
+ <h3 class="section">Section</h3>
+ <h2>Block Footers</h2>
+ <div class="ft act">button here</div>
+
+</div>
+<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
+<script type="text/javascript">
+var currentStyles = YAHOO.util.Dom.getStyle(document.body, 'backgroundColor');
+console.log(currentStyles);
+</script>-->
+</body>
+</html>
View
113 public/stylesheets/core/module/mod_skins.css
@@ -0,0 +1,113 @@
+/* **************** BLOCK SKINS ***************** */
+/* ====== Contour blocks ====== */
+/* remove background-image:" to default to square corners for IE */
+/* ----- simple (extends mod) ----- */
+.simple .inner {border:1px solid #D7D7D7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
+.simple b{*background-image:url(skin/simple_corners.png);}
+/* ----- basic (extends mod) ----- */
+.basic .inner {-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}
+.basic b{*background-image:url(skin/round.png);}
+/* ----- simpleExt (extends mod) ----- */
+.simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; }
+.simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;}
+.simpleExt b{*background-image:url(skin/simple_extended.png);}
+.simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
+.simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
+.simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
+.simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
+/* ----- me (extends mod) use for my comments ----- */
+.me,.me .inner{border:1px solid #909090;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.me .inner{border-color:#d76a84;}
+.me b{*background-image:url(skin/me.png);}
+.me .tl{left:-1px;top:-1px;}
+.me .tr{right:-1px;top:-1px;}
+.me .bl{left:-1px;bottom:-1px;}
+.me .br{right:-1px;bottom:-1px;}
+/* ----- noted (extends mod) ----- */
+.noted,.noted .inner{border:1px solid #c2c2c2;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.noted .inner{border-color:#eded68;}
+.noted b{*background-image:url(skin/noted.png);}
+.noted .tl{left:-1px;top:-1px;}
+.noted .tr{right:-1px;top:-1px;}
+.noted .bl{left:-1px;bottom:-1px;}
+.noted .br{right:-1px;bottom:-1px;}
+/* ----- grab (extends mod) ----- */
+.grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
+.grab b{background-image:url(skin/grab.png);}
+/*.grab .tl, .grab .tr{height:10px; width:10px;}*/
+.grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
+/* ----- faq (extends mod) ----- */
+.faq .inner{border: 3px solid #b20029; border-bottom-width:10px;}/* can't be done w border radius */
+.faq b{background-image:url(skin/faq.png);}
+.faq .bl, .faq .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
+/* ----- onlinestore (extends mod) ----- */
+.onlinestore .inner{border: 3px solid #9a9800; border-bottom-width:10px;}/* can't be done w border radius */
+.onlinestore b{background-image:url(skin/store.png);}
+.onlinestore .bl, .onlinestore .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
+/* ----- about (extends mod) ----- */
+.about .inner{border: 3px solid #494949; border-bottom-width:10px;}/* can't be done w border radius */
+.about b{background-image:url(skin/about.png);}
+.about .bl, .about .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
+/* ----- talk (extends mod) ----- */
+.talk,.talk .inner{border:1px solid #c7c7c7;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
+.talk .inner{border-color:#ededed;}
+.talk b{*background-image:url(skin/talk.png);}
+.talk .tl{left:-1px;top:-1px;}
+.talk .tr{right:-1px;top:-1px;}
+.talk .bl{left:-1px;bottom:-1px;}
+.talk .br{right:-1px;bottom:-1px;}
+/* ----- photo (extends complex) ----- */
+.photo .inner{border:solid 10px #fff;margin:0 4px;}/* muck with margins to change how the block will align with other blocks, any value between 0-10px */
+.photo b{background-image:url(skin/photo.png);}
+.photo .tr, .photo .tl{width:20px;}
+.photo .top, .photo .bottom{height:4px;margin-top:0px;}
+.photo .bl, .photo .br{height:16px;margin-top: -12px;}
+/* ----- flow (extends complex) ----- */
+.flow{margin:6px;}
+.flow b{background-image:url(skin/even.png);}
+.flow .inner{padding:0 4px;}
+.flow .top{height:4px;}
+.flow .bottom{height:4px;margin-top:-4px;}
+.flow .br,.flow .bl{margin-top:-6px;}/* margin top = bottom height - corner height */
+/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
+.boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/border:solid 1px #949494;background:#fff;}
+/* ----- .excerpt (extends complex) ----- */
+.excerpt b{background-image:url(skin/excerpt.png);}
+.excerpt .top{height:1px;}
+.excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */
+.excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */
+/* ----- sommers (extends pop) ----- */
+.sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
+.sommers,.sommers .inner,.sommers b{background-image:url(skin/glow_7px.png);_background-image:none;}
+.sommers{margin:3px 20px 20px 3px;}
+/* ----- gonzalo ----- */
+.gonzalo, .gonzalo .inner, .gonzalo b{background-image:url(skin/gc.png);}
+/* ====== Background blocks ====== */
+.sale .inner{background:red none;}
+.nicole .inner{background:#c01c41 none; color:#fff;}
+.nicole *, .login *{ color:#fff;}
+.highlight .inner{background:#e3e36f none;}
+.universe .inner{background:url(skin/universe.png) repeat left top;}
+.foo .inner{background: url(skin/universe_gray.png) repeat left top;}
+.login .inner{background: url(skin/universe_login.png) repeat left top;}
+.comment .inner{background:#e2e2e2 none;}
+/* ====== Block headers and footers ====== */
+.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}
+.section{background: #e9e9e9 url(skin/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
+.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;padding:0;}
+.act{background-color:#e9e9e9;}
+.topper{background: #fff url(skin/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
+.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
+.tabPosLeft .topper li,.tabPosRight .topper li{background: #fff url(skin/header_gradient_light.png) repeat-x left bottom;/* belongs in topper */}
+.tabPosBottom .topper{
+ background-image:-webkit-gradient(linear, 0% 0%, 0% 40%, from(#E2E2E2), to(#FFFFFF));
+ background-image:-moz-linear-gradient(0% 8% 270deg, #E2E2E2, #FFFFFF, #FFFFFF 77%);}
+.bam{background: #00477a url(skin/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
+.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
+.gonz{background:url(skin/gc_header.png) no-repeat left top;}/* messed up */
+.online{background: #9a9400 url(skin/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;}
+.online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;}
+.help{background: #b20029 url(skin/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
+.help h1,.help h2,.help h3,.help h4,.help h5,.help h6{font-size:100%;color:#fff;padding:0;}
+.info{background: #636363 url(skin/info.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
+.info h1,.info h2,.info h3,.info h4,.info h5,.info h6{font-size:100%;color:#fff;padding:0;}
View
BIN  public/stylesheets/core/module/skin/about.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/author.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/even.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/even_borders.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/even_lr.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/even_tb.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/excerpt.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/faq.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/gc.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/gc_header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/gc_header2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/glow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/glow_7px.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/glow_test.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/glow_thin.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/grab.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/header.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/header_glossy.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/header_gradient_light.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/help.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/highlight.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/info.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/kakapo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/me.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/noted.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/stylesheets/core/module/skin/online.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/photo.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/round.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/simple_corners.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/simple_extended.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/store.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/talk.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/universe.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/universe_gray.png
Diff not rendered
View
BIN  public/stylesheets/core/module/skin/universe_login.png
Diff not rendered
View
19 public/stylesheets/core/template/template.css
@@ -0,0 +1,19 @@
+/* **************** TEMPLATE ***************** */
+/* ====== Page Head, Body, and Foot ====== */
+body{_text-align:center;}/* IE5.5 */
+.main{display:table-cell;*display:block;width:auto;}
+.body,.main{*zoom:1;}
+.body:after,.main:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
+.page{margin:0 auto;width:950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */
+/* "old school" and "liquid" extend page to allow for different page widths */
+.oldSchool{width:750px;}
+.gs960{width:960px;}
+.liquid{width:auto;margin:0;}
+/* ====== Columns ====== */
+.leftCol{float:left;width:250px;_margin-right:-3px;}
+.rightCol{float:right;width:300px;_margin-left:-3px;}
+/* extend columns to allow for common column widths */
+.gMail{width:160px;}
+.gCal{width:180px;}
+.yahoo{width:240px;}
+.myYahoo{width:300px;}
View
53 public/stylesheets/core/template/template.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Template Documentation</title>
+<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
+<!--<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template_debug.css" />-->
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/module/mod_skins.css" />
+</head>
+<body>
+<h1>Template</h1>
+<div class="page">
+ <div class="head">
+ <h2>Head</h2>
+ <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.</p>
+ </div>
+ <div class="body">
+ <div class="leftCol">
+ <h2>Left Column</h2>
+ <p>Left column is 250px by default. It can be extended by several classes to allow for additional layouts.</p>
+ <ul>
+ <li>.gMail = 160px</li>
+ <li>.gCal = 180px</li>
+ <li>.yahoo = 240px</li>
+ <li>.myYahoo = 300px</li>
+ </ul>
+ </div>
+ <div class="rightCol">
+ <h2>Right Column</h2>
+ <p>The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.</p>
+ <ul>
+ <li>.gMail = 160px</li>
+ <li>.gCal = 180px</li>
+ <li>.yahoo = 240px</li>
+ <li>.myYahoo = 300px</li>
+ </ul>
+ </div>
+ <div class="main">
+ <h2>Main Content</h2>
+ <p>Main Content is fully liquid. It takes all the remaining space on the line after the widths of “leftCol” and “rightCol” are taken into account. Alternatively, grids can be used to break up the main content area for fully fluid layouts.</p>
+ </div>
+ </div>
+ <div class="foot">
+ <h2>Foot</h2>
+ <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.</p>
+ </div>
+</div>
+</body>
+</html>
View
6 public/stylesheets/core/template/template_debug.css
@@ -0,0 +1,6 @@
+/* **************** TEMPLATE DEBUG ***************** */
+.body{background-color:red;}
+.page{background-color:orange;}
+.main{background-color:yellow;}
+.leftCol{background-color:lime;}
+.rightCol{background-color:aqua;}
View
108 public/stylesheets/core/template/template_doc.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Template Documentation</title>
+<link rel="stylesheet" type="text/css" media="all" href="../../core/libraries.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/template/template.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/grid/grids.css" />
+<link rel="stylesheet" type="text/css" media="all" href="../../core/content.css" />
+<style type="text/css">
+dt{font-weight:bold;}
+pre strong, dt strong{color: #0B8C8F;}
+pre{padding: 20px;background-color: #FCF8BC;overflow:auto;width:auto;}
+</style>
+</head>
+<body>
+<h1>Template</h1>
+<p>Templates are used to solve common design patterns for page templates. Using these templates you can build pages which have a <strong>header</strong>, <strong>footer</strong>, <strong>left</strong> and <strong>right columns</strong>, and a <strong>main content area</strong>. Any of the sections can be broken up via <a href="grids_docs.html">grids</a>. You can also use grids instead of columns. The main column is fully liquid, taking up all the rest of the space when the left column and right column have been rendered.</p>
+<h2>Base Classes</h2>
+<div class="data">
+<table>
+ <thead>
+ <tr>
+ <th>Property</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="odd">
+ <th scope="row"><code>page</code></th>
+ <td>Main wraps site content. It can be extended via the classes <code>oldSchool</code> and <code>liquid</code> to provide 750px and full width layouts respectively.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>head</code></th>
+ <td>Site header, generally contains custom code. (e.g. horizontal navigation, logo, search box)</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>body</code></th>
+ <td>Main content area, body of the page.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>foot<strong></strong></code></th>
+ <td>Site footer, generally contains custom code.</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>main</code></th>
+ <td>Creates a main content area, often the center column. Fully liquid, it takes all remaining space when left and right columns have been rendered. You may have 1 main columns.</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>leftCol</code></th>
+ <td>Creates a left column, default width is 250px. Extended by <code>gMail</code>, <code>gCal</code>, <code>yahoo</code>, and <code>myYahoo</code> to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n left columns.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>rightCol</code></th>
+ <td>Creates a right column, default width is 250px. Extended by <code>gMail</code>, <code>gCal</code>, <code>yahoo</code>, and <code>myYahoo</code> to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n right columns.</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>gMail</code></th>
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>160px</strong> column width.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>gCal</code></th>
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>180px</strong> column width.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>yahoo</code></th>
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>240px</strong> column width.</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>myYahoo</code></th>
+ <td>Extends <code>leftCol</code> and <code>rightCol</code> to create a <strong>300px</strong> column width.</td>
+ </tr>
+ <tr class="odd">
+ <th scope="row"><code>oldSchool</code></th>
+ <td>Extends <code>page</code> to create a <strong>750px</strong> layout.</td>
+ </tr>
+ <tr class="even">
+ <th scope="row"><code>liquid</code></th>
+ <td>Extends <code>page</code> to create a <strong>full-width</strong> liquid layout.</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+<h2>Basic template</h2>
+<pre>&lt;div class=&quot;page&quot;&gt;<br /> &lt;div class=&quot;head&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;body&quot;&gt;&lt;!-- Body --&gt;<br /> &lt;div class=&quot;leftCol&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;rightCol&quot;&gt;&lt;!-- Right Column (optional region) --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;foot&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt; <br />&lt;/div&gt;</pre>
+<h2>Full width template, 2 columns, gmail style (160px left column width)</h2>
+<pre>&lt;div class=&quot;page <strong>liquid</strong>&quot;&gt;<br /> &lt;div class=&quot;head&quot;&gt;&lt;!-- Head --&gt;&lt;/div&gt;<br /> &lt;div class=&quot;body&quot;&gt;&lt;!-- Body --&gt;<br /> &lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt;&lt;!-- Left Column (optional region) --&gt;&lt;/div&gt;
+ <strong>&lt;!-- note: right column has been removed --&gt;</strong><br /> &lt;div class=&quot;main&quot;&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;foot&quot;&gt;&lt;!-- Foot --&gt;&lt;/div&gt; <br />&lt;/div&gt;</pre>
+<h2>Goals</h2>
+<p>In object oriented CSS the most important goal is to have a single template from which all pages are built. This eases CMS development because by having a single starting point all pages can be made into any other page. Users of the CMS do not have traps in which a page they have built cannot be morphed into a different page type. Another goal of an OO template is to have each section (column, header, etc) control it's own destiny. Practically, that means that if you want to add a left column to the template, the only required action should be actually adding the column to the HTML. You never want to write CSS in such a way that changes are required higher in the DOM tree in order to make child elements behave properly. Looping through the DOM is costly for CMS development. Similarly, if you want to have a different left column width, it should be accomplished by <em>extending the left column object</em> by adding an additional class.</p>
+<h3>Extending an object</h3>
+<pre>&lt;div class=&quot;leftCol <strong>gMail</strong>&quot;&gt; ... &lt;/div&gt;</pre>
+
+<h2>Customizing the template</h2>
+<p>You may not find the default and extended widths of columns or pages match your site. In this case you can extend the column or page objects to allow custom widths. For performance reasons, you should avoid customizing templates whenever possible.</p>
+<h3>Columns</h3>
+<p><code>myColumn</code> extends column objects to allow for custom column widths.</p>
+<pre>.myColumn{width:400px;}</pre>
+<h3>Main page</h3>
+<p><code>myPage</code> extends <code>page</code>.</p>
+<pre>.myPage{width:1050px;}</pre>
+<h2>Known Issues</h2>
+<ul>
+ <li><strong>Source order</strong> - the right column is before the main content in the source order. This choice was made in order to allow the columns to be completely independent objects and to have one unique template rather than multiple starting points for a site. This speeds and simplifies CMS development and enhances usability for those creating pages within the CMS. Skip to content links and navigational items marked up as lists are strongly encouraged.</li>
+ <li><strong>Overflow</strong> - the containing blocks are made to wrap floats using the <em lang="fr" xml:lang="fr">contexte de formattage</em>; <code>overflow:hidden; _overflow:visible; zoom:1;</code>. This is known to cause printing bugs in older versions of Firefox and can cause absolutely positioned blocks originating in that container to be cropped. Removing floats and overflow via the print stylesheet is a corrective option.</li>
+</ul>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.