CSSTestPageComplete

/*
Theme Name: [insert your first name here]'s Custom Theme - Sample
Author: [insert your name here]
Description: This is the HTML for the theme I used while attending the course Customizing Themes in WordPress.

The styles are grouped into the following sections:
   Section 1: Document defaults
   Section 2: Header element rules
   Section 3: Content element rules
   Section 4: Footer element rules
   Section 5: Responsive rules
   Section 6: Print rules

Version: 1.0
*/
      /* ============================ */
      /* Section 1: Document defaults */
      /* ============================ */
      body {margin: 0 10%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;}

      /* =============================== */
      /* Section 2: Header element rules */
      /* =============================== */
      header {border: dashed #666699 1px }
      header h1 {margin: 1em 0;text-align: center;}
      header p#tag-line {margin-bottom: 1em; font-style: italics; text-align: center; }
      #global {background-color: #9999CC;text-align: right;overflow: auto;}
      #searchform {display: inline; float: right; }
      #cardinal {background-color: #669999;}
      /* Making the cardinal navigation list horizontal, and drop-down */
      #cardinal {background-color: #000; display: block; /*float: left;*/ margin: 0 auto; width: 100%; height: 40px; font-size: 90%;}
      #cardinal ul, ul { list-style: none; margin: 0; padding: 0; }
      #cardinal li {float: left; position: relative;}
      #cardinal ul ul {display: none;position: absolute;top: 40px;left: 1em;float: left;width: 180px;opacity: 0.95;z-index: 99999;}
      #cardinal a {color: #aaa; display: block; line-height: 40px; padding: 0 10px; text-decoration: none; font-weight: normal;}
      #cardinal ul li:hover > ul { display: block;}
      #cardinal li:hover > a,
      #cardinal ul ul :hover > a {background-color: #333; color: #fff;}
      #cardinal ul ul a {background-color: #333; line-height: 1em; padding: auto 10px; width: 160px; height: 40px;}
      #cardinal ul li.current_page_item > a,
      #cardinal ul li.current-menu-ancestor > a,
      #cardinal ul li.current-menu-item > a,
      #cardinal ul li.current-menu-parent > a {color: #fff;}

      /* ================================ */
      /* Section 3: Content element rules */
      /* ================================ */
      #main {border: solid black 1px;padding: 2px;overflow: auto;}
      article {border: solid #000099 1px;overflow: auto;}
      #leftbar {border: dotted #CCCC99 1px;font-size: 90%;}
      #rightbar {border: dotted #CCCC99 1px;font-size: 90%;}
      #breadcrumbs {border-bottom: solid #666699 1px;font-size: 90%;}
      #pagefoot {margin: 1em 2em;border-width: 0;border-top: solid #666699 1px;font-size: 90%;overflow: auto;clear: both;}
      /* Making the sidebar thing happen */
      article {margin: 0 200px;}
      #leftbar {width: 198px; float: left;}
      #rightbar {width: 198px; float: right;}

      /* === Text styles === */
      #main ul {list-style-type: initial;margin: 2em;}
      /* === Wordpress-isms === */
      .current_page_item, .current-page-ancestor, .current-menu-item {font-weight: bold;color: #330000;} /* Mainly to highlight the section in cardinal navigation */
      .alignright {float: right;}
      .alignleft {float: left;}
      .wp-caption {
        border: solid black 1px;
        margin: 2em auto;
        padding: 15px;
        text-align: center;
        border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; /* this is an example of how to make rounded corners, the extra rules are for older browsers that do it own their own. */
       }
       .wp-caption-text {font-style: italic;font-size: 90%;}

      /* =============================== */
      /* Section 4: Footer element rules */
      /* =============================== */
      footer {border: dotted #003399 1px;font-size: 80%;}
      .TopRow {background-color: #999999;clear: both;overflow: auto;}
      .Centre {text-align: center;}
      .BottomRow {background-color: black; color: white;text-align: center;}
      /* making the 3 column thing happen */
      .Centre {margin: 0 200px;}
      .LeftSide {width: 198px; float: left;}
      .RightSide {width: 198px; float: right;}

      /* =========================== */
      /* Section 5: Responsive rules */
      /* =========================== */
      @media (min-width: 1100px) {
      /* what to do for wide screens */
      }
      @media (min-width: 600px) and (max-width: 1099px) {
      /* what to do for medium screens */
      }
      @media (max-width: 599px) {
      /* what to do for small screens */
      body {margin: 0; }
      article, .Centre {margin: 0;}
      #leftbar, #rightbar, .LeftSide, .RightSide {float: none;width: 100%; }
      }

      /* ====================== */
      /* Section 6: Print rules */
      /* ====================== */
      @media print {
         body {font-size: 10pt; margin: 0; }
         nav, aside#rightbar {display: none;}
         article {margin: 0;}
      }