/*********************
320 MEDIA QUERY
**********************/	
@media only screen and (min-width : 320px){
		
	body {
		background-image: url('../img/bgimage-960px.jpg');
		}
		
	#main,
	#contact {
		padding: 10px 0;
		}
	
	
		
	}


/*********************
480 MEDIA QUERY
**********************/	
@media screen and (min-width: 480px) {
	
	#main {
		background:rgba(68,111,130,.90);
		}
	#main ul {
		width: 315px;
		}
	
	#contact {
		width: 460px;
		background:rgba(68,111,130,.90);
		}
		
	#contact img {
		max-width: 50%;
		}
	
	#contact li {
		border: none;
		background: none;
		}
		
	#contact a {
		height: 30px;
		line-height: 30px;
		}
	}


/*********************
960 MEDIA QUERY
**********************/	
@media screen and (min-width: 960px){
	
	body{
		background-image: url('../img/bgimage-1800px.jpg');
		}
	
	h1 {
		font-size: 48px;
		text-shadow: 2px 2px 4px #000;
		}
	
	h2 {
		font-size: 28px;
		text-shadow: 2px 2px 4px #000;
		}
		
	h3 {
		font-size: 24px;
		text-shadow: 2px 2px 4px #000;
		}
		
	a:hover {
		color: #DBD6BC;
		}
			
	#headerwrapper {
		height: 60px;
		}
	
	#logo {
		float: left;
		margin-left: 10px;
		line-height: 50px;
		}
		
	#slogan {
		float: right;
		margin-right: 10px;
		line-height: 64px;
		text-shadow: 2px 2px 4px #000;
		}
	
	#contentwrapper {
		width: 960px;
		
		}
	
	#main {
		float: left;
		width: 610px;
		padding: 20px 10px;
		background-image: url('../img/otis-redding.png') repeat;
		}
		
	#main ul {
		width: 455px;
		}
		
	#main li{
		font-size: 26px;
		
		}
	
	#main p{
		font-size: 26px;
		
		}
	
	#contact{
		float: right;
		width: 300px;
		background-image: url('../img/otis-redding.png') repeat;
		}
		
	#contact img {
		max-width: 70%;
		}
	

/*********************
1200px MEDIA QUERY
**********************/	
@media screen and (min-width: 1200px){
	
	h2 {
		font-size: 36px;
		}

	#contentwrapper {
		width: 1160px;
		height: 650px;
		}
		
	#main {
		width: 800px;
		}
		
	#main p {
		width: 560px;
		margin: 20px auto 30px auto;
		
		}

		
}