@media screen and (max-width: 700px) {
	
	/********************/
	/*** LOGIN WIDGET ***/
	
	.mobile .loginWidget header {
		display: none;
	}
	
	/* Shrink the log-off announcements */
	.mobile .loginWidget .announcement-section {
		min-height: 0px;
		width: 100%;
	}
	
	/* Make the white box */
	.mobile .loginWidget .wrap-login {
		width: 90%;
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0px 1px 12px 1px rgba(0, 0, 0, .1);
		border-radius: 5px;
		padding: 2%;
		padding-top: 1px;
	}

	.mobile .loginWidget .small-logo {
		display: inline-block;
	}

	/* Don't let it get too close to the left */
	.mobile .loginWidget .loginSection label {
		margin-left: 2%;
	}

	/* Don't let it exceed the width. Font-size prevents zoom-in on focus. */
	.mobile .loginWidget .loginSection input.inputField {
		width: 90%;
		font-size: 16px;
	}
	
	/* Use less space below forgot password **/
	.mobile .loginWidget .forgotPasswordLink {
		margin-bottom: 0px;
		margin-right: 2%;
	}

	/*** END: LOGIN WIDGET ***/
	/*************************/
	
	
	
	/*********************/
	/*** FOOTER WIDGET ***/
	
	.mobile .login-bg-left, .mobile .login-bg-right {
		display: none;
	}
	
	/** Change to vertical-stack style **/
	.mobile .footerWidget .left {
		float: left;
	}

	.mobile .footerWidget .right {
		float: left;
	}
	
	/** Make links take up one line each **/
	.mobile .footerWidget a {
		width: 100%;
		float: left;
		text-align: left;
	}

	.mobile .footerWidget {
		height: 100%;
		padding: 10px;
	}

	.mobile .footerWidget .copyright {
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: left;
		float: left;
		line-height: 1;
	}
	
	.mobile .footerWidget .footerTable {
		width: 100%;
	}
	
	/*** END: FOOTER WIDGET ***/
	/**************************/
	
	/**************/
	/*** HEADER ***/
	/**************/
	
	/** No need for supertops **/
	.mobile .superTopNavigation {
		display: none;
	}
	
	/** Main menu should now float in two columns **/
	.mobile .navigationWidget td {
		padding-bottom: 0px;
		width: 50%;
		float: left;
		padding: 2% 0%;
	}
	
	/** Selected menu should take same amount of padding */
	.mobile .navigationWidget td.selectedMenu {
		padding: 2% 0%;
	}
	
	/** This is to prevent the floated elements from sticking to the right due to the selected menu taking up more space **/
	.mobile .navigationWidget td.selectedMenu .box {
		padding: 0px;
		border: 0px solid transparent;
	}
	
	.mobile .schoolHeaderWidget .mobile-menu-expander {
		display: block;
	}
	
	/** Hide main menu, unless show-nav is activated **/ 
	.mobile .navigationWidget .inside {
		display: none;
	}
	
	.mobile .navigationWidget .inside.show-nav {
		display:block !important;
	}
	
	.mobile .superTopNavigation.show-nav {
		display:block !important;
	}
	
	/** Mailbox for mobile **/
	.mobile .schoolHeaderWidget .mailbox {
		top: 17px;
		right: 35px;
	}
	
	/****************/
	/*** SUBMENUS ***/
	/****************/

	.mobile .subMenusWidget {
		width: 100%;
		margin-top: 3px;
		margin-bottom: 15px;
	}

	.mobile .subMenusWidget .menuItem {
		display: inline-block;
		color: #888;
		text-align: left;
		background: #FAFAFA;
		border: 1px solid transparent;
		margin-right: 10px;
		margin-bottom: 8px;
		padding: 0px 3px;
		font-size: 0.8em;
	}
	
	.mobile .subMenusWidget .qs-menuName {
		padding: 0px;
	}

	.mobile .subMenusWidget .selected {
		background: rgb(242, 246, 248);
		border: 1px solid #007a9f;
		color: #003747;
	}

	.mobile .subMenusWidget .menuItem:hover {
		background: rgb(242, 246, 248);
		border: 1px solid #007a9f !important;
		color: #003747;
	}
	
	
	/**************************/
	/*** PAGE HEADER WIDGET ***/
	/**************************/
	
	.mobile .pageHeaderWidget h1 {
		margin-top: 0px;
		font-size: 2em;
		white-space: normal;
	}

	.mobile .pageHeaderWidget h2 {
		font-size: 0.7em;
	}

	/** Take up less space below the page header **/
	.mobile .pageHeaderWidget .bottom {
		margin-bottom: 5px;
	}
	
	
	/*********************/
	/*** SEARCH WIDGET ***/
	/*********************/
	
	/** Search should take full width, and have some space below **/
	.mobile .searchWidget .box {
		width: 100%;
		margin-bottom: 5px;
	}

	/** Inner part should take full width **/
	.mobile .searchWidget .box > table {
		width: 100%;
	}
	
	/** Pull arrow to the right a bit **/
	.mobile .searchWidget .arrowHolder {
		padding-right: 0px;
	}

	/** Squash up the right part a bit **/
	.mobile .searchWidget .magHolder {
		width: 30px;
		padding-right: 0px;
	}
	
	/*********************/
	/*** BUTTONS ***/
	/*********************/
	
	.mobile .allButtons.quickAddButtonWidget, .mobile .allButtons.emphasizedButtonWidget, .mobile .allButtons.demotedButtonWidget {
		padding-top: 1%;
		padding-bottom: 1%;
		margin: 2% 1% 1% 1%;
	}
	
	/**************************/
	/*** DATA TABLE WIDGET  ***/
	/**************************/
	
	/** 1. Pull table to the left, then add equivalent padding. This allows the table to be flush to the left when scrolling **/
	.mobile .dataTableWidget.fullwidth {
		clear: both;
	
		width: 102%;
		margin-left: -2%;
		padding-left: 2%;
		
		margin-right: 2%;
		
		white-space: nowrap;
		overflow-y: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	
	/** We could set the width, but we want to see if a responsive table can work **/
	.mobile .dataTableWidget .dataTable {
		/** width: 960px; **/
	}
	
	/** No need for floating table headers **/
	.mobile .dataTableWidget thead.persistentOriginalHeader {
		visibility: visible !important;
	}
	
	/** No need for floating table headers **/
	.mobile .dataTableWidget thead.persistentHeader {
		display: none !important;
	}
	
	/********************/
	/*** PANEL WIDGET ***/
	/********************/

	/** Rounded sections in student details. Make each section take full width. **/
	.mobile .panelWidget {
		float: left;
		width: 96%;
		padding: 2%;
		margin-bottom: 2%;
	}
	
	/**************************/
	/*** COLUMN PANEL WIDGET ***/
	/**************************/
	
	.mobile #ytplayer {
		max-width: 100%;
	}

	/**************************/
	/*** COLUMN PANEL WIDGET ***/
	/**************************/

	.mobile .columnPanelWidget td.col {
		padding-right: 0px;
		float: left;
	}
	
	/** Sometimes the td.col will have a fixed width on it in the style **/
	.mobile .columnPanelWidget td.col[style] {
		width: 100% !important;
	}
	
	/**************************/
	/*** QUERY PANEL WIDGET ***/
	/**************************/

	/** Makes the label take up the full row **/
	.mobile .queryPanelWidget .tableLabel {
		padding: 0px;
		width: 96%;
		padding-left: 0px !important;
		padding-right: 0px !important;
		float: left;
	}

	/** Makes the value appear below the label **/
	.mobile .queryPanelWidget .tableValue {
		position: relative;
		float: left;
		width: 96%;
	}

	/** [aris] Nice to have space **/
	.mobile .queryPanelWidget .tableValue {
		margin-bottom: 5px;
	}
	
	/** [aris] Nice to have space **/
	.mobile .queryPanelWidget .fullrow {
		margin-bottom: 5px;
		padding-bottom: 5px;
	}

	/** Not sure if needed **/
	.mobile .qpwRow {
		float:left;
		width:100%;
	}
	
	/*************************/
	/*** DIALOG BOXES ***/
	/*************************/

	/** We don't need overlay **/
	.mobile .ui-widget-overlay {
		display: none;
	}

	/** Size it up right **/
	.mobile .ui-dialog {
		width: 96% !important;
		top: 2% !important;
	}
	
	/** Give some space below buttons so a click doesn't bring up the browser panel on ios **/
	.mobile .ui-dialog .ui-dialog-buttonpane {
		padding-bottom: 50px;
	}
	
	/**************/
	/*** INPUTS ***/
	/**************/

	/** Just like table value, it takes 96% **/
	.mobile .textAreaWidget {
		width: 95% !important;
	}
	
	.mobile input {
		font-size: 16px;
	}

	.paperWidget[style] {
		width: 100% !important;
	}
	
	/******************************/
	/*** ATTENDANCECHARTWIDGET ****/
	/******************************/
	
	.mobile .attendanceChartWidget .pieChartWrapper {
		float: none;
	}
	
}