html,
body {
  background: #fff none;
  color: #5e6062;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

html {
  overflow: scroll;  /* Else the page jumps around as scrollbars
                      * appear and disappear on small screens
                      * during the 'bouncing' animation */
}

body {
  font-size: 100%;
  line-height: 1.5em;
  text-align: center;
}

a{
	text-decoration: none;
}

a img{
	border: none;
}

dd,
dt {
  font-weight: normal;
  font-size: 0.8125em;
  padding: 0;
  margin: 0;
}

dd {
  padding: 0;
  margin-top: 0.375em;
  margin-left: 239px;
}

dd ol {
  line-height: 1em;
  list-style: none none;
  padding: 0;
  margin-top: 0;
}

dt {
  text-align: left;
  float: left;
  clear: left;
  width: 239px;
}

dl {
  padding: 0;
  margin: 0 0 2px 0;
}

h1 {
  background: transparent none;
  color: #d89f17;
  font-size: 1em;
}

h2 {
  background: transparent none;
  color: #5e6062;
  font-size: 1em;
}

h3 {
  background: transparent none;
  color: #5e6062;
  font-weight: bold;
  font-size: 1em;
  margin-top: 1em;
}

#content h1 {
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right top;
  color: #5e6062;
  font-weight: bold;
  font-size: 2.8125em;
  line-height: 1;
  text-indent: -9999em;
  text-align: left;
  padding: 0;
  margin: 0;
  height: 84px;
  overflow: hidden;
}

#content h1 strong {
  /* display: block; */ /*XXX fix this! */
  background: transparent none;
  color: #fdb913;
}

#content h2 {
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right -563px;
  color: #5e6062;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.2;
  text-indent: -9999em;
  text-align: left;
  height: 70px;
  padding: 0;
  margin: 30px 0 0 0;
  overflow: hidden;
}

#content h3 {
  font-weight: normal;
  font-size: 1em;
  line-height: 1.2;
  text-indent: -9999em;
  text-align: left;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

p,
.Normal {
  display: block; /* For content from Immediacy which uses span.Normal */
  font-size: 0.8125em;
  padding: 0;
  margin: 0;
}



/* Layout
 */

#page {
  width: 581px;
  margin: 0 auto;
  position: relative;
}

#content {
  background: transparent url(/friends/images/bg-box-middle.gif) scroll repeat-y bottom left;
  color: #5e6062;
  text-align: right;
  width: 100%;
  position: absolute;
}

#content form {
  background: transparent url(/friends/images/bg-box-bottom.gif) scroll no-repeat bottom left;
  color: #5e6062;
  padding: 0 73px 73px 64px;
  margin: 0;
}

#header {
  background: transparent url(/friends/images/img_heart.gif) scroll no-repeat 74px 23px;
  color: #5e6062;
  padding: 26px 0 20px;
  height: 182px;
}

#footer {
  margin-top: -24px;
}

#cwlogo {
  background: transparent url(/mobile/images/header/img_cw_logo.gif) scroll no-repeat right 54px;
  color: #5e6062;
  text-align: left;
  text-indent: -9999em;
  height: 101px;
}

#surelogo a {
  display: block;
  background: transparent url(/mobile/images/header/img_sure_logo.gif) scroll no-repeat left top;
  color: #fdb913;
  font-weight: bold;
  text-align: left;
  text-indent: -9999em;
  width: 112px;
  height: 99px;
  float: left;
}

/* Put in by the slide javascript
 */
.fxWrapper {
  padding-bottom: 40px;
  z-index: 99;
}



/* Forms
 */

#code,
#friend1,
#friend2,
#friend3,
#you {
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right center;
  color: #5e6062;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: inherit;
  padding: 5px 10px;
  border-style: none;
  width: 175px;
}

#code {
  background-position: right -199px;
  height: 16px;
}

#friend1,
#friend2,
#friend3 {
  background-position: right -220px;
  height: 17px;
}

#you {
  background-position: right -174px;
  height: 15px;
}

#code-label,
#friend-label,
#you-label {
  display: block;
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right top;
  text-indent: -9999em;
  overflow: hidden;
}

#code-label {
  background-position: right -142px;
  margin-top: 0.9375em;
  height: 16px;
}

#friend-label {
  background-position: right -158px;
  margin-top: 0.9375em;
  margin-left: -20px;
  height: 15px;
}

#you-label {
  background-position: right -125px;
  margin-top: 0.5em;
  height: 13px;
}

#formfields ol {
  padding: 0;
  margin: 0;
}

ol.two-friends #friend2 {
  background-position: right -243px;
  padding-top: 6px;
  padding-bottom: 3px;
  height: 16px;
}

ol.two-friends #friend3 {
  background-position: right -268px;
  padding-top: 3px;
  height: 17px;
}

ol.three-friends #friend1 {
  background-position: right -302px;
  padding-top: 6px;
  padding-bottom: 2px;
  height: 17px;
}

ol.three-friends #friend2 {
  background-position: right -327px;
  padding-top: 3px;
  height: 16px;
}

ol.three-friends #friend3 {
  background-position: right -351px;
  padding-top: 2px;
  padding-bottom: 2px;
  height: 19px;
}

#getcode a {
  height: 12px;
  margin: 0 4px 0 118px;
  display: block;
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right -535px;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
}

#getcode a:hover {
  background-position: right -550px;
}

#help {
  float: left;
}

#help a {
  display: block;
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat -18px -490px;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
  padding: 0;
  margin: -1.625em 0 0 38px;
  width: 18px;
  height: 21px;
  float: left;
}

#tandcs {
  margin-bottom: 7px;
}

#login-link a,
#note-code,
#note-text,
#tandcs a,
#tandcs label,
#tandcs span {
  display: block;
  background: transparent url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif) scroll no-repeat right top;
  text-align: left;
  text-indent: -9999em;
  overflow: hidden;
}

#login-link {
  background: transparent none;
  color: #7f7f7f;  /* This needs to be a little bit lighter than other text,
                      else it tends to dominate the page. */
  margin-top: 0.3846em;
}

#login-link a {
  background-position: right -518px;
  height: 17px;
  margin-left: 190px;
}

#login-link a:hover {
  background-position: right -500px;
}

#note-code {
  background-position: right -470px;
  margin-bottom: 4px;
  margin-left: 110px;
  height: 28px;
}

#note-text {
  background-position: right -442px;
  margin-bottom: 4px;
  margin-left: 130px;
  height: 28px;
}

#tandcs a {
  background-position: right -414px;
  height: 13px;
  margin-left: 265px;
}

#tandcs a:hover {
  background-position: right -429px;
}

#tandcs label {
  background-position: right -374px;
  height: 19px;
}

#tandcs span {
  background-image: none;
  text-indent: 0;
  margin-left: 257px;
  width: 21px;
  height: 19px;
  float: left;
}

.has-js #tandcs span {
  background-image: url(/friends/images/text_and_boxes_pl_tmp_2009-09.gif);
  background-position: -131px -374px;
}

.has-js #tandcs.checked span {
  background-position: -131px -393px;
}

.has-js #tandcs span input {
  background: transparent none;
  color: transparent;
  cursor: pointer;
  border: 0 solid transparent;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

#messagebox {
  background: #fff1cc none;
  color: #5e6062;
  font-size: 0.8125em;
  text-align: left;
  padding: 0 3px 1px 3px;
  border: solid 1px #d5d5d5;
  margin-top: 0.3846em;
  margin-bottom: 0.7692em;
  margin-left: 87px;
}



/* Dialog sheets
 */

#dialog-overlay {
  background: #fff none;
  color: #000;
  opacity: 0;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  z-index: 90;
}

#dialog {
  line-height: 1.3125em;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 100;
}

#dialog a {
  background: transparent none;
  color: #5e6062;
}

#dialog a:hover,
#dialog a:active {
  background: transparent none;
  color: #c41230;
}

#dialog fieldset {
  background: transparent none;
  color: #7d575c;
  padding: 0;
  border-style: none;
  margin: 3em 0 0 0;
}

#dialog fieldset dl,
#dialog fieldset dl dd,
#dialog fieldset dl dt {
  padding: 0;
  margin: 0;
}

#dialog fieldset dl dd,
#dialog fieldset dl dt {
  padding: 0 0 0.25em 0;
  margin: 0;
}

#dialog fieldset dl dd input {
  width: 130px;
}

#dialog fieldset dl dt {
  width: 100px;
  float: left;
}

#dialog fieldset legend {
  font-size: 0.8125em;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

#dialog fieldset p {
  margin: 0 0 0.3846em 0;
}

#dialog fieldset p.buttons {
  padding-top: 0.4375em;
}

#dialog h3 {
  background: transparent none;
  color: #d89f17;
  font-size: 0.875em;
  font-weight: bold;
  padding: 5em 37px 0.3125em 0;
  margin: 0;
}

#dialog p {
  font-size: 0.875em;
  padding: 0 37px 0 0;
}

#dialog-message {
  background: #fff7de none;
  color: #5E6062;
  font-size: 0.9286em;
  padding: 0 3px 1px 3px;
  border: solid 1px #d5d5d5;
  margin-top: 0.3846em;
  overflow: auto;
  max-height: 17em;
}

#dialog-message p,
#dialog-message div.Normal {
  font-size: 0.875em;
  padding: 0;
}

#dialog-additional {
  background: transparent none;
  color: #5e6062;
  line-height: 1.4615em;
  margin-top: 0.3846em;
}

#dialog-additional small {
  font-size: 0.9286em;
}

#dialog-sheet,
#dialog-footer {
  padding: 0 23px 0 19px;
  margin: 0 auto;
  width: 289px;
}

#dialog-sheet {
  background: transparent url(/friends/images/dialog-box-middle.png) scroll repeat-y top center;
  color: #5e6062;
  text-align: left;
}

#dialog-content {
  background: #fff1cc none;
  color: #5e6062;
  padding: 0 24px 6px 23px;
}

#dialog-footer {
  background: transparent url(/friends/images/dialog-box-bottom.png) scroll no-repeat bottom center;
  color: #5e6062;
  height: 40px;
}

#dialog-footer div {
  background: #fff1cc none;
  color: #5e6062;
  height: 15px;
}

#dialog p.buttons {
  text-align: right;
  padding-top: 3em;
  padding-right: 0;
}

#dialog p.buttons button,
#dialog p.buttons input {
  width: 5em;
}

#dialog p.buttons input#dialog-login {
  font-weight: bold;
}

#dialog.error #dialog-content,
#dialog.error #dialog-footer div {
  background: #ffd1d9 none;
  color: #c41230;
}

#dialog.error #dialog-message {
  background-color: #ffe0e5;
}

#dialog.error #dialog-additional {
  color: #7d575c;
}

#dialog.error a {
  background: transparent none;
  color: #7d575c;
}

#dialog.error a:hover,
#dialog.error a:active {
  background: transparent none;
  color: #c41230;
}

#dialog.error h3 {
  background: transparent none;
  color: #c41230;
}



/* Loading indicator
 */

#loading {
  text-align: center;
  margin-top: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 98;
}

#loading div {
  background: transparent url(/friends/images/loading-background.png) scroll no-repeat top center;
  color: #5e6062;
  width: 176px;
  height: 63px;
  margin: 0 auto;
}

#loading p {
  background: transparent url(/friends/images/loading-foreground.gif) scroll no-repeat top center;
  color: #5e6062;
  text-indent: -9999em;
  width: 176px;
  height: 63px;
}



/* Handwritten numbers
 */

.number {
  text-align: left;
  padding-bottom: 0.1923em;
  width: 190px;
  float: right;
}

.number-space {
  display: block;
  width: 9px;
  height: 20px;
  float: left;
}

.number-1-0, .number-2-0, .number-3-0, .number-4-0, .number-5-0, .number-6-0, .number-7-0, .number-8-0, .number-9-0, .number-10-0, .number-11-0,
.number-1-1, .number-2-1, .number-3-1, .number-4-1, .number-5-1, .number-6-1, .number-7-1, .number-8-1, .number-9-1, .number-10-1, .number-11-1,
.number-1-2, .number-2-2, .number-3-2, .number-4-2, .number-5-2, .number-6-2, .number-7-2, .number-8-2, .number-9-2, .number-10-2, .number-11-2,
.number-1-3, .number-2-3, .number-3-3, .number-4-3, .number-5-3, .number-6-3, .number-7-3, .number-8-3, .number-9-3, .number-10-3, .number-11-3,
.number-1-4, .number-2-4, .number-3-4, .number-4-4, .number-5-4, .number-6-4, .number-7-4, .number-8-4, .number-9-4, .number-10-4, .number-11-4,
.number-1-5, .number-2-5, .number-3-5, .number-4-5, .number-5-5, .number-6-5, .number-7-5, .number-8-5, .number-9-5, .number-10-5, .number-11-5,
.number-1-6, .number-2-6, .number-3-6, .number-4-6, .number-5-6, .number-6-6, .number-7-6, .number-8-6, .number-9-6, .number-10-6, .number-11-6,
.number-1-7, .number-2-7, .number-3-7, .number-4-7, .number-5-7, .number-6-7, .number-7-7, .number-8-7, .number-9-7, .number-10-7, .number-11-7,
.number-1-8, .number-2-8, .number-3-8, .number-4-8, .number-5-8, .number-6-8, .number-7-8, .number-8-8, .number-9-8, .number-10-8, .number-11-8,
.number-1-9, .number-2-9, .number-3-9, .number-4-9, .number-5-9, .number-6-9, .number-7-9, .number-8-9, .number-9-9, .number-10-9, .number-11-9 {
  display: block;
  background: transparent url(/friends/images/numbers.gif) scroll no-repeat left top;
  color: #000;
  text-align: left;
  text-indent: -9999em;
  height: 20px;
  float: left;
}

.number-1-0, .number-2-0, .number-3-0, .number-4-0, .number-5-0, .number-6-0, .number-7-0, .number-8-0, .number-9-0, .number-10-0, .number-11-0 { width: 15px; }
.number-1-1, .number-2-1, .number-3-1, .number-4-1, .number-5-1, .number-6-1, .number-7-1, .number-8-1, .number-9-1, .number-10-1, .number-11-1 { width: 11px; }
.number-1-2, .number-2-2, .number-3-2, .number-4-2, .number-5-2, .number-6-2, .number-7-2, .number-8-2, .number-9-2, .number-10-2, .number-11-2 { width: 13px; }
.number-1-3, .number-2-3, .number-3-3, .number-4-3, .number-5-3, .number-6-3, .number-7-3, .number-8-3, .number-9-3, .number-10-3, .number-11-3 { width: 10px; }
.number-1-4, .number-2-4, .number-3-4, .number-4-4, .number-5-4, .number-6-4, .number-7-4, .number-8-4, .number-9-4, .number-10-4, .number-11-4 { width: 16px; }
.number-1-5, .number-2-5, .number-3-5, .number-4-5, .number-5-5, .number-6-5, .number-7-5, .number-8-5, .number-9-5, .number-10-5, .number-11-5 { width: 12px; }
.number-1-6, .number-2-6, .number-3-6, .number-4-6, .number-5-6, .number-6-6, .number-7-6, .number-8-6, .number-9-6, .number-10-6, .number-11-6 { width: 11px; }
.number-1-7, .number-2-7, .number-3-7, .number-4-7, .number-5-7, .number-6-7, .number-7-7, .number-8-7, .number-9-7, .number-10-7, .number-11-7 { width: 13px; }
.number-1-8, .number-2-8, .number-3-8, .number-4-8, .number-5-8, .number-6-8, .number-7-8, .number-8-8, .number-9-8, .number-10-8, .number-11-8 { width: 15px; }
.number-1-9, .number-2-9, .number-3-9, .number-4-9, .number-5-9, .number-6-9, .number-7-9, .number-8-9, .number-9-9, .number-10-9, .number-11-9 { width: 14px; }

.number-1-0  { background-position: 0 0;      }
.number-2-0  { background-position: 0 -20px;  }
.number-3-0  { background-position: 0 -40px;  }
.number-4-0  { background-position: 0 -60px;  }
.number-5-0  { background-position: 0 -80px;  }
.number-6-0  { background-position: 0 -100px; }
.number-7-0  { background-position: 0 -120px; }
.number-8-0  { background-position: 0 -140px; }
.number-9-0  { background-position: 0 -160px; }
.number-10-0 { background-position: 0 -180px; }
.number-11-0 { background-position: 0 -200px; }

.number-1-1  { background-position: -15px 0;      }
.number-2-1  { background-position: -15px -20px;  }
.number-3-1  { background-position: -15px -40px;  }
.number-4-1  { background-position: -15px -60px;  }
.number-5-1  { background-position: -15px -80px;  }
.number-6-1  { background-position: -15px -100px; }
.number-7-1  { background-position: -15px -120px; }
.number-8-1  { background-position: -15px -140px; }
.number-9-1  { background-position: -15px -160px; }
.number-10-1 { background-position: -15px -180px; }
.number-11-1 { background-position: -15px -200px; }

.number-1-2  { background-position: -26px 0;      }
.number-2-2  { background-position: -26px -20px;  }
.number-3-2  { background-position: -26px -40px;  }
.number-4-2  { background-position: -26px -60px;  }
.number-5-2  { background-position: -26px -80px;  }
.number-6-2  { background-position: -26px -100px; }
.number-7-2  { background-position: -26px -120px; }
.number-8-2  { background-position: -26px -140px; }
.number-9-2  { background-position: -26px -160px; }
.number-10-2 { background-position: -26px -180px; }
.number-11-2 { background-position: -26px -200px; }

.number-1-3  { background-position: -39px 0;      }
.number-2-3  { background-position: -39px -20px;  }
.number-3-3  { background-position: -39px -40px;  }
.number-4-3  { background-position: -39px -60px;  }
.number-5-3  { background-position: -39px -80px;  }
.number-6-3  { background-position: -39px -100px; }
.number-7-3  { background-position: -39px -120px; }
.number-8-3  { background-position: -39px -140px; }
.number-9-3  { background-position: -39px -160px; }
.number-10-3 { background-position: -39px -180px; }
.number-11-3 { background-position: -39px -200px; }

.number-1-4  { background-position: -49px 0;      }
.number-2-4  { background-position: -49px -20px;  }
.number-3-4  { background-position: -49px -40px;  }
.number-4-4  { background-position: -49px -60px;  }
.number-5-4  { background-position: -49px -80px;  }
.number-6-4  { background-position: -49px -100px; }
.number-7-4  { background-position: -49px -120px; }
.number-8-4  { background-position: -49px -140px; }
.number-9-4  { background-position: -49px -160px; }
.number-10-4 { background-position: -49px -180px; }
.number-11-4 { background-position: -49px -200px; }

.number-1-5  { background-position: -65px 0;      }
.number-2-5  { background-position: -65px -20px;  }
.number-3-5  { background-position: -65px -40px;  }
.number-4-5  { background-position: -65px -60px;  }
.number-5-5  { background-position: -65px -80px;  }
.number-6-5  { background-position: -65px -100px; }
.number-7-5  { background-position: -65px -120px; }
.number-8-5  { background-position: -65px -140px; }
.number-9-5  { background-position: -65px -160px; }
.number-10-5 { background-position: -65px -180px; }
.number-11-5 { background-position: -65px -200px; }

.number-1-6  { background-position: -77px 0;      }
.number-2-6  { background-position: -77px -20px;  }
.number-3-6  { background-position: -77px -40px;  }
.number-4-6  { background-position: -77px -60px;  }
.number-5-6  { background-position: -77px -80px;  }
.number-6-6  { background-position: -77px -100px; }
.number-7-6  { background-position: -77px -120px; }
.number-8-6  { background-position: -77px -140px; }
.number-9-6  { background-position: -77px -160px; }
.number-10-6 { background-position: -77px -180px; }
.number-11-6 { background-position: -77px -200px; }

.number-1-7  { background-position: -89px 0;      }
.number-2-7  { background-position: -89px -20px;  }
.number-3-7  { background-position: -89px -40px;  }
.number-4-7  { background-position: -89px -60px;  }
.number-5-7  { background-position: -89px -80px;  }
.number-6-7  { background-position: -89px -100px; }
.number-7-7  { background-position: -89px -120px; }
.number-8-7  { background-position: -89px -140px; }
.number-9-7  { background-position: -89px -160px; }
.number-10-7 { background-position: -89px -180px; }
.number-11-7 { background-position: -89px -200px; }

.number-1-8  { background-position: -102px 0;      }
.number-2-8  { background-position: -102px -20px;  }
.number-3-8  { background-position: -102px -40px;  }
.number-4-8  { background-position: -102px -60px;  }
.number-5-8  { background-position: -102px -80px;  }
.number-6-8  { background-position: -102px -100px; }
.number-7-8  { background-position: -102px -120px; }
.number-8-8  { background-position: -102px -140px; }
.number-9-8  { background-position: -102px -160px; }
.number-10-8 { background-position: -102px -180px; }
.number-11-8 { background-position: -102px -200px; }

.number-1-9  { background-position: -117px 0;      }
.number-2-9  { background-position: -117px -20px;  }
.number-3-9  { background-position: -117px -40px;  }
.number-4-9  { background-position: -117px -60px;  }
.number-5-9  { background-position: -117px -80px;  }
.number-6-9  { background-position: -117px -100px; }
.number-7-9  { background-position: -117px -120px; }
.number-8-9  { background-position: -117px -140px; }
.number-9-9  { background-position: -117px -160px; }
.number-10-9 { background-position: -117px -180px; }
.number-11-9 { background-position: -117px -200px; }