/* Purpose:  these CSS definitions support Content Block #6240, which is the new version of the
   Online Service Center main menu page that went live on 10/30/09.  Previous attempts at using 
   Ektron to lay out the page with tables proved unsatisfactory, so we use a more standardized 
   HTML-CSS infrastructure to achieve the precise design effects we want.  Tests show that
   Ektron does not corrupt the <div>-based version of the layouts when you insert directly
   into the HTML source.

   TIP:  Stage whatever text and graphics you want in OnlineServiceCenterT1.aspx, then debug
   the HTML and CSS using only the .aspx.  When you are satisfied with it, then carefully
   refresh the HTML in Ektron and re-publish along with a refreshed copy of this .css module.

   Revision History
   ----------------
   2011-Aug - Increases vertical spacing between menu items, possibly prevents
   misfiling CRM Internet Requests.  (EYang)
   2009-Dec - Holiday messaging added.  These definitions could be shared 
   with CrmRequestIntake.aspx.  (EYang)
   2009-Oct - Initial Release (EYang, NMehta)
   
*/
#OscMenuOuterContainer
{
  margin-top: 30px; /* extra clearance below <h1> requested by SSabatino, 10-30-09 */
  position: relative; /* sets anchor for positioning of child containers */
}

#OscMenuContainer1
{
  position: relative; /* LHS positioning, preserves document flow */
  left: 90px;
  top: 0px;
  width: 350px;
}

#OscMenuContainer2
{
  position: absolute; /* takes out of document flow for RHS positioning */
  left: 400px;
  top: 0px;
  width: 340px;
}

/* BEGIN - extends base definitions in SiteMasterLayout.css for CSS-style simulated tables */

.oscMenuContainer .dataTable .dataRow /* overrides base .dataRow definition in SiteMasterLayout.css */
{
  xxxpadding: 5px; /* in IE, padding = 5px creates good results */
  height: 90px; /* in Firefox, padding = 5px is not enough, but adding 
                   height = 90px gives enough clearance for images and text to display
                   properly in Content Block #6240; this value is increased from 70px 
                   to accommodate expansion to 3 links per header (EYang, Aug 2011) */
  padding-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
  margin-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
  margin-bottom: 40px; /* this value is increased from 30px to accommodate expansion 
                          to 3 links per header (EYang, Aug 2011) */
}

.oscMenuContainer .dataTable .dataRow .dataLabel /* overrides base .dataLabel definition in SiteMasterLayout.css */
{
  width: 55px; /* control width of data LABEL area for this specific table */
  padding-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
  margin-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
}

.oscMenuContainer .dataTable .dataRow .dataValue /* overrides base .dataValue definition in SiteMasterLayout.css */
{
  width: 190px; /* control width of data VALUE area for this specific table, this value should be
                   at or near the widest control in the table */
  padding-left: 10px; /* because LABEL area right-justified, some additional spacing
                         to left of UI controls is necessary */
  padding-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
  margin-top: 0px; /* trying to fix vertical alignment between containers 1 and 2 */
}
/* END - extends base definitions in SiteMasterLayout.css */

/* more specific definitions */
h2.oscMenuHeader
{
  margin-bottom: 0px;
  xxxpadding-bottom: 0px;
  padding-bottom: 6px; /* increased vertical spacing to discourage clicking on wrong item
                          and misfiling CRM Internet Requests (EYang, Aug 2011) */
  font-size: 1.2em;
}

/* NOTE - oscAnchor defintion was created all too quickly for <div> containers around <a> tags;
   better to use a more standardized <ul>/<li> type of structure */
.oscAnchor
{
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 3px;
}

ul.oscMenuList
{
  /* list-style / margin / padding settings get rid of default bullet points */
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul.oscMenuList li
{
  padding-left: 0px; /* variations on indentation below header are possible */
  padding-bottom: 12px; /* increased vertical spacing to discourage clicking on wrong item
                           and misfiling CRM Internet Requests (EYang, Aug 2011) */
  font-size: 10pt;
  xxxbackground: transparent url(images/redarrow10x4.GIF) 1px 3px no-repeat;
}


/* nested ul-li-a requires that we separate out a:link, a:active, a:visited
   and a:hover to achieve desired styling AND make sure we don't interfere with
   other styles (EYang, Dec 2007) */
ul.oscMenuList li a:link
{
  text-decoration: none; 
  color: #000099; /* #000099 = navy */ 
  font-weight: normal;
}

ul.oscMenuList li a:visited 
{
  text-decoration: none; 
  color: #000099; /* #000099 = navy */ 
  font-weight: normal;
}

ul.oscMenuList li a:hover 
{
  text-decoration: underline; 
  color: #000099; /* #000099 = navy */ 
  font-weight: normal;
}

/* BEGIN - holiday messaging */

/* NOTE - attempts to name these styles '311HolidayMessage' failed, apparently the leading digit
   in the class name is not permitted - go figure */
.callCenterHolidayMessageOuterContainer
{
  display: block; /* 'block' means message is visible, 'none' means message is hidden */
  padding: 0px;
  background-color: #ffffff;
  border: solid 1px #000000;
  position: relative; /* sets anchor for child control positioning */
}

.callCenterHolidayMessageInnerContainer
{
  background-image: url('images/besGeneral/informationIcon35pct.jpg'); /* informationIcon35pct.JPG */
  background-position: top left;
  background-repeat: no-repeat;
  
  position: relative;
  left: 5px;
}  

.callCenterHolidayMessageInnerContainer h2
{
  position: relative; /* positioning selected to optimize header display relative to the background .gif */
  margin-top: 5px;
  top: 7px;
  left: 40px;
  padding-right: 50px; /* padding-right compensates for the relative-left positioning to prevent
                          text overflowing past right edge of outer container */
  font-size: 9pt;
}

.callCenterHolidayMessageInnerContainer p
{
  position: relative; /* positioning selected to optimize header display relative to the background .gif */
  left: 40px;
  padding-right: 50px; /* padding-right compensates for the relative-left positioning to prevent
                          text overflowing past right edge of outer container */
  font-size: 8pt;
}

/* END - holiday messaging */