ScratchMobileHomepage.css

@-moz-document url("https://scratch.mit.edu/") {
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
/** page width -- if you nee a different width, just change this **/
body, #navigation {
	width: 500px;
}

#view, #view > .splash > .inner{
	width: 100%;
	box-sizing: border-box;
}

/** needs something up top, I guess let's throw the logo up there **/
#view > .splash > .inner::before {
	width: 100%;
	height: 50px;
	display: block;
	content: "";
    background-image: url("/images/logo_sm.png");
    background-repeat: no-repeat;
    background-position: center center;
}

/** toolbar **/
body {
	padding-bottom: 50px;
}
#view {
	margin-top: 0;
}

#navigation {
	top: auto;
	bottom: 0;
}
#navigation .inner {
	width: 100%;
}
#navigation li.logo {
	margin-right: 0 !important;
}
#navigation li.logo a {
	background: url(/favicon.ico) no-repeat center !important;
    width: 30px !important;
	margin: 0 5px 0 10px !important;
}

#navigation li.link:not(.right) > a {
	font-size: 0 !important;
    color: transparent !important;
	padding: 17px 8px 0 !important;
}
#navigation li.link a::after {
	color: white;
    font: normal normal normal 18px/1 FontAwesome;
}
#navigation li.create a::after {
	content: "\f0fe";
}
#navigation li.explore a::after {
	content: "\f14e";
}
#navigation li.discuss a::after {
	content: "\f075";
}
#navigation li.about a::after {
	content: "\f05a";
}
#navigation li.help a::after {
	content: "\f059";
}

#navigation li.search {
	margin: 0 8px !important;
}

#navigation li.account-nav .dropdown,
#navigation li.login-item .dropdown{
	bottom: 50px;
	border-radius: 0 !important;
}

#navigation li.account-nav .userInfo .avatar {
	margin-right: 0 !important;
}

#navigation li.account-nav .userInfo span {
	display: none;
}


/** homepage-specific stuff **/
.splash-header {
	display: block !important;
}

.box {
	display: block !important;
	width: calc( 100% - 20px ) !important;
	margin: 10px !important;
}
.intro {
	display: block !important;
	text-align: center;
}
.intro > div {
	width: auto !important;
	box-sizing: border-box;
}
.intro > div.video {
	margin-top: 10px;
	height: auto;
}

/** footer **/
#footer .inner {
	width: 100% !important;
	padding: 10px;
	box-sizing: border-box;
}



}