Team:Imperial College/Templates/tabs

From 2013.igem.org

(Difference between revisions)

Revision as of 11:18, 1 October 2013

Overview
Specifications
Design
Modelling
Assemble
Testing & results
Future work

Content 1

Content 3

Content 4

Content 5

Content 6

Content 7

Tab

Content Hello world

Tab

Content

Tab

Content

Tab

Content

Tab

Content

Tab

Content

Tab

Content

Tab

Content

Tab

Content

Content 2

@@ Line 1: / Line 1: @@
 <html>
+<script type="text/javascript">
+(function(){if(typeof Spry=="undefined")window.Spry={};if(!Spry.Widget)Spry.Widget={};Spry.Widget.CollapsiblePanel=function(element,opts){this.element=this.getElement(element);this.focusElement=null;this.hoverClass="CollapsiblePanelTabHover";this.openClass="CollapsiblePanelOpen";this.closedClass="CollapsiblePanelClosed";this.focusedClass="CollapsiblePanelFocused";this.enableAnimation=true;this.enableKeyboardNavigation=true;this.animator=null;this.hasFocus=false;this.contentIsOpen=true;this.openPanelKeyCode=Spry.Widget.CollapsiblePanel.KEY_DOWN;this.closePanelKeyCode=Spry.Widget.CollapsiblePanel.KEY_UP;Spry.Widget.CollapsiblePanel.setOptions(this,opts);this.attachBehaviors();};Spry.Widget.CollapsiblePanel.prototype.getElement=function(ele){if(ele&&typeof ele=="string")return document.getElementById(ele);return ele;};Spry.Widget.CollapsiblePanel.prototype.addClassName=function(ele,className){if(!ele||!className||(ele.className&&ele.className.search(new RegExp("\\b"+className+"\\b"))!=-1))return;ele.className+=(ele.className?" ":"")+className;};Spry.Widget.CollapsiblePanel.prototype.removeClassName=function(ele,className){if(!ele||!className||(ele.className&&ele.className.search(new RegExp("\\b"+className+"\\b"))==-1))return;ele.className=ele.className.replace(new RegExp("\\s*\\b"+className+"\\b","g"),"");};Spry.Widget.CollapsiblePanel.prototype.hasClassName=function(ele,className){if(!ele||!className||!ele.className||ele.className.search(new RegExp("\\b"+className+"\\b"))==-1)return false;return true;};Spry.Widget.CollapsiblePanel.prototype.setDisplay=function(ele,display){if(ele)ele.style.display=display;};Spry.Widget.CollapsiblePanel.setOptions=function(obj,optionsObj,ignoreUndefinedProps){if(!optionsObj)return;for(var optionName in optionsObj){if(ignoreUndefinedProps&&optionsObj[optionName]==undefined)continue;obj[optionName]=optionsObj[optionName];}};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver=function(e){this.addClassName(this.getTab(),this.hoverClass);return false;};Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut=function(e){this.removeClassName(this.getTab(),this.hoverClass);return false;};Spry.Widget.CollapsiblePanel.prototype.open=function(){this.contentIsOpen=true;if(this.enableAnimation){if(this.animator)this.animator.stop();this.animator=new Spry.Widget.CollapsiblePanel.PanelAnimator(this,true,{duration:this.duration,fps:this.fps,transition:this.transition});this.animator.start();}else this.setDisplay(this.getContent(),"block");this.removeClassName(this.element,this.closedClass);this.addClassName(this.element,this.openClass);};Spry.Widget.CollapsiblePanel.prototype.close=function(){this.contentIsOpen=false;if(this.enableAnimation){if(this.animator)this.animator.stop();this.animator=new Spry.Widget.CollapsiblePanel.PanelAnimator(this,false,{duration:this.duration,fps:this.fps,transition:this.transition});this.animator.start();}else this.setDisplay(this.getContent(),"none");this.removeClassName(this.element,this.openClass);this.addClassName(this.element,this.closedClass);};Spry.Widget.CollapsiblePanel.prototype.onTabClick=function(e){if(this.isOpen())this.close();else this.open();this.focus();return this.stopPropagation(e);};Spry.Widget.CollapsiblePanel.prototype.onFocus=function(e){this.hasFocus=true;this.addClassName(this.element,this.focusedClass);return false;};Spry.Widget.CollapsiblePanel.prototype.onBlur=function(e){this.hasFocus=false;this.removeClassName(this.element,this.focusedClass);return false;};Spry.Widget.CollapsiblePanel.KEY_UP=38;Spry.Widget.CollapsiblePanel.KEY_DOWN=40;Spry.Widget.CollapsiblePanel.prototype.onKeyDown=function(e){var key=e.keyCode;if(!this.hasFocus||(key!=this.openPanelKeyCode&&key!=this.closePanelKeyCode))return true;if(this.isOpen()&&key==this.closePanelKeyCode)this.close();else if(key==this.openPanelKeyCode)this.open();return this.stopPropagation(e);};Spry.Widget.CollapsiblePanel.prototype.stopPropagation=function(e){if(e.preventDefault)e.preventDefault();else e.returnValue=false;if(e.stopPropagation)e.stopPropagation();else e.cancelBubble=true;return false;};Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers=function(){var tab=this.getTab();if(!tab)return;var self=this;Spry.Widget.CollapsiblePanel.addEventListener(tab,"click",function(e){return self.onTabClick(e);},false);Spry.Widget.CollapsiblePanel.addEventListener(tab,"mouseover",function(e){return self.onTabMouseOver(e);},false);Spry.Widget.CollapsiblePanel.addEventListener(tab,"mouseout",function(e){return self.onTabMouseOut(e);},false);if(this.enableKeyboardNavigation){var tabIndexEle=null;var tabAnchorEle=null;this.preorderTraversal(tab,function(node){if(node.nodeType==1){var tabIndexAttr=tab.attributes.getNamedItem("tabindex");if(tabIndexAttr){tabIndexEle=node;return true;}if(!tabAnchorEle&&node.nodeName.toLowerCase()=="a")tabAnchorEle=node;}return false;});if(tabIndexEle)this.focusElement=tabIndexEle;else if(tabAnchorEle)this.focusElement=tabAnchorEle;if(this.focusElement){Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"focus",function(e){return self.onFocus(e);},false);Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"blur",function(e){return self.onBlur(e);},false);Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement,"keydown",function(e){return self.onKeyDown(e);},false);}}};Spry.Widget.CollapsiblePanel.addEventListener=function(element,eventType,handler,capture){try{if(element.addEventListener)element.addEventListener(eventType,handler,capture);else if(element.attachEvent)element.attachEvent("on"+eventType,handler);}catch(e){}};Spry.Widget.CollapsiblePanel.prototype.preorderTraversal=function(root,func){var stopTraversal=false;if(root){stopTraversal=func(root);if(root.hasChildNodes()){var child=root.firstChild;while(!stopTraversal&&child){stopTraversal=this.preorderTraversal(child,func);try{child=child.nextSibling;}catch(e){child=null;}}}}return stopTraversal;};Spry.Widget.CollapsiblePanel.prototype.attachBehaviors=function(){var panel=this.element;var tab=this.getTab();var content=this.getContent();if(this.contentIsOpen||this.hasClassName(panel,this.openClass)){this.addClassName(panel,this.openClass);this.removeClassName(panel,this.closedClass);this.setDisplay(content,"block");this.contentIsOpen=true;}else{this.removeClassName(panel,this.openClass);this.addClassName(panel,this.closedClass);this.setDisplay(content,"none");this.contentIsOpen=false;}this.attachPanelHandlers();};Spry.Widget.CollapsiblePanel.prototype.getTab=function(){return this.getElementChildren(this.element)[0];};Spry.Widget.CollapsiblePanel.prototype.getContent=function(){return this.getElementChildren(this.element)[1];};Spry.Widget.CollapsiblePanel.prototype.isOpen=function(){return this.contentIsOpen;};Spry.Widget.CollapsiblePanel.prototype.getElementChildren=function(element){var children=[];var child=element.firstChild;while(child){if(child.nodeType==1)children.push(child);child=child.nextSibling;}return children;};Spry.Widget.CollapsiblePanel.prototype.focus=function(){if(this.focusElement&&this.focusElement.focus)this.focusElement.focus();};Spry.Widget.CollapsiblePanel.PanelAnimator=function(panel,doOpen,opts){this.timer=null;this.interval=0;this.fps=60;this.duration=500;this.startTime=0;this.transition=Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;this.onComplete=null;this.panel=panel;this.content=panel.getContent();this.doOpen=doOpen;Spry.Widget.CollapsiblePanel.setOptions(this,opts,true);this.interval=Math.floor(1000/this.fps);var c=this.content;var curHeight=c.offsetHeight?c.offsetHeight:0;this.fromHeight=(doOpen&&c.style.display=="none")?0:curHeight;if(!doOpen)this.toHeight=0;else{if(c.style.display=="none"){c.style.visibility="hidden";c.style.display="block";}c.style.height="";this.toHeight=c.offsetHeight;}this.distance=this.toHeight-this.fromHeight;this.overflow=c.style.overflow;c.style.height=this.fromHeight+"px";c.style.visibility="visible";c.style.overflow="hidden";c.style.display="block";};Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition=function(time,begin,finish,duration){time/=duration;return begin+((2-time)*time*finish);};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start=function(){var self=this;this.startTime=(new Date).getTime();this.timer=setTimeout(function(){self.stepAnimation();},this.interval);};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop=function(){if(this.timer){clearTimeout(this.timer);this.content.style.overflow=this.overflow;}this.timer=null;};Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation=function(){var curTime=(new Date).getTime();var elapsedTime=curTime-this.startTime;if(elapsedTime>=this.duration){if(!this.doOpen)this.content.style.display="none";this.content.style.overflow=this.overflow;this.content.style.height=this.toHeight+"px";if(this.onComplete)this.onComplete();return;}var ht=this.transition(elapsedTime,this.fromHeight,this.distance,this.duration);this.content.style.height=((ht<0)?0:ht)+"px";var self=this;this.timer=setTimeout(function(){self.stepAnimation();},this.interval);};Spry.Widget.CollapsiblePanelGroup=function(element,opts){this.element=this.getElement(element);this.opts=opts;this.attachBehaviors();};Spry.Widget.CollapsiblePanelGroup.prototype.setOptions=Spry.Widget.CollapsiblePanel.prototype.setOptions;Spry.Widget.CollapsiblePanelGroup.prototype.getElement=Spry.Widget.CollapsiblePanel.prototype.getElement;Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren=Spry.Widget.CollapsiblePanel.prototype.getElementChildren;Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget=function(element,widget){if(!element||!widget)return;if(!element.spry)element.spry=new Object;element.spry.collapsiblePanel=widget;};Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget=function(element){return(element&&element.spry&&element.spry.collapsiblePanel)?element.spry.collapsiblePanel:null;};Spry.Widget.CollapsiblePanelGroup.prototype.getPanels=function(){if(!this.element)return[];return this.getElementChildren(this.element);};Spry.Widget.CollapsiblePanelGroup.prototype.getPanel=function(panelIndex){return this.getPanels()[panelIndex];};Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors=function(){if(!this.element)return;var cpanels=this.getPanels();var numCPanels=cpanels.length;for(var i=0;i<numCPanels;i++){var cpanel=cpanels[i];this.setElementWidget(cpanel,new Spry.Widget.CollapsiblePanel(cpanel,this.opts));}};Spry.Widget.CollapsiblePanelGroup.prototype.openPanel=function(panelIndex){var w=this.getElementWidget(this.getPanel(panelIndex));if(w&&!w.isOpen())w.open();};Spry.Widget.CollapsiblePanelGroup.prototype.closePanel=function(panelIndex){var w=this.getElementWidget(this.getPanel(panelIndex));if(w&&w.isOpen())w.close();};Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels=function(){var cpanels=this.getPanels();var numCPanels=cpanels.length;for(var i=0;i<numCPanels;i++){var w=this.getElementWidget(cpanels[i]);if(w&&!w.isOpen())w.open();}};Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels=function(){var cpanels=this.getPanels();var numCPanels=cpanels.length;for(var i=0;i<numCPanels;i++){var w=this.getElementWidget(cpanels[i]);if(w&&w.isOpen())w.close();}};})();(function(){if(typeof Spry=="undefined")window.Spry={};if(!Spry.Widget)Spry.Widget={};Spry.Widget.TabbedPanels=function(element,opts){this.element=this.getElement(element);this.defaultTab=0;this.tabSelectedClass="TabbedPanelsTabSelected";this.tabHoverClass="TabbedPanelsTabHover";this.tabFocusedClass="TabbedPanelsTabFocused";this.panelVisibleClass="TabbedPanelsContentVisible";this.focusElement=null;this.hasFocus=false;this.currentTabIndex=0;this.enableKeyboardNavigation=true;this.nextPanelKeyCode=Spry.Widget.TabbedPanels.KEY_RIGHT;this.previousPanelKeyCode=Spry.Widget.TabbedPanels.KEY_LEFT;Spry.Widget.TabbedPanels.setOptions(this,opts);if(typeof(this.defaultTab)=="number"){if(this.defaultTab<0)this.defaultTab=0;else{var count=this.getTabbedPanelCount();if(this.defaultTab>=count)this.defaultTab=(count>1)?(count-1):0;}this.defaultTab=this.getTabs()[this.defaultTab];}if(this.defaultTab)this.defaultTab=this.getElement(this.defaultTab);this.attachBehaviors();};Spry.Widget.TabbedPanels.prototype.getElement=function(ele){if(ele&&typeof ele=="string")return document.getElementById(ele);return ele;};Spry.Widget.TabbedPanels.prototype.getElementChildren=function(element){var children=[];var child=element.firstChild;while(child){if(child.nodeType==1)children.push(child);child=child.nextSibling;}return children;};Spry.Widget.TabbedPanels.prototype.addClassName=function(ele,className){if(!ele||!className||(ele.className&&ele.className.search(new RegExp("\\b"+className+"\\b"))!=-1))return;ele.className+=(ele.className?" ":"")+className;};Spry.Widget.TabbedPanels.prototype.removeClassName=function(ele,className){if(!ele||!className||(ele.className&&ele.className.search(new RegExp("\\b"+className+"\\b"))==-1))return;ele.className=ele.className.replace(new RegExp("\\s*\\b"+className+"\\b","g"),"");};Spry.Widget.TabbedPanels.setOptions=function(obj,optionsObj,ignoreUndefinedProps){if(!optionsObj)return;for(var optionName in optionsObj){if(ignoreUndefinedProps&&optionsObj[optionName]==undefined)continue;obj[optionName]=optionsObj[optionName];}};Spry.Widget.TabbedPanels.prototype.getTabGroup=function(){if(this.element){var children=this.getElementChildren(this.element);if(children.length)return children[0];}return null;};Spry.Widget.TabbedPanels.prototype.getTabs=function(){var tabs=[];var tg=this.getTabGroup();if(tg)tabs=this.getElementChildren(tg);return tabs;};Spry.Widget.TabbedPanels.prototype.getContentPanelGroup=function(){if(this.element){var children=this.getElementChildren(this.element);if(children.length>1)return children[1];}return null;};Spry.Widget.TabbedPanels.prototype.getContentPanels=function(){var panels=[];var pg=this.getContentPanelGroup();if(pg)panels=this.getElementChildren(pg);return panels;};Spry.Widget.TabbedPanels.prototype.getIndex=function(ele,arr){ele=this.getElement(ele);if(ele&&arr&&arr.length){for(var i=0;i<arr.length;i++){if(ele==arr[i])return i;}}return-1;};Spry.Widget.TabbedPanels.prototype.getTabIndex=function(ele){var i=this.getIndex(ele,this.getTabs());if(i<0)i=this.getIndex(ele,this.getContentPanels());return i;};Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex=function(){return this.currentTabIndex;};Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount=function(ele){return Math.min(this.getTabs().length,this.getContentPanels().length);};Spry.Widget.TabbedPanels.addEventListener=function(element,eventType,handler,capture){try{if(element.addEventListener)element.addEventListener(eventType,handler,capture);else if(element.attachEvent)element.attachEvent("on"+eventType,handler);}catch(e){}};Spry.Widget.TabbedPanels.prototype.cancelEvent=function(e){if(e.preventDefault)e.preventDefault();else e.returnValue=false;if(e.stopPropagation)e.stopPropagation();else e.cancelBubble=true;return false;};Spry.Widget.TabbedPanels.prototype.onTabClick=function(e,tab){this.showPanel(tab);return this.cancelEvent(e);};Spry.Widget.TabbedPanels.prototype.onTabMouseOver=function(e,tab){this.addClassName(tab,this.tabHoverClass);return false;};Spry.Widget.TabbedPanels.prototype.onTabMouseOut=function(e,tab){this.removeClassName(tab,this.tabHoverClass);return false;};Spry.Widget.TabbedPanels.prototype.onTabFocus=function(e,tab){this.hasFocus=true;this.addClassName(tab,this.tabFocusedClass);return false;};Spry.Widget.TabbedPanels.prototype.onTabBlur=function(e,tab){this.hasFocus=false;this.removeClassName(tab,this.tabFocusedClass);return false;};Spry.Widget.TabbedPanels.KEY_UP=38;Spry.Widget.TabbedPanels.KEY_DOWN=40;Spry.Widget.TabbedPanels.KEY_LEFT=37;Spry.Widget.TabbedPanels.KEY_RIGHT=39;Spry.Widget.TabbedPanels.prototype.onTabKeyDown=function(e,tab){var key=e.keyCode;if(!this.hasFocus||(key!=this.previousPanelKeyCode&&key!=this.nextPanelKeyCode))return true;var tabs=this.getTabs();for(var i=0;i<tabs.length;i++)if(tabs[i]==tab){var el=false;if(key==this.previousPanelKeyCode&&i>0)el=tabs[i-1];else if(key==this.nextPanelKeyCode&&i<tabs.length-1)el=tabs[i+1];if(el){this.showPanel(el);el.focus();break;}}return this.cancelEvent(e);};Spry.Widget.TabbedPanels.prototype.preorderTraversal=function(root,func){var stopTraversal=false;if(root){stopTraversal=func(root);if(root.hasChildNodes()){var child=root.firstChild;while(!stopTraversal&&child){stopTraversal=this.preorderTraversal(child,func);try{child=child.nextSibling;}catch(e){child=null;}}}}return stopTraversal;};Spry.Widget.TabbedPanels.prototype.addPanelEventListeners=function(tab,panel){var self=this;Spry.Widget.TabbedPanels.addEventListener(tab,"click",function(e){return self.onTabClick(e,tab);},false);Spry.Widget.TabbedPanels.addEventListener(tab,"mouseover",function(e){return self.onTabMouseOver(e,tab);},false);Spry.Widget.TabbedPanels.addEventListener(tab,"mouseout",function(e){return self.onTabMouseOut(e,tab);},false);if(this.enableKeyboardNavigation){var tabIndexEle=null;var tabAnchorEle=null;this.preorderTraversal(tab,function(node){if(node.nodeType==1){var tabIndexAttr=tab.attributes.getNamedItem("tabindex");if(tabIndexAttr){tabIndexEle=node;return true;}if(!tabAnchorEle&&node.nodeName.toLowerCase()=="a")tabAnchorEle=node;}return false;});if(tabIndexEle)this.focusElement=tabIndexEle;else if(tabAnchorEle)this.focusElement=tabAnchorEle;if(this.focusElement){Spry.Widget.TabbedPanels.addEventListener(this.focusElement,"focus",function(e){return self.onTabFocus(e,tab);},false);Spry.Widget.TabbedPanels.addEventListener(this.focusElement,"blur",function(e){return self.onTabBlur(e,tab);},false);Spry.Widget.TabbedPanels.addEventListener(this.focusElement,"keydown",function(e){return self.onTabKeyDown(e,tab);},false);}}};Spry.Widget.TabbedPanels.prototype.showPanel=function(elementOrIndex){var tpIndex=-1;if(typeof elementOrIndex=="number")tpIndex=elementOrIndex;else tpIndex=this.getTabIndex(elementOrIndex);if(!tpIndex<0||tpIndex>=this.getTabbedPanelCount())return;var tabs=this.getTabs();var panels=this.getContentPanels();var numTabbedPanels=Math.max(tabs.length,panels.length);for(var i=0;i<numTabbedPanels;i++){if(i!=tpIndex){if(tabs[i])this.removeClassName(tabs[i],this.tabSelectedClass);if(panels[i]){this.removeClassName(panels[i],this.panelVisibleClass);panels[i].style.display="none";}}}this.addClassName(tabs[tpIndex],this.tabSelectedClass);this.addClassName(panels[tpIndex],this.panelVisibleClass);panels[tpIndex].style.display="block";this.currentTabIndex=tpIndex;};Spry.Widget.TabbedPanels.prototype.attachBehaviors=function(element){var tabs=this.getTabs();var panels=this.getContentPanels();var panelCount=this.getTabbedPanelCount();for(var i=0;i<panelCount;i++)this.addPanelEventListeners(tabs[i],panels[i]);this.showPanel(this.defaultTab);};})();
+</script>
+<style type="text/css">
+<!--
+/* Styles for Collapible panels */
+.CollapsiblePanel {
+	margin:0px ;
+	padding: 0px;
+	border-left: solid 0px #CCC;
+	border-right: solid 0px #999;
+	border-top: solid 0px #999;
+	border-bottom: solid 0px #CCC;
+}
+.CollapsiblePanelTab {
+	background-color: #fff;
+	border-bottom: solid 1px #CCC;
+	margin: 0px;
+	padding: 2px;
+	cursor: pointer;
+}
+.CollapsiblePanelContent {
+	margin: 0px;
+	padding: 0px;
+	background-color: #FFFFFF;
+}
+.CollapsiblePanelTab a {
+	color: black;
+	text-decoration: none;
+}
+.CollapsiblePanelOpen .CollapsiblePanelTab {
+	background-color: #FFFFFF;
+}
+.CollapsiblePanelClosed .CollapsiblePanelTab {
+/* background-color: #EFEFEF */
+}
+.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
+	background-color: #FFFFFF;
+}
+.CollapsiblePanelFocused .CollapsiblePanelTab {
+	background-color: #FFFFFF;
+}
+.TabbedPanels {
+	overflow: hidden;
+	margin: 0px;
+	padding: 0px;
+	clear: none;
+	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
+}
+.TabbedPanelsTabGroup {
+	margin: 0px;
+	padding: 0px;
+}
+.TabbedPanelsTab {
+	position: relative;
+	top: 1px;
+	float: left;
+	padding: 4px 10px;
+	margin: 0px 1px 0px 0px;
+	background-color: #FFFFFF;
+	list-style: none;
+	border-left: solid 1px #CCC;
+	border-bottom: solid 1px #999;
+	border-top: solid 1px #999;
+	border-right: solid 1px #999;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	cursor: pointer;
+}
+.TabbedPanelsTabHover {
+	background-color: #CCC;
+}
+.TabbedPanelsTabSelected {
+	background-color: #FFFFFF;
+	border-bottom: 1px solid #EEE;
+}
+.TabbedPanelsTab a {
+	color: black;
+	text-decoration: none;
+}
+.TabbedPanelsContentGroup {
+	clear: both;
+	border-left: solid 1px #CCC;
+	border-bottom: solid 1px #CCC;
+	border-top: solid 1px #999;
+	border-right: solid 1px #999;
+	background-color: #FFFFFF;
+}
+.TabbedPanelsContent {
+	overflow: hidden;
+	padding: 4px;
+}
+.TabbedPanelsContentVisible {
+}
+.VTabbedPanels {
+	overflow: hidden;
+	zoom: 1;
+}
+.VTabbedPanels .TabbedPanelsTabGroup {
+	float: left;
+	width: 10em;
+	height: 20em;
+	background-color: #EEE;
+	position: relative;
+	border-top: solid 1px #999;
+	border-right: solid 1px #999;
+	border-left: solid 1px #CCC;
+	border-bottom: solid 1px #CCC;
+}
+.VTabbedPanels .TabbedPanelsTab {
+	float: none;
+	margin: 0px;
+	border-top: none;
+	border-left: none;
+	border-right: none;
+}
+.VTabbedPanels .TabbedPanelsTabSelected {
+	background-color: #EEE;
+	border-bottom: solid 1px #999;
+}
+.VTabbedPanels .TabbedPanelsContentGroup {
+	clear: none;
+	float: left;
+	padding: 0px;
+	width: 30em;
+	height: 20em;
+}
+/* Styles for Printing */
+@media print {
+.TabbedPanels {
+	overflow: visible !important;
+}
+.TabbedPanelsContentGroup {
+	display: block !important;
+	overflow: visible !important;
+	height: auto !important;
+}
+.TabbedPanelsContent {
+	overflow: visible !important;
+	display: block !important;
+	clear:both !important;
+}
+.TabbedPanelsTab {
+	overflow: visible !important;
+	display: block !important;
+	clear:both !important;
+}
+-->
+</style>
 <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
@@ Line 19: / Line 184: @@
        <div id="CollapsiblePanel1" class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
-         <div class="CollapsiblePanelContent">Content</div>
+         <div class="CollapsiblePanelContent">Content Hello world</div>
        </div>
        <div id="CollapsiblePanel2" class="CollapsiblePanel">