/*-------------------------------------------------
   MetroUI Fixes/Enhancements
-------------------------------------------------*/
*, *:active
{
    outline:0!important;
}

.fg-color-black
{
    color:#000!important;
}
.bg-color-black
{
    background:#000!important;
}

.metrouicss .tile:hover, .metrouicss .tile a:focus
{
    outline: 3px solid #CCC!important;
}

/*.font-fix 
{
    font-family:'Segoe UI Light','Open Sans',Verdana,Arial,Helvetica,sans-serif!important;
}*/

.metrouicss button[type=submit] 
{
    background-color: #008287;
    color:#fff;
}

.metrouicss .nav-bar ul.menu li:hover ul.dropdown-menu 
{
    display:block;
}

/*-------------------------------------------------
   ALL
-------------------------------------------------*/
body 
{
    padding-bottom:50px;
    /*background-image: url(/assets/images/background.png);
    background-repeat: no-repeat;*/
}

.metro .app-bar 
{
    min-height:43px!important;
    height:43px
}

.tile.disabled, .label.disabled, a.tile.disabled, .tile.disabled .tile-content
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  cursor: not-allowed;
}

/*.tile.disabled:hover
{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  opacity: 0.2;
}*/

.tile .tile-content h1 
{
    font-size:70px!important;
    text-align:center;
    width:100%;
    line-height:110px!important;
}

.tile.double-vertical .tile-content h1 
{
    line-height:220px!important;
}

#logo small 
{
    display:inline;
    font-size:25%;
    margin-left:-35px;
}

#legacy-app 
{
    width:860px;
    overflow:hidden;
    border:none;
    margin:-10px 10px 30px 10px;
    background:transparent;
}
#legacy-app-preloader
{
    width:860px;
    height:210px;
    position:absolute;
    top:104px;
    left:10px;
    z-index:900;
    background:#fff url(/images/preloader-w8-cycle-white.gif) no-repeat center;
}

.tile .tile-content h1.ct-icon
{
    line-height:100px!important;
}

#version 
{
    line-height:50px;
    margin:0 5px;
}

.metrouicss .special.replies > li .avatar
{
    background:none;
    width:1px!important;
}

.metrouicss .special.replies > li .reply
{
    margin-left:0;
}

.metrouicss .special 
{
    position:absolute!important;
}

.accorion-frame 
{
    border:none;
    width:100%;
    height:450px;
}
#logo { width:100%; font-size: 260%; }

@media(max-width: 1024px) 
{
    #logo {
        width: 100%;
        font-size: 260%;
    }
    .master-body .tile-area #current-user { margin-top: -30px!important; margin-right: -30px !important;}
    .master-header .myaccount #current-user { margin-top: -20px!important; margin-right: -30px !important;}
    #user-login { margin-right: -30px !important; margin-top: -8px !important; }
    .master-body { margin-left: 30px!important; }
    .master-header { margin-left: 30px!important; }
    .metro .tile-area .tile-area-title { left: 30px !important;}
    .metro .tile-area { padding-left: 0px !important; }    
}
@media(min-width: 1025px) 
{
    .master-header .myaccount #current-user { margin-top: 3px!important; margin-right: -20px !important;}
}
@media(max-width: 1000px) 
{
    #-home-main-column-,
    .master-footer .grid .row .span12 
    {
        display: block;
        width: 96% !important;
    }  
    #-home-right-column- 
    {
        display: block;
        margin-left: 0;
        margin-top: 10px !important;
        width: 96% !important;
    } 
    #-home-button-links-  
    {
        /*width: 100% !important;*/
        display: none;
    }
    #-home-news-resources- 
    {
        width: 93% !important;
    }
} 
/*-------------------------------------------------
   DESKTOP ONLY 
-------------------------------------------------*/
@media(min-width: 1024px)
{
    .user-type {
        text-align:right;
    }
    
    #sandbox-warning {
        position:absolute;
        top:20px;
        left:95px;
        background:red;
        width:500px;
        height:65px;
        margin-left:0;
        text-align:center;
        line-height:65px;
        color:#fff;
        text-transform:uppercase;
        font-weight:bold;
        text-decoration:blink;
    }
    #tile-inquiry-mobile,
    #tile-cctv-mobile-access {
        display:none!important;
    }

}

@media(max-width: 800px) 
{
    #-home-right-column- {
        margin-left: 0 !important;
    }
}

/*-------------------------------------------------
   MOBILE ONLY
-------------------------------------------------*/
@media(max-width: 480px)
{
    #logo small,  #no-apps h2 , #login-user-icon, #sandbox-warning
    {
        display:none;
    }
    .user-type
    {
        text-align:left;
    }
    .metrouicss .tile
    {
        width:100px!important;
        height:100px!important;
    }
    .metrouicss .tile-group
    {
        width:145px!important;
        max-width:145px!important;
        margin:0!important;
        float:left!important;
    }
    .metrouicss .no-app-message 
    {
        width:140px!important;
        font-size:90%!important;
    }
    
    .tile .tile-content h1 
    {
        font-size:50px!important;
        text-align:center;
        width:100%;
        line-height:80px!important;
    }
    
    .tile .tile-content img
    {
        /*width:70px!important;*/
    }
    
    .tile .tile-content h1.ct-icon
    {
        line-height:70px!important;
    }
    
    .tile.double-vertical .tile-content h1 
    {
        line-height:80px!important;
    }
    
   
    h1#logo
    {
        font-size:200%;
        width:100%!important;
    }
   
    .metrouicss .nav-bar .nav-bar-inner > ul.menu 
    {
        position:absolute;
        display:table!important;
        top:-5px;
        left:15px;
    }
    .metrouicss .nav-bar ul.menu li:hover ul.dropdown-menu 
    {
        position:absolute;
    }
    
    #retail-login-1 
    {
        float: right;
		margin:-85px -10px 0 0;
		width: 60%;
		font-size: 12px;
    }
    
    .login-page #dialogOverlay,
    #app-tray,
    /*#cloud-apps,*/
    #tile-cctv-access,
	#tile-callbox-log,
	#tile-outlook,
	#tile-as400,
	#tile-inquiry,
	#tile-cantire-u,
	#tile-myctportal,
	#tile-empathica,
	#tile-thetire-ca-outlook-web-app,
	#tile-outlook,
	#tile-as400,
	#tile-word,
	#tile-excel,
	#tile-easypay,
	.tux-app-8
    {
			display:none!important;
    }
}

@media only screen and (max-width: 1024px) 
{
    .master-body { margin-left: 45px !important; }    
}
@media only screen and (max-width: 768px) 
{
    .master-body {
        /*margin-left: 25px !important;*/
        margin: auto !important;
        width: 95% !important;
    }    
}
@media only screen and (max-width: 667px) 
{
    .master-header {       
        margin: 5px !important; 
        padding: 0 !important;        
    }  
    .master-header .myaccount #current-user {
        margin-top: -30px !important;
    }
    .master-body {
        margin-left: 5px !important;
        margin-right: 5px !important;    
        width: auto !important;
    }
}
/* mobile - portrait */
@media only screen and (max-width: 320px) 
{
    .master-header  
    {       
        margin: 5px !important; 
        padding: 0 !important;        
    }    
    #logo {
      width: 100%;
      font-size: 200%;      
    }
    #logo img 
    {
        width: 50px !important;
        float: left;
        margin-right: 10px;
    }
    .master-header .myaccount #current-user 
    {
        margin-top: -30px !important;
    }
    .master-body 
    {
        margin-left: 5px !important;
        margin-right: 5px !important;    
        width: auto !important;
    }
}





.autocomplete-suggestions { border: 1px solid #999; background: #fff; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }
	
.input-control .predictive-container {
	position: absolute;
	width: 100%;
	display: none;
	z-index: 1080;
	background: #fff;
	border: 1px solid #ddd;
	max-height: 300px;
		
	overflow: auto;
}
.input-control .predictive-container.open {
	display: block !important;
}
.predictive-container.open ul {
	list-style: none;
	margin: 0;
	padding: 0;
}.predictive-container.open ul li {
	padding: 5px 5px;
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}.predictive-container.open ul li:hover {
	background-color: #e1e1e1;
}
.predictive-container.open ul li.selected {
	background-color: #e1e1e1;
}


.mobile-menu-overlay 
{    
    width: 100%;
    position:fixed;
    height: 100%;
    display: none;
    z-index: 9999;
    top: 0;
    left: 0;
}
.mobile-menu 
{    
    /*display: none;*/
    position: fixed;
    top: 0;
    left: -380px;
    height: 100%;
    width: 100%;       
    background: #fff;
    z-index: 99999;
    overflow-y: auto;
    max-width: 380px !important;
}
.mobile-menu .current-user
{
    width: 100%;    
    /*margin: auto;*/
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
    z-index: 9999;
    display: block;
}
.mobile-menu #my-account-menu-close
{
    margin-right: 10px;    
    background-image: url(/assets/images/burger.png); background-repeat: no-repeat; background-position: 50% -44px;
}

.show-on-800,
.show-on-768, 
.show-on-414 { display: none !important; visibility: hidden!important; }