diff --git a/www/extras/accordion/accordion.css b/www/extras/accordion/accordion.css index 1457a3aa0..5943a6f9c 100644 --- a/www/extras/accordion/accordion.css +++ b/www/extras/accordion/accordion.css @@ -1,11 +1,84 @@ -.accordion { } - -.accordionHeader { - cursor: pointer; +dl.accordion-menu { + margin: 0; + padding: 0; + width: 15em; + background:white; + position:fixed; + _position:absolute; + top:0; + _top:expression(eval((document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop)); + left:0; } -.accordionBody { - height: 0px; - overflow: auto; +dl.accordion-menu dt.a-m-t { + margin: 0; + background: #aaaaaa; + padding: 0.3em 1em; + color: #444444; + border: solid 1px #222222; + border-left-color: #dfdfdf; + border-top-color: #dfdfdf; } +dl.accordion-menu dt.a-m-t-hover{ + background:#cdcdcd; +} + + +dl.accordion-menu dt.a-m-t-down{ + border: solid 1px #222222; + border-right-color: #dfdfdf; + border-bottom-color: #dfdfdf; +} + + +html.accordion-menu-js dt.a-m-t{ + cursor:pointer; + zoom:1; +} + +dl.accordion-menu dd.a-m-d { + margin: 0; + padding: 0; + padding:0; +} + +html.accordion-menu-js dd.a-m-d{ + display:none; +} + + +html.accordion-menu-js dd.a-m-d-expand { + display:block; +} + +html.accordion-menu-js dd.a-m-d-before-expand { + display:block; + position:relative; + z-index:-1; + opacity:0; + height:auto !important; + visibility:hidden; + overflow:visible; +} + + +html.accordion-menu-js dt.a-m-t-expand { + border-left-color:#222222; + color:black; + background:#c0c0c0; +} + +html.accordion-menu-js dd.a-m-d-anim { + overflow:hidden; + display:block; +} + +dl.accordion-menu dd.a-m-d .bd{ + padding:0.5em; +} + +dd.a-m-d { + overflow: auto; + border:Solid 1px #aaaaaa; +} diff --git a/www/extras/accordion/accordion.html b/www/extras/accordion/accordion.html deleted file mode 100644 index 18e6bc2f7..000000000 --- a/www/extras/accordion/accordion.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - Accordion Example - - - - - - - - - - - - - - -
-
- -
accordion header 1
-
- accordion 1 accordion 1 accordion 1 accordion 1 - accordion 1 accordion 1 accordion 1 accordion 1 - accordion 1 accordion 1 accordion 1 accordion 1 - accordion 1 accordion 1 accordion 1 accordion 1 - accordion 1 accordion 1 accordion 1 accordion 1 - accordion 1 accordion 1 accordion 1 accordion 1 -
-
-
-
accordion header 2
-
- - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 - accordion 2 accordion 2 accordion 2 accordion 2 -
-
-
-
accordion header 3
-
accordion body 3
-
-
- - - - diff --git a/www/extras/accordion/accordion.js b/www/extras/accordion/accordion.js index 488bfd59b..4c9aeeb2c 100644 --- a/www/extras/accordion/accordion.js +++ b/www/extras/accordion/accordion.js @@ -1,79 +1,404 @@ -// This is a modified version of the accordion tutorial from www.webthreads.de +var AccordionMenu = new function() +{ + var YUD = YAHOO.util.Dom; + var YUE = YAHOO.util.Event; + var oMenuSetting = {}; + var oMenuCache = {}; + var dLastHoverTitle ; + YUD.addClass(document.documentElement,'accordion-menu-js'); + YAHOO.util.Event.on(window, "load", function () { document.body.style.marginLeft = "250px"; }); - -/* - -var myAccordion = new Accordion(id [, height]); - - id: The id of the div that contains the accordion structure. - - height: An integer representing the height that the accordion should be drawn in pixels. Defaults to the viewport height minus one header width. - -*/ - -function Accordion(id, accordionHeight) { - // pointer to the accordion container - this.accContainer = document.getElementById(id); - - // all items with class = accordionItem - this.accItems = YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer); - - // scale the acccordion to the appropriate height - this.accordionHeight = 0; - var headerHeight = YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div", this.accItems[0])[0].offsetHeight; - if (accordionHeight > 0) { - this.accordionHeight = accordionHeight; - } else { - this.accordionHeight = YAHOO.util.Dom.getViewportHeight() - headerHeight; - } - this.accContainer.style.height = this.accordionHeight + "px"; - var bodyHeight = this.accordionHeight - (headerHeight * this.accItems.length); - YAHOO.util.Dom.getElementsByClassName("accordionBody", "div", this.accItems[0])[0].style.height = bodyHeight + "px"; + function getDT(e) + { + var dEl = e.srcElement || e.target; + + if( (e.tagName + '').toUpperCase()=='DD' ) + { + var dt = e.previousSibling ; + while(dt) + { + if(dt.tagName && dt.tagName.toUpperCase() == 'DT'){break;}; + dt = dt.previousSibling + }; + + if(!dt || dt.tagName.toUpperCase() != 'DT'){return;} + else{return dt}; + } + else if(e.clientX) + { + var found = false; + while( dEl.parentNode) + { + if(YUD.hasClass(dEl,'a-m-t')){ found = true ; break;}; + dEl = dEl.parentNode; + }; + if(!found){return null} + else{return dEl }; + }; + }; - // set the default accordion body height - this.accItemBodyHeight = 0; - - // iterate over all the accordian elements and store them in an array - for (var i=0; i this.accItemBodyHeight) { - this.accItemBodyHeight = this.accItems[i].body.offsetHeight; - this.activeItem = this.accItems[i]; - this.activeItem.body.style.height = this.accItemBodyHeight + "px"; - } - - // register the click event on the header for changing the active element in the accordion - YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){ - // do nothing if they click on the active header - if(this.parent.activeItem == this){ - return; - } - - // shrink animation - var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {height:{from:this.parent.accItemBodyHeight, to:0}}, 0.1); - - // expand animation - var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {height:{from:0, to:this.parent.accItemBodyHeight}}, 0.1); - - // set the selected element as active - expandNewActiveAccAnim.onStart.subscribe(function() { this.parent.activeItem = this; }, this, true); + + + function getDD(dt) + { + if(!dt){return null;}; + var dd = dt.nextSibling ; + + while(dd) + { + if(dd.tagName && dd.tagName.toUpperCase() == 'DD'){break;}; + dd = dd.nextSibling; + + }; + if(!dd || dd.tagName.toUpperCase() != 'DD'){return;} + else{return dd}; + }; + + function expand(dl,dt,dd) + { + var bodyPanels = YUD.getElementsByClassName("a-m-d", "dd",dl); + var bodyPanelHeight = YUD.getViewportHeight() - (30 * bodyPanels.length) - 20; + + dl.hasAnimation +=1; + YUD.addClass(dd,'a-m-d-before-expand'); + var oAttr = {height:{from:0,to:bodyPanelHeight }}; - // execute the animation - shrinkLastAccAnim.animate(); - expandNewActiveAccAnim.animate(); - }, this.accItems[i], true); - } - - // only the active element remains expanded - for(var i=0; i 0 ){return;}; + YUD.removeClass(dt,'a-m-t-down'); + + if(YUD.hasClass(dd,'a-m-d-expand')) + { + collapse(dl,dt,dd); + } + else + { + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].dependent == false ){} + else{collapseAll(dl,dt,dd);} + expand(dl,dt,dd); + }; + YUE.stopEvent(e); + return false; + }; + + + YUE.addListener( document,'mouseover',onMenuMouseover); + YUE.addListener( document,'mouseout',onMenuMouseout); + YUE.addListener( document,'mousedown',onMenuMousedown); + YUE.addListener( document,'click',onMenuClick); + + this.openDtById = function(sId) + { + var dt = document.getElementById(sId); + if(!dt){return;}; + if(!YUD.hasClass(dt,'a-m-t')){return;}; + var dl = dt.parentNode; + var dd = getDD(dt); + if(dl.hasAnimation==null){dl.hasAnimation = 0;}; + + if(dl.hasAnimation > 0 ){return;}; + if(YUD.hasClass(dd,'a-m-d-expand')){return;}; + if( oMenuCache[ dl.id ] && oMenuCache[ dl.id ].dependent == false ){} + else{collapseAll(dl,dt,dd);} + expand(dl,dt,dd); + }; + + this.closeDtById = function(sId) + { + var dt = document.getElementById(sId); + if(!dt){return;}; + if(!YUD.hasClass(dt,'a-m-t')){return;}; + var dl = dt.parentNode; + var dd = getDD(dt); + if(dl.hasAnimation==null){dl.hasAnimation = 0;}; + if(dl.hasAnimation > 0 ){return;}; + if(!YUD.hasClass(dd,'a-m-d-expand')){return;}; + collapse(dl,dt,dd); + }; + + + this.setting = function(id,oOptions) + { + if( !oOptions ){return;}; + + if( typeof(id)!='string' ){return;}; + + var setMunu = function(dl) + { + dl = dl || this; + dl.hasAnimation = 0; + oMenuCache[ dl.id ] = + { + element:dl, + dependent:true, + onOpen:function(){}, + onClose:function(){}, + seconds:0.5, + easeOut:true, + openedIds:[], + animation:true + }; + oMenu = oMenuCache[ dl.id ] ; + + if(typeof(oOptions['animation'])=='boolean') + { + oMenu['animation'] = !!oOptions['animation']; + + }; + + + if(typeof(oOptions['dependent'])=='boolean') + { + oMenu['dependent'] = !!oOptions['dependent']; + }; + + if(typeof(oOptions['easeOut'])=='boolean') + { + oMenu['easeOut'] = !!oOptions['easeOut']; + }; + + if(typeof(oOptions['seconds'])=='number') + { + oMenu['seconds'] = Math.max(0 , oOptions['seconds'] ); + }; + + if(typeof(oOptions['onOpen'])=='function') + { + oMenu['onOpen'] = oOptions['onOpen']; + }; + + if(typeof(oOptions['onClose'])=='function') + { + oMenu['onClose'] = oOptions['onClose']; + }; + + if(oOptions['openedIds'].shift) + { + oMenu['openedIds'] = oOptions['openedIds']; + }; + + + for(var i=0;i + + + Accordion Example + + + + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +
+ + +
title 1
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 2
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 3
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. +
+
+ + +
+ + + + diff --git a/www/extras/accordion/example-strict.html b/www/extras/accordion/example-strict.html new file mode 100644 index 000000000..ba8f5247c --- /dev/null +++ b/www/extras/accordion/example-strict.html @@ -0,0 +1,110 @@ + + + + + Accordion Example + + + + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +
+ + +
title 1
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 2
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 3
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. +
+
+ + +
+ + + + diff --git a/www/extras/accordion/example-transitional.html b/www/extras/accordion/example-transitional.html new file mode 100644 index 000000000..bef2bb7e3 --- /dev/null +++ b/www/extras/accordion/example-transitional.html @@ -0,0 +1,110 @@ + + + + + Accordion Example + + + + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +

Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus.

+ +
+ + +
title 1
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 2
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. + Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos +hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim +sagittis purus. Nulla sollicitudin mauris sit amet purus. +
+
+ + + +
title 3
+
+ Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum +vulputate lacus. +
+
+ + +
+ + + +