/* $Id: common.css,v 1.8 2012/10/23 16:05:19 tako Exp $ */
/* Table of Contents: * Reset * Miscellaneous * Header * Navigation * Content * Footer * Messages * Forms * Lists * Tabbed Sections * Tables */


/* RESET / BASE --------------------------------- 
 * reset some properties for elements since defaults are not crossbrowser - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 * TODO : Check out vanilla css https://github.com/csswizardry/vanilla and normalize.css https://github.com/necolas/normalize.css */

   html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, pre, a, abbr, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
   pre, code, kbd, samp, tt {font-family:monospace, monospace; font-size:1em;} /* fix monospace sizing issue */ 
   em {font-style:italic; font-weight:400;}
   strong, caption, th {font-style:normal; font-weight:900;}

   ::-moz-selection {background:pink; text-shadow:none;}
   ::selection {background:pink; text-shadow:none;}

/* lists */
   dl {margin:9px 0;}
   dt {}
   dd {margin:.5em 0 .5em 2em;} /* line-height:1.5; margin:0 0 0 40px; */
   ol, ul {margin:1em 0; padding:0 0 0 40px;}
   ul {margin:1em 0 1em 1.5em; padding-left:0;}
   ul ul {margin:0 0 0 1.3em; list-style-type:circle;}
   li {font-size:1.2em; line-height:1.5;}
   li * {font-size:1em;}
   
/* headings */
   h1, h2, h3, h4, h5, h6 {position:relative;}
   h1, .h1 {font:400 3em Georgia, "Times New Roman", serif; text-transform:capitalize; letter-spacing:-1px; color:#000; margin:15px 0;}
   h2, .h2 {font:400 2.5em Georgia, "Times New Roman", serif; color:#000; margin:1.5em 0 .5em;}
   h3, .h3 {font:400 2em/2 Georgia, "Times New Roman", serif; color:#333; margin:1.5em 0 .5em;}
   h4, .h4 {font:400 1.7em Georgia, "Times New Roman", serif; color:#555; margin:1.8em 0 0;}
   h5, .h5, h6, .h6 {font-size:1.3em;}
   
   /* Font Stacks: http://code.stephenmorley.org/html-and-css/the-myth-of-web-safe-fonts/
      narrow serif         ->    font-family:'Times New Roman',Times,serif;
      wide serif           ->    font-family:Georgia,Utopia,Charter,serif;
      narrow sans-serif    ->    font-family:Helvetica,Arial,sans-serif;
      wide sans-serif      ->    font-family:Verdana,Geneva,sans-serif;
      monospace            ->    font-family:'Courier New',Courier,monospace; */

/* paragraphs */
   p {margin:1.5em 0; line-height:1.5; font-size:1.2em;}

/* text links */
   a {color:#36c;}
   a:visited {color:#969;} /* 93c */
   a:hover, a:focus, a:active {color:#d21033; text-decoration:none;}
   a:active {outline:1px dotted #d21033;}

/* use abbr since acronym not supported by HTML5 or IE < 5.5, abbr not supported by < IE6; in th or td use abbr attribute for abbreviations */
   abbr[title] {cursor:help; border-bottom:1px dotted #ccc;}
   [title] {cursor:help;}
   a[title] {cursor:pointer;}

/* decorative & */
   .amp, abbr[title="and"] {font-family:Cochin,Baskerville,Palatino,"Book Antiqua",serif; font-style:italic; border:0;}

/* word break wbr */
   wbr:after {content:"\00200B";}

/* browser default font-size is 16px which is too big so we make it 16px x 62.5% = 10px */
   body {margin-bottom:1.5em; min-width:960px; font:normal 400 62.5%/1.0 Verdana, sans-serif; background:#fff; color:#333; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* text-size-adjust for mobile */


/* MISCELLANEOUS --------------------------------- */
/* force scrollbar in non-IE browser */
   html {overflow-y:scroll;}

/* links at the bottom of long pages for going back to the top */
   .top, .top a {float:right; Xmargin:2em 10px 0 0; text-decoration:none; text-align:center; text-transform:uppercase; font-size:10px; font-weight:900;} /* width:3em; */
   X.top span {display:block; position:relative; top:0; font-weight:400; font-size:1.6em; line-height:.5;}
   .top {font-weight:400;}
   a.top:before {content:"\25B2"; display:block; text-align:center;}

/* convenience */
   .al {text-align:left !important;}
   .ac {text-align:center !important;}
   .ar {text-align:right !important;}
   .aj {text-align:justify !important;}

   .cl {clear:left !important;}
   .cr {clear:right !important;}
   .cb {clear:both !important;}
   .cn {clear:none !important;}

   .fn {float:none !important;}
   .fl {float:left !important;}
   .fr {float:right !important;}

   .vt {vertical-align:top !important;}
   .vm {vertical-align:middle !important;}
   .vb {vertical-align:bottom !important;}
   .vbl {vertical-align:baseline !important;}
   
   .dnone {display:none !important;}
   .dblock {display:block !important;}
   .dinline {display:inline !important;}
   .hidden {visibility:hidden !important;}
   .visible {visibility:visible !important;} 

   .txt-xs {font-size:10px !important;}
   .txt-s {font-size:12px !important;}
   .txt-m {font-size:14px !important;}
   .txt-l {font-size:16px !important;}
   .txt-xl {font-size:24px !important;}
   .txt-xxl {font-size:32px !important;}
   
/* used to clear floats within a non-floated container for browsers that handle :after (not < IE7) - http://nicolasgallagher.com/micro-clearfix-hack/ */
   .header:before, .header:after,
   .content:before, .content:after,
   .footer:before, .footer:after,
   .login .fm-v:before, .login .fm-v:after,
   .row:before, .row:after,
   .col:before, .col:after,
   .cf:before, .cf:after {content:""; display:table; height:0;} /* cf = clear fix */

   .header:after,
   .content:after,
   .footer:after,
   .login .fm-v:after,
   .row:after,
   .col:after,
   .cf:after {clear:both;} /* cf = clear fix */

   .header, .content, .footer, .login .fm-v, .row, .col, .cf {*zoom:1;} /* For IE 6/7 (trigger hasLayout) */

/* HEADER --------------------------------- */
/* .app-name = .myr || .rus || .ess || .soc || .csp, etc. */
   .app-name {margin:0; padding:26px 0 1px 185px; min-height:25px; font:normal 400 18px/0 Georgia, "Times New Roman", serif; color:#fefafb; background:#d21033 url(../img/RU_banner.jpg) no-repeat; letter-spacing:0;}
   #topOfPage {position:absolute; left:0; top:0; height:52px; width:175px; text-indent:100%; overflow:hidden; white-space:nowrap; z-index:10; cursor:pointer;}

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

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

      .nav-pills button,
      .nav-pills input[type="button"],
      .nav-pills input[type="reset"],
      .nav-pills input[type="submit"] {-webkit-appearance:button; cursor:pointer;}         

      .nav-pills input::-moz-focus-inner, .nav-pills button::-moz-focus-inner {padding:0; border:0;} /* mozilla fix */
      
      .nav-pills a,
      .nav-pills input[type="submit"],
      .nav-pills input[type="button"],
      .nav-pills button,
      .nav-main .dd ul a {float:left; line-height:normal; font-size:100%; font-family:Verdana, sans-serif; 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+ ^/ */
      
      
      .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:#BF0B30;}
      
      .nav-pills ul a, .nav-main ul ul a {float:none !important; display:block; background:transparent;}
      
      .nav .dd a {background:transparent;}
      .nav .dd:hover {border-radius:5px 5px 0 0; background:#C20F2F;} /* BA0E2E  Xz-index:599; Xbox-shadow:0 2px 5px rgba(0,0,0,.5); */
      .nav .dd > a:hover {cursor:text;}
      .nav .dd:hover > ul {visibility:visible;}
      .nav ul {position:absolute; top:90%; right:0; margin:0; padding:0; width:auto; border-radius:5px 0 5px 5px; visibility:hidden; list-style:none; background:#C20F2F;} /*  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; */
      .nav ul a:hover, .nav ul a:focus, .nav ul ul a:hover, .nav ul ul a:focus {background:#BA0E2E !important; /* Xtext-decoration:underline; Xcursor:pointer !important; */} 

         
         
   /* system nav */
      .nav-system {position:absolute; right:25px; top:13px; z-index:11; /* needed so that main nav doesn't cover drop-down links */ color:#FFF;}
      .welcome > a {float:none; display:inline-block;}
      .link-logout > em {font-size:10px; position:relative; top:-1px; visibility:hidden;}
      .link-logout:hover > em, .link-logout:focus > em, .link-logout:active > em {visibility:visible;}



   /* 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%; Xheight:3.3em; /* 2.5em */ background:#d21033; line-height:normal;}
      .nav-main .nav > li {float:left;} /* .nav-tabs li */
      .nav-main li > a {float:left; margin:0 3px 0 0; padding:5px 0 1px; background:#c20f2f; color:#ffcdc0; text-decoration:none; border-top:3px solid #d21033; font-size:1.1em;}
      .nav-main a:hover, .nav-main a:focus, .nav-main .dd:hover > a {background:#c20f2f; 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;}
      .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:#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:bold;}
      .progress .last {background:none;}
      .progress .one-line a {line-height:3.6em;}

   /* progressbar */
      .progressbar {Xoverflow:hidden; 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; Xlist-style:none; position:relative; line-height:1.8; font-size:11px; background:transparent url(../img/breadcrumb_divider.png) no-repeat scroll 90% 50%;}
      .progressbar a {font-size:10px; cursor:text; color:#666; text-decoration:none; text-transform:uppercase; padding:10px 30px 10px 0; display:block; float:left;}
      .progressbar b {float:left; margin-right:.1em; font:3.6em/1.4 serif; color:#aaa;}
      .progressbar .no-arrow {background:none;}
      .progressbar .current a, .progressbar .current b {color:#000;}

   /* status indicators */
      .progress i, i, .icon {display:inline-block; width:16px; height:16px; overflow:hidden; background:url(../img/sprite.png) no-repeat -64px 0; *display:inline; zoom:1;}
      .progress i {position:absolute; margin:-1px 0 0 3px;}
      .one-line i {margin-top:-10px; top:50%; right:10px;}
      .progress i.good, i.good, i.checkmark {background-position:-64px 50%;}
      /*i*/.checkmark {margin:0; display:inline-block; position:static;}
      .progress i.bad, i.bad {background-position:-48px 50%;}
      .progressbar .icon {position:absolute; visibility:hidden; margin:-1px 0 0 3px;}


   /* vertical nav - stacked : horizontal nav - flat?? or row col */
      .stacked > li {display:list-item;}
        .stacked > li > a {display:block;}

   /* breadcrumbs */
      .breadcrumb {margin:1em 0;}
      .breadcrumb li {display:inline-block;}/* display:inline-block; *display:inline; zoom:1; */
      span.divider, X.divider li:after, .divider li:before {color:#999; padding:0 5px;}
      .breadcrumb a {text-decoration:none;}
         X.divider a:active {outline:0;} /* remove outline since it contains text and divider not just the text */
      X.divider li:after {content:"/"; /* adds divider. content:"\a0\a0/\a0"; */}
      X.divider li:last-child:after {content:"";} /* :last-child is less browser compatible than :first-child */

      .divider li:before {content:"/";}
      .divider li:first-child:before, .nav-links.divider li:first-child:before {content:""; padding:0;}
      
      
      /* another way of doing above */
      X.divider li + li:before {
         content:"•";
         display:inline-block;
         font-size:16px;
         font-weight:700;
         margin-left:5px;
         margin-right: 5px;
         vertical-align: -2px;
         }


/* horizontal link list */
   .nav-links li {display:inline;}
   .nav-links a {margin:0 .5em;}
   .nav-links li:first-child a {margin-left:0;}
   .nav-links.divider li:before {content:"|";}

/* 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;
}



/* firefox button */
.vid-button {
    background-color: #778343;
    border-radius: 5px 5px 5px 5px;
    display: block;
    float: left;
    margin-top: 10px;
    padding: 5px;
}
.view-button a {
    background-color: #FFFFFF;
    background-image: -webkit-linear-gradient(#FFFFFF, #CCCCCC);
    background-image: -moz-linear-gradient(#FFFFFF, #CCCCCC);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 -5px #BBBBBB inset;
    color: #666666;
    display: block;
    float: left;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 20px 12px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #FFFFFF;
}
.view-button a:hover {
    background-image: -webkit-linear-gradient(#FFFFFF, #BBBBBB);
    background-image: -moz-linear-gradient(#FFFFFF, #BBBBBB);
    box-shadow: 0 -5px #AAAAAA inset;
    color: #444444;
}
.view-button a:hover strong {
    color: #111111;
}
.view-button a:active {
    margin-top: 2px;
    padding-bottom: 10px;
    position: relative;
    box-shadow:0 -3px #999 inset;
}
.view-button a strong {
    color: #333333;
}


/* fragment link in heading */
/* http://www.zurb.com/playground/foundation-icons */
@font-face {
  font-family:'FoundationIconsGeneral';
  src:url('../fonts/foundation-icons-general/foundation-icons-general.eot');
  src:url('../fonts/foundation-icons-general.eot?#iefix') format('embedded-opentype'),
      url('../fonts/foundation-icons-general.woff') format('woff'),
      url('../fonts/foundation-icons-general.ttf') format('truetype'),
      url('../fonts/foundation-icons-general.svg#FoundationIcons[Name]') format('svg');
  font-weight:normal;
  font-style:normal;
}

/* http://www.entypo.com */
@font-face {
  font-family:'EntypoRegular';
  src:url('../fonts/entypo-webfont.eot');
  src:url('../fonts/entypo-webfont.eot?#iefix') format('embedded-opentype'),
      url('../fonts/entypo-webfont.woff') format('woff'),
      url('../fonts/entypo-webfont.ttf') format('truetype'),
      url('../fonts/entypo-webfont.svg#EntypoRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}

/* http://johncaserta.com/modern-pictograms/ */
@font-face {
  font-family:'ModernPictogramsNormal';
  src: url('../fonts/modernpics-webfont.eot');
  src: url('../fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/modernpics-webfont.woff') format('woff'),
       url('../fonts/modernpics-webfont.ttf') format('truetype'),
       url('../fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('eot'), 
       url('../fonts/fontawesome-webfont.woff') format('woff'),
       url('../fonts/fontawesome-webfont.ttf') format('truetype'), 
       url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src: url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.eot?#iefix")
format("embedded-opentype"),
url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.woff")
format("woff"),
url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.ttf")
format("truetype"),
url("//www.mozilla.org/img/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular")
format("svg");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: bold;
    src: url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.eot?#iefix")
format("embedded-opentype"),
url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.woff")
format("woff"),
url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.ttf")
format("truetype"),
url("//www.mozilla.org/img/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold")
format("svg");
}
@font-face {
    font-family: "Open Sans Light";
    font-style: normal;
    font-weight: normal;
    src: url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.eot?#iefix")
format("embedded-opentype"),
url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.woff")
format("woff"),
url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.ttf")
format("truetype"),
url("//www.mozilla.org/img/fonts/OpenSans-Light-webfont.svg#OpenSansLight")
format("svg");
}


.glyph {cursor:default; font-size:16px; line-height:1;}
.general {font-family:'FoundationIconsGeneral';}
.entypo {font-family:'EntypoRegular';}
.pictograms {font-family:'ModernPictogramsNormal';}
.fontawesome {font-family:'FontAwesome';}


.callout {} /* highlighted sections of content; for long asides or content that’s not suitable for sidebar; use for diversions/backstory; similar to msg error, msg info */
.pull-quote {}
mark, .highlight {background:#F9FDA2;}

blockquote,.indent {Xtext-indent:-1.5em;}
Xblockquote:first-line,X.indent:first-line {Xtext-indent:-1.5em;}
blockquote p,X.indent p {Xtext-indent:-1.5em;}

.opener {
    color: #B13204;
    display: block;
    float: left;
    font-family: Helvetica,Arial,Verdana,sans-serif;
    font-size: 12em;
    line-height: 0;
    margin: 105px 0 0 -180px;
    padding-right: 10px;
    position: relative;
    text-align: right;
    width: 170px;
}

.circle {
   width: 200px;
   height: 200px;
   position: relative;
   Xbackground-image: -moz-radial-gradient(45px 45px 45deg, circle cover, lightGreen 0%, green 100%, blue 5%);
   Xbackground-image: -webkit-radial-gradient(45px 45px, circle cover, lightGreen, green);
   Xbackground-image: radial-gradient(45px 45px 45deg, circle cover, lightGreen 0%, green 100%, blue 5%);
   border: 1px solid green;
   X-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
   box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
   text-align:center;
   }

.circle .number {
   line-height:2;
   font-size: 100px;
   color:green;
   text-shadow:1px 1px 0 #fff;
   } 
.circle .date-month {
   display:block;
   line-height:1;
   margin-top:-4em;
   font-size:12px;
   }
.circle {
   border-radius: 50%;
   display: inline-block;
   margin-right: 20px;
   }

/* content fragment anchor link - permalink */
.permalink {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 {opacity:1; display:inline-block; line-height:1;}

X.anchor {cursor:pointer; margin-left:-2em; padding-left:1.25em; position:absolute; left:0; top:0;}

.mini-icon-link:before {content:"a"; font-family:'FoundationIconsGeneral';}





/* highlight active tab */
            #page-id #link2 a {
               border-top:0;
               padding:5px 0 4px;
               background:#fff;
            }

            #page-id #link2 a:hover, 
            #page-id #link2 a:focus {
               cursor:text;
               padding:5px 0 4px;
            }

               #page-id #link2 a span {
                  background:#fff;
                  color:#000;
                  font-weight:900;
               }






/* CONTENT --------------------------------- */
   .content {
      clear:both;
      padding:1px 0;
      margin:18px 25px 18px;
   }


/* box */
   .box {position:relative; float:left; border:1px solid #fea; padding:18px; width:288px; min-height:33em; background:#ffd; -moz-border-radius:10px; -webkit-border-radius:10px;}
   .box h2 {position:relative; margin:0 0 9px; border-bottom:1px solid #fea; padding:3px 0; font-weight:400; font-size:1.8em; color:#d21033;}
   .box h2 img {left:-26px; position:absolute; top:4px;}
   .box input[type="password"]:focus, .box input[type="text"]:focus, .box select:focus {outline:2px solid #ffdf81;}

   X.box .row.btn {clear:both; float:left; margin-top:18px; padding-bottom:0;}
   X.box .btn-submit {min-width:0; width:auto; overflow:visible; font-weight:900; font-size:1.1em; letter-spacing:0; padding:0.5em; color:#d21033; text-transform:uppercase;}
   X.box p.note {float:right; width:75%; font-size:1em; color:#777;}

/* sidebar */
   #sidebar {overflow:auto; padding:1px 0 18px 25px;} /* overflow acts as float except you don't need to specify width; see http://www.search-this.com/2007/11/12/two-column-layout-with-a-twist/ */
   #sidebar h2 {margin:24px 0 10px; padding:0; font-size:1.5em; color:#333;}
   #sidebar h2 a {background:url(../img/calendar.gif) left center no-repeat; padding-left:24px !important; zoom:1;}
   #sidebar h3 {margin-bottom:10px;}
   #sidebar ul, #sidebar ul.links {margin:0 auto; padding-bottom:0; padding-left:13px; color:#ddd;}
   #sidebar ul.links {margin-top:.5em;}
   #sidebar p {margin:0 0 18px; padding:0; color:#555;}
   #sidebar p.links {margin-bottom:0;}



/* FOOTER --------------------------------- */
   .footer {
      clear:both;
      position:relative;
      margin:0 25px;
      border-top:1px solid #eee;
      padding:0 0 1px;
      background:transparent;
      color:#999;
   }

      .footer p {
         margin:1em 160px 0 5px;
         font-size:1em;
         line-height:1.0;
      }

         .link-logo {
            display:block;
            position:absolute;
            right:5px;
            top:0;
            width:150px;
            height:40px;
            margin-top:10px;
            padding:0;
         }



/* ---------------------------------
   CONTENT FRAGMENTS
   --------------------------------- */


/* MESSAGES --------------------------------- */
/* status messages */
   .msg {position:relative; clear:both; margin:18px 0; padding:9px 18px; border:1px solid #000; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}

   .msg-success {color:#286F14; background:#dfa; border-color:#ce9;} /* color:#390; */
   .msg-error {color:#a00; background:#fff7ee; border-color:#c00 #fcc #fcc #c00;} /* color:#d21033; */
   .msg.msg-error {border-color:#fcc;}
   .msg-info,.msg-help {color:#008; background:#D1EFEF /*#eff*/; border-color:#B5DFDF/*#e8f9f9*/;} /* color:#008; */

/* message heading */
   .msg h2 {margin:0; /* Xopacity:.75; Xposition:relative; */}

/* message type icons */
   .msg .close {float:right; position:relative; right:-5px; z-index:1;}
   .close {text-decoration:none; font-size:20px; font-weight:bold; text-shadow:0 -1px 0 #777; color:#ccc; cursor:pointer;}
   .close:visited {color:#ccc;}
   .close:visited:hover {color:#000;}

   .msg-success:before, .msg-error:before, .msg-info:before, .msg-help:before {content:""; position:absolute; left:-8px; width:16px; height:3.5em; background:url(../img/sprite.png) no-repeat 0 50%;} /* width is based on width of icon, height is based on line-height of containing element (h2) in order to vertically center */
   .msg-error:before {background-position:-16px 50%;}
   .msg-info:before {background-position:-32px 50%;}
   .msg-help:before {background-position:-80px 50%;}
 
/* message text */
   .msg ul {list-style-position:inside;}

/* inline messages */
   p.msg-success, p.msg-error, p.msg-info, p.msg-help {position:relative; border-radius:8px; padding: 0.5em 0.5em 0.5em 2.5em;}
   p.msg-success:before, p.msg-error:before, p.msg-info:before, p.msg-help:before {height:17px; /* 1.636363em; */ left:8px;}



/* FORMS --------------------------------- */
   form {display:inline;}
      fieldset {margin:2em 0; border:1px solid #eee; border-width:1px 0 0; padding:10px;}
         legend {margin:1em 0;}
            legend span {display:block; font-size:1.3em; font-weight:900; color:#d21033; text-transform:uppercase;}

         fieldset fieldset {margin:1.5em 0; border-width:1px; padding:1em; background:#fafafa;}
            fieldset fieldset legend {font-size:1.3em; margin:0 0 0 -5px; padding:0 5px;}
               fieldset fieldset legend span {font-size:1em; color:#000; text-transform:capitalize;}

      label {cursor:pointer; font-size:1.1em; color:#555;}
         label em {color:#d21033;}
      input[type="text"], input[type="password"], select, textarea {border-width:1px; font-family:Verdana, sans-serif; font-size:1.1em; color:#000;}
      input[type="text"], input[type="password"], textarea, option {padding:3px;}

      option {font-family:Verdana, sans-serif; font-size:1em; color:#000; padding:2px 0;}
      input[type="text"], input[type="password"] {min-height:1.5em;}

      * html select {font:normal 400 1.1em/1.0 Verdana, sans-serif; height:1.5em}
         optgroup {font-weight:900; font-style:normal; color:#777;}
            optgroup option {padding-left:1em;}

      textarea {line-height:1.5;}
      xinput.btn-submit {border-width:2px;}


/* vertically aligned form
   TODO: combine styles
   DEPRECATED:
   5/22/07 - fm-v div.row select, .fm-v div.row textarea {float:left; clear:both;}  can be combined with .fm-v div.row input ???
*/
   .fm-v div.row {float:left; margin:0; padding:.5em 0; width:100%;}
      .fm-v div.row label {float:left; width:100%; line-height:1.5;}
      .fm-v div.row input, .fm-v div.row select, .fm-v div.row textarea {float:left; clear:left;}

      .fm-v div.row input.check {float:left; clear:left; margin:0 .5em 0 0; border:0; width:1.3em; height:1.3em; position:relative; top:.1em;}
      .fm-v div.row label.check {float:left; width:auto;}

      .fm-v div.row input.radio {float:left; clear:left; margin:0 .5em 0 0; border:0; width:1.3em; height:1.3em; position:relative; top:.1em;}
      .fm-v div.row label.radio {float:left; width:auto;}

      .fm-v div.row span.msg-error {float:left; display:block; position:relative; top:.2em; margin:0 0 0 1em; padding:0 0 0 2em; font-size:1.1em; line-height:1.55; background:url(../img/error-s.gif) left top no-repeat; color:#d21033;}
      .fm-v span.msg-error {float:left; display:block; Xmargin:1em 0; padding:0 0 0 2em; font-size:1.1em; line-height:1.55; background:url(../img/error-s.gif) left top no-repeat; color:#d21033;}
      .fm-v div.row input.btn-submit {display:block; margin:0;} /* float:left; clear:left; margin-bottom:0; or display:block */

/* horizontally aligned form */
   .fm-h div.row {float:left; margin:0; padding:.5em 0; width:100%;}
      .fm-h div.row label {float:left; clear:left; margin-right:.5em; width:15em; text-align:right; line-height:1.5;} /* display:block; */
      .fm-h div.row input {float:left; clear:right;} /* margin-bottom:1em; */

      .fm-h div.row.check label {clear:none; width:auto; margin-right:1.5em;}
      .fm-h div.row.check input {position:relative; top:-2px;}
      .fm-h div.row input.btn-submit {clear:both; display:block; text-align:center;} /* float:left; clear:left; margin-bottom:0; or display block */


/* highlight errors */
   .error {background:#ffefef;}
   input.error, select.error, textarea.error {background:#FFEFEF; color:#d21033;} /* border-color:#d21033; */

/* mark as required */
   .required {background:#ffd;}
   abbr.required  {border:0; color:#d21033; background:transparent;}
   Xinput.required, Xselect.required, Xtextarea.required {border-width:1px;}




/* 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 5px -5px #bbb; 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:900; 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;}



/* TABLES --------------------------------- */
   table {margin:0 0 18px; border-collapse:collapse; border-spacing:0; empty-cells:show; font-size:1.2em; background:#fff;} /* old browsers may need 'cellspacing="0"' in the HTML http://stackoverflow.com/questions/339923/how-to-set-cellpadding-cellspacing-in-css */
      caption, th, td {text-align:left;}
      caption {padding:5px 7px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; Xfont:900 1.2em/1.5 Verdana, Arial, Helvetica, sans-serif;}
      th, td {padding:5px 7px;}
      th {white-space:nowrap;}

   table.td-ar td, table.th-ar th, table.thead-ar thead th, table.tbody-th-ar tbody th, table.tfoot-th-ar tfoot th, table.tfoot-td-ar tfoot td {text-align:right;}
   table.td-ac td, table.th-ac th, table.thead-ac thead th, table.tbody-th-ac tbody th, table.tfoot-th-ac tfoot th, table.tfoot-td-ac tfoot td {text-align:center;}
   table.full {width:100%;}
   table thead th {font-weight:900; border-bottom:1px solid #ccc;}

   Xtable tr.alt td, Xtable tr.alt th {background:#fafafa;}
   
   table tfoot th, table tfoot td {Xfont-weight:900; border-top:1px solid #ccc;}

/*    table row highlighting (does not work in IE - JavaScript workaround) */
      table.highlight {background:transparent;}
      table.highlight tbody tr:hover td, table.highlight tbody tr:hover th, table.highlight tbody tr.over td {background:#ffc !important;} /* ffc */

/*    zebra stripe */
      table.striped tbody tr:nth-child(even), table.striped tr.alt {background-color:#f5f5f5;}

/*    lined */
      table.lined tbody td, table.lined tbody th {border-top:1px solid #eee;}

/*    data tables - search results, status, etc. */
      table.data {margin-bottom:2em; margin-left:1px; /* :BUG: Firefox expands the width of table with border by an extra 1px and moves it that distance to the left */ border:1px solid #ccc; border-width:1px 0 0 1px;}
      table.data caption {border:1px solid #999; text-align:left; background:#999; color:#fff;}
      table.data thead th, Xtable.data thead tr:hover th {background:#ddd; color:#666;}
      table.data th, 
      table.data td {border:1px solid #ccc; border-width:0 1px 1px 0;}
      Xtable.data tr.alt td {background:#f5f5f5;}



/* PAGES TYPES --------------------------------- */
/* logout & unavailable */
   #pg-logout .info, #pg-unavailable .info {background:#fafafa; border:1px solid #eee;}
   #pg-logout .info p, #pg-unavailable .info p {color:#555; margin:9px 0;}
   #pg-logout .info h2, #pg-unavailable .info h2 {color:#000;}
   #pg-logout .info ul, #pg-unavailable .info ul {color:#ccc;}
   #pg-logout .info h3, #pg-unavailable .info h3 {color:#333; font-size:1.5em; margin-bottom:0.5em;}
   #pg-logout .info h3 img, #pg-unavailable .info h3 img {float:left; margin-right:10px;}

/* login */
   #pg-login .box input {width:260px; font-size:15px; letter-spacing:5px;}
   #pg-login .box .btn-submit {min-width:0; width:auto; overflow:visible; font-weight:900; font-size:1.1em; letter-spacing:0; padding:0.5em; color:#d21033; text-transform:uppercase;}
   #pg-login .box #hours {clear:both;}
   #pg-login .box #hours h3 {margin-top:10px; margin-bottom:.5em; float:left; width:100%; line-height:1.2; font-size:12px;}
   #pg-login .box #hours p {font-size:1em; color:#777; margin:0; clear:left;}


   #pac {display:block; margin:18px 0 0; padding:0; width:100%; background:#fff;}
      #pac .box {float:left; margin:0 -296px 0 0; border:1px solid #f2f2f2; padding:18px; width:258px; min-height:18em; background:#ffd;}
         #pac .box h2 {margin-top:0; margin-bottom:18px; border-bottom:1px solid #eee; padding:3px 0; font-weight:400; font-size:1.8em; text-transform:capitalize; color:#999;}
         #pac .box h2 acronym {border:0;}
         #pac .box p {margin-bottom:11px;}
         #pac .box label {color:#333;}
         #pac .box input {font-size:15px;letter-spacing:5px; width:240px;}
         #pac .box .row.btn {margin-top:10px; padding-bottom:0; /* xpadding-top:10px; xborder-top:1px solid #eee; */}
         #pac .box input.btn-submit {font-size:11px;letter-spacing:0; width:auto;}
         #pac ul {margin-left:0; margin-bottom:0; padding-bottom:0; padding-left:13px; line-height:1.5; font-size:1em; list-style:disc;}

   #pac p.note {display:inline; color:#777; font-size:1em;border-top:1px solid #f2f2f2;clear:left; margin:18px -18px -18px; padding:12px 18px; background:#fafafa; float:left; width:100%; clear:left;}

      #pac label acronym {border:0; color:#d21033;}
      #pac acronym.required {color:#d21033;}

      #pac #sidebar {float:left; margin-left:296px; padding:0 15px;}
         #pac #sidebar h2 {margin:24px 0 10px; padding:0; font-size:1.5em; color:#333;}
         #pac #sidebar ul {color:#555; margin-bottom:0;}
         #pac #sidebar p {margin:0 0 18px; padding:0; color:#555;}



/* base */
   .btn, .btn:visited {
      white-space:nowrap;
      position:relative; 
      display:inline-block;
      border:0;
      border-bottom:1px solid rgba(0,0,0,0.25);
      padding:3px 7px;
      font:400 11px verdana,sans-serif;
      color:#fff;
      text-decoration:none;
      background:#999;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border-radius:5px;
      -moz-box-shadow:0 1px 3px rgba(0,0,0,0.25); 
      -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);
      box-shadow:0 1px 3px rgba(0,0,0,0.25);
      text-shadow:0 -1px 1px rgba(0,0,0,.25);
      cursor:pointer;

      /* 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 {background-color:#888; color:#fff; text-shadow:none;}
   .btn:active {top:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}


/* inactive */
   .inactive, .inactive:visited, .inactive:hover, .inactive:focus, .inactive:active {background:#ccc; color:#eee; position:relative; top:0; text-shadow:none; cursor:text; cursor:not-allowed;}

/* delete - <a> */
   a.delete:before {content:"\00D7\a0"; Xfont-size:1.5em; font-weight:bold;}
   a.delete, a.delete:visited {color:#555; padding:4px 7px 3px; text-transform:uppercase; background-color:#eee; font-size:9px; font-family:verdana,sans-serif; border-bottom:1px solid #eee; text-shadow:0 1px 1px rgba(255,255,255,1);-moz-box-shadow:0 1px 0 rgba(0,0,0,0.25); -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.25); box-shadow:0 1px 0 rgba(0,0,0,0.25);}
   a.delete:hover, a.delete:focus {background-color:#ddd; color:#900;}

/* save & continue - <a> */
   .btn-primary, .btn-primary:visited, .btn-secondary, .btn-secondary:visited {float:left; background:#d21034; Xmargin:25px 0; padding:5px 10px; letter-spacing:1px; text-transform:uppercase; font-size:13px; -moz-box-shadow:0 2px 2px rgba(0,0,0,0.3); -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3); box-shadow:0 2px 2px rgba(0,0,0,0.3); margin-right:2px;}
   .back:before {content:"\25C0\a0";}
   .next:after {content:"\a0\25B6";}
   .btn-primary:hover, .btn-primary:focus {background-color:#BF0B30;}
   .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), 1px 1px 0 rgba(255,255,255,.25);}

   .btn-secondary, .btn-secondary:visited {float:left; background:#eee; color:#666; text-shadow:1px 1px 0 #fff; margin-right:10px; margin-left:2px; border-bottom:1px solid #bbb; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2); box-shadow:0 1px 3px rgba(0,0,0,0.2);}
   .btn-secondary:hover, .btn-secondary:focus {background-color:#f2f2f2; color:#333; text-shadow:1px 1px 0 #fff;}
   .btn-secondary:active {color:#666; -moz-box-shadow:0 0 1px rgba(0,0,0,0.1); -webkit-box-shadow:0 0 1px rgba(0,0,0,0.1); box-shadow:0 0 1px rgba(0,0,0,0.1); text-shadow:1px 1px 0 #fff;}

/* contextual overrides */
   .activitiesContainer .btn, .collegeContainer .btn, .courseContainer .btn {margin-top:10px;}
    table.list a.delete {margin-top:0;} /* cancel the margin-top:10px; from line above */


.icon-help {
    background: url("../img/sprite.png") no-repeat scroll 100% 50% transparent;
    text-indent:100%;
    border-radius: 8px;
    color:red;
    overflow:hidden;
    cursor:pointer;
    display:inline-block;
    font-size:13px;
    font-weight:bold;
    height:16px;
    width:16px;
    line-height:16px;
    position:relative;
    text-align:center;
}
.tooltip {
  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;
  -moz-box-shadow:inset 0 -10px 10px -5px #dcdcdc, 3px 3px 5px 0 rgba(0,0,0,.1);
  -webkit-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);
}
/* tooltip arrow */
X.tooltip:before {border-color:transparent #3D6199 transparent transparent; border-right:6px solid #3D6199; border-style:solid; border-width:6px 6px 6px 0px; content:""; display:block; height:0; width:0; line-height:0; position:absolute; top:50%; margin-top:-6px; left:-6px;}

@media print {
 
 
 
}