/** General page styling **/
html {
  /*background-color: #e9e9e9;*/
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #e9e9e9 url("/work/includes/grid.png") repeat;
	color: #252525;
	font-family: "Arial", sans-serif, "Helvetica", "Verdana", "Geneva", "Trebuchet MS", "Tahoma";
	font-size: 62.5%;
	text-align: center;
}

a:link { 
	color: #C34500;
	text-decoration: none;
}
a:visited { 
	color: #C34500;
	text-decoration: none;
}
a:hover { 
	color: #615042;
	text-decoration: underline;
}

#main {
  padding: 0 0 30px 0;
  text-align: center;
}

#header {
  background-color: #d1d1d1;
  border: #dedede 1px solid;
	border-bottom: #777 1px dashed;
  margin: 0 0 8px 0;
}

h1 {
  text-align: center;
  font-family: 'Fjalla One';
  font-size: 2.9em;
  font-weight: normal;
	color: #c34500;
  text-transform: uppercase;
  margin: 10px 0 0 0;
}

h3 {
  text-align: center;
  font-family: 'Fjalla One';
  font-size: 1.9em;
  font-weight: normal;
	color: #777;
  /*text-transform: lowercase;*/
  margin: -2px 0 10px 0;
}

#header p, #main p {
  text-align: left;
  font-size: 1.3em;
  margin: 0 0 16px 0;
}

#footer {
  z-index: 1000;
  position: relative;
  margin: 0 auto;
  padding: 12.0em 0 0 0;
}

#copyright {
  clear: both;
  background-color: #d1d1d1;
  border: #dedede 1px solid;
	border-top: #777 1px dashed;
  margin: 0;
  padding: 0 0 1.1em 0;
}

#copyright p {
  text-align: center;
  font-size: 1.2em;
  color: #252525;
  margin: 0;
  padding: 0;
}
#copyright a:link, #copyright a:visited, #tiles a:link, #tiles a:visited { 
	color: #615042;
}

#top {
  /*width: 100%;*/
  margin: 0 2.0em 0 2.0em;
	text-align: center;
}
#intro {
  display: table;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 0 16px 0;
  clear: both;
}

/** clearfix method for clearing floats **/
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

#filters {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

#filters li {
  font-size: 1.2em;
  background: #d1d1d1;
  float: left;
  padding: 0.4em 0.2em 0.4em 0.2em;
  cursor: pointer;
  -webkit-transition: all 0.15s ease-out;
     -moz-transition: all 0.15s ease-out;
       -o-transition: all 0.15s ease-out;
          transition: all 0.15s ease-out;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0.2em 0.4em 0.2em 0;
  /*width: 8%;*/
}

#filters li:hover {
  background: #c0c0c0;
}

#filters li.active {
  background: #333333;
  color: #ffffff;
}

/** Grid container **/
#tiles {
  list-style-type: none;
  position: relative; /** Needed to ensure items are laid out relative to this container **/
  margin: 0;
}

/** Grid items **/
#tiles li {
  width: 200px;
  background-color: #ffffff;
  border: 1px solid #dedede;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  display: none; /** Hide items initially to avoid a flicker effect **/
  cursor: pointer;
  padding: 4px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

#tiles li.inactive {
  opacity: 0;
}

#tiles li img {
  display: block;
}

/** Grid item text **/
#tiles li p {
  color: #666;
  font-size: 1.2em;
  margin: 0.7em 0 0 0.7em;
}

/** Some extra styles to randomize heights of grid items **/
#tiles ali:nth-child(3n) {
  height: 17.5em;
}

#tiles ali:nth-child(4n-3) {
  padding-bottom: 3.0em;
}

#tiles ali:nth-child(5n) {
  height: 25.0em;
}