@financial-times/o-grid/bookmarklet/bookmarklet.css

A 12 column responsive, flexbox-based grid system for laying out documents, templates and components.

#grid-displayer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: padding-box;
	pointer-events: none;
}
#grid-displayer .gd-container, #grid-displayer .gd-row, #grid-displayer .gd-column {
	height: 100%;
}

#grid-displayer-tools {
	line-height: 18px !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 100%;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6f6f6), color-stop(100%, #e3e3e3));
	background-image: -webkit-linear-gradient(#f6f6f6, #e3e3e3);
	background-image: -moz-linear-gradient(#f6f6f6, #e3e3e3);
	background-image: -o-linear-gradient(#f6f6f6, #e3e3e3);
	background-image: linear-gradient(#f6f6f6, #e3e3e3);
	padding: 7px 10px;
	border-bottom: 1px solid #C5C5C5;
	box-shadow: rgba(0, 0, 0, 0.1) 0 5px 5px;
}
#grid-displayer-tools:hover {
	opacity: 1 !important;
}
#grid-displayer-tools > div {
	float: left;
}
#grid-displayer-tools > div:last-child {
	float: right;
}
#grid-displayer-tools select, #grid-displayer-tools input {
	width: auto !important;
	height: auto !important;
	line-height: auto !important;
	margin: 0 !important;
	font: normal 12px "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
	color: #777777;
}
#grid-displayer-tools .gdt-field:first-child {
	margin-right: 20px;
}
#grid-displayer-tools .gdt-button {
	margin: 0 20px 0 10px;
}
#grid-displayer-tools .gdt-button a {
	text-decoration: none;
	font: normal 12px "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dadada), color-stop(100%, #cacaca));
	background-image: -webkit-linear-gradient(#dadada, #cacaca);
	background-image: -moz-linear-gradient(#dadada, #cacaca);
	background-image: -o-linear-gradient(#dadada, #cacaca);
	background-image: linear-gradient(#dadada, #cacaca);
	border-radius: 3px;
	color: #777777;
	border: 1px solid #BBB;
	padding: 5px;
	display: block;
}
#grid-displayer-tools .inner-field, #grid-displayer-tools select, #grid-displayer-tools #gdt-options div {
	background: #EAEAEA;
	box-shadow: rgba(0, 0, 0, 0.075) 0 1px 1px inset;
	color: #777777;
	border: 1px solid #C9C9C9;
	padding: 4px;
}
#grid-displayer-tools .outer-field, #grid-displayer-tools .gdt-field, #grid-displayer-tools .gdt-button {
	border-radius: 3px;
	border: 1px solid #F5F5F5;
}
#grid-displayer-tools select {
	border-radius: 3px;
}
#grid-displayer-tools label {
	display: inline-block;
	margin: 0;
	font: normal 12px "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #AAA;
	padding: 0 5px;
}
#grid-displayer-tools input {
	display: inline-block;
	background: transparent;
	border: 0;
	padding: 0 10px 0 0;
	box-shadow: transparent 0 0 0;
	width: 40px !important;
	text-align: right;
}
#grid-displayer-tools #gdt-options div {
	box-sizing: border-box;
	line-height: 17px;
}
#grid-displayer-tools #gdt-options div:not(.framework-specific) {
	display: inline-block;
}
#grid-displayer-tools #gdt-options div:first-child {
	border-radius: 3px 0 0 3px;
}
#grid-displayer-tools #gdt-options div:not(:last-child) {
	border-right: 0;
}
#grid-displayer-tools #gdt-options div:last-child {
	border-radius: 0 3px 3px 0;
}
#grid-displayer-tools #gdt-options, #grid-displayer-tools #gdt-ok, #grid-displayer-tools .framework-specific {
	display: none;
}