/*
Theme Name: tenten71
Theme URI: http://www.tenten71.com/
Description: The 2015 theme for tenten71 website.
Author: Sean Collins
Template: tenten71
*/

body { font-family: "PT Sans", Helvetica, Arial, sans-serif; color: #333; background: #f4f4f4; }

.home { width:90%; padding:3% 5%; }

.container { padding-bottom: 2em; }

h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif; font-weight: 300; }

.element-invisible {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
}


a, a:visited { color:#369; }
a:hover, a:active { color:#d88201; }


.navigation { width:100%; margin-top: 2em; padding: 0; text-align: right; }
.navigation li, .navigation-home ul li { list-style: none; }
.navigation li { padding: 0; margin-right: 1em; }
.navigation li a, .navigation-home ul li a { text-decoration: none; }

  @media only screen and (max-width: 800px) {
    .navigation li {
      width: 12.6%; float: left; margin: 0; padding: .5em 2%; display: inline-block; 
      text-align: center;
    }
    .navigation li a {
      font-size: 1.25em; line-height: 1em;
      display: block; padding: .5em 0; 
      border-top: 1px solid; border-bottom: 1px solid; 
    }
  }

.navigation-home ul { width: 100%; margin: 0; padding: 0; }

.navigation-home ul li { 
  width: 16%; float: left; margin: 0; padding: 2em 2%; display: inline-block; 
  text-align: center;
  background-image: radial-gradient(
    16px at 50% 50%,              /* width(w) at left(x) top(y) */
    #336699 0%,                   /* color circle center */
    #336699 20%,                  /* color circle outer edge */
    rgba(51, 102, 153, 0.5) 10px, /* transparent block inner edge? */
    rgba(51, 102, 153, 0) 50px);  /* transparent block outer edge? */
}
.navigation-home ul li:hover { 
  background-image: radial-gradient(
    16px at 50% 50%,             /* width(w) at left(x) top(y) */
    #d88201 0%,                  /* color circle center */
    #d88201 20%,                 /* color circle outer edge */
    rgba(216, 130, 1, 0.5) 10px, /* transparent block inner edge? */
    rgba(216, 130, 1, 0) 50px);  /* transparent block outer edge? */
}

  @media only screen and (max-width: 900px) {
    .navigation-home ul li,.navigation-home ul li:hover { 
      background-image: none;
    }
  }

.navigation-home ul li a { 
  font-size: 1.25em; line-height: 1em;
  display: block; padding: 1em 0; 
  border-top:1px solid; border-bottom: 1px solid; 
  background: #f4f4f4;
}

  @media only screen and (max-width: 680px) {
    .navigation li a, .navigation-home ul li a { font-size: 1em; }
  }

  @media only screen and (max-width: 500px) {
    .navigation li { width: 29.3%; padding: .25em 2%; }

    .navigation-home ul li { 
      width: 96%; padding: .1em 2%;
    }
    .navigation li a, .navigation li a:visited, .navigation-home ul li a, .navigation-home ul li a:visited {
      border-top: 0; border-bottom: 0;
      background: #369;
      color: #fff;
    }
    .navigation li a:hover, .navigation li a:active, .navigation-home ul li a:hover, .navigation-home ul li a:active {
      background: #d88201;
    }
  }


.my-title { letter-spacing:.5em; }
  @media only screen and (max-width: 1160px) {
    .my-title { letter-spacing: .4em; }
  }
  @media only screen and (max-width: 960px) {
    .my-title { letter-spacing: .3em; }
  }
  @media only screen and (max-width: 880px) {
    .my-title { letter-spacing: .2em; }
  }
  @media only screen and (max-width: 770px) {
    .my-title { letter-spacing: .1em; }
  }
  @media only screen and (max-width: 660px) {
    .my-title { letter-spacing: 0; font-size: .8em; }
  }

.columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
  @media only screen and (max-width: 800px) {
    .columns { 
      -moz-column-count: unset;
      -webkit-column-count: unset;
      column-count: unset;
    }
  }


.footer { color: #f4f4f4; background: url(images/pencil-mouse_white-on-transparent.png) 95% 20% no-repeat #369; }


/* WordPress styles */

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}

a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

img#wpstats { display:none }