/*------BEGIN New splash screen-----*/
.ui-widget-content {
	border: 1px solid #404040;
	background: url(../img/bg-noise.png) repeat scroll 0 0 rgba(34,34,34,.5);
	color: #eeeeee;
	}

.ui-widget-header {
	background: none;
	border: none;
	}
/*------END new splash screen-----*/

 .radio_tabs {
        position:absolute;
        bottom:50%;
     	left:0%;
     	clear: both;
     	width:330px;
     	height:356px;
     	border:1px solid #888;
     	color:#888;
     	z-index:30000;
     	background:#999;
     	background:url(../img/bg-noise.png) repeat scroll 0 0 rgba(34,34,34,.5);
     	background:url(../img/bg-noise.png) repeat scroll 0 0 rgba(34,34,34,.5);
	 /* transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);  linear */
    	}

.radio_tabs .drag_handle{
        top: 140px;
        right: 0px;
        opacity:0;
        }


.radio_tabs:hover .drag_handle, #sliderarea:hover .drag_handle{
        right:-27px;
        opacity:1
        }

.radio_tabs.show_menu{
        left:0;
        bottom:30%;
        }

.radio_tabs.hide_menu{
        left:-335px;
        bottom:30%;
        transition: .7s ease;
        }

.radio_tabs.hide_menu .minus{
	color: #eee;
        right:-73px;
        width:61px;
        font-size:16px;
        padding:5px;
        border-top:1px solid #222;
        border-bottom:1px solid #222;
        border-right:1px solid #222;
        }

.radio_tabs.hide_menu .drag_handle, #sliderarea.hide_menu .drag_handle {
        right:0px
        }

#sliderarea .drag_handle{
        top: 38px;
        right: 0px;
        opacity:0;
	background: url(../img/drag.png) no-repeat scroll 3px 2px, url(../img/bg-noise.png) repeat scroll 0 0% rgba(34, 34, 34, .4);
	border-left: none;
	border-right: inherit;
	border-top: inherit;
	border-bottom: inherit
        }	

#sliderarea.show_menu{
        left:0%;
        bottom:calc(30% - 105px);
        }

#sliderarea.hide_menu{
        left:-335px;
        bottom:calc(30% - 105px);
        transition: .7s ease;
        }

#sliderarea.hide_menu .minus{
        right:-73px;
        width:61px;
        font-size:16px;
        padding:5px;
        border-top:1px solid #222;
        border-bottom:1px solid #222;
        border-right:1px solid #222;
        }

.show_menu .minus{
        background: url(../img/bg-noise.png) repeat scroll 0 0%, linear-gradient(to top, #777777 0%, rgba(65, 64, 66, 0) 100%) repeat scroll 0 0 #555;
        }

.hide_menu .minus{
        }

.hide_menu .drag_handle{
        transition: none;
        }

.drag_handle {
        width: 24px;
        height: 24px;
        position: absolute;
        border-radius: 0% 2px 2px 0px;
        background:url(../img/drag.png) no-repeat scroll 3px 2px,  url(../img/bg-noise.png) repeat scroll 0 0% #333;
        display: block;
        text-align: center;
        font-size: 12px;
        border-left: none;
        border-right: 1px solid #000;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        z-index: 1;
        transition: .3s ease;
        }

.radio_tabs .drag_handle {
	top: 140px;
        right: 0px;
	opacity: 0;
	width: 24px;
	height: 24px;
	position: absolute;
	border-radius: 0% 2px 2px 0px;
	background: url(../img/drag.png) no-repeat scroll 3px 2px, url(../img/bg-noise.png) repeat scroll 0 0% rgba(34, 34, 34, .4);
	display: block;
	text-align: center;
	font-size: 12px;
	border-left: none;
	border-right: inherit;
	border-top: inherit;
	border-bottom: inherit;
	z-index: 1;
	transition: .3s ease;
	}

.tp{
	top: 140px;
	right: 0px;  
	}
	  
.sa{
	top: 38px;
	right: -25px;  
	}
	  
.minus{
	color: #fff;
	width: 24px;
	height: 21px;
	position: absolute;
	top: 0px;
	right: 0px;
	border-radius: 0% 2px 2px 0px;
	background:  #999;
	display: block;
	font-size:15px;
	text-align: center;
	font-size: 22px;
	z-index: 30000;
	line-height:14px;
	}

.radio_tab {
        display:block;
        }

.radio_tab > label {
	width:364px;
	height:50px;  
        border-bottom: 1px solid #000; 
	border-right:1px solid #000;
        display:block;
        left: 0;
	position:relative; 
	z-index:30000;
	background-color: #999;
	transition: .5s ease;
        }
	
.radio_tab > label span{
	color:#fff;
	font-size:20px;
	width:175px;
	line-height:55px;
	text-align:left;
	padding-left:55px;
	transition: .3s ease;
	
        }

.radio_tab > label.onetime{
	width:50px; 
	}

.radio_tab > label.onetime span{
	display:none; 
	}
	
.radio_tab > label.onetime:hover{
	width:330px !important;
        }

.radio_tab > label:hover span{
	display:block !important;
        }

.radio_tabs >label: active{}[type=radio]:checked ~ label{}
	
.radio_tab label#add_data{
        background:url(../img/add_data.png) no-repeat scroll 0 0 #999 ;	
        }

.radio_tab label#info{
        background:url(../img/info.png) no-repeat scroll 0 0 #999;	
        }

[type=radio]:checked ~ label#add_data, [type=radio]:checked ~ label#info, [type=radio]:checked ~ label#camera_button, [type=radio]:checked ~ label#dwnld, [type=radio]:checked ~ label#link, [type=radio]:checked ~ label#settings, [type=radio]:checked ~ label#question{background-color:transparent;}

.radio_tab label#camera_button{
        background:url(../img/capture.png) no-repeat scroll 0 0 #999;	
        }

.radio_tab label#dwnld{
        background:url(../img/download.png) no-repeat scroll 0 0 #999;	
        }

.radio_tab label#link{
        background:url(../img/link.png) no-repeat scroll 0 0 #999;	
        }

.radio_tab label#settings{
        background:url(../img/settings.png) no-repeat scroll 0 0 #999;	
        }  

.radio_tab label#question{
        background:url(../img/question.png) no-repeat scroll 0 0 #999;
        }

.radio_tab > [type=radio] {
        display: none;   
        }

.content {
        position: absolute;
        top: 0px;
        left:0px;
        bottom: 0;
        padding: 20px 6px 0px 65px;
	width:260px;
	height:336px;
	color:#fff;
	overflow-y:auto;
	overflow-x:hidden;
        display:none;
        }

.content h1 {
	margin-top: -6px;
        margin-bottom: 28px;
	}

#download_specifications h4{
        margin-top: -25px;	
        }
        
[type=radio]:checked ~ label {
        background: transparent;
        border-bottom:1px solid rgba(0,0,0,0);
        z-index: 30000;
	border-right:none;
        }

[type=radio]:checked ~ label:hover span{
	display:none !important;
	}

[type=radio]:checked ~ label:hover{}
	
[type=radio]:checked ~ label ~ .content{
        display:block;
        background:rgba(0,0,0,0)
        }

#information img{
        width:280px;
        }

#select_container{
	height:auto;
        }

#information{
	width:240px;
	text-align: justify;
	}
#select_container{
        height:auto;
	}

#info_sm{
	background:none;
	color:#eee;
	margin-left:-10px;
	}

/*----------new slider areac move to e4.css-----------*/
	
#animationcontrols{
        position: absolute;
	top:40%;
        width: 100%;	
	border-radius:6px;
	}

#animationcontrols div{
	}

 /*----make sure img path is changed to "../img  etc" when moving to e4_integrate.css-----------*/
#sliderarea {
    	background: url(../img/bg-noise.png) repeat scroll 0 0 rgba(34,34,34,.2);
    	border-radius: 0px;
    	bottom: 10%;
    	box-shadow: none;
    	color: white;
    	display:none;
    	height: 100px;
    	margin: 0;
    	padding: 0px;
    	position: absolute;
    	text-align: center;
    	width: 330px;
    	z-index: 30000;
    	border:1px solid #888;
	}

#currentslide{
	width:100%;
	top:9%;
	left:0;
	}

#slider-range{
    	left: 5%;
    	position: absolute;
    	top: 30%;
    	width: 88%;	
	}

#latlon_display{
	background: rgba(0,0,0,0.2);
	text-shadow: 1px 1px #000;
	color: #eee;
	font-size: 12px;
	padding: 3px;
	border-radius: 0px;
	width: 185px;
	border-left: 1px solid #222;
	border-top: 1px solid #222;
	border-bottom: 1px solid #555;
	border-right: 1px solid #555;
	position: absolute;
	bottom: 5%;
	left: 6%;
	}

.olControlMousePosition, #legend{
	display:none
	}

#lookupActive{
	position:absolute;
	right:9%;
	bottom:8%;
	color:#fff;
	}

 /*----------play/pause/rewind etc. controls---make sure img paths are changed to "../img  etc" when moving to e4_integrate.css-----------*/
 
.image {
	background-color:transparent !important;
	background-size: contain;
	height:30px !important;
	width:30px !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
	padding-right:0 !important;
	padding-left:0 !important;
	border: none !important;
	opacity: 1 !important;
 	}

.previous_left {
	background-image:url('../img/previous_small_2.png') !important;
	border-radius: 0 50% 0 0;
    	margin-top: 80px;
    	padding: 2px;
    	float: left;
 	}
 
.start {
	background-image:url('../img/start_small.png') !important;
 	}

.end {
	background-image:url('../img/end_small.png') !important;
 	}

.play {
	background-image:url('../img/play_small.png') !important;
 	}

.pause {
	background-image:url('../img/pause_small.png') !important;
	display:none;
 	}

.forward {
	background-image:url('../img/forward_small.png') !important;
 	}

.rewind {
	background-image:url('../img/rewind_small.png') !important;
 	}

/*----------END play/pause/rewind etc. controls-------------------*/


/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.radio_tab > label {
	width:50px;
	height:50px;  
	}

.radio_tab > label.onetime:hover {
	width:50px !important;
	}
	
.radio_tab > label span {
	display:block !important;
	}

	
.radio_tab > label.onetime span {
	display:none !important;
	}

/*.radio_tab > label span,*/ .radio_tab > label:hover span {
	display:none !important;
	}

[type=radio]:checked ~ label ~ .content {
        display:block;
        background:rgba(0,0,0,0)
        }
}
	


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
.radio_tab > label {
	width:50px;
	height:50px;  
	}

.radio_tab > label.onetime:hover {
	width:50px !important;
	}
	
.radio_tab > label span {
	display:block !important;
	}

	
.radio_tab > label.onetime span {
	display:none !important;
	}

/*.radio_tab > label span,*/ .radio_tab > label:hover span {
	display:none !important;
	}

[type=radio]:checked ~ label ~ .content {
        display:block;
        background:rgba(0,0,0,0)
        }
}