@namespace url(http://www.w3.org/1999/xhtml);

form#interface * {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10pt !important;
  font-weight: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
  color: #000 !important;
  line-height: 25px !important;
}

form#interface {
  cursor: default !important;
  display: none;
  margin: 0 !important; 
  padding: 0 0 0 5px !important;
  height: 102px !important;
  width: 272px !important;
  z-index: 999 !important;
  position: absolute !important;
  font-family: Arial !important;
  font-size: 10pt;
  text-decoration: none !important;
  background: transparent url(http://www.personal.psu.edu/sgd5026/Readability_Interface/shadow.png) top left no-repeat !important;
}

#moveable {
  cursor: move !important;
  width: 277px;
  height: 18px;
  position: relative;
  top: -18px;
  left: -5px;
  background: transparent url(http://www.personal.psu.edu/sgd5026/Readability_Interface/moveable.png) top left no-repeat !important;
}

#closeButton {
  cursor: pointer !important;
  width: 32px;
  height: 18px;
  position: relative;
  left: 240px;
  top: 0px;
  background: url(http://www.personal.psu.edu/sgd5026/Readability_Interface/close.png) top left no-repeat !important;
}

.highlightText {
  cursor: pointer !important;
  border: 3px solid red !important;
}

.selectedText {
  cursor: pointer !important;
  border: 3px solid red !important;
}

div#selector {
  position: relative;
  top: -18px;
  margin: 4px 0 !important;
  padding: 0 !important;
  width: 262px !important;
  height: 20px !important;
  cursor: pointer !important;
  background: transparent url(http://www.personal.psu.edu/sgd5026/Readability_Interface/selector.png) top left no-repeat;
}

select#fontFamily {
  position: relative;
  top: -18px;
  float: left !important;
  height: 30px !important;
  width: 150px !important;
  text-decoration: none !important;
  background-color: #fff !important;
}

select#fontSize {
  position: relative;
  top: -18px;
  float: left !important;
  height: 30px !important;
  width: 43px !important;
  margin-left: 3px !important;
  font-family: Arial !important;
  background-color: #fff !important;
}

select option {
  font-family: Arial !important;
  background-color: #fff !important;;
}

div#increaseFont {
  position: relative;
  top: -18px;
  cursor: pointer !important;
  width: 30px !important;
  height: 30px !important;
  float: left !important;
  margin-left: 3px !important;
  background-color: #fff !important;
}

div#decreaseFont {
  position: relative;
  top: -18px;
  margin-left: 3px !important;
  cursor: pointer !important;
  width: 30px !important;
  height: 30px !important;
  float: left !important;
  background-color: #fff !important;
}

#bold {
  cursor: pointer !important;
  position: relative !important;
  top: 16px !important;
  left: 0px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #fff !important;
}

#italic {
  cursor: pointer !important;
  position: relative !important;
  left: 33px !important;
  top: -14px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #fff !important;
}

#underline {
  cursor: pointer !important;
  position: relative !important;
  left: 66px !important;
  top: -44px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #fff !important;
}

#fontColor {
  cursor: pointer !important;
  position: relative !important;
  left: 103px !important;
  top: -74px !important;
  width: 37px !important;
  height: 30px !important;
  background-color: #fff !important;
}

#fontColor:hover {
  background-image: url(http://www.personal.psu.edu/sgd5026/Readability_Interface/fontColorClicked.png) !important;
}

#fontColor table {
  display: none;
  width: 45px !important;
  position: relative !important;
  top: 30px !important;
  left: 1px !important;
  border: 1px solid #fff !important;
  background-color: #ccc !important;
}

#fontColor td {
  width: 25px !important;
  height: 20px !important;
  border: 1px solid #ccc !important;
}
#backgroundColor {
  cursor: pointer !important;
  position: relative !important;
  left: 144px !important;
  top: -104px !important;
  width: 37px !important;
  height: 30px !important;
  background-color: #fff !important;
}

#backgroundColor:hover {
  background-image: url(http://www.personal.psu.edu/sgd5026/Readability_Interface/backgroundColorClicked.png) !important;
}
  

#backgroundColor table {
  display: none;
  width: 45px !important;
  position: relative !important;
  top: 30px !important;
  left: 1px !important;
  border: 1px solid #fff !important;
  background-color: #ccc !important;
}

#backgroundColor td {
  width: 25px !important;
  height: 20px !important;
  border: 1px solid #ccc !important;
}


td#blue {
  background-color: blue !important;
}
td#red {
  background-color: red !important;
}
td#green {
  background-color: green !important;
}
td#black {
  background-color: black !important;
}
td#orange {
  background-color: orange !important;
}
td#purple {
  background-color: purple !important;
}
td#yellow{
  background-color: yellow !important;
}
td#white {
  background-color: white !important;
}

#lineSpacing {
  cursor: pointer !important;
  position: relative !important;
  left: 188px !important;
  top: -134px !important;
  width: 37px !important;
  height: 31px !important;
  background-color: #fff !important;
}

#lineSpacing:hover {
  background-image: url(http://www.personal.psu.edu/sgd5026/Readability_Interface/lineSpacingClicked.png) !important;
}


#lineSpacing ul {
  display: none;
  width: 71px !important;
  position: relative !important;
  top: 29px !important;
  left: 0px !important;
  border: 1px solid #fff !important;
  background-color: #ccc !important;
  z-index: 999 !important;
}

#lineSpacing ul li {
  list-style: none !important;
  text-align: center !important;
  width: 71px !important;
}

#lineSpacing ul a {
  display: block !important;
  padding: 3px 0 !important;
  width: 71px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 12px !important;
  text-align: center !important;
  line-height: 15px !important;
}

#lineSpacing ul a:hover {
  background-color: #316AC5 !important;
  color: #fff !important;
}

#refreshButton {
  cursor: pointer !important;
  position: relative !important;
  left: 232px !important;
  top: -165px !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #fff !important;
}