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

/* 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
}

button.simButton {
    margin: 2px;
    padding: 4px;
    font-size: 13px;
    width: 96%;    
}

/* 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; 
}
svg.dayClass text {
    fill: rgb(0,0,32);
}
svg.nightClassError text {
    fill: lightpink;
}
svg.dayClassError text {
    fill: darkred;
}

svg.nightClass text {
    fill: AliceBlue;
}
svg.dayClass {
    background-color: white;
    border-color: darkgrey;
}
svg.nightClass {
    background-color: black;
    border-color: grey;
}

/* 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%.                       */
/* divTop. divCalc, divOutputs and divDebug are in use here.         */
div.divTop {
    float: right;
    border: 2px dotted grey;
    width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
    display: none;
}
div.divCalc {
    float: right;
    border: 2px dotted grey;
    width: 99%;
    margin: 0.25% 0.25% 0.25% 0.25%;
    display: block;
    background-color: grey;
}
div.divOutputs {
    display: inline-block;
    border: 2px inset grey;
    width: 83%;
    margin: 0.25%;
    float: right;
}
div.divDebug {
    display: inline-block;
    border: 2px inset grey;
    width: 83%;
    margin: 0.25%;
    float: right;
}