/* the fons, margins, color, etc of everything */
#html, body { font: 13px trebuchet ms; margin: 0; padding: 0; color: #666; height: 100%; }

/* what holds everything in place */
#jipiaocccontainer { background: #fff; width: 820px; margin: 10px auto; padding: 2px; }

/* the banner image holder */
#jipiaoccbanner { width: 819px; background: url(bgb.jpg) top left no-repeat;  margin: 0 0 3px 0; position: relative; height: 150px; color: #fff; }

/* the top navigation bar */
#jipiaoccnav { background: #fff; width: 810px; background: #fff; text-align: right; padding: 5px; margin: 0 0 5px 0; }

/* where all the main text is stored */
#jipiaocccontent { height: 100%; float: left; background: #fff; padding: 5px; width: 550px; margin-bottom: 20px;  }

/* the right bar */
#jipiaoccsidebar { float: right; width: 230px; border-left: 1px dotted #ccc; padding: 5px 0 0 10px; margin: 10px 0 10px 15px; background: url(blockbg.jpg) repeat-x;}

/* the links in the banner image */
#jipiaocctopbar { text-align: right; color: #666; padding: 5px; margin-right: 55px; }

/* footer */
#jipiaoccfooter { clear: both; background: url(images/blackbg.gif) repeat; border-top: 4px solid #666;  text-align: center; padding-bottom: 5px;  } 

/* link styling */
#jipiaocccontent a { color: #87af7b; text-decoration: none; } #jipiaocccontent a:hover { text-decoration: underline; }
#jipiaocctopbar a { color: #87af7b; text-decoration: none; } #jipiaocctopbar a:hover { text-decoration: underline; }
#jipiaoccnav a { color: #666; font-weight: bold; text-decoration: none; } #jipiaoccnav a:hover { text-decoration: underline; }
#jipiaocctopbar a { color: #666; font-weight: bold; text-decoration: none; } #jipiaocctopbar a:hover { text-decoration: underline; }
#jipiaoccfooter a { color: #666; font-weight: bold; text-decoration: none; } #jipiaoccfooter a:hover { text-decoration: underline; }
#jipiaoccsidebar a { display: block; color: #666; text-decoration: none; padding: 5px 0 5px 0;} #jipiaoccsidebar a:hover { background: #deebd2; color: #666; }

/* extra attributes */
.jipiaoccheadline { font-size: 18px; margin: 3px 0 3px 0; }
.jipiaoccmeta { background: url(sl/images/bg.gif); border-top: 1px solid #666; text-align: right; color: #666; text-transform: uppercase; letter-spacing: 2px; }
.jipiaoccimageright { float: right; border: 1px solid #ccc; padding: 3px; margin: 3px 3px 0 7px; } .jipiaoccimageright:hover { border: 1px solid #666; }
.jipiaoccimageleft { float: left; border: 1px solid #ccc; padding: 3px; margin: 3px 10px 0 0px; }  .jipiaoccimageleft:hover { border: 1px solid #666; }
.jipiaoccsideimage { border: 1px solid #ccc; padding: 3px; margin: 4px; margin: 10px 0 5px 0; } .jipiaoccsideimage:hover { border: 1px solid #666; }
#jipiaocctopbar ul { margin: 0; padding: 0; } #jipiaocctopbar li { list-style: none;  width: auto;  }
#jipiaoccsidebar ul { margin: 5px 0 15px 20px; padding: 0; border-top: 1px solid #ccc; } #jipiaoccsidebar li { margin: 0; padding: 0; text-align: center; list-style-type: none;  border-bottom: 1px solid #ccc; }
#jipiaocccontent ul { margin: 5px 0 10px 30px; padding: 0; border-top: 1px solid #ccc; width: 320px; } #jipiaocccontent li { display: block; text-align: left; margin: 0; padding: 0 0 0 10px; list-style-type: none; border-bottom: 1px solid #ccc; }
#jipiaocccontent li:hover { background: #deebd2; }
strong { color: #87af7b; background: inherit; }
blockquote { background: url(blockbg.jpg) repeat-x; color: #666; padding: 5px; border: 1px solid #ccc; margin: 5px 0 15px 0px; }
#jipiaoccbanner #jp { position: absolute; letter-spacing: -2px; font-size: 32px; top: 35px; left: 20px; }
#jipiaocctopbar #cc { margin: 0 0 3px 0; padding: 0; }