/* Show or hide bus Alert */
li.panelItem > div.leftPanelItem .busAlert{
	display: none;
}
li.panelItem.hasAlert > div.leftPanelItem .busAlert{
	display: inline-block;
}

/* Show or hide list element */
body.focusingBus > #panel > #content > ul > li, body.focusingStop > #panel > #content > ul > li{
	display:none;
}
body.focusingBus > #panel > #content > ul > li.selectedBus, body.focusingStop > #panel > #content > ul > li.selectedBus{
	display: inline-block;
}

/* Show or hide stop info of selected bus */
body.focusingBus > #panel > #content > ul > li.selectedBus > div.leftPanelItem > .busText > span
	,body.focusingStop > #panel > #content > ul > li.selectedBus > div.leftPanelItem > .busText > span{
	display: inline-block;
	margin-top:16px;
}
body.focusingBus > #panel > #content > ul > li.selectedBus.noStopInfo > div.leftPanelItem > .busText > span,
	body.focusingStop > #panel > #content > ul > li.selectedBus.noStopInfo > div.leftPanelItem > .busText > span{
	display: none;
}
/* show or hide "page" */
#panel > #about{display:none;}
#panel.about > #about{display:block;}
#panel > #errorContent{display: none;}
#panel.error > #errorContent{display: block;}

.sprite{
	overflow-x: hidden;
	position: relative;
}



.sprite > * {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
	src='../img/spriteIcons.png',
	sizingMethod='scale');
	width: 240px;
	height: 40px;
	top:0;
	left:0;
	position: absolute;
}

.busText{
	z-index:200;
}

.rightPanelItem > .sprite{
	z-index: 300;
}

.sprite > .busAlertClose {
	margin-top: 0;
	top:-39px;
	left: -40px;
}

li.panelItem > div.leftPanelItem .focusBus{
	left: -120px;
}

li.panelItem .busAlert{
	left: -160px;
}

#panel:not(.displayClose) > #nav.hasPosition > ul > li.action{
	display: inline-block;
}
#panel:not(.displayClose) > #nav.hasPosition > ul > li.action button{
	left: -200px;
}

.info{
	display: inline-block;
}
.action{
	display: none;
}
#panel.displayClose .action{
	display: inline-block;
}
#panel.displayClose .action button{
	left: -40px;
}

/*********/
/*CONTENT*/
/*********/
#panel > #content > ul > li.panelItem > div.rightPanelItem{
	display: none;
}
#panel > #content > ul > li.panelItem.alertViz > div.rightPanelItem{
	display: block;
}
/*******/
/*ABOUT*/
/*******/

#panel.about .action{
	display:none;
}
#panel.about .info button{
	left:-40px;
}

/*******/
/*ERROR*/
/*******/

#panel.error .action,#panel.error .info{
	display:none;
}

/** Remove Media query badly handled in IE9 */
@media all and (max-width:480px),all and (max-height:500px){
	body:not(.focusingBus):not(.focusingStop) > #mapContainer{
		bottom:200px;
	}
	body:not(.focusingBus):not(.focusingStop):not(.full) > #panel{
		height:200px;
	}
	body:not(.focusingBus):not(.focusingStop) #panel > #nav{
		bottom:160px;
	}
	li.noStopInfo div.leftPanelItem > div.busText > span{
		display:inline-block;
	}
	body:not(.focusingBus):not(.focusingStop) #panel > #content > ul > li.panelItem{
		flex: none;
		-webkit-flex: none;
		-webkit-box-flex: none;
		-moz-box-flex: none;
		-ms-flex: none;
		border-left: none;
	}
	body:not(.focusingBus):not(.focusingStop) .busText > h2{
		display:block;
	}
	body:not(.focusingBus):not(.focusingStop) #panel > #content > ul > li.panelItem > div.leftPanelItem{
		height: 39px;
	}
	body:not(.focusingBus):not(.focusingStop) .busColour{
		position: relative;
		float: left;
		width: 10px;
	}
	body:not(.focusingBus):not(.focusingStop) .busText {
		width: 100%;
		position: relative;
		text-align:left;
		line-height: 12px;
		padding: 0 80px 0 10px;
		color:inherit;
	}
	body:not(.focusingBus):not(.focusingStop) .busText > span.nextStop{
		display:inline-block !important;
	}
	body:not(.focusingBus):not(.focusingStop) .busText > span.nameStop{
		display: inline-block !important;
		color:#35414a;
	}
	body:not(.focusingBus):not(.focusingStop) .nameStop {
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: auto;
	}
	body:not(.focusingBus):not(.focusingStop) .busText > span {
		font-size: 11px;
		color: #FFF;
	}
	body:not(.focusingBus):not(.focusingStop) .nextStopDistance {
		font-weight: normal;
	}
	
	body:not(.focusingBus):not(.focusingStop) .busText > span.noService {
		padding-left: 10px;
		position: relative;
		width: auto;
		height: auto;
		line-height: normal;
		color:#35414a;
	}
	body:not(.focusingBus):not(.focusingStop) #contentList{
		display:block;
	}
	body:not(.focusingBus):not(.focusingStop) li.panelItem > div.leftPanelItem .focusBus{
		background-image:url('../img/spriteIcons.png');
		background-size: 240px 40px;
		background-position: -120px 0;
		position: relative;
		width: 40px;
		height: 40px;
	}
}