div,
			img {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			img {
				vertical-align: top;
/*				
				display: block;

				position: absolute;
				width: 100%;
				height: 100%;
*/			}
			
			body {
				background-color: black;
				overflow: hidden;
				font-family: 'Noto Sans', sans-serif;
			}
			
			#rammb_viewport {
				position: absolute;

				/* Turn on to have rammb_viewport act as viewport. */
				/*overflow: hidden;*/

				width: 0px;
				height: 0px;

				/* rammb_viewport is located in the middle of the screen, so all of top, left references for
				* $zoom_holder and it's siblings are relative to the center pixel in the screen.
				*/
				top: 50%;
				left: 50%;
			}

/*
			#rammb_viewport #border {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 13;
				border: 1px red solid;
			}
*/
			#rammb_viewport #zoom_holder {
				z-index: 8;
/*				z-index: 12;
*/				width: 678px;
				height: 678px;
				/* position at top left of parent */
				position: absolute;

				/* center horizontally if turn off above */
				margin: 0 auto;
			}

			/* Changing this to test out the comparison slider */
			/*#rammb_viewport .zoom_level,
			.product_holder,
			.map_lat_lon_holder {*/
			#rammb_viewport .zoom_level,
			.product_holder,
			.map_lat_lon_holder,
			#product_wrapper,
/*			#canvas_wrapper,
			canvas.can,
*/			#comparisonSliderWrapper {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			#canvas_wrapper {
/*			#canvas_wrapper,
			canvas#can {
*/				z-index: 13;
/*				width: 100%;
				height: 100%;
*/				position: absolute;
				left: 0;
				top: 0;
/*				left: -100px;
				top: -100px;
*/			}

			#comparisonSliderWrapper {
				overflow: hidden;
			}
 /* NOT Commenting out in favor of HTML5 Looper version */
			
			/* Not currently used (extra element) */
			div#pluginWrapper {
			}

			div#comparisonSlider {
				position: absolute;
/*				top: 50px;
*/				top: 0;
				left: 0;
				margin: 0;
				padding: 0;
				z-index: 12;
			}
			
			label[for=menuHideShow] {
				position: absolute;
				top: 0;
				left: 250px;
				z-index: 13;
			}

            span.navigation-arrow {
				position: absolute;
				z-index: 13;
                background-color: rgba(255, 255, 255, 0.5);
            }

            span.navigation-arrow:hover {
                background-color: rgba(255, 255, 255, 0.8);
            }

			span#navigation-arrow-up {
				top: 5px;
				left: calc(50% - 17px);
                padding: 5px 8px 4px 8px;
            }

			span#navigation-arrow-down {
				bottom: 5px;
				left: calc(50% - 17px);
                padding: 5px 8px 4px 8px;
			}

			span#navigation-arrow-left {
				top: 50%;
				left: 255px;
                padding: 6px 8px 5px 8px;
			}

			span#navigation-arrow-right {
				top: 50%;
				right: 5px;
                padding: 6px 8px 5px 8px;
			}

			@media screen and (max-width: 1400px) {
				span#navigation-arrow-up, span#navigation-arrow-down {
					left: calc((100% - 250px)/2 + 233px);
				}

				span#navigation-arrow-up.menu-closed, span#navigation-arrow-down.menu-closed {
					left: calc(50% - 17px);
				}
			}
			
			p#imageryTimeBottom {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 250px;
				z-index: 13;
				margin: 0;
				padding: 0;
				background-color: white;
				font-size: 16px;
				font-weight: bold;
				overflow: hidden;
				text-align: center;
			}

			#logosAndScaleBars {
				bottom: 6px;
				height: 60px;
				margin: 0;
				padding: 0;
				position: absolute;
				right: 30px;
				width: 240px;
				z-index: 11;
			}

			/* TODO Mattie - a temporary solution until I talk to Kevin */
			#logosAndScaleBars a {
				position: relative;
				bottom: -60px;
			}
			
			img#rammbLogo {
				position: relative;
				bottom: 90px;
				right: -160px;
				width: 80px;
				/*max-width: 20%;*/ /* TODO - what to do about these? */
			}

			img#ciraLogo {
				position: relative;
				bottom: 56px;
				right: -130px;
				width: 110px;
				/*max-width: 20%;*/
			}

			#switchUnitsButton {
				bottom: 44px;
				display: none;
				height: 24px;
				position: relative;
				right: -52px;
				text-align: center;
				width: 100px;
			}

			#scaleBarX {
				background-color: rgba(200, 180, 0, 0.5);
				border: 2px solid black;
				border-bottom: none;
				border-top: none;
				bottom: 95px;
				color: white;
				display: none;
				height: 20px;
				position: relative;
				right: -50px;
				text-align: center;
				width: 100px;
			}

			#scaleBarY {
				background-color: rgba(200, 180, 0, 0.5);
				border: 2px solid black;
				border-bottom: none;
				border-top: none;
				bottom: 75px;
				color: #ffffff;
				display: none;
				height: 20px;
				position: relative;
				right: 20px;
				text-align: center;
				transform: rotate(-90deg);
				width: 100px;
			}

			#colorBarWrapper {
				display: block;
				position: absolute;
				bottom: 0;
				left: 250px;
				z-index: 13;
				margin: 0;
				padding: 0;
				max-height: 50px;
			}

			.colorBar {
				width: 100%;
				/* TODO: When I add more color bars, I'm going to need to change this */
				
				margin-bottom: 5px; /* Add spacing between color bars */
    			vertical-align: bottom;
    			
			}

			.hiddenDialog {
				display: none;
			}

            #submitDownloadOptions {
                display: block;
                margin-top: 20px;
            }

            #productInfoScreen {
                max-width: 80vw;
            }

            #productInfoScreen .fine-print {
                font-size: 10px;
            }
			.recipe-image {
				max-width: 50%;  /* Ensure the image doesn't exceed its container's width */
				max-height: 100vh; /* Limit the image's height to the height of the viewport */
				width: auto;      /* Let the image adjust its width while maintaining aspect ratio */
				height: auto;     /* Let the image adjust its height while maintaining aspect ratio */
			}
			.colorbar-image {
				max-width: 100%;  /* Ensure the image doesn't exceed its container's width */
				max-height: 100vh; /* Limit the image's height to the height of the viewport */
				width: auto;      /* Let the image adjust its width while maintaining aspect ratio */
				height: auto;     /* Let the image adjust its height while maintaining aspect ratio */
			}

/*
			#helpScreen {
				position: absolute;
				top: 5%;
				left: 5%;
				width: 90%;
				height: 90%;
				z-index: 20;
				margin-left: auto;
				margin-right: auto;
				padding: 10px;
				color: black;
				background-color: rgba(255, 255, 255, 0.90);
				overflow-y: scroll;
			}
*/			

			#helpScreen .keyboard {
				font-weight: bold;
			}

			#linksToOrgs {
				font-size: 14px;
			}

			#experimentalProductDisclaimer {
				font-size: 12px;
			}

			#eumetsatAttribution {
				font-size: 12px;
			}

			#releaseNotesSocial {
				font-size: 14px;
			}

			.controlSide ul#controlWrapper li#dummyHolder2 {
				margin-bottom: 25px;
			}
			
			img#preloadImagesDoneTester {
				display: none;
			}
			
/* not working yet to control the height of the select box */
			/*li#productSelectorHolder select {*/
/*			.ui-selectmenu-button {
				max-height: 300px;
				overflow: scroll;
				overflow-y: auto;
				overflow-x: hidden;
				z-index:1000 !important;
			}
*/
			
			/* Make sure the selectmenus aren't too tall */
			.ui-selectmenu-menu .ui-menu {
/*				max-height: 200px;
*/			}

			/* Make sure the selectmenus are wide enough when they first open */
			.ui-selectmenu-menu #productSelectorChange-menu,
			.ui-selectmenu-menu #productSelectorOverlay-menu {
				/*width: 200px;
				width: 350px;
				*/
				width: 480px;
			}

			.productHeading {
				font-weight: bold;
			}

			.activeProduct {
				font-weight: bold;
				font-style: italic;
			}

			.ui-selectmenu-menu #satelliteSelectorChange-menu {
				width: 215px;
			}
			.ui-widget {
				font-family: 'Noto Sans', sans-serif;
			}

			.ui-selectmenu-menu #sectorSelectorChange-menu,
			.ui-selectmenu-menu #numberOfImagesSelectorChange-menu,
			.ui-selectmenu-menu #timeStepSelectorChange-menu {
				width: 175px;
			}

			/* Override the defaults from jquery-ui.css */
			.ui-selectmenu-button span.ui-selectmenu-text {
				padding: 0px;
			}
			
			.ui-selectmenu-button.ui-button {
				width: 120px;
			}
			
			/* jQuery UI buttons */
			/*.ui-button-text-only .ui-button-text {*/
			.ui-button {
				padding: .4em .4em;
				margin-top: 2px;
/*				padding: .4em .2em;
				margin-left: 0px;
				margin-right: 0px;
*/
				font-size: 12px;
			}
			
			.ui-controlgroup > .ui-controlgroup-item {
				float: none;
			}


/*		button {
			padding: 2px;
		}
		.ui-button .ui-button-text
*/

			/* Position the close buttons at the top right of each product box */
			/*.productRemove.ui-button-text-only {*/
			.productRemove.ui-button {

				position: absolute;
				top: 0;
				right: 0;

			}

			/* Shrink the size of the close buttons */
			.productRemove.ui-button {
				padding: 0px 3px;
				margin: 0;
				
			}

			/* Position the more info buttons at the bottom right of each product box */
			.productInfo.ui-button {
				position: absolute;
				bottom: 0;
				right: 0;
			}

			/* Shrink the size of the close buttons */
			.productInfo.ui-button {
				padding: 0px 1px;
				margin: 0;
				
			}

			#productSelectorHolder label {
				float: left;
				width: 100px;
				font-size: .9em;
				padding-top: 5px;
				text-align: right;
			}

			#mouseDrawDragWrapper {
				background-color: #e8e8e8;
				margin-left: 5px;
				margin-right: 5px;
			}
				
			#productSelectorHolder select {
				width: 120px;
			}
							
			#archiveWrapper {
				padding: 2px;
			}

			label[for=archive] {
				width: 140px;
				margin: 1px 20px;
			}
/*
			#archiveWrapper label {
				float: left;
				width: 50px;
				padding-top: 3px;
				text-align: right;
			}
*/				
			.archive_dropdown.ui-button {
			}
			

			#startDateSelector-button,
			#endDateSelector-button {
				float: left;
				width: 85px;
			}

			#startHourSelector-button,
			#endHourSelector-button {
				float: left;
				width: 36px;
				margin-left: 0;
				padding-left: 0;
			}

			#startTimeSelector-button,
			#endTimeSelector-button {
				width: 79px;
				margin-left: 0;
				padding-left: 0;
			}
/*
			#archiveWrapper select {
				float: left;
			}
*/							
			#timeStepSelectorHolder select {
				width: 225px;
			}
	
			#numberOfImagesSelectorHolder select {
				width: 225px;
			}
	
			.productContainer {
				position: relative;
				width: 200px;
				min-height: 50px;
				margin: 10px 0;
				padding: 5px 10px;
				border: 1px solid black;
			}
			
			.productContainer button {
				float: left;
			}
			
			.productContainer label.productHideShowLabel {
				margin-right: 10px;
			}
			
			.productContainer div.opacityWrapper {
				float: right;
				width: 95px;
				margin-right: 30px;
				padding-top: 5px;
			}

			.map-container {
				border: 1px solid black;
				font-size: 16px;
				padding: 5px 10px;
				position: relative;
				width: 200px;
			}

			.map-container label {
				margin-bottom: 2px;
			}

			.map-container select {
				margin-right: 5px;
				height: 22px;
			}

			.mapHideShowLabel {
				margin-top: 0;
				padding: 3px;
			}

			.map-container div.mapOpacityWrapper {
				float: right;
				width: 50px;
				margin-right: 10px;
				padding-top: 4px;
			}

			/* Default (roads, rivers, lakes) */
			#map_wrapper img {
				z-index: 6;
			}

			#map_wrapper #holder-borders img {
				z-index: 1;
			}

			#map_wrapper #holder-counties img {
				z-index: 2;
			}

			#map_wrapper #holder-states img {
				z-index: 3;
			}

			#map_wrapper #holder-countries img,
			#map_wrapper #holder-nws_county_warning_area img {
				z-index: 4;
			}

			#map_wrapper #holder-coastlines img {
				z-index: 5;
			}

			#map_wrapper #holder-cities img,
			#map_wrapper #holder-airports img {
				z-index: 7;
			}

#mouseDrawDragWrapper,
#followWrapper {
    width: 225px;
    padding: 2px 2px 4px 2px;
}

#followWrapper {
	background-color: #e8e8e8;
}

/* Set up controls for feature-following graphics/GUI. */
.followBox {
    z-index: 501;
    position: absolute;
    background: transparent;
    border: 1px solid blue;
    margin: 0;
    padding: 0;
    border-style: solid;
    cursor: pointer;
}

#followBox00 {
    border-color: lime;
}

#followBox01 {
    border-color: red;
}

#followGraphicsWrapper {
    z-index: 12;
    position: absolute;
    margin: 0;
    padding: 0;
}

.followInstructions {
    display: block;
    z-index: 13;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: auto;
    padding: 0;
    max-width: 50%;
    color: #999;
    background-color: black;
}

/* Hide these at the start */
#followInstructions1,
#followInstructions2 {
    display: none;
}

.followInstructions ol,
.followInstructions ul {
    margin: 4px;
    padding: 0 0 0 20px;
}

.followInstructions p {
    margin: 4px;
}

#numberOfTiles {
    font-weight: bold;
}

.past {
    color: #666;
    text-decoration: line-through;
}

.current {
    color: white;
}

.future {
    color: #999;
}

.imageMarker {
    position: absolute;
    padding: 0;
    /*
    border-style: solid;
    border-color: yellow;
    */
    border: 1px solid yellow;
}

.imageMarker.vertical {
    margin: -6px 0 0 0;
    width: 0;
    height: 12px;
}

.imageMarker.horizontal {
    margin: 0 0 0 -6px;
    width: 12px;
    height: 0;
}

.imageMarker.last {
    margin: -2px 0 0 -2px;
    width: 4px;
    height: 4px;
}

.imageMarker.activeImage {
    margin: -6px 0 0 -6px !important;
    width: 12px !important;
    height: 12px !important;
}



			#overlay {
				position: absolute;
				width: 135px;
				height: 50px;
				left: 50%;
				bottom: 50px;
				background-color: #000;
				opacity: 0.7;
				filter: alpha(opacity=70);
				z-index: 1000;
			}

			#overlay p {
				float: left;
				padding: 0;
				margin: 15px 0px 0px 10px;
				color: white;
				font-size: 20px;
			}

			#overlay img {
				float: right;
				margin: 10px 10px 0px 0px;
			}
			/*
			#overlay {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				background: #000;
				opacity: 0.7;
				filter: alpha(opacity=70);
				z-index: 1000;
			}
			#loading {
				width: 140px;
				height: 140px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -70px 0 0 -70px;
				z-index: 1001;
			}
			*/
			
			/* All zoom levels */
			.z00,
			.z01,
			.z02,
			.z03,
			.z04,
			.z05
			{
				position: absolute;
			}

			/* Had to turn these off after I "fixed" them to actually work because the blending got all screwed up and it works without z-index values on the zoom levels */
			/* zoom_level_00 */
/*			#zoom_level_00 {
*//*			.zoom_level_00 {
				z-index: 0;
			}
*/			
			.z00 {
				width: 100%;
				height: 100%;
			}
			
			.z00.r000 {
				top: 0%;
			}
			
			.z00.c000 {
				left: 0%;
			}
			
			/* zoom_level_01 */
/*			#zoom_level_01 {
*//*			.zoom_level_01 {
				z-index: 1;
			}
*/			
			.z01 {
				width: 50%;
				height: 50%;
			}
			
			.z01.r000 {
				top: 0%;
			}
			
			.z01.r001 {
				top: 50%;
			}
			
			.z01.c000 {
				left: 0%;
			}
			
			.z01.c001 {
				left: 50%;
			}
			
			/* zoom_level_02 */
/*			#zoom_level_02 {
*//*			.zoom_level_02 {
				z-index: 2;
			}
*/			
			.z02 {
				width: 25%;
				height: 25%;
			}
			
			.z02.r000 {
				top: 0%;
			}
			
			.z02.r001 {
				top: 25%;
			}
			
			.z02.r002 {
				top: 50%;
			}
			
			.z02.r003 {
				top: 75%;
			}
			
			.z02.c000 {
				left: 0%;
			}
			
			.z02.c001 {
				left: 25%;
			}
			
			.z02.c002 {
				left: 50%;
			}
			
			.z02.c003 {
				left: 75%;
			}

			/* zoom_level_03 */
/*			#zoom_level_03 {
*//*			.zoom_level_03 {
				z-index: 3;
			}
*/			
			.z03 {
				width: 12.5%;
				height: 12.5%;
			}
			
			.z03.r000 {
				top: 0%;
			}
			
			.z03.r001 {
				top: 12.5%;
			}
			
			.z03.r002 {
				top: 25%;
			}
			
			.z03.r003 {
				top: 37.5%;
			}
			
			.z03.r004 {
				top: 50%;
			}
			
			.z03.r005 {
				top: 62.5%;
			}
			
			.z03.r006 {
				top: 75%;
			}
			
			.z03.r007 {
				top: 87.5%;
			}
			
			.z03.c000 {
				left: 0%;
			}
			
			.z03.c001 {
				left: 12.5%;
			}
			
			.z03.c002 {
				left: 25%;
			}
			
			.z03.c003 {
				left: 37.5%;
			}
			
			.z03.c004 {
				left: 50%;
			}
			
			.z03.c005 {
				left: 62.5%;
			}
			
			.z03.c006 {
				left: 75%;
			}
			
			.z03.c007 {
				left: 87.5%;
			}
			
			/* zoom_level_04 */
/*			#zoom_level_04 {
*//*			.zoom_level_04 {
				z-index: 4;
			}
*/			
			.z04 {
				width: 6.25%;
				height: 6.25%;
			}
			
			.z04.r000 {
				top: 0%;
			}
			
			.z04.r001 {
				top: 6.25%;
			}
			
			.z04.r002 {
				top: 12.5%;
			}
			
			.z04.r003 {
				top: 18.75%;
			}
			
			.z04.r004 {
				top: 25%;
			}
			
			.z04.r005 {
				top: 31.25%;
			}
			
			.z04.r006 {
				top: 37.5%;
			}
			
			.z04.r007 {
				top: 43.75%;
			}
			
			.z04.r008 {
				top: 50%;
			}
			
			.z04.r009 {
				top: 56.25%;
			}
			
			.z04.r010 {
				top: 62.5%;
			}
			
			.z04.r011 {
				top: 68.75%;
			}
			
			.z04.r012 {
				top: 75%;
			}
			
			.z04.r013 {
				top: 81.25%;
			}
			
			.z04.r014 {
				top: 87.5%;
			}
			
			.z04.r015 {
				top: 93.75%;
			}
			
			.z04.c000 {
				left: 0%;
			}
			
			.z04.c001 {
				left: 6.25%;
			}
			
			.z04.c002 {
				left: 12.5%;
			}
			
			.z04.c003 {
				left: 18.75%;
			}
			
			.z04.c004 {
				left: 25%;
			}
			
			.z04.c005 {
				left: 31.25%;
			}
			
			.z04.c006 {
				left: 37.5%;
			}
			
			.z04.c007 {
				left: 43.75%;
			}
			
			.z04.c008 {
				left: 50%;
			}
			
			.z04.c009 {
				left: 56.25%;
			}
			
			.z04.c010 {
				left: 62.5%;
			}
			
			.z04.c011 {
				left: 68.75%;
			}
			
			.z04.c012 {
				left: 75%;
			}
			
			.z04.c013 {
				left: 81.25%;
			}
			
			.z04.c014 {
				left: 87.5%;
			}
			
			.z04.c015 {
				left: 93.75%;
			}
			
			/* zoom_level_05 */
/*			#zoom_level_05 {
*//*			.zoom_level_05 {
				z-index: 5;
			}
*/			
			.z05 {
				width: 3.125%;
				height: 3.125%;
			}

			.z05.r000 {
			  top: 0%;
			}

			.z05.r001 {
			  top: 3.125%;
			}

			.z05.r002 {
			  top: 6.25%;
			}

			.z05.r003 {
			  top: 9.375%;
			}

			.z05.r004 {
			  top: 12.5%;
			}

			.z05.r005 {
			  top: 15.625%;
			}

			.z05.r006 {
			  top: 18.75%;
			}

			.z05.r007 {
			  top: 21.875%;
			}

			.z05.r008 {
			  top: 25%;
			}

			.z05.r009 {
			  top: 28.125%;
			}

			.z05.r010 {
			  top: 31.25%;
			}

			.z05.r011 {
			  top: 34.375%;
			}

			.z05.r012 {
			  top: 37.5%;
			}

			.z05.r013 {
			  top: 40.625%;
			}

			.z05.r014 {
			  top: 43.75%;
			}

			.z05.r015 {
			  top: 46.875%;
			}

			.z05.r016 {
			  top: 50%;
			}

			.z05.r017 {
			  top: 53.125%;
			}

			.z05.r018 {
			  top: 56.25%;
			}

			.z05.r019 {
			  top: 59.375%;
			}

			.z05.r020 {
			  top: 62.5%;
			}

			.z05.r021 {
			  top: 65.625%;
			}

			.z05.r022 {
			  top: 68.75%;
			}

			.z05.r023 {
			  top: 71.875%;
			}

			.z05.r024 {
			  top: 75%;
			}

			.z05.r025 {
			  top: 78.125%;
			}

			.z05.r026 {
			  top: 81.25%;
			}

			.z05.r027 {
			  top: 84.375%;
			}

			.z05.r028 {
			  top: 87.5%;
			}

			.z05.r029 {
			  top: 90.625%;
			}

			.z05.r030 {
			  top: 93.75%;
			}

			.z05.r031 {
			  top: 96.875%;
			}

			.z05.c000 {
			  left: 0%;
			}

			.z05.c001 {
			  left: 3.125%;
			}

			.z05.c002 {
			  left: 6.25%;
			}

			.z05.c003 {
			  left: 9.375%;
			}

			.z05.c004 {
			  left: 12.5%;
			}

			.z05.c005 {
			  left: 15.625%;
			}

			.z05.c006 {
			  left: 18.75%;
			}

			.z05.c007 {
			  left: 21.875%;
			}

			.z05.c008 {
			  left: 25%;
			}

			.z05.c009 {
			  left: 28.125%;
			}

			.z05.c010 {
			  left: 31.25%;
			}

			.z05.c011 {
			  left: 34.375%;
			}

			.z05.c012 {
			  left: 37.5%;
			}

			.z05.c013 {
			  left: 40.625%;
			}

			.z05.c014 {
			  left: 43.75%;
			}

			.z05.c015 {
			  left: 46.875%;
			}

			.z05.c016 {
			  left: 50%;
			}

			.z05.c017 {
			  left: 53.125%;
			}

			.z05.c018 {
			  left: 56.25%;
			}

			.z05.c019 {
			  left: 59.375%;
			}

			.z05.c020 {
			  left: 62.5%;
			}

			.z05.c021 {
			  left: 65.625%;
			}

			.z05.c022 {
			  left: 68.75%;
			}

			.z05.c023 {
			  left: 71.875%;
			}

			.z05.c024 {
			  left: 75%;
			}

			.z05.c025 {
			  left: 78.125%;
			}

			.z05.c026 {
			  left: 81.25%;
			}

			.z05.c027 {
			  left: 84.375%;
			}

			.z05.c028 {
			  left: 87.5%;
			}

			.z05.c029 {
			  left: 90.625%;
			}

			.z05.c030 {
			  left: 93.75%;
			}

			.z05.c031 {
			  left: 96.875%;
			}




/* START copied from HTML5 Looper */
/* DIDN'T copy over the sections that had controlBottom OR extraTall in them */
			
/* START - control BOTH */
		ul#controlWrapper {
/*			display: none;
*/
/*			display: inline-block;
			float: left;
*/
			text-align: center;

			position: absolute;
			top: 0;
			left: 0;

			/* 201611141340: Above here was always here */
			/* 201611141340: Below here was added from top (not in HTML5 looper) */
			
			z-index: 13;
			color: black;
			background-color: white;
			width: 250px;
		
			/* Set to percentage of viewport height in modern browsers */
			/*height: 100vh;*/
			height: 100%;

			list-style-type: none;
			
			margin: 0;
			padding: 0;
			/* Trying to make dropdowns scroll */
			overflow-y: auto;
			overflow-x: hidden;
			/*overflow: hidden;*/

			/* 201611141340: Below here was under .controlSide */
/*			background-color: green;
			min-width: 200px;
			max-width: 500px;
			min-height: 1000px;
			height: 100%;
*/
		}
		ul#controlWrapper li {
			text-align: center;
			list-style-type: none;
			vertical-align: middle;

/*			border: 1px solid green;
			height: 50px;
			vertical-align: middle;
*/		}
		ul#controlWrapper li button {
		}
		ul#controlWrapper li#imageryTime {
/*			width: 5.2em;
			font-size: 1.5em;
			width: 100%;
*/			width: 170px;
			font-size: 20px;
			font-weight: bold;
			overflow: hidden;
			text-align: center;
		}
		li#sliderContainer {
		}
		ul#controlWrapper li#sliderContainer div {
		}
		li#playPauseWrapper {
		}
		ul#controlWrapper li#playPauseWrapper #playPause {
		}
		li#zoomWrapper {
		}
		ul#controlWrapper li#zoomWrapper {
		}

		ul li#animationSpeedWrapper {
		}
		ul li#animationSpeedWrapper div {
		}
		ul li#advancedControlOpener {
		}
		ul li label {
			display: block;
		}
		ul li label.sliderLabel {
			margin-bottom: 5px;
		}
		ul li label#keyboardShortcuts {
			font-size: .9em
		}
		ul li#orgLogos img {
/*			margin: 0 10px 0 10px;
*/
		}
/* END - control BOTH */


/* START - controlSide */
		.controlSide ul#controlWrapper {
		}
		.controlSide ul#controlWrapper li {
			display: block;
			margin: 5px auto;
		}
		.controlSide ul#controlWrapper li#imageryTime {
		}
		.controlSide li#sliderContainer {
			width: 80%;
		}
		.controlSide ul#controlWrapper li#sliderContainer div {
		}
		.controlSide li#playPauseWrapper {
		}
		.controlSide ul#controlWrapper li#playPauseWrapper #playPause {
		}
		.controlSide li#zoomWrapper {
		}
		.controlSide ul#controlWrapper li#zoomWrapper {
		}
/*		.controlSide button {
			padding: 2px;
		}
*/		.controlSide .ui-button .ui-button-text
		{
		}
		.controlSide ul li#animationSpeedWrapper label {
			float: left;
		}
		.controlSide ul li#animationSpeedWrapper {
			width: 220px;
			height: 25px;
			margin-top: 8px;
		}
		.controlSide ul li#animationSpeedWrapper div#animationSpeed {
			width: 50%;
			margin-top: 4px;
			float: right;
			
		}
		.controlSide ul li#orgLogos img {
		}
/* END - controlSide */


/* END copied from HTML5 Looper */



		#zoomIn {
			clear: both;
		}

		/* START - Set up custom right-click/context menu from: http://jsfiddle.net/u2kJq/241/ */
			
		#custom-menu {
			display: none;
			z-index: 1000;
			position: absolute;
			overflow: hidden;
			border: 1px solid #CCC;
			white-space: nowrap;
			background: #FFF;
			color: #333;
			border-radius: 5px;
			
			/* Added by Kevin */
			list-style: none;
			margin: 0;
			padding: 0;
			
		}

		#custom-menu li {
			padding: 8px 12px;
			cursor: pointer;
		}

		#custom-menu li:hover {
			background-color: #DEF;
		}

		#rotationAngleWrapper {
			border: 1px solid black;
			float: left;
			margin: 2px 2px 0 6px;
		}

		#rotationAngle {
			float: left;
			margin: 5px 0 4px 10px;
			width: 85px;
		}

		label[for=rotationAngle] {
			float: left;
			margin: 3px 0 0 6px;
			width: 45px;
		}

		/* END - Set up custom right-click/context menu from: http://jsfiddle.net/u2kJq/241/ */

/* Message display for synthetic or real (or future other things) */
#satelliteMessage {
	background-color: #aaaa00;
	color: #ffffff;
	font-weight: bold;
	height: 28px;
	left: 0;
	margin: 0;
	opacity: 70%;
	padding: 8px 0 0 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 12;
}

#imageryFlagMessage {
	background-color: #aaaaaa;
	color: #ffffff;
	font-weight: bold;
	height: 28px;
	left: 0;
	margin: 0;
	opacity: 50%;
	padding: 8px 0 0 0;
	position: absolute;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 12;
}

#imageryFlagMessage.imagery-flag-message-red {
	background-color: #ff6666;
}

/* Keep the flag messages centered whether the menu is hidden or not. */
@media screen and (max-width: 1400px) {
	#satelliteMessage {
		padding: 8px 0 0 125px;
	}

	#satelliteMessage.menu-closed {
		padding: 8px 0 0 0;
	}

	#imageryFlagMessage {
		padding: 8px 0 0 125px;
	}

	#imageryFlagMessage.menu-closed {
		padding: 8px 0 0 0;
	}
}

#drawParamsWrapper {
	text-align: center;
}

#drawColor-button {
	width: 60px;
}

#drawColor-button .ui-selectmenu-text {
	background-color: rgba(255, 255, 255, 0.7);
	margin-right: 0;
	text-align: center;
}

#drawColor-button .ui-selectmenu-icon {
	display: none;
}

#drawWidth-button {
	width: 34px;
}

#mouseDrawPopout {
	background-color: rgba(256, 256, 256, 0.3);
	border: 2px solid white;
	border-radius: 0 5px 5px 0;
	color: black;
	display: none;
	position: absolute;
	left: 248px;
	top: 30px;
	width: 200px;
	z-index: 13;
}

#mouseDrawPopout h2 {
	font-size: 16px;
	margin: 5px;
	text-align: center;
}

#mouseDrawPopout h2 span {
	background-color: rgba(256, 256, 256, 0.7);
	padding: 1px 3px;
	border-radius: 3px;
}

#drawActionsWrapper {
	text-align: center;
	margin-bottom: 5px;
}

#drawActionsWrapper button {
	background-color: rgba(128, 128, 128, 0.75);
	border: 1px solid black;
	border-radius: 3px;
	box-shadow: none;
	height: 25px;
}

#drawActionsWrapper button.draw-active {
	background-color: rgba(255, 255, 255, 1);
}

#drawParamsWrapper {
	margin-bottom: 5px;
}

#drawClearWrapper {
	margin-bottom: 5px;
	text-align: center;
}

#messageContainer, #announcementContainer {
	border: 3px solid white;
	border-radius: 5px;
	color: #ffffff;
	display: none;
	padding: 2px;
	width: 250px;
}

#messageContainer {
	background-color: rgba(160, 160, 160, 0.85);
	position: absolute;
	right: 10px;
	top: 40px;
	z-index: 13;
}

#announcementContainer {
	background-color: rgba(30, 77, 43, 0.85);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 14;
}

#messageContainer h2, #announcementContainer h2 {
	font-size: 20px;
	margin: 2px;
	padding: 2px;
}

#messageContainer .close, #announcementContainer .close, #mouseDrawPopoutClose {
	float: right;
	padding: 0;
}

#messageContainer hr, #announcementContainer hr, #mouseDrawPopout {
	margin-top: -1px;
}

#messageContainer h3.message-title {
	font-size: 16px;
	margin: 3px;
}

#messageContainer .message-content, #announcementContainer .announcement-content {
	margin: 3px;
	padding: 8px;
}

.announcement-content a {
	color: rgb(200, 195, 114);
}

/* x/y parameter debugger. */
#debug_xy {
	background-color: rgba( 255, 255, 255, 0.5);
	color: black;
	display: none;
	right: 0;
	position: absolute;
	top: 0;
	z-index: 999;
}

/* Setting up boxes to visually test rotation. */
#rammb_viewport #zoom_holder_diamond {
	border: 1px solid yellow;
	background-color: #666;
	display: none;
	position: absolute;
	margin: 0 auto;
}

.test_center_line {
	display: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 999;
}

#test_center_vertical {
	border-right: 1px solid red;
	height: 50vh;
	left: 50vw;
	top: 0;
	width: 0;
}

#test_center_horizontal {
	border-bottom: 1px solid red;
	height: 0;
	left: 0;
	top: 50vh;
	width: 50vw;
}

#rammb_viewport #zoom_holder .test_boxes {
	display: none;
	border-bottom: 1px solid orange;
	border-right: 1px solid white;
	position: absolute;
	z-index: 999;
}

.test_z02 {
	width: 25%;
	height: 25%;
}

.test_z02.test_r000 {
	top: 0%;
}

.test_z02.test_r001 {
	top: 25%;
}

.test_z02.test_r002 {
	top: 50%;
}

.test_z02.test_r003 {
	top: 75%;
}

.test_z02.test_c000 {
	left: 0%;
}

.test_z02.test_c001 {
	left: 25%;
}

.test_z02.test_c002 {
	left: 50%;
}

.test_z02.test_c003 {
	left: 75%;
}