@media screen and (max-width: 960px) {

	/* Not sure whether needed or not. overflow-y scroll is already in QS core.
	body {
		overflow-x: hidden;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}*/
	
	/**************/
	/*** HEADER ***/
	
	.mobile .logoContainer {
		display: none;
	}
	
	.mobile .schoolHeaderWidget .logoSpace {
		display: none;
	}
	
	/** Inner part of header **/
	.mobile .limitedWidthHeader {
		width: 96%;
		margin: 0 auto;
	}

	.mobile .navigationWidget .inside {
		width: 96%;
		padding: 0;
		margin: 0 auto;
	}

	/** Removes the space on the left of the menu for logo **/
	.mobile .navigationWidget .sizedContainer {
		margin-left:0px;
	}

	/** Don't need notifications section for mobile **/
	.mobile .schoolHeaderWidget .notifications {
		display: none;
	}

	/** Mailbox for mobile **/
	.mobile .schoolHeaderWidget .mailbox {
		position: absolute;
		top: 5px;
		right: 5px;
	}

	/** Make the greeting a little smaller **/
	.mobile .schoolHeaderWidget .userGreeting {
		float: left;
		color: #ccc;
		font-size: 10px;
	}

	.mobile .schoolHeaderWidget .headerTable .profilePic {
		display: none;
	}

	.mobile .schoolHeaderWidget .schoolName {
		padding-top: 0px;
		font-size: 12pt;
		line-height: 0px;
	}

	/** Make the user greeting move to the left **/
	.mobile .schoolHeaderWidget .headerTable td {
		padding-left: 0px;
		/** width: 100%; Causes trouble, because the padding on the style pushes this out to the left, and then 100% takes up room to the right. Moved down. **/
		float: left;
		clear: both;
	}
	
	.mobile .schoolHeaderWidget .headerTable td.navPart {
		width: 100%;
	}

	/** Not sure if this is good yet **/
	.mobile .superTopNavigation {
		float: right;
		clear: right;
		white-space: nowrap;
		display: block;
	}
		
	.mobile .navigationWidget .minSpaceForLogo {
		display: none;
	}
	

	/*** END: HEADER ***/
	/*******************/
	
	/**************/
	/*** FOOTER ***/
	/**************/
	
	/** This prevents the footer from taking 980px **/
	.mobile .footerWidget .footerTable {
		width: 100%;
	}
	

	
	/*************************/
	/*** MAIN CONTENT AREA ***/
	/*************************/
	
	/* Make main content and full-page dialog scale nicely within available width */
	.mobile .qsArticle {
		width: 96%;
		padding-top: 10px;
		padding-left: 0px;
		padding-right: 0px;
	}

	/*************************/
	/*** DIALOG BOXES ***/
	/*************************/

	/** Keep max-width of dialog box under control **/
	.mobile .ui-dialog {
		max-width: 96% !important;
	}
	
	/*************************/
	/*** Video Widget ***/
	/*************************/
	
	.mobile .ytplayer {
		max-width: 100%;
	}
	
	.mobile #ytplayer {
		max-width: 100%;
	}
	
	/*************************/
	/*** OPTIMIZED WIDGETS ***/
	/*************************/
	
	.mobile .PictureAndFormWidget td.picture-column {
		float: left;
	}
	
	.mobile .PictureAndFormWidget td.form-column {
		float: left;
	}
	
	.mobile .horizontalPanelWidget.action-panel {
		padding-bottom: 0px !important;
	}
}

/*
body {
	position: relative;
}*/

#mobile-debugger {
	display: none;
	position: fixed; 
	bottom: 0; 
	width: 100%; 
	height: 30px; 
	background: #ccc; 
	border: 1px solid red; 
	z-index: 2000; 
	font-size: 10px; 
	text-align: left;
	white-space: pre-line;
	line-height: 1;
	overflow-y: scroll;
}