/* 
	Title:		Master styles for screen media
	Author: 	David Palmer
*/




	/* main styles
--------------------------------------------- */


	/* page structure
--------------------------------------------- */

html {
	overflow:hidden;
}

body {

	background-image: url(../images/BG_MajorTom.jpg);
	background-color: rgba(60,127,179,1);
	background-size: 130% auto;
	background-repeat: no-repeat;
	color: rgba(255,255,255,1);
	}

#wrap {
	margin: 0 ;
	padding: 0 ;
	width: 100%;
	height: 100%;
	}
		
#content {
	margin: 0;
	width: 100%;
	height: 100%;
	padding: 0 0 0 0;
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
	
	
.title {
	padding: 2em;
	width: 28em;
	text-align: center;
	vertical-align:center;
	background-color: rgba(255, 255, 255,.8);
	display: block;
	position:absolute;
	top: 40%;
	left: 50%;
	margin: 0 0 0 -14em;
	}
	
	
a:hover div.title  {
	background-color: rgba(255, 255, 255,.9);
	}
	
a:hover #main {color: rgba(255,0,51,1);
	}
	
.group {
	-webkit-box-sizing: border-box;
	-moz-boc-sizing: border-box;
	box-sizing: border-box;
	}
		
.extra {
	padding: .5em;
	}	

#contemporary {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color:	#555;
	margin-bottom: .5em;
}

#enter {display:none;
}

#main {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 2.05em;
	font-weight: 300;
	color: rgba(0,51,255,1);
}

#houzz {position:fixed;
	left: 5px;
	bottom: 5px;
}




a {text-decoration:none}


hr, .hide {
	display: none;
}


/* self-clear floats */
	
.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	
	
	
/* responsiveness
--------------------------------------------- */

/*add media-specific styles here for phones an tablets*/


/* ............ 980px (tablets) ................*/	

@media screen and (max-width: 980px) {
	
	body {

	background-image: url("../images/BG_MajorTom_phone.jpg");
	background-size: 130% auto;
	background-repeat: no-repeat;
	background-color: rgba(0,145,157,1);
	}
		}



/* ............ 800px (tablets) ................*/	

@media screen and (max-width: 800px) {
	
	body {

	background-image: url("../images/BG_MajorTom_phone.jpg");
	background-size: 130% auto;
	background-repeat: no-repeat;
	}

	
.title {
	padding: 1.5em;
	width: 26em;
	background-color: rgba(255, 255, 255,.9);
	top: 30%;
	margin: 0 0 0 -13em;
	}
	
#contemporary {

	font-size: 1.1em;
	margin-bottom: .5em;
}

#enter {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color:#444;
	display:block;
	margin-top: .5em;
}


#main {
	font-size: 1.9em;
	font-weight: 300;
}
	
	}
	
/* ............ 500px (phones) ................*/

@media screen and (max-width: 500px) {
	
body {
	background-size: 120% auto;
	background-repeat: no-repeat;
	}
	
.title {
	padding: 2em;
	width: 22em;
	top: 30%;
	margin: 0 0 0 -13em;
	}	
	
#enter {

	font-size: 1em;	
}


#houzz {display:none;
}

	}
	
	/* ............ 360px (phones) ................*/

@media screen and (max-width: 360px) {
	
body {
	background-size: 150% auto;
	background-repeat: no-repeat;
	}
	
.title {
	padding: 2em;
	width: 22em;
	top: 30%;
	}
	
	#contemporary {
	font-size: 1em;
}

#main {
	font-size: 1.7em;
}		

#enter {
	font-size: 1.2em;	
}

#houzz {display:none;
}	
	
	
	}
	
/* end */