@charset "utf-8";
/* CSS Document */

/*  The styles in this sheet are mostly arranged in the order they occur on the pages.
    Structural tags (sitecontainer, bodybg, contentwrapper and maincontent) are defined near the top of this stylesheet.
    When it isn't practical to place the styles in order they are clustered by function. */
    
/*  FONTS
		Fonts are declared individually in each of the styles where they appear.
    They would otherwise have to be declared as classes in the markup which seems overly cluttered.
    Unfortunately there are a lot of font styles that appear in the CSS.
    The design specifies the Segoe typeface which is not well supported outside of Windows (not all that well supported in Windows either.)
    The Google Font "Noto Sans" is implemented as a fallback for the many browsers that do not support Segoe. */

/*  UTILITIES
		Various utility functions appear at the top of the styles 
    - box-sizing
    - clearfix
    - opacity filter (for IE8)*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
	}
/*	CLEARFIX: the following "clearfix" styles are to make containers of floated elements display properly.
		visit the links if you would like to understand this bit of code
    http://www.adamkaplan.me/grid/
    http://fuseinteractive.ca/blog/understanding-humble-clearfix*/
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
	}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1;}
.floatright { float:right; }
.floatleft { float:left; }
/*	Opacity - make opacity work in IE8 and other browsers.
		NOTE: these settings are applied to each individual style as needed.
    The following style (opaque50) is shown here only as a reference. */
.opaque50 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50);/* IE 5-7 */
  -moz-opacity: 0.5;/* Netscape */
  -khtml-opacity: 0.5;/* Safari 1.x */
  opacity: 0.5;/* Good browsers */
	}
/* The following IDs are placed on the page's HTML tag to isolate the page for special styling (in some cases) */
/* Almost every page in this project has elements that deviate from the other pages. */
/* This method was chosen to provide a way to alter styles to fit individual pages.*/

#create-action { }
#actuals-estimates { } 
#action-sheet-overview { }

html {
  font-family:"Segoe UI", "Noto Sans", sans-serif; /* Noto Sans is a Google font used here as a fallback if Segoe is not available*/
  font-size:62.5%; /* this allows type to be set in ems where 1.6em = 16px, 1.8em=18px etc. */
  line-height:1.2;
  background:#fff;
	}
body { }

/* ################################################### - STRUCTURAL STYLES - ###################################*/

.sitecontainer { /* .sitecontainer is a wrapper that contains everything in the site. */
  width:1024px;
  min-height:768px;
  margin:0 auto;/*border:1px blue dotted;*/
	}
.bodybg { /* this encloses all content below the subheader */
  background:rgb(232,232,232);
  min-height:604px;
  padding: 25px 0 0 0;/* this sets the space above the tabs 
  border:1px solid orange;*/
	}
.contentwrapper {
  float:none;
  min-height:500px;
  margin: 0px auto 0 auto;/*border:1px dotted aqua;*/
	}
.maincontent {
  position:relative;
  clear:both;
  float:none;
  margin: 5px auto 0 auto;
  width:880px;/*border:1px dotted red; */
	}
footer {
  width:924px;
  margin:25px auto;
  clear:both;
  }

.maincontent-dashboard {
  float:left;
  clear:none;
  height:300px;
  margin:10px 0 0 10px;
  width:855px;
  }
.maincontent-createaction {         
/* if the number of "tiles" changes this can change */
  position:relative;
  clear:both;
  float:none;
  margin: 5px auto 0 auto;
  width:770px;
  } 

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - HEADER - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.header {
  position:relative;
  background:rgb(147,155,161);
  background-image:url(../_images/Header_Background_1080X65.jpg);
  background-repeat:no-repeat;
  height:66px;
	}
.logo {
  position:absolute;
  top:15px;
  left:45px;
  width:162px;
  height:32px;
  background-image:url(../_images/Alcoa_logo.png);
  background-repeat:no-repeat;
	}
.headertitle { /* "DI Application" */
  position:absolute;
  top:15px;
  left:227px;
  font-family:"Segoe UI ", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.8em;
  font-weight:normal;
  color:rgb(224,224,224);
	}
.profile_bkgd {
  position:absolute;
  top:0px;
  right:0px;
  width:286px;
  height:42px;
  background-image:url(../_images/Profile_background_285X40.png);
  background-repeat:no-repeat;
	}
.profile-icon-wrapper {
  background:transparent;
  float:right;
  margin-top:6px;
  width:255px;
  height:26px;
	}
.profile-icon {
  padding:0 8px;
  float:left;
	}
.profile-icon-help {
  margin:0 6px 0 0;
  float:left;
  height:26px;
  width:26px;
  background-image:url(../_images/DI_Icon_Profile_help.png);
  background-repeat:no-repeat;
  background-position:center center;
	}
.profile-icon-help:hover {
  background-image:url(../_images/DI_Icon_Profile_help_hover.png);
	}
.profile-icon-options {
  margin:0 8px 0 0;
  float:left;
  height:26px;
  width:26px;
  background-image:url(../_images/DI_Icon_Profile_options.png);
  background-repeat:no-repeat;
  background-position:center center;
  }
.profile-icon-options:hover {
  background-image:url(../_images/DI_Icon_Profile_options_hover.png);
	}
.profile-icon-photo {
  margin:1px 6px 0 6px;
  float:left;
  height:26px;
  width:26px;
  background-image:url(../_images/DI_Icon_Profile_photo.png);
  background-repeat:no-repeat;
  background-position:center center;
	}
.profile-icon-photo:hover {
  background-image:url(../_images/DI_Icon_Profile_photo_hover.png);
  }
.profile-user {
  height:30px;
  width:138px;
  padding-left:5px;
  float:left;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:400;
  color:rgb(9,201,240);
	}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - HEADER - ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - SUBHEADER - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.subheader {
  position:relative;
  background:rgb(132,132,132);
  height:65px;
  margin:0 auto;
	}
/*The dashboard contains a lot of styles that don't appear on any other pages */
.dashboard-searchwrapper {
  background:rgb(112,113,113);
  border:1px solid rgb(147,155,161);
  float:right;
  margin-top:10px;
  text-align:center;
  width:100px;
  height:40px;
  }
.dashboard-search-box {
  float:left;
  background-color:transparent;
  background-image:url(../_images/search_box_sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -40px;
  width:220px;
  height:40px;
  text-align:center;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.8em;
  font-weight:normal;
  font-style:italic;
  color:rgb(223,223,223);
  border:none;
  padding-top:7px;
  margin:-1px 0 0 -190px;/* this positions the input box so that borders overlap the "searchwrapper" borders */
  }
.dashboard-search-box:hover {
  background-image:url(../_images/search_box_sprites.jpg);
  background-repeat:no-repeat;
  background-position:center 0px;
  color:rgb(223,223,223);
	}
.dashboard-search-button {
  background:url(../_images/search_sprite.jpg);
  background-repeat:no-repeat;
  background-position:center -35px;
  background-size:100%;
  width:35px;
  height:35px;
  float:right;
  margin:2px 20px 2px 5px;
  vertical-align:bottom;
  padding-top:35px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:normal;
  color:rgb(0,125,195);
  border:none;
	}
.dashboard-search-button:hover {
  background:url(../_images/search_sprite.jpg);
  background-repeat:no-repeat;
  background-position:center 0px;
  color:red;
	}
.dashboard-pagebuttonwrapper { /* The Dashboard uses buttons in the subheader  */
  position:absolute;
  left:146px;
  top:11px;
	}
.dashboard-pagebutton {
  float:left;
  margin-left:10px;
  background-image:url(../_images/button-3d_sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -40px;
  width:222px;
  height:40px;
  text-align:center;
  color:white;
  padding:8px 0 0 0;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.8em;
  font-weight:normal;
	}
.dashboard-pagebutton:hover {
  background:url(../_images/button-3d_sprites.jpg);
  background-repeat:no-repeat;
  background-position:center 0px;
  color:rgb(186,240,249);
	}
.pagetitlewrapper {
  position:absolute;
  left:100px;
  top:10px;
  width:600px;
	}
.pagetitle {
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:3.4em;
  font-weight:400;
  color:rgb(224,224,224);
	}
/* ~~~~~~~~~~~~~~~~~ - SUBHEADER END - ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* <<<<<<<<<<<<<<<<< - NAVIGATION (Dashboard page only) - <<<<<<<<<<<<<<<<<<< */

.navwrapper {
  float:left;
  width:150px;
  margin-top:0px;
	}
.navheading {
  background:url(../_images/Tab_Graphic_Nav.png);
  background-repeat:no-repeat;
  height:30px;
	}
.navheadingtext {/* "Controls" */
  padding-top:5px;
  text-align:center;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.8em;
  font-weight:normal;
  color:rgb(232,232,232);
	}
.navsections {
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.5em;
  font-weight:bold;
  color:rgb(147,155,161);
  margin:5px 0 5px 20px;
	}
.nav {
  height:400px;
  }
.nav ul {
  background:transparent;
  margin:5px 0 0 0px;
	}
.nav li {
  height:25px;
  background:white;
  margin:2px 0 0 0;
  padding:5px 0 5px 20px;
  list-style:none;
  text-decoration:none;
	}
.nav li:hover {
  background-color:rgb(242,242,242);
	}
.nav li a:link {
  text-decoration:none;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  color:rgb(130,130,131);
	}
.nav li a:hover {
  color:rgb(0,89,144);
	}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - END NAVIGATION (Dashboard page only) - <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

/* ****************************************** - TAB MENU (most pages) **************************************** */

/* The tabmenu wrapper can be altered to add or remove tabs.
In general, however, it should match .maincontent */
.tabmenuwrapper {
  width:880px;
  margin:0 auto;
  height:52px;
	}
.tabmenuwrapper-dashboard {
  width:856px;
  height:30px;
  float:left;
  margin-left:10px;
	}
.tabmenuwrapper-createaction {
  width:770px;
  margin:0 auto;
  height:30px;
	}
/* the tab wrapper contains the tab and the timeline markers. 
There could be between 1 and 5 tabs. 
The tabs will expand with longer text. */
.tabwrapper {
  float:left;
  max-width:32%;
  min-width:19%;
  height:50px;
	}
.tabwrapper-dashboard {
  float:left;
  max-width:32%;
  min-width:19%;
  height:30px;
  }
.tab {
  background-image:url(../_images/Tab-triangle.png);
  background-repeat:no-repeat;
  background-position:right;
  background-color:rgb(185,185,185);
  height:30px;
  padding:7px 30px 0 10px;
  color:rgb(255,255,255);
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.6em; 
  font-weight:normal;
	}
.tab:hover {
  background-image:url(../_images/Tab-triangle.png);
  background-repeat:no-repeat;
  background-position:right;
  background-color:rgb(0,125,195);
  color:rgb(186,240,249);
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.6em;
  font-weight:normal;
	}
/* NOTE the timeline markers will change in width with the addition of menu tabs */
.timelinewrapper {
  height:12px;
  margin-top:3px;
	}
.timeline {
  float:left;
  width:22%;
  height:10px;
  margin-right:3px;
  background-color:rgb(0,125,195);
	}
.timeline-gray {
  float:left;
  width:22%;
  height:10px;
  margin-right:3px;
  background-color:rgb(224,224,224);
	}
.timeline-light {
  float:left;
  width:22%;
  height:10px;
  margin-right:3px;
  background-color:rgb(191,222,240);
	}
/* *********************************** - TAB MENU (END) ******************************** */


.main-content-title {
  clear:both;
  padding:35px 0 30px 0;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:400;
  color:rgb(147,155,161);
	}
.main-content-title-alt { /* so far this only appears on action_sheet_idea_screen.asp */
  clear:both;
  padding:10px 0 5px 0;
  font-family:"Segoe UI light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:700;
  color:rgb(147,155,161);
	}

.main-content-title-action-sheet-overview {
  clear:both;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:400;
  color:rgb(147,155,161);
  padding:10px 0 20px 0;
  }

/*  ::::::::::::::::::::::::::::::::::: - ICONS - ::::::::::::::::::::::::::::::::::::: */

.iconwrapper-header {
  background:transparent;
  margin:2px 40px 0 0px;
  text-align:center;
  width:200px;
  min-height:45px;
	}
.icons-footer {
  background:url(../_images/icon-sprites-footer.jpg);
  background-repeat:no-repeat;
  text-align:center;
  width:65px;
  height:55px;
  margin:6px auto;
  border:none;
  padding-top:35px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em; /* MS design was 18px */
  font-weight:normal;
  color:rgb(132,132,132);
}
.icons-footer:hover { color:rgb(192,192,192);}

.icon-footer-edit { background-position:center -55px; }
.icon-footer-edit:hover { background-position:center 0px; }
.icon-footer-search { background-position:center -165px; }
.icon-footer-search:hover { background-position:center -110px; }
.icon-footer-submit { background-position:center -275px; }
.icon-footer-submit:hover { background-position:center -220px; }
.icon-footer-cancel { background-position:center -385px; }
.icon-footer-cancel:hover { background-position:center -330px; }
.icon-footer-copy { background-position:center -495px; }
.icon-footer-copy:hover { background-position:center -440px; }
.icon-footer-options { background-position:center -605px; }
.icon-footer-options:hover { background-position:center -550px; }
.icon-footer-next { background-position:center -715px; }
.icon-footer-next:hover { background-position:center -660px; }
.icon-footer-back { background-position:center -825px; }
.icon-footer-back:hover { background-position:center -770px; }
.icon-footer-help { background-position:center -935px; }
.icon-footer-help:hover { background-position:center -880px; }
.icon-footer-print { background-position:center -1045px; }
.icon-footer-print:hover { background-position:center -990px; }
.icon-footer-new { background-position:center -1155px; }
.icon-footer-new:hover { background-position:center -1100px; }

/* HEADER Icons */  
.icons-header {
  background:url(../_images/icon-sprites-header.jpg);
  background-repeat:no-repeat;
  text-align:center;
  width:65px;/* some icons have more text and have to be locally styled */
  height:55px;
  margin:6px auto;
  border:none;
  padding-top:35px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em; /* MS design was 18px */
  font-weight:normal;
  color:rgb(232,232,232);
}
.icons-header:hover {color:rgb(183,183,183);}

.icon-header-edit { background-position:center -55px; }
.icon-header-edit:hover { background-position:center 0px; }
.icon-header-search { background-position:center -165px; }
.icon-header-search:hover { background-position:center -110px; }
.icon-header-submit { background-position:center -275px; }
.icon-header-submit:hover { background-position:center -220px; }
.icon-header-cancel { background-position:center -385px; }
.icon-header-cancel:hover { background-position:center -330px; }
.icon-header-copy { background-position:center -495px; }
.icon-header-copy:hover { background-position:center -440px; }
.icon-header-options { background-position:center -605px; }
.icon-header-options:hover { background-position:center -550px; }
.icon-header-next { background-position:center -715px; }
.icon-header-next:hover { background-position:center -660px; }
.icon-header-back { background-position:center -825px; }
.icon-header-back:hover { background-position:center -770px; }
.icon-header-help { background-position:center -935px; }
.icon-header-help:hover { background-position:center -880px; }
.icon-header-print { background-position:center -1045px; }
.icon-header-print:hover { background-position:center -990px; }


/* icons on Modal pages have a white background but, otherwise operate as footer icons*/
.icons-modal {
  background:url(../_images/icon-sprites-modal.jpg);
  background-repeat:no-repeat;
  text-align:center;
  width:65px;
  width:75px; /* some label text needs a wider width*/
  height:55px;
  margin:6px auto;
  border:none;
  padding-top:35px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em; /* MS design was 18px */
  font-weight:normal;
  color:rgb(132,132,132);}
.icons-modal:hover {color:rgb(192,192,192);} 

.icon-modal-edit {background-position:center -55px;}
.icon-modal-edit:hover {background-position:center 0px;} 
.icon-modal-search {background-position:center -165px;}
.icon-modal-search:hover {background-position:center -110px;}
.icon-modal-submit {background-position:center -275px;}
.icon-modal-submit:hover {background-position:center -220px;}
.icon-modal-cancel {background-position:center -385px;}
.icon-modal-cancel:hover {background-position:center -330px;}
.icon-modal-copy {background-position:center -495px;}
.icon-modal-copy:hover {background-position:center -440px;}
.icon-modal-options {background-position:center -605px;}
.icon-modal-options:hover {background-position:center -550px;}
.icon-modal-next {background-position:center -715px;}
.icon-modal-next:hover {background-position:center -660px;}
.icon-modal-back {background-position:center -825px;}
.icon-modal-back:hover {background-position:center -770px;}
.icon-modal-help {background-position:center -935px;}
.icon-modal-help:hover {background-position:center -880px;}
.icon-modal-print {background-position:center -1045px;}
.icon-modal-print:hover {background-position:center -990px;}


h5 a:link, h5 a:visited, h5 a:active {
  padding: 0;
  text-decoration: none;
}
.action-link { /* style for the links beneath the tiles on "create action sheet" page */
  margin-top:10px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  text-decoration:underline;
  font-size:1.4em;
  color:rgb(0,89,144);
}
.action-link a:hover { color:rgb(0,160,175); }

/* Table setup */
table {
  table-layout:fixed;
  border-collapse:collapse;
  border-collapse:separate;
  width:100%;
}
td {
	padding:10px 0 10px 5px; 
	font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  /*font-size:1.2em;*/
  font-weight:700;
  color:rgb(0,125,195);}
th {
  background-color:rgb(0,125,195);
	color:rgb(186,240,249);
	padding:5px 0 8px 5px;
  text-align:left;
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  /*font-size:1.4em;*/
  font-weight:700;}
   
table input[type=text] { /* this affects the <input type="text" > tag. it can be different on almost every page. */
  background-color:#f9f9f9;
  width:100%;
  padding:3px 5px;
  /*height:95px;*/
  text-align:left;
  font-family:"Segoe UI";
  /*font-size:1.2em;*/
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
  border:1px solid rgb(224,224,224);/**/
  border-radius:3px; /* works in Chrome, Not IE */
 }
/* note: the nth-of-type selectors do not work in IE 
therefore these styles are commented-out here in favor
of hard-coding styles directly on the Dashboard  page*/
/*
#dashboard tr:nth-of-type(odd) {
background-color:rgb(255,255,255);
border:1px solid rgb(255,255,255);
}
#dashboard tr:nth-of-type(even) {
background-color:rgb(233,239,246);
border:1px solid rgb(233,239,246);
}
#dashboard tr.active-row {
  background-color:rgb(208,228,233);
  border:1px solid rgb(166,201,204);
}
#dashboard tr:hover {
  background-color:rgb(208,228,233);
  border:1px solid rgb(166,201,204);
} */


.label { /* this was added especially for the action sheet idea screen page */
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.8em;
  font-weight:700;
  color:rgb(0,125,195);
  padding:15px 0 3px 0;
}
.action-sheet-overview td { /* special case for the table on this page */
	padding:8px 0 8px 5px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1em; /* this size gets modified by input style below*/
  font-weight:normal;
  color:rgb(0,125,195);
  vertical-align:middle;
}
.action-sheet-overview td.label { /* special case for the action_sheet-overview page.asp */
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  font-weight:700;
  color:rgb(0,125,195);
  padding-right:25px;
}

.sort-symbol-ascending {
  background-image:url(../_images/sort-sprites.jpg);
  background-repeat:no-repeat;
  background-position:center 0px;
  width:14px;
  height:10px;
  display:inline-block;
}
.sort-symbol-ascending:hover {
  background-image:url(../_images/sort-sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -16px;
}
.sort-symbol-descending {
  background-image:url(../_images/sort-sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -32px;
  width:14px;
  height:8px;
  display:inline-block;
}
.sort-symbol-descending:hover {
  background-image:url(../_images/sort-sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -47px;
}
/* ))))))))))))))))))))))))))))))   Formatting for FORM elements ((((((((((((((((((((((((((( */  
.radio {
  background-color:transparent;
  width:25px;
  height:25px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.4em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
 }
.checkbox {
  background-color:transparent;
  width:30px;
  height:30px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.4em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  border:none;
}
.select {
  background-color:#f9f9f9;
  width:100%;
  padding:3px 5px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.6em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
  border:1px solid rgb(224,224,224);
  border-radius:3px;
}
.search {
  background-color:transparent;
  width:400px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.8em;
  font-weight:normal;
  color:rgb(0,125,195);
  border:none;
  border:1px solid aqua;
}
 /*.text {
  note this is identical to textinput - need to choose which to keep
  background-color:#f9f9f9;
  width:100%;
  padding:3px 5px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.6em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
  border:1px solid rgb(224,224,224);
  border-radius:3px;
}*/
.textarea {
  background-color:white;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.4em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  border:none;
}
.button {
  background-color:transparent;
  text-align:left;
  font-family:"Segoe UI";
  font-size:3.2em;
  font-weight:normal;
  color:rgb(0,125,195);
  border:none;
  border:1px solid red;
}

/* the folowing styles (.textareainput .textinput and table input[type=text]) were copied here from modal.css*/
.textareainput {
  background-color:#f9f9f9;
  width:100%;
  padding:3px 5px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.6em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
  border:1px solid rgb(224,224,224);
  border-radius:3px;
 }
.textinput {
  background-color:#f9f9f9;
  width:100%;
  padding:3px 5px;
  text-align:left;
  font-family:"Segoe UI";
  font-size:1.6em;
  font-weight:normal;
  font-style:italic;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
  border:1px solid rgb(224,224,224);
  border-radius:3px; 
  }
 
/* styles applicable to MODAL SCREENS */  
.modal-sitecontainer {
  width:880px; /* arbitrary */
  min-height:400px; /* arbitrary */
  margin:0 auto;
  background:white;
  border:2px solid rgb(191,213,227);/**/
  position:relative;
	}
.modal-header {
  background:#fdfdfd;
  height:16px;
  color:rgb(232,232,232);
  }
.modal-cancel {
  float:right;
  height:16px;width:16px;
  background:url(../_images/modal-cancel-sprites.jpg);
  background-repeat:no-repeat;
  background-position:center -16px;}
.modal-cancel:hover {
  background:url(../_images/modal-cancel-sprites.jpg);
    background-repeat:no-repeat;/**/
    background-position:center 0px;}
.modal-body {
  background:white;
  color:rgb(232,232,232);
  clear:both;
  /*border:1px solid orange;*/
  }
.modal-pagetitle {
  text-align:center;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.4em; /* Microsoft specified 36 px but it looked too large */
  font-weight:400;
  color:rgb(224,224,224);/* color 5 tint */
  color:rgb(0,89,144);/* ALCOA 1 */
}
.modal-content-title {
  clear:both;
  padding:30px 0 20px 25px;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:400;
  color:rgb(147,155,161);
  /*border:1px dotted green;*/
}
.modalfooter {
  width:840px;
  margin:25px auto;
  clear:both;
  }


/* from modalcss.*/

 .dashboard-table { /* this is the table that appears on the "Dashboard" page */
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
}

.dashboard-td {
  /*border: 1px solid aqua;*/
	padding:10px 0 10px 5px;
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:700;
  color:rgb(0,125,195);
}

.dashboard-th {
  background-color:rgb(0,125,195);
  color:rgb(186,240,249);
  padding:5px 0 8px 5px;
  text-align:left;
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em; 
  font-weight:700;
}

 /*tr {background-color:rgb(245,245,245);border:1px solid white;}
 tr:hover {background-color:rgb(208,228,233);border:1px solid rgb(166,201,204);}*/
 
p {
  font-family:"Segoe UI";
  font-size:1.6em;
  font-weight:normal;
  color:rgb(224,224,224);
  color:rgb(0,125,195);
 } 

/*  ||||  ACTUALS  |||*/
/*  ||||    and    |||*/
/*  |||| ESTIMATES |||*/

/* styles specific to actuals and estimates page */

.reportwrapper {
  position:relative;
  width:880px;
  width:830px; /* modified to fit in modal windows */
  padding:20px 10px 10px 20px; /* modified to fit in modal windows */
  margin:0 auto;
  background:white;
  /*border:1px dotted green;*/
 
}
.cellwrapper {
  float:left;
  width:59px;
  height:78px;
  margin:0;
  background:white;
  /*border:1px solid red;*/
}
.cellwrapper-active {
  float:left;
  width:59px;
  height:78px;
  /*padding-left:2px;*/
  background:rgb(0,125,195);
}
.celltotalwrapper {
  float:left;
  width:110px;
  height:78px;
  margin:0 0px 0 10px;
  background:white;
}
.celltotaltitle {
  width:105px;
  height:21px;
  background:transparent;
  vertical-align:bottom;
  padding:5px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:normal;
  color:rgb(147,155,161);
}
.celltotal {
  width:105px;
  height:21px;
  background:#fff;
  border: 1px solid rgb(232,232,232);
  margin:0 auto;
  vertical-align:bottom;
  padding:5px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.1em;
  font-weight:bold;
  font-style:italic;
  color:rgb(0,125,195);
  }
.cell {
  width:55px;
  height:21px;
  background:#fff;
  border: 1px solid rgb(232,232,232);
  margin:0 auto; /* this  should center the cell inside the cellwrapper but doesn't since switching to form fields */
  margin-left:2px; /* this makes the input fields appear to center-align*/
  vertical-align:bottom;
  padding:5px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.1em;
  font-weight:bold;
  font-style:italic;
  color:rgb(0,125,195);
   /*border:1px dashed red; */
}
.celltitle {
  width:55px;
  height:21px;
  background:transparent;
  vertical-align:bottom;
  padding:5px;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:normal;
  color:rgb(147,155,161);
}
.celltitle-active {
  width:55px;
  height:21px;
  background:transparent;
	margin:0 auto;
  vertical-align:bottom;
  padding:5px;/**/
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.2em;
  font-weight:normal;
  color:white;
}
.cellspacer {
  width:55px;
  height:11px;
  background:#fff;
  margin:0 auto;
}
.rowwrapper {
  background:white;
  padding:20px 0 30px 0;
  /*border:1px solid blue;*/
}
.rowtitlewrapper {
  float:left;
  width:100px;
  width:85px;/* modified to try to fit to modal window*/
  height:78px;
  margin:0 2px 0 2px;
  background:white;
  vertical-align:bottom;
  /*border:1px solid red;*/
}  
.rowtitle {
  width:100%;
  height:21px;
  background:transparent;
  color:rgb(147,155,161);
  padding:5px;
  clear:both;
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  color:rgb(0,125,195);
} 
.sheetlabel {
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  color:rgb(147,155,161);
  margin: 0 0 25px 0;/**/
}
.categorylabel {
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.8em;
  font-weight:normal;
  color:rgb(0,125,195);
}				
.categorysublabel {
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  font-weight:normal;
  color:rgb(0,125,195);
  margin-top:5px;
}
.estimates-title {
  position:absolute;
  top:55px;
  left:40%;
  font-family:"Segoe UI Light", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:400;
  color:rgb(147,155,161);
}

/* Create action styles */
.action-tile {
  margin:0 8px;
  float:left;
  text-align:center;
  position:relative; /*positioning context*/
  }
.action-label {
  position:absolute;
  width:100%;
  top:173px;
  text-align:center;
  font-family:"Segoe UI Semibold", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:2.2em;
  font-weight:700;
  color:orange;
  color:rgb(191,222,240);
  }
.action-label:hover {
  color:rgb(224,224,224);
  }
.action-text {
  position:absolute;
  width:100%;
  padding-left:15px;
  top:220px;
  text-align:left;
  font-family:"Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size:1.4em;
  line-height:1.4;
  color:rgb(191,222,240);
  }