/* ##################################### */
/* #          NAVIGATION AREA          # */
/* ##################################### */
#pageWrapper h1 { position: relative; width: 904px; height: 55px; line-height: 27px; }
  #pageWrapper a.getkit { position: absolute; top: 5px; right: -38px; }

#exampleNav { margin-top: 20px; padding: 9px 0 30px 11px; background: url('/cdf/images/examples-topnavbg.gif') no-repeat; }
  #exampleNav .exampleNav-item { float: left; width: 102px; height: 120px; background: url('/cdf/images/examples-nav_off.png') no-repeat; cursor: pointer; }
   .exampleNav-item a { color: #555!important; }
     .exampleNav-item.hover a { color: #e00400 !important; }
   .exampleNav-item div.img { margin: 7px 9px 3px; border: 1px solid #ddd; }
   .exampleNav-item div.txt { margin: 0 9px; font-size: 11px; line-height: 12px; text-align: center; }
      .exampleNav-item div.txt.oneline { line-height: 24px; }
    body.uses1 #item1, body.uses2 #item2, body.uses3 #item3, body.uses4 #item4, body.uses5 #item5, body.uses6 #item6, body.uses7 #item7, body.uses8 #item8, body.uses9 #item9 { background-image: url('/cdf/images/examples-nav_on.png'); }
      body.uses1 #item1 a, body.uses2 #item2 a, body.uses3 #item3 a, body.uses4 #item4 a, body.uses5 #item5 a, body.uses6 #item6 a, body.uses7 #item7 a, body.uses8 #item8 a, body.uses9 #item9 a { color: #e00400 !important; }
  #exampleNav h2 { margin: 30px 0 10px 35px; padding: 0; font-size: 20px; font-weight: normal; color: #e00400; }

div.introLeft { float: left; width: 697px; margin: 0; }
  .introLeft p.intro { margin: 0 130px 0 35px; font-size: 14px; line-height: 20px; }
div.introRight { float: left; width: 196px; }
  .introRight a { outline: none !important; }





/* ##################################### */
/* #         MAIN CONTENT AREA         # */
/* ##################################### */

/* general */
#wrapper { width: 998px; margin: 24px auto 40px; }
table.exampleTable { width: 940px; margin-top: 0; border: none; border-collapse: collapse; border-spacing: 0; }
  .exampleTable tr { vertical-align: top; }

#wrapper a, #TB_window a { text-decoration: none; } 

/* callouts */
.exampleTable td.calloutLeft { width: 195px; padding-top: 25px; }
  .calloutLeft div.callout { position: absolute; width: 195px; background: url('/cdf/images/examples-callout-arrow-left.gif') no-repeat top right; padding-top: 43px; }
    .calloutLeft .callout.gears { background-image: url('/cdf/images/examples-callout-arrow-left-gears.gif'); padding-top: 45px; }
    .calloutLeft .callout p { margin: 0 10px; }
    .calloutLeft .callout img { margin-left: 10px; }
.exampleTable td.calloutRight { width: 195px; padding-top: 25px; }
  .calloutRight div.callout { position: absolute; width: 195px; background: url('/cdf/images/examples-callout-arrow-right.gif') no-repeat; padding-top: 43px; }
    .calloutRight .callout.gears { background-image: url('/cdf/images/examples-callout-arrow-right-gears.gif'); padding-top: 45px; }
    .calloutRight .callout p { margin: 0 10px 0 0; }
    .calloutRight .callout img { margin-right: 10px; }
div.calloutWrap { position: relative; width: 195px; }
  /* SAME AS INTERACT NOW */
  body.uses1 div.calloutWrap { height: 754px; }
  body.uses2 div.calloutWrap { height: 787px; }
  body.uses3 div.calloutWrap { height: 404px; }
  body.uses4 div.calloutWrap { height: 798px; }
  body.uses5 div.calloutWrap { height: 928px; }
  body.uses6 div.calloutWrap { height: 935px; }
  body.uses7 div.calloutWrap { height: 650px; }
  body.uses8 div.calloutWrap { height: 707px; }
  body.uses9 div.calloutWrap { height: 802px; }

.callout p.alt { margin-top: 4px; }



/* embed cell */
.exampleTable td.contentCell { width: 550px; }
table.embedTable { width: 550px; border: none; border-collapse: collapse; border-spacing: 0; }

  /* shadows */
  .embedTable td.topLeft { width: 25px; height: 25px; background: url('/cdf/images/examples-shadow-tl.png') no-repeat bottom; }
  .embedTable td.topMid1 { background: url('/cdf/images/examples-shadow-tm.png') no-repeat bottom left; }
  .embedTable td.topMid2 { background: url('/cdf/images/examples-shadow-tm.png') no-repeat bottom center; }
  .embedTable td.topMid3 { background: url('/cdf/images/examples-shadow-tm.png') no-repeat bottom right; }
  .embedTable td.topRight { width: 25px; height: 25px; background: url('/cdf/images/examples-shadow-tr.png') no-repeat bottom;  }
  .embedTable td.midLeft1 { background: url('/cdf/images/examples-shadow-ml.png') no-repeat top left; }
  .embedTable td.midRight1 { background: url('/cdf/images/examples-shadow-mr.png') no-repeat top right; }
  .embedTable td.midLeft2 { background: url('/cdf/images/examples-shadow-ml.png') no-repeat center left; }
  .embedTable td.midRight2 { background: url('/cdf/images/examples-shadow-mr.png') no-repeat center right; }
  .embedTable td.midLeft3 { background: url('/cdf/images/examples-shadow-ml.png') no-repeat bottom left; }
  .embedTable td.midRight3 { background: url('/cdf/images/examples-shadow-mr.png') no-repeat bottom right; }
  .embedTable td.botLeft { width: 25px; height: 30px; background: url('/cdf/images/examples-shadow-bl.png') no-repeat top; }
  .embedTable td.botMid1 { background: url('/cdf/images/examples-shadow-bm.png') no-repeat top left; }
  .embedTable td.botMid2 { background: url('/cdf/images/examples-shadow-bm.png') no-repeat top center; }
  .embedTable td.botMid3 { background: url('/cdf/images/examples-shadow-bm.png') no-repeat top right; }
  .embedTable td.botRight { width: 25px; height: 30px; background: url('/cdf/images/examples-shadow-br.png') no-repeat top; }

  /* embed */
  .embedTable td.embedCell { width: 500px; padding: 0; }
    .embedCell div { background: #fff; border: 1px solid #aaa; text-align: center; }
      .embedCell div div { border: none; }
    .embedCell img.top { margin: 0 0 10px;}
    .embedCell img.bot { margin: 10px 0 0; display: block; }

    /* interact now*/
    .embedCell div#embedOuter { position: relative; }
      .embedCell #interactnow { display: block; position: absolute; top: 1px; width: 498px; background: url('/cdf/images/examples-interactnow_off.png') no-repeat center center; }
        .embedCell #interactnow:hover { background: url('/cdf/images/examples-interactnow_on.png') no-repeat center center; }
        body.uses1 .embedCell #interactnow { height: 754px; }
        body.uses2 .embedCell #interactnow { height: 787px; left: 0; }
        body.uses3 .embedCell #interactnow { height: 404px; }
        body.uses4 .embedCell #interactnow { height: 798px; left: 0; }
        body.uses5 .embedCell #interactnow { height: 928px; left: 0; }
        body.uses6 .embedCell #interactnow { height: 935px; left: 0; }
        body.uses7 .embedCell #interactnow { height: 650px; left: 0; }
        body.uses8 .embedCell #interactnow { height: 707px; }
        body.uses9 .embedCell #interactnow { height: 802px; }



/* ##################################### */
/* #              FOOTER               # */
/* ##################################### */
div#exampleBotnav { width: 934px; margin: 40px 6px 0 0; padding-top: 2px; border-top: 1px solid #ccc; font-size: 16px; line-height: 19px; font-weight: bold; }
  div#exampleBotnav a { display: block; margin-bottom: 25px; }
  #exampleBotnav a.prevLink { float: left; }
  #exampleBotnav a.nextLink { float: right; }

div#exampleFooter { width: 947px; }
  #exampleFooter .podContainer { margin-bottom: 0; }
  #exampleFooter #infoPod { float: left; width: 612px; }
    #infoPod .podBG { padding: 14px 15px; }
    #infoPod img { float: left; margin-top: 7px; }
    #infoPod table { float: right; }
    #infoPod div.largebutton { margin: 0; }
      #infoPod div.largebutton span.largebuttonRight { font-size: 14px; }
  #exampleFooter #contactPod { float: right; width: 320px; }
    #contactPod .podBG { padding: 12px 15px; }
    #contactPod img { float: left; }



/* ##################################### */
/* #                ETC                # */
/* ##################################### */

body#uses div.hide { display: none; }

/* more thickbox overrides (no plugin "view full" link) */
#TB_window h2 { margin: 0; padding: 0; font-size: 18px; line-height: 22px; text-align: center; }

#TB_window .largebutton { margin: 20px 0 0 !important; }
#TB_window div.largebutton a { color: #fff !important; line-height: 33px; }
#TB_window div.largebutton span.largebuttonRight { width: 300px; text-align: center; }

#TB_window .giantbutton { margin: 15px 0 0 !important; }
#TB_window div.giantbutton span.giantbuttonLeft { width: 10px; }
#TB_window div.giantbutton span.giantbuttonRight { width: 300px; font-size:16px; padding-right: 10px; text-align: center; }
  #TB_window div.giantbutton span.giantbuttonRight a, #TB_window div.giantbutton span.giantbuttonRight a:link, #TB_window div.giantbutton span.giantbuttonRight a:visited, #TB_window div.giantbutton span.giantbuttonRight a:hover, #TB_window div.giantbutton span.giantbuttonRight a:visited:hover { display: inline-block; line-height: 20px; margin-top: 7px; color: #fff; }