/* CSS Document */


/* CONTENT DIVS BY ALPHA-ORDER */

   /* Set the box background color to the same color as the circle in the 
   image. Set the width, float and margins as desired. */
#roundedbox {background: #F2E8C7; float: left; margin: 0 10px; width: 440px; color: #333333; }
   /* Set the top and bottom height to be the same as the radius of the 
   circle (1/2 the size of the image). Set the font-size and line height
   to a sufficiently small number that they won't affect the box. */
div#roundedbox #top, div#roundedbox #bottom {font-size: 1px; height: 16px; line-height: 1px; }
   /* Now, we'll do the four corners. Set each of them to the same width 
   and height as the radius of the circle. For the top left and bottom 
   left, set them to float: left. Set the top right and bottom right to
   float: right. Use the same background image for all four corners and
   set them all to no-repeat. Set the background position to the same as
   the position of the corner. */
div#roundedbox #topleft {background-image: url(../images/bg_corner.png); background-repeat: no-repeat top left; float: left; height: 16px; width: 16px; }
div#roundedbox #topright {background: url(../images/bg_corner.png) no-repeat top right; float: right; height: 16px; width: 16px; }
div#roundedbox #bottomleft {background: url(../images/bg_corner.png) no-repeat bottom left; float: left; height: 16px; width: 16px; }
div#roundedbox #bottomright {background: url(../images/bg_corner.png) no-repeat bottom right; float: right; height: 16px; width: 16px; }
   /* Now, well add one more box for the content to keep from having
   too much space at the top and bottom and to give it just a little
   bit of left and right padding. Given our 16 pixel radius corners, 
   we're using -1em for the top and bottom margins. That will allow 
   the content to expand into the top and bottom <div> tags. We also 
   add 1em of left and right margin to keep the content from butting
   right up against the edges. Adjust these figures to give you a
   result that you find pleasing. */
div#roundedbox #boxcontent {margin: 10px; text-align: left; min-height: 30em; }
div#boxcontent a {color: #94DE6E; text-decoration: none; font-weight: bold; }
div#boxcontent a:visited {color: #EBAD14; }
div#boxcontent a:hover {text-decoration: underline; }
div#boxcontent a:active {color: #0A94D6; text-decoration: underline; }
   /* Finally, well give paragraphs in the box a little smaller top 
   and bottom margin just to keep things tight. */
div#roundedbox h2 {font-size: 1.05em; font-weight: bold; margin: 3px 0; }
div#roundedbox h3 {font-size: .95em; font-weight: bold; margin: 5px 0 0 0; }
div#roundedbox p {margin: 0 0 .5em 0; font-size: .85em; }
div#roundedbox dt {font-weight: bold; font-size: .95em; margin: 5px 0 0 0; }
div#roundedbox dd {margin: 0 0 10px 0; font-size: .80em; }

/* SIDEBAR DIVS BY ALPHA-ORDER */
   /* Set the box background color to the same color as the circle in the 
   image. Set the width, float and margins as desired. */
#sidebarbox{background: #F2E8C7; margin: 0; width: 200px; background-image: url(../images/bg_sidebar.png); background-repeat: repeat-x; background-position: bottom; color: #333333;}
   /* Set the top and bottom height to be the same as the radius of the 
   circle (1/2 the size of the image). Set the font-size and line height
   to a sufficiently small number that they won't affect the box. */
div#sidebarbox #top, div#sidebarbox #bottom {font-size: 1px; height: 16px; line-height: 1px; }
   /* Now, we'll do the four corners. Set each of them to the same width 
   and height as the radius of the circle. For the top left and bottom 
   left, set them to float: left. Set the top right and bottom right to
   float: right. Use the same background image for all four corners and
   set them all to no-repeat. Set the background position to the same as
   the position of the corner. */
div#sidebarbox #topleft {background-image: url(../images/bg_corner.png); background-repeat: no-repeat top left; float: left; height: 16px; width: 16px; }
div#sidebarbox #topright {background: url(../images/bg_corner.png) no-repeat top right; float: right; height: 16px; width: 16px; }
div#sidebarbox #bottomleft {background: url(../images/bg_cornerorange.png) no-repeat bottom left; float: left; height: 16px; width: 16px; }
div#sidebarbox #bottomright {background: url(../images/bg_cornerorange.png) no-repeat bottom right; float: right; height: 16px; width: 16px; }
   /* Now, well add one more box for the content to keep from having
   too much space at the top and bottom and to give it just a little
   bit of left and right padding. Given our 16 pixel radius corners, 
   we're using -1em for the top and bottom margins. That will allow 
   the content to expand into the top and bottom <div> tags. We also 
   add 1em of left and right margin to keep the content from butting
   right up against the edges. Adjust these figures to give you a
   result that you find pleasing. */
div#sidebarbox #sidebarcontent {margin: 20px; min-height: 30em; text-align: left; }
div#sidebarcontent a {color: #333333; text-decoration: none; font-weight: bold; font-size: .75em; }
div#sidebarcontent a:visited {color: #333333; }
div#sidebarcontent a:hover {text-decoration: underline; color: #336600; }
div#sidebarcontent a:active {color: #333333; text-decoration: underline; }
   /* Finally, well give paragraphs in the box a little smaller top 
   and bottom margin just to keep things tight. */
div#sidebarbox h2 {font-size: 1.05em; font-weight: bold; margin: 3px 0; }
div#sidebarbox h3 {font-size: .95em; font-weight: bold; margin: 5px 0 0 0; }
div#sidebarbox p {margin: 0 0 .5em 0; font-size: .85em; }