WIDELAYOUTallCSS

/*
Theme Name: Warren's Full Width Layout
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 */
      /* ============================ */
      @import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
      @import url(http://fonts.googleapis.com/css?family=Bangers);
      body {margin: 0; font-family: Lato, Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
         background: linear-gradient(white/*#CCE4EE*/, /*#33566B*/#1a2d38);
      }

      /* =============================== */
      /* Section 2: Header element rules */
      /* =============================== */
      header {
         background-image: url(images/SeeThroughWaves.png);
         background-repeat: no-repeat;
         background-size: 100%;
         height: 0;
         padding-bottom: 24.1%;
      }
      header h1 {
         margin: 0;
         padding: 1em 0 0 0;text-align: center;
         font-family: Bangers, "Times New Roman", Times, serif;
         font-size: 5.8vw;
         text-shadow: 8px 8px #B9D9E8;
         }
      header p.TagLine {margin-bottom: 1em; font-style: italic; text-align: center; font-size: 1.8vw}
      #global {background-color: #121E26;text-align: right;overflow: auto;}
      #global a, #global a:link, #global a:active, #global a:visited {color: #E7F1F6;text-decoration: none; }
      #global a:hover {color: white; text-decoration: underline; }
      #searchform {display: inline; float: right; }
      /* Making the cardinal navigation list horizontal, and drop-down */
      #cardinal {background-color: #1a2d38; 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 {
         padding: 0 1em;
         overflow: auto;
         }
      article {
         overflow: auto;
         background-color: white;
         padding: 0 2em;
         }
      #leftbar {font-size: 90%;}
      #rightbar {padding-left: 1em;font-size: 90%;}
      #breadcrumbs {border-bottom: solid #324853 1px;font-size: 90%;}
      #breadcrumbs a, #breadcrumbs a:link, #breadcrumbs a:active, #breadcrumbs a:visited {color: black; text-decoration: none; }
      #breadcrumbs a:hover {color: black; text-decoration: underline;}
      #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 {
         font-size: 85%;
          }
      footer a, footer a:link, footer a:active, footer a:visited, footer a:hover {color: black; text-decoration: none;}
      footer a:hover {color: white; text-decoration: underline;}
      .TopRow {
         background-color: #324853;clear: both;overflow: auto;
         background-image: url(images/darkwavesOil.png);
         background-size: 100%;
         min-height: 10vw;
         border-top: solid #1a2d38 10px;
         }
      .Centre {text-align: center;}
      .BottomRow {background-color: #1a2d38; color: white;text-align: center;padding: 1em 0;}
      /* making the 3 column thing happen */
      .Centre {margin: 0 200px;}
      .LeftSide {width: 198px; float: left;padding-left: 2em;}
      .RightSide {width: 198px; float: right;padding-right: 2em;}

      /* =========================== */
      /* 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;}
      }