widgets edit mode fixes and improvements

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.jf-widgets-layout-container {
//  background-color: #e9e9e9;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  .widgets-padder {
    position: absolute;
    .widget-wrapper {
      position: absolute;
      transition: all .5s;//top .5s, bottom .5s, left .5s, right .5s;
      .widget-container {
        white-space: nowrap;
        position: relative;
        width: 100%;
        height: 100%;
        background-color: white;
        border: dotted 1px black;
        .widget-spinner {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.5);
          z-index: 10000000;

          .spinner-msg {
            position: absolute;
            height: 70px;
            width: 70px;

            color: @grayFontGeneral;
            text-align: center;
            top: 50%;
            left: 50%;

            margin-top: -35px;
            margin-left: -35px;

          }

          .icon-hourglass {
            background-image: url('data:image/png;base64,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');
            background-repeat: no-repeat;
            animation: spin 0.8s infinite linear;
            background-size: 70px 70px;
            width: 70px;
            height: 70px;
          }
        }
      }
      .select-widget-mode {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.65);
        z-index: 10000000;
        .widget-selector {
          position: absolute;
          width: 70%;
          height: 40px;
          left: 15%;
          right: 15%;
          top: ~"calc(50% - 20px)"
        }
      }
      .edit-mode-actions {
        z-index: 10000001;
        border: 1px solid black;
        position: absolute;
        bottom: 5px;
        right: 5px;
        padding: 1px 2px 0 2px;
        opacity: 0.2;
        transition: opacity .5s;
        &:hover {
          opacity: 1;
        }
        i {
          cursor: pointer;
          color: black;
          transition: color .5s;
          &:hover {
            color: lightgreen;
          }
        }
      }

    }
  }
}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.jf-widgets-layout-container {
//  background-color: #e9e9e9;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  .widgets-padder {
    position: absolute;
    .widget-wrapper {
      position: absolute;
      transition: all .1s;//top .5s, bottom .5s, left .5s, right .5s;
      .widget-container {
        white-space: nowrap;
        position: relative;
        width: 100%;
        height: 100%;
        background-color: white;
        border: dotted 1px black;
        .widget-spinner {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.5);
          z-index: 10000000;

          .spinner-msg {
            position: absolute;
            height: 70px;
            width: 70px;

            color: @grayFontGeneral;
            text-align: center;
            top: 50%;
            left: 50%;

            margin-top: -35px;
            margin-left: -35px;

          }

          .icon-hourglass {
            background-image: url('data:image/png;base64,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');
            background-repeat: no-repeat;
            animation: spin 0.8s infinite linear;
            background-size: 70px 70px;
            width: 70px;
            height: 70px;
          }
        }
      }
      .select-widget-mode {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.65);
        z-index: 10000000;
        .widget-selector {
          position: absolute;
          width: 70%;
          height: 40px;
          left: 15%;
          right: 15%;
          top: ~"calc(50% - 20px)"
        }
      }
      .edit-mode-actions {
        z-index: 10000001;
        border: 1px solid black;
        position: absolute;
        bottom: 5px;
        right: 5px;
        padding: 1px 2px 0 2px;
        opacity: 0.2;
        transition: opacity .5s;
        &:hover {
          opacity: 1;
        }
        i {
          cursor: pointer;
          color: black;
          transition: color .5s;
          &:hover {
            color: lightgreen;
          }
        }
      }

    }
  }
}


Changed position of #splash for govathon.html

@import 'grid.lessimport';
@import 'color.lessimport';
@import 'fonts.lessimport';
@import 'rules.lessimport';
@import 'anim.lessimport';

@import 'base.lessimport';
@import 'forms.lessimport';
@import 'tables.lessimport';

@import 'printcss.lessimport';
@import 'media.lessimport';

//STRUCTURE

#wrapper {
	.unit;
	padding: 50px;
	border: 1px solid @darkestgrey;
}
//NAV

nav {
	height: 40px;
	width: 100%;
	.background-linear-gradient(@lightblack, @midblack);
}
	.nav.back {
		height: 40px;
		position: absolute;
			top: 0; left: 0;
		width: 100%;
		z-index: -1;
		margin: 0; padding: 0;
		background: white;
	}
	nav ul { width: 100%; }
		#gohome { padding-top: 0; }
		#gologin { float: right; }
		#gosettings { float: right; padding-top: 0; }
	nav li {
		margin: 0 10px;
		padding-top: 5px;
	}

	nav a, nav i {
		font-weight: normal;
		color: white;
	}
		nav a:hover, nav a:active, nav i:hover, nav i:active {
			color: @lightlightblue;
		}
//ICONS

i {

}

//UNITS

.dash, .add {
	.contentunit;
	padding: 0;
}
.dash {
	min-width: 42%;
	margin: 40px  30%;
}
.dash:first-child { position: relative; right: 20%; }
	.dash h1 {
		font-size: 1.5em;
		width: 100%;
		margin: 0 auto;
		padding: 7px 0 5px 0;
		text-align: center;
		.background-linear-gradient(@transblack, @grey);
		border-bottom: 1px solid @darkgrey;
		.border-radius(10px 10px 0 0);
	}

	.mobile {
		width: 300px; min-width: 300px;
		height: 450px;
	}

		#mobile-1 {
			position: relative;
			background: transparent url('images/mobile2.png') center center no-repeat;
			margin-left: 40%;
			i { position: absolute; }

		}

//BUTTONS

button {
//        .unit;
	margin: 2px 5px;
	.border-radius(50px);
	border: 2px transparent;
	background: transparent;
	.slowtrans;

}
        button:hover, button:active {
        	border-color: @darkergrey;
		.fasttrans;
	}

//HOME / PRES

#splash {
	background: @grey url('images/splash3.jpg') center top no-repeat;
	width: 100%;
	min-height: 500px;
	margin-top: 0px;
	z-index: 100;

	h1#open {
		color: white;
		font-size: 150px;
		text-align: center;
		text-shadow: 0px 0 23px black;
		line-height: 200px;
		opacity: 0;

		.transition(opacity, 15s, ease-in-out, 10s);
		}
}
	#splash:hover h1#open { opacity: 1; .transition(opacity, 10s, ease-in-out, 0s); }

	.texty {
		width: 100%;
		padding: 0 150px;
		h1 { font-size: 70px; }
		h2 { font-size: 50px; color: @grey; }

		h2 a { font-size: 50px; color: @grey; display: block; width: 100%; margin: 0px 0px 20px -10px;;}
		text-align: center;

	}
	.bio { background: white; display: block;  width: 50%; border: 8px solid @grey; margin: 20px 25%; padding: 20px; text-align: center; }
	.bio em { background: transparent; color: @lightlightblue; font-size: 1.2em; border: none; .box-shadow(none); display: block; width: 100%; }

.room { display: block; padding-top: 700px;  }

h3 { font-size: 30px; text-align: center; color: @grey; }

#map {
	background: transparent url('images/map.jpg') center center no-repeat;
	height: 500px;
}

#special { padding: 20px; }
#special li { width: 100%; }
#special li:before { content: "Train in: "; }

.RED { color: @red; } .GOLD { color: @orange; } .BLUE { color: @blue; } .GREEN { color: @green; }
.scheduled { font-style: italic;   }
.scheduled:after { content: "**"; }

.lists {
	width: 50%;
	margin-left: 25%;

	select { font-size: 1.5em; font-weight: bold;
		background: @lightestgrey; .border-radius(5px);
		color: @darkergrey; padding: 10px 30px;
		margin: 20px auto;

	}
	ul { width: 47%; margin-bottom: 20px;  }
	li, li * { width: 100%; font-weight: bold; font-size: 1.1em; text-align: center; margin: 1px;}
	li:first-child { color: @darkgrey; }
	li:first-child:after {
		content: "train arriving in";
		display: block;
		width: 100%;
		text-align: center;
		font-style: italic;
		font-size: 0.8em;
	}
}
	.legalmain {
		.legal;
		font-size: 12px;
		color: @darkgrey;
		width: 100%;
		padding: 10px 35%;
		text-align: center;
		display: block;
	}

@import 'grid.lessimport';
@import 'color.lessimport';
@import 'fonts.lessimport';
@import 'rules.lessimport';
@import 'anim.lessimport';

@import 'base.lessimport';
@import 'forms.lessimport';
@import 'tables.lessimport';

@import 'printcss.lessimport';
@import 'media.lessimport';

//STRUCTURE

#wrapper {
	.unit;
	padding: 50px;
	border: 1px solid @darkestgrey;
}
//NAV

nav {
	height: 40px;
	width: 100%;
	.background-linear-gradient(@lightblack, @midblack);
}
	.nav.back {
		height: 40px;
		position: absolute;
			top: 0; left: 0;
		width: 100%;
		z-index: -1;
		margin: 0; padding: 0;
		background: white;
	}
	nav ul { width: 100%; }
		#gohome { padding-top: 0; }
		#gologin { float: right; }
		#gosettings { float: right; padding-top: 0; }
	nav li {
		margin: 0 10px;
		padding-top: 5px;
	}

	nav a, nav i {
		font-weight: normal;
		color: white;
	}
		nav a:hover, nav a:active, nav i:hover, nav i:active {
			color: @lightlightblue;
		}
//ICONS

i {

}

//UNITS

.dash, .add {
	.contentunit;
	padding: 0;
}
.dash {
	min-width: 42%;
	margin: 40px  30%;
}
.dash:first-child { position: relative; right: 20%; }
	.dash h1 {
		font-size: 1.5em;
		width: 100%;
		margin: 0 auto;
		padding: 7px 0 5px 0;
		text-align: center;
		.background-linear-gradient(@transblack, @grey);
		border-bottom: 1px solid @darkgrey;
		.border-radius(10px 10px 0 0);
	}

	.mobile {
		width: 300px; min-width: 300px;
		height: 450px;
	}

		#mobile-1 {
			position: relative;
			background: transparent url('images/mobile2.png') center center no-repeat;
			margin-left: 40%;
			i { position: absolute; }

		}

//BUTTONS

button {
//        .unit;
	margin: 2px 5px;
	.border-radius(50px);
	border: 2px transparent;
	background: transparent;
	.slowtrans;

}
        button:hover, button:active {
        	border-color: @darkergrey;
		.fasttrans;
	}

//HOME / PRES

#splash {
	background: @grey url('images/splash3.jpg') center top no-repeat;
	width: 100%;
	min-height: 500px;
	margin-top: -42px;
	z-index: 100;

	h1#open {
		color: white;
		font-size: 150px;
		text-align: center;
		text-shadow: 0px 0 23px black;
		line-height: 200px;
		opacity: 0;

		.transition(opacity, 15s, ease-in-out, 10s);
		}
}
	#splash:hover h1#open { opacity: 1; .transition(opacity, 10s, ease-in-out, 0s); }

	.texty {
		width: 100%;
		padding: 0 150px;
		h1 { font-size: 70px; }
		h2 { font-size: 50px; color: @grey; }

		h2 a { font-size: 50px; color: @grey; display: block; width: 100%; margin: 0px 0px 20px -10px;;}
		text-align: center;

	}
	.bio { background: white; display: block;  width: 50%; border: 8px solid @grey; margin: 20px 25%; padding: 20px; text-align: center; }
	.bio em { background: transparent; color: @lightlightblue; font-size: 1.2em; border: none; .box-shadow(none); display: block; width: 100%; }

.room { display: block; padding-top: 700px;  }

h3 { font-size: 30px; text-align: center; color: @grey; }

#map {
	background: transparent url('images/map.jpg') center center no-repeat;
	height: 500px;
}

#special { padding: 20px; }
#special li { width: 100%; }
#special li:before { content: "Train in: "; }

.RED { color: @red; } .GOLD { color: @orange; } .BLUE { color: @blue; } .GREEN { color: @green; }
.scheduled { font-style: italic;   }
.scheduled:after { content: "**"; }

.lists {
	width: 50%;
	margin-left: 25%;

	select { font-size: 1.5em; font-weight: bold;
		background: @lightestgrey; .border-radius(5px);
		color: @darkergrey; padding: 10px 30px;
		margin: 20px auto;

	}
	ul { width: 47%; margin-bottom: 20px;  }
	li, li * { width: 100%; font-weight: bold; font-size: 1.1em; text-align: center; margin: 1px;}
	li:first-child { color: @darkgrey; }
	li:first-child:after {
		content: "train arriving in";
		display: block;
		width: 100%;
		text-align: center;
		font-style: italic;
		font-size: 0.8em;
	}
}
	.legalmain {
		.legal;
		font-size: 12px;
		color: @darkgrey;
		width: 100%;
		padding: 10px 35%;
		text-align: center;
		display: block;
	}


[INTERNAL][FIX] sap.m.ObjectStatus: Standard text color is now according to spec

Change-Id: I2b5ed5f531dd542c2e9786e09df1c506dba93bcb
BCP: 1780297153

/* =================================== */
/* CSS for control sap.m/ObjectStatus  */
/* Base theme                          */
/* =================================== */

.sapMObjStatus {
	font-size: @sapMFontMediumSize;
	color: @sapUiNeutralText;
	display: inline-block;
}

.sapMObjStatus > .sapMObjStatusTitle {
	color: @sapUiContentLabelColor;
}

.sapMObjStatusNone > .sapMObjStatusText,
.sapMObjStatusNone > .sapMObjStatusIcon {
	color: @sapUiGroupTitleTextColor;
}

.sapMObjStatusError > .sapMObjStatusText,
.sapMObjStatusError > .sapMObjStatusIcon {
	color: @sapUiNegativeText;
}

.sapMObjStatusWarning > .sapMObjStatusText,
.sapMObjStatusWarning > .sapMObjStatusIcon {
	color: @sapUiCriticalText;
}

.sapMObjStatusSuccess > .sapMObjStatusText,
.sapMObjStatusSuccess > .sapMObjStatusIcon {
	color: @sapUiPositiveText;
}

.sapMObjStatusIcon > .sapUiIcon {
	font-size: 1rem;
}

.sapMObjStatusIcon {
	padding-right: .5rem;
}

.sapMObjStatus > .sapMObjStatusTitle {
	padding-right: .25rem;
}

.sapUiTableCell .sapMObjStatus {
	font-size: @sapMFontMediumSize;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.sapUiTableCell .sapMObjStatusText,
.sapUiTableCell .sapMObjStatusTitle,
.sapUiTableCell .sapMObjStatusIcon .sapUiIcon,
.sapMListTbl .sapMObjStatusText,
.sapMListTbl .sapMObjStatusTitle,
.sapMListTbl .sapMObjStatusIcon .sapUiIcon {
	vertical-align: middle;
}

.sapUiForm .sapMObjStatusIcon,
.sapUiForm .sapMObjStatusTitle,
.sapUiForm .sapMObjStatusText {
	display: inline-block;
	line-height: normal;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/*
	FIX for 1580155978 and 1680267289.
	Fiori design guidelines say that statuses should be specially styled for forms
	and share looks with other text only controls.
*/
.sapUiForm.sapUiFormEdit .sapMObjStatus {
	line-height: 3rem;
}

.sapUiSizeCompact .sapUiForm.sapUiFormEdit .sapMObjStatus {
	line-height: 2rem;
}

/* ============================================= */
/* FIX: CSS 0120061532 0001316230 2014 */
/* ============================================= */
.sapMLIBActive .sapMObjStatusNone > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusNone > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusError > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusError > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusWarning > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusWarning > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusSuccess > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusSuccess > .sapMObjStatusIcon {
	color: @sapUiListActiveTextColor;
}

/* Condensed size */
.sapUiSizeCondensed .sapUiTableCell>.sapMObjStatus>.sapMObjStatusText {
	line-height: 1.5rem;
	vertical-align: middle;
	font-size: @sapMFontMediumSize;
}

/* =================================== */
/* CSS for control sap.m/ObjectStatus  */
/* Base theme                          */
/* =================================== */

.sapMObjStatus {
	font-size: @sapMFontMediumSize;
	color: @sapUiNeutralText;
	display: inline-block;
}

.sapMObjStatus > .sapMObjStatusTitle {
	color: @sapUiContentLabelColor;
}

.sapMObjStatusNone > .sapMObjStatusText
.sapMObjStatusNone > .sapMObjStatusIcon {
	color: @sapUiNeutralText;
}

.sapMObjStatusError > .sapMObjStatusText,
.sapMObjStatusError > .sapMObjStatusIcon {
	color: @sapUiNegativeText;
}

.sapMObjStatusWarning > .sapMObjStatusText,
.sapMObjStatusWarning > .sapMObjStatusIcon {
	color: @sapUiCriticalText;
}

.sapMObjStatusSuccess > .sapMObjStatusText,
.sapMObjStatusSuccess > .sapMObjStatusIcon {
	color: @sapUiPositiveText;
}

.sapMObjStatusIcon > .sapUiIcon {
	font-size: 1rem;
}

.sapMObjStatusIcon {
	padding-right: .5rem;
}

.sapMObjStatus > .sapMObjStatusTitle {
	padding-right: .25rem;
}

.sapUiTableCell .sapMObjStatus {
	font-size: @sapMFontMediumSize;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.sapUiTableCell .sapMObjStatusText,
.sapUiTableCell .sapMObjStatusTitle,
.sapUiTableCell .sapMObjStatusIcon .sapUiIcon,
.sapMListTbl .sapMObjStatusText,
.sapMListTbl .sapMObjStatusTitle,
.sapMListTbl .sapMObjStatusIcon .sapUiIcon {
	vertical-align: middle;
}

.sapUiForm .sapMObjStatusIcon,
.sapUiForm .sapMObjStatusTitle,
.sapUiForm .sapMObjStatusText {
	display: inline-block;
	line-height: normal;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/*
	FIX for 1580155978 and 1680267289.
	Fiori design guidelines say that statuses should be specially styled for forms
	and share looks with other text only controls.
*/
.sapUiForm.sapUiFormEdit .sapMObjStatus {
	line-height: 3rem;
}

.sapUiSizeCompact .sapUiForm.sapUiFormEdit .sapMObjStatus {
	line-height: 2rem;
}

/* ============================================= */
/* FIX: CSS 0120061532 0001316230 2014 */
/* ============================================= */
.sapMLIBActive .sapMObjStatusNone > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusNone > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusError > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusError > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusWarning > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusWarning > .sapMObjStatusIcon,
.sapMLIBActive .sapMObjStatusSuccess > .sapMObjStatusText,
.sapMLIBActive .sapMObjStatusSuccess > .sapMObjStatusIcon {
	color: @sapUiListActiveTextColor;
}

/* Condensed size */
.sapUiSizeCondensed .sapUiTableCell>.sapMObjStatus>.sapMObjStatusText {
	line-height: 1.5rem;
	vertical-align: middle;
	font-size: @sapMFontMediumSize;
}


Add styles for bulleted list

Add styles for bulleted list

Test Plan: Load test.html locally and enter a markdown bulleted list in the editor.

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D4090

//
// Edit this file in the *perseus* repo!
//

// Steal from webapp/stylesheets/shared-package/variables.less
@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;

#perseus {
    position: relative;
}

&,  // and moar specificity...
#answer_area input[type=text],
#answer_area input[type=number] {
    &.perseus-input-size-normal,
    {
        width: 80px;
    }

    &.perseus-input-size-small {
        width: 40px;
    }
}

.perseus-widget-radio div,
.perseus-widget-radio div > p {
    /* TODO(alpert): Find a better way of doing inline renderers */
    display: inline;
}

.perseus-widget-radio div.instructions {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

#examples > div > ul {
    // React and Perseus.Renderer add an extra layer each to what qtip expects
    list-style-type: disc;
}

.perseus-widget-radio .perseus-textarea-pair,
.perseus-widget-radio .perseus-textarea-underlay {
    display: block;
}

.framework-perseus {
    div.paragraph {
        font-size: 14px;
        margin: 22px 0px;
    }

    ul {
        margin: -11px 0px;
        padding-left: 35px;
    }

    li {
        list-style-type: disc;
    }

    table {
        font-size: 14px;  // to match <p>

        th, td {
            padding: 5px 10px;
            text-align: left;

            &[align=center] {
                text-align: center;
            }

            &[align=right] {
                text-align: right;
            }
        }

        th {
            border-bottom: 2px solid #ccc;
            font-weight: bold;
            padding-bottom: 2px;
        }

        tr:nth-child(odd) {
            // Doesn't work in IE8 :(
            td {
                background-color: #f3f3f3;
            }
        }
    }
}

//
// Interactive graph
//

.perseus-widget-interactive-graph {
    padding: 25px 25px 0 0;
    position: relative;
    img {
        position: absolute;
    }
}

//
// Expression
//

.perseus-widget-expression {
    &,
    > .output,
    > .output > .tex,
    > .output > .placeholder {
        display: block;
    }
}

.perseus-widget-expression > input,
#answer_area .perseus-widget-expression > input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    max-width: 240px;
    width: 100%;
    margin-bottom: 5px;
}

.perseus-widget-expression > .output > .tex {
    overflow-x: auto;
}

.perseus-widget-expression > .output > .placeholder {
    position: relative;
    height: 40px;
    overflow-y: hidden;
}

.perseus-widget-expression > .output > .placeholder  > .error {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    color: #000;
    display: none;
    font-weight: normal;
    min-height: 22px;
    width: 168px;
    position: absolute;
    top: 0px;
    left: 40px;
    margin: auto;
}

.perseus-widget-expression > .output > .placeholder > .error > .buddy {
    background-image: url(/images/perseus/error-buddy.png);
    background-size: 100%;
    height: 36px;
    width: 40px;
    position: absolute;
    top: -3px;
    left: -42px;
}

.perseus-widget-expression > .output > .placeholder > .error > .message {
    font: 12px @baseFontFamily;
    line-height: 1.4em;
    margin: 0px 4px;
}

.framework-perseus table.non-markdown {
    tr:nth-child(odd) {
        td {
            background-color: transparent;
        }
    }

    th, td {
        border-width: 0;
    }
}

//
// Table of values
//

// Extra specifity is needed to counteract generic tables
.framework-perseus table.perseus-widget-table-of-values.non-markdown {
    text-align: left;
    margin: 20px auto 0;
    border-collapse: collapse;

    tr {
        height: 23px;
    }

    th, td {
        border: 2px solid black;
        border-width: 0 2px;

        &:first-child {
            border-left: 0;
        }

        &:last-child {
            border-right: 0;
        }
    }

    th {
        font-weight: normal;
        padding: 5px;
        width: 80px;
        text-align: left;
        border-bottom: 2px solid black;
        .paragraph {
            margin: 0;
        }
    }

    td {
        padding: 0px 5px;
        text-align: right;
    }

    tbody tr:first-child td {
        padding-top: 5px;
    }
}
.framework-perseus table.perseus-widget-table-of-values input,
#answer_area table.perseus-widget-table-of-values input {
    width: 80px;
}

.draggy-boxy-thing-hover (@color: #ffa500) {
    border-color: @color;
    @darker: darken(@color, 11%);
    box-shadow: 0 0 4px @darker;
    -moz-box-shadow: 0 0 4px @darker;
    -ms-box-shadow: 0 0 4px @darker;
    -o-box-shadow: 0 0 4px @darker;
    -webkit-box-shadow: 0 0 4px @darker;
}

.draggy-boxy-thing {
    .draggable-box,
    .cards-area {
        background: #eee;
        border: 1px solid #ccc;
        border-bottom: 1px solid #aaa;

        box-shadow: 0 1px 2px #ccc;
        -moz-box-shadow: 0 1px 2px #ccc;
        -webkit-box-shadow: 0 1px 2px #ccc;
    }

    .card {
        background-color: #fff;
        border: 1px solid #b9b9b9;
        border-bottom-color: #939393;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        cursor: pointer;

        &.placeholder {
            background:#ddd;
            border: 1px solid #ccc;
        }

        &.drag-hint {
            background: none;
            border: 1px dashed #aaa;
            cursor: auto;

            &:hover {
                border-color: #aaa;
                box-shadow: none;
            }
        }

        &.dragging {
            background-color: #ffedcd;
            opacity: 0.8;
            filter: opacity(0.8);
        }

        &.stack {
            &:after {
                content: " ";
                background-color: #fff;
                border: 1px solid #b9b9b9;
                border-bottom-color: #939393;
                border-radius: 4px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                height: 100%;
                width: 100%;
                z-index: -1;
                top: 1px;
                left: 1px;
                position: absolute;
            }
        }

        &:hover {
            .draggy-boxy-thing-hover();
        }
    }
}

.ordering {
    position: relative;

    .draggable-box {
        padding: 13px;
        min-height: 69px;
        margin-top: 30px;
    }

    .card {
        padding: 0 10px;
        cursor: pointer;
        position: relative;
        user-select: none;
        width: auto;

        img {
            vertical-align: middle;
        }
    }

    &.height-normal .card {
        line-height: 65px;
        height: 65px;
    }

    &.height-large .card {
        line-height: 160px;
        height: 160px;
    }

    .card-wrap {
        z-index: 0;
        position: relative;
        margin-right: 4px;
        width: auto;
        float: left;
    }

    .bank {
        margin: 0px 13px;

        .card-wrap {
            margin-right: 10px;
            margin-bottom: 8px;
        }
    }

    div.paragraph {
        margin: 0;
    }
}

.categorization-container {
    @categoryWidth: 215px;

    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    .categories,
    .bank {
        float: left;
    }

    .categories {
        width: (@categoryWidth + 16px);
    }

    .cards-list {
        padding: 13px;
    }

    .category {
        float: left;
        padding: 8px;
        width: @categoryWidth;
        text-align: center;

        .card-container {
            float: left;
            width: 100%;
            display: block;
        }
        &.target .cards-list.cards-area {
            .draggy-boxy-thing-hover(#999);
        }
    }
    .header {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .target .header {
        color: black;
    }
    .card {
        min-height: 26px;
        text-align: center;
        line-height: 24px;
        width: (@categoryWidth - 48px);
        padding: 6px 8px;
        margin: 0 auto;

        &:hover {
            transition-property: border-color, box-shadow;
            transition-duration: 150ms;
            -moz-transition-property: border-color, -moz-box-shadow;
            -moz-transition-duration: 150ms;
            -webkit-transition-property: border-color, -webkit-box-shadow;
            -webkit-transition-duration: 150ms;
        }
        transition-property: border-color, box-shadow;
        transition-duration: 150ms;
        -moz-transition-property: border-color, -moz-box-shadow;
        -moz-transition-duration: 150ms;
        -webkit-transition-property: border-color, -webkit-box-shadow;
        -webkit-transition-duration: 150ms;
    }

    .card-container {
        float: left;
        padding: 4px 0;
    }

    .card-hidden {
        visibility: hidden;
    }

    .card.dragging {
        position: absolute;
        display: none;
        z-index: 1;
        .draggy-boxy-thing-hover();
    }

    .card.placeholder > * {
        visibility: hidden;
    }

    &.currently-dragging {
        .card {
            opacity: 0.4;
        }
        .card.dragging {
            display: block;
            background-color: white;
            opacity: 1;
            filter: opacity(1);
        }
    }

    div.paragraph {
        margin: 0;
    }
}

//
// Edit this file in the *perseus* repo!
//

// Steal from webapp/stylesheets/shared-package/variables.less
@baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;

#perseus {
    position: relative;
}

&,  // and moar specificity...
#answer_area input[type=text],
#answer_area input[type=number] {
    &.perseus-input-size-normal,
    {
        width: 80px;
    }

    &.perseus-input-size-small {
        width: 40px;
    }
}

.perseus-widget-radio div,
.perseus-widget-radio div > p {
    /* TODO(alpert): Find a better way of doing inline renderers */
    display: inline;
}

.perseus-widget-radio div.instructions {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

#examples > div > ul {
    // React and Perseus.Renderer add an extra layer each to what qtip expects
    list-style-type: disc;
}

.perseus-widget-radio .perseus-textarea-pair,
.perseus-widget-radio .perseus-textarea-underlay {
    display: block;
}

.framework-perseus {
    div.paragraph {
        font-size: 14px;
        margin: 22px 0px;
    }

    table {
        font-size: 14px;  // to match <p>

        th, td {
            padding: 5px 10px;
            text-align: left;

            &[align=center] {
                text-align: center;
            }

            &[align=right] {
                text-align: right;
            }
        }

        th {
            border-bottom: 2px solid #ccc;
            font-weight: bold;
            padding-bottom: 2px;
        }

        tr:nth-child(odd) {
            // Doesn't work in IE8 :(
            td {
                background-color: #f3f3f3;
            }
        }
    }
}

//
// Interactive graph
//

.perseus-widget-interactive-graph {
    padding: 25px 25px 0 0;
    position: relative;
    img {
        position: absolute;
    }
}

//
// Expression
//

.perseus-widget-expression {
    &,
    > .output,
    > .output > .tex,
    > .output > .placeholder {
        display: block;
    }
}

.perseus-widget-expression > input,
#answer_area .perseus-widget-expression > input {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    max-width: 240px;
    width: 100%;
    margin-bottom: 5px;
}

.perseus-widget-expression > .output > .tex {
    overflow-x: auto;
}

.perseus-widget-expression > .output > .placeholder {
    position: relative;
    height: 40px;
    overflow-y: hidden;
}

.perseus-widget-expression > .output > .placeholder  > .error {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    color: #000;
    display: none;
    font-weight: normal;
    min-height: 22px;
    width: 168px;
    position: absolute;
    top: 0px;
    left: 40px;
    margin: auto;
}

.perseus-widget-expression > .output > .placeholder > .error > .buddy {
    background-image: url(/images/perseus/error-buddy.png);
    background-size: 100%;
    height: 36px;
    width: 40px;
    position: absolute;
    top: -3px;
    left: -42px;
}

.perseus-widget-expression > .output > .placeholder > .error > .message {
    font: 12px @baseFontFamily;
    line-height: 1.4em;
    margin: 0px 4px;
}

.framework-perseus table.non-markdown {
    tr:nth-child(odd) {
        td {
            background-color: transparent;
        }
    }

    th, td {
        border-width: 0;
    }
}

//
// Table of values
//

// Extra specifity is needed to counteract generic tables
.framework-perseus table.perseus-widget-table-of-values.non-markdown {
    text-align: left;
    margin: 20px auto 0;
    border-collapse: collapse;

    tr {
        height: 23px;
    }

    th, td {
        border: 2px solid black;
        border-width: 0 2px;

        &:first-child {
            border-left: 0;
        }

        &:last-child {
            border-right: 0;
        }
    }

    th {
        font-weight: normal;
        padding: 5px;
        width: 80px;
        text-align: left;
        border-bottom: 2px solid black;
        .paragraph {
            margin: 0;
        }
    }

    td {
        padding: 0px 5px;
        text-align: right;
    }

    tbody tr:first-child td {
        padding-top: 5px;
    }
}
.framework-perseus table.perseus-widget-table-of-values input,
#answer_area table.perseus-widget-table-of-values input {
    width: 80px;
}

.draggy-boxy-thing-hover (@color: #ffa500) {
    border-color: @color;
    @darker: darken(@color, 11%);
    box-shadow: 0 0 4px @darker;
    -moz-box-shadow: 0 0 4px @darker;
    -ms-box-shadow: 0 0 4px @darker;
    -o-box-shadow: 0 0 4px @darker;
    -webkit-box-shadow: 0 0 4px @darker;
}

.draggy-boxy-thing {
    .draggable-box,
    .cards-area {
        background: #eee;
        border: 1px solid #ccc;
        border-bottom: 1px solid #aaa;

        box-shadow: 0 1px 2px #ccc;
        -moz-box-shadow: 0 1px 2px #ccc;
        -webkit-box-shadow: 0 1px 2px #ccc;
    }

    .card {
        background-color: #fff;
        border: 1px solid #b9b9b9;
        border-bottom-color: #939393;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        cursor: pointer;

        &.placeholder {
            background:#ddd;
            border: 1px solid #ccc;
        }

        &.drag-hint {
            background: none;
            border: 1px dashed #aaa;
            cursor: auto;

            &:hover {
                border-color: #aaa;
                box-shadow: none;
            }
        }

        &.dragging {
            background-color: #ffedcd;
            opacity: 0.8;
            filter: opacity(0.8);
        }

        &.stack {
            &:after {
                content: " ";
                background-color: #fff;
                border: 1px solid #b9b9b9;
                border-bottom-color: #939393;
                border-radius: 4px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                height: 100%;
                width: 100%;
                z-index: -1;
                top: 1px;
                left: 1px;
                position: absolute;
            }
        }

        &:hover {
            .draggy-boxy-thing-hover();
        }
    }
}

.ordering {
    position: relative;

    .draggable-box {
        padding: 13px;
        min-height: 69px;
        margin-top: 30px;
    }

    .card {
        padding: 0 10px;
        cursor: pointer;
        position: relative;
        user-select: none;
        width: auto;

        img {
            vertical-align: middle;
        }
    }

    &.height-normal .card {
        line-height: 65px;
        height: 65px;
    }

    &.height-large .card {
        line-height: 160px;
        height: 160px;
    }

    .card-wrap {
        z-index: 0;
        position: relative;
        margin-right: 4px;
        width: auto;
        float: left;
    }

    .bank {
        margin: 0px 13px;

        .card-wrap {
            margin-right: 10px;
            margin-bottom: 8px;
        }
    }

    div.paragraph {
        margin: 0;
    }
}

.categorization-container {
    @categoryWidth: 215px;

    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    .categories,
    .bank {
        float: left;
    }

    .categories {
        width: (@categoryWidth + 16px);
    }

    .cards-list {
        padding: 13px;
    }

    .category {
        float: left;
        padding: 8px;
        width: @categoryWidth;
        text-align: center;

        .card-container {
            float: left;
            width: 100%;
            display: block;
        }
        &.target .cards-list.cards-area {
            .draggy-boxy-thing-hover(#999);
        }
    }
    .header {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .target .header {
        color: black;
    }
    .card {
        min-height: 26px;
        text-align: center;
        line-height: 24px;
        width: (@categoryWidth - 48px);
        padding: 6px 8px;
        margin: 0 auto;

        &:hover {
            transition-property: border-color, box-shadow;
            transition-duration: 150ms;
            -moz-transition-property: border-color, -moz-box-shadow;
            -moz-transition-duration: 150ms;
            -webkit-transition-property: border-color, -webkit-box-shadow;
            -webkit-transition-duration: 150ms;
        }
        transition-property: border-color, box-shadow;
        transition-duration: 150ms;
        -moz-transition-property: border-color, -moz-box-shadow;
        -moz-transition-duration: 150ms;
        -webkit-transition-property: border-color, -webkit-box-shadow;
        -webkit-transition-duration: 150ms;
    }

    .card-container {
        float: left;
        padding: 4px 0;
    }

    .card-hidden {
        visibility: hidden;
    }

    .card.dragging {
        position: absolute;
        display: none;
        z-index: 1;
        .draggy-boxy-thing-hover();
    }

    .card.placeholder > * {
        visibility: hidden;
    }

    &.currently-dragging {
        .card {
            opacity: 0.4;
        }
        .card.dragging {
            display: block;
            background-color: white;
            opacity: 1;
            filter: opacity(1);
        }
    }

    div.paragraph {
        margin: 0;
    }
}


center footer leaderboard numbers, too. closes #1057

@import "less/lib/bootstrap/bootstrap";
@import "less/lib/font-awesome/font-awesome";
@import "less/lib/prefixer";
@import "less/stateface.less";
@import "less/variables.less";
@import "less/results.less";
@import "less/slides.less";

body, #stack {
    background-color: black;
    color: @musicLight;
    z-index: 0;
}

h1,h2,h3,h4,h5,h6, p, form, label, button {
    font-family: "Gotham SSm", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

svg {
    max-height: 100%; // Fix webkit svg height bug http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers
}

.btn-lg{
    padding: 15px;
    font-size: 24px;
    letter-spacing: .03em;
    border-radius: 0.5vw;
    text-transform: uppercase;

    &:hover {
        background-color: darken(@red, 20%);
    }

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
    }
}

#stack {
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide-inner {
    // This gets resized in JS
}

.slide-content {
    height: 100%;
}

.centered {
    .vertical-center;
}

/*
** WELCOME SLIDES
*/

.welcome {
    display: block;
    opacity: 0;
    .transition(opacity 3s ease);
    text-align: center;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../assets/promo/background.jpg') no-repeat center black;
        // background-image: url('../assets/elections-background-1.jpg');
        // background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.8;
        z-index: -1;
    }

    .logo-wrapper {
        width: 100%;
        margin: 15px auto 30px;
        fill: @grayMedium;
    }

    .election-logo-wrapper {
        width: 100%;
        max-width: 600px;
        padding: 0 30px;
        margin: 0 auto;
    }

    .cast-header {
        margin-top: 2vw;

    	.cast-enabled,
    	.cast-disabled {
			img {
				width: auto;
				height: 40px;
			}
    	}
    	.cast-enabled { display: none; }
    }

    .intro-text {

        p {
            font-size:  2.5vw;
            line-height: 2.5vw;
            margin-bottom: 5%;
        }
    }

    .form-group { margin: 0; }

    .state {
        width: 100%;
        min-height: 20vw;

        .stateface { font-size: 10vw; }
        .stateface,
        .state-name {
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .state-name {
            font-size: 4vw;
            position: relative;
            top: -3vmin;
        }
    }

    .welcome-button {
        background-color: @red;
        border: @red;
        color: @musicLight;
        margin-top: 30px;

        @media screen and (max-width: @screen-xs-max){
            margin-top: 15px;
        }
    }
}

.countdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    text-align: center;
	text-transform: uppercase;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../assets/promo/background.jpg') no-repeat center black;
        width: 100%;
        height: 100%;
        opacity : 0.8;
        z-index: -1;
    }

    h2,
    h3 {
    	font-size: 3.5vw;
    	margin: 0;
    	color: @grayMedium;
    	text-transform: uppercase;
    }

    .wrapper {
        .vertical-center;
        width: 100%;
        position: absolute;
    }

    .countdown-arc-wrapper {
    	width: 22vw;
    	height: 22vw;
    	margin: 2.5vw auto;
    	position: relative;

    	.countdown-arc,
    	.counter {
    		width: 100%;
    		position: absolute;
    		top: 0;
    		left: 0;
    	}

		.counter {
			font-size: 4vw;
			font-weight: bold;
			text-transform: uppercase;
			line-height: 22vw;
		}
    }

	.countdown-background { fill: @musicDark; }
	.countdown-active { fill: @grayMedium; }

}

.cast-controls {
    text-align: center;
    display: none;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../assets/elections-background-1.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.5;
        z-index: -1;
    }

    .logo-wrapper {
        width: 120px;
        margin: 15px auto 60px;
        fill: @grayMedium;
    }

    h2 {
        font-size: 3vw;
        font-weight: bold;
        padding: 0;
        padding-bottom: 2vw;
        margin: 0;
    }

    ul.menu {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            font-size: 3vw;
            font-weight: bold;
            margin-bottom: 1.5vw;

            a { display: block; }

            img {
            	height: 3vw;
            	width: auto;
            	vertical-align: middle;
            }
        }
    }

    .legend {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	text-align: left;
    }
}

.state-picker {
    text-align: center;
    display: none;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../assets/elections-background-1.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.5;
        z-index: -1;
    }

    h2 {
        font-size: 36px;
        margin-top: 30px;

        @media screen and (max-width: @screen-xs-max){
            font-size: 16px;
        }
    }

    p {
    	font-size: 1vw;
    	margin-top: 2vw;
    	color: @grayMedium;
    }

    .form-group { margin: 0; }

    .state {
        width: 100%;
        min-height: 20vw;

        .stateface { font-size: 10vw; }

        .stateface, .state-name {
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .state-name {
            font-size: 36px;
            position: relative;
            top: -3vmin;

            @media screen and (max-width: @screen-xs-max){
                font-size: 16px;
            }
        }
    }

    .state-picker-submit {
        margin-top: 2vw;
        background-color: @red;
        border: @red;
        color: @musicLight;
    }
}

.state-picker-form>p{
    font-size:8px;
}

.state-picker-hed-wrapper {
    font-size: 24px;
    margin: 30px 0;

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
        margin: 15px 0;
    }
}

#us{
    font-family: "StateFaceRegular";
    font-size: 15vw;
}

/*
** HEADER
*/

.mobile-controls {
	display: none;

	.nav-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 6vw;
		font-size: 3vw;
		background: transparent;
		border: none;

		i { color: @grayMedium; }
	}
	.nav-btn-left {
		left: 0;
		text-align: left;
	}
	.nav-btn-right {
		right: 0;
		text-align: right;
	}

	.touch & { display: block; }
}

.footer-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;

    box-shadow: inset 0 5vw 5vw -5vw black;
    background: black;

    .right-controls {
        float: right;

        div {
            white-space: nowrap;
            float: left;
        }

        a.state-picker-link {
            display: inline-block;
            color: @grayMedium;
            border: 2px solid @grayMedium;
            vertical-align: middle;
            line-height: 1.5vw;
            padding: 0.5vw;
            border-radius: 0.5vw;
            font-size: 1vw;

            .state-name {
                font-size: 1vw;
                line-height: 1;
            }

            .stateface {
                display: none;
                font-size: 3vw;
                vertical-align: middle;
            }
        }

        .volume-icon{
            width: 2vw;
            height: 2vw;
        }

        .chromecast {
            display: none;

            img {
                width: 2vw;
                height: 2vw;
                opacity: 0.7;
            }
        }

        .volume-icon{
            width: 2vw;
            height: 2vw;
        }

        .expand {
            width: 1.5vw;
            height: 1.5vw;
        }

        .chromecast,
        .state,
        .volume,
        .fullscreen {
            padding: 0 0.5vw;

            a:hover {
                color: darken(@grayMedium, 20%);
                text-decoration: none;

                img {
                    opacity: 0.5;
                }
            }
        }

        .slide-nav {
            line-height: 3.5vw;
            height: 3.5vw;

            nav {
                overflow: hidden;
                // display: inline-block;
                font-size: 0;

			   .touch & { display: none; }
            }

           .nav-btn {
                font-size: 1.5vw;
                border: 2px solid @grayMedium;
                padding: 0.5vw 1vw;
                color: @grayMedium;
                background: transparent;
                line-height: 1.5vw;
                margin: 0 0 -2px 0;
                display: inline-block;
                vertical-align: middle;

                &.nav-btn-left {
                    border-radius: 0.5vw 0 0 0.5vw;
                }

                &.nav-btn-right {
                    margin-left: -2px;
                    border-radius: 0 0.5vw 0.5vw 0;
                }
           }
        }

        .slide-countdown {
        	padding: .6vw 0 0 .5vw;
        	width: 2.75vw;

            .countdown-background { fill: @musicDark; }
            .countdown-active { fill: @grayMedium; }
        }
    }

    .results-header {
        color: @grayMedium;
        height: 4vw;
        display: block;
        overflow: hidden;
        line-height: 3.5vw;
        padding: .2vw 3vw;

        .logo {
            height:100%;
            width:7vw;
            margin: 0 .5% 0 0;
            float: left;
            fill: @grayMedium;
        }

        .leaderboard {
            float: left;
            display: table;
        }

        h2, p, a, span {
            font-size: 1.5vw;
            line-height: 3.5vw;
        }

        span{
            text-align: center;
        }

        .results-header-group {
            white-space: nowrap;
            padding: 0 1vw;
            display: table-cell;
            overflow: hidden;

            &:last-child{
                margin-right: 0;
                padding-right: 0;
            }

            .party,
            .total,
            .seats-needed {
                display: inline;
                font-family: 'Cooper Hewitt';
            }

            h2, p {
                margin: 0;
            }

            .senate-header {
                text-transform: uppercase;
                font-weight: bold;
                line-height: 1;
                font-size: 1.7vw;
            }

            .total {
                white-space: nowrap;
                display: inline-block;
            }

            &.not-called {
                h2 {
                    display: inline;
                }

                white-space: nowrap;
            }
        }

        .dem { color: fadeout(@blue, 25%); }
        .gop { color: fadeout(@red, 25%); }
        .other { color: fadeout(@green, 25%); }
        .not-called { color: fadeout(@yellow, 25%); }

        .dem .percentage {
        	border-color: fadeout(@blue, 25%);
        	background: @blue;
        }
        .gop .percentage {
        	border-color: fadeout(@red, 25%);
        	background: @red;
        }
        .other .percentage {
        	border-color: fadeout(@green, 25%);
        	background: @green;
        }
        .not-called .count {
        	border-color: fadeout(@yellow, 25%);
        	color: @yellow;
        	text-shadow: none;
        }

        .percentage,
        .count {
        	border-width: 2px;
        	border-style: solid;
            border-radius: 2vw;
            margin-top: 0;
            color: #fff;
            font-family: 'Cooper Hewitt';
            display: inline-block;
            text-align: center;
            box-sizing:border-box;
            min-width:3vw;
            height:3vw;
            line-height: 2.7vw;
            padding: 0 1vw;
        }
    }

    .results-header.header-controls {
        display: none;

        a {
            color: @grayMedium;
        }
        a:hover{
            color: darken(@grayMedium, 20%);
        }

    }
}

.share-footer { display: none; }

.next-btn {
    position: absolute;
    bottom: 50px;
    right: 10px;
}

/*
 * Typeahead
 */
.twitter-typeahead {
    position: relative;
    width: 50vw; //fixes safari alignment
    top: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
    }
}

.typeahead,
.tt-query,
.tt-hint {
    color: @musicLight;
    font-family: FontAwesome, 'Gotham Ssm';
    width: 50vw;
    height: 100%;
    padding: 15px;
    font-size: 24px;
    line-height: 36px;
    border: 2px solid #bbb;
    border-radius: 4px;
    outline: none;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
        font-size: 16px;
    }
}

::-webkit-input-placeholder::before {
    font-family: FontAwesome;
    content:'\f002  ';
}
::-moz-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
 }
:-ms-input-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
}
input:-moz-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
}

.tt-dropdown-menu {
    text-align: left;
    max-height: 18vw;
    overflow-y: auto;
}

.typeahead {
    background-color: rgba(0,0,0,0);
}

.typeahead:focus {
    border: 2px solid @blue;
}

.tt-query {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    background-color: rgba(0,0,0,0);
    color: @blue;
    width: 50vw;
    margin-top: 1vw;
    border: 1px solid #999;
    border-radius: 2px;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
    }
}

.tt-suggestion {
    padding: 15px;
    font-size: 24px;
    line-height: 1;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid #999;

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
    }

    &:last-child { border: none; }
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: @blue;
}

.tt-suggestion p {
    margin: 0;
}

/*
 * ROTATE YOUR PHONE PROMPT
 */

.rotate-phone-wrapper {
    display: none;
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 3vw;
    font-size: 4vw;
    line-height: 1.3;
    font-weight: 700;

    .rotate { text-align: center; }

    img {
    	display: block;
    	margin: 0 auto 1.5vw auto;
    	height: 10vw;
    	width: auto;
    }
}

@import "less/lib/bootstrap/bootstrap";
@import "less/lib/font-awesome/font-awesome";
@import "less/lib/prefixer";
@import "less/stateface.less";
@import "less/variables.less";
@import "less/results.less";
@import "less/slides.less";

body, #stack {
    background-color: black;
    color: @musicLight;
    z-index: 0;
}

h1,h2,h3,h4,h5,h6, p, form, label, button {
    font-family: "Gotham SSm", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

svg {
    max-height: 100%; // Fix webkit svg height bug http://stackoverflow.com/questions/7570917/svg-height-incorrectly-calculated-in-webkit-browsers
}

.btn-lg{
    padding: 15px;
    font-size: 24px;
    letter-spacing: .03em;
    border-radius: 0.5vw;
    text-transform: uppercase;

    &:hover {
        background-color: darken(@red, 20%);
    }

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
    }
}

#stack {
    width: 100%;
    position: absolute;
    top: 0;
    display: none;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide-inner {
    // This gets resized in JS
}

.slide-content {
    height: 100%;
}

.centered {
    .vertical-center;
}

/*
** WELCOME SLIDES
*/

.welcome {
    display: block;
    opacity: 0;
    .transition(opacity 3s ease);
    text-align: center;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../assets/promo/background.jpg') no-repeat center black;
        // background-image: url('../assets/elections-background-1.jpg');
        // background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.8;
        z-index: -1;
    }

    .logo-wrapper {
        width: 100%;
        margin: 15px auto 30px;
        fill: @grayMedium;
    }

    .election-logo-wrapper {
        width: 100%;
        max-width: 600px;
        padding: 0 30px;
        margin: 0 auto;
    }

    .cast-header {
        margin-top: 2vw;

    	.cast-enabled,
    	.cast-disabled {
			img {
				width: auto;
				height: 40px;
			}
    	}
    	.cast-enabled { display: none; }
    }

    .intro-text {

        p {
            font-size:  2.5vw;
            line-height: 2.5vw;
            margin-bottom: 5%;
        }
    }

    .form-group { margin: 0; }

    .state {
        width: 100%;
        min-height: 20vw;

        .stateface { font-size: 10vw; }
        .stateface,
        .state-name {
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .state-name {
            font-size: 4vw;
            position: relative;
            top: -3vmin;
        }
    }

    .welcome-button {
        background-color: @red;
        border: @red;
        color: @musicLight;
        margin-top: 30px;

        @media screen and (max-width: @screen-xs-max){
            margin-top: 15px;
        }
    }
}

.countdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    text-align: center;
	text-transform: uppercase;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../assets/promo/background.jpg') no-repeat center black;
        width: 100%;
        height: 100%;
        opacity : 0.8;
        z-index: -1;
    }

    h2,
    h3 {
    	font-size: 3.5vw;
    	margin: 0;
    	color: @grayMedium;
    	text-transform: uppercase;
    }

    .wrapper {
        .vertical-center;
        width: 100%;
        position: absolute;
    }

    .countdown-arc-wrapper {
    	width: 22vw;
    	height: 22vw;
    	margin: 2.5vw auto;
    	position: relative;

    	.countdown-arc,
    	.counter {
    		width: 100%;
    		position: absolute;
    		top: 0;
    		left: 0;
    	}

		.counter {
			font-size: 4vw;
			font-weight: bold;
			text-transform: uppercase;
			line-height: 22vw;
		}
    }

	.countdown-background { fill: @musicDark; }
	.countdown-active { fill: @grayMedium; }

}

.cast-controls {
    text-align: center;
    display: none;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../assets/elections-background-1.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.5;
        z-index: -1;
    }

    .logo-wrapper {
        width: 120px;
        margin: 15px auto 60px;
        fill: @grayMedium;
    }

    h2 {
        font-size: 3vw;
        font-weight: bold;
        padding: 0;
        padding-bottom: 2vw;
        margin: 0;
    }

    ul.menu {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            font-size: 3vw;
            font-weight: bold;
            margin-bottom: 1.5vw;

            a { display: block; }

            img {
            	height: 3vw;
            	width: auto;
            	vertical-align: middle;
            }
        }
    }

    .legend {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	text-align: left;
    }
}

.state-picker {
    text-align: center;
    display: none;

    &:after {
        content : "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../assets/elections-background-1.jpg');
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity : 0.5;
        z-index: -1;
    }

    h2 {
        font-size: 36px;
        margin-top: 30px;

        @media screen and (max-width: @screen-xs-max){
            font-size: 16px;
        }
    }

    p {
    	font-size: 1vw;
    	margin-top: 2vw;
    	color: @grayMedium;
    }

    .form-group { margin: 0; }

    .state {
        width: 100%;
        min-height: 20vw;

        .stateface { font-size: 10vw; }

        .stateface, .state-name {
            -webkit-transition: all 0.2s;
            transition: all 0.2s;
        }

        .state-name {
            font-size: 36px;
            position: relative;
            top: -3vmin;

            @media screen and (max-width: @screen-xs-max){
                font-size: 16px;
            }
        }
    }

    .state-picker-submit {
        margin-top: 2vw;
        background-color: @red;
        border: @red;
        color: @musicLight;
    }
}

.state-picker-form>p{
    font-size:8px;
}

.state-picker-hed-wrapper {
    font-size: 24px;
    margin: 30px 0;

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
        margin: 15px 0;
    }
}

#us{
    font-family: "StateFaceRegular";
    font-size: 15vw;
}

/*
** HEADER
*/

.mobile-controls {
	display: none;

	.nav-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 6vw;
		font-size: 3vw;
		background: transparent;
		border: none;

		i { color: @grayMedium; }
	}
	.nav-btn-left {
		left: 0;
		text-align: left;
	}
	.nav-btn-right {
		right: 0;
		text-align: right;
	}

	.touch & { display: block; }
}

.footer-container {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;

    box-shadow: inset 0 5vw 5vw -5vw black;
    background: black;

    .right-controls {
        float: right;

        div {
            white-space: nowrap;
            float: left;
        }

        a.state-picker-link {
            display: inline-block;
            color: @grayMedium;
            border: 2px solid @grayMedium;
            vertical-align: middle;
            line-height: 1.5vw;
            padding: 0.5vw;
            border-radius: 0.5vw;
            font-size: 1vw;

            .state-name {
                font-size: 1vw;
                line-height: 1;
            }

            .stateface {
                display: none;
                font-size: 3vw;
                vertical-align: middle;
            }
        }

        .volume-icon{
            width: 2vw;
            height: 2vw;
        }

        .chromecast {
            display: none;

            img {
                width: 2vw;
                height: 2vw;
                opacity: 0.7;
            }
        }

        .volume-icon{
            width: 2vw;
            height: 2vw;
        }

        .expand {
            width: 1.5vw;
            height: 1.5vw;
        }

        .chromecast,
        .state,
        .volume,
        .fullscreen {
            padding: 0 0.5vw;

            a:hover {
                color: darken(@grayMedium, 20%);
                text-decoration: none;

                img {
                    opacity: 0.5;
                }
            }
        }

        .slide-nav {
            line-height: 3.5vw;
            height: 3.5vw;

            nav {
                overflow: hidden;
                // display: inline-block;
                font-size: 0;

			   .touch & { display: none; }
            }

           .nav-btn {
                font-size: 1.5vw;
                border: 2px solid @grayMedium;
                padding: 0.5vw 1vw;
                color: @grayMedium;
                background: transparent;
                line-height: 1.5vw;
                margin: 0 0 -2px 0;
                display: inline-block;
                vertical-align: middle;

                &.nav-btn-left {
                    border-radius: 0.5vw 0 0 0.5vw;
                }

                &.nav-btn-right {
                    margin-left: -2px;
                    border-radius: 0 0.5vw 0.5vw 0;
                }
           }
        }

        .slide-countdown {
        	padding: .6vw 0 0 .5vw;
        	width: 2.75vw;

            .countdown-background { fill: @musicDark; }
            .countdown-active { fill: @grayMedium; }
        }
    }

    .results-header {
        color: @grayMedium;
        height: 4vw;
        display: block;
        overflow: hidden;
        line-height: 3.5vw;
        padding: .2vw 3vw;

        .logo {
            height:100%;
            width:7vw;
            margin: 0 .5% 0 0;
            float: left;
            fill: @grayMedium;
        }

        .leaderboard {
            float: left;
            display: table;
        }

        h2, p, a, span {
            font-size: 1.5vw;
            line-height: 3.5vw;
        }

        span{
            text-align: center;
        }

        .results-header-group {
            white-space: nowrap;
            padding: 0 1vw;
            display: table-cell;
            overflow: hidden;

            &:last-child{
                margin-right: 0;
                padding-right: 0;
            }

            .party,
            .total,
            .seats-needed {
                display: inline;
                font-family: 'Cooper Hewitt';
            }

            h2, p {
                margin: 0;
            }

            .senate-header {
                text-transform: uppercase;
                font-weight: bold;
                line-height: 1;
                font-size: 1.7vw;
            }

            .total {
                white-space: nowrap;
                display: inline-block;
            }

            &.not-called {
                h2 {
                    display: inline;
                }

                white-space: nowrap;
            }
        }

        .dem { color: fadeout(@blue, 25%); }
        .gop { color: fadeout(@red, 25%); }
        .other { color: fadeout(@green, 25%); }
        .not-called { color: fadeout(@yellow, 25%); }

        .dem .percentage   {  background: fadeout(@blue, 25%); }
        .gop .percentage   {  background: fadeout(@red, 25%); }
        .other .percentage   {  background: fadeout(@green, 25%); }
        .not-called .count {  border: 2px solid fadeout(@yellow, 25%); color: fadeout(@yellow, 25%); }

        .percentage,
        .count {
            margin-top: 0;
            color: #fff;
            font-family: 'Cooper Hewitt';
            display: inline-block;
            text-align: center;
            box-sizing:border-box;
            min-width:3vw;
            height:3vw;
            line-height: 3vw;
            border-radius: 2vw;
            padding: 0 1vw;
        }
    }

    .results-header.header-controls {
        display: none;

        a {
            color: @grayMedium;
        }
        a:hover{
            color: darken(@grayMedium, 20%);
        }

    }
}

.share-footer { display: none; }

.next-btn {
    position: absolute;
    bottom: 50px;
    right: 10px;
}

/*
 * Typeahead
 */
.twitter-typeahead {
    position: relative;
    width: 50vw; //fixes safari alignment
    top: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
    }
}

.typeahead,
.tt-query,
.tt-hint {
    color: @musicLight;
    font-family: FontAwesome, 'Gotham Ssm';
    width: 50vw;
    height: 100%;
    padding: 15px;
    font-size: 24px;
    line-height: 36px;
    border: 2px solid #bbb;
    border-radius: 4px;
    outline: none;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
        font-size: 16px;
    }
}

::-webkit-input-placeholder::before {
    font-family: FontAwesome;
    content:'\f002  ';
}
::-moz-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
 }
:-ms-input-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
}
input:-moz-placeholder::before  {
    font-family: FontAwesome;
    content:'\f002  ';
}

.tt-dropdown-menu {
    text-align: left;
    max-height: 18vw;
    overflow-y: auto;
}

.typeahead {
    background-color: rgba(0,0,0,0);
}

.typeahead:focus {
    border: 2px solid @blue;
}

.tt-query {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    background-color: rgba(0,0,0,0);
    color: @blue;
    width: 50vw;
    margin-top: 1vw;
    border: 1px solid #999;
    border-radius: 2px;

    @media screen and (max-width: @screen-xs-max){
        width: 80vw;
    }
}

.tt-suggestion {
    padding: 15px;
    font-size: 24px;
    line-height: 1;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid #999;

    @media screen and (max-width: @screen-xs-max){
        font-size: 16px;
    }

    &:last-child { border: none; }
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: @blue;
}

.tt-suggestion p {
    margin: 0;
}

/*
 * ROTATE YOUR PHONE PROMPT
 */

.rotate-phone-wrapper {
    display: none;
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 3vw;
    font-size: 4vw;
    line-height: 1.3;
    font-weight: 700;

    .rotate { text-align: center; }

    img {
    	display: block;
    	margin: 0 auto 1.5vw auto;
    	height: 10vw;
    	width: auto;
    }
}


tweak mobile drag help text

tweak mobile drag help text


margin and padding cleanup

margin and padding cleanup


tweak book cover sizes, closes #190

tweak book cover sizes, closes #190


reduce siteMaxWidth

reduce siteMaxWidth

// Special
@colorBrand: #7BC791;
@colorNotice: darken(@colorBrand, 10);
@colorFeatured: #EEC866;
@colorBgBody: #f0f0f0;

//Font
@fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@fontFamilyHeading: @fontFamily;
@fontSize: 14px;
@fontColorHeading: darken(@colorBrand, 10);

@barSize: 44px;
@navButtonSize: @barSize;

// Form Elements
@sizeButton: 34px;
@heightInputText: 34px;
@sizeCheckbox: 20px;

// Media Queries
@breakpointMini: 400px;
@breakpointSmall: 600px;
@breakpointMedium: 900px;

@siteMaxWidth: 940px;

// Buttons
@colorBgButtonHighlight: darken(#ff7784, 5);

// Special
@colorBrand: #7BC791;
@colorNotice: darken(@colorBrand, 10);
@colorFeatured: #EEC866;
@colorBgBody: #f0f0f0;

//Font
@fontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@fontFamilyHeading: @fontFamily;
@fontSize: 14px;
@fontColorHeading: darken(@colorBrand, 10);

@barSize: 44px;
@navButtonSize: @barSize;

// Form Elements
@sizeButton: 34px;
@heightInputText: 34px;
@sizeCheckbox: 20px;

// Media Queries
@breakpointMini: 400px;
@breakpointSmall: 600px;
@breakpointMedium: 900px;

@siteMaxWidth: 1000px;

// Buttons
@colorBgButtonHighlight: darken(#ff7784, 5);


Fixed a line that got accidentally removed from the css file.

#left-panel-toggle {
  float: right;
  margin-bottom: 10px;
  cursor: pointer;
}

.panel {
  .panel-content {
    display: table;
    width: 100%;

    select {
      color: @black;
      border-radius: 5px;
      width: 100%;
    }

    h3 {
      margin: 4px 0;
    }

    .control {
      margin-left: 5px;
      margin-right: 5px;

      &.half {
        display: inline-block;
        width: 40%;
        text-align: center;

        .ui-slider-vertical {
          margin-left: 40%;
        }
      }
    }

    label {
      display: block;
      margin-top: 10px;
      margin-bottom: 3px;
    }

  }
}

.input-menu {
  width: 100%;
  margin-bottom: 10px;
}

#left-panel-toggle {
  float: right;
  margin-bottom: 10px;
  cursor: pointer;
}

  .panel-content {
    display: table;
    width: 100%;

    select {
      color: @black;
      border-radius: 5px;
      width: 100%;
    }

    h3 {
      margin: 4px 0;
    }

    .control {
      margin-left: 5px;
      margin-right: 5px;

      &.half {
        display: inline-block;
        width: 40%;
        text-align: center;

        .ui-slider-vertical {
          margin-left: 40%;
        }
      }
    }

    label {
      display: block;
      margin-top: 10px;
      margin-bottom: 3px;
    }

  }
}

.input-menu {
  width: 100%;
  margin-bottom: 10px;
}


cleaning

cleaning

@screen-md: 960px;

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: 'Droid Sans Ethiopic';
  src: url(../../fonts/DroidSansEthiopic/DroidSansEthiopic-Regular.ttf) format('truetype');
  font-style: normal;
  font-weight: 400;
}

.util {
  .no-decor {
    text-decoration: none;
    text-transform: none;
  }

  .center {
    text-align: center;
  }

  .z-index(@z-index: 100) {
    z-index: @z-index;
  }
}

.animate-view.ng-enter {
  -moz-animation: 600ms fadeIn;
  -webkit-animation: 600ms fadeIn;
  animation: 600ms fadeIn;
}

.animate-view.ng-leave {
  -moz-animation: 0s fadeIn;
  -webkit-animation: 0s fadeIn;
  animation: 0s fadeIn;
}

.animate-if.ng-enter {
  -moz-animation: 600ms fadeIn;
  -webkit-animation: 600ms fadeIn;
  animation: 600ms fadeIn;
}

.animate-if.ng-leave {
  -moz-animation: 0s fadeIn;
  -webkit-animation: 0s fadeIn;
  animation: 0s fadeIn;
}

[ng\:cloak], [ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

body {
  padding-top: 8px;
  color: #616161;
}

.amharic {
  font-family: 'Droid Sans Ethiopic', serif;
}

.fixed-toast {
  position: fixed;
  z-index: 101;
}

// super cute - pink n' all
.showtime {
  color: #ec407a;
  text-shadow: 0 0 8px #ec407a;
}

.toggle-container {
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;

  & .toggle-button {
    width: 100%;
    max-width: 350px;
    text-transform: none;
    font-weight: 300;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid rgba(51, 51, 51, 0.25);

    & span {
      font-size: 24px;
    }

    & .showtime {
      color: #ffffff;
      text-shadow: 0 0 4px #ffffff;
    }
  }
}

.movie-list-section {
  margin: 0;

  & md-list {
    padding: 0;
  }

  &:last-child {
    padding-bottom: 128px;
  }

  & .md-item-content {
    padding: 16px;

    & .poster-container {
      width: 150px;
      max-width: 150px;
      min-width: 150px;
      margin-right: 8px;

      & img.movie-poster {
        width: 100%;
        height: auto;
      }
    }

    & p {
      line-height: 120%;
      margin: 0;
      margin-bottom: 8px;
    }

    & .movie {
      &-title {
        font-size: 18px;
        text-transform: capitalize;
      }

      &-day {
        padding: 2px 12px;
        border: 1px solid rgba(51, 51, 51, 0.25);
        background-color: rgba(51, 51, 51, 0.05);
        border-radius: 2px;
      }

      &-showtime {
        font-size: 14px;
      }

      &-rating {
        font-size: 16px;
      }

      &-rated {
        font-size: 14px;
        color: #ef5350;
      }

      &-genre {
        font-size: 12px;
      }

      &-plot {
        @media(max-width: @screen-md) {
          font-size: 12px;
        }

        @media(min-width: @screen-md) {
          font-size: 14px;
        }
      }
    }
  }
}

.navigation-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 52px;
  max-height: 52px;
  height: 48px;
  box-shadow: 0 0 8px #757575;
  background-color: #ffffff;
  z-index: 100;

  & > div {
    cursor: pointer;
    color: #757575;
    font-size: 18px;
    -moz-transition: 250ms linear all;
    -webkit-transition: 250ms linear all;
    -o-transition: 250ms linear all;
    -ms-transition: 250ms linear all;
    transition: 250ms linear all;

    &.active {
      background-color: #e0e0e0;
      color: #ec407a;
      text-shadow: 0 0 4px #ec407a;
    }

    & span {
      line-height: 100%;

      &.small {
        margin-bottom: 2px;
        font-size: 10px;
      }
    }
  }
}

.about-container {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 80px;

  & p {
    line-height: 150%;
  }

  & .title {
    font-size: 24px;
  }

  & a {
    text-decoration: none;
  }

  & img {
    border: 1px solid rgba(51, 51, 51, 0.25);
    max-width: 320px;
    width: 100%;
    height: auto;
  }
}

@screen-md: 960px;

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@font-face {
  font-family: 'Droid Sans Ethiopic';
  src: url(../../fonts/DroidSansEthiopic/DroidSansEthiopic-Regular.ttf) format('truetype');
  font-style: normal;
  font-weight: 400;
}

.util {
  .no-decor {
    text-decoration: none;
    text-transform: none;
  }

  .center {
    text-align: center;
  }

  .z-index(@z-index: 100) {
    z-index: @z-index;
  }
}

.animate-view.ng-enter {
  -moz-animation: 600ms fadeIn;
  -webkit-animation: 600ms fadeIn;
  animation: 600ms fadeIn;
}

.animate-view.ng-leave {
  -moz-animation: 0s fadeIn;
  -webkit-animation: 0s fadeIn;
  animation: 0s fadeIn;
}

.animate-if.ng-enter {
  -moz-animation: 600ms fadeIn;
  -webkit-animation: 600ms fadeIn;
  animation: 600ms fadeIn;
}

.animate-if.ng-leave {
  -moz-animation: 0s fadeIn;
  -webkit-animation: 0s fadeIn;
  animation: 0s fadeIn;
}

[ng\:cloak], [ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

body {
  padding-top: 8px;
  color: #616161;
}

.amharic {
  font-family: 'Droid Sans Ethiopic', serif;
}

.fixed-toast {
  position: fixed;
  z-index: 101;
}

// super cute - pink n' all
.showtime {
  color: #ec407a;
  text-shadow: 0 0 8px #ec407a;
}

.zare {
  font-weight: 300;
  text-transform: none;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 32px;
  border: 1px solid rgba(51, 51, 51, 0.25);
}

.toggle-container {
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;

  & .toggle-button {
    width: 100%;
    max-width: 350px;
    text-transform: none;
    font-weight: 300;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid rgba(51, 51, 51, 0.25);

    & span {
      font-size: 24px;
    }

    & .showtime {
      color: #ffffff;
      text-shadow: 0 0 4px #ffffff;
    }
  }
}

.movie-list-section {
  margin: 0;

  & md-list {
    padding: 0;
  }

  &:last-child {
    padding-bottom: 128px;
  }

  & .md-item-content {
    padding: 16px;

    & .poster-container {
      width: 150px;
      max-width: 150px;
      min-width: 150px;
      margin-right: 8px;

      & img.movie-poster {
        width: 100%;
        height: auto;
      }
    }

    & p {
      line-height: 120%;
      margin: 0;
      margin-bottom: 8px;
    }

    & .movie {
      &-title {
        font-size: 18px;
        text-transform: capitalize;
      }

      &-day {
        padding: 2px 12px;
        border: 1px solid rgba(51, 51, 51, 0.25);
        background-color: rgba(51, 51, 51, 0.05);
        border-radius: 2px;
      }

      &-showtime {
        font-size: 14px;
      }

      &-rating {
        font-size: 16px;
      }

      &-rated {
        font-size: 14px;
        color: #ef5350;
      }

      &-genre {
        font-size: 12px;
      }

      &-plot {
        @media(max-width: @screen-md) {
          font-size: 12px;
        }

        @media(min-width: @screen-md) {
          font-size: 14px;
        }
      }
    }
  }
}

.navigation-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 52px;
  max-height: 52px;
  height: 48px;
  box-shadow: 0 0 8px #757575;
  background-color: #ffffff;
  z-index: 100;

  & > div {
    cursor: pointer;
    color: #757575;
    font-size: 18px;
    -moz-transition: 250ms linear all;
    -webkit-transition: 250ms linear all;
    -o-transition: 250ms linear all;
    -ms-transition: 250ms linear all;
    transition: 250ms linear all;

    &.active {
      background-color: #e0e0e0;
      color: #ec407a;
      text-shadow: 0 0 4px #ec407a;
    }

    & span {
      line-height: 100%;

      &.small {
        margin-bottom: 2px;
        font-size: 10px;
      }
    }
  }
}

.about-container {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 80px;

  & p {
    line-height: 150%;
  }

  & .title {
    font-size: 24px;
  }

  & a {
    text-decoration: none;
  }

  & img {
    border: 1px solid rgba(51, 51, 51, 0.25);
    max-width: 320px;
    width: 100%;
    height: auto;
  }
}