/* used for screen sizes with a width of 320px or lower */

html, body {
 width: auto;
 height: auto;
 overflow: none;
}

#PageWrapper {
 width: auto;
}

#Background {
	padding: 10px 10px 0;
}

/*= HEADER
---------------------------------------------*/
header {
	margin: 0;
	height: auto;
}

#PageWrapper > header h1 {
	width: 100%;
	padding: 0;
	margin-bottom: 10px;
}

header h1 a {
	width: auto;
	height: 70px;
}

header h1 a.HoverImg {
	height: auto;
	margin: auto;
	width: 75%;
}

header h1 a.HoverImg img {
	height: auto;
	position: static;
	width: 201%;
}

/*= NAVIGATION
--------------------------------------------- */
header nav {
	float: right;
	height: auto;
	margin: 0 auto;
}

header nav ul li#NavHome, header nav ul li#NavGallery {
	display: none;
}

header nav ul li#NavStaff, header nav ul li#NavStaff a {
	height: 185px;
}

/*= FOOTER
--------------------------------------------- */
footer section#FooterTop, footer section#FooterMiddle {
 display: none;
}

footer section#FooterBottom {
 background: url(../img/layout/footer-bg.jpg) 0 0 repeat;
 height: auto;
 padding: 10px;
}

footer section#FooterBottom > div {
 width: auto;
}

footer section#FooterBottom #FooterSocial, footer section#FooterBottom #FooterTerms, footer section#FooterBottom #FooterLogo {
 clear: both;
 display: block;
 float: none;
 width: auto;
}

footer #FooterSocial {
	float: left;
	width: 100%;
	padding-top: 5px;
}

footer #FooterSocial #FooterFacebook, footer #FooterSocial #FooterTwitter, footer #FooterSocial #FooterLinkedIn {
	margin: 0;
}

footer #FooterSocial #FooterFacebook {
	margin-left: 23%;
}

footer #FooterSocial #FooterTwitter {
	margin: 0 4%;
}

footer #FooterTerms {
 width: auto;
 padding: 10px 0 0 0;
}

footer #FooterTerms p {
	margin-bottom: 0;
}

footer section#FooterBottom div#FooterLogo {
	display: block;
}

footer #FooterLogo a {
	float: none;
	margin: 10px auto;
}

/*= HEADINGS
----------------------------------------------- */
h1, h2, h3,
article#job-listings h2, article#why-work-here h2, article#staff-profiles h2, article.JobListing h2, article#recent-tweets h2 {
 background: none;
 text-indent: 0;
 width: auto;
 height: auto;
 margin-left: 0;
 margin-right: 0;
 margin-bottom: 10px;
 padding-bottom: 0;
 padding-left: 0 !important;
 padding-right: 0;
}

#Content h2 {
	padding-left: 0;
}

#Content h3 {
	margin-bottom: 10px;
	top: 0;
	padding-left: 0;
	padding-top: 10px;
}

#Content p {
	margin-left: 0;
}

/*= CAROUSEL
------------------------------------------------ */
div#carousel-container {
 display: none;
}

img#Carousel-bg {
	display: none;
}

/*= HOMEPAGE
------------------------------------------------ */
article.cta, article.JobListing, article#recent-tweets {
 margin: 0 0 !important;
 padding: 0 0 10px 0;
 width: 100%;
 height: auto;
 background: url(../img/layout/hr.jpg) 0 100% repeat-x;
}

article.cta h2, article.JobListing h2, article#recent-tweets h2 {
	margin: 10px 0;
	padding: 0;
}

article.cta p {
	margin: 0 0 10px;
}

article.cta img {
 display: none;
}

article.cta a span {
 position: relative;
 top: auto;
 bottom: auto;
 left: auto;
 right: auto;
}

article.JobListing ul {
	border-top: none;
}

#Content article.JobListing ul li {
	padding-left: 0;
	padding-right: 30px;
}

article.JobListing ul li:first-child {
	border-top: 0;
}

article.JobListing a.view-all.top {
	display: none;
}

article#recent-tweets a.twitter {
	display: none;
}

/*= SUB NAVIGATION
------------------------------------------- */
#BarrelPlaceholder {
	display: none;
}

#Content nav {
	display: none;
}

/* =WHY JAGEX
------------------------------------------- */
div#intro {
	height: auto;
}

img#staff {
	width: 100%;
	margin-bottom: 15px;
	top: -10px;
}

article.game {
	margin: 0;
	height: auto;
	width: 100%;
	max-width: 450px;
}

article.game img {
	display: block;
	position: relative;
	width: 100%;
}

article.game div, article.game.right div {
	width: 91%;
	height: auto;
	padding: 20px 5%;
	right: 0;
	position: relative;
	display: block;
}

article#info img {
	display: none;
}

article#info h1 {
	margin-top: 20px;
	margin-bottom: 10px;
}

/* =PAGINATION
-------------------------------------- */
div.Pagination a.Previous {
	right: 20%;
}

div.Pagination a.Next {
	left: 20%;
	top: 128px;
}

/* =CAMBRIDGE
-------------------------------------- */
div.cambridge, div.social, div.giving {
	top: 0;
}

div#para-1, div#para-2, div#para-3 {
	margin: 0;
	padding: 0;
}

div#para-1 img, div#para-2 img, div#para-3 img, div#para-4 img {
	width: 100%;
	float: none;
	margin: 0;
}

div#para-2 img#social-photo-2 {
	margin-top: auto;
}

/* =BENEFITS
------------------------------------- */
div#perks {
	height: auto;
}

div#perks article {
	background: url(../img/layout/hr.jpg) 0 100% repeat-x !important;
	width: 100% !important;
	height: auto !important;
	position: relative;
	left: 0 !important;
	top: 0 !important;
	padding: 0 0 15px 0 !important;
	margin: 0 0 10px 0;	
}

div#perks article h1, div#perks article p {
	margin: 0 !important;
	padding: 0 !important;
}

div#perks article h1, div#perks article.light h1 {
	color: #007DB6;
	padding-bottom: 10px !important;
}

div#perks article p {
	color: #000;
}

div#perks img {
	display: none;
}

/* =AWARDS
----------------------------------- */
div.award {
	width: 90px;
	height: auto;
	margin: 0 4px 0 0;
}

div.award img {
	width: 100%;
}

/* =SOCIAL
------------------------------------ */
img#heart {
	width: 100%;
}

/* =MEET THE STAFF
------------------------------------ */
#bio, #avatar, .icons {
	display: none;
}

#selector {
	top: -50px;
}

#selector #selectorTop {
	background-position: 25% 0;
	top: 0;
	height: 50px;
}

#selector #selectorMiddle {
	margin: 0;
}

#selector #selectorMiddle a {
	width: 46%;
	height: auto;
	margin: 0 5px;
}

#selector #selectorMiddle a.random {
	display: none;
}

#selector #selectorMiddle a span {
	display: none;
}

#selector #selectorMiddle a img {
	width: 200%;
	height: auto;
	left: 0;
	position: relative;
	display: block;
}

#selector #selectorMiddle a.active img, #selector #selectorMiddle a:hover img {
	left: -100%;
}

#selector #selectorBottom {
	display: none;
}

.staffProfile #Content > .left {
	margin-left: 0;
	margin-top: 0;
	width: 100%;
	padding-bottom: 0;
}

.staffProfile #Content > .left img {
	width: 50%;
	margin: auto;
}

.staffProfile #Content > .left div#title {
	position: relative;
	margin: -60px auto 0 auto;
	bottom: auto;
	left: auto;
}

.staffProfile #Content > .left div#title span {
	position: relative;
	top: 70px;
	margin-top: 0;
	padding-bottom: 0;
}

.staffProfile #Content > .right {
	width: auto;
	margin-top: 10px;
	float: left;
}

.staffProfile #Content > .right .position {
	font-size: 22px;
}

/* =JOBS
-------------------------------- */
aside#contents {
	display: none;
}

.jobListing #intro, .jobDetails #intro {
	margin-bottom: 0;
	width: auto;
}

#Content article.JobListing {
	margin-bottom: 20px !important;
}

.jobDetails #Content > .left {
	background: none;
	padding-left: 0;
	width: auto;
}

.jobDetails #Content > .right {
	padding-left: 0;
	padding-top: 0;
	width: auto;
}

.jobDetails #Content > .right > .left {
	padding-left: 0;
	width: auto;
	clear: left;
	margin-bottom: 7px;
}

.jobDetails #Content > .right > .right {
	float: left;
	clear: left;
	width: auto;
	margin-bottom: 20px;
}

.jobDetails #Content > .right > .right p {
	margin-top: 0;
	margin-bottom: 20px;
}

.jobDetails #Content > .right hr {
	display: none;
}

.jobDetails #Content > .right a.ApplyNow {
	float: none;
	margin: 20px auto;
	position: relative;
	top: 30px;
}

.jobDetails #Content > .right div.share {
	margin: 60px 0;
}