@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Raleway';

/* MOBILE FIRST */

/* universal */
*, html * {
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
	outline: none;
	font: normal 1em/1em "Raleway", "Avenir Light", sans-serif;
	list-style: none;
}
#gestalt {
	background-color: #fff; 
	color: #777;
	width: 100%;
}

/* header */
#header {
	position: fixed;
	height: 60px;
	width: 100%;
	background-color: #fff;
	z-index: 10;
}
#logo {
	position: absolute;
	left: 4px;
	top: 5px;
	clip: rect(0px,84px,63px,0px);
}

/* navigation */
#nav ul {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
}
#nav li {
	display: block;
	float: left;
}
#nav li:first-child { background-color: #A37C21; }
#nav li:nth-child(2) { background-color: #71194C; }
#nav li:nth-child(3) { background-color: #81A879; }
#nav li:nth-child(4) { background-color: #211737; }

#nav li:hover, #nav li:focus { background-color: #157; }

#nav li a:link, #nav li a:visited {
	display: block;
	text-transform: uppercase;
	color: #fff;
	font-size: .9em;
	text-align: center;
	width: 60px;
	height: 60px;
	line-height: 60px;
}

/* main */
#main {
		padding: 110px 30px 55px 30px;
		z-index: 1;
		position: relative;
		overflow: auto;
}
#main h1 {
	font-size: 1.25em;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 1px;
	margin-bottom: .5em;
}
#main h2 {
	font-size: 1em;
	font-weight: normal;
	margin-top: 1.25em;
	margin-bottom: .5em;
	text-transform: uppercase;
}
#main p {
	line-height: 1.5em;
	margin: 1em 0;	
}
#main li { margin: .5em 0; }
#main ul.thumbs li {
	float: left;
	margin-right: 1%;
}
#main ul.thumbs li a:link {
	color: #999;
	font-size: .9em;	
}
#main ul.thumbs img {
	width: 100%;
	max-width: 400px;
}

/* links */
#links ul { list-style: none; }
#main ul.reliableLinks ul { display: none; }
#links ul ul { margin-left: 1em; }


/* footer */
#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	font-size: .9em;
	padding: .5em 0;	
}

#footer a:link, #footer a:visited {
	color: #fff;
	padding: 7px 23px;
}
#footer a:hover, #footer a:focus { color: #FC0; }
#footer a:active { color: #ccc; }

#phone { background: transparent url(../images/icon-phone.png) no-repeat left center; }
#e-mail { background: transparent url(../images/icon-mail.png) no-repeat 0 4px; }
#phone, #e-mail { display: none; }

#footer p:last-child {
	display: block; 
	color: #fff;
	padding: .25em .75em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 8px;
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

/* colors */
#web-portfolio, #web-portfolio #footer { background-color: #A37C21; }
#web-portfolio h1, #web-portfolio h2 { color: #A37C21; }

#print-portfolio, #print-portfolio #footer { background-color: #71194C; }
#print-portfolio h1, #print-portfolio h2 { color: #71194C; }

#display-portfolio, #display-portfolio #footer { background-color: #81A879; }
#display-portfolio h1, #display-portfolio h2 { color: #81A879; }

#about, #about #footer { background-color: #211737; }
#about h1, #about h2 { color: #211737; }

#links, #links #footer { background-color: #A37C21; }
#links h1, #links h2 { color: #A37C21; }

#homepage, #homepage #footer { background-color: #49536D; }
#homepage h1, #homepage h2 { color: #49536D; }

/* DESKTOP AND TABLET */
@media only screen and (min-width: 700px), (min-device-width: 700px) {
	
	/* background images */
	#web-portfolio #gestalt { background: #fff url(../images/slinky-l.png) no-repeat 50px 65px; }
	#web-portfolio #main { background: transparent url(../images/slinky.png) no-repeat 10px bottom;	}

	#print-portfolio #gestalt { background: #fff url(../images/couple-l.png) no-repeat left top; }
	#print-portfolio #main { background: transparent url(../images/couple.png) no-repeat left bottom;	}

	#display-portfolio #gestalt { background: #f9f9f9 url(../images/alien-l.png) no-repeat left 70px; }
	#display-portfolio #main { background: transparent url(../images/alien.png) no-repeat left 20px bottom 10px; }

	#about #gestalt { background: #fff url(../images/detective-l.png) no-repeat 0 65px; }
	#about #main { background: transparent url(../images/detective.png) no-repeat left bottom;	}

	#links #gestalt { background: #f9f9f9 url(../images/spacechick-l.png) no-repeat -90px 70px; }
	#links #main { background: transparent url(../images/spacechick.png) no-repeat left -5px bottom 10px; }
	
	/* header - desktop and tablets */
	#header {
		position: relative;
		background-color: transparent;	
	}
	#logo {
		position: absolute;
		left: 17px;
		top: 11px;
		clip: rect(auto, auto, auto, auto);	
	}
	
	/* nav - desktop and tablets */
	#nav ul { position: absolute; }
	#nav li a:link, #nav li a:visited {
		width: 80px;
		height: 80px;
		line-height: 80px;
	}
	
	/* main - desktop and tablets */
	#main {
		padding: 90px 20px 20px 200px;
	}
	/* needed to envelop thumbs and show positioned background properly */
	#main ul.thumbs {
		overflow: auto;
		padding-bottom: 30px;
		max-width: 1030px;
	}
	#main ul.thumbs li {
		float: left;
		margin-right: 1%;
	}
	#web-portfolio ul.thumbs img, #print-portfolio ul.thumbs img {
		width: 100%;
		max-width: 240px; 
	}
	
	/* make sure print thumbs don't break awkwardly */
	#print-portfolio #main ul.thumbs li {
		width: 23%;
		margin-right: 2%;	
	}

	/* clients desktop and tablet */
	#about #main p { max-width: 1030px; }
	ul#clients {
		list-style: none;
		-webkit-column-count: 3; /* Chrome, Safari, Opera */
		-moz-column-count: 3; /* Firefox */
		column-count: 3;

		-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
		-moz-column-gap: 40px; /* Firefox */
		column-gap: 40px;
		padding-bottom: 50px;
		max-width: 960px;
	}
	ul#clients li:first-child { margin-top: 0 !important; }
	#about #tools { display: none; }

	/* footer - desktop and tablets */
	#footer {
		position: relative;
		clear: left;
		height: 40px;
		padding-left: 200px;
	}
	#footer p { float: left; }
	#phone, #e-mail { display: block; }
	#footer p:last-child { display: none; }		
}

/* Wide Desktops and Laptops ----------- */
@media only screen  and (min-width : 1200px) {
	#about #main { margin-right: 300px; }
}