Reporting Prototype

dabblet.css

/**
 * Reporting Prototype
 */

.rptsidebar{
	position:relative;
	width:65px;
	height:200px;
	margin-bottom:-3px;
	border: #565656 solid 3px;
	border-opacity: 0.2;
	background-color:#333;
	color:#CCC;
	font: 13px/1.8 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	padding: 10px 5px 10px 5px;

}
 
.rotate{
    	-webkit-transform: rotate(-90deg);
    	-moz-transform: rotate(-90deg);
    	-o-transform: rotate(-90deg);
    	writing-mode: rl-bt;
    	position:relative;
    	top:72px;
    	width:200px;
    	left:-70px;
    	text-align:center;
    	
}

dabblet.html

<!--Report Structur-->
<div id="implCheck" class="reportbar">
<div id="implCheckSide" class="rptsidebar">
<p class="rotate">Implementation Check</p>
</div>
<div id="implCheckMain" class="rptmain"></div>

</div>


<div id="deployment" class="reportbar">
<div id="deploymentSide" class="rptsidebar">
<p class="rotate">Deployment</p>
</div>

<div id="deploymentMain" class="rptmain"></div>

</div>


<div id="usage" class="reportbar">
<div id="usageSide" class="rptsidebar">
<p class="rotate">Usage</p>
</div>

<div id="usageMain" class="rptmain"></div>

</div>


<div id="media" class="reportbar">
<div id="mediaSide" class="rptsidebar">
<p class="rotate">Media</p>
</div>

<div id="mediaMain" class="rptmain"></div>

</div>


<div id="solution" class="reportbar">
<div id="solutionSide" class="rptsidebar">
<p class="rotate">Solution</p>
</div>

<div id="solutionMain" class="rptmain"></div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}