/****************************************************************
  COMMON GRID ELEMENTS
****************************************************************/

body {
  background:url("images/bg_pattern.gif") 0 0 repeat;
  color:#000000;
  font:100% Verdana, Tahoma, sans-serif;
  margin:0;
  min-width:700px;
  padding:0;
  text-align:center;
}

#root {
  text-align:left;
  margin: 10px;
  border-top:4px solid #c2cdad;
}

/****************************************************************
  SUBPAGE SPECIFIC ELEMENTS
****************************************************************/
/*
  Header
*/
#header {
  background:#fff;
  position: relative;
  padding: 8px 17px 8px;
  border-bottom: 1px solid #e8e8e8;
  border-left:4px solid #c2cdad;
  border-right:4px solid #c2cdad;
}
#header:after {
  content: "."; 
  display: block; 
  height:0; 
  clear: both; 
  visibility: hidden;
}
#header {
  display:block;
}

  #header h1 {
    display:block;
    /* TODO - put this back in sensibly */
    background: url("images/logo_small.gif") 0 0 no-repeat;
    position:absolute;
    right: 20px;
    top:15px;
    margin: 0;
    padding: 0;
  }
    
    #header h1 a {
      display:block;
      height:20px;
      width:19px;
    }
      #header h1 a span {
        display:none;
      }

  #header h2 {
    color:#d13123;
    font:175% Georgia, "Times New Roman", Times, serif;
    margin:0 18px 0 0;
    padding:0;
    float: left;
  }
    #header h2 a {
      color:#d13123;
      text-decoration: none;
    }
    #header h2 a:hover {
      text-decoration: none;
    }
  #header h3 {
    color: #ba7112;
    font:175% Georgia, "Times New Roman", Times, serif;
    border-left:2px solid #ba7112;
    margin:0;
    padding:0 0 0 20px;
    float: left;
  }
  #header p.premium {
    float: left;
    margin:5px 10px 0 -3px;
    padding:0;
    background:url("images/button_premium_small.gif") 0 0 no-repeat;
    width:66px;
    height:25px;
  }
    #header p.premium a {
      display:block;
      height:25px;
    }
    #header p.premium a span {
      display:none;
    }

  /* search-box */
  .search-box {
    position: absolute;
    float: right;
    text-align: right;
    right: 11px;
    top: 13px;
    width: 80px;
  }
    .search-box form {
      margin:0;
      padding:0;
    }
    .search-box form div .input-search {
      height: 21px;
      heigh\t: 15px;
      width: 80px;
      widt\h: 76px;
      padding: 2px;
      margin: 0 1px 0 0;
      vertical-align: middle;
      border: 1px solid #838383;
      background: #fff;
      font: normal 68.75% Verdana, Arial, "Times New Roman", Times, serif;
      color: #666;
    }
    .search-box form div .input-search:focus {
      background: #fffacc;
    }

/*
  Menu
*/
#menu {
  background: #f6f6f6;
  border-bottom: 1px solid #c5d89f;
}
  #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #menu ul:after {
    content: "."; 
    display: block; 
    height:0; 
    clear: both; 
    visibility: hidden;
  }
  #menu ul {
    display:block;
  }
    #menu ul li {
      margin: 0;
      padding: 0;
      float: left;
      background: url("images/bg_menu.gif") 100% 4px no-repeat;
    }
    #menu ul li a,
    #menu ul li span {
      text-decoration: none;
      color: #646464;
      font: normal 68.75% Tahoma, Verdana, Arial, "Times New Roman", Times, serif;
      padding:7px 16px 8px 12px;
      display: block;
    }
    #menu ul li span {
      text-decoration: underline;
      color:#000000;
    }
    #menu ul li a:hover,
    #menu ul li a:hover span {
      color:#000000;
      text-decoration: underline;
      cursor:pointer;cursor:hand;
    }
    /* first tab */
    #menu ul li.first a,
    #menu ul li.first span {
      padding-left:22px;
    }
    #menu ul li.first a span {
      padding-left:0;
    }
    /* last tab */
    #menu ul li.last a,
    #menu ul li.last span {
      padding-right:30px;
    }
      #menu ul li.last a span {
        padding-right:0;
      }
    #menu ul li a span {
      font-size: 100%;
      background: none;
      padding:0;
      text-decoration: none;
      color: #646464;
    }

/*
  wrapper-functional
*/
.wrapper-functional {
  padding: 7px 17px 7px;
  background: #c2cdad;
  position: relative;
  border-left:4px solid #c2cdad;
  border-right:4px solid #c2cdad;
}
.wrapper-functional:after {
  content: "."; 
  display: block; 
  height:0; 
  clear: both; 
  visibility: hidden;
}
.wrapper-functional {
  display:block;
}

  /* sub-menu */
  .sub-menu {
    padding: 0 215px 0 0;
  }
    .sub-menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .sub-menu ul:after {
      content: "."; 
      display: block; 
      height:0; 
      clear: both; 
      visibility: hidden;
    }
    .sub-menu ul {
      display:block;
    }
      .sub-menu ul li {
        margin: 0 3px 0 0;
        padding: 0;
        float: left;
      }
      .sub-menu ul li a,
      .sub-menu ul li span {
        text-decoration: none;
        color: #fff;
        font: normal 75% Verdana, Arial, "Times New Roman", Times, serif;
        padding:3px 10px 4px;
        display: block;
        background: #0367ad;
        cursor:pointer;cursor:hand;
        border:2px solid #c2cdad;
      }
      .sub-menu ul li span {
        color:#fff;
        background: #889471;
      }
      .sub-menu ul li a:hover,
      .sub-menu ul li.active a{
        text-decoration: none;
        border:2px solid #fffdc5;
      }
      .sub-menu ul li a span {
        font-size: 100%;
        background: none;
        border:none;
        padding:0;
        text-decoration: none;
        color: #fff;
      }
    /* sub-menu-2 */
    .sub-menu-2 {
      position: absolute;
      top: 0;
      right:0;
      width: 215px;
      widt\h: 211px;
      padding:11px 4px 0 0;
      text-align: right;
      font: normal 68.75% Verdana, Arial, "Times New Roman", Times, serif;
    }
    .sub-menu-2 a {
      background: url("images/arrow1.gif") 0 50% no-repeat;
      padding:0 0 0 10px;
      margin:0 10px 0 0;
      color:#0367ad;
    }

/*
  last-modified
*/
.last-modified {
  border-bottom: 1px solid #c5d89f;
  color: #606060;
  padding: 5px 23px;
  font-size: 62.5%;
}
  .last-modified p a {
    color: #606060;
  }

/*
  wrapper-information
*/
.wrapper-information {
  color:#7a7a7a;
}
  .wrapper-information table {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    background:#e3e3e3;
  }
  .wrapper-information table td {
    background:#fff;
    vertical-align:top;
    width:33%;
    font:normal 68.75% Verdana, Tahoma, sans-serif;
  }
  .wrapper-information #page-information,
  .wrapper-information #wiki-information{
    background:#ffffff;
  }

  .wrapper-information #wiki-premium {  
    background:#FFFDDF; 
   }
  .wrapper-information a {     
    color:#7f7f7f;  
   } 

    .wrapper-information h3 {
      font-size:118.18%;
      font-weight:bold;
      margin:0 0 12px;
      padding:10px 11px 9px;
      border-bottom:1px solid #cfcfcf;
    }
    .wrapper-information #wiki-premium h3 {
      font:normal 163.64% Georgia, Verdana, Tahoma, sans-serif;
      color:#d13123;
      margin:0 17px 12px;
      padding:7px 0 7px;
      border-bottom:1px solid #9d9d9d;
    }
    .wrapper-information p {
      margin:0 17px 15px;
      padding:0;
      line-height:1.5em;
    }
    .wrapper-information p.learn-more {
      font-weight:bold;
      text-align:right;
      margin:0 17px 10px;
    }
    .wrapper-information #wiki-premium {
      color:#2d2d2d;
    }
    .wrapper-information ul {
      margin:0 17px 15px;
      padding:0;
      line-height:1.5em;
    }
      .wrapper-information ul li {
        list-style:none;
        margin:0 0 4px;
        padding:0 0 0 15px;
        background: url("images/arrow1.gif") 0 7px no-repeat;
      }
    .wrapper-information ul.page li  {
      padding:0 0 0 20px;
      background: url("images/icon_page.gif") 0 3px no-repeat;
    }


/*
  Footer
*/
#footer {
  padding: 8px 0 9px;
  font-size: 62.5%;
  color: #3a3a3a;
}
#footer:after {
  content: "."; 
  display: block; 
  height:0; 
  clear: both; 
  visibility: hidden;
}

#footer {
  display:block;
}

#footer p.f-menu {
  text-align:right;
}
#footer p.f-menu a {
  text-decoration:none; 
  padding:0 0 0 8px;
  background: url("images/arrow1.gif") 0 50% no-repeat;
  color: #0367ad;
  margin: 0 12px 0 0;
}
#footer p.f-menu a.rss {
  margin: 0 6px 0 0;
}
  #footer p.f-menu img {
    margin:-2px 0 0 8px;
    vertical-align:middle;
    position:relative;
  }


/*
  Content
*/

#displaycontent {
  background:#eaf3d9;
  padding: 8px 17px 8px;
  font-size:75%;
  line-height:1.5em;
  border-left:4px solid #c2cdad;
  border-right:4px solid #c2cdad;
}

#displaycontent:after {
  content: " ";
  display: block;
  height:0;
  clear: both;
  visibility: hidden;
}
#displaycontent {
  display:block;
}

/****************************************************************
  COMMON CONTENT ELEMENTS
****************************************************************/

img {
  border:0;
}

/* Links */

a {
  color:#0367ad;
  text-decoration:underline;
}

a:hover {
  text-decoration:none;
}

/* Typography */

p {
  margin:0;
  padding:0;
}
#displaycontent span.underlined {
  text-decoration: underline;
}
#displaycontent span.box {
  border: 1px solid #b8b7b7;
  background:#fbfbfb;
  color: #000000;
  padding:0 4px;
}
#displaycontent h1 {
  color: #000000;
  font:2em Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  padding: 0;
  margin: 0.67em 0;
}
#displaycontent h2 {
  color: #63534c;
  font:1.5em Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  padding: 0;
  margin: 0.83em 0;
}
#displaycontent h3 {
  color: #7d6c64;
  font:1.17em Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  padding: 0;
  margin: 1em 0;
}
#displaycontent h4 {
  color: #7d6c64;
  font:1em Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  padding: 0;
  margin: 1.33em 0;
}
#displaycontent h5 {
  color: #7d6c64;
  font:0.83em Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  padding: 0;
  margin: 1.67em 0;
}
#displaycontent h6 {
  color: #7d6c64;
  font:0.67em Georgia, "Times New Roman", Times, serif;
  font-weight:bold;
  padding: 0;
  margin: 2.33em 0;
}
#displaycontent p {
  padding: 0;
  margin: 0 0 16px;
}
#displaycontent blockquote {
  background:#fbfbfb;
  border: 1px solid #b8b7b7;
  color: #555555;
  width: 85%;
  margin: 0 auto 22px;
  padding: 14px 18px 14px;
}

/* Lists */
#displaycontent ul {
  margin-left: 16px;
  padding: 0;
  list-style: none;
}
  #displaycontent ul li {
    margin: 0;
    padding: 0 0 0 12px;
    background: url("images/dots1.gif") 0 8px no-repeat;
  }


/****************************************************************
  CONTENT SPECIFIC ELEMENTS
****************************************************************/

/*
  SandBox
*/

#displaycontent p.random-text {
  margin: 0 0 9px;
}

#displaycontent ul.examples-elements {
  margin: 0;
  padding: 0;
}
  #displaycontent ul.examples-elements li {
    margin: 0 0 1px;
    padding: 0;
    background: none;
  }
    #displaycontent ul.examples-elements ul {
      margin: 10px 0 20px 12px;
      padding: 0;
      list-style: none;
    }
      #displaycontent ul.examples-elements ul li {
        margin: 0;
        padding: 0 0 0 12px;
        background: url("images/dots1.gif") 0 8px no-repeat;
      }


#displaycontent ul.gallery {
  margin:9px 0 0;
  padding: 0;
}
#displaycontent ul.gallery:after {
  content: "."; 
  display: block; 
  height:0; 
  clear: both; 
  visibility: hidden;
}
#displaycontent ul.gallery {
  display:block;
}
  #displaycontent ul.gallery li {
    margin:0;
    padding: 0;
    background: none;
    float: left;
    margin: 0 25px 14px 0;
  }
  #displaycontent ul.gallery li a {
    border: 3px solid #889176;
    display: block;
  }
  #displaycontent ul.gallery li a:hover {
    border: 3px solid #000000;
  }
    #displaycontent ul.gallery li a img {
      display: block;
    }

#SideBar {
  border-right: 2px solid #a6b190;
  border-bottom: 2px solid #a6b190;
  border-top:1px solid #a6b190;
  border-left:1px solid #a6b190;
  background-color: #c2cdad;
  float: right;
  clear:both; 
  width: 200px;
  padding:3px;
  margin:10px 0px 0 20px;
  font-size:0.8em;
  color: #5a614c;
}
  .SideBarTitle {
    border-bottom: 1px solid #a6b190;
    color:#5a614c;
    font-size:1.5em;
    font-weight:bold;
    text-align:center;
    padding:2px 0;
  }

    .SideBarTitle a {
      color:#5a614c;
      text-decoration:none;
    }

.toc { 
  background-color:#c2cdad;
  border:1px solid #889176; 
  float:left; 
  padding:0 10px 0 30px;
  margin-bottom: 10px;
}
  .toc a { 
    color:#5a614c; 
    text-decoration:none; 
  }
  .toc a:hover {
    text-decoration:underline;
  }
  .toc ol {
    color:#5a614c; 
    font-weight:bold; 
    margin:0 0 0 10px; 
    padding:0; 
  }
  .toc li ol { 
    font-weight:normal; 
  }
  .toc li li ol { 
    font-size:80% 
  }

#displaycontent table {
  border-collapse:collapse;
  margin:10px 0;
}

  #displaycontent table th,
  #displaycontent table td {
    background:#c2cdad; 
    border:1px solid #889176;
    padding:2px 4px;
  }

  #displaycontent table th {
    background:#889176;
    color:#fff;
    font-weight: normal;
    text-align: center;
  }
  #displaycontent table caption {
    font-size: 83.33%;
    margin:0;
    padding:0;
    text-align: right;
    color: #63534c;
  }

/*
  Settings - toolbox
*/
#settings {
  color: #747474;
  font:11px Verdana, serif;
} 
  #settings h3 {
    color: #494949;
    font:12px Verdana, serif;
    font-weight:normal;
    padding: 0 0 6px;
    margin:0 0 7px;
    border-bottom:1px solid #c2cdad;
    position:relative;
  }
  #settings .active h3 {
    color: #0367ad;
  }
  #settings-content input, label {
    vertical-align:middle;
  }
  #settings-content input.text {
    font:11px Verdana, serif;
    color:#747474;
    border:1px solid #a5acb2;
    background:#ffffff;
    height:20px;
    heigh\t:16px;
    padding:4px 0 0 5px;
  }
  #settings-content a {
    color: #494949;
  }


/* settings-menu */
#settings-menu {
  float: left;
  width:173px;
  widt\h:141px;
  border:1px solid #c2cdad;
  background:#fff;
  padding:9px 15px 0;
}
  #settings-menu h3 {
    color: #232323;
    font-weight:bold;
    margin:0 0 10px;
  }
  #settings-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
    #settings-menu ul li {
    margin: 0 0 12px;
    padding: 0;
    background:none;
    color:#7c7c7c;
    font-weight:bold;
    }
    #settings-menu ul li a {
    font-weight:normal;
    }

/* settings-content */
#settings-content {
  margin:0 0 0 173px;
}
  #settings-content .step {
    border:1px solid #c2cdad;
    background:#fff;
    padding:9px 15px 4px;
    margin: 0 0 10px 14px;
    position:relative;
  }
  #settings-content .active {
    border:3px solid #fffdc5;
    background:#fff;
    padding:7px 13px 2px;
    margin: 0 0 10px 14px;
  }
  
  #settings-content .step p {
    padding:0;
    margin: 0 0 18px;
  }
    /* add-tags */
    #settings-content .step h3 a.help {
      position:absolute;
      right:3px;
      top:0;
      background: url("images/icon_help.gif") 0 0 no-repeat;
      width:15px;
      height:15px;
    }
    #settings-content .step h3 a:hover.help {
      background-position:0 -30px;
    }
      #settings-content .step h3 a.help span {
        display:none;
      }
    #settings-content .step form.add-tags {
      background: url("images/bg_line.gif") 50% 0 repeat-y;
      margin: 0 0 19px;
      padding:0;
    }
    #settings-content .step form.add-tags:after {
      content: "."; 
      /*display: block;*/ 
      height:0; 
      clear: both; 
      visibility: hidden;
    }
    #settings-content .step form.add-tags {
      display:block;
    }

    #settings-content .step form.add-tags .tag {
      width:50%;
      float:left;
    }
    #settings-content .step form.add-tags .tag label {
      font-weight:bold;
      width:13%;
      float:left;
      margin:4px 0 0;
    }
    #settings-content .step form.add-tags .tag input.text {
      width:80%;
    }
    #settings-content .step form.add-tags .tag p.example {
      font-size:10px;
      width:80%;
      margin:3px 0 8px 13%;
    }
    #settings-content .step form.add-tags .tag .row-submit {
      text-align:center;
    }
      #settings-content .step form.add-tags .tag .row-submit #submit-1 {
        margin:0 auto;
        padding:0;
      }
    #settings-content .step form.add-tags .select {
      width:50%;
      float:left;
    }
      #settings-content .step form.add-tags .select div {
        margin: 0 0 0 7%;
        background:#fffdc5;
        padding: 12px;

      }
      #settings-content .step form.add-tags .select div:after {
        content: "."; 
        display: block;
        height:0; 
        clear: both; 
        visibility: hidden;
      }
      #settings-content .step form.add-tags .select div {
        display:block;
      }
        #settings-content .step form.add-tags .select ul {
          width:50%;
          float:left;
          margin: 0 0 0 0;
        }
          #settings-content .step form.add-tags .select ul li {
            font-size:10px;
            margin:0 10px 2px 0;
            padding:0;
            background:none;
          }
            #settings-content .step form.add-tags .select ul li a {
              color:#272727;
              text-decoration:none;
              padding: 0 19px 0 0;
            }
            #settings-content .step form.add-tags .select ul li a:hover {
              text-decoration:none;
            }
    /* submit-wiki */
    #settings-content .step form.submit-wiki {
      text-align:center;
      margin: 17px 0 18px;
    }
      #settings-content .step form.submit-wiki label {
        font-weight:bold;
        margin:0 6px 0 0;
      }
      #settings-content .step form.submit-wiki input.text {
        width:40%;
        margin:0 14px 0 0;
      }
    /* invite-others */
    #settings-content .step p.invite-others {
      margin: 15px 0 14px;
    }
      #settings-content .step p.invite-others a {
        color:#515151;
        padding:0 0 0 8px;
        background: url("images/arrow1.gif") 0 50% no-repeat;
        font-weight:bold;
        margin: 0 0 0 6px;
      }
    /* spread-the-word */
    #settings-content .step table.spread-the-word {
      margin: 0 0 10px;
      width:100%;
      border:none;
    }
      #settings-content .step table.spread-the-word th {
        background: none;
        color:#747474;
        font-weight:bold;
        text-align: center;
        border:none;
        padding:0 12px 4px;
        font-size:11px;
      }
      #settings-content .step table.spread-the-word td {
        background: #f1f2f4;
        color:#444444;
        text-align: center;
        border:none;
        border-bottom:1px solid #ffffff;
        padding:8px 12px;
        vertical-align:middle;
        font-size:11px;
      }
        #settings-content .step table.spread-the-word td blockquote {
          background: #ffffff;
          color:#444444;
          border:1px solid #c0cdab;
          padding:14px 20px;
          margin:0;
          width:auto;
          text-align:left;
        }
        #settings-content .step table.spread-the-word td blockquote p{
          padding:0;
          margin:0;
        }
        #settings-content .step table.spread-the-word td a.visit-pbwiki-1 {
          width:171px;
          height:60px;
          display:block;
          margin:0 auto;
        }
        #settings-content .step table.spread-the-word td a:hover.visit-pbwiki-1 {
          background-position:0 -120px;
        }
        #settings-content .step table.spread-the-word td a.visit-pbwiki-1 span{
          display:none;
        }
        #settings-content .step table.spread-the-word td a.visit-pbwiki-2 {
          width:150px;
          height:150px;
          display:block;
          margin:0 auto;
        }
        #settings-content .step table.spread-the-word td a:hover.visit-pbwiki-2 {
          background-position:0 -300px;
        }
        #settings-content .step table.spread-the-word td a.visit-pbwiki-2 span{
          display:none;
        }
      #settings-content .step table.spread-the-word tr.odd td {
        background: #f7f8f9;
      }
    /* add-more */
    #settings-content .step form.add-more {
      margin: 0 auto 13px;
      text-align:center;
    }
      #settings-content .step form.add-more div.row {
        margin: 0 0 20px 0;
      }
      #settings-content .step form.add-more input.checkbox {
        margin: 0 5px 0 0;
      }
      #settings-content .step form.add-more label {
        color:#444;
        margin: 0 14px 0 0;
        padding:3px 0 3px 25px;
      }
      #settings-content .step form.add-more label.del {
        background: url("/ficons/logo_small_del.icio.us.gif") 0 50% no-repeat;
      }
      #settings-content .step form.add-more label.digg {
        background: url("/ficons/logo_small_digg.gif") 0 50% no-repeat;
      }
      #settings-content .step form.add-more label.reddit {
        background: url("/ficons/logo_small_reddit.gif") 0 50% no-repeat;
        padding:3px 0 3px 22px;
      }
      #settings-content .step form.add-more label.furl {
        background: url("/ficons/logo_small_furl.gif") 0 50% no-repeat;
        padding:3px 0 3px 23px;
      }
      #settings-content .step form.add-more label.spurl {
        background: url("/ficons/logo_small_spurl.gif") 0 50% no-repeat;
        padding:3px 0 3px 21px;
      }
      #settings-content .step form.add-more #submit-3 {
        margin:0 auto;
        padding:0;
      }

    /* saved-step */
    #settings-content .saved-step {
      background:#fffdcb;
      width:100%;
      position:absolute;
      left:0;
      top:0;
      text-align:center;
      -moz-opacity:0.8;
      opacity:0.8;
    }
    #settings-content .saved-step div {
      position:absolute;
      left:50%;
      width:80%;
    }
      #settings-content .saved-step h3 {
        color:#655b2d;
        font-size:14px;
        font-weight:bold;
        padding:2px 0 7px 0;
        border-bottom:1px solid #d0cc9b;
        text-align:center;
      }
      #settings-content .saved-step h3 img {
        margin-right:8px;
        vertical-align:middle;
      }

      #settings-content .saved-step p {
        color:#4b4b4b;
        font-size:12px;
        clear:left;
        margin:0;
      }

.upsell { 
  border:2px solid green;
  background:#ccffcc;
  padding:10px; 
}
.msg { 
  padding-bottom:0px; 
  spacing-bottom:0px;
  margin-bottom: 10px; 
}