finished design

still need to test

Beacon/beacon.css

@@ -37,4 +37,131 @@ input[type="number"] {
 input[type="number"]:hover,
 input[type="number"]:focus {
     -moz-appearance: number-input;
+}
+
+.sheet-desc-show:not(:checked)~.sheet-desc,
+.sheet-macro-text-show:not(:checked)~.sheet-macro-text,
+.sheet-sect-show:not(:checked)~.sheet-sect {
+    display:none;
+}
+
+div[class^="sheet-section"] {     
+    visibility: hidden;
+    opacity: 0;
+    max-height:0;
+	overflow: hidden;
+}
+
+div[class^="sheet-npc"] {     
+    visibility: hidden;
+    opacity: 0;
+    max-height:0;
+	overflow: hidden;
+}
+
+input.sheet-tab99:checked ~ div[class^="sheet-section"] { 	
+	max-height: 999999px;
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 0.5s linear 0s;
+	overflow: auto;
+}
+
+input.sheet-tab {
+    width: 70px;
+    height: 20px;
+    cursor: pointer;	
+	position: relative;
+	opacity: 0;
+	z-index: 9999;
+}
+
+span.sheet-tab {
+	text-align: center;
+    display: inline-block;   
+	font-size: 13px;	
+	background: black; 
+	color: white;
+	font-weight: bold;
+
+	width: 70px;
+    height: 20px;
+    cursor: pointer;	
+	position: relative;
+	margin-left: -75px;
+}
+
+input.sheet-tab::before {
+    content: attr(title);
+    text-align: center;
+    display: inline-block;    
+    width: 100%;
+    height: 100%;
+
+    background: black; 
+	color: white;
+	font-weight: bold;
+}
+
+input.sheet-tab:checked::before {
+    background:gray;    
+    color:white;
+}
+
+input.sheet-tab1:checked ~ div.sheet-section-core,
+input.sheet-tab2:checked ~ div.sheet-section-weapons,
+input.sheet-tab3:checked ~ div.sheet-section-spells
+{
+    max-height: 999999px;
+	visibility: visible;
+	opacity: 1;
+	transition: opacity 0.5s linear 0s;
+	overflow: hidden;
+}
+
+input.sheet-tab1:checked + span.sheet-tab1,
+input.sheet-tab2:checked + span.sheet-tab2,
+input.sheet-tab3:checked + span.sheet-tab3,
+input.sheet-tab4:checked + span.sheet-tab4,
+input.sheet-tab5:checked + span.sheet-tab5,
+input.sheet-tab6:checked + span.sheet-tab6,
+input.sheet-tab7:checked + span.sheet-tab7,
+input.sheet-tab8:checked + span.sheet-tab8,
+input.sheet-tab9:checked + span.sheet-tab9,
+input.sheet-tab99:checked + span.sheet-tab99,
+input.sheet-tab10:checked + span.sheet-tab10 {
+    background: gray;    
+    color: white;
+}
+
+.sheet-text-button {
+    font-size:100%;
+    color:white;
+	background-color:black;
+	border:0px;
+}
+
+button,
+button:hover,
+button:active
+{
+    background-image: none;
+}
+
+input[type="checkbox"] + span::before
+{
+    margin-right: 4px;
+    line-height: 14px;
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+    
+    content: "[show]";
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
+}
+input[type="checkbox"]:checked + span::before
+{
+    content: "[hide]";
 }

Beacon/sheet.json

@@ -4,5 +4,5 @@
     "authors": "Hylianux",
     "roll20userid": "576055",
     "preview": "beacon.png",
-    "instructions": "This sheet is designed for use with Beacon."
+    "instructions": "This sheet is designed for use with Beacon.  http://beacond20.blogspot.com/"
 }