body
{
    padding: 0;
    margin: 0;
    line-height: 1.25;
    font-size: 12px;
}

/* MAC_WEB_UI On Mac, we use a different font size, applied using JS */
.macBody
{
    font-size: 13px;
}

/* MAC_WEB_UI On Safari, setting the button font size to 16px will result in
   an actual font size of 13px (no idea why - I think the styling you
   can do to native-look-and-feel buttons is quite restricted) */
.safariButtonFontSize
{
    font-size: 16px;
}

/* MAC_WEB_UI Make sure the Chimera label bold styling is correct */
b
{
    font-weight: bold;
}

/* MAC_WEB_UI Make sure the Chimera label italic styling is correct */
i
{
    font-style: italic;
}

h1
{
    /* font-family: localised */
    font-size: 20px;
    font-weight: normal;
    padding: 0;
    margin: 0;
    margin-bottom: 14px;
}

h2
{
    /* font-family: localised */
    font-size: 16px;
    font-weight: normal;
    padding: 0;
    margin: 0;
    margin-bottom: 14px;
}

.outerContainer
{
    margin: auto;
}

.form
{
    margin: 0;
    padding: 0;
}
.topPadding
{
    padding-top: 30px;
}

.topPaddingMessageBox
{
    padding-top: 20px;
}

.field
{
    margin: 0;
    padding: 0;
}

.field .inputContainer,
.field .inlineLabel,
.field .standaloneText,
.field .checkbox
{
    padding-top: 4px;
    padding-bottom: 4px;
}

.inputWithAssistiveTextIcon
{
    float: left;    
}

.buttonsrow
{
    padding: 0;
    text-align:left;
    clear: none;
}

.buttonsrow input
{
    margin-top: 3px;
    margin-bottom: 3px;
}

.secureConnectionMessage
{
    padding-top: 3px;
    padding-bottom: 3px;
    display: inline-block; /* Makes IE respect the padding on the parent DIV */
}

.afterButtons
{
    clear: both;
}
.beforeButtons
{
    clear: both;
}
.loginFormBeforeButtons
{
    margin-top: 17px;
}
.nonInputloginFormBeforeButtons
{
    margin-top: 163px;
}

/* MAC_WEB_UI On mac, buttons always flow from right-to-left */

.macButtons input
{
    margin-left: 8px;
    margin-right: 0;
    text-align: center;
    float: right;    
}

.macButtons .spinner
{
    float: right;
    margin-top: 2px; /* fudge factor for pretty alignment */
}

.rightAlignedButtons
{
    text-align: right;
}

.rightAlignedButtons input
{
    margin-left: 8px;
    margin-right: 0px;
    text-align: center;
}

.rightAlignedButtons .spinner
{
    display: inline-block;
    position: relative;
    top: 2px; /* offset to centre against buttons */
    margin-right: 4px;
}

.leftAlignedButtons input
{
    margin-left: 0px;
    margin-right: 8px;
    text-align: center;
}

.leftAlignedButtons .spinner
{
    position: relative;
    margin-top: 2px; /* match buttons row margin minus 1px */
    margin-bottom: 2px; /* match buttons row margin minus 1px */
}

.leftAlignedButtonsSpinnerPostMeasure
{
    float: right;
}

.spinner
{
    width:  24px;
    height: 24px;
    display: inline-block;
}

.clickable
{
    cursor: pointer;
}
.footer
{
    padding: 10px 0 10px 0;
    border-top-width: 1px;
    border-top-style: solid;
}

.assistiveText
{
    padding-left: 5px;
    float: left;
}
.assistiveText img
{    
    padding-top: 4px;
}

.field .checkbox
{
    margin-left: 2px;
}
.checkbox input
{
    width: 13px; /* eliminates the otherwise fixed built-in padding in IE */
    height: 13px; /* eliminates the otherwise fixed built-in padding in IE */
}
.checkbox label
{
    margin-left: 4px;
}
.checkbox *
{
    vertical-align: middle;
}

div.spacer
{
    clear:both;
}

.sidepaddingLoginForm
{
    padding-left: 45px;
    padding-right: 55px; /* Both sides should appear with 45px padding.
                            IE bug renders the text boxes 10px too wide. */
}

.sidepaddingMessageBoxBody
{
    padding-left: 27px;
    padding-right: 40px;
}

.sidepaddingMessageBoxFooter
{
    padding-left: 15px;
    padding-right: 15px;
}

.tempfloatformeasure
{
    float: left;
}

.blockLabel
{
    padding-top: 4px;
}

.inlineLabel
{
    float: left;
    /* margin-top: 3px; */ /* font-dependent margin is added by script */
}

.inlineInput
{
    float: left;
}

.blockLabel
{
    display:block;
}

.inputFormFooterSpace
{
    margin-top: 21px;
}

.inputFormButtons
{
    margin-top: 11px;
}

.messageBoxFooterSpace
{
    margin-top: 20px;
}

.bottompaddingProgressBox
{
    padding-bottom: 30px;
}

.nonInputFormButtons
{
    margin-top: 11px;
}

.nonInputFormFooterSpace
{
    margin-top: 16px;
}

.fieldBreak
{
    clear: both;
    margin-top: -1px;
    padding-top: 1px;
}

#__ieworkaround
{
    position: fixed;
    bottom: -999px;
    left: -999px;
}

.textInput
{
    background-image: url('transparent-1px.gif'); /* required to receive mouse clicks with transparent background */
    position: absolute; /* required to receive mouse clicks properly when
                           the assistive text div has absolute positioning in the same space */
    padding: 3px;
    margin: 0; /* MAC_WEB_UI Get rid of any browser-specific default margin */
}

/* Assistive text is appears inside the text boxes by being placed underneath
   in the DOM and showing through the transparent text box. */
.inlineAssistiveText
{
    position: absolute; /* required so it can overlap with text input field */
    /* margin-top: 3px; */ /* font-dependent margin is added by script */
    padding-left: 7px; /* this is to align to associated text input field but slightly further right so the caret doesn't obscure the assistive text */
    font-style: italic;
}

.truncateWithEllipsis
{
    text-overflow: ellipsis;  /* show ellipsis if text is too long. Width is applied in Javascript to make this work */
    overflow: hidden; /* required for ellipsis to take effect */
    white-space: nowrap;  /* required for ellipsis to take effect */
}

.longTextInput
{
    width: 310px;
}

.mediumTextInput
{
    width: 268px; /* tweak to prevent French logon buttons from wrapping around */
}

.initialKeyboardFocus
{
	/* uncomment to show which field has initial keyboard focus when testing with a web browser */
	/* background-color:#FF0000; */
}
.certificates
{
    overflow: auto;
    position: relative;
    border: 1px solid #cccccc; /* equivalent to black w/ opacity 20% on a white background (from Symphony guidelines) */
}

.certRadioContainer
{
    position: relative; /* allows the 'view certificate' link to be absolute positioned in the bottom right of this container */
    zoom: 1;            /* Workaround IE6 bug.
                           Zoom triggers 'hasLayout' which makes IE6 process absolute/relative positioning properly.
                           Affects the 'view certificate' link. */
}

.certContent
{
    padding: 8px 10px;
}

.certLabel
{
    margin: 1px; /* Avoids overlapping the selected item border */
    display: block;
}

.certRadio
{
    /* The certificate list is built using radio buttons in order to give it
       custom styling without having to reimplement keyboard navigation and
       screen reader support which we'd need with a pure javascript list.
       This style hides the actual button bit. */
    float: left;
    position: relative;
    left: -999px;
    width: 0px; /* Even though it's floated out of view, the radio button takes up space in the layout. The radio would offset the cert title if not set to zero width. */
    height: 0px;
}

.certTitle
{
    font-size:16px;
    position: relative;
    display: block;
}

.certHeading
{
    font-size: 17px; /* should look the same size as certTitle/friendly name, but they're different fonts */
}

.certInfo
{
    display: block;
}

.lastCertInfo
{
    float: left;
}

.certViewLink
{
    text-decoration: underline;
    position: absolute;
    bottom: 8px;
    right: 10px;
}

.certUnselected * .certViewLink
{
    visibility: hidden;
}

.workAroundIE6BrokenLabelClickDetection
{
    /* IE, especially IE6, has trouble registering clicks on
       the label where the background of a text element exists.
       Possibly this is due to the technically non-compliant
       use of a block-type label. */
    background-image: url('transparent-1px.gif');
}

.commandlink
{
    text-decoration: underline;
}

.mainCardPrompt
{
    font-size: 16px;
    margin-top: -3px; /* compensates for the natural padding that appears in larger fonts
                         and helps it to align correctly with the message box icon */
}

/* There's no design guidance on whether there should be different cert highlight colours
   for high contrast mode so for now at least these can be shared for both modes. */
.certSelected
{
    background: #cae2f0; /* equivalent to #4fa1cd opacity 30% on a white background (RGBA colour from Symphony guidelines) */
    border: 1px solid #cae2f0; /* compensate for the focus border size */
}

.certUnselected:hover
{
    background-color: #e4f0f7; /* equivalent to #4ea0cb opacity 15% on a white background (RGBA colour from Symphony guidelines) */
    border: 1px solid #e4f0f7; /* compensate for the focus border size */
}

.certUnselected
{
    border: 1px solid transparent; /* compensate for the focus border size */
}

.certFocused
{
    border: 1px solid #3b578e; /* equivalent to #0A2D72 opacity 80% on a white background (RGBA colour from Symphony guidelines) */
}

.commandlink
{
    color: #137fb3;
}

/* other things which apply regardless of high contrast setting */

.inprogress
{
    background-image: url('spinner_24.gif');
}

.biginprogress
{
    background-image: url('spinner_32.gif');
}

/* End shared colours for normal and high contrast mode. */