/*****
 * CONTAINER
 *****/
#lpViewPort {
	position: relative;
	width: 100%;
	display: inline-block;
	text-decoration: none;
}

#lpViewPort:after {
	/* 16:9 ratio */
	padding-top: 56.25%;
	display: block;
	content: '';
}

/*****
 * VIDEO
 *****/

#lpVideoScreenView {
	/*width: 100%;*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.lpVideoFlexRow {
	display: flex;
}

.lpVideoFlexItem {
	flex: 1;
}

/*****
 * CONTROLS
 *****/

#lpControlsView {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	width: 100%;
	height: 100%;
}

#lpControlBarBackground {
	visibility: hidden;
	display: flex;
	z-index: 9;
	position: absolute;
	flex-direction: column;
	justify-content: space-around;
	bottom: 0;
	width: 100%;
	height: 64px;
	margin-top: -64px;
	background: transparent;
}
@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.lpControlBarBackgroundFade {
	opacity:0;
	-moz-animation: fadeout 1s linear;
	-webkit-animation: fadeout 1s linear;
	animation: fadeout 1s linear;
}

#lpControlsScrubBar {
	cursor: pointer;
	position: relative;
	/*width: 100%;*/
	flex: auto;
	height: 22px;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	margin: 4px 0;
}

.lpControlsScrubBars {
	/*width: 100%;*/
	height: 2px;
}

#lpControlsLoadedBar {
	background-image: url("http://cdn.nba.net/assets/video/controls/loadedBar.png");
	width: 100%;
	position: absolute;
	top: 9px;
}

#lpControlsProgressBar {
	background-image: url("http://cdn.nba.net/assets/video/controls/progressBarVod.png");
	position: absolute;
	top: 9px;
}

#lpControlsScrubber {
	background-image: url("http://cdn.nba.net/assets/video/controls/scrubber.png");
	position: absolute;
	width: 9px;
	height: 20px;
	top: 1px;
}

#lpControlsControlBarScrubber {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 20px);
	background: linear-gradient(rgba(255,255,255,0), black, black, black);
	padding: 0 10px;
}

#lpControlsControlBarButtons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% - 20px);
	background-color: #000;
	padding: 0 10px 4px;
}

#lpControlsControlBarSpacer {
	width: 100%;
}

#lpControlsClosedcaptionButton,
#lpControlsStreamSelectorButton {
	cursor: pointer;
	/*background-size: 25px 23px;*/
	background-repeat: no-repeat;
	background-position: top center;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	flex: 0 0 auto;
}
#lpControlsClosedcaptionButton:hover,
#lpControlsStreamSelectorButton:hover {
	background-position: bottom center;
}

#lpControlsVolumeButton {
	background-image: url("http://cdn.nba.net/assets/video/controls/volumeButtonOff.png");
	cursor: pointer;
	background-repeat: no-repeat;
	/*background-size: 100%;
	width: 16px;
	height: 23px;*/
	width: 30px;
	height: 30px;
	background-position: top center;
	margin-left: 10px;
	flex: 0 0 auto;
}
#lpControlsVolumeButton:hover {
	background-position: bottom center;
}

#lpControlsFullscreenButton {
	background-image: url("http://cdn.nba.net/assets/video/controls/fullscreenButtonOff.png");
	cursor: pointer;
	background-repeat: no-repeat;
	/*background-size: 100%;
	width: 20px;
	height: 15px;*/
	width: 30px;
	height: 30px;
	background-position: top center;
	margin-left: 10px;
	flex: 0 0 auto;
}
#lpControlsFullscreenButton:hover {
	background-position: bottom center;
}

.lpControlsControlBarButton {
	/*flex: 1;*/
}

#lpControlsCenterControls {
	display: flex;
	justify-content: space-between;

	visibility: hidden;

	width: 100%;
}

#lpControlsSkip20Button,
#lpControlsBack20Button {
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: top center;
	width: 20px;
	height: 20px;
	margin-right: 20px;
	flex: 0 0 auto;
	background-size: 20px;
}
#lpControlsSkip20Button:hover,
#lpControlsBack20Button:hover {
	background-position: bottom center;
}

#lpControlsPlayPauseButton {
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: top center;
	width: 30px;
	height: 30px;
	margin-right: 20px;
	flex: 0 0 auto;
	background-size: 30px;
}
#lpControlsPlayPauseButton:hover {
	background-position: bottom center;
}

#lpControlsLiveButton {
	cursor: pointer;

	background-size: 60px;
	background-repeat: no-repeat;
	background-position: center;
	text-decoration: none;
	width: 60px;
	height: 30px;
	margin-left: 5px;
}

#lpControlsTopControls {
	/*visibility: hidden;*/
	display: flex;
	z-index: 25;
	position: absolute;
	justify-content: space-between;
	/*visibility: hidden;*/
	width: 100%;
	margin-top: 5px;
}

#lpControlsBotControls {
	display: block;
	z-index: 25;
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 64px;
}

#lpControlsTitle {
	visibility: hidden;

	background-size: 243px 17px;
	background-repeat: no-repeat;
	background-position: center;
	width: 243px;
	height: 17px;
	margin-left: 5px;
}

#lpControlsSplitScreenButton {
	visibility: hidden;
	cursor: pointer;

	background-size: 100px 15px;
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 15px;
	display: block;
	/*margin-right: 5px;*/
}

#lpControlsSplitScreenButtonWrapper {
	cursor: pointer;
	width: 100px;
	height: 15px;
	margin-right: 5px;
}

/* VOLUME SLIDER */

#lpControlsVolumeSlider {
	position: absolute;
	display: none;

	width: 28px;
	height: 100px;

	bottom: 64px;
	right: 51px;

	z-index: 35;
}

#lpControlsVolumeBG {
	background-image: url("http://cdn.nba.net/assets/video/controls/volumeBG.png");
	position: absolute;

	width: 100%;
	height: 100%;

	cursor: pointer;
}

#lpControlsVolumeTrack {
	background-image: url("http://cdn.nba.net/assets/video/controls/volumeTrack.png");
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	width: 2px;
	height: 94px;

	pointer-events: none;
}

#lpControlsVolumeLevel {
	background-image: url("http://cdn.nba.net/assets/video/controls/volumeLevel.png");
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 50px;

	width: 2px;
	height: 47px;

	pointer-events: none;
}

#lpControlsVolumeHandle {
	background-image: url("http://cdn.nba.net/assets/video/controls/volumeHandle.png");
	background-repeat: no-repeat;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 48px;

	width: 18px;
	height: 4px;

	pointer-events: none;
}

/* SETTINGS */

#lpControlsSettingsCCButton {
	background-image: url('http://cdn.nba.net/assets/video/controls/settingsCCButtonOff.png');
	background-repeat: no-repeat;
	position: absolute;

	width: 30px;
	height: 30px;
	top: 67px;
	left: 135px;

	cursor: pointer;
	background-position: top center;
}

#lpControlsSettingsCCSettingsButton {
	background-image: url('http://cdn.nba.net/assets/video/controls/settingsButtonOff.png');
	background-repeat: no-repeat;
	position: absolute;

	width: 30px;
	height: 30px;
	top: 69px;
	left: 160px;

	cursor: pointer;
}

.lpControlsSettingsMedButton {
	background-image: url('http://cdn.nba.net/assets/video/controls/settingsButtonMedOff.png');
	background-repeat: no-repeat;
	position: absolute;

	text-decoration: none;

	width: 122px;
	height: 30px;

	cursor: pointer;
}

.lpControlsSettingsButtonText {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    transform: translateY(-25%);
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#lpControlsSettingsCCDropdown {
	position: absolute;

	width: 122px;
	height: 30px;
	top: 67px;
	left: 190px;
}

.lpControlsSettingsCCDropdownElement {
	background-color: #888888;
	position: absolute;

	width: 100%;
	height: 20px;

	cursor: pointer;
	line-height: 20px;
}

.lpControlsSettingsCCDropdownElement:hover {
	background-color: #bbbbbb;
}

.lpControlsSettingsCCDropdownElementText {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: auto;
    top: 5;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/******
* Stream Selector
*******/

.lpControlsStreamSelectorButton {
	background-size: 60px 60px;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-25%);
	text-decoration: none;
	width: 75px;
	height: 75px;
}

#lpControlsStreamSelector {
	background-color: #4489ff;
	position: absolute;
	display: none;
	width: 200px;
	bottom: 64px;
	right: 0px;
	z-index: 30;
	overflow: hidden;
}

#lpControlsStreamSelectorTitle,
.lpExpandedSelectElement {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	cursor: pointer;
}

#lpControlsStreamSelectorTitle {
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
}

#lpControlsStreamSelectorList {
	height: calc(100% - 31px - 56px);
	overflow: hidden;
	width: 100%;
}
.lpStreamSlider {
	height: 100%;
	overflow: hidden;
	width: 100%;
}
.lpStreamSliderList {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
}
.lpExpandedSelectElement {
	padding: 10px 30px 10px 20px;
}

.lpExpandedSelectElement.selected {
	background-color: #1d428a;
	background-image: url("http://cdn.nba.net/assets/video/controls/checkmark.png");
	background-repeat: no-repeat;
	background-size: 10px;
	background-position-y: center;
	background-position-x: calc(100% - 10px);
}

.lpExpandedSelectElement.selecting {
	background-color: #1d428a;
}

.lpExpandedSelectElement.disabled {
	color: #797979;
}

.lpExpandedSelectElement:hover {
	background-color: #1d428a;
}

.lpExpandedSelectElementText {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.lpExpandedSelectButtonText {
	display: none;
}

/******
* Messages
*******/

.lpMessages {
	position: absolute;
	width: 100%;
	height: 396px;
}

.lpMessage {
	background: rgba(0,0,0,0.5);
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20;
}

.lpMessageGroup {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.lpMessageText {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: white;
    /*position: absolute;*/
    flex: 1;
    /*width: 100%;
    height: 100%;*/
    margin: auto;
    top: 13;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lpMessageButton {
	background-image: url('http://cdn.nba.net/assets/video/controls/settingsButtonMedOff.png');
	background-repeat: no-repeat;
	/*position: absolute;*/
	flex: 1;

	width: 122px;
	height: 30px;

	cursor: pointer;

	margin-top: 10px;
}

.lpMessageButtonLabel {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    position: relative;
    width: 122px;
    height: 30px;
    margin: auto;
    top: 50%;
    transform: translateY(-25%);
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/******
* Closed Caption Settings
*******/

#lpControlsClosedCaption {
	position: absolute;
	display: none;

	width: 100%;
	height: calc(100% - 34px);

	z-index: 30;

	margin: auto;
	top: 0;
	left: 0;
}

#lpCCSettingsBackground {
	background: rgba(0,0,0,0.75);
	position: absolute;

	width: 100%;
	height: 100%;
}

#lpCCSettingsForm {
	bottom:30px;
	left: calc(50% - 200px);
	position: absolute;
	width: 400px;
}

.lpCCTrackDropdown,
.lpCCSettingsDropdown {
	height: 30px;
	flex: 0 0 auto;
	margin-right: 40px;
	line-height: 30px;
}

.lpCCTrackDropdown .lpControlsSettingsMedButton,
.lpCCSettingsDropdown .lpControlsSettingsMedButton {
	background-image: none;
	position: relative;
}

.lpCCTrackDropdown .lpControlsSettingsMedButton .lpControlsSettingsButtonText,
.lpCCSettingsDropdown .lpControlsSettingsMedButton .lpControlsSettingsButtonText {
	transform: none;
}

.lpCCTrackDropdown .lpControlsSettingsMedButton:hover .lpControlsSettingsButtonText,
.lpCCSettingsDropdown .lpControlsSettingsMedButton:hover .lpControlsSettingsButtonText,
.lpCCTrackDropdown .lpControlsSettingsMedButton.open .lpControlsSettingsButtonText,
.lpCCSettingsDropdown .lpControlsSettingsMedButton.open .lpControlsSettingsButtonText {
	color: #4489ff;
}

.lpCCTrackDropdownList,
.lpCCSettingsDropdownList {
	position: absolute;
	z-index: 31;
	width: 122px;
}

#lpCCSettingsTitleBar {
	display: flex;
	justify-content: space-around;
	padding-bottom: 10px;
	border-bottom: 1px solid #666;
}

.lpCCSettingsTitle {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: white;
    /*text-align: center;*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    line-height: 30px;
}

.lpCCSettingsToggleButton,
.lpCCSettingsTitleButton {
	text-decoration: none;
	height: 30px;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: white;
  line-height: 30px;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.lpCCSettingsToggleButton:hover,
.lpCCSettingsTitleButton:hover {
	color: #4489ff;
}

#lpCCSettingsApplyButton {
	margin-left: 20px;
}
#lpCCSettingsToggleButton {
	margin-right: 40px;
}

#lpCCSettingsCancel {
	background-image: url("http://cdn.nba.net/assets/video/controls/cancel.png");
	cursor: pointer;
	background-repeat: no-repeat;
	/*background-size: 100%;
	width: 16px;
	height: 23px;*/
	background-size: 30px;
	width: 30px;
	height: 30px;
	background-position: top center;
	flex: 0 0 auto;
	margin-right: 10px;
}
#lpCCSettingsCancel:hover {
	background-position: bottom center;
}

.lpCCSettingsRow {
	display: flex;
	justify-content: space-around;
}

.lpCCSettingsText {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: white;
    margin: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	line-height: 30px;
  width: 100%;
  margin-left: 40px;
}

#lpCCSampleText {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: white;
    /*flex: 1;*/
    /*width: 100%;
    height: 100%;*/
    margin: auto;
    /*text-align: center;*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  text-align: center;
  border: 1px solid #fff;
  line-height: 30px;
  margin: 0 30px;
  clear: both;
}


#ccMainContainer{
	width: 550px;
    height: 270px;
	background-color: #9A9898;
	padding-left: 10px;
	padding-top: 1px;
	position: absolute;
	z-index: 30;
}

.ccControlsContainer {
    display: -webkit-flex;
    display: flex;
}

.ccControlsItem {
	margin: 10px;
}

#ccSampleText {
	margin-top: 20px;
	margin-left: 10px;
	color: #FFFFFF;
}

#ccApplyChangesBtn {
	width: 80px;
	height: 32px;
	margin-top: 10px;
	margin-left: 20px;
}

#ccRestoreDefaultsBtn {
	height: 32px;
	margin-top: 10px;
	margin-left: 20px;
}

#lpCCSettingsTrackSelect .lpCCSettingsDropdownList,
#lpCCSettingsFontSelect .lpCCSettingsDropdownList,
#lpCCSettingsColorSelect .lpCCSettingsDropdownList,
#lpCCSettingsSizeSelect .lpCCSettingsDropdownList,
#lpCCSettingsOpacitySelect .lpCCSettingsDropdownList,
#lpCCSettingsEdgeSelect .lpCCSettingsDropdownList,
#lpCCSettingsEdgeColorSelect .lpCCSettingsDropdownList,
#lpCCSettingsBGColorSelect .lpCCSettingsDropdownList,
#lpCCSettingsBGOpacitySelect .lpCCSettingsDropdownList {
	right: 40px;
}

/* height calculations:
	20px lpControlsSettingsCCDropdownElement
	-20px lpControlsSettingsCCDropdownElement negative top
*/
/* top calculations:
	41px lpCCSettingsTitleBar
	30px lpCCSettingsClosedCaptionsRow
	30px lpCCSettingsTrackRow
	32px lpCCSampleText
	30px lpControlsSettingsCCDropdownButton
	20px lpControlsSettingsCCDropdownElement negative top
*/
#lpCCSettingsTrackSelect .lpCCSettingsDropdownList {
	height: calc((20px * 2) - 20px);
	top: calc(41px + 30px + 30px + 20px);
}
#lpCCSettingsFontSelect .lpCCSettingsDropdownList {
	height: calc((20px * 5) - 20px);
	top: calc(41px + 30px + 30px + 32px + (30px * 1) + 20px);
}
#lpCCSettingsColorSelect .lpCCSettingsDropdownList {
	height: calc((20px * 8) - 20px);
	top: calc(41px + 30px + 30px + 32px + (30px * 2) + 20px);
}
#lpCCSettingsSizeSelect .lpCCSettingsDropdownList {
	height: calc((20px * 3) - 20px);
	top: calc(41px + 30px + 30px + 32px + (30px * 3) + 20px);
}
#lpCCSettingsOpacitySelect .lpCCSettingsDropdownList {
	height: calc((20px * 3) - 20px);
	top: calc(41px + 30px + 30px + 32px + (30px * 4) + 20px);
}
#lpCCSettingsEdgeSelect .lpCCSettingsDropdownList {
	bottom: calc(30px * 4);
	height: calc((20px * 5) - 20px);
}
#lpCCSettingsEdgeColorSelect .lpCCSettingsDropdownList {
	bottom: calc(30px * 3);
	height: calc((20px * 8) - 20px);
}
#lpCCSettingsBGColorSelect .lpCCSettingsDropdownList {
	bottom: calc(30px * 2);
	height: calc((20px * 8) - 20px);
}
#lpCCSettingsBGOpacitySelect .lpCCSettingsDropdownList {
	bottom: calc(30px * 1);
	height: calc((20px * 4) - 20px);
}

/********
* Edge types and color
********/
.raised {
	text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}

.depressed {
	text-shadow: 0px 1px 1px #4d4d4d;
}

.depressedBlue {
	text-shadow: 0px 1px 1px #0000ff;
}

.dropShadow {
	text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

/********
*  Icon Select
********/

.icon-select{
    width:0px;
}

.icon-select .selected-box {
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 35px; /* sil */
    height: 33px; /* sil */
    border: 1px solid #999999;
    background-color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.icon-select .selected-box:hover {
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 35px; /* sil */
    height: 33px; /* sil */
    border: 1px solid #000000;
    background-color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.icon-select .selected-icon {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top:5px;
    left:5px;
    width: 48px; /* sil */
    height: 48px; /* sil */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

 .icon-select .component-icon{
    position: absolute;
    bottom:5px;
    right:4px;
}

.icon-select .box {
    position: absolute;
    top:0px;
    left:71px;
    margin: 0px;
    padding: 0px;
    width: 170px; /* sil */
    height: 170px; /* sil */
    border: 1px solid #EEEEEE;
    background-color: #EEEEEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 10;
    overflow:auto;
}

.icon-select .icon {
    position: relative;
    margin: 5px 0px 0px 5px;
    padding: 0px;
    width: 48px; /* sil */
    height: 48px; /* sil */
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow:hidden;
    float: left;
}

.icon-select .icon:hover {
    border: 1px solid #000000;
}

.icon-select .icon.selected {
    position: relative;
    margin: 5px 0px 0px 5px;
    padding: 0px;
    width: 48px; /* sil */
    height: 48px; /* sil */
    border: 1px solid #000000;
    background-color: #EEEEEE;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    overflow:hidden;
    float: left;
}

@media (max-width: 1023px) {
	#lpCCSettingsForm {
		bottom: 10;
	}
	.lpCCSettingsText {
		font-size: 10px;
		line-height: 20px;
	}
	.lpCCSettingsDropdown {
		height: 20px;
		line-height: 20px;
	}
	.lpControlsSettingsMedButton {
		height: 20px;
	}
	.lpCCSettingsDropdown .lpControlsSettingsMedButton .lpControlsSettingsButtonText {
		font-size: 10px;
	}
	#lpCCSettingsToggleButton {
		font-size: 10px;
		height: 20px;
		line-height: 20px;
	}
	/* height calculations:
		20px lpControlsSettingsCCDropdownElement
		-20px lpControlsSettingsCCDropdownElement negative top
	*/
	/* top calculations:
		41px lpCCSettingsTitleBar
		20px lpCCSettingsClosedCaptionsRow
		20px lpCCSettingsTrackRow
		32px lpCCSampleText
		20px lpControlsSettingsCCDropdownButton
		20px lpControlsSettingsCCDropdownElement negative top
	*/
	#lpCCSettingsTrackSelect .lpCCSettingsDropdownList {
		height: calc((20px * 2) - 20px);
		top: calc(41px + 20px + 20px + 20px);
	}
	#lpCCSettingsFontSelect .lpCCSettingsDropdownList {
		height: calc((20px * 5) - 20px);
		top: calc(41px + 20px + 20px + 32px + (20px * 1) + 20px);
	}
	#lpCCSettingsColorSelect .lpCCSettingsDropdownList {
		height: calc((20px * 8) - 20px);
		top: calc(41px + 20px + 20px + 32px + (20px * 2) + 20px);
	}
	#lpCCSettingsSizeSelect .lpCCSettingsDropdownList {
		height: calc((20px * 3) - 20px);
		top: calc(41px + 20px + 20px + 32px + (20px * 3) + 20px);
	}
	#lpCCSettingsOpacitySelect .lpCCSettingsDropdownList {
		height: calc((20px * 3) - 20px);
		top: calc(41px + 20px + 20px + 32px + (20px * 4) + 20px);
	}
	#lpCCSettingsEdgeSelect .lpCCSettingsDropdownList {
		bottom: calc(20px * 4);
		height: calc((20px * 5) - 20px);
	}
	#lpCCSettingsEdgeColorSelect .lpCCSettingsDropdownList {
		bottom: calc(20px * 3);
		height: calc((20px * 8) - 20px);
	}
	#lpCCSettingsBGColorSelect .lpCCSettingsDropdownList {
		bottom: calc(20px * 2);
		height: calc((20px * 8) - 20px);
	}
	#lpCCSettingsBGOpacitySelect .lpCCSettingsDropdownList {
		bottom: calc(20px * 1);
		height: calc((20px * 4) - 20px);
	}
}

@media (max-width: 735px) {
	#lpCCSettingsForm {
		bottom: 10;
	}
	.lpCCSettingsText {
		font-size: 10px;
		line-height: 20px;
	}
	.lpCCSettingsDropdown {
		height: 20px;
		line-height: 20px;
	}
	.lpControlsSettingsMedButton {
		height: 20px;
	}
	.lpCCSettingsDropdown .lpControlsSettingsMedButton .lpControlsSettingsButtonText {
		font-size: 10px;
	}
	#lpCCSettingsT {
		overflow: hidden;
	}
	#lpCCSettingsClosedCaptionsRow,
	#lpCCSettingsTrackRow,
	#lpCCSettingsL,
	#lpCCSettingsR {
		float: left;
		width: 50%;
	}
	#lpCCSettingsClosedCaptionsRow .lpCCSettingsText,
	#lpCCSettingsL .lpCCSettingsText {
		margin-left: 20px;
	}
	#lpCCSettingsClosedCaptionsRow .lpCCSettingsToggleButton,
	#lpCCSettingsL .lpCCSettingsDropdown {
		margin-right: 30px;
	}
	#lpCCSettingsTrackRow .lpCCSettingsText,
	#lpCCSettingsR .lpCCSettingsText {
		margin-left: 30px;
	}
	#lpCCSettingsTrackRow .lpCCSettingsDropdown,
	#lpCCSettingsR .lpCCSettingsDropdown {
		margin-right: 20px;
	}
	#lpCCSettingsToggleButton {
		font-size: 10px;
	}
	#lpCCSampleText {
		margin: 5px 20px;
	}
	#lpCCSettingsFontSelect .lpCCSettingsDropdownList,
	#lpCCSettingsColorSelect .lpCCSettingsDropdownList,
	#lpCCSettingsSizeSelect .lpCCSettingsDropdownList,
	#lpCCSettingsOpacitySelect .lpCCSettingsDropdownList {
		bottom: 0;
		right: 100px;
		top: auto;
	}
	#lpCCSettingsEdgeSelect .lpCCSettingsDropdownList,
	#lpCCSettingsEdgeColorSelect .lpCCSettingsDropdownList,
	#lpCCSettingsBGColorSelect .lpCCSettingsDropdownList,
	#lpCCSettingsBGOpacitySelect .lpCCSettingsDropdownList {
		bottom: 0;
		right: 100px;
	}
	/* top calculations:
		41px lpCCSettingsTitleBar
		20px lpCCSettingsClosedCaptionsRow and lpCCSettingsTrackRow
		20px lpControlsSettingsCCDropdownElement negative top
	*/
	#lpCCSettingsTrackSelect .lpCCSettingsDropdownList {
		right: 20px;
		top: calc(41px + 20px + 20px);
	}
}