/* Set the main body to use no margins or padding, so I can position the */
/* horizontally-aligned div blocks a bit more accurately, and get some   */
/* friendly-looking fonts. */
body {
	margin: 0px;
	padding: 0px;
	font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    font-size: 12px;
}
/* Basic div properties: */
div {
	background-color: AliceBlue;
	border: 2px transparent;
	border-radius: 5px;
	margin: 0.5%;
	padding: 0.5%;
	width: 96%;
    /* Next lines required because you can't define the border using a percentage, so you can't simply scale 
        everything horizontally.  This defines the width of the element to include the padding and border. */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
p {
    border-style: solid;
    border: 2px green;
}

/* SVG current stuff */
line.currentStuff { stroke: green; }
text.currentStuff { stroke: green; }
text.powerOutStuff { stroke: darkred; }
text.powerInStuff { stroke: darkblue; }
text.energyStuff { stroke: brown; }
text.headerStuff { stroke: black; }


button.simButton {
    margin: 2px;
    padding: 4px;
    font-size: 13px;
    width: 96%;    
}
select.simSelect {
    margin: 2px;
    padding: 4px;
    font-size: 13px;
    width: 96%;    
}
input.simCheckbox {
    margin: 4px;
}
input.simText {
    margin: 2px;
    padding: 2px;
    font-size: 14px;
    width: 92%
}

/* Attempt to stop highlighting text when selected in the svg */
/* Currently this does not work in Firefox :-( */
svg text { 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
} 
svg text::selection { 
    background: none; 
} 

/* The next three should span the entire width of the page, with the */
/* majority of the width being used for the main svg section.        */
/* 10% + 10% + 78% + 4 * 0.25% margins = 100%.                       */
div.divMain {
	float: right;
	border: 2px dotted black;
	width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
}
div.divOutputs {
    float: right;
    border: 2px dotted black;
    width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
    display: none;
}
div.divDebug {
    float: right;
    border: 2px dotted black;
    width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
    display: none;
}