/* 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: White;
	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; }

/* Checkboxes and radio buttons are made larger than default: */
input[type=checkbox]{
    transform: scale(1.2);
}
input[type=radio]{
    transform: scale(1.2);
}
label.inputLabel {
    font-size: 12pt
}

/* The left-division accordion settings, and other settings for the left-hand margin. */
/* I'm not sure how this works, I got the code from https://www.w3schools.com/howto/howto_js_accordion.asp */
button.leftAccordion, button.leftAccordionMenu {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    font-size: 11pt;
    text-align: left;
    border:none;
    outline: none;
    transition: 0.4s;
}
button.leftAccordion.active, button.leftAccordion:hover {
    background-color: #ddd;
}
button.leftAccordionMenu.active, button.leftAccordionMenu:hover {
    background-color: #ddd;
}
button.leftAccordion:after {
    content: '\02795'; /* Unicode plus sign */
    font-size: 11px;
    color: #777;
    float: right;
    margin-left: 5px;
}
button.leftAccordionMenu:after {
    content: "\02190"; /* Left arrow*/
    font-size: 11px;
    color: #777;
    float: right;
    margin-left: 5px;
}
button.leftAccordion.active:after {
    content: '\02796'; /* Unicode minus sign */
}
button.leftAccordionMenu.active:after {
    content: '\02192'; /* Right arrow */
}

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%
}
div.leftPanel {
    padding: 0px;
    border: 0px;
    outline: 0px;
    background-color: white;
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 100%;
}
div.leftStuff {
    padding: 0px;
    border: 0px;
    outline: 0px;
    background-color: white;
}
svg#svgFreq {
    padding: 4px 0px 2px 0px;
}

/* 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.divTop {
	float: right;
	border: 2px dotted black;
	width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
	display: none;
}
div.divLeftShort {
	float: left;
	border: 2px dotted black;
	width: 3%;
    padding: 0.25%;
    margin: 0.25% 0.25% 0.25% 0.5%;
}
div.divLeftFull {
	float: left;
	border: 2px dotted black;
	width: 15%;
    margin: 0.25% 0.25% 0.25% 0.5%;
}
div.divLeftUnderline {
	width: 100%;
    border-bottom: 3px solid #4588ba; 
    margin-bottom: 6px;
    background-color: white;
}
div.divRight {
	float: right;
	border: 2px ridge blue;
	width: 10%;
    margin: 0.25% 0.5% 0.25% 0.25%;
    visibility: collapse;    
}
div.divMain {
    display: inline-block;
    border: 2px inset gray;
    width: 83%;
    margin: 0.25%;
    padding: 2px;
    float: right;
}
div.divOutputs {
    display: inline-block;
    border: 2px inset gray;
    width: 83%;
    margin: 0.25%;
    padding: 2px;
    float: right;
}
div.divDebug {
    display: inline-block;
    border: 2px inset gray;
    width: 83%;
    margin: 0.25%;
    padding: 2px;
    float: right;
}