/*----------------------------------------------------------------------------
"1Percenter"
By Roben Kleene
   www.1percenter.com
----------------------------------------------------------------------------*/

@import "reset.css";
@import "firefox.css";

@import "debug.css";

/* !Layout
============================================================================*/
body {
	font-family: Helvetica, sans-serif;
	color: rgba(255,255,255,0.9);
	background-color: #181818;
}
#page {
	background: transparent url('../images/noise_gradient.png') repeat-x 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);

	-webkit-box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.05);
	-moz-box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.05);
	box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.05);
}

h1 {
	height: 99px;
	width: 221px;
	margin-left: 210px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	background: transparent url('../images/1pmaterialsbyrobenkleene.png') no-repeat 0 0;
	margin-bottom: 30px;
}


/* !Materials
============================================================================*/
#materials {
	padding-top: 40px;
	padding-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
}
#materials img {
	-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

	float: left;
	margin-right: 20px;
	opacity: 0.7;

	-webkit-transition-property: opacity;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: opacity;
	-moz-transition-duration: .3s;
	-moz-transition-timing-function: linear;
	transition-property: opacity;
	transition-duration: .3s;
	transition-timing-function: linear;
}
/* !Text
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#materials a {
	text-decoration: none;
	display: block;
	overflow: auto;
	padding: 5px;
	margin-bottom: 35px;
}
#materials .left {
  float: left;
  width: 350px;
}
#materials span.title {
	padding-top: 16px;
  	font-size: 20px;
  	line-height: 20px;
	margin-bottom: 4px;
	font-family: "HoeflerText-black", Georgia, serif;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: rgba(0, 0, 0, 0.8) 0px 2px 0px;
	display: block;

	-webkit-transition-property: color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: color;
	-moz-transition-duration: .3s;
	-moz-transition-timing-function: linear;
	transition-property: color;
	transition-duration: .3s;
	transition-timing-function: linear;
}
#materials span.tagline {
	font-family: HelveticaNeue-UltraLight, HelveticaNeue-Light, Helvetica, sans-serif;
	font-weight: 100;
	color: rgba(255, 255, 255, 0.45);
  	font-size: 18px;
  	line-height: 20px;
	text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 0px;

	-webkit-transition-property: color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: color;
	-moz-transition-duration: .3s;
	-moz-transition-timing-function: linear;
	transition-property: color;
	transition-duration: .3s;
	transition-timing-function: linear;
}
#materials #contact {
	text-align: center;
	margin-top: 40px;
	clear: both;
}
#materials #contact a {
	font-size: 18px;
	font-family: HelveticaNeue-UltraLight, HelveticaNeue-Light, Helvetica, sans-serif;
	color: rgba(128, 128, 128, .5);
	border-bottom: 1px dotted rgba(128, 128, 128, .5);
	display: inline;
	padding: 0;
	-webkit-transition-property: color, border-color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: linear;
	-moz-transition-property: color, border-color;
	-moz-transition-duration: .3s;
	-moz-transition-timing-function: linear;
	transition-property: color, border-color;
	transition-duration: .3s;
	transition-timing-function: linear;
}

/* !Hovers
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#materials #contact a:hover {
	color: rgba(128, 128, 128, 1.0);
	border-color: rgba(128, 128, 128, 1.0);
}
#materials a:hover span.title {
	color: rgba(255, 255, 255, 1.0);	
}
#materials a:hover span.tagline {
	color: rgba(255, 255, 255, 0.8);
}
#materials a:hover img {
	opacity: 1.0;
}