@media only screen and (min-width: 44em) {
	#imac {
		padding-left: 20px;
	}
	
	.column, .columns {
		float: left;
	}

	.one { width: 5.88235%; }
	.two { width: 11.76471%; }
	.three { width: 17.64706%; }
	.four { width: 23.529411%; }
	.five { width: 29.41176%; }
	.six { width: 35.29411%; }
	.seven { width: 41.17647%; }
	.eight { width: 47.05882%; }
	.halfwidth { width: 50%; }
	.nine { width: 52.94118%; }
	.ten { width: 58.82352%; }
	.eleven { width: 64.70588%; }
	.twelve { width: 70.58823%; }
	.thirteen { width: 76.47059%; }
	.fourteen { width: 82.35294%; }
	.fifteen { width: 88.23529%; }
	.sixteen { width: 94.11765%; }
	.seventeen { width: 100%; }
	
	.one-column-padded { padding: 0 5.88235%; }

	.menuwrapper {
		width: 285px;
		float: left;
	}
	
	.mainmenu {
		margin-top: 100px;
	}
}

@media only screen and (max-width: 44em) {
	.column, .columns {
		padding: 0 20px;
	}
}

@media only screen and (max-width: 72em) {
	.panel-page #topbar .halfwidth {
		width: 50% !important;
		float: left !important;
		padding: 0 !important;
	}
}

@media only screen and (max-width: 50em) {
	.header-content { margin-top: 50px; }
	
	.hideable .centered { margin: 0; width: 75%; }
	
	#iphone { padding-top: 210px; }
	#iphone img { width: 25px; }
	
	#ipad { padding-top:175px; }
	#ipad img {	width: 119px; }
	
	#imac { padding-top: 124px; }
	#imac img {	width: 169px; }
	
	.top-buttons {
		display: none;
	}
	
	.login-status {
		text-align: right;
		width: 50%;
		float: right;
		overflow: visible;
		padding-right: 16px;
		z-index: 5000;
	}
	
	.login-status>.inner {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.login-status:after {
		content: ' ';
		width: 0;
		height: 0;
		border-top: 5px solid #292663;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		display: inline-block;
		margin-left: 5px;
		position: absolute;
		top: 5px;
		right: 0;
	}
	
	.login-status:hover .flapout, .login-status.hover .flapout {
		display: block;
	}
	
	.text-logged-in-as {
		display: none;
	}
}

@media only screen and (min-width: 501px) and (max-width: 50em) {
	.login-status {
		padding-left: 125px;
	}
}
/*
@media screen and (min-width: 501px) and (max-width: 635px) {
	.login-status {
		text-align: left;
	}
}
*/

@media only screen and (max-width: 1020px) {
	#content-ribbon { height: 590px; }
	#content-slider { height: 545px; }
}

@media only screen and (max-width: 768px) {
	.panel-tab {
		font-size: 16px;
	}
}

@media only screen and (max-width: 512px) {
	#content-ribbon { height: 740px; }
	#content-slider { height: 695px; }
}

@media only screen and (max-width: 550px) {
	.rsArrow { display: none !important; }
}

@media only screen and (max-width: 500px) {
	
	.searchbar {
		padding-top: 10px;
	}
	
	.panel-page .logowrapper {
		top: 35px;
	}
	
	.logowrapper a {
		width: 114px;
		height: 26px;
		background-size: 100% auto;
	}
}

@media only screen and (min-width: 360px) {
	.top-button {
		margin-left: 16px;
	}
}

@media only screen and (max-width: 390px) {
	.hideable .centered {
		width: 100%;
	}
}

@media screen and (max-width: 880px) {
	.login-status .columns {
		width: 50%;
	}
}

@media
only screen { 
	.stream-logo-small {
		background-image: url(img/stream-logo-small@2x.png);
		background-size: 100% auto;
	}
	.stream-logo-overblack {
        background-image: url(/Content/Logos/Stream_OverBlack1.svg);
        background-size: 100%;
        background-repeat: no-repeat;
	}

    .stream-logo-overwhite {
        background-image: url(/Content/Logos/Stream_OverWhite1.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }
	
	.icon-map {
		background-image: url(img/largeicon-map@2x.png); 
		background-size: 100% auto;
	}
	.icon-scada {
		background-image: url(img/largeicon-scada@2x.png);
		background-size: 100% auto;
	}
	.icon-data {
		background-image: url(img/largeicon-data@2x.png);
		background-size: 100% auto;
	}
	.icon-settings {
		background-image: url(img/largeicon-settings@2x.png);
		background-size: 100% auto;
	}
	
	.smallitems li a {
		background-image: url(img/smallicons@2x.png);
		background-size: 30px auto;
	}
	
	.logowrapper a {
		background-image: url(img/leauxgeaux@2x.png);
		background-size: 100% auto;
	}
	
	.fullscreenbutton {
		background-image: url(img/togglefullscreen@2x.png);
		background-size: 64px auto;
	}
	
	.homebuttongraph {
		background-image: url(img/homebutton@2x.png);
		background-size: 100% auto;
	}
}