@import url("mobile.css") (max-width: 767px);

@import url("tablet.css") (min-width: 768px) and (max-width: 1000px);

/* Tablet should go all the way up to 1025, but I want to treat landscape like desktop */

@import url("desktop.css") (min-width: 1001px);

/* #General styles
================================================== */

@-webkit-keyframes fadeIn1 {
	0% {opacity:0;} 
	100% {opacity:1;}
}

@-moz-keyframes fadeIn1 {
	0% {opacity:0;} 
	100% {opacity:1;}
}

@-moz-document url-prefix() {
}

* {
	margin:0;
	padding:0;
}
body {
	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: center;
	margin:0 auto;
	font-size: 81.25%;
}

img {border:none;}

a { text-decoration:none; color:#666; }

a:hover { text-decoration:none; color:#0079C1; }

div {background: #f2f2f1;}

.blue {color:#0080c1;}

h1 {
	font-family: "bignoodletitlingregular", "Helvetica";
	font-weight: 700;
	color: #5e5e5e;	
	margin: 0 auto;
	position: fixed;
	z-index: 99;
	display: block;
	top: 0;
	width: 100%;
	border-bottom: 1px solid white;
	box-shadow: 0px 0px 3px 3px rgba(0,0,0,.1);
	background-color: whiteSmoke;
	color: #666;
}

@-moz-document url-prefix() {
   h1 {
        font-weight:100;
		text-shadow: none;
    }
}

h1 a { 
	color: #a4e4f1; 
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: none;
	-webkit-text-fill-color: #a4e4f1;
	text-shadow: none;
	font-weight:100;
	}

h2 {
	color: #87959f;
	font-family: "HelveticaNeue-Ultralight","Helvetica Neue Ultralight","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 100;
	margin: 1em 0;
}

h3 {
	color: #929191;
	font-family: "HelveticaNeue-Ultralight","Helvetica Neue Ultralight","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 100;
}

ul, li {
	list-style-type: none;
}

ol li {
	list-style-type: decimal;
	margin: 0 0 0 40px;
}

.clr {
	clear:both;
	width:100%;
	height:0px;
	background:none;
}

p, ul, ol  {
	line-height:1.5em;
	color:#919191;
}

p {
	margin: 0 0 12px 0;
}

br { margin:1em 0 0 0; }

.navParent {
position: fixed;
z-index: 99;
display: block;
top: 0;
padding: 0;
width: 100%;
height: 72px;
border-bottom: 1px solid white;
box-shadow: 0px 0px 3px 3px rgba(0,0,0,.1);
height: 72px;
background-color: whiteSmoke;
color: #666;
}

h1 span {
	display: block;
	float: left;
	padding-right: 20px;
	color: #0080c1;
}

h1 a.external, 
h1 a.external:hover {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	overflow: hidden;
	text-indent:-999;
	margin: 8px 0 0 8px;
	background: transparent url(../i/arrow.png) right center no-repeat ;
}

h1 a.video, 
h1 a.video:hover {
	width: 40px;
	height: 40px;
	display: block;
	float: left;
	overflow: hidden;
	text-indent:-999;
	margin: 8px 0 0 8px;
	background: transparent url(../i/arrow_video.png) right center no-repeat ;
}

.pieces {
	width:100%;
	float: left;
	background-image: url("../i/diamond_upholstery.png");
	background-position: center top;
	background-repeat: repeat;
	background-attachment:fixed;
	background-size:100px;
}

.pieces {
/* 	padding: 74px 0 0 0;		WHEN THERE's A NAV...
*/
}

.pieces, 
.piece_writeup {
}

.pieces p,
.pieces li,
.pieces h1,
.pieces h1 span {color: #5e5e5e;}
.pieces li a { background: #ededed;}

ul {
	/* width:836px; */
	float: left;
}

li {
	line-height:0em;
}

li a,
li a.unselected {
	float:left;
	display:block;
	margin: 0 auto;
}

li a img {
	width: 100%;
}

.piece_thumbs img {
	opacity:0;
	width:100%;
}

.pieces li a,
.pieces li a.unselected {
	opacity:.3;
}

.pieces li a:hover,
.pieces li a.selected {
	opacity:1;
}

.startups {
	background: transparent url(../i/dots.png) center top repeat ;
}

.startup_writeup,
.piece_writeup {
	/* background: #b0e2ff; */
	float: left;
}

.piece_writeup p a { background: #ddeb53; padding: 0 5px;}

.piece_writeup p a:hover { background: #0080c1; color: white; }

.piece_hiddenCopy {
	display:none;
}

.startup_writeup a {
	color: #0080c1;
}

.piece_writeup a {
}

.role {
	color: #0080c1;
	background: white;
	padding: 0 5px;
}