#logo{
	position: absolute;
	width: 450px;
	height: 240px;
	top: 50px;
	left: 50%;
	margin-left: -225px;
	background-image: url(images/non-retina/logo&name.png);
	background-size: 450px 240px;
}



#the_links{
	position: absolute;
	width: 1200px;
	height: 200px;
	left: 50%;
	top: 300px;
	margin-left: -420px;
	font-size: 20px;
}
		#the_links .link_groups{
			float: left;
			width: 90px;
			height: 90px;
			margin-top: 0px;
			margin-right: 100px;
		}
		#the_links #profile{
			background-image: url(images/non-retina/profile.png);
		}
		#the_links #apps{
			background-image: url(images/non-retina/apps.png);
		}
		#the_links #links{
			background-image: url(images/non-retina/links.png);
		}
		#the_links #news{
			background-image: url(images/non-retina/news.png);
		}
		#the_links #blog{
			background-image: url(images/non-retina/blog.png);
		}
		#the_links #profile:hover, #the_links #apps:hover, #the_links #links:hover, #the_links #news:hover, #the_links #blog:hover{
		  background-position: 90px 90px;
		}
		#the_links #profile, #the_links #apps, #the_links #links, #the_links #news, #the_links #blog{
		  background-size: 90px 180px;
		  background-position: 90px 0px;
		}
		






@media only screen and (max-device-width : 480px) {
	body{
		width: 95%;
		overflow-x: hidden;
	}
	#logo{
		float: left;
		width: 210px;
		height: 25px;
		margin-top: -35px;
		margin-left: 5px;
		left: 0px;
		background-image: url(images/non-retina/smaller_logo.png);
		background-size: 210px 25px;
	}


	#the_links{
		float: left;
		width: 20%;
		top: 40px;
		margin-top: 0px;
		margin-left: -25px;
		left: 10%;
	}
		#the_links .link_groups{
			margin-top: 15px;
			width: 45px;
			height: 45px;
			background-size: 45px 90px;
		}
		#the_links #profile{
			background-image: url(images/non-retina/profile.png);
		}
		#the_links #apps{
			background-image: url(images/non-retina/apps.png);
		}
		#the_links #links{
			background-image: url(images/non-retina/links.png);
		}
		#the_links #news{
			background-image: url(images/non-retina/news.png);
		}
		#the_links #blog{
			background-image: url(images/non-retina/blog.png);
		}
		#the_links #profile:hover, #the_links #apps:hover, #the_links #links:hover, #the_links #news:hover, #the_links #blog:hover{
		  background-position: 45px 45px;
		}
		#the_links #profile, #the_links #apps, #the_links #links, #the_links #news, #the_links #blog{
		  background-size: 45px 90px;
		  background-position: 45px 0px;
		}

}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	body{
		width: 95%;
		overflow-x: hidden;
	}
#the_title{

    width: 450px;
    height: 240px;
    position: absolute;
    left: 50%;
    top: 20px;
    margin-left: -225px;
}

#logo{

 width: 450px;
    height: 240px;
background-image:url(images/logo&name.png)

}
    


#the_links{
	position: absolute;
	width: 400px;
	height: 200px;
	left: 50%;
	top: 280px;
	margin-left: -192px; /* original value given by Joe : -175px */
	font-family: DIN_Light;
	font-size: 20px;
	/*background-color: #888*/;
}


#the_links #profile{
}

		#the_links .link_groups{
			float: left;
			width: 60px;
			height: 60px;
			margin-right: 20px;
		}
	


		  #the_links #profile{
		    background-image: url(images/link_icons_profile@2x.png);
		  }
		  #the_links #apps{
		  	background-image: url(images/link_icons_apps@2x.png);
		  }
		  #the_links #links{
		  	background-image: url(images/link_icons_links@2x.png);
		  }
		  #the_links #news{
		  	background-image: url(images/link_icons_news@2x.png);
		  }
		  #the_links #blog{
		  	background-image: url(images/link_icons_blog@2x.png);
		  }
		  #the_links #profile:hover, #the_links #apps:hover, #the_links #links:hover, #the_links #news:hover, #the_links #blog:hover{
		    background-position: 60px 60px;
		  }
		  #the_links #profile, #the_links #apps, #the_links #links, #the_links #news, #the_links #blog{
		    background-size: 60px 120px;
		    background-position: 60px 0px;
		  }







}