jmwhittaker

body {
  background-color: #CED6DC;
}

.switch {
  position: relative;
  padding-bottom: 10px;
}

/* switch component */

jmwhittaker

<div class="box box--blue u-padding-A--12">
  <p class="u-text--16">Hello World</p>
</div>

<div class="box box--red u-padding-V--8">
  <p class="u-text--10">Hello World</p>
</div>

jmwhittaker

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$small6: 6;
$small7: 7;
$small8: 8;
$small9: 9;

jmwhittaker

.container {
  font-family: helvetica, sans-serif;
  padding-right:30px; /* Same padding as the img required */
}

.item {
  display: inline-block;
  text-align:left;
  padding-right:30px; /* Same padding as the img required */
  background:url(  "http://www.lorempixel.com/30/30") no-repeat center right; /* set img as background & position */

jmwhittaker

[st-text] {
	font-family: helveticaNeue, helvetica;
	font-size:14px;
	color:blue;
}

[st-text~="fixed"] { font-size:8px }
[st-text~="fixed:18"] { font-size:18px }
[st-text~="fixed:11"] { font-size:11px }
[st-text~="red"] { color:red }

jmwhittaker

.ghx-avatar .ghx-avatar-img {
    width:42px;
    height: 42px;
    border-radius:2px;
}

.ghx-avatar {
    position: absolute;
    top: 5px;
    right: 5px;

jmwhittaker

body, table td, select {
    font-family: "Helvetica Neue", helvetica, sans-serif;
    font-size: 28px;
    color: #333 !important;
}

.screenHeader {
    display: none !important;
}

jmwhittaker

* {
	box-sizing:border-box;
}
.multimedia-container {
	width:528px;
	border-radius:5px;
	overflow:hidden;
	height:264px;
	
	/* Just for testing */

jmwhittaker

* {
	box-sizing:border-box;
}


.multimedia-container {
	/* Size of container set via JS depending upon col width */
	width:528px;
	height:264px;
	border-radius:5px;

jmwhittaker

/**
 * The first commented line is your dabblet’s title
 */


.badge {
	position:absolute;
	left:200px;
	top:200px;
	background:red;