/* #Site Styles
================================================== */

html,body { /* Makes sure footer fills height of browser*/
	height:100%; 
	background: url(../images/footerBack.png);
}

/* -----Header -----------------------------*/
.band.header{
	background: url(../images/headerStandard.png);
	height: 162px;
}

#ipLogo {
	height: 160px;
	position: relative;
	top: -46px;
	left: -140px;
}

#redSiren {
	height:  120px;
	position: relative;
	right: -190px;
	top: -38px;
}

a:hover {
	color: #31302b;
}

#navBar {
	position: relative;
	height: 40px;
	top: -46px;
	width: 840px;
	left: 94px;
}

.navLink {
	font: 1.3em 'Quicksand_Bold-webfont', Helvetica, sans-serif;
	text-decoration: none;
	color: #5b5950;
	margin-left: 34px;
	text-shadow: 2px 2px 2px #cbc5ba;
	opacity: 0.85;
	float: left;
	position: relative;
	right: -460px;
}


.tinynav { 
	display: none 
	}


/* -----Main Content Area -----------------------------*/

.band.mainContent{
	height: 840px;
	background-color: #f7f3eb;
	position: relative;
}

#mainContentWrapper {
	position: relative;
	top: -40px;
}

.sectionHeaders {
	font: 2em 'Quicksand_Book_Oblique-webfont', Helvetica, sans-serif;
	color: #6d6b5d;
	position: relative;
}

.portfolioThumb {
	height:  160px;
	margin-left: 56px;
	margin-top: 80px;
	border: 2px solid #8b877c;
	-moz-box-shadow: 6px 6px 8px #d3ccbe;
	-webkit-box-shadow: 6px 6px 8px #d3ccbe;
	box-shadow: 6px 6px 8px #d3ccbe;
	opacity: 1;
	position: relative;
}

.portfolioThumb:hover{
	-moz-box-shadow: 6px 6px 8px #c2bbae;
	-webkit-box-shadow: 6px 6px 8px #c2bbae;
	box-shadow: 6px 6px 8px #c2bbae;
	border: 2px groove #8b877c;
}

#selectedAudioCues {
	font: 2em 'Quicksand_Book_Oblique-webfont', Helvetica, sans-serif;
	color: #3f3e39;
	position: relative;
	top: -10px;
	left: -40px;
	opacity: 0.7;
}

.band.audioPlayer {
	background-color: #ece4d3;
	position: relative;
	height: 300px;
}

#MP3ButtonsWrapper {
	position: relative;
	width: 800px;
	height: 240px;
	left: 200px;
	top: 40px;
}

.audioLink{
	position: relative;
	float: left;
	margin-right: 100px;
	margin-top: 10px;
}

/* -----Footer -----------------------------*/
.band.footer{
	height: 300px;
	position: relative;
}

.socialIcons {
	height: 50px;
	opacity: 0.5;
	top: 40px;
	position: relative;
	right: -63%;
	margin-right: 20px;
}

#footerLineRule {
	opacity: 0.6;
	position: relative;
	top: 160px;
}

#copyrightNotice {
	font: 1.0em 'Quicksand_Book-webfont', Helvetica, sans-serif;
	color: #f7f3eb;
	position: relative;
	top: 146px;
}

#siteDesignNotice {
	font: 1.0em 'Quicksand_Book-webfont', Helvetica, sans-serif;
	color: #f7f3eb;
	position: relative;
	top: 113px;
	float: right;
}

a.db:link {
	text-decoration: none;
	color: #ffffff;
	font-size: 1.1em;
}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) -----------------------------------------------------*/
	@media only screen and (max-width: 959px) {
	
		#ipLogo {
			height: 150px;
			top: -34px;
			left: -160px;
		}
		
		#redSiren {
			height:  122px;
			right: -50px;
			top: -27px;
		}
		
		#navBar {
			top: -36px;
			width: 670px;
			left: 46px;
		}
		
		.navLink {
			font: 1.25em 'Quicksand_Bold-webfont', Helvetica, sans-serif;
			margin-left: 34px;
			right: -340px;
		}
		
		.band.mainContent{
			height: 1060px;
		}
		
		p.welcomeText {
			font: 1.2em/1.3em 'Quicksand_Book-webfont', Helvetica, sans-serif;
		}
		
		.portfolioThumb {
			left: 40px;
		}
		
		#MP3ButtonsWrapper {
			width: 640px;
			height: 240px;
			left: 130px;
		}
		
		.audioLink{
			margin-right: 40px;
		}
			
		.socialIcons {
			height: 44px;
			top: 30px;
			right: -60%;
			margin-right: 16px;
		} 
		
		.band.footer{
			height: 280px;
		} 
		
		#footerLineRule {
			top: 120px;
		}
		
		#copyrightNotice {
			top: 115px;
		}
		
		#siteDesignNotice {
			top: 81px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {	}

	/* All Mobile Sizes (devices and browser) ---------------------------------------------------------*/
	@media only screen and (max-width: 767px) {
		
			/* -----Header -----------------------------*/
			
			.band.header{
				/* background: url(../images/headerMobileLandscape.png); */
				background: url(../images/headerStandard.png);
				height: 162px;
				position: relative;
				top: -20px;
			}
			
			#ipLogo {
				height: 132px;
				left: -170px;
				top: -18px;
			}
			
			#redSiren {
				height:  90px; 
				right: -294px;
				top: -106px;
			}
			
			#navBar {
				top: -112px;
				left: -340px;
			}
			/*delete */
			
			.navLink {
				right: -442px;
			}
			
			/* -----Main Content Area -------------------*/
			.band.mainContent{
				height: 800px;
				top: -20px;
			}
			
			#mainContentWrapper {
				position: relative;
				left: -50px;
				width: 500px;
				top: -100px;
			}
	
			
			p.welcomeText {
				font: 1.2em/1.2em 'Quicksand_Book-webfont', Helvetica, sans-serif;
				text-align: left;
			}
			
			.portfolioThumb {
				height:  136px;
				margin-left: 38px;
				margin-top: 40px;
				left: 0;
			}
			
		
			.band.audioPlayer {
				position: relative;
				top: -20px;
				height: 500px;
			}
			
			#selectedAudioCues {	
				top: -20px;
				opacity: 0.7;
				left: -40px;
			}
			
			#MP3ButtonsWrapper {
				width: 300px;
				height: 340px;
				left: 100px;
				top: 20px;
			}
			
			/* -----Footer ------------------------------*/
			
			.band.footer{
				height: 240px;
			}
			
			.socialIcons {
				height: 44px;
				top: 30px;
				right: -130px;
				margin-right: 12px;
			}
			
			#footerLineRule {
				top: 42px;
			}
			
			#copyrightNotice {
				top: 25px;
			}
			
			#siteDesignNotice {
				top: 42px;
				float: left;
			}
			
		}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {	
	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ------------------------------------*/
	@media only screen and (max-width: 479px) {
		
				.band.header{
					background: url(../images/headerStandard.png);
					height: 162px;
					position: relative;
					top: -52px;
				}
				
				#ipLogo {
					height: 92px;
					left: -110px;
					top: 24px;
				}
				
				#redSiren {
					height:  60px;
					position: relative;
					top: -37px;
					right: -208px;
				}
				
				#nav { 
					display: none 
				} 
				
				.tinynav { 
					display: block;
					position: relative;
					top: 102px;
					left: 70px;
					width: 220px;
					height: 26px;
				}
				#navBar {
					top: -138px;
					width: 300px;
					left: -28px;
				}
				
				#nav { 
					display: none 
				}   
		
				/* -----Main Content Area -----------------------------*/
				
				.band.mainContent{
					height: 1580px;
					top: -52px;
				}
				
				#mainContentWrapper {
					position: relative;
					left: -0px;
					width: 300px;
					top: -20px;

				}
				
				#portfolioThumbsWrapper {
					position: relative;
					left: 0px;
					width: 300px;

				}
				
				.portfolioThumb {
					height:  146px;
					margin-top: 30px;
				}
				
				p.welcomeText {
					font: 1.1em/1.3em 'Quicksand_Book-webfont', Helvetica, sans-serif;
					position: relative;
					top: -88px;
				}
			
				.band.audioPlayer {
					position: relative;
					top: -52px;
					height: 440px;
				}
				
				#MP3ButtonsWrapper {
					width: 240px;
					height: 340px;
					top: 40px;
					left: 50px;
			
				}
				
				.audioLink{
					left: 0px;
					top: 0px;
				}
				
				#selectedAudioCues {
					font: 1.6em 'Quicksand_Book_Oblique-webfont', Helvetica, sans-serif;
					color: #3f3e39;
					position: relative;
					top: -10px;
					opacity: 0.7;
					left: -10px;
				}
				
				/* -----Footer -----------------------------*/	
				.band.footer{
					height: 220px;
				}
				
				.socialIcons {
					height: 44px;
					top: -20px;
					right: -9px;
					margin-right: 11px;
				}
				
				#footerLineRule {
					top: 50px;
					width: 290px;
					left: 4px;
				}
				
				#copyrightNotice {
					top: 38px;
				}
				
				#siteDesignNotice {
					top: 60px;
					float: left;
				}
				
				
			}


/* #Font-Face
================================================== */


@font-face {
	    font-family: 'Quicksand_Book-webfont';
	    src: url('../fonts/Quicksand_Book-webfont.eot');
	    src: url('../fonts/Quicksand_Book-webfont.eot?iefix') format('eot'),
	         url('../fonts/Quicksand_Book-webfont.woff') format('woff'),
	         url('../fonts/Quicksand_Book-webfont.ttf') format('truetype'),
	         url('../fonts/Quicksand_Book-webfont.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
	   
@font-face {
	    font-family: 'Quicksand_Bold-webfont';
	    src: url('../fonts/Quicksand_Bold-webfont.eot');
	    src: url('../fonts/Quicksand_Bold-webfont.eot?iefix') format('eot'),
	         url('../fonts/Quicksand_Bold-webfont.woff') format('woff'),
	         url('../fonts/Quicksand_Bold-webfont.ttf') format('truetype'),
	         url('../fonts/Quicksand_Bold-webfont.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
	    
@font-face {
	    font-family: 'Quicksand_Book_Oblique-webfont';
	    src: url('../fonts/Quicksand_Book_Oblique-webfont.eot');
	    src: url('../fonts/Quicksand_Book_Oblique-webfont.eot?iefix') format('eot'),
	         url('../fonts/Quicksand_Book_Oblique-webfont.woff') format('woff'),
	         url('../fonts/Quicksand_Book_Oblique-webfont.ttf') format('truetype'),
	         url('../fonts/Quicksand_Book_Oblique-webfont.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }