@charset "utf-8";
/* links at the bottom of long pages for going back to the top */
   .top { /*p*/ /* TODO: rename to something better | .nav-top */
         clear: both; /* ??? */
         overflow: hidden;
         position: relative;
         margin: 1.5em 0 0;
         }

   .top__link { /*a*/
         position: relative;
         float: right;
         text-decoration: none;
         text-align: center; /* center arrow above TOP */
         text-transform: uppercase;
         font-size: .8333333333333333em; /* 10px */
         font-weight: 400; /* reset inherited */
         /* width:3em; */
         }

      .top__arrow { display: block; } /* alternative to .top:before | requires a <span>&#9650;</span> | more browser compatible */

/* permalink - content fragment anchor link */
   .permalink {
      display: inline-block;
      visibility: hidden; /* opacity: 0; */
      text-decoration: none;
      background: #ffc;
      border-radius: 3px;
      line-height: 1;
      padding: 0 .25em;
      }

   h1:hover .permalink,
   h2:hover .permalink,
   h3:hover .permalink,
   h4:hover .permalink,
   h5:hover .permalink,
   h6:hover .permalink,
   .permalink:focus {
      visibility: visible; /* opacity: 1; */
      }



/* tooltip cursors */
   .tooltip,
   [title] { cursor: pointer; }

   abbr[title] { border-bottom: 1px dotted #ccc; }

   a[title] { cursor: pointer; }









/* HEADER --------------------------------- */
   .header {
      position: relative;
      border-top: 2px solid #a13;
      }

/* .app-name = .myr || .rus || .ess || .soc || .csp, etc. */
   .app-name {
      padding: 26px 0 26px 185px; /*26px 0 1px 185px;*/ /* because of * box-sizing: border-box; */
      min-height: 52px; /*25px;*/
      font-size: 18px;
      font-size: 1.5rem;
      line-height: 0;
      color: #fefafb;
      background: #d21033 url("../img/RU_banner.jpg") no-repeat;
      letter-spacing: 0;
      }

   .logo {
      position: absolute;
      left: 0;
      top: 0;
      height: 52px;
      width: 175px;
      text-indent: 100%;
      overflow: hidden;
      white-space: nowrap;
      z-index: 10;
      cursor: pointer;
      }


/* NAVIGATION 
   ------------------------------------------------------------------ */
/* http://csswizardry.com/2011/09/the-nav-abstraction/ */
   .nav {
      list-style: none;
      margin: 0;
      padding: 0;
      }

/* nav buttons */
   .nav-pills > li,
   .nav-main li.dd {
      float: left;
      position: relative;
      }

/* TODO : refactor - apply to all buttons not just pills | this may be redundant with .btn */
   .nav-pills button,
   .nav-pills input[type="button"],
   .nav-pills input[type="reset"],
   .nav-pills input[type="submit"] {
      -webkit-appearance: button;
      cursor: pointer;
      }

/* TODO : refactor - apply to all inputs and buttons? or should this be localized to nav/submit buttons only? | this may be redundant with .btn */
   .nav-pills input::-moz-focus-inner,
   .nav-pills button::-moz-focus-inner {
      padding: 0;
      border: 0;
      } /* mozilla fix */

   .nav-pills a,
   .nav-pills > li > input[type="submit"],
   .nav-pills > li > input[type="button"],
   .nav-pills > li > button,
   .nav-main .dd ul a {
      float: left;
      line-height: normal;
      margin: 0 1px;
      border: 0;
      padding: .5em 1em;
      text-decoration: none;
      white-space: nowrap;
      background: #D21033;
      color: #FFF;
      cursor: pointer;
      border-radius: 5px;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      } /*  X-webkit-box-sizing:content-box; /* Safari/Chrome, other WebKit ^/ X-moz-box-sizing:content-box; /* Firefox, other Gecko ^/ Xbox-sizing:content-box; /* Opera/IE 8+ ^/ */

/* hover color for main nav tabs and nav-sys pills */
   .nav-pills a:hover,
   .nav-pills a:focus,
   .nav-pills a:active,
   .nav-pills .active,
   .nav-pills input[type="submit"]:hover,
   .nav-pills input[type="submit"]:focus,
   .nav-pills input[type="submit"]:active,
   .nav-pills input.active,
   .nav-pills input[type="button"]:hover,
   .nav-pills input[type="button"]:focus,
   .nav-pills input[type="button"]:active,
   .nav-pills button:hover,
   .nav-pills button:focus,
   .nav-pills button:active,
   .nav-main .dd ul a:hover,
   .nav-main .dd ul a:focus,
   .nav-main .dd ul a:active,
   .nav-main .dd ul .active { background-color: #a13; } /* #a13 | #C20F2F; | #BF0B30;*/

/* applies to dropdown links */
   .nav-pills ul a, .nav-main ul ul a {
      float: none !important;
      display: block;
      background-color: transparent;
      }

   .nav .dd a { background-color: transparent; }

   .nav .dd:hover {
      border-radius: 5px 5px 0 0;
      background-color: #a13; /* dd hover background color on nav-system and nav-menu */
      } /* BA0E2E  Xz-index:599; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */

   .nav .dd > a:hover {
      cursor: text;
      background-color: #a13; /* dd hover background color */
      }

/* show dropdown submenu when hovering over li with arrow down */
   .nav .dd:hover > ul { visibility: visible; }

   .nav form {
      visibility: hidden;
      position: absolute;
      left: -100%;
      top: 100%;
      margin-left: -50%;
      margin-top: .5em;
      }
   .nav .dd:hover form { visibility: visible; }


/* TODO : what is this for ??? */
   .menu {} /* stacked menu as a stand alone component */
   .nav_menu {} /* dropdown menu as part of a nav bar */

   .nav-menu a {
      display: block;
      padding: .5em;
      }

   .nav-menu a:hover {
      background: #f0f0f0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      }

/* position the dropdown | TODO : this may need to be renamed, it looks too generic, but is intended for a specific use .nav_menu */
   .nav .nav_menu,
   .nav ul {
      position: absolute;
      top: 90%;
      right: 0;
      margin: 0;
      padding: 0;
      width: auto;
      border-radius: 5px 0 5px 5px; /* rounded dropdown in nav-sys */
      visibility: hidden;
      list-style: none;
      background: #a13; /*#C20F2F;*/ /* nav sys background */
      } /*  Xleft:0; Xz-index:598; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */

   .nav ul li {
      float: none;
      text-align: left;
      }

   .nav ul a {
      line-height: 1.5;
      display: block;
      letter-spacing: 0;
      } /* Xpadding:7px 10px; */

/* dropdown menu link highlight */
   .nav ul a:hover,
   .nav ul a:focus,
   .nav ul ul a:hover,
   .nav ul ul a:focus { background: #BA0E2E !important; }

/* system nav | position system nav container */
   /*div*/.nav-system {
      position: absolute;
      right: 25px;
      top: 13px;
      z-index: 11; /* needed so that main nav doesn't cover drop-down links */
      color: #FFF;
      }

   /* style the profile link */
      .welcome > .link-profile {
         float: none;
         display: inline-block;
         }

      .link-logout { padding-right: 0 !important; } /* since the icon already has some padding */
      .link-logout > .icon { visibility: hidden; } /* initially hide the logout link arrow */
      .link-logout:hover > .icon,
      .link-logout:focus > .icon,
      .link-logout:active > .icon { visibility: visible; } /* show the logout link arrow on focus */


/* main nav */
.nav-main {
   float: left;
   position: relative;
   z-index: 10; /* show drop-down menus above body content */
   margin: 0 0 1.5em; /* Xpadding-top:3px; */
   width: 100%;
   background: #d21033;
   line-height: normal;
}

.nav-main .nav > li { /* .nav-tabs li */
   float: left; 
   margin-left: 3px; /* space between main nav tabs | margin moved from .nav-main li > a to <li> so that sub-menu (.dd) can be made min-width: 100%; */
   }

.nav-main li > a {
   float: left;
   padding: 5px 0 1px;
   background: #c20f2f;
   color: #ffcdc0;
   text-decoration: none;
   border-top: 3px solid #d21033;
   }

.nav-main a:hover, .nav-main a:focus, .nav-main .dd:hover > a {
   background-color: #a13;/*#BF0B30;*//*#c20f2f;*/ /* main nav dd link background color */
   border-top: 0;
   padding: 5px 0 4px;
   }

.nav-main .dd:hover { background: none; }

.nav-main .dd:hover > a:first-child span {
   color: #fff;
}
.nav-main ul ul {
   border-radius: 0;
   left: 0;
   right: auto;
   background-color: #a13; /*#BF0B30;*/
   min-width: 100%; /* expand the dropdown to at least the width of the tab if all of the links are short */
   }

.nav-main .dd ul a {
   margin: 0;
   border-radius: 0;
   background: none;
}
.nav-main .dd:hover ul a {
   border-top: 0;
}
.nav-main .dd > a {
   background: #BF0B30; /*#c20f2f;*/
}
.nav-main a span {
   display: block;
   padding: 2px 10px;
   color: #ffcdc0;
}
.nav-main a:hover span, .nav-main a:focus span, .nav-main a:hover, .nav-main a:focus {
   color: #fff;
}
/* progress bar */
.progress {
   float: left;
   margin: 0 0 1em;
   border-bottom: 1px solid #eee;
   padding: 5px 0;
   width: 100%;
   color: #000;
   background-color: #fff;
}
.progress > li {
   float: left;
   position: relative;
   background: transparent url(../img/breadcrumb_divider.png) no-repeat scroll 100% 50%;
}
.progress a, .progress a:visited {
   display: block;
   padding: 10px 30px 10px 15px;
   cursor: pointer;
   color: #666;
   text-decoration: none;
   text-transform: uppercase;
   line-height: 1.8;
}
.progress a:hover {
   color: #000
}
.progress .first a {
   padding-left: 0;
}
.progress a.current {
   color: #000;
   font-weight: 700;
}
.progress .last {
   background: none;
}
.progress .one-line a {
   line-height: 3.6em;
}
/* progressbar */
.progressbar {
   float: left;
   margin: 0 0 1em;
   border-bottom: 1px solid #eee;
   padding: 5px 0;
   width: 100%;
   color: #000;
   background-color: #fff;
}
.progressbar > li {
   float: left;
   position: relative;
   line-height: 1.8;
   background: transparent url(../img/breadcrumb_divider.png) no-repeat scroll 90% 50%;
}
.progressbar a {
   cursor: text;
   color: #666;
   text-decoration: none;
   text-transform: uppercase;
   padding: 10px 30px 10px 0;
   display: block;
   float: left;
}
/* step number */
.progressbar b {
   float: left;
   margin-right: .1em;
   font-family: serif;
   font-size: 48px;
   font-size: 4rem;
   line-height: 1.3;
   color: #aaa;
}
.progressbar .no-arrow {
   background: none;
}
.progressbar .current a, .progressbar .current b {
   color: #000;
}
/* status indicators */
.progressbar .icon {
   position: absolute;
   visibility: hidden;
   margin: -1px 0 0 3px;
}
.progress .icon {
   position: absolute;
   margin: -1px 0 0 3px;
}
.one-line .icon {
   margin-top: -10px;
   top: 50%;
   right: 10px;
}

/* vertical nav - stacked | horizontal nav is default */
   .nav-stacked > li { display: list-item; } /* TODO : rename .stacked to .menu | same for .dd -> .nav_menu */

/* breadcrumbs and horizontal link list */
   .nav-breadcrumb a { text-decoration: none; }

   .nav-breadcrumb > li,
   .nav-links > li { display: inline; }

   .nav-breadcrumb li:first-child:before,
   .nav-links li:first-child:before { /* :first-child is more browser compatible than :last-child */
      content: ""; /* remove dividers before first link */
      padding: 0; /* zero out left AND right padding on first divider */
      }

   .divider-space li:before,
   .divider-path li:before,
   .divider-pipe li:before,
   .divider-dot li:before,
   .divider {
      color: #ccc;
      padding: 0 .5em;
      }

   .divider-space li:before { content: " "; } /* adds space divider | or use &nbsp; in HTML */
   .divider-path li:before {content: "/";} /* adds path divider | with spaces content:"\a0\a0/\a0"; */
   .divider-pipe li:before { content: "|"; } /* adds a pipe divider | or use | in HTML */
   .divider-dot li:before { content: "•"; } /* adds a mid dot divider | or use &middot; in HTML */

/* another way of doing above without :first-child */
.divider li + li:before {
   content: "•"; /* &middot; as divider */
   display: inline-block;
   font-size: 16px;
   font-weight: 700;
   margin-left: 5px;
   margin-right: 5px;
   vertical-align: -2px;
   }

/* pagination */
.pagination {
   margin-left: 0;
}
.pagination li {
   display: inline;
   margin-left: 0;
   text-indent: 0;
}
.pagination a {
   display: inline-block;
   padding: 0.5em 0;
   width: 2.5em;
   text-align: center;
   line-height: 1;
   margin: 0.1em;
   border: 1px solid #fff;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -o-border-radius: 5px;
   border-radius: 5px;
   background-clip: padding-box;
   text-decoration: none;
   background-color: transparent;
   color: #333;
}
.page-prev a, .page-next a {
   width: 6em;
   text-transform: uppercase;
}
X.page-prev a:before {
   content: "\25C0\a0";
} /* use .back in HTML right 25B6 or 25BA, up 25B2, down 25BC, left 25C0 */
X.page-next a:after {
   content: "\a0\25B6";
} /* use .next in HTML */
.pagination a:link, .pagination a:visited {
   color: #333; /* 36c */
   background-color: #fff;
   border-color: #ccc;
}
.pagination a[href]:hover, .pagination a[href]:focus {
   color: #d21034; /* 36c */
   background-color: #FFF7EE; /* CFDFFF 36c c20f2f */
   border-color: #d21034; /* 36c d21034 */
}
.pagination a:active {
   color: #fff;
   background-color: #900;
   border-color: #d21034;
}

/* highlight active tab */
   .nav-main .active > a {
      border-top: 0;
      padding: 5px 0 4px;
      background-color: #fff;
      }

   .nav-main .active > a:hover,
   .nav-main .active > a:focus {
      cursor: text;
      padding: 5px 0 4px;
      }

   .nav-main .active > a span {
      background-color: #fff;
      color: #000;
      font-weight: 700;
      }