/*
	Defines generic styling of elements. This styling will apply across all client projects unless overridden 
	in client-specific base-**.css stylesheet.

	PLEASE NOTE:
	HTML5Shiv.js (added by HTML5ShiveBehaviour.java) already resets the following styling 
	for IE6/7/8/9:
	'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}'
	'mark{background:#FF0;color:#000}'
*/

/* ==========================================================================
   Body
   ========================================================================== */

body {
	line-height: 1.5;
	font-family:Arial,Helvetica,sans-serif;
	font-size: 80%;
    color: #333333;
}

body.noScrollBusy {
	pointer-events: none;
	overflow: hidden;
}


#busyIndicator  {
	position: fixed;
	pointer-events: none;
	top: 0;
	left: 0;
	background-color: transparent;
	z-index: 1000;
	height: 100%;
	width: 100%;
	transition: background-color 0.5s ease-in;
}

#busyIndicator.translucentBackground {
	transition: background-color 0.5s ease-out;
	background-color: rgba(0,0,0,0.2)
}

#busyIndicator:after {
  content: " ";
  display: block;
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  position: absolute;
  top: calc(50vh - 40px);
  left: calc(50vw - 40px);
  z-index: 1001;
}

@-webkit-keyframes spin {
  0% { 
	  -webkit-transform: rotate(0deg); 
  }
  100% { 
	  -webkit-transform: rotate(360deg); 
  }
}

@keyframes spin {
  0% {
  	transform: rotate(0deg); 
  }
  100% { 
  	transform: rotate(360deg); 
  }
}


/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5 {
	line-height: 1.2;
}

h1 {
    font-size: 160%;
}

h2 {
	font-size: 125%;
}

/* ==========================================================================
   Lists
   ========================================================================== */

li {
  list-style: none;
}

ul.optionsList li {
    list-style: disc;
    padding-bottom: 0.75em;
}

ul.optionsList li a {
    font-weight: bold;
}

ol li {
    list-style: decimal;
    padding-left: 0.75em;
    padding-bottom: 0.5em;
}

ol ol li {
    list-style: lower-alpha;
    padding-left: 0.75em;
    padding-bottom: 0.5em;
}

/* ==========================================================================
   Lists - Multipart Decimal
   
   e.g. 
	1. Lorem ipsum.
	2. Excepteur sint occaecat cupidatat non proident:
			2.1 sunt in culpa qui officia,
			2.2 deserunt mollit anim id est laborum.
	3. Ut enim ad minim veniam.
			3.1 Quis nostrud exercitation.
			3.2 Ullamco laboris nisi ut.
				3.2.1 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	4. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
	   dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.

   ========================================================================== */

ol.multipart-decimal {
	list-style-type: none;
  	counter-reset: item;
  	margin: 0;
  	padding: 0;
}

ol.multipart-decimal > li {
  	display: table;
  	counter-increment: item;
  	padding-bottom: 1.25em;
    padding-left: 0;
}

ol.multipart-decimal > li:last-child {
    padding-bottom: 0;
}

ol.multipart-decimal > li:before {
    content: counters(item, ".") ". ";
  	display: table-cell;
  	padding-right: 1em;
}

li ol.multipart-decimal > li {
  margin: 0;
}

li ol.multipart-decimal > li:before {
  content: counters(item, ".") " ";
}

ol.multipart-decimal ol.multipart-decimal ol.multipart-decimal {
    padding-top: 1em;
}

.multipart-decimal h2 {
    font-size: 100%;
}

/* ==========================================================================
   Links
   ========================================================================== */

a:link,a:active, a:visited {
  text-decoration: none;
}

/* ==========================================================================
   Button Elements
   ========================================================================== */

.buttonAction, .buttons, a.button, span.button a {
     font-weight: bold;
}

button:disabled, a:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
  background: darkgrey;
  color: lightgrey;
  cursor: default;
}

.buttons,  a.button, span.button a {
  padding: 0.4em 0.75em;
  border-radius: 0.5em;
  border: none;
  display: inline-block;
}

select option {
    padding-bottom: 0.3em;
    padding-top: 0.3em;
}

input, select {
	border: 1px solid #D0D0D0;
}

/*Overriding default browser line height so that buttons line up with links
e.g. on Order Review page*/
button, input {
    line-height: 1.5em;
}

input + input[type="button"], span input + input[type="button"] {
    margin-left: 0.75em;
}

input.lookupButton, a.lookupButton {
    vertical-align: middle;
}

input.lookupButton, a.lookupButton {
    margin-left: 1.5em;
}

select + input {
    margin-left: 0.75em;
}

input[type="file"] {
    margin-bottom: 1em;
}


/* ==========================================================================
   Forms/Fieldsets
   ========================================================================== */

form, fieldset  {
  margin: 0 0 1em;
  padding: 1em;
  border: none;
}

form > fieldset {
	margin: 0;
	padding: 0;	
}

fieldset > p:first-child {
	margin-top: 0;
}

form div, 
fieldset div {
    margin-bottom: 1em;
}

fieldset div.formInputAreaPanel {
    margin-bottom: 1.25em;
}

form div div, fieldset div div {
    margin-bottom: 0;
}

fieldset fieldset {
	padding: 0;
	margin: 0;
}

fieldset legend {
    display: none;
}

div.ccm-page span.value input[size="100"] {
    width: 100%;
}

input[type="checkbox"] {
	margin-right:0.25em;
}

/* ==========================================================================
   Form/Fieldset Elements
   ========================================================================== */

fieldset label {
    min-width: 9em;
}

label {
	display: inline-block;
	padding-right: 0.75em;
}

label:empty {
	display: none;
}

input, select, textarea {
	font-family:inherit;
}

input, select, button {
 	border:none   
}

select {
	padding-left: 0.5em;
	padding-right: 0.5em;	
}

/*Ie applies right padding to the right of the dropdown arrow (while chrome & firefox etc apply it on the inside, as with the
left-hand padding; so removing padding just for ie using a css hack:*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select {
		padding-right: 0;	
	}
}

/*The same as above but for Microsoft Edge*/
@supports (-ms-ime-align:auto) {
  	select {
		padding-right: 0;	
	}
}

input[type="text"], input[type="password"] {
    padding-left: 0.75em;
    padding-right: 0.4em;
}

form > select {
    margin-bottom: 1em;
}

input[type="text"], input[type="password"] {
    padding-left: 0.75em;
}

input[type="radio"] {
    margin-right: 0.75em;
}

input.disabled, input[disabled], select[disabled] {
  color: #808080;
  background: #CCCCCC;
}

label select:not(:first-child) {
    margin-left: 0.75em;
}

label input:not(:first-child) {
    margin-left: 0.5em;
}

label input[type="checkbox"]:first-child {
    margin-right: 0.5em;
}

textarea {
    margin-top: 0.5em;
    width: 99%;
}


/* ==========================================================================
   Paragraphs
   ========================================================================== */

p:empty {
    display: none;
}

/* ==========================================================================
   Table Elements
   ========================================================================== */

table {
  width: 100%;
  border-spacing: 2px 2px;
}

tr {
    vertical-align: top;
}

th {
	font-weight: bold;
    text-align: left;
}

th, td {
  padding: 1em;
}

td > span, th > span, th > div > span, td > a, th > a, th > a > span {
  display: block;
  text-align: left;
}

th img, td img {
	vertical-align: text-top;
}

td.icon {
    vertical-align: top;
}

td.total,
td.footerTotal,
td.exAnteProdCostType
td.instrumentName.firstColumn, td.stockCode {
	font-weight: bold;
}

td.livebid, td.liveoffer, td.livemid, td.closemid {
    min-width: 4em;
}

.numericAlignment, .currencyAlignment,
.percentageAlignment,  
th.numericTableCell span, th.currencyTableCell span,
td.numericTableCell span, td.currencyTableCell span,
th.percentage > span, td.percentage {
    text-align: right;
}

th.percentage, td.percentage {
    width: 4.5em;
}

thead tr ~ tr:nth-child(2) th {
    padding-bottom: 0.7em;
    padding-top: 0.7em;
}

thead tr ~ tr:not(:last-child) th {
    padding-bottom: 0.4em;
    padding-top: 0.6em;
}

thead tr ~ tr:last-child:not(:nth-child(2)) th {
    padding-bottom: 0.6em;
    padding-top: 0.4em;
}

/* ==========================================================================
   Image map areas
   ========================================================================== */

area:not([href]) {
    cursor: default;
}