@charset "utf-8";
/* CSS Document */

/* MOBILE */
@media only screen and (max-width: 700px), (max-device-width: 700px) {
	#homepage #header {
		position: relative;
		height: auto;
		width: auto;
		padding: 1em 2em;
		text-align: center;
		background-color: #fff;
		z-index: 10;
	}
	#homepage #logo {
		position: relative;
		left: auto;
		top: auto;
		clip: rect(auto, auto, auto, auto);
		width: 100%;
		max-width: 300px;
	}
	
	/* nav */
	#homepage #nav ul {
		margin: 0 auto;
		height: 260px;
		width: 260px;
		position: relative;
	}
	#homepage #nav li {
		position: absolute; 
	}
	#homepage #nav li:first-child { left:0; top: 0; 
		background: #A37C21 url(../images/iWeb.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(2) { right: 0; top: 0; 
		background: #71194C url(../images/iPrint.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(3) { left: 0; bottom: 0; 
		background: #81A879 url(../images/iDisplay.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(4) { right: 0; bottom: 0; 
		background: #211737 url(../images/iAbout.png) no-repeat center top 15px; }
	
	#homepage #nav li a:link, #homepage #nav li a:visited {
		display: table-cell;
		width: 125px;
		height: 115px; /* where I want the text to go */
		padding-bottom: 10px; /* now box is same size as li container */
		line-height: normal;
		vertical-align: bottom;
		color: #fff;
		font-size: .9em;
	}
	#homepage #nav li:hover, #homepage #nav li:focus { background-color: #157; }
	
	/* nav */
	#homepage #knowledge { display: none; }
	
	/* footer */
	#homepage #phone, #homepage #e-mail {
		display: block; 
		margin: .5em;
	}
#homepage #footer p:last-child { display: none; }
}

/*DESKTOP and TABLET */
@media only screen and (min-width: 701px), (min-device-width: 701px) {
	#homepage #logo {
		position: absolute;
		left: 101px;
		top: 10px;	
	}
	#homepage #nav ul {
		position: absolute;
		left: 100px;
		right: auto;
		top: 125px;
		z-index: 100;	
	}
	#homepage #main {
		height: 480px;
		background: transparent url(../images/kicker.png) no-repeat left 450px bottom 0;
		position: relative;
		z-index: 10;
	}
	#homepage #main h1 {
		position: absolute;
		left: 100px;
		top: 338px;
		font-size: .9em;
		letter-spacing: normal;
	}
	#homepage ul#tools {
		position: absolute;
		left: 200px;
		top: 235px;
		height: 222px;
		background: transparent url(../images/curlybrace.png) no-repeat left top;
		padding-top: 12px;
	}
	#homepage ul#tools li {
		list-style-type: none;
		margin: .4em 0;
		padding-left: 60px;
		font-size: .9em;
	}
	
	#homepage #footer {
		background-color: #49536D;
		position: relative;
		z-index: 1;
		margin-top: -40px;
		padding-left: 100px;
		height: 70px;
	}
}

@media only screen and (min-device-width: 701px) and (orientation: portrait) {
	#homepage { background-color: #fff; }
	#homepage #logo {
		max-width: none;
	}
	#homepage #header {
		position: relative;
		left: auto;
		top: auto;
		height: auto;
		width: auto;
		padding: 5em 3em;
		text-align: center;
		background-color: #fff;
		z-index: 10;
	}
	#homepage #logo {
		position: relative;
		left: auto !important;
		top: auto;
		clip: rect(auto, auto, auto, auto);
		width: 100%;
		max-width: 300px;
	}
	#homepage #nav { text-align: center; }
	#homepage #nav li { position: absolute; }

	#homepage #nav ul {
		margin: 0 auto;
		height: 125px;
		width: 530px;
		position: relative;
		left: auto;
		top: auto;
	}
	#homepage #nav li:first-child { left:0; top: 0; 
		background: #A37C21 url(../images/iWeb.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(2) { left: 135px; top: 0; right: auto;
		background: #71194C url(../images/iPrint.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(3) { right: 135px; top: 0; left: auto;
		background: #81A879 url(../images/iDisplay.png) no-repeat center top 15px; }
	#homepage #nav li:nth-child(4) { right: 0; top: 0;
		background: #211737 url(../images/iAbout.png) no-repeat center top 15px; }
		
	#homepage #nav li a:link, #homepage #nav li a:visited {
		display: table-cell;
		width: 125px;
		height: 115px; /* where I want the text to go */
		padding-bottom: 10px; /* now box is same size as li container */
		line-height: normal;
		vertical-align: bottom;
		color: #fff;
		font-size: .9em;
	}
	#homepage #nav li:hover, #homepage #nav li:focus { background-color: #777; }
	#homepage #main { background-image: none; }
	#homepage #knowledge { display: none; }
	#homepage #footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		font-size: .9em;
		padding: .5em 0;	
	}
}

/* Wide Desktops and Laptops ----------- */
@media only screen  and (min-width : 1200px) {
	#homepage #gestalt { background: #fff url(../images/kicker-l.png) no-repeat left 750px bottom 0; }
}