├── all.css ├── core ├── module │ ├── skin │ │ ├── faq.png │ │ ├── gc.png │ │ ├── me.png │ │ ├── about.png │ │ ├── author.png │ │ ├── even.png │ │ ├── glow.png │ │ ├── grab.png │ │ ├── header.png │ │ ├── help.png │ │ ├── info.png │ │ ├── kakapo.png │ │ ├── noted.png │ │ ├── online.png │ │ ├── photo.png │ │ ├── round.png │ │ ├── store.png │ │ ├── talk.png │ │ ├── even_lr.png │ │ ├── even_tb.png │ │ ├── excerpt.png │ │ ├── glow_7px.png │ │ ├── universe.png │ │ ├── gc_header.png │ │ ├── gc_header2.png │ │ ├── glow_test.png │ │ ├── glow_thin.png │ │ ├── highlight.png │ │ ├── even_borders.psd │ │ ├── header_glossy.png │ │ ├── universe_gray.png │ │ ├── simple_corners.png │ │ ├── simple_extended.png │ │ ├── universe_login.png │ │ └── header_gradient_light.png │ ├── mod_debug.css │ ├── mod.css │ ├── mod_skins.css │ └── mod_doc.html ├── grid │ ├── grids_iphone.css │ ├── grid_rtl.css │ ├── grids_debug.css │ ├── grids.css │ ├── grids_gutter.css │ ├── grids_doc.html │ └── grids_all.html ├── media │ ├── media_debug.css │ ├── assets │ │ └── crystal_project │ │ │ ├── 16x16 │ │ │ └── actions │ │ │ │ └── 1day.png │ │ │ ├── 32x32 │ │ │ └── actions │ │ │ │ └── player_play.png │ │ │ └── readme.txt │ ├── media.css │ └── media.html ├── table │ ├── table_debug.css │ ├── table_skins.css │ ├── table.css │ └── table.html ├── template │ ├── template_debug.css │ ├── template.css │ ├── template.html │ └── template_doc.html ├── core.css ├── heading │ └── heading.css ├── libraries.css ├── content.css └── spacing │ ├── space_gutter.css │ └── space.css ├── plugins ├── grids6 │ └── grids6.css ├── breadcrumb │ ├── breadcrumb.css │ └── breadcrumb.html ├── color │ ├── color.css │ ├── color_skins.css │ └── color_doc.html ├── grids7 │ └── grids7.css ├── plugins.css ├── talk │ ├── talk_skins.css │ ├── talk.css │ └── talk_doc.html └── tabs │ ├── tabs.css │ └── tabs_doc.html ├── README.md ├── LICENSE └── index.html /all.css: -------------------------------------------------------------------------------- 1 | @import url("core/core.css"); 2 | @import url("plugins/plugins.css"); 3 | -------------------------------------------------------------------------------- /core/module/skin/faq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/faq.png -------------------------------------------------------------------------------- /core/module/skin/gc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/gc.png -------------------------------------------------------------------------------- /core/module/skin/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/me.png -------------------------------------------------------------------------------- /core/module/skin/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/about.png -------------------------------------------------------------------------------- /core/module/skin/author.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/author.png -------------------------------------------------------------------------------- /core/module/skin/even.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/even.png -------------------------------------------------------------------------------- /core/module/skin/glow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/glow.png -------------------------------------------------------------------------------- /core/module/skin/grab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/grab.png -------------------------------------------------------------------------------- /core/module/skin/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/header.png -------------------------------------------------------------------------------- /core/module/skin/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/help.png -------------------------------------------------------------------------------- /core/module/skin/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/info.png -------------------------------------------------------------------------------- /core/module/skin/kakapo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/kakapo.png -------------------------------------------------------------------------------- /core/module/skin/noted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/noted.png -------------------------------------------------------------------------------- /core/module/skin/online.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/online.png -------------------------------------------------------------------------------- /core/module/skin/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/photo.png -------------------------------------------------------------------------------- /core/module/skin/round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/round.png -------------------------------------------------------------------------------- /core/module/skin/store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/store.png -------------------------------------------------------------------------------- /core/module/skin/talk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/talk.png -------------------------------------------------------------------------------- /core/module/skin/even_lr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/even_lr.png -------------------------------------------------------------------------------- /core/module/skin/even_tb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/even_tb.png -------------------------------------------------------------------------------- /core/module/skin/excerpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/excerpt.png -------------------------------------------------------------------------------- /core/module/skin/glow_7px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/glow_7px.png -------------------------------------------------------------------------------- /core/module/skin/universe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/universe.png -------------------------------------------------------------------------------- /core/module/skin/gc_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/gc_header.png -------------------------------------------------------------------------------- /core/module/skin/gc_header2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/gc_header2.png -------------------------------------------------------------------------------- /core/module/skin/glow_test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/glow_test.png -------------------------------------------------------------------------------- /core/module/skin/glow_thin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/glow_thin.png -------------------------------------------------------------------------------- /core/module/skin/highlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/highlight.png -------------------------------------------------------------------------------- /core/grid/grids_iphone.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}} -------------------------------------------------------------------------------- /core/module/skin/even_borders.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/even_borders.psd -------------------------------------------------------------------------------- /core/module/skin/header_glossy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/header_glossy.png -------------------------------------------------------------------------------- /core/module/skin/universe_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/universe_gray.png -------------------------------------------------------------------------------- /core/module/skin/simple_corners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/simple_corners.png -------------------------------------------------------------------------------- /core/module/skin/simple_extended.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/simple_extended.png -------------------------------------------------------------------------------- /core/module/skin/universe_login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/universe_login.png -------------------------------------------------------------------------------- /plugins/grids6/grids6.css: -------------------------------------------------------------------------------- 1 | /* Allow grid divisions of 1/6 etc. */ 2 | .size1of6{width:16.6666666%;} 3 | .size5of6{width:83.3333333%;} -------------------------------------------------------------------------------- /core/module/skin/header_gradient_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/module/skin/header_gradient_light.png -------------------------------------------------------------------------------- /core/media/media_debug.css: -------------------------------------------------------------------------------- 1 | .media .img img, 2 | .media .img, 3 | .media .imgExt, 4 | .media .bd, 5 | .media {background-color: rgba(195,0,38,.30);} 6 | -------------------------------------------------------------------------------- /core/media/assets/crystal_project/16x16/actions/1day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/media/assets/crystal_project/16x16/actions/1day.png -------------------------------------------------------------------------------- /core/media/assets/crystal_project/32x32/actions/player_play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/davidchase/oocss/master/core/media/assets/crystal_project/32x32/actions/player_play.png -------------------------------------------------------------------------------- /core/grid/grid_rtl.css: -------------------------------------------------------------------------------- 1 | .rtl {direction:rtl;} 2 | .rtl .unit{float:right;} 3 | .rtl .lastUnit{_right:-3px;_margin-left:-3px;_margin-right:0; _left:0;} 4 | -------------------------------------------------------------------------------- /core/table/table_debug.css: -------------------------------------------------------------------------------- 1 | /* table debug */ 2 | .data{background-color: #FF3300} 3 | .data table{background-color:#FF6600;} 4 | .data tr{background-color: #FF9900;} 5 | .data th{background-color:#FFCC00;} 6 | .data td{ background-color:#FFFF00;} -------------------------------------------------------------------------------- /plugins/breadcrumb/breadcrumb.css: -------------------------------------------------------------------------------- 1 | .breadcrumb li{ display: inline;} 2 | .breadcrumb li:after{ content: "\25B8"; display: inline-block; padding: 0 6px 0 10px;} 3 | .breadcrumb li:last-child:after{content: "";} 4 | .breadcrumb a {color: #2c4460 !important;} -------------------------------------------------------------------------------- /core/media/media.css: -------------------------------------------------------------------------------- 1 | /* ====== media (requires mod.css) ====== */ 2 | .media{overflow:hidden;*overflow:visible;zoom:1;} 3 | .media .img{float:left;/*margin-right: 10px;*/} 4 | .media .img img{display:block;} 5 | .media .imgExt{float:right; /*margin-left: 10px;*/} 6 | -------------------------------------------------------------------------------- /core/template/template_debug.css: -------------------------------------------------------------------------------- 1 | /* **************** TEMPLATE DEBUG ***************** */ 2 | .body{background-color:red;} 3 | .page{background-color:orange;} 4 | .main{background-color:yellow;} 5 | .leftCol{background-color:lime;} 6 | .rightCol{background-color:aqua;} -------------------------------------------------------------------------------- /plugins/color/color.css: -------------------------------------------------------------------------------- 1 | .bare{color:#bbb;} 2 | .pale{color:#999;} 3 | .neutral{color:#666;} 4 | .opaque{color:#333;} 5 | .sharp{color:#000;} 6 | .contrast{color:#fff;} 7 | .firm{color:#fc6c06;} 8 | .positive{color:#73ab00;} 9 | .negative{color:#c20000;} 10 | -------------------------------------------------------------------------------- /plugins/grids7/grids7.css: -------------------------------------------------------------------------------- 1 | /* Allow grid divisions of 1/7 etc. */ 2 | .size1of7{width:14.2857143%;} 3 | .size2of7{width:28.5714286%;} 4 | .size3of7{width:42.8571429%;} 5 | .size4of7{width:57.1428572%;} 6 | .size5of7{width:71.4285715%;} 7 | .size6of7{width:85.7142858%;} -------------------------------------------------------------------------------- /plugins/plugins.css: -------------------------------------------------------------------------------- 1 | /* plugins */ 2 | @import url("breadcrumb/breadcrumb.css"); 3 | @import url("tabs/tabs.css"); 4 | @import url("talk/talk.css"); 5 | @import url("talk/talk_skins.css"); 6 | @import url("color/color.css"); 7 | @import url("color/color_skins.css"); -------------------------------------------------------------------------------- /plugins/color/color_skins.css: -------------------------------------------------------------------------------- 1 | .skinA .bare{color:#f7edd6;} 2 | .skinA .pale{color:#ebddbf;} 3 | .skinA .neutral{color:#cebd97;} 4 | .skinA .opaque{color:#bfa877;} 5 | .skinA .sharp{color:#ae7700;} 6 | .skinA .contrast{color:#000;} 7 | .skinA .firm{color:#eba000;} 8 | .skinA .positive{color:#b8c800;} 9 | .skinA .negative{color:#ba6d6d;} 10 | -------------------------------------------------------------------------------- /core/module/mod_debug.css: -------------------------------------------------------------------------------- 1 | /* debug modules */ 2 | .top, .bottom{background-color:#e2e2e2;} 3 | .tl{background-color:red;} 4 | .tr{background-color:orange;} 5 | .bl{background-color:yellow;} 6 | .br{background-color:lime;} 7 | /*.hd{background-color: green;} 8 | .bd{background-color: teal;} 9 | .ft{background-color: blue;}*/ 10 | .mod{background-color:purple;} 11 | .inner{background-color:#E20074;} 12 | -------------------------------------------------------------------------------- /core/media/assets/crystal_project/readme.txt: -------------------------------------------------------------------------------- 1 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 | This copyright and license notice covers the images in this directory. 3 | ************************************************************************ 4 | 5 | TITLE: Crystal Project Icons 6 | AUTHOR: Everaldo Coelho 7 | SITE: http://www.everaldo.com 8 | CONTACT: everaldo@everaldo.com 9 | 10 | Copyright (c) 2006-2007 Everaldo Coelho. 11 | -------------------------------------------------------------------------------- /core/grid/grids_debug.css: -------------------------------------------------------------------------------- 1 | /* grids debug */ 2 | .line{background-color:#e2e2e2;} 3 | .size1of1{background-color:pink;} 4 | .size1of2{background-color:red;} 5 | .size1of3{background-color:orange;} 6 | .size2of3{background-color: yellow;} 7 | .size1of4{background-color:lime;} 8 | .size3of4{background-color:green;} 9 | .size1of5{background-color:aqua;} 10 | .size2of5{background-color:blue;} 11 | .size3of5{background-color:purple;} 12 | .size4of5{background-color:magenta;} -------------------------------------------------------------------------------- /core/grid/grids.css: -------------------------------------------------------------------------------- 1 | .line,.lastUnit{overflow:hidden; *overflow:visible;*zoom:1;} 2 | .unit{float:left;} 3 | .unitRight{float:right;} 4 | .size1of1{float:none;} 5 | .size1of2{width:50%;} 6 | .size1of3{width:33.33333%;} 7 | .size2of3{width:66.66666%;} 8 | .size1of4{width:25%;} 9 | .size3of4{width:75%;} 10 | .size1of5{width:20%;} 11 | .size2of5{width:40%;} 12 | .size3of5{width:60%;} 13 | .size4of5{width:80%;} 14 | .lastUnit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;} -------------------------------------------------------------------------------- /core/grid/grids_gutter.css: -------------------------------------------------------------------------------- 1 | .line,.lastUnit{overflow:hidden; *overflow:visible;*zoom:1;padding:0 10px;} 2 | .unit{float:left;padding:0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} 3 | .unitRight{float:right;} 4 | .size1of1{float:none;} 5 | .size1of2{width:50%;} 6 | .size1of3{width:33.33333%;} 7 | .size2of3{width:66.66666%;} 8 | .size1of4{width:25%;} 9 | .size3of4{width:75%;} 10 | .size1of5{width:20%;} 11 | .size2of5{width:40%;} 12 | .size3of5{width:60%;} 13 | .size4of5{width:80%;} 14 | .lastUnit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## To Do 2 | 3 | * Split module skins 4 | 5 | ## Filestructure Conventions 6 | 7 | _Example:_ 8 | 9 | \-yourplugin/ {plugin-root} 10 | +-yourplugin.css {essential CSS} 11 | +-yourplugin_debug.css {CSS for debugging} 12 | +-yourplugin_doc.html {Examples and Explanation} 13 | +-yourplugin_skins.css {all skins that only require pure css, others via @import} 14 | +-\ skins/ {skins that need more than pure CSS, eg. images} 15 | +-\ photo/ {skin-root} 16 | +-photo_skin.css 17 | +-img/ 18 | +-\ flow/ {skin-root} 19 | +-flow_skin.css 20 | +-img/ 21 | -------------------------------------------------------------------------------- /core/core.css: -------------------------------------------------------------------------------- 1 | /* core */ 2 | @import url("libraries.css"); 3 | 4 | @import url("template/template.css"); 5 | /*@import url("template/template_debug.css");*/ 6 | 7 | @import url("grid/grids.css"); 8 | /*@import url("grid/grids_debug.css");*/ 9 | 10 | 11 | @import url("module/mod.css"); 12 | @import url("module/mod_skins.css"); 13 | /*@import url("module/mod_debug.css");*/ 14 | 15 | @import url("media/media.css"); 16 | /*@import url("media/media_debug.css");*/ 17 | 18 | @import url("content.css"); 19 | @import url("heading/heading.css"); 20 | @import url("spacing/space.css"); 21 | 22 | @import url("table/table.css"); 23 | @import url("table/table_skins.css"); 24 | /*@import url("table/table_debug.css");*/ 25 | -------------------------------------------------------------------------------- /core/table/table_skins.css: -------------------------------------------------------------------------------- 1 | /* simple table @extends data table */ 2 | .simpleTable{padding: 20px;/* doesn't this break stuff??? ok for win & mac on Safari, FF, chrome, opera. OK on IE6/7/8. */ } 3 | .simpleTable table{border:1px solid #AE0345;} 4 | .simpleTable th, .simpleTable td{border:1px solid #AE0345;} 5 | .simpleTable thead tr{background-color: #fff0f8;} 6 | .simpleTable th{color: #000; font-weight:bold} 7 | /* specification table @extends data table */ 8 | .spec{padding:10px;} 9 | .spec table{border-top: 1px solid #e2e2e2; border-bottom-color:#fff; border-left:none; border-right:none;} 10 | .spec th, .spec td{border:1px solid #e2e2e2; border-width: 1px 0; padding-left:0;} 11 | .spec .odd, .spec .even{background-color: #fff;} 12 | -------------------------------------------------------------------------------- /plugins/talk/talk_skins.css: -------------------------------------------------------------------------------- 1 | /* yowza (extends bubbleTop) */ 2 | .yowza .inner{background-color:#d4494f;} 3 | .yowza b b{border-bottom-color:#d4494f;} 4 | /* discuss (extends bubbleBottom) */ 5 | .discuss .inner{background-color:#CCC;} 6 | .discuss b b{border-top-color:#CCC;} 7 | /* lol (extends bubbleLeft) */ 8 | .lol .inner{background-color:#845B4E; color:#fff;} 9 | .lol b b{border-right-color:#845B4E;} 10 | /* meep (extends bubbleRight) */ 11 | .meep .inner{background-color:#6cc6c6;} 12 | .meep b b{border-left-color:#6cc6c6;} 13 | /* yoyo (extends bubbleBottom) */ 14 | .yoyo .inner{background-color:#52a583;} 15 | .yoyo b b{border-top-color:#52a583;} 16 | /* header */ 17 | .fire, .fire *{color: #000; font-size:18px; border-bottom: 1px dashed #fff;} 18 | .attribution{margin-left:27px;} -------------------------------------------------------------------------------- /core/heading/heading.css: -------------------------------------------------------------------------------- 1 | /* ====== Headings ====== */ 2 | /* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */ 3 | h1, .h1{font-size:196%; font-weight:normal; font-style: normal; color:#AE0345;} 4 | h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#AE0345;} 5 | h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#DF2B72;} 6 | h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #333;} 7 | h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#AE0345;} 8 | h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;} 9 | /* if additional headings are needed they should be created via additional classes, never via location dependant styling */ 10 | .category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;} 11 | .category a{color: #333;} -------------------------------------------------------------------------------- /core/table/table.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Data Table 3 | * Allows you to align various table cells so that the alignment class can be placed on either the table, table row, or table cell 4 | * Cell takes precedence over table row and table 5 | * Table row takes precedence over table 6 | */ 7 | .data{position:relative; zoom:1;vertical-align: top;text-align: left; /*border-right:solid 1px transparent;*//* border fixes a FF2 bug which causes the data table to overlay its borders*/} 8 | .data table {width:100%; table-layout:fixed;} 9 | th, td{/*vertical-align:top;*/} 10 | /* horizontal alignment */ 11 | .txtC, table .txtC, table tr .txtC{text-align:center;} 12 | .txtL, table .txtL, table tr .txtL{text-align:left;} 13 | .txtR, table .txtR, table tr .txtR{text-align:right;} 14 | /* vertical alignment */ 15 | .txtT, table .txtT, table tr .txtT{vertical-align:top;} 16 | .txtB, table .txtB, table tr .txtB{vertical-align:bottom;} 17 | .txtM, table .txtM, table tr .txtM{vertical-align:middle;} 18 | .data th,.data td{padding:3px 20px} 19 | -------------------------------------------------------------------------------- /plugins/talk/talk.css: -------------------------------------------------------------------------------- 1 | /* **************** TALK BUBBLE ***************** */ 2 | .bubble{overflow:hidden;_overflow:visible;_zoom:1;margin:10px;} 3 | .bubble b b{position:absolute;height:0;width:0;border: solid 7px transparent;_border: 7px solid #fff /* set color to match background color for IE6 */;} 4 | .bubble .bottom{visibility:hidden;} 5 | /* top bubbles */ 6 | .bubbleTop .inner{margin-top:7px;} 7 | .bubbleTop b b{top:0;left:10px;border-top-style:none;} 8 | /* left bubbles */ 9 | .bubbleLeft .inner{margin-left:7px;} 10 | .bubbleLeft b b{top:10px;left:0;border-left-style:none;} 11 | /* right bubbles */ 12 | .bubbleRight .inner{margin-right:7px;} 13 | .bubbleRight b b{top:10px;right:0;border-right-style:none;} 14 | /* bottom bubbles */ 15 | .bubbleBottom .inner{margin-bottom:7px;} 16 | .bubbleBottom b b{bottom:0;left:10px;border-bottom-style:none;} 17 | .bubbleBottom .bottom{visibility:visible;} 18 | /* extensions (swaps alignment of talk bubble) */ 19 | .bubbleHorizontalExt b b{top:auto; bottom:10px;visibility:visible;} /* apply to bubbleLeft or bubbleRight */ 20 | .bubbleVerticalExt b b{right:10px;left:auto;} /* apply to bubbleTop or bubbleBottom */ -------------------------------------------------------------------------------- /core/libraries.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2008, Yahoo! Inc. All rights reserved. 3 | Code licensed under the BSD License: 4 | http://developer.yahoo.net/yui/license.txt 5 | version: 3.0.0pr2 6 | */ 7 | /* reset */ 8 | 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;} 9 | /* fonts */ 10 | 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%;} -------------------------------------------------------------------------------- /core/template/template.css: -------------------------------------------------------------------------------- 1 | /* **************** TEMPLATE ***************** */ 2 | /* ====== Page Head, Body, and Foot ====== */ 3 | body{_text-align:center;}/* IE5.5 */ 4 | .main{display:table-cell;*display:block;width:auto;} 5 | .body,.main{*zoom:1;} 6 | .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 ";} 7 | .page{margin:0 auto;width:950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */ 8 | /* "old school" and "liquid" extend page to allow for different page widths */ 9 | .oldSchool{width:750px;} 10 | .gs960{width:960px;} 11 | .liquid{width:auto;margin:0;} 12 | /* ====== Columns ====== */ 13 | .leftCol{float:left;width:250px;_margin-right:-3px;} 14 | .rightCol{float:right;width:300px;_margin-left:-3px;} 15 | /* extend columns to allow for common column widths */ 16 | .gMail{width:160px;} 17 | .gCal{width:180px;} 18 | .yahoo{width:240px;} 19 | .myYahoo{width:300px;} 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Software License Agreement (BSD License) 2 | 3 | Copyright (c) 2009, Nicole Sullivan. 4 | All rights reserved. 5 | 6 | Redistribution and use of this software in source and binary forms, with or without modification, are 7 | permitted provided that the following conditions are met: 8 | 9 | * Redistributions of source code must retain the above 10 | copyright notice, this list of conditions and the 11 | following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above 14 | copyright notice, this list of conditions and the 15 | following disclaimer in the documentation and/or other 16 | materials provided with the distribution. 17 | 18 | * Neither the name of Nicole Sullivan nor the names of its 19 | contributors may be used to endorse or promote products 20 | derived from this software without specific prior 21 | written permission of Nicole Sullivan. 22 | 23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED 24 | WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 25 | PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR 26 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 27 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 28 | INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR 29 | TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 30 | ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /plugins/breadcrumb/breadcrumb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Breadcrumbs 6 | 7 | 8 | 9 | 10 |

Breadcrumbs

11 |

short test

12 | 16 |

long test

17 | 27 |

long item test

28 | 38 |

Currently tested on Safari, FF, Opera, & Chrome. Likely to have issues in IE6&7 due to advanced selectors, needs img backup.

39 | 40 | 41 | -------------------------------------------------------------------------------- /core/content.css: -------------------------------------------------------------------------------- 1 | body{font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;} 2 | /* **************** CONTENT OBJECTS ***************** */ 3 | 4 | /* ====== Elements ====== */ 5 | img{display:block;} 6 | em{font-style: italic;} 7 | strong{font-weight:bold;} 8 | hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;} 9 | code{color:#0B8C8F;} 10 | 11 | .important a{font-weight:bold;}/* what is this? */ 12 | /* links */ 13 | a {color: #2c4460; text-decoration: none;} 14 | a:focus, a:hover {text-decoration: underline;} 15 | a:focus{background-color:#FFFFCC;} 16 | a:visited { color:#005a9c; } 17 | /* ====== Lists ======*/ 18 | /* numbered list */ 19 | ol.simpleList li{list-style-type: decimal; margin-left:40px;} 20 | /* standard list */ 21 | ul.simpleList li{list-style-type:disc; margin-left:40px;} 22 | /* ====== blockquote ====== */ 23 | cite{display:block; text-align:right; padding-top: 10px;} 24 | /* ====== callout ====== */ 25 | .callout{font-size:189%;color:#999999; font-style:italic;} 26 | .callout cite{display:block; text-align:right;padding-top: 30px; font-size:69.25%;} 27 | .callout span.quot{font-size: 500%; vertical-align: sub; color:#e2e2e2; line-height:25px; font-weight:bold;} 28 | .callout span.quotLast{vertical-align:middle;} 29 | /* ====== image treatments (get more from jason santa maria) ====== */ 30 | .caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;} 31 | /* will need to either 32 | 1. find a way to capture the width of the caption in the width of the image or flash 33 | 2. Set some default widths, mby use flickr widths? 34 | */ 35 | /* ====== special formatting classes ====== */ 36 | .detail{color: #777; font-size:11px;display:block;} 37 | /* ====== images ====== */ 38 | .icon{margin-right: 5px;} -------------------------------------------------------------------------------- /core/module/mod.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2009, Nicole Sullivan. All rights reserved. 3 | Code licensed under the BSD License: 4 | version: 0.2 5 | */ 6 | /* **************** BLOCK STRUCTURES ***************** */ 7 | /* mod */ 8 | .mod{margin:10px;} 9 | .mod .inner{/*background: url(skin/transparent.png) repeat left top;*/} 10 | .bd,.ft, .hd{overflow:hidden; *overflow:visible; zoom:1;} 11 | b.top, b.top b, b.bottom, b.bottom b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;} 12 | .tl, .tr, .bl, .br{height:10px; width:10px;float:left;} 13 | .tl{background-position: left top;} 14 | .tr{background-position: right top;} 15 | .bl{background-position: left bottom;} 16 | .br{background-position: right bottom;} 17 | .br,.tr{float:right;} 18 | .tr, .tl{overflow:hidden;margin-bottom:-32000px;}/* margin bottom needs to be < -9px */ 19 | .bl,.br{margin-top:-10px;} 20 | .top{background-position:center top;} 21 | .bottom{background-position:center bottom;_zoom:1;}/* this zoom required for IE5.5 only*/ 22 | /* complex */ 23 | .complex{overflow:hidden;*position:relative;*zoom:1;}/* position/zoom required for IE7, 6, 5.5 */ 24 | .complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;} 25 | .complex .bl, .complex .br{/*margin-top:0;*/} 26 | .complex .top{height:5px;} 27 | .complex .bottom{height:5px;/*margin-top:-10px;*/} 28 | /* pop */ 29 | .pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top; padding-top:1px;/*padding to avoid margin collapsing*/} 30 | .pop .inner{right:-10px; bottom:-10px; margin:9px -10px -10px 10px; background-position:right bottom;padding:0 10px 10px 0;} 31 | .pop .tl, .pop .br{display:none;} 32 | .pop .bottom{height:0;} 33 | .pop .bl{float:none;} 34 | .pop .tr{float:right;margin-right:-10px;margin-top:-1px;/*corresponding to padding*/_display:inline;/*fix double margin bug*/ } 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Object Oriented Cascading Style Sheets (OOCSS) 7 | 8 | 9 |
10 |

Object Oriented Cascading Style Sheets (OOCSS)

11 |
12 |
13 |

Grids

14 | 18 |
19 |
20 |

Template

21 | 25 |
26 |
27 |

Module

28 | 31 |
32 |
33 |
34 |
35 |

Media

36 | 39 |
40 |
41 |

Table

42 | 45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /core/spacing/space_gutter.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Spacing classes 3 | * Should be used to modify the default spacing between objects (not between nodes of the same object) 4 | * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 5 | * 6 | */ 7 | /* ====== Default spacing ====== */ 8 | h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px 0;} 9 | h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;} 10 | pre{margin: 10px 0;} 11 | table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;} 12 | 13 | /* spacing helpers 14 | p,m = padding,margin 15 | a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical 16 | s,m,l,n = small(5px),medium(10px),large(20px),none(0px) 17 | */ 18 | 19 | .ptn,.pvn,.pan{padding-top:0px !important} 20 | .pts,.pvs,.pas{padding-top:5px !important} 21 | .ptm,.pvm,.pam{padding-top:10px !important} 22 | .ptl,.pvl,.pal{padding-top:20px !important} 23 | .prn,.phn,.pan{padding-right:0px !important} 24 | .prs,.phs,.pas{padding-right:5px !important} 25 | .prm,.phm,.pam{padding-right:10px !important} 26 | .prl,.phl,.pal{padding-right:20px !important} 27 | .pbn,.pvn,.pan{padding-bottom:0px !important} 28 | .pbs,.pvs,.pas{padding-bottom:5px !important} 29 | .pbm,.pvm,.pam{padding-bottom:10px !important} 30 | .pbl,.pvl,.pal{padding-bottom:20px !important} 31 | .pln,.phn,.pan{padding-left:0px !important} 32 | .pls,.phs,.pas{padding-left:5px !important} 33 | .plm,.phm,.pam{padding-left:10px !important} 34 | .pll,.phl,.pal{padding-left:20px !important} 35 | .mtn,.mvn,.man{margin-top:0px !important} 36 | .mts,.mvs,.mas{margin-top:5px !important} 37 | .mtm,.mvm,.mam{margin-top:10px !important} 38 | .mtl,.mvl,.mal{margin-top:20px !important} 39 | .mrn,.mhn,.man{margin-right:0px !important} 40 | .mrs,.mhs,.mas{margin-right:5px !important} 41 | .mrm,.mhm,.mam{margin-right:10px !important} 42 | .mrl,.mhl,.mal{margin-right:20px !important} 43 | .mbn,.mvn,.man{margin-bottom:0px !important} 44 | .mbs,.mvs,.mas{margin-bottom:5px !important} 45 | .mbm,.mvm,.mam{margin-bottom:10px !important} 46 | .mbl,.mvl,.mal{margin-bottom:20px !important} 47 | .mln,.mhn,.man{margin-left:0px !important} 48 | .mls,.mhs,.mas{margin-left:5px !important} 49 | .mlm,.mhm,.mam{margin-left:10px !important} 50 | .mll,.mhl,.mal{margin-left:20px !important} 51 | -------------------------------------------------------------------------------- /core/spacing/space.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Spacing classes 3 | * Should be used to modify the default spacing between objects (not between nodes of the same object) 4 | * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 5 | * 6 | */ 7 | /* ====== Default spacing ====== */ 8 | h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px;} 9 | h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;} 10 | pre{margin: 10px;} 11 | table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;} 12 | 13 | /* spacing helpers 14 | p,m = padding,margin 15 | a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical 16 | s,m,l,n = small(5px),medium(10px),large(20px),none(0px) 17 | */ 18 | 19 | .ptn,.pvn,.pan{padding-top:0px !important} 20 | .pts,.pvs,.pas{padding-top:5px !important} 21 | .ptm,.pvm,.pam{padding-top:10px !important} 22 | .ptl,.pvl,.pal{padding-top:20px !important} 23 | .prn,.phn,.pan{padding-right:0px !important} 24 | .prs,.phs,.pas{padding-right:5px !important} 25 | .prm,.phm,.pam{padding-right:10px !important} 26 | .prl,.phl,.pal{padding-right:20px !important} 27 | .pbn,.pvn,.pan{padding-bottom:0px !important} 28 | .pbs,.pvs,.pas{padding-bottom:5px !important} 29 | .pbm,.pvm,.pam{padding-bottom:10px !important} 30 | .pbl,.pvl,.pal{padding-bottom:20px !important} 31 | .pln,.phn,.pan{padding-left:0px !important} 32 | .pls,.phs,.pas{padding-left:5px !important} 33 | .plm,.phm,.pam{padding-left:10px !important} 34 | .pll,.phl,.pal{padding-left:20px !important} 35 | .mtn,.mvn,.man{margin-top:0px !important} 36 | .mts,.mvs,.mas{margin-top:5px !important} 37 | .mtm,.mvm,.mam{margin-top:10px !important} 38 | .mtl,.mvl,.mal{margin-top:20px !important} 39 | .mrn,.mhn,.man{margin-right:0px !important} 40 | .mrs,.mhs,.mas{margin-right:5px !important} 41 | .mrm,.mhm,.mam{margin-right:10px !important} 42 | .mrl,.mhl,.mal{margin-right:20px !important} 43 | .mbn,.mvn,.man{margin-bottom:0px !important} 44 | .mbs,.mvs,.mas{margin-bottom:5px !important} 45 | .mbm,.mvm,.mam{margin-bottom:10px !important} 46 | .mbl,.mvl,.mal{margin-bottom:20px !important} 47 | .mln,.mhn,.man{margin-left:0px !important} 48 | .mls,.mhs,.mas{margin-left:5px !important} 49 | .mlm,.mhm,.mam{margin-left:10px !important} 50 | .mll,.mhl,.mal{margin-left:20px !important} 51 | .mra,.mha{margin-right:auto !important} 52 | .mla,.mha{margin-left:auto !important} -------------------------------------------------------------------------------- /core/template/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Template Documentation 6 | 7 | 8 | 9 |

Template

10 |
11 |
12 |

Head

13 |

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.

14 |
15 |
16 |
17 |

Left Column

18 |

Left column is 250px by default. It can be extended by several classes to allow for additional layouts.

19 |
    20 |
  • .gMail = 160px
    • 21 |
  • .gCal = 180px
    • 22 |
  • .yahoo = 240px
    • 23 |
  • .myYahoo = 300px
    • 24 |
25 |
26 |
27 |

Right Column

28 |

The right column is by default 300px wide. It can be extended via all the same classes that are available to right column.

29 |
    30 |
  • .gMail = 160px
    • 31 |
  • .gCal = 180px
    • 32 |
  • .yahoo = 240px
    • 33 |
  • .myYahoo = 300px
    • 34 |
35 |
36 |
37 |

Main Content

38 |

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.

39 |
40 |
41 |
42 |

Foot

43 |

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.

44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /plugins/color/color_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Colors 6 | 7 | 8 | 9 |
10 |
11 |
12 |

Basic colors

13 |

Bare

14 |

Pale

15 |

Neutral

16 |

Opaque

17 |

Sharp

18 |
19 |
20 |
21 |

Contrast

22 |
23 |
24 |
25 |

Firm

26 |

Positive

27 |

Negative

28 |
29 |
30 |
31 |

Skin A

32 |

Bare

33 |

Pale

34 |

Neutral

35 |

Opaque

36 |

Sharp

37 |
38 |
39 |
40 |

Contrast

41 |
42 |
43 |
44 |

Firm

45 |

Positive

46 |

Negative

47 |
48 |
49 |
50 | 51 |

Notes

52 |
    53 |
  • Font colors should be as abstract as possible.
    • 54 |
  • This allows us using any skins we like without modifying classes.
    • 55 |
  • Just give to a body skin-name class and you're done.
    • 56 |
  • Use firm class for unique color of the project (like orange in my example).
    • 57 |
  • Use positive, negative to style only relative information (like system messages or feedback, etc).
    • 58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /plugins/tabs/tabs.css: -------------------------------------------------------------------------------- 1 | /* 2 | TODO: Allow % widths of tabs 3 | TODO: Abstract skin from tabs 4 | TODO: clean up selector structure - too much variation in rule strength 5 | 6 | */ 7 | 8 | .tabs{} 9 | .tabs .bd{} 10 | .tabs .hd ul{padding:0; display:table-row;_zoom:1;} 11 | .tabs .hd li{display:table-cell;*display:inline;vertical-align:middle;} 12 | .tabs .tabControl a{display:inline-block;text-decoration: none;} 13 | .tabs .tabControl span{display:inline-block; text-align:center; padding: 5px 20px;} 14 | .tabs .bd li{display:none;} 15 | .tabs .bd li li{display:block;} 16 | .tabs .bd li.current{display:block;} 17 | 18 | .tabs .topper{padding:0;} 19 | 20 | .tabControl li{border-right:solid 1px #ccc; border-left:solid 1px #fff;} 21 | .tabControl li:last-child{border-right:none;} 22 | .tabControl li:first-child{border-left:none;} 23 | .tabs a{font-weight:normal; color: #333;} 24 | .tabs .hd .tabControl .current{background-color: #fff;} 25 | .tabs li a:hover{color:#000;background-color: #fff;} 26 | .tabs .hd li.current a,.tabs .hd li.current span{cursor: default;} 27 | .tabs li.current a:hover{color:#333;} 28 | .tabs .hd li span{cursor:pointer;} 29 | 30 | .controls{position:absolute; top:0; right: 0; display: none !important; /* this should move to its' own plugin */} 31 | .controls a{padding: 10px;} 32 | 33 | 34 | .tabPosLeft .hd .tabControl .current {background-image:none; border-bottom:solid 1px #e2e2e2;border-right:none; margin-right:-1px;} 35 | .tabPosLeft .tabControl li{border-right:none;} 36 | .tabPosLeft .hd{border-right: 1px solid #e2e2e2;margin-right:-1px;} 37 | .tabPosLeft .bd {border-left: 1px solid #e2e2e2; display: table-cell;} 38 | .tabPosLeft .tabControl a{border-right:1px solid #fff;} 39 | .tabPosLeft .hd {float:left; width: 33%;} 40 | .tabPosLeft .tabControl a, .tabPosLeft .tabControl span, .tabPosLeft .tabControl li, .tabPosLeft .hd ul{display:block;text-align: left;} 41 | .tabPosLeft .tabControl span,.tabPosRight .tabControl span{padding: 5px 10px;} 42 | 43 | /* right side tabs */ 44 | 45 | .tabPosRight .hd .tabControl li{border-left:none; border-right:solid 1px #fff;} 46 | .tabPosRight .hd .tabControl .current {background-image:none; border-bottom:solid 1px #e2e2e2;border-left:none; margin-left: -1px;} 47 | .tabPosRight .tabControl a{border-left:1px solid #fff;} 48 | .tabPosRight .hd {float:right; width: 33%;} 49 | .tabPosRight .tabControl a, .tabPosRight .tabControl span, .tabPosRight .tabControl li, .tabPosRight .hd ul{display:block;text-align: left;} 50 | .tabPosRight .hd{border-left: 1px solid #e2e2e2;margin-left:-1px;} 51 | .tabPosRight .bd {border-right: 1px solid #e2e2e2; display: table-cell;} 52 | /* bottom side tabs */ 53 | 54 | 55 | 56 | /*.inner:after,.bd: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 ";} 57 | .inner, .bd{*zoom:1;}*/ 58 | 59 | 60 | 61 | /* debug */ 62 | /* 63 | .tabs{background-color: brown;} 64 | .tabs .hd{background-color: black;} 65 | .tabs .hd ul{background-color: blue;} 66 | .tabs .hd ul li{background-color: yellow;} 67 | .tabs .hd ul li a{background-color: orange;} 68 | */ -------------------------------------------------------------------------------- /core/media/media.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Media Block 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Media Block

13 |

Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks.

14 | 15 |
16 | 1day 17 |
event date
18 |
19 | 20 |
21 | img 22 |
23 |

@Stubbornella 14 minutes ago

24 |
25 |
26 | 27 |
28 | img 29 | X 30 |
31 |

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.

32 |
33 |
34 | 35 |
36 | img 37 | 38 |
39 |

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.

40 |
41 | 1day 42 |
event date
43 |
44 |
45 |
46 | 47 | 48 |
49 | img 50 |
51 |

Last week I went to Yahoo! to give a talk about design performance for YUI theater.

52 |

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.

53 |

SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious-is-a-really-long-word.

54 |
55 |
56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /core/table/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Table Documentation 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Table

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
This table should align lefttypebrowsersmessageline
This row should align CenterThis cell should align rightFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
67broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
15broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
20broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
35broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
35broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
62 |
63 | 64 |
65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |
errortypebrowsersmessageline
35broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
67broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
15broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
20broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
35broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
35broken box modelFF, Safari, OperaDon't declare width and either padding or borders on the same element.3
115 |
116 |
117 |
118 | 119 |
120 |
121 | 122 | 123 | 124 | 125 |
126 |
127 | 128 | 129 | -------------------------------------------------------------------------------- /plugins/tabs/tabs_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tabs 6 | 7 | 8 | 9 | 10 | 11 |

Standard Tabs

12 |
13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 |
    21 |
  • Tab 1 Content
    • 22 |
  • Tab 2 Content
    • 23 |
  • Tab 3 Content


    boo
    • 24 |
  • Tab 4 Content
    • 25 |
  • Tab 5 Content
    • 26 |
  • Tab 6 Content
    • 27 |
28 |
29 |
30 | 31 |
32 |

Bottom Tabs

33 |
34 | 35 |
36 |
37 |
    38 |
  • Tab 1 Content
    • 39 |
  • Tab 2 Content
    • 40 |
  • Tab 3 Content


    • 41 |
  • Tab 4 Content
    • 42 |
  • Tab 5 Content
    • 43 |
  • Tab 6 Content
    • 44 |
45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 |
53 |

Left-side tabs

54 |
55 | 56 |
57 |
58 | 59 | 60 |
61 |
62 |
    63 |
  • Tab 1 Content
    • 64 |
  • Tab 2 Content
    • 65 |
  • Tab 3 Content


    • 66 |
  • Tab 4 Content
    • 67 |
  • Tab 5 Content
    • 68 |
  • Tab 6 Content
    • 69 |
70 |
71 |
72 | 73 |
74 | 75 | 76 |

Right-side tabs

77 |
78 | 79 |
80 |
81 | 82 | 83 |
84 |
85 |
    86 |
  • Tab 1 Content
    • 87 |
  • Tab 2 Content
    • 88 |
  • 89 |

    Tab 3 Content

    90 |

    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.

    91 |

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    92 |
    • 93 |
  • Tab 4 Content
    • 94 |
  • Tab 5 Content
    • 95 |
  • Tab 6 Content
    • 96 |
97 |
98 |
99 | 100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /plugins/talk/talk_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Talk Bubbles 6 | 7 | 8 | 9 |
10 | 11 |

Talk Bubbles

12 |

Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.

13 |
14 |
15 |
16 | 17 |
18 |
19 |

yowza

20 |
21 |
22 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

23 |
24 |
25 | 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |

lol

34 |
35 |
36 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | 45 |
46 |
47 |

meep

48 |
49 |
50 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

51 |
52 |
53 | 54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |

Yoyo

62 |
63 |
64 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

65 |
66 |
67 | 68 |
69 |
70 |
71 |

Extending the talk bubbles

72 |
73 |
74 |
75 | 76 |
77 |
78 |

yowza + bubbleVerticalExt

79 |
80 |
81 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

82 |
83 |
84 | 85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 |

lol + bubbleHorizontalExt

93 |
94 |
95 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

96 |
97 |
98 | 99 |
100 |
101 |
102 |
103 | 104 |
105 |
106 |

meep + bubbleHorizontalExt

107 |
108 |
109 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

110 |
111 |
112 | 113 |
114 |
115 |
116 |
117 | 118 |
119 |
120 |

Yoyo + bubbleVerticalExt

121 |
122 |
123 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

124 |
125 |
126 | 127 |
128 |
129 |
130 |

Suggested use:

131 |
132 |
133 |
134 | 135 |
136 |
137 |

“At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.”

138 |
139 |
140 | 141 |
142 |
143 | Stubbornella 144 |
@Stubbornella 14 minutes ago
145 |
146 |
147 |
148 |
149 | 150 | 151 | -------------------------------------------------------------------------------- /core/module/mod_skins.css: -------------------------------------------------------------------------------- 1 | /* **************** BLOCK SKINS ***************** */ 2 | /* ====== Contour blocks ====== */ 3 | /* remove background-image:" to default to square corners for IE */ 4 | /* ----- simple (extends mod) ----- */ 5 | .simple .inner {border:1px solid #D7D7D7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;} 6 | .simple b{background-image:url(skin/simple_corners.png)\9;} 7 | /* ----- basic (extends mod) ----- */ 8 | .basic .inner {-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;} 9 | .basic b{background-image:url(skin/round.png)\9;} 10 | /* ----- simpleExt (extends mod) ----- */ 11 | .simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; } 12 | .simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;} 13 | .simpleExt b{background-image:url(skin/simple_extended.png)\9;} 14 | .simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;} 15 | .simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;} 16 | .simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;} 17 | .simpleExt .br{right:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;} 18 | /* ----- me (extends mod) use for my comments ----- */ 19 | .me,.me .inner{border:1px solid #909090;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} 20 | .me .inner{border-color:#d76a84;} 21 | .me b{background-image:url(skin/me.png)\9;} 22 | .me .tl{left:-1px;top:-1px;} 23 | .me .tr{right:-1px;top:-1px;} 24 | .me .bl{left:-1px;bottom:-1px;} 25 | .me .br{right:-1px;bottom:-1px;} 26 | /* ----- noted (extends mod) ----- */ 27 | .noted,.noted .inner{border:1px solid #c2c2c2;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} 28 | .noted .inner{border-color:#eded68;} 29 | .noted b{background-image:url(skin/noted.png)\9;} 30 | .noted .tl{left:-1px;top:-1px;} 31 | .noted .tr{right:-1px;top:-1px;} 32 | .noted .bl{left:-1px;bottom:-1px;} 33 | .noted .br{right:-1px;bottom:-1px;} 34 | /* ----- grab (extends mod) ----- */ 35 | .grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */ 36 | .grab b{background-image:url(skin/grab.png);} 37 | /*.grab .tl, .grab .tr{height:10px; width:10px;}*/ 38 | .grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;} 39 | /* ----- faq (extends mod) ----- */ 40 | .faq .inner{border: 3px solid #b20029; border-bottom-width:10px;}/* can't be done w border radius */ 41 | .faq b{background-image:url(skin/faq.png);} 42 | .faq .bl, .faq .br{height:16px;/*if height is set, margin set*/margin-top:-16px;} 43 | /* ----- onlinestore (extends mod) ----- */ 44 | .onlinestore .inner{border: 3px solid #9a9800; border-bottom-width:10px;}/* can't be done w border radius */ 45 | .onlinestore b{background-image:url(skin/store.png);} 46 | .onlinestore .bl, .onlinestore .br{height:16px;/*if height is set, margin set*/margin-top:-16px;} 47 | /* ----- about (extends mod) ----- */ 48 | .about .inner{border: 3px solid #494949; border-bottom-width:10px;}/* can't be done w border radius */ 49 | .about b{background-image:url(skin/about.png);} 50 | .about .bl, .about .br{height:16px;/*if height is set, margin set*/margin-top:-16px;} 51 | /* ----- talk (extends mod) ----- */ 52 | .talk,.talk .inner{border:1px solid #c7c7c7;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} 53 | .talk .inner{border-color:#ededed;} 54 | .talk b{background-image:url(skin/talk.png)\9;} 55 | .talk .tl{left:-1px;top:-1px;} 56 | .talk .tr{right:-1px;top:-1px;} 57 | .talk .bl{left:-1px;bottom:-1px;} 58 | .talk .br{right:-1px;bottom:-1px;} 59 | /* ----- photo (extends complex) ----- */ 60 | .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 */ 61 | .photo b{background-image:url(skin/photo.png);} 62 | .photo .tr, .photo .tl{width:20px;} 63 | .photo .top, .photo .bottom{height:4px;margin-top:0px;} 64 | .photo .bl, .photo .br{height:16px;margin-top: -12px;} 65 | /* ----- flow (extends complex) ----- */ 66 | .flow{margin:6px;} 67 | .flow b{background-image:url(skin/even.png);} 68 | .flow .inner{padding:0 4px;} 69 | .flow .top{height:4px;} 70 | .flow .bottom{height:4px;margin-top:-4px;} 71 | .flow .br,.flow .bl{margin-top:-6px;}/* margin top = bottom height - corner height */ 72 | /* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */ 73 | .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;} 74 | /* ----- .excerpt (extends complex) ----- */ 75 | .excerpt b{background-image:url(skin/excerpt.png);} 76 | .excerpt .top{height:1px;} 77 | .excerpt .bottom{height:6px;margin-top:-6px;}/* margin top equal to - height of bottom */ 78 | .excerpt .br,.excerpt .bl{height:12px;margin-top:-6px;}/* margin top = bottom height - corner height */ 79 | /* ----- sommers (extends pop) ----- */ 80 | .sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */ 81 | .sommers,.sommers .inner,.sommers b{background-image:url(skin/glow_7px.png);_background-image:none;} 82 | .sommers{margin:3px 20px 20px 3px;} 83 | /* ----- gonzalo ----- */ 84 | .gonzalo, .gonzalo .inner, .gonzalo b{background-image:url(skin/gc.png);} 85 | /* ====== Background blocks ====== */ 86 | .sale .inner{background:red none;} 87 | .nicole .inner{background:#c01c41 none; color:#fff;} 88 | .nicole *, .login *{ color:#fff;} 89 | .highlight .inner{background:#e3e36f none;} 90 | .universe .inner{background:url(skin/universe.png) repeat left top;} 91 | .foo .inner{background: url(skin/universe_gray.png) repeat left top;} 92 | .login .inner{background: url(skin/universe_login.png) repeat left top;} 93 | .comment .inner{background:#e2e2e2 none;} 94 | /* ====== Block headers and footers ====== */ 95 | /*.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}*/ 96 | .section{background: #e9e9e9 url(skin/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;/*padding:5px 10px;*/} 97 | .section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;/*padding:0;*/} 98 | .act{background-color:#e9e9e9;} 99 | .topper{background: #fff url(skin/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;} 100 | .topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;} 101 | .tabPosLeft .topper li,.tabPosRight .topper li{background: #fff url(skin/header_gradient_light.png) repeat-x left bottom;/* belongs in topper */} 102 | .tabPosBottom .topper{ 103 | background-image:-webkit-gradient(linear, 0% 0%, 0% 40%, from(#E2E2E2), to(#FFFFFF)); 104 | background-image:-moz-linear-gradient(0% 8% 270deg, #E2E2E2, #FFFFFF, #FFFFFF 77%);} 105 | .bam{background: #00477a url(skin/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;} 106 | .bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;} 107 | .online{background: #9a9400 url(skin/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;} 108 | .online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;} 109 | .help{background: #b20029 url(skin/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;} 110 | .help h1,.help h2,.help h3,.help h4,.help h5,.help h6{font-size:100%;color:#fff;padding:0;} 111 | .info{background: #636363 url(skin/info.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;} 112 | .info h1,.info h2,.info h3,.info h4,.info h5,.info h6{font-size:100%;color:#fff;padding:0;} 113 | -------------------------------------------------------------------------------- /core/template/template_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Template Documentation 6 | 7 | 12 | 13 | 14 |

Template

15 |

Templates are used to solve common design patterns for page templates. Using these templates you can build pages which have a header, footer, left and right columns, and a main content area. Any of the sections can be broken up via grids. 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.

16 |

Base Classes

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 |
PropertyDescription
pageMain wraps site content. It can be extended via the classes oldSchool and liquid to provide 750px and full width layouts respectively.
headSite header, generally contains custom code. (e.g. horizontal navigation, logo, search box)
bodyMain content area, body of the page.
footSite footer, generally contains custom code.
mainCreates 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.
leftColCreates a left column, default width is 250px. Extended by gMail, gCal, yahoo, and myYahoo to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n left columns.
rightColCreates a right column, default width is 250px. Extended by gMail, gCal, yahoo, and myYahoo to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n right columns.
gMailExtends leftCol and rightCol to create a 160px column width.
gCalExtends leftCol and rightCol to create a 180px column width.
yahooExtends leftCol and rightCol to create a 240px column width.
myYahooExtends leftCol and rightCol to create a 300px column width.
oldSchoolExtends page to create a 750px layout.
liquidExtends page to create a full-width liquid layout.
80 |
81 |

Basic template

82 | 
<div class="page">
	<div class="head"><!-- Head --></div>
	<div class="body"><!-- Body -->
		<div class="leftCol"><!-- Left Column (optional region) --></div>
		<div class="rightCol"><!-- Right Column (optional region) --></div>
		<div class="main"><!-- Main Content --></div>
	</div>
	<div class="foot"><!-- Foot --></div>	
</div>
83 |

Full width template, 2 columns, gmail style (160px left column width)

84 | 
<div class="page liquid">
	<div class="head"><!-- Head --></div>
	<div class="body"><!-- Body -->
		<div class="leftCol gMail"><!-- Left Column (optional region) --></div>
 85 | 		<!-- note: right column has been removed -->
		<div class="main"><!-- Main Content --></div>
	</div>
	<div class="foot"><!-- Foot --></div>	
</div>
86 |

Goals

87 |

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 extending the left column object by adding an additional class.

88 |

Extending an object

89 | 
<div class="leftCol gMail"> ... </div>
90 | 91 |

Customizing the template

92 |

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.

93 |

Columns

94 |

myColumn extends column objects to allow for custom column widths.

95 | 
.myColumn{width:400px;}
96 |

Main page

97 |

myPage extends page.

98 | 
.myPage{width:1050px;}
99 |

Known Issues

100 |
    101 |
  • Source order - 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.
    • 102 |
  • Overflow - the containing blocks are made to wrap floats using the contexte de formattage; overflow:hidden; _overflow:visible; zoom:1;. 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.
    • 103 |
104 | 105 | 106 | -------------------------------------------------------------------------------- /core/module/mod_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Standard Module Format 6 | 7 | 8 | 12 | 13 | 14 |
15 | 16 |

Modules

17 |

Block Structures

18 |

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

19 |
20 |
21 |
22 | 23 |
24 |
25 |

mod

26 |
27 |
28 |

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.

29 |
    30 |
  • One tiny image
    • 31 |
  • Expands to any height or width
    • 32 |
  • Compatible with any content
    • 33 |
  • Choose for any container object that doesn't require outside transparency or complex borders.
    • 34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 |

complex

46 |
47 |
48 |

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.

49 |
    50 |
  • One image
    • 51 |
  • Height and width limited by image size
    • 52 |
  • Compatible with any content
    • 53 |
  • Choose when you require complex borders which cannot be simulated via css borders on mod and inner.
    • 54 |
55 |

Inspired by a conversation with Arnaud.

56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 | 64 |
65 |
66 |

pop

67 |
68 |
69 |

Use for popups and other containers that need outside transparency.

70 |
    71 |
  • One image
    • 72 |
  • Height and width limited by image size
    • 73 |
  • Compatible with any container, but not any content
    • 74 |
  • Choose when you require outside transparency which cannot be simulated. (do i need to make this work with clip rather than bkg position?)
    • 75 |
76 |

Inspired by Leslie Sommer’s Mojo blocks.

77 |
78 |
79 | 80 |
81 |
82 |
83 |

Block Skins

84 |

Contour

85 |
86 |
87 |

Extends mod

88 |
89 | 90 |
91 |
92 |

grab

93 |
94 |
95 |

Body

96 |

Absolute positioned element neg margins

97 |
98 |
99 | 100 |
101 |
102 | 103 |
104 |
105 |

simpleExt

106 |
107 |
108 |

Body

109 |
110 |
111 | 112 |
113 |
114 | 115 |
116 |
117 |

simple

118 |
119 |
120 |

Body

121 |
122 |
123 | 124 |
125 |
126 | 127 |
128 |
129 |

noted

130 |
131 |
132 |

Body

133 |
134 |
135 | 136 |
137 |
138 | 139 |
140 |
141 |

talk

142 |
143 |
144 |

Body

145 |
146 |
147 | 148 |
149 |
150 | 151 |
152 |
153 |

me

154 |
155 |
156 |

Body

157 |
158 |
159 | 160 |
161 |
162 | 163 |
164 |
165 |

basic

166 |
167 |
168 |

Must be combined with a background color or content, adds rounded corners.

169 |
170 |
171 | 172 |
173 |
174 |
175 |

Extends complex

176 |
177 | 178 |
179 |
180 |

excerpt

181 |
182 |
183 |

Body

184 |
185 |
186 |

Foot

187 |
188 |
189 | 190 |
191 |
192 | 193 |
194 |
195 |

flow

196 |
197 |
198 |

Body

199 |
200 |
201 | 202 |
203 | 215 |
216 | 217 |
218 |
219 | boo 220 |
221 |
222 | 223 |
224 |
225 |
226 |

Extends pop

227 |
228 | 229 |
230 |
231 |

sommers

232 |
233 |
234 |

Body

235 |
236 |
237 | 238 |
239 |
240 | 241 |
242 |
243 |

gonzalo

244 |
245 |
246 |

Body

247 |
248 |
249 | 250 |
251 |
252 |
253 |

Background Objects

254 |
255 |
256 |
257 | 258 |
259 |
260 |

highlight

261 |
262 |
263 |

Body

264 |
265 |
266 | 267 |
268 |
269 | 270 |
271 |
272 |

universe

273 |
274 |
275 |

Body

276 |
277 |
278 | 279 |
280 |
281 |
282 |
283 | 284 |
285 |
286 |

comment

287 |
288 |
289 |

Body

290 |
291 |
292 | 293 |
294 |
295 | 296 |
297 |
298 |

foo

299 |
300 |
301 |

Body

302 |
303 |
304 | 305 |
306 |
307 |
308 |
309 | 310 |
311 |
312 |

nicole

313 |
314 |
315 |

Body

316 |
317 |
318 | 319 |
320 | 332 |
333 | 334 |
335 |

Block Headers

336 |

Bam

337 |
338 |

Topper

339 |
340 |

Section

341 |

Block Footers

342 |
button here
343 | 344 |
345 | 351 | 352 | 353 | -------------------------------------------------------------------------------- /core/grid/grids_doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grids Documentation 6 | 7 | 12 | 13 | 14 |

Lines & Grids

15 |

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.

16 |

Base Classes

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
PropertyDescription
lineGroups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling.
unitBase class which divides a line into sections (columns).
sizeXofYExtends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1 37 | 38 | 1/2 39 | 40 | 1/3 41 | 42 | 2/3 43 | 44 | 1/4 45 | 46 | 3/4 47 | 48 | 1/5 49 | 50 | 2/5 51 | 52 | 3/5 53 | 54 | 4/5
lastUnitExtends unit. Applied to the last child of every line.
62 |
63 |

Halves

64 |
65 |
66 |

1/2

67 |

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.

68 |
69 |
70 |

1/2

71 |

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.

72 |
73 |
74 | 
<div class="line">

 75 | 	<div class="unit size1of2">

 76 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ... </p>
 77 | 	</div>

 78 | 	<div class="unit size1of2 lastUnit">

 79 | 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ... </p>
 80 | 	</div>

 81 | </div>
82 |

Thirds

83 |
84 |
85 |

1/3

86 |

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.

87 |
88 |
89 |

1/3

90 |

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.

91 |
92 |
93 |

1/3

94 |

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.

95 |
96 |
97 | 
<div class="line">
	<div class="unit size1of3">
		<p><strong>unit size1of3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size1of3">
		<p><strong>unit size1of3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size1of3 lastUnit">
		<p><strong>unit size1of3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>
98 |
99 |
100 |

1/3

101 |

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.

102 |
103 |
104 |

2/3

105 |

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.

106 |
107 |
108 | 
<div class="line">
	<div class="unit size1of3">
		<p><strong>unit size1of3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size2of3 lastUnit">
		<p><strong>unit size1of3</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>
109 |

Quarters

110 |
111 |
112 |

1/4

113 |

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.

114 |
115 |
116 |

1/4

117 |

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.

118 |
119 |
120 |

1/2

121 |

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.

122 |
123 |
124 | 
<div class="line">
	<div class="unit size1of4">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size1of4">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size1of2 lastUnit">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>
125 |
126 |
127 |

3/4

128 |

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.

129 |
130 |
131 |

1/4

132 |

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.

133 |
134 |
135 | 
<div class="line">
	<div class="unit size3of4">
		<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">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>
136 | 137 |

Fifths

138 |
139 |
140 |

4/5

141 |

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.

142 |
143 |
144 |

1/5

145 |

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.

146 |
147 |
148 | 
<div class="line">
	<div class="unit size4of5">
		<h3>size4of5</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
	<div class="unit size1of5 lastUnit">
		<h3>size1of5</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
	</div>
</div>
149 | 150 |
151 |
152 |

2/5

153 |

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.

154 |
155 |
156 |

3/5

157 |

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.

158 |
159 |
160 | 161 |

Complicated Nesting - the AG test

162 | 163 |

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.

164 | 165 |
166 |
167 |

1/5

168 |

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.

169 |

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.

170 |

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.

171 |
172 |
173 | 174 |
175 |
176 |

1/2

177 |

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.

178 |
179 |
180 |

1/2

181 |

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.

182 |
183 |
184 | 185 |
186 |
187 |

1/3

188 |

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.

189 |

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.

190 |
191 |
192 | 193 |
194 |
195 |

1/2

196 |

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.

197 |
198 |
199 |

1/2

200 |

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.

201 |
202 |
203 | 204 |
205 |
206 |

1

207 |

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.

208 |
209 |
210 |
211 |
212 |
213 |
214 |

1/5

215 |

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.

216 |

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.

217 |

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.

218 |
219 |
220 | 221 | 222 | -------------------------------------------------------------------------------- /core/grid/grids_all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | All combinations of grids - without nesting 6 | 7 | 8 | 9 |
10 |
11 |

1/5

12 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

13 |
14 |
15 |

1/5

16 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

17 |
18 |
19 |

1/5

20 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

21 |
22 |
23 |

1/5

24 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

25 |
26 |
27 |

1/5

28 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

29 |
30 |
31 |
32 |
33 |

1/5

34 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

35 |
36 |
37 |

1/5

38 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

39 |
40 |
41 |

2/5

42 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

43 |
44 |
45 |

1/5

46 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

47 |
48 |
49 |
50 |
51 |

1/5

52 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

53 |
54 |
55 |

2/5

56 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

57 |
58 |
59 |

1/5

60 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

61 |
62 |
63 |

1/5

64 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

65 |
66 |
67 |
68 |
69 |

1/5

70 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

71 |
72 |
73 |

1/5

74 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

75 |
76 |
77 |

1/5

78 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

79 |
80 |
81 |

2/5

82 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

83 |
84 |
85 |
86 |
87 |

2/5

88 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

89 |
90 |
91 |

1/5

92 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

93 |
94 |
95 |

1/5

96 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

97 |
98 |
99 |

1/5

100 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

101 |
102 |
103 |
104 |
105 |

2/5

106 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

107 |
108 |
109 |

2/5

110 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

111 |
112 |
113 |

1/5

114 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

115 |
116 |
117 |
118 |
119 |

1/5

120 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

121 |
122 |
123 |

2/5

124 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

125 |
126 |
127 |

2/5

128 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

129 |
130 |
131 |
132 |
133 |

2/5

134 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

135 |
136 |
137 |

1/5

138 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

139 |
140 |
141 |

2/5

142 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

143 |
144 |
145 |
146 |
147 |

1/5

148 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

149 |
150 |
151 |

3/5

152 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

153 |
154 |
155 |

1/5

156 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

157 |
158 |
159 |
160 |
161 |

1/5

162 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

163 |
164 |
165 |

1/5

166 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

167 |
168 |
169 |

3/5

170 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

171 |
172 |
173 |
174 |
175 |

3/5

176 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

177 |
178 |
179 |

1/5

180 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

181 |
182 |
183 |

1/5

184 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

185 |
186 |
187 |
188 |
189 |

2/5

190 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

191 |
192 |
193 |

3/5

194 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

195 |
196 |
197 |
198 |
199 |

3/5

200 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

201 |
202 |
203 |

2/5

204 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

205 |
206 |
207 |
208 |
209 |

1/5

210 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

211 |
212 |
213 |

4/5

214 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

215 |
216 |
217 |
218 |
219 |

4/5

220 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

221 |
222 |
223 |

1/5

224 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

225 |
226 |
227 |
228 |
229 |

1/4

230 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

231 |
232 |
233 |

1/4

234 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

235 |
236 |
237 |

1/4

238 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

239 |
240 |
241 |

1/4

242 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

243 |
244 |
245 |
246 |
247 |

1/4

248 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

249 |
250 |
251 |

1/2

252 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

253 |
254 |
255 |

1/4

256 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

257 |
258 |
259 |
260 |
261 |

1/4

262 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

263 |
264 |
265 |

1/4

266 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

267 |
268 |
269 |

1/2

270 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

271 |
272 |
273 |
274 |
275 |

1/2

276 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

277 |
278 |
279 |

1/4

280 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

281 |
282 |
283 |

1/4

284 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

285 |
286 |
287 |
288 |
289 |

1/4

290 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

291 |
292 |
293 |

3/4

294 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

295 |
296 |
297 |
298 |
299 |

3/4

300 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

301 |
302 |
303 |

1/4

304 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

305 |
306 |
307 |
308 |
309 |

1/3

310 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

311 |
312 |
313 |

1/3

314 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

315 |
316 |
317 |

1/3

318 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

319 |
320 |
321 |
322 |
323 |

1/3

324 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

325 |
326 |
327 |

2/3

328 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

329 |
330 |
331 |
332 |
333 |

2/3

334 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

335 |
336 |
337 |

1/3

338 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

339 |
340 |
341 |
342 |
343 |

1/2

344 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

345 |
346 |
347 |

1/2

348 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

349 |
350 |
351 |
352 |
353 |

1/1

354 |

i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i

355 |
356 |
357 | 358 | 359 | --------------------------------------------------------------------------------