body {
  background: black;
  opacicty: 0.5;
}
/* Top level is idpSelectIdPSelector */
#idpSelectIdPSelector {
  display: table;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  border-radius: 15px;
  background: #FFF;
}

/* Next down are the idpSelectPreferredIdPTile, idpSelectIdPEntryTile & idpSelectIdPListTile */
#idpSelectPreferredIdPTile {
  display: table;
  border-spacing: 0px 10px;
  border-top: 1px solid #BBB;
  border-bottom: 1px solid #BBB;
  background: #EEE;
}

#idpSelectPreferredIdPTile div.IdPSelectTextDiv {
  display: table-caption;
  padding: 10px;
}

/* the PreferredIdPTile contains 0 or more buttons */
div.IdPSelectPreferredIdPButton {
  background-color: #CCC;
  display: block;
  border: 1px solid #BBB;
  border-radius: 4px;
  margin: 10px;

  background-color: #fafafa;
  background-image:
    -webkit-gradient(linear, left bottom, left top, color-stop(0.3, rgb(220,220,220)), color-stop(0.9, rgb(240,240,240)));
  background-image:
    -moz-linear-gradient( center bottom, rgb(220,220,220) 30%, rgb(240,240,240) 90%); background-image: -o-linear-gradient( bottom, rgb(220,220,220) 30%, rgb(240,240,240) 90%);

  /* Text */
  color: #333;
  text-shadow: 0 1px #fff;
  font-family:  "Arial Narrow", "Arial", sans-serif;
  text-decoration: none;
}

div.IdPSelectPreferredIdPButton:hover {
  background-color: #fafafa;
  border: 1px solid #666;
}
/* each button has an image and some text */
a {
  text-decoration: none;
  color: #333;
}
div.IdPSelectPreferredIdPImg {
  vertical-align: middle;
  display: table-cell;
}
div.IdPSelectPreferredIdPButton img {
  padding-left: 10px;
  padding-right: 10px;
  border: none;
}
#idpSelectPreferredIdPTile div.IdPSelectPreferredIdPButton div.IdPSelectTextDiv {
  vertical-align: middle;
  font-size: 120%;
  display: table-cell;
  padding-right: 10px;
}

/* now either the EntryTile or the ListTile is shown */
/*
 * Force the size of the selectors and the buttons
 */
#idpSelectInput, #idpSelectSelector {
  width: 90%;
}
/*
 * For some reason a <select> width includes the border and an
 * <input> doesn't hence we have to force a margin onto the <select>
 */
#idpSelectSelector {
  margin-left: 2px;
  margin-right: 2px;
}
#idpSelectSelectButton, #idpSelectListButton {
  //margin-left: 5px;
  //width: 16%;
}
#idpSelectSelectButton {
    margin-top: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

/*
 * change underlining of HREFS
 */
#idpSelectIdPSelector a:link {
    text-decoration: none;
}

#idpSelectIdPSelector a:visited {
    text-decoration: none;
}

#idpSelectIdPSelector a:hover {
    text-decoration: underline;
}

/* 
 * Arrange to have the dropdown/list aref on the left and the 
 * help button on the right 
 */
#idpSelectIdPEntryTile , #idpSelectIdPListTile {
  display: table;
  width: 100%;
  margin: 10px;
}

#idpSelectIdPEntryTile div.IdPSelectTextDiv, #idpSelectIdPListTile div.IdPSelectTextDiv {
  display: table-caption;
}


form {
  display: table-row;
} 
#idpSelectInput {
  padding-left: 10px;
}

a.IdPSelectDropDownToggle {
  display: table-cell;
}

a.IdPSelectHelpButton {
  display: none;
  text-align: right;
}

/**
 * Drop down (incremental search) stuff - see the associated javascript for reference
 */
div.IdPSelectDropDown {
  -moz-box-sizing: border-box;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
  box-sizing: border-box;
  border: 1px solid black;
  z-index: 6;
  position: absolute;   
}

div.IdPSelectDropDown div {
  background-color: white;
  cursor: default;
  padding: 0px 3px;
}

 div.IdPSelectDropDown div.IdPSelectCurrent {
  background-color: #3366cc;
  color: white;
}