/*
General styling for Evoco Webtop and getting elements inside of EXT JS controls to look right.
Any graphical styling overrrides for EXT JS skins and such can be found in "ext-evoco.css."


TABLE OF CONTENTS 
Do a search for the section number to jump around the file,
jump between sub-sections by doing a search for "//"
----------------------------------------------------------
1. Webtop Layout
2. Shared Styles
3. TargetedApp Information Bar(.panelNorthInfobBar) and internals
4. View Navigation Bar(.viewNavigationBar) and internals 
5. Space Navigation Bar(.spaceNavigationBar) and internals 
6. Login box
7. Drawer Navigation

??. Deprecated styles

*/

/*-------------------------------------------------------- 
----------- 1. Webtop layout of major containers

After EXT JS loads it pointerles all placement and z-indexing of the major containers 
programmatically so don't bother trying to mess with it here, the only thing we
do in this section is to first have the containers hidden and then after EXT JS
wraps itself around the page content it shows it, this avoids the user seeing the
initial placement of elements before they get moved around. */ 


/* Alert bubble styling */

.active 
{
    background-color: Red;
}

.alertContainer 
{
    width:300px;
    height:200px;
    position:absolute;
    bottom:10px;
    right:10px;
    z-index:1;
}

/* // Initial display and visibility to hide the contents of the layout until EXT JS does its magic*/

.panelNorthInfobar, 
.viewNavigationBar, 
.spaceNavigationBar {}

  
/* // Once EXT JS creates the wrapper around the content these styles can take effect */

.x-panel .panelNorthInfobar,
.x-panel .viewNavigationBar,
.x-panel .spaceNavigationBar {}
    
/*-------------------------------------------------------- 
----------- 2. Shared Styles
*/

/* // Setting default font family and size base */

body {
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 62.5%; /* Set 1em to equal 10px huzzah! */
    line-height: 1.8em;
    color: #333333;
    /* background: #fff url('../Images/bg-body.gif') repeat-x !important; */
    }
    
h1 {font-size: 26px;}
h2 {font-size: 18px;}
h3 {font-size: 13px;}
h4 {font-size: 10px;}

p {font-size: 10px}

ul {}

l1 {}


.panelBase {
    font-size: 10px;
    padding: 18px 15px 16px 15px;
    line-height: 2.3em;
    }
     
.btnBase {
    font-size: 10px;
    padding: 1px 5px 2px 4px;
    margin: .5em 0 .5em 4px;
    width: auto !important;
    display: block;
    float: right;
    position: relative;
    }

.x-window-header-text   
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 16px;
    font-variant: normal;
    color: #666666;
}

.x-window-header-text2   
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 16px;
    font-variant: normal;
    color: #666666;
    border-bottom: solid 1px green;   
}

.header-warning .x-window-header-text {   
 
}
.window-title 
{
    float: left;
    padding-right: 10px;
}
.mobile-warning 
{
    border: solid 1px #00738e;
    padding: 0px 0px;
    height: 26px;
    background: #00b9e4; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00738e', endColorstr='#00b9e4'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#00738e), to(#00b9e4)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #00738e,  #00b9e4); /* for firefox 3.6+ */
    position: absolute;
    right: 80px;
    top: 3px; 
}
.mobile-warning-text    
{
    background: transparent url('../Images/noMobile.png') no-repeat 5px;
    height: 24px;
    position: relative;
    color: #fff;
    text-transform: none; 
    line-height: 25px;
    font-size: 14px;
    padding: 0 15px 0px 38px;
    border-bottom: solid 1px #8be1f5;
    border-top: solid 1px #00b9e4;
    border-right: solid 1px #00b9e4;
    border-left: solid 1px #00b9e4;
}


/*----------------Base Form input formatting--------------------------*/
textarea,
input[type='text'],
select {border:1px solid #a9aba0; color:#454442; font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size:11px;}


/*----------------Base Button Formatting--------------------------*/
.button,
button, 
input[type='button'] {background:#fdfdfb url('../Images/button_BG.png') 0 bottom repeat-x; border:1px solid #bebab3; cursor:pointer; display:inline-block; font-size:11px; font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-weight: normal; padding:2px 14px; height: 24px;}
input[type='submit'] {background:#fdfdfb url('../Images/button_BG.png') 0 bottom repeat-x; border:1px solid #bebab3; cursor:pointer; display:inline-block; font-size:11px; font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-weight: normal; padding:2px 14px; height: 24px;}


/*
----------- 3. TargetedApp Information Bar(.panelNorthInfoBar) and internals 
*/

.panelNorthInfobar {
    width: 100%;
    overflow: visible;
    height:110px;
	height:36px;
    background:#ccc;
    background-image:url('../Images/topNavBar.png');
    background-repeat:repeat-x; 
    }    
    
/* // Client logo container */   

/*
div.clientLogo {
    /*text-align:center;
    width: 128px;
    height: 105px;
    float: left;
    position:fixed;
    z-index: 1;
    background-image: url('../Images/ClientLogoSpace-white.png');
    top: 200px;
    left: 0px;
   
}
*/
#logoBar    {
    
}
div.altClientLogo 
{
    bottom: 20px;
    width: 80%; 
    position: absolute;   
    vertical-align: bottom;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
     
}
.altClientLogoImage {
    
}
#clientLogoContainer{ /*table containing the logo div.clientLogo*/
    width: 80%;
    position:fixed;    
    bottom: 20px;
    vertical-align: bottom;
    top:0;
    left:0;
    text-align:left;
    background-image: url('../Images/ClientLogoSpace-white.png');
    background-repeat:no-repeat;
}
div#clientLogo  
{
    margin-bottom: 10px;
}
div#clientLogo img.clientLogoImage 
{
    margin-left:auto;
    margin-right:auto;
}
    
/* // contextual info container */     
.contextContainer {
    /*position: absolute;*/
    position: fixed;
    right: 38px; 
    right:15px; 
    left: 145px;
    left:15px;
    top: 45px; 
    z-index: 2;
    background:transparent;
    height: 40px;
    }   
    
.contextContainer iframe {
    height: 80px;
    width: 100%;
    overflow: hidden;
    background:transparent;
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    }
 
/* div#panelWest 
{
    background-image: url('../Images/left-gradient16x32.png');
    background-repeat: repeat-y;  
}

div#panelCenter
{
    background-color: White;
} */

/* Styling for elements inside the iframe are found in targetedAppBase.css */
 
/* // Logout container */ 
/*.logoutContainer    
{
    position: relative;
    float: right;
    padding: 0px 14px 0px 3px;
    z-index: 5;
    height: 27px;
    width: 78px;
}
.logoutImg  
{
    width: 16px;
    position: fixed;
    padding: 4px 0px 0 0px;
    text-align: right;
}*/

/*
.logout {
    font-size: 10px; 
    width: 52px;
    position: relative;
    float: right;
    padding: 7px 0px 0 0;
}
.logout .link {
    text-decoration:none;
    color:#ffffff;
    font-size: 8px;
    padding-bottom: 5px;
    }   
    
.logout .link:hover {
    text-decoration: none;
    }
    
.logout .link:visited {
    color: #ffffff;
    }
*/

div#panelWest 
{
    background-image: url('../Images/left-grad10x1.png');
    background-repeat: repeat-y; 
    background-color: White;
}

div#panelCenter 
{
    background-color: White;
}

div#panelNorth
{
    background-image: url('../Images/left-grad10x1.png');
    background-repeat: repeat-y;
    background-color: White;
    overflow: visible;
}


.toolbar {background:transparent; display:block; float:right; font-size:12px; height:21px;padding:0px 9px 6px 9px; position:fixed; right:10px; top:8px; z-index:50;}
	.toolbar li {display:inline; border-left:1px dotted #999; padding:2px 13px;}
	.toolbar li:first-child {border-left:0;}
		.toolbar a {color:#7a7168; color:#ffffff; padding-left:22px; text-decoration:none;}
		.toolbar a:hover {color:#d6d6d6;}
		.toolbar li:first-child a {padding-left:0;}
	.alwaysMaximizeWindow-on { top: -5px;}
	    .alwaysMaximizeWindow-on a {background:transparent url('../Images/maximize-all-on.png') no-repeat;}
	.alwaysMaximizeWindow-off { top: -5px;}
	    .alwaysMaximizeWindow-off a {background:transparent url('../Images/maximize-all-off.png') no-repeat;}    
	.help { top:-5px;}
		.help a {background:transparent url('../Images/help2-16x17.png') no-repeat;}
	.logout { top:-5px;}
		.logout a {background:transparent url('../Images/login2.png') 1px 0 no-repeat;}
	.downloadsBtn { top: -5px;}
	    .notProcessing a{ background: transparent url('../Images/DownloadComplete.png') left no-repeat;}
	    .processing a{ background: transparent url('../Images/Download.png') left no-repeat;}

		

/* // User information container */ 
.userInfo {
    color:#edeae4;
    position:fixed;
    font-size: 13px;
    line-height: 1.2em;
    padding: 21px 23px 3px 3px;
    top: 25px;
    right: 19px;
    z-index: 10;
    height:30px;
    background: transparent url(../Images/bg-mainNavEnd.png) right 0 no-repeat;
    text-align:right;
    }
    
.userInfo br {line-height:0px; display:none;}
    

    
.userNameLabel  
{
    font-size: 13px;
    line-height: 20px;
    color: #c6bfb1;
    padding-right:6px;
}

/* // Alert banner container */
#alertBanner {
    position: fixed;
    font-size: 13px;
    top: 45px;
    z-index: 10;
    text-align: left;
    left: 20%;
    right: 300px;
    border: 1px solid red;
    background-color: #fff;
    padding: 10px 10px 10px 55px;
}

#alertTitle {
    font-size: 16px;
    font-weight: bold;
}

.alertBanner img {
    position: absolute;
    left: 15px;
    top: 48%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}   
   
/*-------------------------------------------------------- 
----------- 4. View Navigation Bar(.viewNavigationBar) and internals
*/   
.x-panel-body x-panel-body-noheader x-panel-body-noborder 
{
    /*border: solid 1px red;*/
    width: 100%;
    overflow: visible;
}
.x-panel viewNavigatorBarZorder x-border-panel x-panel-noborder     
{
    width: 100%;
    overflow: visible;
}

/* firefox needs some help to NOT display scoll bars on this generated panel surrounding panelWest, panelCenter, etc */
.x-panel-body x-panel-body-noheader x-border-layout-ct 
{
    overflow: hidden;
}

#viewNavigationBar 
{
    text-align: center;
    background:transparent;
    width: 88px;
    color: #333333;
    position: fixed;
    top:120px;
    bottom:80px;
    left: 0px;
    text-align:left;
    display:block;
}



 

.topCap {background:transparent url('../Images/bg-viewNav-top.png') -67px 0 no-repeat; cursor:pointer; width:67px; height:50px; position:absolute; top:0;}
.btmCap {background:transparent url('../Images/bg-viewNav-btm.png') -67px 0 no-repeat; cursor:pointer; width:67px; height:57px; position:absolute; bottom:0;}
.btmCap:hover, 
.topCap:hover {background-position: -134px 0;}
.btmCap.disabled, 
.btmCap.disabled:hover, 
.topCap.disabled, 
.topCap.disabled:hover {background-position: 0 0; cursor:default;}


#viewNavigationBar .iconContainer
{
    background:transparent url('../Images/bg-viewNav-mid.png') repeat-y;
    font-family: Century Gothic, Verdana, sans-serif;
	font-size: 10px;
	margin: 0; 
	width: 88px; 
	padding:3px 0;
	margin:0;
	text-align:left;
	position:absolute;
	top:50px;
	bottom:57px;
	/*overflow:auto;*/
	overflow:hidden;
	text-transform:capitalize;
	white-space: normal;
}



#viewNavigationBar .iconContainer ul    
{
    list-style-type: none;
    width:67px;    
    margin:0;
    padding:0;
}
#viewNavigationBar .iconContainer li 
{
    display:block;
    
}
#viewNavIcons   
{
   /*border: solid 1px red;*/
   /*padding-top: 40px;*/
   /*position:absolute;*/
}
#viewNavIcons .navItem   
{
    background:transparent url('../Images/bg-viewNav-itm.png') no-repeat;
    color:#3c3c30;
    font-family: Arial, Verdana, sans-serif;
    padding: 0;
    width: 56px;
    margin:12px 0 3px 4px;
    cursor:pointer;
    text-align:center;
    line-height:1.1em;
    height:auto;
    overflow:hidden;
    font-size: 9px;
}

#viewNavIcons .navItem span {background-position: center 12px; background-color:transparent; background-repeat:no-repeat; display:block; padding: 56px 0px 11px 0px; width: 56px;}


a.navText:link { 
    color: #333333;
    text-decoration: none;
}
a.navText:visited { 
    color: #333333;
    text-decoration: none;
}
a.navText:hover { 
    color: #ca7e27;
    text-decoration: none;
}
a.navText:active { 
    color: #333333;
    text-decoration: none;
}
   

/*-------------------------------------------------------- 
----------- 5. Space Navigation Bar(.spaceNavigationBar) and internals 


*/


#spaceNavigationBarContainer{
    position: fixed;
    background:transparent url('../Images/bg-mainNav.png') repeat-x;
    left: 0px;
    right:100px;
    height: 73px;
    color: #FFFFFF;
    height: 36px;
    top: 0px;
    white-space: nowrap;
    } 
    


#spaceNavigationBar 
{
   /* 
    text-align: center;
    margin: 0 auto;*/
    white-space: nowrap;
} 

.iconContainer
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 10px;
    padding: 1px 0 0 10px;
    float: left;
    white-space: nowrap;
}

.iconContainer ul    
{
    list-style-type: none;
}
.iconContainer li 
{
    height:45px;
    display: inline;
}


#spaceNavIcons .navItem   
{
    color:#fff;
    cursor: pointer;
    display:inline-block;
    font-size:12px;
    float:left;
    height:auto;
    padding:3px 8px;
    padding-top:5px;
    text-transform:uppercase;
    white-space:nowrap;
}


   
    #spaceNavIcons .navItem:hover {color:#d6d6d6;} /*=updating*/
    #spaceNavIcons .navItem.active:hover {color:#fff; cursor:default;}
    
	#spaceNavIcons .navItem span {background-position:left -300px; background-repeat:no-repeat; display:inline-block; padding:6px 10px;}
   
    #spaceNavIcons .navItem {background-color:transparent;}

        #spaceNavIcons .navItem.active span {background-color:#C3651D; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c66721', endColorstr='#9f5319'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#c66721), to(#9f5319)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #c66721,  #9f5319); /* for firefox 3.6+ */ 
padding:6px 15px 6px; border: solid 1px #E8A978; border-bottom: none; border-right: double 1px #87400a;}

#spaceLogo
{
    height: 42px;
    right:0;
    float: right;
    width: 180px;
    bottom: 10px;
    position: absolute;
}

/* Space status bar is disabled at startup. Will be enabled by default.aspx */
#spaceNavigationBar .statusBar
{
    width: 48%;
    bottom: 13px;
    padding: 0px 3px 0px 3px;
    float: right;
    height: 47px;
    vertical-align: bottom;
}

#spaceNavigationBar .statusBar img
{
    float:right;
    width:16px;
    padding: 17px 20px 0px 0px;
}

/*-------------------------------------------------------- 
----------- 6. Login Box
*/

/* Hide ExtJS window header on login screen, since the ExtJS API function does not work to do this */
#loginWindow .x-window-header {display: none}

.loginHeader    
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 20px;
    color: #cc6600;
    padding: 0px 0px 5px 10px; 
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.loginErrorMessage
{
    color:Red;
    font-weight:bolder;
}
.loginMessage   
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #333333; 
    padding-left: 10px; 
    text-align: left; 
}
#loginForm  
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #333333; 
    margin: 8px;
    white-space: nowrap;
    overflow: hidden;
    background-color: #ffffff;
    vertical-align: middle;
}
#loginUser  
{
    margin-top: 5px;
}
#loginPassword  
{
    margin-top: 5px;
}
.loginActions
{
   width: 300px;
}

.loginLinks 
{
   margin: 0px 0px 0px 10px;
   color: #cc6600;
   line-height: 25px;
   width: 150px;
   float: left;
}
a.loginLinks:link   
{
    color: #cc6600;
    text-decoration: none;
}
a.loginLinks:visited   
{
    color: #cc6600;
    text-decoration: none;
}
a.loginLinks:hover   
{
    color: #cc6600;
    text-decoration: none;
    cursor: pointer;
}
a.loginLinks:active   
{
    color: #cc6600;
    text-decoration: none;
}
.loginButton    
{
   
   width:80px;
   float:right;
   margin: 3px 20px 0px 0px;
}
.panelLogin {
    text-align: left;   
    }
    
.panelLogin input 
{
    width: 150px; 
    height: inherit;
}

.formLabel {
    display: block;
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    color: #333333; 
    }
    
.formLabel input
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;
    border: #cccccc 1px solid;   
    padding: 1px 3px 1px 3px;
    }

.LabelInvalidCreds {
    color:Red;
    font-weight:bold;
    font-style: italic;
    line-height: 1em;
    display:block;
    visibility:hidden;
    text-align: left;
    padding-top: 6px;   
    }
.x-form-item-label  
{
    font-family: "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    font-size: 11px;  
    text-align: right;
    margin-top: 5px;
}

.spaceHeaderIFrame  
{
    background: transparent;
    top: 0px;
    left: 0px;
}

/*-------------------------------------------------------- 
----------- 7. Drawer Navigation
*/
#navMenu {
	position: absolute;
	left: 3px;
	top: 100px;
    display: block;
    height: 49px;
    width: 0;
    overflow: visible;
    z-index: 10;
}

#navMenuWrapper {
	float: left;
	margin-right: 0px;
	overflow: hidden;
	width: 0px;
    position: relative;
    z-index: 10;
}

#navMenuBody {
	width: 330px;
	border: 1px solid #f5dac3;
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
    z-index: 10;
}
#navMenuBody li 
{
    display: inline-block;
    border-right: 1px solid #f5dac3;
    cursor: pointer;
    margin: 0;
	padding: 0;
	list-style: none;
	background: #FBF1E8;
	width: 100%;
	height: 49px;
	position: relative;
}

#navMenuBody li.active
{
	background-color: #f5dac3;
}

#navMenuBody li img
{
    float: left;
    display: block;
    margin-left: 10px;
    margin-top: 8px;
    margin-right: 10px;
    height: 32px;
    width: 32px;
}

#navMenuBody li span
{
    float: left;
    display: block;
    position: absolute;
    top: 50%;
    left: 50px;    
    height: 32px;
	background-repeat: no-repeat;
	font-size: 11px;
	text-transform: uppercase;
    text-align: left;
    margin-top: -10px;
}

#navMenuBody li hr
{
    /* position: absolute; */
    bottom: 0px;
    margin-right: 16px;   
    /* left: 50px; */
    /* right: 5px; */
    border-bottom: 0.5px inset #f5dac2;
    position: relative;
    top: 47px;
}

.navMenuTriangleUp 
{
    position: absolute;
    left: 0px;
    top: 49px;
}

.navMenuTriangleDown
{
    position: absolute;
    left: 0px;
    bottom: -8px;   
}

#navMenuBody li.navItemFiller
{
    height: 49px;   
    margin-bottom: 0px;
}
.x-managed-iframe-mask
{
	border-top:solid 1px #bab6ae;	
	padding-top:2px;
	height: 98%;
    overflow: auto;
}

/*-------------------------------------------------------- 
----------- 8. Downloads Menu 
*/

.downloadMenu_wrapper 
{
    position: relative;
    float: right;
    display: none;
    z-index: 20000;
}

.downloadMenu 
{
    position: absolute;
    display: none;
    background-color: #edebe5;
    text-decoration: none;
    border: solid 1px #d7d4ca;
    color: #000000;
    z-index: 10000;
    height: 150px;
    overflow: hidden;
}

#downloadMenu iframe 
{
    border: none;
    width: 100%;
    height: 100%;
    float: left;
    background: transparent none;   
}