/* =Base Styles
-------------------------------------------------------------- */

html, body {
}

/* Typography */
body { line-height: 1.25; }
body, select, input, textarea {
  color: #444;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6 { margin: 0 0 0.5em 0; }
h1 { font-size: 2.25em; }
h2 { font-size: 2.em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }
a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #308fbf; }
a:hover { color: #3db6f2; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
ul, ol, dl { margin-bottom: 0.6em; }
ul li, ol li { padding-bottom: 0.6em; }
hr { 
  margin: 1.2em 0; border: 0; 
  border: 1px solid #eeeeee;
  border-top-color: rgba(0,0,0,0.2);
  border-bottom-color: rgba(255,255,255,0.75);
  border-right: 0;
  border-left: 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}
.icon-inline {
  width: 1.25em;
  height: auto;
  vertical-align: text-top;
}
.icon-muted {
  opacity: 0.75;
}

/* Buttons */
a.btn {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 0.25em 0.5em;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255,255,255,0.75);
  background-color: Gainsboro;
  border: 0.1em solid #fff;
  border-color: rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.1);
  border-radius: 0.25em;
  box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5), inset 0 1em 0 rgba(255,255,255,0.2);
}
.btn:hover,
.btn:focus,
.btn:active {
  color: #333;
  box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.5), inset 0 1em 0 rgba(255,255,255,0.2), inset 0 2em 0 rgba(255,255,255,0.2);
}
a.btn-primary {
  background-color: #308fbf;
  color: White !important;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
}


/* =Nonsemantic Base Styles
-------------------------------------------------------------- */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Hide for both screenreaders and browsers */
.is-hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders */
.is-screen-reader-text,
.is-visuallyhidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
/* Hide visually and from screenreaders, but maintain layout */
.is-invisible { visibility: hidden; }


/* =Layout
-------------------------------------------------------------- */

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 54em;
}

/* Site Header */
.site-header {
  background: #f68360;
  border-bottom: 1px solid #ddd;
  margin-bottom: 2em;
}
.site-header .container {
  padding: 4em 0 3em;
}

.site-title {
  font-family: 'MathleteSkinny', 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
  font-size: 4em;
  margin: 0;
  float: left;
  width: 5em;
  line-height: 1;
}
.site-title a {
  text-decoration: none;
  color: #fbcabb;
}
.site-title a span {
  color: #fff;
}

.content .container {
  margin-top: -3.75em;
  background: #fff;
}

/* =Content Elements
-------------------------------------------------------------- */

.navigation {
  background: #ede1de;
  padding: 1em;
  line-height: 2;
  font-size: 1.75em;
}
.navigation > span {
  float: left;
}
ul.data-category-selector {
  float: left;
  list-style: none;
  line-height: 2em;
  padding: 0;
  margin: 0 0.5em;
  width: 14em;
  overflow: visible;
  height: 2em;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  border-collapse: collapse;
  /*border-radius: 0.5em;*/
}
.data-category-selector li {
  white-space: nowrap;
  margin: 0;
  padding: 0 2.5em 0 0.5em;
  border: 1px solid rgba(0,0,0,0.15);
  border-collapse: collapse;
}
.data-category-selector li.inactive {
  display: none;
}
.data-category-selector:hover li.inactive {
  display: block;
  background: #fff;
}
.data-category-selector:hover li:hover {
  background: #f68360;
}
.data-category-selector a {
  text-decoration: none;
  color: #f68360;
}
.data-category-selector li:hover a {
  color: #fff;
}

/* =Media Queries for Responsive Layout
-------------------------------------------------------------- */

@media only screen and (min-width: 320px) {
}

@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 768px) {
  .site-header .container {
    background: url(../images/header-illutration.png) bottom right no-repeat scroll;
  }
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1300px) {
}