/*{
	color:black;
}*/

/*ob_start('miniCSS');*/

body{
	background-color:#00407F;/*#2B2B2B;*/
	color:#CCCCCC;/*#00CC00;*/
}
/*anchor elements(links)*/
a{
	color:#FF8F00;
}
a:hover{
	color:#D7D700;
}
a:focus, a:active{
	color:#3C7DC4;
}
a#home{
	float:left;
}
/*div{
    background-color:grey;
}*/
/*
Headers
*/
h1, h2, h3, h4{
	/*background-color:#AA5500;*/
    background-color:#473757;
    /*width:auto;*/
    display:inline-block;
}

.purple{
	color:purple;
}
pre{
 /*   background-color:#707070;
    display:inline-block;
    text-indent:48px;*/
    color:#171717;
    font-weight:bold;
}
/*p:after{
    content:'.';
}*/
.note{
    color:#CF0000;
    background-color:#2B2B2B;
}
/*
Divs
*/
/*div#controls{
	width : 100%;
}*/
.leftSidebar{

}
div.horizontalMenu,
details.horizontalMenu
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:auto;/*100%;*/
}
div#controls{
	float:right;
    text-align:right;
    /*position:absolute;
    right:0%;
    top:0%;*/
}
div#frameStats{
    float:right;
    text-align:right;
}
/* div#frameStats p{
    margin: 0;
    -webkit-margin-after: 0;
} */
/*div#frameStats p:before{
    content:':';
}*/
pre.vec{
    text-align:left;
    float:left;
    margin:0px;
}
/*
.vec input:before{
    content:':';
    color:black;
}
.vec input:after{
    content:',';
    color:black;
}*/
/*
CSS for custom details icons!
summary::-webkit-details-marker{
    display:none;
}
div#controls details summary:after{
    content:'+';
}
div#controls details[open] summary:after{
    content:'-';
}*/
div#cntrls{
	width:50%;
	float:left;
}
div#shaders{
	width:50%;
	float:right;
}

.glc{
	/*webGL canvas*/
}
.glDemo{
    width:128px;
    height:128px;
    /*box-shadow: 4px 8px #0F0F0F;*/
    /*border-color:#FF0000;*/
}
.glIcon{
    width:64px;
    height:64px;
}
/*canvas#glcanvas{
	for testing only, change to black to ignore effects
	backgroud:red;
}*/

div.menu{
	text-align:center;
    /*margin:12px;*/
	/*background-color:grey;*/
}
/*
Details and Summaries
*/
details{
	border-style: solid;
	border-color:#000000;
	border-width:1px;
	display:inline-block;
	/*width:auto;
	float:right;*/
}
/*details:not([open]){
	width:auto;
	height:auto;
}*/
details[open]{
	background-color:#707070;
	border-style: solid;
	border-color:#3C7DC4;
	border-width:3px;
	/*width:auto;*/
	display:inline-block;
}

details summary{
	background-color:#707070;
	width:auto;
}
details[open] summary{
	/*background-color:#AA5500;*/
    background-color:#473757;
	width:auto;
}
/*div#controls input{
	float:left;
}*/
div#content{
    text-align:left;
    float:left;
    display:table;
}

/*details#content div{ canvas#px-vecsIcon{
    width:100%;
}*/

details#content a{
    /*display:inline-block;*/
    /*clear:both;*/
}

details#content ol,
details#content ul
{
    padding-left:16px;
    /*list-style:none;*/
}

details#content ol li,
details#content ul li
{
    /*width:auto;
    height:auto;*/
    
}
details canvas.webGL,
div canvas.webGL
{
    float:left;
    border-style:outset;
    /*border-color:#;*/
    /*width:auto;
    height:auto;*/
    
}

ul{
    list-style-type: none;
}
canvas#glcanvas{
    width:auto;
    height:auto;
}


/*div#codeSeg details{
    width:33.33%;
}*/


/*
details div pre
*/
/*
pre.vec input:before{
    content:':';
    color:black;
}
pre.vec input:after{
    content:',';
    color:black;
}
pre.vec input:last-child::after{
    content:'';
}*/

/*details#content ol,
details#content ul
{
    display:block;
}*/
/*details#content a#home img{
    width:192px;
    height:144px;
}*/
/*div#main2D p{
    float:left;
}*/
/*
.sideNav{
    background-color: yellow;
    width: 200px;
    position: absolute;
    height: 100%;
}

.main{
    float: left;
    width: 84%;
    margin-left: 200px;
}*/

div.menu a img{
	width:32px;
	height:32px;
	transition-duration:0.5s;
	transition-property:transform;
}
div.menu a img:hover,
div.menu a img:focus,
div.menu a img:active{

	/*animation-name:growDouble;
	animation-duration:1s;
	animation-timing-iteration-count:infinite;
	animation-direction:alternate;*/
	transform:scale(2.0);
}

details#page{
    width:100%;
}
/*#page ul#dimension li a,*/
details#page ul#dimension li a img{
    width:64px;
    height:64px;
}
/*div#page ul li a canvas{
    width:64px;
    height:64px;
}*/
/*
Horizontal menus
*/
ol.horizontalMenu,
ul.horizontalMenu/*
div.horizontalMenu*/
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

ol.horizontalMenu li,
ul.horizontalMenu li
{
    float: left;
}

ol.horizontalMenu li a,
ul.horizontalMenu li a
{
    display: block;
    /*color: #AAA;*/
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
}

ol.horizontalMenu li a:hover
ul.horizontalMenu li a:hover
{
    background-color: #222;
}
/*
nav bar styles

nav ul{
    display:inline-block;
}
*/
nav.horizontalMenu
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

nav.horizontalMenu a
{
    /*float: left;*/
    display: block;
    /*color: #AAA;*/
    text-align: center;
    text-decoration: none;
}

nav.horizontalMenu a:hover
{
    background-color: #222;
}
/*
div.horizontalMenu details
{
    float: left;
    display: block;
    /*color: #AAA;
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
}

div.horizontalMenu details:hover
div.horizontalMenu details:hover
{
    background-color: #222;
}*/
/*
Math stylings
*/
fieldset{
    background-color:#333;
    border:solid 1px #000;
    /*width:auto;*/
}
/*fieldset .vec{
background-color:yellow;
}*/
/*fieldset .vec::before{
    content:"{";
}
fieldset .vec::after{
    content:"}";
}*/
/*
Table styles
*/

/*
.dropdown:hover>.dropdown-menu {
    display: block;
}
.dropdown>.dropdown-toggle:active {
    pointer-events: none;   // Add this, to prevent clicking dropdown's default click function
}*/

#content{
    padding-left:1em;
}
div{
    /*background-color:black;*/
    /*border-style: outset;*/
    /*overflow-x:scroll;*/
    /*border: 1px solid black;*/
}
table.isSet th{
    text-align:center;
    color:#CCC;
}
table.isSet tr{
    background-color:#333;
}
table.isSet td{
    /*border: 1px solid black;
    border-collapse: collapse;*/
}
/*table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}*/
/*
*/
.px-vec-x{
    color:red;
    display:block;
}
.px-vec-x::before{
    content:"x:";
    /*display:block;*/
    width:auto;
}
.px-vec-x::after{
    /*content:",";*/
    /*display:block;*/
    width:auto;
    color:black;
}

.px-vec-y{
    color:green;
    display:block;
}
.px-vec-y::before{
    content:"y:";
    /*display:block;*/
    width:auto;
}
.px-vec-y::after{
    /*content:",";*/
    /*display:block;*/
    width:auto;
    color:black;
}

.px-vec-z{
    color:blue;
    display:block;
}
.px-vec-z::before{
    content:"z:";
    /*display:block;*/
}
.px-vec-z::after{
    content:" ";
}
/*2D-Matrices*/
.pxMat2-a,
.pxMat2-b{
    color:red;
    /*display:block;*/
}
.pxMat2-a::before{
    content:"a:";
    /*display:block;*/
    width:auto;
}
.pxMat2-b::before{
    content:"b:";
    /*display:block;*/
    width:auto;
}
.pxMat2-a::after,
.pxMat2-b::after{
    content:", ";
    /*display:block;*/
    width:auto;
    color:black;
}

.pxMat2-c,
.pxMat2-d{
    color:green;
    display:block;
}
.pxMat2-c::before{
    content:"c:";
    /*display:block;*/
    width:auto;
}
.pxMat2-d::before{
    content:"d:";
    /*display:block;*/
    width:auto;
}
.pxMat2-c::after{
    content:",";
    /*display:block;*/
    width:auto;
    color:black;
}
.pxMat2-d::after{
    /*display:block;*/
    width:auto;
    color:black;
}
/*3D-Matrices*/
/*Column 0*/
.pxMat3-a,
.pxMat3-b,
.pxMat3-c{
    color:#700;
    /*display:block;*/
}
.pxMat3-d,
.pxMat3-e,
.pxMat3-f{
    color:#070;
    /*display:block;*/
}
.pxMat3-g,
.pxMat3-h,
.pxMat3-i{
    color:#007;
    /*display:block;*/
}
.pxMat3-a::before{
    content:"a:";
    /*display:block;*/
    width:auto;
}
.pxMat3-b::before{
    content:"b:";
    /*display:block;*/
    width:auto;
}
.pxMat3-c::before{
    content:"c:";
    /*display:block;*/
    width:auto;
}
/*Column 1*/
.pxMat3-d::before{
    content:"d:";
    /*display:block;*/
    width:auto;
}
.pxMat3-e::before{
    content:"e:";
    /*display:block;*/
    width:auto;
}
.pxMat3-f::before{
    content:"f:";
    /*display:block;*/
    width:auto;
}
/*Column 2*/
.pxMat3-g::before{
    content:"g:";
    /*display:block;*/
    width:auto;
}
.pxMat3-h::before{
    content:"h:";
    /*display:block;*/
    width:auto;
}
.pxMat3-i::before{
    content:"i:";
    /*display:block;*/
    width:auto;
}
.pxMat3-a::after,
.pxMat3-b::after,
.pxMat3-c::after,
/**/
.pxMat3-d::after,
.pxMat3-e::after,
.pxMat3-f::after,
/**/
.pxMat3-g::after,
.pxMat3-h::after{
    content:", ";
    /*display:block;*/
    width:auto;
    color:black;
}
.pxMat3-i::after{
    width:auto;
    color:black;
}
.pxMat2-c,
.pxMat2-d{
    color:green;
    display:block;
}
.pxMat2-c::before{
    content:"c:";
    /*display:block;*/
    width:auto;
}
.pxMat2-d::before{
    content:"d:";
    /*display:block;*/
    width:auto;
}
.pxMat2-c::after{
    content:",";
    /*display:block;*/
    width:auto;
    color:black;
}
.pxMat2-d::after{
    /*display:block;*/
    width:auto;
    color:black;
}
/*ob_end_flush();*/