.demo
{
    border:4px solid #c0c0c0;
    border-top:20px solid #c0c0c0;
    margin:1em;
    padding:1em 2em;
}

pre
{
    background-color:#f0f0f0;
    border:1px dashed #333367;
    display:block;
    margin:1em;
    overflow:auto;
    padding:0.5em 0 0.5em 1.2em;
}

.announcement
{
  background-color: #Ff9;
  border:6px double #4c4c66;
  margin:1em 0.5em;
  padding:0.5em 0 1em 50px;
  text-align: center;
}

.announcementHeadline
{
  font-family: HeadingFont;
  font-size: 1.5em;
}

.announcement a {
  background-color: #4c4c66;
  border: 1px outset #4c4c66;
  border-radius: 2px;
  color: white;
  padding: 0.2em 2em;
  }

dt[id]:hover a.linkLink::before,
h1[id]:hover a.linkLink::before,
h3[id]:hover a.linkLink::before {
  content: "  ";
  }

dt[id]:hover a.linkLink::after,
h1[id]:hover a.linkLink::after,
h3[id]:hover a.linkLink::after {
  background-color: #006;
  color: white;
  content: "[link]";
  text-transform: none;
  }


.quotebox
{
  background-image:url('/PxSite/quoteopen.png');
  background-position:1em 1em;
  background-repeat:no-repeat;
  border:6px double #4c4c66;
  margin:1em 0.5em;
  padding:0.5em 0 0.5em 50px;
}

.quoteboxMinor
{
  clear:right;
  float:right;
  margin-bottom:1em;
  margin-left:1em;
  margin-top:1em;
  width:24em;
}

/*--------------------------------------------------------------------------*/

@media screen and (max-width:58em)
{
  .quotebox
  {
    display:none;
  }
}

/*****************************************************************************
 *
 * Class names as styles (to get around inline style security policy)
 *
 ****************************************************************************/

.border-width-0 {
  border-width: 0;
  }

.clear-left {
  clear: left;
  }

.font-size-x-large {
  font-size: x-large;
  }

.padding-1em {
  padding: 1em;
  }

.padding-left-2em {
  padding-left: 2em;
  }

.text-align-center {
  text-align: center;
  }

.text-decoration-underline {
  text-decoration: underline;
  }

.vertical-align-top {
  vertical-align: top;
}

.width-3em {
  width: 3em;
  }

/*****************************************************************************
 *
 * Specific fields/demos
 *
 ****************************************************************************/

#primaryDemos pre {
  width: 28em;
  }

#field2 {
  background-image:url("clock.png");
  background-position:right center; background-repeat:no-repeat;
  border:1px solid #FFC030;color:#3090C0;font-weight:bold;
  }
#AnyTime--field2 {
  background-color:#EFEFEF;
  border:1px solid #CCC;
  }
#AnyTime--field2 * {
  font-weight:bold
  }
#AnyTime--field2 .AnyTime-btn {
  background-color:#F9F9FC;
  border:1px solid #CCC;
  color:#3090C0;
  }
#AnyTime--field2 .AnyTime-cur-btn {
  background-color:#FCF9F6;
  border:1px solid #FFC030;
  color:#FFC030;
  }
#AnyTime--field2 .AnyTime-focus-btn {
  border-style:dotted;
  }
#AnyTime--field2 .AnyTime-lbl {
  color:black;
  }
#AnyTime--field2 .AnyTime-hdr {
  background-color:#FFC030;
  color:white;
  }

#rangeDemoStart, #rangeDemoFinish {
  background-image:url("calendar.png");
  background-position:right center;
  background-repeat:no-repeat;
  }

/*****************************************************************************
 *
 * Links to referring sites
 *
 ****************************************************************************/

.sprite {
  background-image: url(sprites.png);
  display: inline-block;
  }

.sprite-link {
  background-image: url(sprites.png);
  display: inline-block;
  height: 32px;
  vertical-align: bottom;
  width: 32px;
  }

#sprite-dr-web {
  background-position: -88px 0;
  }

#link-dr-web {
  color: black;
  font-size:1.2em;
  font-family:Helvetica,Arial,sans-serif;
  font-weight:bold;
}

#sprite-dot-concepts {
  background-position: -120px 0;
  }

#link-dot-concepts {
 color:#6db846;
 font-family:Helvetica,Arial,sans-serif;
 font-size:16px;
 }

#link-dot-concepts span:first-of-type {
  color:#ce9f16;
  }

#link-dot-concepts span:last-of-type {
  color:#333;
  }

#sprite-magazine-hive {
  background-position: -152px 0;
  }

#link-magazine-hive span:first-of-type {
  color:#000;
  }

#link-magazine-hive span:last-of-type {
  color:#999;
  }

#sprite-fabio-stawinski {
  background-position: -184px 0;
  }

#sprite-technogadge {
  background-position: -216px 0;
  }

#link-technogadge {
  color:#383838;
  font-family:Helvetica,Arial,sans-serif;
  }

#link-technogadge span {
  color:#E11100;
  }

#sprite-tardate {
  background-position: -248px 0;
  }

#link-tardate {
  color:#1C1C1C;
  font-family:Helvetica,Arial,sans-serif;
  font-size:16px;
  }


/*****************************************************************************
 *
 * Special (one-off) boxes (spans/divs)
 *
 ****************************************************************************/

#sprite-cc {
  background-position: 0 0;
  display:block;
  float:left;
  height: 32px;
  margin:18px 16px 12px 8px;
  width: 88px;
  }

#box-free {
  background-color:#EFE;
  border:1px solid #060;
  color:#060;
  font-family:serif;
  font-size:8pt;
  font-weight:bold;
  padding:4px 4px 4px 4px;
  }

#box-free strong {
  font-size:12pt;
  }

#sprite-jquery {
  background-position: -341px 0;
  display: block;
  float:left;
  height: 32px;
  margin:18px 16px 10px 8px;
  width: 80px;
  }

#box-prototype,
#box-version4 {
  background-color:#f0f0f0;
  margin-top:1em;
  padding:0.1em 1em 1em 1em;
  }

#sprite-prototype {
  background-position: -280px 0;
  height: 26px;
  vertical-align: bottom;
  width: 61px;
  }

#primaryDemos
{
  float:right;
  width:31em;
  margin:1em 0 1em 2em;
}

#primaryDemos iframe
{
  display:block;
  height:23em;
}

#primaryDemos iframe,
#inlinePicker
{
  margin:0 auto;
  width:30em;
}

#inlinePicker
{
  margin-top:1em;
}

/*--------------------------------------------------------------------------*/

@media screen and (max-width:64em)
{
  #primaryDemos
  {
    float:none;
    width:inherit;
    margin:inherit;
  }

  #primaryDemos pre
  {
    margin:1em auto;
  }

  #primaryDemos p.standout
  {
    display:none;
  }
}