/*
     * Some basic styles for the body, header and paragraphs
     */

    body {
      background-color: #f6f6f6;
      color: #777;
      font-family: sans-serif;
      font-size: 1em;
      line-height: 1.4em;
      margin: 0;
    }

    h1 {
      font-size: 1.5em;
      margin: 0;
      padding: 0;
    }

    p { margin: 0 0 1em 0; }

    /*
     * Consistent padding for the masthead and content
     * containers and the menu links (yay, alignment!)
     */

    #masthead { padding-left: 2em; padding-right: 1em; }
	#mastfoot, #content, #menu a { padding: 1em; }

    /*
     * Masthead (contains h1 and menu trigger)
     */

    #masthead, #mastfoot {
      background-color: #ffffff;
      color: #555;
      position: relative;
	}
    #masthead {
      border-bottom: 3px solid #e3e3e3;
	}
    #mastfoot {
      border-top: 3px solid #e3e3e3;
	  font-size: 0.75em;
	}
    #masthead a {
      text-decoration: none;
   }

    /*
     * Style the menu trigger and position it so it will be
     * visible even when the menu is open
     */

    #menu-trigger {
      background-color: #454545;
      border-radius: 0.25em;
      color: #fff;
      font-size: 1.0em;      /*0.75em;*/
      font-weight: normal;
      line-height: 1em;
      margin-top: -1em;
      position: absolute;
      right: 1em;
      text-transform: uppercase;
      top: 50%;
    }
    /* Before enhancement, #menu-trigger behaves as a jump link to
       footer nav. Style link text. */
    #menu-trigger a {
      color: #fff;
      display: block;
      padding: 0.5em;
      text-decoration: none;
    }

    /*
     * Menu styles
     */

    #menu {
      background-color: #ffffff;
      color: #000000;
	  position: absolute;
      right: 5em;
	  font-size: 0.75em;
	  padding-top: 2em;
    }

    #menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    /*
     * Menu links are block so they'll occupy the full
     * width (easier to tap)
     */

    #menu a {
      /* border-bottom: 3px solid #333; */
      color: inherit;
      /* display: block; */
      text-decoration: none;
	  padding: 2.5em;
    }

    /** Media queries! **/
    @media screen and (min-width: 20em) {
      #menu-trigger {
        display : none;
      }
	}
    @media screen and not (min-width: 20em) {
	  #menu a {
		  display: block;
	  }
    }
/* -------------------------------------------------------------- */
	.clFullImage {
		text-align: center;
	}
	.fixed-ratio-resize { /* basic responsive img */
		max-width: 100%;
		height: auto;
		width: auto\9; /* IE8 */
	}
/* -------------------------------------------------------------- */
	.left-arrow {
		border-color: transparent black;
		border-style: solid;
		border-width: 20px 20px 20px 0px;
		height: 0px;
		width: 0px;
	}

	.right-arrow {
		border-color: transparent black;
		border-style: solid;
		border-width: 20px 0px 20px 20px;
		height: 0px;
		width: 0px;
	}

	.down-arrow {
		border-color: mediumturquoise transparent;
		border-style: solid;
		border-width: 200px 200px 0px 200px;
		height: 0px;
		width: 0px;
	}

	.up-arrow {
		border-color: black transparent;
		border-style: solid;
		border-width: 0px 20px 20px 20px;
		height: 0px;
		width: 0px;
	}