/*
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 5
   Tutorial Case

   Style Sheet to create rounded boxes
   Author: Chris Van Beek
   Date: 03/12/2009

   Filename:         rounded.css
   Supporting Files: bottom.png, bottomleft.png, bottomright.png, left.png,
                     right.png, top.png, topleft.png, topright.png

*/
table.roundedBox     { border-collapse: collapse; width: 95%; align: center;}

table.roundedBox td {padding: 0px}


table.roundedBox  td.topLeft         {width: 16px; height: 16px}
table.roundedBox  td.topRight       {width: 16px; height: 16px}
table.roundedBox  td.bottomLeft   {width: 16px; height: 16px}
table.roundedBox  td.bottomRight {width: 16px; height: 16px}

table.roundedBox td.top                 {width: auto; height: 16px}
table.roundedBox td.bottom           {width: auto; height: 16px}

table.roundedBox td.left               {width: 16px; height: auto}
table.roundedBox td.right             {width: 16px; height: auto}

.topLeft            {background: url(topleft.png) no-repeat top left}
.topRight          {background: url(topright.png) no-repeat top right}
.bottomLeft      {background: url(bottomleft.png) no-repeat bottom left}
.bottomRight    {background: url(bottomright.png) no-repeat bottom right}

.top                    {background: url(top.png) repeat-x top}
.bottom              {background: url(bottom.png) repeat-x bottom}

.left                  {background: url(left.png) repeat-y left}
.right                {background: url(right.png) repeat-y right}

div.roundedBox   {margin: 5px; position: relative}
div.boxContent   {padding: 16px}


h1.rounded         {font-size: 1.0em; text-align: center;
                     color: white; background-color: rgb(132,52,121);
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     margin: 0px; padding: 0px}

h2.rounded         {font-size: 0.9em; color: black; text-align: left; line-height: 0.95;
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     margin: 10px 0px 0px 0px; padding: 0px}

h3.rounded         {font-size: 0.7em; color: black; text-align: left; 
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     margin: 0px; padding: 0px}

ul.rounded         {font-size: 0.7em; padding: 0px; margin: 0px 0px 0px 5px;
                     list-style-type: none}

ul.rounded li      {padding: 0px; margin: 0px}

ul.rounded li p    {font-size: 1em; margin: 5px 0px 0px 0px; padding: 0px 0px 0px 5px; 
                     border-left: 4px solid rgb(255,202,255)}

p.rounded          {font-size: 0.7em; padding: 0px 0px 0px 5px; margin: 5px 0px 0px 0px;}