/* $Id: common-008.css,v 1.1 2014/02/26 22:06:17 tako Exp $ */
/* Table of Contents: 
   * Reset
   * Base Elements
   * Typography
   * Grid
   * Header
   * Navigation
   * Content
   * Footer
   * Messages
   * Forms
   * Lists
   * Tabbed Sections
   * Tables
   * Helpers 
   * Overrides
   * Shame 

   Vertical rythm should be based on default font size and line height.
   Since default font size is 12px and line height 18px then padding and margins should be fractions or multiples of line height.
   In terms of font size, half line height is .75em, full line height is 1.5em. So margins and padding should be in terms of these two numbers.

   Font scale:
   <small> 10, <h1> 36,  <h2> 24, <h3> 16, <p><h4-h6> 12

   --------- 1 ---------|--- 2 ---|--- 3 ---|------ 12 -----|
   6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

   For font sizing use rem with px fallback

Change Log:
---------------------
v. .8
1. Removed external links based on attribute selector [http:...]
2. Removed  a[rel="tag"]
3. Removed some commented out properties
4. broke up file to smaller 
5. Narrowed back to page top implementation | removed nested icon or pseudo icon
6. Removed .opener. Not sure what it was for.
7. Removed .anchor.
8. Changed .permalink from opacity to visibility
9. Removed .mini-icon-link:before

   */

@import url("_00_reset.css");
@import url("_01_base.css");
@import url("_02_typography.css");
@import url("_03_fonts.css");
@import url("_04_grid.css");
@import url("_05_forms.css");
@import url("_06_tables.css");
@import url("_07_helpers.css");
@import url("_08_spacing.css");
@import url("_12_navigation.css");








/* arrows - http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ */
   .arrow {
      height: 0;
      width: 0;
     Xborder: 4px solid transparent;
      border-style: solid;
      border-width: 4px;
     Xborder-color: inherit; /* inherit border color from font color */
      display: inline-block; /*BG*/
      overflow: hidden; /*BG*/
     Xcolor: inherit;
      }

   .arrow-pseudo {
      border: 0;
      border-color: inherit; /* inherit border-color from .btn font color and pass it to .arrow-pseudo:after */
      }

   .arrow-pseudo:after {
      content: ' ';
      position: absolute;
      display: inline-block;
      height: 0;
      width: 0;
      border-style: solid;
      border-width: 4px;
      top: 50%;
      margin-top: -4px;
      Xcolor: inherit;
      }

   .arrow-up,
   .arrow-pseudo-up:after {
      /* up border-color is inherited from .btn color since the border-color is not explicitly set but has a width */
      border-left-color: transparent; /* in buttons can use inherit to inherit transparent from .btn border-color */
      border-right-color: transparent;
      border-width: 0 .3333333em .5em;
      }

   .arrow-down,
   .arrow-pseudo-down:after {
      border-left-color: transparent;
      border-right-color: transparent;
      border-width: .5em .3333333em 0;
      }

   .arrow-left,
   .arrow-pseudo-left:after {
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-width: .3333333em .5em .3333333em 0;
      left: .25em;
      }

   .arrow-right,
   .arrow-pseudo-right:after {
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-width: .3333333em 0 .3333333em .5em;
      right: .25em;
      }







/* CONTENT --------------------------------- */
   .content {
      clear: both;
      padding: 1px 0;
      margin: 1.5em 25px; /* TODO : change to RUS implementation */
      }


/* FOOTER
   ------------------------------------------------------------------ */
   .footer {
      clear: both;
      position: relative; /* establish context for absolutely positioned logo */
      margin: 1.5em 25px; /* TODO : change to RUS implementation */
      border-top: 1px solid #eee;
      padding: 1em .5em 0
      }

   .footer > p { margin: 0 160px .25em 0; }

   .link-logo {
      position: absolute;
      right: .5em;
      top: 1em;
      width: 150px;
      height: 40px;
      }





/* MESSAGES 
   ------------------------------------------------------------------ */
/* status messages */
/* messages */
   .msg {
      position: relative;
      clear: both;
      margin: 0 0 1.5em;
      padding: .5em 1em; /* 6px 12px */
      border-width: .25em; /* 3px */
      border-style: solid;
      -webkit-border-radius: .8333333333333333em; /* 10px */
      -moz-border-radius: .8333333333333333em;
      border-radius: .8333333333333333em;
      }

   X.msg + .msg { margin-top: -9px; } /* reduce vertical spacing between adjacent messages */

   .msg-info,
   .msg-help {
      background-color: #D1EFEF; /*#eff*/
      border-color: #B5DFDF; /*#e8f9f9*/
      color: #008; /* #008; */
      }

   .msg-success {
      background-color: #dfa;
      border-color: #ce9;
      color: #571; /* #390; */
      }

   .msg-error {
      background-color: #fff7ee;
      border-color: #fcc;
      color: #a00; /* #d21034; */
      }

/* message heading */
   .msg-heading {
      font-size: 1.5em; /* 18px */
      line-height: 2; /* 36px */
      margin-bottom: .5em; /* 9px */
      color: inherit;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-color: inherit;
      font-family: inherit;
      }
.msg-heading > .icon { position:relative; top: -3px; }
/* message close button */
   .close {
      font-size: 1.5em; /* 18px */
      font-weight: 700;
      text-shadow: 0 -1px 0 #777;
      color: inherit;
      cursor: pointer;
      line-height: 2; /* 36px */
      position: absolute;
      right: .6666666666666667em; /* 12px */
      z-index: 100; /* make close button clickable */
      text-decoration: none;
      opacity: .25;
      filter: alpha(opacity=25);
      }

   p > .close { line-height: 1.1; }

   .close:hover {
      color: inherit;
      opacity: 1;
      filter: alpha(opacity=100);
      }

/* icons */
   .icon {
      display: inline;
      padding: 12px 8px 4px; /* padding can be used to align icon with text and is needed to give icon size when it is display inline */
      Xmargin-right: 8px;
      font-size: 0; /*inherit*/
      Xline-height: 16px; /*inherit*/
      Xvertical-align: middle;
      background-image: url("/assets/img/sprite8.png");
      background-repeat: no-repeat;
      }

   .icon-success { background-position: 0 0; }
   .icon-error { background-position: -16px 0; }
   .icon-info { background-position: -32px 0; }
   .icon-help { background-position: -48px 0; }
   .icon-x { background-position: -64px 0; }
   .icon-check { background-position: -80px 0; }
   .icon-check-alt { background-position: -96px 0; }
   .icon-stop { background-position: -112px 0; }
   .icon-info-alt { background-position: -128px 0; }
   .icon-edit-alt { background-position: -144px 0; }
   .icon-edit-alt2 { background-position: -160px 0; }
   .icon-alert { background-position: -176px 0; }
   .icon-calendar-alt { background-position: -192px 0; }
   .icon-print-big { background-position: -208px 0; }
   .icon-search-alt, :hover > .icon-search-big { background-position: -240px 0; }
   .icon-search-big { background-position: -256px 0; }

   .icon-check-w, .btn:hover .icon-check-b { background-position: 0 -16px; }
   .icon-edit-w { background-position: -16px -16px; }
   .icon-minus-w, .icon-collapse-w { background-position: -32px -16px; }
   .icon-plus-w, .icon-expand-w { background-position: -48px -16px; }
   .icon-arrow-left-w { background-position: -64px -16px; }
   .icon-arrow-right-w, .icon-arrow-expand-b { background-position: -80px -16px; }
   .icon-arrow-down-w, .icon-arrow-collapse-b { background-position: -96px -16px; }
   .icon-arrow-up-w { background-position: -112px -16px; }
   .icon-new-window-w { background-position: -128px -16px; }
   .icon-calendar-w { background-position: -144px -16px; }
   .icon-print-w { background-position: -160px -16px; }
   .icon-trash-w { background-position: -176px -16px; }
   .icon-x-w { background-position: -192px -16px; }
   .icon-x-w-transparent { background-position: -208px -16px; }
   .icon-calendar-w-alt { background-position: -224px -16px; }
   .icon-home-w { background-position: -240px -16px; }
   .icon-search-w { background-position: -256px -16px; }

   .icon-check-b/*, .btn:hover .icon-check-w*/ { background-position: 0 -32px; }
   .icon-edit-b { background-position: -16px -32px; }
   .icon-minus-b, .icon-collapse-b { background-position: -32px -32px; }
   .icon-plus-b, .icon-expand-b { background-position: -48px -32px; }
   .icon-arrow-left-b { background-position: -64px -32px; }
   .icon-arrow-right-b, .icon-arrow-expand-b { background-position: -80px -32px; }
   .icon-arrow-down-b, .icon-arrow-collapse-b { background-position: -96px -32px; }
   .icon-arrow-up-b { background-position: -112px -32px; }
   .icon-new-window-b { background-position: -128px -32px; }
   .icon-calendar-b { background-position: -144px -32px; }
   .icon-print-b { background-position: -160px -32px; }
   .icon-trash-b { background-position: -176px -32px; }
   .icon-x-b { background-position: -192px -32px; }
   .icon-x-b-transparent { background-position: -208px -32px; }
   .icon-calendar-b-alt { background-position: -224px -32px; }
   .icon-home-b { background-position: -240px -32px; }
   .icon-search-b { background-position: -256px -32px; }

   .icon-close {
      background-position: -190px 0;
      background-color: #aaa;
      font-size: 0;
      border-radius: 16px;
      width: 15px;
      height: 16px;
      display: inline-block;
      padding: 0;
      box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #eee;
      }

   .icon-close:hover {
      background-color: #333;
      box-shadow: 0 0 0 2px #ccc;
      }

   .icon-close-2 {
      background-position: -112px 50%;
      border-radius: 16px;
      background-color: #ddd;
      height: 16px;
      width: 15px;
      font-size: 0;
      display: inline-block;
      padding:0;
      box-shadow: 0 0 0 2px #ddd;
      }

   .icon-close-2:hover {
      background-position: -128px 50%;
      background-color: #ccc;
      box-shadow:0 0 0 2px #999;
      }


/* clickable help icon <a>Help?</a> */
   a.icon-help {
      font-size: 0;
      line-height: 16px;
      margin: 0;
      padding: 12px 8px 4px;
      Xtext-indent: 100%;
      Xoverflow: hidden;
      Xvertical-align: middle;

      Xdisplay: inline-block;
      Xfont-size: 0;
      Xheight: 16px; /* it's OK to set icon dimensions in pixels */
      Xwidth: 16px;
      Xline-height: 0;
      Xmargin: 0;
      Xpadding: 0;
      Xoverflow: hidden;
      Xtext-indent: 100%;
      Xvertical-align: middle;
      }


   









/* TABS --------------------------------- */
.tabs {
   clear: both;
   overflow: hidden;
   margin: 18px 0;
   padding: 1px 0 0;
   width: 100%;
   line-height: normal;
   border-bottom: 5px solid #ddd;
}
.tabs ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.tabs li {
   display: inline;
   margin: 0;
   padding: 0;
}
.tabs a {
   float: left;
   margin: 0 3px 0 0;
   border-top: 3px solid #fff;
   border-bottom: 1px solid #eee;
   box-shadow: inset 0 -5px 10px -6px #ccc;
   padding: 5px 0 0 9px;
   background: #f2f2f2;
   text-decoration: none;
}
.tabs a span {
   display: block;
   padding: 2px 15px 2px 6px;
   color: #999;
}
.tabs a:hover {
   border-top: 3px solid #f2f2f2;
   padding: 3px 0 2px 9px;
}
.tabs a:hover span {
   color: #333;
}
.tabs .active-tab a,  .tabs .active-tab a:hover {
   background: #dfdfdf;
   border: 1px solid #ccc;
   border-bottom: 0;
   padding-bottom: 1px;
   cursor: text;
   padding: 5px 0 1px 9px;
   box-shadow: none;
}
.tabs .active-tab a span {
   padding-bottom: 4px;
   color: #000;
}
/* TABS (Centered) --------------------------------- */
.tabs-centered {
   float: left;
   overflow: hidden;
   width: 100%;
   background: #fff;
   border-bottom: 5px solid #ddd;
   position: relative;
}
.tabs-centered ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}
.tabs-centered ul li {
   display: block;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   right: 50%;
}
.tabs-centered ul li a {
   display: block;
   margin: 0 3px 0 0;
   border-top: 3px solid #fff;
   border-bottom: 1px;
   padding: 7px 15px 3px 15px;
   background: #f2f2f2;
   color: #999;
   text-decoration: none;
   line-height: 1.3em;
}
.tabs-centered ul li a:hover {
   Xbackground: #369;
   color: #333;
   border: 0;
   padding-bottom: 6px;
}
.tabs-centered ul li a.active,  .tabs-centered ul li a.active:hover {
   color: #000;
   background: #dfdfdf;
   font-weight: bold;
   border: 0;
   padding-bottom: 7px;
}
/* TABS (right) --------------------------------- */
.tabs-centered {
   float: left;
   overflow: hidden;
   width: 100%;
   background: #fff;
   border-bottom: 5px solid #ddd;
   position: relative;
}
.tabs-right ul {
   clear: left;
   float: right;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 0;
   text-align: right;
}
.tabs-right ul li {
   float: left;
   right: 0;
}
/* TABS-ALT (Reversed) --------------------------------- */
.tabs-alt {
   border: 0;
   background: #ccc;
} /* url(../img/tab_line.gif) repeat-x left bottom; */
.tabs-alt ul {
   padding: 18px 0 0 20px;
}
.tabs-alt a {
   Xpadding: 5px 0 0 9px;
   border-color: #ccc;
   border-bottom: 1px solid #eee;
   box-shadow: none;
}
.tabs-alt a:hover {
   border-top: 3px solid #f2f2f2;
   padding: 3px 0 2px 9px;
} /* #eaeaea */
.tabs-alt .active-tab a,  .tabs-alt .active-tab a:hover {
   border-color: #fff;
   background: #fff;
   padding: 5px 0 2px 9px;
   border-top: 0;
}
.tabs-alt .active-tab a span {
   background: #fff
}
/* TABBED SECTION --------------------------------- */
/* tab navigation */
#nav-tab {
   float: left;
   margin: 1.5em 0 0;
   padding: 1px 0 0;
   width: 100%;
   line-height: normal;
}
.content #nav-tab ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#nav-tab li {
   display: inline;
   margin: 0;
   padding: 0;
}
#nav-tab a {
   float: left;
   margin: 0 3px 0 0;
   border-top: 3px solid #fff;
   padding: 5px 0 1px 9px;
   background: #f2f2f2;
   text-decoration: none;
}
#nav-tab a span {
   float: left;
   display: block;
   padding: 3px 15px 3px 6px;
   background: #f2f2f2;
   color: #999;
}
/* Hide from IE5Mac only \*/
#nav-tab a span {
   float: none;
}
/* End hack */
#nav-tab a:hover {
   border-top: 3px solid #f2f2f2;
   padding: 3px 0 3px 9px;
}
#nav-tab a:hover span {
   color: #333;
}
#nav-tab .active-tab a {
   background: #dfdfdf;
   border-top: 1px solid #dfdfdf;
   padding-bottom: 2px;
}
#nav-tab .active-tab a:hover {
   cursor: text;
   padding: 5px 0 2px 9px;
}
#nav-tab .active-tab a span {
   padding-bottom: 5px;
   color: #000;
   Xfont-weight: 700;
   background: #dfdfdf
}
/* tab panel */
.tab-panel {
   clear: both;
   margin: 0 0 2em;
   padding: 9px;
   background-color: #dfdfdf;
}
.tab-content {
   display: block;
}
* html .tab-panel {
   height: 1px;
}
* html .tab-content {
   height: 200px;
}
/* min-height workaround http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/ for Mozilla, Safari, Opera, IE5/Mac */
*>.tab-panel {
   padding-top: 209px; /* stretch the containing box to at least 209px tall; 9px of padding-top */
   min-height: 1px; /* needed to keep containing box open; lack of an explicit height value collapses container (padding included); keep container open by setting min-height to any value; for Opera */
}
/* cancel out the containing box's padding non-IE browsers */
*>.tab-panel div.tab-content {
   min-height: 200px;
   margin-top: -200px;
}
.tab-panel div.tab-content {
   padding: 10px;
   background: #ffe;
   font-size: 11px;
}









/* COMPONENTS
   ------------------------------------------------------------------ */

/* button base <a> | <input> | <button> */

/* normalize (remove extra padding and borders) buttons in FF  */
   button::-moz-focus-inner,
   input[type="reset"]::-moz-focus-inner,
   input[type="button"]::-moz-focus-inner,
   input[type="submit"]::-moz-focus-inner,
   input[type="file"] > input[type="button"]::-moz-focus-inner {
      padding: 0;
      border: 0
      }

   .btn, 
   .btn:visited {
      white-space: nowrap;
      position: relative;
      display: inline-block;
      margin: 0 .1666666666666667em;
      border: 1px solid transparent;
      border-bottom: 1px solid rgba(0,0,0,0.25);
      Xborder-bottom: 1px solid #777;
      text-align: center;
      Xvertical-align:middle; /* in FF this changes the size of some buttons */
      padding: .25em .5em; /* .25em .5em. 2em;*/
      Xheight: 23px;
      line-height: normal; /* normal | FF sets this to normal !important so this will not have any effect in FF */
      font-family: sans-serif; /* <input> and <a> register different font family for sans-serif */
      font-size: 12px; /* need this to normalize font-size for <button> */
      font-size: 1rem;
      font-weight: 400;
      color: #fff; /* fff */
      text-decoration: none;
      /* text-transform: uppercase; */
      background-color: #999; /* aaa */
      cursor: pointer;

      text-shadow: 0 -1px 0 rgba(0,0,0,.25);

      -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
         -moz-box-shadow:0 1px 3px rgba(0,0,0,0.25); 
              box-shadow:0 1px 3px rgba(0,0,0,0.25);

   /* normalize box sizing between links and buttons */
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
       -webkit-border-radius: .35em;
         -moz-border-radius: .35em;
              border-radius: .35em;/* Xbackground-image: -moz-linear-gradient(center top , #F97458 0%, #D72312 100%); Xbox-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -3px 0 rgba(0, 0, 0, 0.25) inset, 0 -4px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 rgba(0, 0, 0, 0.1); */
      }

   .btn:hover,
   .btn:focus,
   .btn:active,
   .btn--active {
      background-color: #888;
      color: #fff; /* #fff */
      text-shadow: none;
      outline: 0;
      }

   .btn:active,
   .btn--active {
      top: 1px;
      outline: 1px dotted #d21034;
      }

   .btn:focus,
   Xa.btn:focus,
   Xbutton:focus,
   Xinput[type="reset"]:focus,
   Xinput[type="button"]:focus,
   Xinput[type="submit"]:focus,
   Xinput[type="file"] > input[type="button"]:focus {
      -webkit-box-shadow: 0 0 2px 1px #C80;
         -moz-box-shadow: 0 0 2px 1px #C80;
              box-shadow: 0 0 2px 1px #C80;
      }

/* primary and secondary submit buttons <a> | <input> | <button> */
   .btn-primary,
   .btn-secondary {
      font-weight: 700;
      padding: .5em .75em;
      -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
         -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
              box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,0.2);
      }

   .btn-primary,
   .btn-primary:visited { background-color: #d21034; color: #fff; }

   .btn-primary:hover, 
   .btn-primary:focus { background-color: #BF0B30; color: #fff; }

   .btn-primary:active {
      background-color: rgb(155,9,38);
      color: rgba(242, 242, 242,.75);
      text-shadow: -1px -1px 0 rgba(0,0,0,.25);
      }

/* canel button <input> | <button> - make it look like a link or use a link */
   .btn-cancel, 
   .btn-cancel:visited {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      text-decoration: underline;
      text-shadow: none;
      color: #333;
      }

   .btn-cancel:hover,
   .btn-cancel:focus,
   .btn-cancel:active {
      background-color: transparent;
      text-decoration: underline;
      color: blue;
      }

/* close button */
   .btn-close {
      display: inline-block; /*block*/
      height: 0;
      width: 1.5em; /* 1.666666666666667em 20px */
      overflow: hidden;
      padding: 1.5em 0 0; /* 1.666666666666667em */
      -webkit-border-radius: 100%;
         -moz-border-radius: 100%;
              border-radius: 100%;
      position: relative;
      text-decoration: none;
      background-color: #ddd;
      }
   
   .btn-close:after {
      content: "\D7"; /* times symbol */
      color: #999;
      display: block;
      text-align: center;
      width: 18px; /*1em*/
      position: absolute;
      top: 0;
      left: 0;
      font-size: 20px;/* 1.5em*/
      Xfont-weight: 700; /* messes with the line height */
      line-height: 1;
      height: 18px;
      font-family: monospace, monospace;
      overflow: visible;
      }

   .btn-close:hover {
      background-color: #ccc;
      -webkit-box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
         -moz-box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
              box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px #999;
      }

   .btn-close:hover:after { color: #fff; }

/* button modifiers */
/* --disabled <a> | <button> | <input>*/
   .btn--disabled,  
   .btn--disabled:visited,
   .btn--disabled:hover,
   .btn--disabled:focus,
   .btn--disabled:active {
      background-color: #eee;
      color: #bbb;
      top: 0;
      border-color: #ddd;
      text-shadow: none;
      cursor: text;
      cursor: not-allowed;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
      }

/* back, next, delete [x Delete] <a> */
   .back:before { content: "\25C4\a0"; } /* use HTML entities on <input> and <button> */
   .next:after { content: "\a0\25BA"; }
   .delete:before { content: "\00D7\a0"; } /* use &times; or &minus; on <input> and <button> */





/* tooltip */
X.tip {
   background-color: #f5f5f5; /* #3D6199; */
   color: #000;
   border: 1px solid #999;
   padding: 1em;
   position: absolute;
   z-index: 100;
   font-size: 11px;
   font-weight: 400;
   text-shadow: 0 1px 0 #fff;
   border-radius: 5px;
   -webkit-box-shadow: inset 0 -10px 10px -5px #dcdcdc, 3px 3px 5px 0 rgba(0,0,0,.1);
   -moz-box-shadow: inset 0 -10px 10px -5px #dcdcdc, 3px 3px 5px 0 rgba(0,0,0,.1);
   box-shadow: inset 0 -10px 10px -5px #dcdcdc, 3px 3px 5px 0 rgba(0,0,0,.1);
}

X[title] { position: relative; }

/* tooltip body */
   X[title]:hover:after ,
   .tooltip,
   .tooltip-r,
   .tooltip-b {
      Xcontent: attr(title); /*data-tip*/
      color: #fff;
      font-size: 11px; /* 12px */
      line-height: 1.3em; /* 16px */
      text-align: left;
      background-color: #444;
      border-radius: 0.25em; /* 4px */
      padding: 0.5em; /* 8px */
      Xwidth: 16.5em; /* 200px */
      Xopacity: 0.8;
      max-width: 15em;
      display: block;
      position: absolute;
      padding: .25em .5em;
      Xleft: 0;
      Xbottom: 2em; /* 24px */
      z-index: 101;
      Xborder: 1px solid #000;
      box-shadow: 0 0 1px 1px #fff;
      Xborder: 1px solid #fff;
      Xoutline: 1px solid #fff;

         Xvisibility: hidden;
         Xopacity: 0;

         X-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
         X-webkit-transform: translateZ(0); /* webkit flicker fix */

         X-webkit-transition: all .25s ease-out;
            X-moz-transition: all .25s ease-out;
             X-ms-transition: all .25s ease-out;
              X-o-transition: all .25s ease-out;
                 Xtransition: all .25s ease-out;
      }

X:hover .tooltip {
   Xopacity: 1;
   Xvisibility: visible;
   }

/* tooltip arrows */
   X[title]:hover:before,
   .tooltip:before,
   .tooltip:after,
   .tooltip-r:before, 
   .tooltip-r:after,
   .tooltip-b:before,
   .tooltip-b:after {
      content: " ";
      border: solid;
      border-color: #fff transparent;
      border-width: 0.5em 0.5em 0 0.5em; /* 6px 6px 0 6px */
      Xopacity: 0.9;
      display: block;
      position: absolute;
      z-index: 99;
      left: 50%; /* 1em */
      margin-left: -4px;
      top: 100%;
      }

/* arrow above border arrow */
   .tooltip:after {
      border-color: #444 transparent;
      margin-top: -2px;
      Xopacity: 1;
      }

/* mover arrow to the right */
   .tooltip-r:before, 
   .tooltip-r:after {Xleft: auto; Xright: 1em; }

   .tooltip-b:before,
   .tooltip-b:after {
      border-color: transparent transparent #fff transparent;
      border-width: 0 0.5em 0.5em; /* 6px 6px 0 6px */
      top: auto;
      bottom: 100%;
      }

.tooltip-b:after { border-bottom-color: #444; margin-top: 0; margin-bottom: -2px; }



/* tooltip arrow */
X.tip:before {
   border-color: transparent;
   border-style: solid;
   border-width: 6px;
   border-top: 6px solid #999;
   content: " ";
   display: block;
   height: 0;
   width: 0;
   line-height: 0;
   position: absolute;
   Xtop: 50%;
   bottom: -1.2em;
   Xmargin-bottom: -6px;
   Xmargin-top: -6px;
   Xleft: -6px;
}










/* OVERRIDES 
   ------------------------------------------------------------------ */

.fm-reason {
   background-color: #fafafa;
   padding: 2em 2em 0;
   overflow: hidden;
   }



/* SHAME
   ------------------------------------------------------------------ */



.icon-expand-w,
.icon-expand-b,
.icon-collapse-w,
.icon-collapse-b,
.icon-arrow-expand-b,
.icon-arrow-expand-w {
   margin-right: 6px;
   border: 1px solid transparent;
   }

.icon-expand-w:hover,
.icon-expand-b:hover,
.icon-collapse-w:hover,
.icon-collapse-b:hover,
.icon-arrow-expand-b:hover,
.icon-arrow-expand-w:hover { border-color: #999; }


.btn > .icon,
.dd [class*="icon-arrow"] {
   opacity: .6;
   filter: alpha(opacity=60);
   margin-right: 0;
   } /* override right margin on icon | TODO : use .mr-0 instead */

.btn:hover > .icon,
.dd:hover .icon,
.link-logout .icon {
   opacity: 1;
   filter: alpha(opacity=100);
   }







.collapsible {
    position: relative;
    font: 1.2em/2 Arial, sans-serif;
    margin: 0;
    clear: both;
    padding: 0 10px;
    border-top: #fff 1px solid;
    background: #ccc;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    }

   .collapse-open {
      background: #777;
      color: #fff;
      }

   .collapse-open span, .collapse-close span {
      display: block;
      Xfloat: right;
      Xpadding: 10px;
      position: absolute;
      right: 10px;
      top: 0;
      }

   .collapse-open span:before { content: "-"; }

   .collapse-close span:before {
      content: "+";
      position: absolute;
      right: -2px;
      top: 3px;
      }

   .simple {
      padding-left: 18px;
      Xtext-indent: 5px;
      background: transparent;
      color: #000;
      }

   .simple span {
      Xfloat: left;
      position: absolute;
      left: 0;
      top: auto;
      }

   .simple + .collapsible-container > .collapsible-content {
      background: transparent;
      padding-left: 18px;
      }

   .collapse-open.simple span:before {
      content: "\a0\25BC";
      position: relative;
      left: -4px;
      color: #ccc;
      }

   .collapse-close.simple span:before {
      content: "\a0\25B6";
      position: relative;
      left: -2px;
      top: auto;
      color: #ccc;
      }
   
   div.collapsible-container {
      padding: 0;
      margin: 0;
      Xwidth: 100%;
      }
   
   div.collapsible-content {
      background: #f0f0f0;
      margin: 0;
      padding: 10px;
      Xfont-size: .9em;
      line-height: 1.5em;
      font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      }
   
   div.collapsible-content ul, div.collapsible-content p {
      padding: 0;
      margin: 0;
      }
   
   div.collapsible-content ul li {
      list-style-position: inside;
      line-height: 25px;
      }
   
   div.collapsible-content ul li a { color: #555; }





/* COURSE module
   ---------------------------------------------- */
   .course {
      margin-bottom: .25em;
      border: 1px solid #ddd;
      }

      .course__row {
         background-color: #ddd;
         padding: 1.5em 1em;
         text-align: right; /* align action buttons on the right */
         overflow: hidden; /* needed for rows with floated content only (without buttons) */
         }

         .course__row > .icon {
            float:left;
            }

         .course__number,
         .course__title,
         .course__credits,
         .course__meta-links,
         .course__request-status,
         .course__request-status--denied,
         .course__request-status--pending,
         .course__request-status--approved {
            margin-right: 2em;
            text-align: left;
            float: left;
            }

         .course__title {
            font-weight: bold;
            width: 22em;
            text-transform: uppercase;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            }

         .course__request-status,
         .course__request-status--denied,
         .course__request-status--pending,
         .course__request-status--approved {
            font-weight: 700;
            text-transform: uppercase;
            padding: 0 .5em;
            Xwidth: 8em;
            text-align: center;
            }

         .course__request-status--denied { background-color: #fdd; color: #d21034; }
         .course__request-status--pending { color: #999; }
         .course__request-status--approved { background-color: #dfa; color: #571;}

         .course__request-actions {
            width: 10em;
            white-space: nowrap;
            }

         .course__request-actions > .btn,
         .row--actions > .btn {
            display: inline;
            padding: .5em;
            } /* override .btn */

      .course__notes {
         padding: 1.5em 1.5em 0;
         border-top: 1px solid #ddd;
         max-height: 10em;
         overflow: auto;
         }

.request-reason { }

   .course table,
   table table {
      font-size: 100%;
      margin: 0;
      }
   
   .sections {
      width: 100%;
      border-top: 3px double #ccc;
      margin: 0;
      }
   
   .sections th {
      border-bottom: 1px solid #bbb;
      color: #777;
      font-weight: 400;
      padding: .5em .75em;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      }
   
   .sections td span {
      display: block;
      line-height: 1.5;
      color: #777;
      }
   
   .section > td {
      border-top: 3px double #ccc;
      text-align: center;
      vertical-align: middle;
      }
   
   .sections .meeting-times { text-align: left; }
   
   .meeting-times span { padding-left: 1.5em; }
   
   .sn { text-align: center; }
   
   .sn b {
      font-size: 2em;
      font-weight: normal;
      Xpadding: .75em;
      color: #fff;
      text-shadow: 0 1px 0 #555;
      Xborder-radius: .5em;
      Xbox-shadow: 0 2px 2px 0 #999, inset 0 -1px 0 0 #fff;
      }
   
   .sn--open, .sn--open b { background-color: #6AAB38; }
   
   .sn--special, .sn--special b { background-color: #FFC85F; }
   
   .sn--closed, .sn--closed b { background-color: #D21034; }
   
   fieldset:first-child { margin-top: 0; }
   
   legend h1 { margin: 0; }
   
   textarea {
      border-right: 1px solid #CCC;
      border-bottom: 1px solid #CCC;
      border-radius: 0.2em 0.2em 0.2em 0.2em;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2) inset, 1px 1px 0 #FFF;
      }
   
   .optional {
      color: #777;
      font-weight: normal;
      }
   
   .reason {
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
      }
   
Xinput, Xtextarea, select, Xoption {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   color: #000;
}

Xtextarea {
   padding: 3px;
   line-height: 1.5;
}

Xinput[type="text"], Xinput[type="password"] {
   min-height: 1.5em;
   text-indent: 3px;
   padding: 2px 0;
   border: 1px solid #ccc;
   border-color: #777 #DDD #DDD #777;
} /* 1.25em = 15px*/

   select {
      border-width: 0;
      _font: normal 400 12px/1 Verdana, sans-serif;
      _height: 1.5em;
      }
   
   .select {
      Xfloat: left;
      display: inline-block;
      border: 1px solid red;
      border-color: #777 #ddd #ddd #777;
      margin: 0;
      padding: 2px 2px 0 0;
      background: #fff;
      }
   
   .select select {
      padding-bottom: 2px;
      Xwidth: 100%;
      }
   
   .select.error { background: #FFF7EE; } /* may not need this since the drop-down can be made to have a selection ??? */

















/* ERS */
.filters {
   padding: .333333em .25em;
   border-top: 3px double #ddd;
   border-bottom: 1px solid #ddd;
   background-color: #fafafa;
      Xoverflow: visible !important; /* override jQuery behavior if using slideToggle */
   }

.dropdown {
   display: inline-block;
   position: relative;
   z-index: 1000;
   }

.dropdown__toggle { border: 1px solid transparent; display: inline-block; padding-right: .25em; line-height: normal; }

.dropdown__label { margin-right: .25em; border-right: 1px solid #eee; padding: .25em .5em; display: inline-block; }

.dropdown__toggle:hover,
.dropdown__toggle:focus,
.dropdown__toggle--active,
.dropdown__menu { border: 1px solid #ddd; background-color: #fff; border-radius: 4px; }

.dropdown__menu {
   position: absolute;
   min-width: 100%;
   }

.dropdown__toggle,
.dropdown__toggle:hover,
.dropdown__toggle:visited,
.dropdown__menu a,
.dropdown__menu a:hover,
.dropdown__menu a:focus,
.dropdown__menu a:visited {
   text-decoration: none;
   Xborder-radius: 0;
   color: #36C;
   white-space: nowrap;
   }

.expanded { background-color: #fafafa; }

table.review tbody {border-top:1px solid #eee; }

th > span { font-weight: 400; }

.tr-reason td, .details, .centered .details  { background-color: #fafafa; position: relative; border-bottom: 1px solid #eee; text-align: left; }
.tr-reason b, .details b { display: block; padding-left: 1.25em; }
.tr-reason .close { display:none; line-height: 1; right: 3px; }
.tr-reason blockquote, .details blockquote { margin: .25em -.75em -.5em; border: 0; padding: .25em 2em .25em; max-height: 10em; overflow: auto; font-size: 1em; font-family: arial, sans-serif; Xbackground-color: #fafafa; }
.filters > .form-text { padding-top: .25em; padding-bottom: .25em; }
.filters > .btn { vertical-align: middle; }

.form-search {
   position: relative;
   Xborder: 1px solid #ccc;
   padding: 1.5em;
   border-radius: 4px;
   background-color: #ccc;
   box-shadow: inset 0 -1px 0 #999;
   }
.form-search-alt {
   position: relative;
   padding: 1em 25px;
   background-color: #ddd;
   }
.form-search-alt * { vertical-align: middle; }

.form-search-alt:before, 
.form-search:before {
   content: " ";
   border: solid;
   border-color: transparent transparent #ddd ;
   border-width: 0 1em 1em 1em; /* 6px 6px 0 6px */
   position: absolute;
   z-index: 99;
   left: 50%;
   margin-left: -1em;
   bottom: 100%;
   }

.form-search-alt:before {
   left: auto;
   right: 9.5em;
   margin-left: auto;
   }

.form-search-alt .field-search { border-color: #ccc; }
.form-search-alt .required { background-color: #fea; }
.form-search-alt .form-search__label { font-weight: 400; font-size: 1.8em; display: inline; vertical-align: middle; text-transform: uppercase; margin-right: .5em; }
.form-search__close { line-height: 1; padding: 0; }
.form-search__heading {}
.form-search__label { font-weight: 400; }
.form-search__btn:hover {}
X.form-search * { vertical-align: baseline; }

.form-search input {
   border: 0;
   inset -1px -1px 0 #fff;
   }

.assistive-text {
   position: absolute;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   }

.field-search {
/*   
   -webkit-transition-duration: 400ms;
   -webkit-transition-property: width, background-color;
   -webkit-transition-timing-function: ease;
   -moz-transition-duration: 400ms;
   -moz-transition-property: width, background;
   -moz-transition-timing-function: ease;
   -o-transition-duration: 400ms;
   -o-transition-property: width, background;
   -o-transition-timing-function: ease;
*/
   text-align: center;
   -webkit-transition-duration: 400ms;
   -webkit-transition-property: background-color;
   -webkit-transition-timing-function: ease;
   -moz-transition-duration: 400ms;
   -moz-transition-property: background-color;
   -moz-transition-timing-function: ease;
   -o-transition-duration: 400ms;
   -o-transition-property: background-color;
   -o-transition-timing-function: ease;

   width: 3em;
   background-color: #fafafa;
   }

.field-search:focus {
   background-color: #fff;
   border-color: transparent;
   }

::-webkit-input-placeholder { color: #aaa; }
:-moz-placeholder { color: #aaa; }
::-moz-placeholder { color: #aaa; }
:-ms-input-placeholder { color: #aaa; }

a[data-toggle*="fm-reason"] {
   color: #36C;
   text-transform: uppercase;
   font-size: 10px;
   text-decoration: none;
   }