:root {
   --ORION_COLOUR_BLUE_WEAK: rgb(230, 239, 250);
   --ORION_COLOUR_BLUE_BUT_FACE: rgb(214, 223, 250);
   --ORION_COLOUR_BLUE_STRONG: rgb(195, 209, 249);
   --ORION_COLOUR_BLUE_BUT_SHADOW: rgb(124, 171, 228);
}

button:focus {
    outline: none;  /* prevents ugly thick-blue box on chrome */
}

input:focus {
    outline: none;
}

.styTabSelected {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    height: 24px;
    border-right: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-top: white 1px solid;
    border-left: white 1px solid;
    border-bottom: var(--ORION_COLOUR_BLUE_STRONG) 1px solid;
    background-color: var(--ORION_COLOUR_BLUE_STRONG);
    color: black;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

.styTabUnselected {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    height: 24px;
    border-right: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-top: white 1px solid;
    border-left: white 1px solid;
    border-bottom: white 1px solid;
    background-color: var(--ORION_COLOUR_BLUE_BUT_FACE);
    color: black;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}

/* for prompt/result spans (eg when logging-in) */
.styActionResult {
   font-family: Arial;
   font-size: 12px;
   cursor: default;
   position: absolute;
   height: 16px;
   background-color: var(--ORION_COLOUR_BLUE_STRONG);
   color: black;
   padding-left: 3px;
   padding-top: 2px;
   border-left: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-top: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-bottom: white 1px solid;
   border-right: white 1px solid;
}

.styGeneralCaption {
    font-family: Arial;
    font-size: 12px;
    cursor: default;
    position: absolute;
    border: none;
}

/* for entering text eg when logging-in */
.styTextEntry {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    padding-left: 3px;
    padding-top: 2px;
    border-right: white 1px solid;
    border-top: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-left: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-bottom: white 1px solid;
    background-color: white;
    height: 15px;
}

.styButtonUnsel {
    font-family: Arial; 
    font-size: 12px; 
    position: absolute;  
    height: 23px; 
    background-color: var(--ORION_COLOUR_BLUE_BUT_FACE);
    border-right: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-top: white 1px solid;
    border-left: white 1px solid;
    border-bottom: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 1px;
    padding-bottom: 1px;    
}

.styButtonSel {
    font-family: Arial; 
    font-size: 12px; 
    position: absolute;  
    height: 23px; 
    background-color: white;
    border-right: white 1px solid;
    border-top: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-left: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
    border-bottom: white 1px solid;
    padding-left: 1px;
    padding-top: 1px;
    padding-right: 0px;
    padding-bottom: 0px;    
}

/* neatly aligns label for checkbox or radio-button */
.styLabelForCheckboxOrRadioButton {
    position: absolute;
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

/* neatly aligns checkbox inside label */
.styCheckbox {
    width: 13px;
    height: 13px;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 3px; /* this sets distance between checkbox and label-text */
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

/* neatly aligns radio-button inside label */
.styRadioButton {
    width: 13px;
    height: 13px;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 4px; /* this sets distance between radio button and label-text */
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.styToolbarButtonMouseOutUnselected {
   position: absolute;
   background-color: transparent;
   border-right: transparent 1px solid;
   border-top: transparent 1px solid;
   border-left: transparent 1px solid;
   border-bottom: transparent 1px solid;
   width: 67px;
   font-family: Verdana;
   font-size: 11px;
   padding: 0px;
}

.styToolbarButtonMouseInUnselected {
   position: absolute;
   background-color: white;
   border-right: white 1px solid;
   border-top: white 1px solid;
   border-left: white 1px solid;
   border-bottom: white 1px solid;
   width: 67px;
   font-family: Verdana;
   font-size: 11px;
   padding: 0px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-top-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   border-top-right-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
   cursor: pointer;
}

.styToolbarButtonMouseInSelected {
   position: absolute;
   border-right: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-top: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-left: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-bottom: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   background-color: cyan;
   width: 67px;
   font-family: Verdana;
   font-size: 11px;
   padding: 0px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-top-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   border-top-right-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
   cursor: pointer;
}

.styToolbarButtonMouseOutSelected {
   position: absolute;
   border-right: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-top: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-left: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   border-bottom: var(--ORION_COLOUR_BLUE_BUT_SHADOW) 1px solid;
   background-color: cyan;
   width: 67px;
   font-family: Verdana;
   font-size: 11px;
   padding: 0px;
   -moz-border-radius-topleft: 5px;
   -webkit-border-top-left-radius: 5px;
   border-top-left-radius: 5px;
   -moz-border-radius-topright: 5px;
   -webkit-border-top-right-radius: 5px;
   border-top-right-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
   border-bottom-left-radius: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   border-bottom-right-radius: 5px;
}