/*-  CSS "libraries"
----------------------------------------------------------------------*/
@import url("reset.css");
@import url("fonts.css");

/*-  BASE STYLES
----------------------------------------------------------------------*/

/*- self-clearing floats ----------*/
.mod:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	_zoom: 1;
	*zoom: 1;
}

/*- fluid images and objects ----------*/
img {
  max-width: 100%;
}


/*- selection styles ----------*/

::selection {background: #E2B279;}
::-moz-selection {background: #E2B279;}

img::selection {background: transparent;}
img::-moz-selection {background: transparent;}


/*- animations -------------*/
@-webkit-keyframes blinkingCursor {
  0% {
    border-right-color: #15855B;
  }
  50% {
    border-right-color: transparent;
  }
  100% {
    border-right-color: #15855B;
  }
}

/*- LET'S GET STARTED!
----------------------------------------------------------------------*/

html {
  background: #083851;
  background: #083851 -moz-linear-gradient(#195B7D, #083851) no-repeat;
  background: #083851 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#195B7D), to(#083851)) no-repeat;
}

body {
	background-color: #FFFCFA;
	color: #444;
	-moz-border-radius: 0 0 .5em .5em;
	font: normal 16px/22px Georgia, "Times New Roman", Times, serif;
	margin: 0 auto;
	padding: 2em 2em 3em;
	height: 100%;
	min-width: 590px;
	max-width: 700px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

a {
  text-decoration: none;
  color: #4C96BE;
  -moz-transition: color .2s linear;
  -webkit-transition: color .2s linear;
  transition: color .2s linear;
}

a:hover, a:active {
  color: #223786;
}

p {
  margin-bottom: 1em;
}

h2, h3 {
  font-family: 'Museo300', Helvetica, Arial, Verdana, sans-serif;
  margin-bottom: 1em;
}

h2 {
  font-size: 1.3125em;
  border-left: 1em solid #083851;
  padding-left: .5em;
  margin-top: 2em;
}

h3 {
  border-bottom: 1px solid #ccc;
  color: #15855B;
}

.feed {
  padding-right: 17px;
  background: transparent url('http://github.com/images/icons/feed.png') right center no-repeat;
}

/*- site header -------------*/
header[role="banner"] {
  margin-bottom: 2em;
}

header[role="banner"] h1 {
  font-family: 'MuseoSlab500', Helvetica, Arial, Verdana, sans-serif;
  font-size: 2.25em;
  word-spacing: -.1em;
  margin-bottom: 1em;
}

header[role="banner"] h1 a {
  color: #000;
  padding-right: .2em;
  border-right: .5em solid #15855B;
}

/* if browser doesn't support animations */
.no-cssanimations header[role="banner"] h1 a:hover {
  border-right-color: #25644C;
}

/* if browser does support animations, it gets blinking cursor on logo */
.cssanimations header[role="banner"] h1 a:hover {
  -webkit-animation: blinkingCursor 1s infinite ease;
}

/*- site navigation -------------*/
nav[role="navigation"] {
  padding-bottom: .2em;
  border-bottom: 2px solid #195A7D;
  font-family: 'Museo300', Helvetica, Arial, Verdana, sans-serif;
  font-size: .875em;
}

nav[role="navigation"] ul {
}

nav[role="navigation"] li {
  display: inline;
  position: relative;
}

nav[role="navigation"] a {
  color: #555;
  padding: 0 1em;
}

nav[role="navigation"] a:hover, nav[role="navigation"] a:active {
  color: #15855B;
}

/* styling for active page link */
#about li.about a,
#news li.news a,
#faq li.faq a,
#tools li.tools a,
#support li.support a,
#dev li.dev a,
#scripts li.scripts a {
  color: #000;
  font-weight: bold;
}

/* styling for navigation arrow */
#about nav .about:after,
#news nav .news:after,
#faq nav .faq:after,
#tools nav .tools:after,
#support nav .support:after,
#scripts nav .scripts:after,
#development nav .dev:after,
#dev nav .dev:after {
  content: "";
  border: 5px solid transparent;
  border-bottom-color: #195A7D;
  height: 0;
  width: 0;
  position: absolute;
  left: 50%;
  top: 1em;
  margin-left: -5px;
}

/*- list of news posts -------------*/
.bookmark {
  font-size: .75em;
  font-style: italic;
}

.posts {
  list-style-type: none;
}

.posts li {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dotted #888;
}

.posts li:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.post header, .post h1, .post footer {
  display: inline;
}

.post header {
  margin-right: 1em;
}

.post footer {
  font-size: .75em;
  color: #666;
}

.posts p {
  margin-bottom: 0;
}

/*- news article page -------------*/
#news-show .post header {
  display: block;
  margin-bottom: .33em;
  font-size: 1.3125em;
}

#news-show .post footer {
  padding-left: .5em;
  font-size: .875em;
  border-left: .5em solid #ccc;
}

#news-show .entry-content {
  margin-top: 1em;
}

/* dl and ul are styled the same. dt is styled like a p. */
section dl, section dt {
  margin-bottom: 1em;
}

section dd {
  display: list-item;
}

section dd, section li {
  margin-left: 2em;
  list-style-type: square;
}

/* .big-list removes bullets and margins */
.big-list, .big-list dt {
  margin-bottom: 0;
}

.big-list dd {
  display: block;
}

.big-list li, .big-list dd {
  margin-left: 0;
  list-style-type: none;
}

/*- faq page -------------*/
.faq-list {
  margin-bottom: 2em;
}

.faq-list:last-child {
  margin-bottom: 0;
}
.faq-list dt {
  font-size: 1.125em;
  font-weight: bold;
}

.faq-list dd {
  margin-left: 2em;
  margin-bottom: 1em;
}

/*- scripts page -------------*/
thead {
  border-bottom: 1px solid #000;
}

th {
  font-size: .875em;
  text-align: left;
  color: #15855B;
}

th, td {
  padding: .5em;
}

tbody tr:nth-child(odd) {
  background: #eee;
}


/*- site footer -------------*/
footer[role="contentinfo"] {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 2px solid #195B7D;
}

footer[role="contentinfo"] p {
  font-style: italic;
  font-size: .75em;
  color: #888;
}

/*-  MEDIA QUERIES
----------------------------------------------------------------------*/

@media all and (max-device-width: 480px), all and (max-width: 589px) {

  html {
    -webkit-text-size-adjust: none;
  }

  body {
    height: auto;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    padding: 2em 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  /* remove active page link arrow */
  #about nav .about:after,
  #news nav .news:after,
  #faq nav .faq:after,
  #tools nav .tools:after,
  #support nav .support:after,
  #scripts nav .scripts:after,
  #dev nav .dev:after {
    border-bottom-color: transparent;
  }
}

@media all and (max-device-width: 480px) {

  a {
    /*-webkit-tap-highlight-color: #E2B279;*/
  }

  nav[role="navigation"] li {
    display: inline-block;
    width: 32.5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  nav[role="navigation"] a {
    padding: .5em 1em;
    display: inline-block;
  }
}

@media only screen and (max-device-width: 480px) and (orientation: landscape) {

  nav[role="navigation"] li {
    width: 24%;
  }
}