/* 
 * author : Nadeem Elahi
 * paid professional email : nad@3deem.com
 * free social media email : nadeem.elahi@gmail.com
 * FOSS(free and open source) license gpl v 3
 * sunday dec 14th 2025
 *
 */


html , body { height: 100% ; } 
body { margin : 0 ; }
canvas { display : block ; width: 100% ; height: 100% ; }
h1 { text-align: center; width: 100% ; }

body { background-color : #ffffff; }

#fullscreen { 
	position: relative;
	top: 0; left: 0;
	z-index: 10;
	height: 100% ;
}

.fsOverlay { /* canvas */
	position: absolute;
	top: 0 ;
}

/* 
 * #fullscreen  z-index: 10
 * > #canvasWrap
 * > #head1
 * > #topLeftBar
 * > #rightPaneShowHide
 *
 */
#canvasWrap { z-index: 1 ; left : 0 ; }
#head1 { z-index: 20 ; }
#topLeftBarWrap { z-index: 21 ; left : 0 ;}
#rightPaneShowHideWrap { z-index: 23 ; right: 0 ; text-align: right ; }
#rightPaneWrap { z-index: 22 ; right: 0 ; text-align: right ; }
/* continued below in it's own section */

/* #topLeftBar */
#topLeftBar {
	padding: 5px ;
}
#addDroBtnWrap > button {
	width: 30px ;
}
#minusDroBtn ,
#addList {
	display: none ; 
}

/* 
 * #rightPaneShowHideWrap
 * ->#rightPaneShowHide
 * -->#showRightPane
 * -->#hideRightPane
 */
#rightPaneShowHide {
	padding: 5px ;
}
#rightPaneShowHide > button {
	width: 30px ;
}
#hideRightPane { 
	display: none;
}

/*
 * #rightPane
 * >#clearNadsole
 * >#nadsole
 * >#setBgColour
 * >#setLamp
 * >#droData -dro=draw objects
 */
#rightPaneWrap {
	display: none ;
	height: 100% ;
	overflow-y: scroll ;
	background-color : rgba( 255 , 255 , 255 , 0.3 ) ;
}

#rightPane {
	padding: 30px 25px 100px 5px ;
}

#rightPane > hr {
	display: inline-block ;
	width: 300px ;
}

#rightPane > div {
	padding-bottom: 10px ;
}

#rightPane > div > form > div {

	margin: 5px 0px ;
}


/* nadsole */

#clearNadsoleBtn {
	margin: 10px 0 ;
}

/* setBgColour */
#setBgColour {}

/* lamp */

#setLampBtns {
	margin-bottom: 10px ;
}

/*
 * #rightPane > #droData > #formsList
 */
#formsList > form {
	border-top: 1px solid #000 ;
	padding: 10px  0 10px 0;
}
#formsList > form:last-child {
	border-bottom: 1px solid #000 ;
}
#formsList > form > div {
	margin: 5px auto ;
}
input[type=number] {
	width: 55px ;
}