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

/* housekwake color palette
#edde65     rgb(237, 222, 101)  YELLOW
#2656a5      rgb(38, 86, 165)  PURPLE
#ec1c24    rgb(236, 28, 36)  RED
#f2722d  ORANGE
*/

/*Global styles courtesy of lynda.com 2012 and special thanks to James Williamson----------*/

/*limited reset*/

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
/* For modern browsers */
.cf:before, .cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
	zoom:1;
}

body {
	background: black;
	color: #a7a9ac;
	font-family: 'Work Sans', sans-serif;	
	font-style: normal;
}

strong {
	font-weight: 700;
}

/*links*/


a {	
	}
	

a img {
	border: none;
	outline: 0;
}

/*text styles */

p, ul, ul li  {
}

.noText {
	display: none;
}


/* div styles in order of appearance in home page source */

	/* content DIV contains everything else. Position is set to relative to make floats work properly */
#content {
	position: relative;
}

#logo {
	position: relative;
	margin: 0px auto;
}

	/* Additional styles for newimageLogo div are in media-specific styles */
#logo1 {
	position: relative;
	margin: 6px auto 0px;
	}

	/* Additional styles for housekwakeLogo div are in media-specific styles */
#logo2 {
	position: relative;
	margin: 0px auto;
	}
	
	/* Sets images to be 100% of the width of containing divs - this works because the divs have position set to relative */
#logo1img, #logo2 img {
	width: 100%;
	height: auto;
}

	/* Sets bigLinks div to clear. Width will be changed in media-specific styles */
#bigLinks {
	position: relative;
	clear: both;
	margin: 20px auto 0px;
}

	/* Additional styles for these three divs are in media-specific styles */
#bookingLink, #videoLink, #bioLink {
	width: 200px;
	height: 250px;
}

	/* Use the background graphic to make the heads for the big picture links */
#bookingLinkHead, #videoLinkHead, #bioLinkHead {
	width: 200px; height: 30px; margin: 0px; padding: 0px;
	background: url(../images/housekwakeNavigation.gif) no-repeat;
	}
	
	/* Now set the position of the background graphic */
#bookingLinkHead {
	background-position: 0px -304px;
}

#videoLinkHead {
	background-position: 0px -334px;
}

#bioLinkHead {
	background-position: 0px -364px;
}

/* styles for text-based links underneath pictures */

.bigLinksLink {
	width: 200px;
}

.bigLinksLink p {
	text-align: center;
}

.bigLinksLink p a {
	color: #edde65;
	font-size: 0.9em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 2px 0px 5px !important;
	margin: 0px !important;
}
.bigLinksLink p a:hover, .bigLinksLink p a:focus {
	color: #f2722d;
}

	/*center navigation horizontally*/

#socialNav { 
	clear: both;
	position: relative;
	margin: 1.5em auto 0px;
	width: 300px;
	height: 60px;
	overflow: hidden;
}

	/* set lists to appear with no bullets */
nav ul {
	list-style: none;
}

#socialNav li {
	float: left;
	height: 60px;
	width: 60px;
}

#socialNav li a {
	display: block;
	height: 60px;
	width: 60px;
	background: url(../images/housekwakeNavigation.gif) no-repeat;
	background-position: 0 0;
}

#socialNav li a.email {
	background-position: -60px 0;
}

#socialNav li a.phone {
	background-position: -60px -60px;
}

#socialNav li a.youtube {
	background-position: -60px -120px;
}

#socialNav li a.facebook {
	background-position: -60px -180px;
}

#socialNav li a.instagram {
	background-position: -60px -240px;
}

#socialNav li a.email:hover, #socialNav li a.email:focus {
	background-position: 0 0;
}

#socialNav li a.phone:hover, #socialNav li a.phone:focus {
	background-position: 0 -60px;
}

#socialNav li a.youtube:hover, #socialNav li a.youtube:focus {
	background-position: 0 -120px;
}

#socialNav li a.facebook:hover, #socialNav li a.facebook:focus {
	background-position: 0 -180px;
}

#socialNav li a.instagram:hover, #socialNav li a.instagram:focus {
	background-position: 0 -240px;
}

#nextGig {
	width: 100%;
	background: #ec1c24;
	margin-top: 20px;
}

#nextGig p {
	padding: 2em;
	color: #ffffff;
	font-size: 1.8em;
	line-height: 90%;
	font-family: 'Ubuntu Mono', monospace;
}

#nextGig p .cursive {
	font-family: 'Courgette', cursive;
	color: #edde65;
	font-size: 1.5em;
}

#nextGig p a {
	color: #ffffff;
	text-decoration:underline;
}

#contact {
	width: 100%;
	background: #edde65;
	margin-top: 20px;
}

#contact p {
	padding: 2em;
	color: #555555;
	font-size: 1.8em;
	line-height: 90%;
	font-family: 'Ubuntu Mono', monospace;
}

#contact p .cursive {
	font-family: 'Courgette', cursive;
	color: #f2722d;
	font-size: 1.5em;
}

#contact p a {
	color: #f2722d;
	text-decoration:underline;
}

#youtube {
	position: relative;
	width: 100%;
	background: #000;
	margin-top: 20px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#bios, .bio {
	position: relative;
	width: 100%;
	background: #000;
	margin-top: 20px;
}

/* additional styles for bioImage appear in media-specific styles */
.bioImage {
	width: 200px;
}
	
#bios p {
	padding: 2em;
	color: #cfcfcf;
	font-size: 1.8em;
	line-height: 90%;
	font-family: 'Ubuntu Mono', monospace;
}

#bios p .cursive {
	font-family: 'Courgette', cursive;
	color: #edde65;
	font-size: 1.5em;
}

#bios p a {
	color: #edde65;
	text-decoration:underline;
}	
	
	

/*-----------------*/
/*mobile styles for phone*/

@media only screen and (max-width: 639px) {
	
	#logo1{
		width: 95%;
		margin: 0px auto;
	}

	#logo2 {
		width: 90%;
		margin: 8px auto 4px;
	}	
	
	#bigLinks {
		width: 200px;
		margin: 0px auto;
	}
	
	#bookingLink, #videoLink, #bioLink {
		margin-top: 30px;
	}
	
	.bioImage {
		margin: 0 auto;
	}

}
/*end of phone-specific styles*/

/*tablet styles*/

@media only screen and (min-width: 640px) and (max-width: 999px) {
	
	#logo1{
		width: 70%;
		max-width: 600px;
		margin: 0px auto;
	}
	
	#logo2 {
		width: 70%;
		max-width: 400px;
		margin: 16px auto 8px;
	}
	
	#bigLinks {
		width: 640px;
		margin: 0px auto;
	}

	#bookingLink, #videoLink, #bioLink {
		float: left;
	}

	#bookingLink, #videoLink {
		margin-right: 20px;
	}
	
	.bioImage {
		float: left;
		margin-right: 15px;
	}

	
}

/*---------------*/
/*desktop styles*/

@media only screen and (min-width: 1000px) {
	
	#logo1{
		width: 70%;
		max-width: 600px;
		margin: 0px auto;
	}
	
	#logo2 {
		width: 380px;
		margin: 15px auto 10px;
	}
	
	#bigLinks {
		width: 820px;
	}
	
	#bookingLink, #videoLink, #bioLink {
		float: left;
	}
	
	#bookingLink, #videoLink {
		margin-right: 105px;
	}

	.bio img {
		float: left;
		width: 200px;
		margin-right: 20px;
	}
	
	.desktopHide {
		display: none;
	}

}