Torq/css/responsive-767px-max.css

/*
	Responsive: Landscape phone to desktop/tablet
	========================================
*/

@media (max-width: 767px) {
	/* Padding to set content in a bit */
	body {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Negative indent the now static "fixed" navbar */
	.navbar-fixed-top,
	.navbar-fixed-bottom,
	.navbar-static-top {
		margin-left: -20px;
		margin-right: -20px;
	}

	/* Remove padding on container given explicit padding set on body */
	.container-fluid {
		padding: 0;
	}

	/* TYPOGRAPHY */
	/* Reset horizontal dl */
	.dl-horizontal dt {
		float: none;
		clear: none;
		width: auto;
		text-align: left;
	}
	.dl-horizontal dd {
		margin-left: 0;
	}

	/* GRID & CONTAINERS */
	/* Remove width from containers */
	.container {
		width: auto;
	}

	/* Fluid rows */
	.row-fluid {
		width: 100%;
	}

	/* Undo negative margin on rows and thumbnails */
	.row,
	.thumbnails {
		margin-left: 0;
	}

	.thumbnails > li {
		float: none;
		margin-left: 0; /* Reset the default margin for all li elements when no .span* classes are present */
	}

	/* Make all grid-sized elements block level again */
	[class*="span"],
	.uneditable-input[class*="span"],
	.row-fluid [class*="span"] {
		float: none;
		display: block;
		width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}

	.span12,
	.row-fluid .span12 {
		width: 100%;
		box-sizing: border-box;
	}

	.row-fluid [class*="offset"]:first-child {
		margin-left: 0;
	}

	/* FORM FIELDS */
	/* Make span* classes full width */
	.input-large,
	.input-xlarge,
	.input-xxlarge,
	input[class*="span"],
	select[class*="span"],
	textarea[class*="span"],
	.uneditable-input {
		display: block;
		width: 100%;
		min-height: 30px;
		box-sizing: border-box;
	}

	/* But don't let it screw up prepend/append inputs */
	.input-prepend input,
	.input-append input,
	.input-prepend input[class*="span"],
	.input-append input[class*="span"] {
		display: inline-block;
		width: auto;
	}

	.controls-row [class*="span"] + [class*="span"] {
		margin-left: 0;
	}

	/* Modals */
	.modal {
		position: fixed;
		top: 20px;
		left: 20px;
		right: 20px;
		width: auto;
		margin: 0;
	}

	.modal.fade {
		top: -100px;
	}

	.modal.fade.in {
		top: 20px;
	}
}

/* UP TO LANDSCAPE PHONE */
@media (max-width: 480px) {
	/* Block level the page header small tag for readability */
	.page-header h1 small {
		display: block;
		line-height: var(--base-line-height);
	}

	/* Update checkboxes for iOS */
	input[type="checkbox"],
	input[type="radio"] {
		border: 1px solid #ccc;
	}

	/* Remove the horizontal form styles */
	.form-horizontal .control-label {
		float: none;
		width: auto;
		padding-top: 0;
		text-align: left;
	}

	/* Move over all input controls and content */
	.form-horizontal .controls {
		margin-left: 0;
	}

	/* Move the options list down to align with labels */
	.form-horizontal .control-list {
		padding-top: 0;
	}

	/* Move over buttons in .form-actions to align with .controls */
	.form-horizontal .form-actions {
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Medias */
	/* Reset float and spacing to stack */
	.media .pull-left,
	.media .pull-right {
		float: none;
		display: block;
		margin-bottom: 10px;
	}

	/* Remove side margins since we stack instead of indent */
	.media-object {
		margin-right: 0;
		margin-left: 0;
	}

	/* Modals */
	.modal {
		top: 10px;
		left: 10px;
		right: 10px;
	}

	.modal-header .close {
		padding: 10px;
		margin: -10px;
	}

	/* Carousel */
	.carousel-caption {
		position: static;
	}
}