/* CSS Document */
* {
  margin: 0; 
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  background-color: #bbbbbb;
}

img {
  border: none;
}


#wrap {
  width: 289px;
  height: 150px;
}

body#branded p {
  text-align: center;
}

body#branded #header {
  position: relative;
  margin: 0 auto;
  width: 289px;
  height: 75px;
  background: url(../image/phonefromhere-logo.jpg) center no-repeat;
}

#header a#pfhclick {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  line-height: 30px;
  text-indent: -3000px;
}

div#header1 {
  text-align: center; 
}

div#header2 {
  text-align: center; 
  font-weight: bold;
  font-size: 90%;
}

body#branded #content {
  position: relative;
}


#loading, #loadingFailed, #ringing, #answered, #hungup, #dial {
   /* height: 25%; */
  border: 1px solid white;
  margin-left: 18px;
  margin-right: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#loading, #loadingFailed {
  padding-top: 43px;
  padding-bottom: 43px;
  text-align: center;
}

#ringing, #hungup {
  padding-top: 29px;
  padding-bottom: 29px;
  text-align: center;
}

p.innertext {
  margin-bottom: 10px;
}

div#answered,
div#dial {
  padding: 5px;
}

div#answered table,
div#dial table {
  border-collapse: collapse;
}

div#answered table td,
div#dial table td {
  text-align: center;
  vertical-align: center;
}

div#answered table td.status,
div#dial table td.status {
  vertical-align: bottom;
  padding-bottom: 2px;
  font-weight: bold;
}

div#answered table td.keys,
div#dial table td.keys {
  line-height: 1px;
}

div#answered table td.button,
div#dial table td.button {
  line-height: 1px;
  text-align: center;
}

div#answered table td img,
div#dial table td img {
  margin: 0;
  padding: 0;
}

div#dial input#dialno {
  font-size: 90%;
  width: 75px;
}

body#branded #footer {
  position: relative;
  vertical-align: top;
  text-align: center; 
  font-size: 90%;
}

#footer #credit,
#footer #credit a {
  text-align: center; 
  vertical-align: top;
}


/* These ones are separate because they upset IE6 */
a[onclick], img[onclick] {
  cursor: pointer;
}

a:link, a:visited {
  border: none;
  text-decoration: none;
  color: black;
}

.nohaveimage {
  background: url("../image/blank.gif") no-repeat center;
  height: 25px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.nohaveimage .text {
  font-weight: bold;
  vertical-align: -40%;
}

.haveimage img {
  vertical-align: bottom;
  cursor: pointer;
}