Noah Rows style.css

/*
Theme Name: Noah rows
Author: Just a guy
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=Hind:400,700);
      @import url(http://fonts.googleapis.com/css?family=Bangers);
      @import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
      body {
         margin: 55px 0 0 0;
         font-family: Oxygen, Hind, Verdana, Arial, Helvetica, sans-serif;
         font-size: 11pt;
      }

      /* =============================== */
      /* Section 2: Header element rules */
      /* =============================== */
    /* ======================================== */
    /* ===      Top Navigation Styles       === */
    /* ======================================== */
    nav.TopNavigation {
       height: 30px;
       position: fixed;
       top: 0;
       left:0;
       width: 100%;line-height: 1em;padding-top: .2em;
       box-shadow: 0 2px 5px #888888;
       background-color: white;
       z-index: 2;
       }
    nav.TopNavigation h1 {
       display: inline-block; float: left;
       height: 30px;
       margin: 0;
       padding: .1em 0 0 0;
       font-family: Lobster, cursive;
       font-weight: normal;
       font-size: 30px;
       vertical-align: text-bottom;
       /*border: dotted #339999; 1px;*/
       }
    nav.TopNavigation div {display: inline-block;}
    nav.TopNavigation ul {
       display: inline-block;
       margin: 0;
       padding: 0;
       height: 30px;
       /*border: dashed blue 1px;*/
       vertical-align: text-bottom;
       }
    nav.TopNavigation li {
       display: inline-block;
       padding: 0 1em;
       height: 30px;
       /*border: dotted red 1px;*/
       margin: 0;
       /*background-color:white*/
       font-size: 13px;
       }
    nav.TopNavigation ul ul {
        display: none;
        background-color:white;
        z-index: 9999;
        position: absolute;
        top: 30px;
        float: left;
        height: 30px;
        }
    nav.TopNavigation ul li:hover > ul {display: block;border: solid #888888 1px;box-shadow: 0 2px 5px #888888}
    nav.TopNavigation ul ul ul li {display: block;width: 198px;}
    nav.TopNavigation ul ul ul {width: 202px;height: auto;border: solid black 1px;}
    nav.TopNavigation ul ul ul ul {left: 202px;}
    nav.TopNavigation a {display: block;height: 30px;text-decoration: none;color: black;}
    nav.TopNavigation a:hover {text-decoration: underline;color: #D40202;}
    nav.TopNavigationl ul li.current_page_item > a,
    nav.TopNavigation ul li.current-menu-ancestor > a,
    nav.TopNavigation ul li.current-menu-item > a,
    nav.TopNavigationl ul li.current-menu-parent > a {color: #D40202;}
    nav.TopNavigtion form {display: inline-block;height: 30px;margin: 0; }
    .GlobalNav {
       float: right;
       }
      header {
          width:25%;
          float: left;
          height: 50px;
`      }
      header h1 {
         margin: 0;
         line-height: 1em;
         padding: 0;text-align: center;
         font-family: Bangers, "Times New Roman", Times, serif;
         font-size: 2vw;
         /*text-shadow: 8px 8px #B9D9E8;*/
         }
      header p.TagLine {margin: 0; font-style: italic; text-align: center; font-size: .8vw}
      #global {
         width: 25%;
         float: right;
         overflow: auto;
         font-size: .8vw;
         text-align: right;
         height: 50px;
        }
      #global a, #global a:link, #global a:active, #global a:visited {color: black;text-decoration: none; }
      #global a:hover {color: #990033; text-decoration: underline; }
      #searchform {display: inline; float: right; }

      /* ================================ */
      /* Section 3: Content element rules */
      /* ================================ */
      #main {
         padding: 0 1em;
         overflow: auto;
         }
      article {
         overflow: auto;
         padding: 0 1em;
         }
      #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;
         text-align: center;
         }
      /* Making the sidebar thing happen */
      article {margin: 0 2%;}
      #leftbar {width: 198px; float: left;display: none;}
      #rightbar {width: 198px; float: right;display: none;}

      /* === 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: 80%;
         margin-top: 5px;
      }
      footer a, footer a:link, footer a:active, footer a:visited, footer a:hover {color: black; text-decoration: none;}
      footer a:hover {color: #1a2d38; text-decoration: underline;}
     .TopRow {
        background-color: white;
        clear: both;
        overflow: auto;
        box-shadow: 0 -2px 5px #888888;
        }
      .Centre {text-align: center;}
      .BottomRow {
         height: 40px;
         margin-top: 5px;
         background-color: #1a2d38;
         color: white;
         text-align: center;box-shadow: 0 -2px 5px #888888;
      }
      /* making the 3 column thing happen */
      .Centre {margin: 0 200px;}
      .LeftSide {width: 198px; float: left;padding-left: 2em;}
      .RightSide {width: 198px; float: right;padding-left: 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: 50px 0 0 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;}
      }