* { /* star applies things to every element, sort of like the wild card, eliminating margins and padding and 
set a default font */
	margin:0;
	padding:0;
	font-family:Helvetica, sans-serif;
	-webkit-text-size-adjust:none; /* for iPhone (don't want text to change size when screen adjusted to landscape */
}

#wrapper {
	width:auto;
	max-width:1250px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	border:2px solid #04a5e5;
}

header {
	text-align:center;
	background:url(images/bluetile.gif);
	height:63px;
}

.clear {
	clear:both;
}

header img {
	margin-top:20px;
	max-width:auto;
}
p {
	font-size: 14px; 
}
	
#feature {
	margin:25px auto 25px auto;
	text-align:left;
	width:320px;
}

#feature img {
	border:10px solid #04a5e5;
}

#feature h2 {
	background:url(images/blueblock.gif) no-repeat left center;
	padding-left:18px;
	margin-bottom:10px;
	font-size: 27px;
}

#gaming h3 {
	background:#04a5e5;
	padding:15px 0 15px 0;
	text-align:center;
	font-size: 22px;
}

#gaming .gamingmice {
	padding:20px 10px;
	border-bottom:1px solid #04a5e5;
}

h4 {
	margin-bottom:8px;
	font-size: 18px;
}

#gaming .gamingmice img {
	float:left;
	margin-right:10px;
	border:10px solid #04a5e5;
}

a:link {
	text-decoration:none;
	font-weight:bold;
	color:#990000;
}

a:active {
	text-decoration:none;
	font-weight:bold;
	color:#990000;
}

a:hover {
	text-decoration:underline;
	font-weight:bold;
	color:#000000;
}

a:visited {
	text-decoration:underline;
	font-weight:bold;
	color:#999;
}

a:focus {
	text-decoration:underline;
	font-weight:bold;
	color:#000000;
}

/* for smaller screens (Use 600px max-width for testing purposes, can't resize window down below 400px */
@media screen and (max-width:400px){
	
	#gaming .gamingmice img{
		display:none;
	}
	
	p {
        font-size: 1em; 
    }
	
	#feature h2 {
		font-size: 1em;
	}
	#gaming h3 {
		font-size: 1em;
	}
	h4 {
		font-size: 1em;
	}
	header {
		padding:10px;
		height:50px;
	}
	
	#wrapper {
		margin-left:auto;
		margin-right:auto;
		border:5px solid #c9e4ed;
	}
	
	#feature {
		margin:15px auto 15px 5px;
		text-align:left;
		width:auto;
	}
}

/* Medium size screens */
@media screen and (max-width:800px) and (min-width: 401px){
	

	p {
        font-size: 1.5em; 
    }
	
	#feature h2 {
		font-size: 2em;
	}
	#gaming h3 {
		font-size: 2em;
	}
	h4 {
		font-size: 2em;
	}
	header {
		padding:15px;
		height:60px;
	}
	#gaming .gamingmice img{
		width: 30%;
		height: 30%;
	}
	#wrapper {
		max-width:800px;
		margin-left:auto;
		margin-right:auto;
		border:10px solid #3db6e6;
	}
	
	#feature {
		margin:15px auto 15px 5px;
		text-align:left;
		width:auto;
	}
}

/* General Layout for Full size screens */
@media (min-width: 801px) {
	
	p {
        font-size: 2em; 
    }
	#feature h2 {
		font-size: 3em;
	}
	#gaming h3 {
		font-size: 3em;
	}
	h4 {
		font-size: 2.5em;
	}
	header {
		padding:20px;
		height:70px;
	}
	
	#wrapper {
		width:auto;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		border:20px solid #04a5e5;
	}
	
	#feature {
		margin:15px auto 15px 5px;
		text-align:left;
		width:auto;
	}
}