/* UC Berkeley's bSpace Skin for Sakai CLE 2.9.x
 * based on the neo-default Sakai CLE skin
 * copyright 2013, Regents of the University of California
 *
 * Changes:
 * Numberous css changes to support UC Berkeley brand colors
 * Font icons from Font Awesome 3.0.2 by Dave Gandy - http://fortawesome.github.com/Font-Awesome
 * The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
 * Font Awesome CSS, LESS, and SASS files are licensed under the MIT License
 */

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=3.0.1');
  src: url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* PART 1 - MAIN LAYOUT BLOCKS
/* general body - used by main portal document   */
/* BEGIN bSpace customization */
body.portalBody {
    width: 100%;
    padding: 0;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: .8em;
    margin: 0;
    background-repeat: repeat-x;
    -webkit-font-smoothing: antialiased;
}
/* END bSpace customization */
 /* outer wrapper for portal content (decorative - child is #portalContainer )  */
#portalOuterContainer {}
/* inner wrapper for portal content (decorative - children are #header #container and #footer )  */
#portalContainer {}
/* wrapper for masthead and site navigation. Two possible states - not logged in (#headerMin), logged in (#headerMax)
 * this allows you to provide different user experiences for both states */
#headerMax, #headerMin {
    width: 100%
}
/* accessibility links wrapper   */
#skipNav {}
/* wrapper for site content (includes as children #toolMenuWrap,#content and #footer)  */
#container {
    background: #fff;
}
/* wrapper for #toolMenu - children are #worsiteLogo,#toolMenu  */
#toolMenuWrap {
    float: left;
    width: 12em;
    color: #000;
    text-align: right;
    padding: 0;
}
#toolMenuWrap #toggler {
    display: block;
    float: right;
}
/* BEGIN bSpace customization */
.toolMenuIcon {
    padding: 0;
}
/* wrapper for site content (portlets) - children can be #col1 or #col1of2 and #col2of2 depending in the number of columns  */
#content {
    padding: .8em 0 0 13.2em;
}
#col1of2 .portletTitleWrap, #col2of2 .portletTitleWrap {
    width: 98.5%;
    border-bottom: 2px solid #4F758B;
}
#col1of2 .portletMainWrap, #col2of2 .portletMainWrap {
    width: 98.5%;
    margin-bottom: .5em;
}
#col1 .portletTitleWrap {
    width: 99%;
    border-bottom: 2px solid #4F758B !important;
}
#col1 .portletMainWrap {
    width: 99%
}
/* wrapper for footer blocks  */
#footer {
    clear: both;
    padding: 0;
    text-align: center;
    width: 100%;
    margin: 0 auto 20px auto;
}
#footerLinks {
    text-align: center;
    font-size: .9em;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: auto;
}
/* END bSpace customization */
#footerLinks li {
    margin: 0;
    border-left: 1px solid #ccc;
    display: inline;
    list-style-type: none;
    padding: 0;
}
#footerLinks li:first-child {
    border: none
}

/* PART 2 - HEADER BLOCKS (BRANDING,LOGIN) */
/* BEGIN bSpace customization */
#headerMax {
    background: #274B82;
    border-bottom: 3px solid #F2A900;
}

#headerMin {
    overflow: hidden;
    background: #274B82 url(images/banner_bspace.gif) 253px top no-repeat;
    border-bottom: 3px solid #F2A900;
}

/* END bSpace customization */
/* outermost block containing mast head elements and site navigation. Block also has a class = site type name, in case you need to 
 * do something special to either mast head elements or site navigation depending on the site type (i.e. a site type='collab') may get a banner with a 
 * graphic denoting so: .collaboration .mastHead .mastBanner{url to the 'collaboration' image}*/
#siteNavWrapper {}
/* wrapper for mast head elements - children are 2 blocks - #mastLogo,#mastBanner
 * in this skin it and the children are hidden, The gradient is specified above, the logo is specified
 * as a background image in "ul.topnav" */
#mastHead {
    clear: both;
    display: block;
}
/* container wrapping branding images - portal outputs one /library/skin/<skin name>/images/logo_inst.gif
that can be used or hidden,can also use a background: url(images/<image name>.<ext>) in this block,or both superimposing them  */
#mastLogo {
    display: none;
}
#mastLogo img {
    display: none
}
/* show #mastLogo if the user is not logged in so that we can display the logo in the usual place (the logo
in this skin is rendered via ul.topnav, which a anon user does not see)*/
/* BEGIN bSpace customization */
#headerMin #mastLogo {
    display: block;
    background: transparent url(images/logo_bspace_lrg.gif) left top no-repeat;
    float: left;
    width: 227px;
    height: 89px;
}
/* END bSpace customization */
/* another container wrapping branding images - portal outputs one /library/skin/<skin name>/images/banner_inst.gif
that can be used or hidden,can also use a background: url(images/<image name>.<ext>) in this block,or both superimposing them  */
#mastBanner {
    display: none;
}
#mastBanner img {
    display: none;
}
/* #mastLogin is a sibling of #mastLogo and #mastBanner when user is not logged in. It is located at #headerMax > #siteNavWrapper > .siteNavWrap > #siteNav when 
 * a user is logged in. It is a container wrapping, depending on Sakai settings: 1) #loginForm:  a login form,2) a login link for CAS,3) a logout link, 4) a link to open a menu with user
 *  centered info and controls, as well as 5) a role switching control set
*/
/* BEGIN bSpace customization */
#mastLogin {
    float: right;
    padding: 20px 20px 10px 0;
}
/* END bSpace customization */
/* #mastLogin #loginForm is the form for login - contains children #eid #pw #submit as well as labels for these inputs*/
#loginForm {
    color: #fff;
}
#loginForm label {
    padding: 0 6px;
    color: #fff;
}
#eid, #pw {
    border: 1px solid #ccc;
    padding: 3px;
    margin-right: 15px;
    width: 7em;
}
/* #submit is rendered like the logout link, so defined there, instead of here,
 * display: block there overriden here */
#submit {display: inline !important;}
#submit:hover {}
/* #mastLogin #loginLinks: block for login/logout links and  link to the user centered menu */
#loginLinks {
    float: right;
    color: #aaa;
    margin: 0;
}
/* login links for CAS,logout link  */
/* BEGIN bSpace customization */
#loginLinks a, #loginLinks a:visited {
    color: #003A70;
    float: right;
}
/* #loginLink1 is the "login/logout" link in a CAS setup, #loginLink2 is the secondary CAS link: login for
guests, for example */
#loginLink1, #loginLink2 {
    text-decoration: none;
}
#loginLink2 {
    margin: 0 5px;
}
/* main rendering for all links and the submit button */
#loginLink1, #loginLink2, form#loginForm input#submit {
    display: block;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    background: #f6f6f5 !important;
    background: -moz-linear-gradient(top, #f6f6f5 0%, #e0e0e0 93%, #e0e0e0 97%, #e9e9e9 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f5), color-stop(93%,#e0e0e0), color-stop(97%,#e0e0e0), color-stop(100%,#e9e9e9)) !important;
    background: -webkit-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -o-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -ms-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    border: 1px solid #E0E3E5 !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #003A70 !important;
}

#headerMin #loginLink1, #headerMin #loginLink2 {
    margin-top: -2px;
}

#loginLink1:hover, #loginLink2:hover, form#loginForm input#submit:hover {
    background: #FDF1B2 !important;
    background: -moz-linear-gradient(top, #FDF1B2 0%, #FDDE7D 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDF1B2), color-stop(100%,#F9E7AF)) !important;
    background: -webkit-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: -o-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: -ms-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    border: 1px solid #CECECE !important;
}
/*make secondary CAS login link (ie. Guest Login) different*/
#loginLink2, #loginLink2:hover {
    background: none;
    border: none;
}
#loginLink2:hover  {
    text-decoration: underline;
}
/* container for the link to open the user menu, and the menu itself */
#loginLinks .topnav {
    float: left;
    display: block;
}
#loginLinks .nav-menu > span {
    display: none;
}
#loginLinks .nav-menu > span.drop {
    display: block !important;
}

/* link to toggle the user info and controls */
#mastLogin span.drop {
    cursor: pointer;
    background: transparent url(/library/image/silk/user.png) 0 0 no-repeat;
    margin: 4px 10px 0 10px;
    width: 20px;
    height: 20px;
    position: relative !important;
    color: #FFF;
}

#mastLogin span.drop:before {
    content: "\f013"; /* icon-cog (&#xf013;) */
}
/* END bSpace customization */
/* menu for user actions (could be one of several:link to profile, preferences, add a new site, view tutorial, other)*/
#mastLogin ul.subnav {
    list-style: none;
    position: absolute;
    left: auto !important;
    right: 2px;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    width: 100%;
    white-space: nowrap;
    z-index: 100;
}
#mastLogin ul.subnav li.submenuitem {
    margin: 0;
    display: block;
    height:100%;
    overflow: hidden;
    text-align: left;
}
/* link items in above menu (some attr/vals are same as for site tool sub-menu, and submenus in othe rsites tray so both are doubled up here)*/
ul.nav-submenu li.submenuitem a, #mastLogin li.submenuitem a, #otherSiteTools li a {
    background-position: 3px center !important;
    background-repeat: no-repeat !important;
    outline: none;
    text-decoration: none;
    width: 180px;
    padding-left: 25px;
    font-weight: normal;
    color: #444 !important;
    padding: 7px 6px 6px 25px !important;
    font-size: 1em !important;
}
/* BEGIN bSpace customization */
ul.nav-submenu li.submenuitem a:hover, #mastLogin li.submenuitem a:hover, #otherSiteTools li a:hover {
    color:#FFF !important;
}

/* icons for specific menu items */
#mastLogin ul.subnav li.submenuitem a.submenuitem-new-site:before {
    content: "\f0fe"; /* icon-plus-sign-alt (&#xf0fe;) */
}
#mastLogin ul.subnav li.submenuitem a.submenuitem-profile:before {
    content: "\f007"; /* icon-user (&#xf007;) */
}
#mastLogin ul.subnav li.submenuitem a.submenuitem-prefs:before {
    content: "\f013"; /* icon-cog (&#xf013;) */
}
#mastLogin ul.subnav li.submenuitem a.submenuitem-tutorial:before {
    content: "\f059"; /* icon-question-sign */
}
/* END bSpace customization */
#mastLogin ul.subnav li.submenuitem:last-child a {
    border-bottom: none
}
/* #mastLogin can also contain controls to toggle in/out of different roles #roleSwitch is the container for: a selct menu, links */
#siteNav #roleSwitch {
    float: left;
    padding: 0 5px;
}
#siteNav #roleSwitch label, #siteNav #roleSwitch a#roleSwitchAnchor {
    text-decoration: none;
    color: #fff;
    padding: 0 5px;
    font-weight: bold;
}

#toolMenuWrap #roleSwitch {
    background: #FDF1B2;
    margin-top: 20px;
    padding: 10px 10px 10px 0;
    border: 1px solid #CCC;
    border-width: 1px 1px 1px 0 !important;
    -moz-border-radius: 0 4px 4px 0 !important;
    -webkit-border-radius: 0 4px 4px 0 !important;
    border-radius: 0 4px 4px 0 !important;
    text-align: center;
}

#toolMenuWrap #roleSwitch label, #toolMenuWrap #roleSwitch a#roleSwitchAnchor {
    font-weight: bolder;
    text-decoration: none;
    padding: 0 5px;
}

#siteNav #roleSwitch a#roleSwitchAnchor:hover, #toolMenuWrap #roleSwitch a#roleSwitchAnchor:hover {
    text-decoration: underline;
}

#roleSwitch select {
    font-size: 0.9em;
}

/* BEGIN bSpace LogIn Customization */
/*container wrapping,depending on Sakai settings:1) a login form,2) a login link for CAS,3) a logout link*/
#headerMin #mastLogin {
    background-color: white;
    float: right;
    width: 190px;
    margin-right: 2em;
    padding: 0.8em 1em 0;
    -moz-border-radius: 0 0 12px 12px;
    -webkit-border-radius: 0 0 12px 12px;
    border-radius: 0 0 12px 12px;
}

/*the anchor for the login link for CAS above can be an image - treated here*/
#headerMin #mastLogin img {
    margin-top: 0;
}

/*block for login/logout links */

#headerMin #loginLinks #loginTitle {
    position: relative;
    height: 24px;
    padding-left: 0.3em;
    overflow: hidden;
    clear: both;
    font-weight: bold;
    color: #264C83;
}

#headerMin #loginLinks a, #headerMin #loginLinks a:visited, #headerMin #loginLinks a:active{
    display: block;
    float: left;
    width: 78px;
    margin-bottom: 0.8em;
    padding: 4px;
    font-weight: bold;
    color: #264C83;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #E3E8EF;
    border-radius: 4px;
}

/* Login Help button and rollover */

#headerMin #loginLinks a#login-help {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    margin: -1px 0 0;
    width: 24px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-position: top left;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #444;
}

#headerMin #loginLinks a#login-help:before {
    content: "\f059"; /* icon-question-sign */
}

#headerMin #loginLinks a#login-help:hover, #headerMin #loginLinks a#login-help:focus  {
    color: #0064CD;
}

#headerMin #loginLinks a#login-help span {
    position: absolute;
    left: -2000px;
}

/*main CAS link*/
#headerMin #loginLink1 {
    /*
font-size: 110%;
*/
}

/*secondary CAS link*/
#headerMin #loginLink2 {
    margin-left: 6px
    /*
font-size: 90%;
*/
}
/* END bSpace LogIn customizations */
/* PART 3 - SITE NAVIGATION - children of #siteNavWrapper
/* outer wrapper for the site navigation blocks and login and user menu for logged in users - it will also have a class with a value equiv to the site type, so any of 
 * the childen can be styled depending on the site type (course, project, etc). */
.siteNavWrap {
    width: 100%;
    font-size: 100%;
    line-height: normal;
    padding: 0;
}
/* wrapper for the site links, link to the 'more sites' tray, logout controls - children are #mastLogin and #linkNav*/
#siteNav {}
/* wrapper for the site link list and link to the 'more sites' tray - since the logo is displayed here on left, it is padded.*/
#linkNav {
    display: block;
    padding-right: 300px;
}
/* site tab navigation: a list right padding makes room for logo and matches width of tool menu
 * if you do not have a logo you can eliminate it to save some room */
/* BEGIN bSpace customization */
#linkNav ul.topnav {
    list-style: none;
    padding: 20px 0 6px 192px;
    margin: 0;
    width: 100%;
    background: transparent url(images/logo_bspace.png) 4px 4px no-repeat;
    -webkit-font-smoothing: auto;
}
/* the individual containers for the site links, tool menu control, tool menu*/
ul.topnav li {
    display: inline-block;
    /* Note: IE 7 hack and IE 8 compat mode*/
    *display: inline;
    *float: left;
    margin: 0;
    padding: 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
    font-weight: 500;
    border: 1px solid transparent;
}
/* hover treatment for site links*/
ul.topnav li.nav-menu:hover, ul.topnav li.more-tab:hover {
    border: 1px solid #ACACAC;
    background: #224272;
    background: -moz-linear-gradient(top, #5E88E2 0%, #224272 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5E88E2), color-stop(100%,#224272));
    background: -webkit-linear-gradient(top, #5E88E2 0%,#224272 100%);
    background: -o-linear-gradient(top, #5E88E2 0%,#224272 100%);
    background: -ms-linear-gradient(top, #5E88E2 0%,#224272 100%);
    background: linear-gradient(top, #5E88E2 0%,#224272 100%);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

ul.topnav li.nav-menu:hover > a, ul.topnav li.more-tab:hover > a {
    color: #FFF;
}
/* current site control rendering */
 ul.topnav li.nav-selected {
    background: #F2A900;
    background: -moz-linear-gradient(top, #ffd65e 0%, #F2A900 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#F2A900));
    background: -webkit-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: -o-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: -ms-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    border: 1px solid transparent;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

ul.topnav li.nav-selected a {
    color: #003A70;
    font-weight: bold;
}

/* site submenu trigger */
ul.topnav li span.drop {
    width: 17px;
    margin-top: 1px;
    margin-right: 7px;
    height: 23px;
    float: left;
    background: url(images/subnav_btn.png) no-repeat center -3px;
}
/* site submenu trigger hover, move the subnav_btn.png sprite up*/
ul.topnav li span.subhover {
    background-position: center -38px;
    cursor: pointer;
}
/* The menu displayed for each site link, contains the tools of the site. Also used
in constructing menu for user links in #mastLogin, as well as the submenus for the sites in the "more sites" tray */ 
ul.topnav li ul.subnav, #mastLogin ul.subnav, #otherSiteTools {
    list-style: none;
    position: absolute;
    top: 26px;
    background: #f3f3f3;
    margin: 0;
    padding: 0 !important;
    display: none;
    float: left;
    width: 210px;
    border: 1px solid #ccc;
    border-width: 1px 1px 0 1px;
    z-index: 100;
    -moz-box-shadow: 0 0 8px #444;
    -webkit-box-shadow: 0 0 8px #444;
    box-shadow: 0 0 8px #444;
}
#mastLogin ul.subnav {
    top: 40px;
    right: 70px;
}
/* each tool in the above menu as well as the one on #mastLogin and the submenus in the other sites tray */
ul.topnav li ul.subnav li, #mastLogin ul.subnav li, .otherSiteTool {
    position: relative;
    background: #FDF1B2;
    border: 1px solid #ccc;
    border-width: 0 0 1px 0;
    width: 100%;
}

#mastLogin ul.subnav li[role^="menuitem"] {
    background: #f6f6f5 !important;
    background: -moz-linear-gradient(top, #f6f6f5 0%, #e0e0e0 93%, #e0e0e0 97%, #e9e9e9 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f5), color-stop(93%,#e0e0e0), color-stop(97%,#e0e0e0), color-stop(100%,#e9e9e9)) !important;
    background: -webkit-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -o-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -ms-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    color: #003A70 !important;
}
#mastLogin ul.subnav li[role^="menuitem"] span {
    display: block;
    text-decoration: none;
    height: 1.4em;
    padding: 4px 0 0 6px;
}
/* some overrides for the menu in #mastLogin */
#mastLogin ul.subnav li {
    border: none;
    outline: 1px solid #ccc;
}

/* treatment for focus and hover in the site and user sub-menus, as well as submenus in other sites */
ul.topnav li ul.subnav li:hover, ul.topnav li ul.subnav li a:focus,
    #mastLogin li.submenuitem:hover, #mastLogin ul.subnav li.submenuitem a:focus, #otherSiteTools li:hover {
    text-decoration: none;
    color: #FFF;
    background: #274B82;
}
/* link to site */
ul.topnav li a {
    padding: 5px 7px 5px 8px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    float: left;
    display: block;
}
/* Note:not needed? tool submenu for sites in site list
span.topnav li ul.subnav li {
    margin: 0;
    padding: 0;
    clear: both;
    width: 210px;
}
*/
/* treatment of a tool that has been hidden via Page Order tool - below takes care of tools in submenus as well as in the site tool menu */
li.submenuitem span.hidden, #toolMenu li a.hidden {
    font-style: italic;
    opacity: 0.7;
}
/* "More sites" link container, link and image background container */
li.more-tab {
    padding-right: 7px !important
}
li.more-tab a {
    background: transparent url(images/subnav_btn_more.png)  right -4px no-repeat;
    display: block;
    height: 16px;
    padding: 0;
    margin: 0;
}
/* END bSpace customization */
li.more-tab a span {
    padding-right: 15px
}
/* container for tray that opens when "More sites" is activated, both the default and the categorized one when portal.use.dhtml.more=true in sak.props. */
#selectSite {
    background: #f3f3f3;
    border-width: 0;
    border: 1px solid #888;
    color: #000;
    left: 10%;
    line-height: 1.5em;
    padding: 0 0 15px 0;
    position: absolute;
    right: 4px;
    top: 0;
    vertical-align: middle;
    width: 80%;
    z-index: 9999;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    box-shadow: 0 0 10px #555;
    -moz-box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;
}
/* mask that gets applied to the portal when "More sites" is triggered, making the tray modal sort of*/
#portalMask {
    background-color: #6781A8;
    position: absolute;
    height: 100%;
    z-index: 9000;
    top: 0;
    left: 0;
    filter: alpha(opacity=50);
    opacity: 0.50;
}
/* wrapper and menu in the "Other Sites" tray (View all Sites, Add site, Preferences [tab management])*/
#otherSiteMenuWrap {
    margin: 5px;
    padding: 5px;
    width: auto;
    height: 30px;
}
#otherSiteMenuWrap * {
    vertical-align: middle
}
ul#otherSitesMenu {
    border-bottom: 1px solid #aaa;
    font-size: .9em;
    text-align: right;
}
/* BEGIN bSpace customization */
/* style the menu for the tray - since the publish site link is the same, doubled up here */ 
ul#otherSitesMenu li, #siteStatus a {
    width: auto;
    font-size: 1.1em;
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 4px 6px;
    text-align: center;
    text-decoration: none;
    background: #f6f6f5 !important;
    background: -moz-linear-gradient(top, #f6f6f5 0%, #e0e0e0 93%, #e0e0e0 97%, #e9e9e9 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f5), color-stop(93%,#e0e0e0), color-stop(97%,#e0e0e0), color-stop(100%,#e9e9e9)) !important;
    background: -webkit-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -o-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: -ms-linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    background: linear-gradient(top, #f6f6f5 0%,#e0e0e0 93%,#e0e0e0 97%,#e9e9e9 100%) !important;
    border: 1px solid #E0E3E5 !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#otherSitesMenu li a, #otherSitesMenu li a:visited {
    display: block;
    padding: 3px;
    text-decoration: none;
    color: #444;
    font-weight: bold;
}
/* since the publish site link is the same, doubled up here */ 
#otherSitesMenu li a:hover, #siteStatus a:hover, #siteStatus a:focus {
    color: #003A70;
}
/* END bSpace customization */
/*container and control to close the "Other sites tray"*/
#otherSitesMenu #otherSiteCloseW {
    margin-left: 10px
}
#otherSitesMenu #otherSiteCloseW a {
    color: #c00;
}
/* the lists in the tray (sites and controls): two types, depending on whether portal.use.dhtml.more=true in sak.props*/
ul#otherSiteList {
    list-style: none;
    margin: 5px;
    padding: 0;
    clear: both;
    float: left;
    font-size: .9em;
    max-height: 315px;
    overflow: auto;
}
ul.otherSitesCategorList {
    float:none;
    clear: both;
    height:100%;
    margin:0;
    overflow:
}
/* list of sites in the "More sites" tray (both flat and categorized via s.p. "portal.use.dhtml.more=true" *), since there
 * is a lot of commonalities they are both mixed up here. The flat view container is ul#otherSiteList and the categorized one is
 *  ul.otherSitesCategorList. This last one will appear once per each category
 */
/* BEGIN bSpace customization */
ul#otherSiteList li, ul.otherSitesCategorList li {
    background: #274B82;
    background: -moz-linear-gradient(top, #486CB9 0%, #274B82 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#486CB9), color-stop(100%,#274B82));
    background: -webkit-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: -o-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: -ms-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: linear-gradient(top, #486CB9 0%,#274B82 100%);
    border: 1px solid #274B82;
    font-weight: bold;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: hidden;
    margin: 6px 6px 0 0;; /*Note: check uncategorized */
    line-height: 1.1em;
    width: 18em;
    float: left;
    display: block;
}
/* END bSpace customization */
ul#otherSiteList li a, ul.otherSitesCategorList li a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}
ul#otherSiteList li a:focus span, ul.otherSitesCategorList li a:focus span {
    outline: 1px dotted #fff;
}
ul#otherSiteList li a span, ul.otherSitesCategorList li a span {
    width: 14em;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* search elements for flat other sites tray search */
#otherSiteSearch {
    position: absolute;
    top: 15px;
    left:10px;
}
#otherSiteSearch span#noSearchResults {
    padding-left: 10px;
    color:#555;
}
#otherSiteSearch #imgSearch {
    margin-left: 5px;
}
#otherSiteSearch label {
    padding-right: 15px;
    font-weight: bold;
}
/* specific to  categorized view */
#otherSitesCategorWrap {
    margin: 5px;
    max-height: 300px !important;
    overflow: auto;
}
#otherSitesCategorWrap h4 {
    float: none;
    clear: both;
    color: #555;
    font-size: 90%;
    text-transform: uppercase;
    padding: 4px 10px 0 7px;
    margin: 0 0 0 0;
}
/* tool submenu for sites in the "More sites" tray (both flat and categorized)*
 * shares attr/vals with  ul.topnav li ul.subnav, #mastLogin ul.subnav, #otherSiteTools above, here are the overrides needed for this context */
#otherSiteTools {
    display: block;
    z-index: 1000000;
}
#otherSiteTools li a {
    padding: 7px 5px 6px;
    padding-left: 25px;
    display: block;
}
#otherSiteTools li a:focus {
    color: #009DCE;
}
/* trigger that retrieves from entity broker the tool menu for a site in the "More sites" tray*/
.toolMenus {
    width: 17px;
    height: 17px;
    padding: 0px;
    background: url(images/subnav_btn.png) no-repeat 10px -3px;
    position: absolute;
    right: 1px;
    top: 2px;
    height: 11px;
    border-left: thin solid #FFFFFF;
}
.toolMenus:hover {
    background: url(images/subnav_btn.png) no-repeat  10px -38px;
    cursor: pointer;
}
.toolMenusActive {
    background: url(images/toolMenusActive.png)  no-repeat  10px -40px;
}
.toolMenusActive:hover {
    background: url(images/toolMenusActive.png) no-repeat 10px -5px;
}
/* site hierarchy breadcrumb  */
#siteHierarchy {
    list-style: none;
    line-height: .95em;
    vertical-align: middle;
    padding: 10px;
    margin: 0;
    background-color: #f3f3f3;
    border-bottom: 1px solid #ccc;
    font-size: .85em;
    color: #aaa;
}
#siteHierarchy li {
    display: inline;
    padding: 0 1px 0 0;
}
#siteHierarchy li a, #siteHierarchy li a:visited {
    color: #009DCE;
    font-size: 1.2em;
    text-decoration: none;
}
#siteHierarchy li a.lastBreadCrumb {
    color: #000;
    cursor: text;
}
/* breadcrumb separator: can set display: none if needed because the list-style is taking care of it  */
.breadSeparator {
    font: 1em bold 'Helvetica Neue', Arial
}

/* PART 4 - SITE TOOL LINKS - children of #toolMenuWrap
/* wrapper for ul that lists the links to tools, and the wrapper that lists links to subsites */
#toolMenu, #subSites {
    width: 12em;
    padding: 0;
    margin: 0 0 0 0;
    color: #000;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
    border-radius: 0 0 4px 0;
}

#toolMenu ul, #subSites ul {
    width: auto;
    list-style: none;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
}
/* BEGIN bSpace customization */
/* list element wrapper for all links in the tool menu list, and subsites list */
#toolMenu li, #subSites li {
    margin: 0;
    width: auto;
    padding: 0;
    border-bottom: 1px solid #ccc;
    text-align: left;
    background: #FDF1B2;
    background: -moz-linear-gradient(top, #FDF1B2 0%, #F9E7AF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#F9E7AF));
    background: -webkit-linear-gradient(top, #FDF1B2 0%,#F9E7AF 100%);
    background: -o-linear-gradient(top, #FDF1B2 0%,#F9E7AF 100%);
    background: -ms-linear-gradient(top, #FDF1B2 0%,#F9E7AF 100%);
    background: linear-gradient(top, #FDF1B2 0%,#F9E7AF 100%);
}

#toolMenu li:last-child {
    border-bottom-width: 0 !important;
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
    border-radius: 0 0 4px 0;
}

/* the current tool */
#toolMenu li.selectedTool a {
    color: #003A70;
    background: #F2A900;
    background: -moz-linear-gradient(top, #ffd65e 0%, #F2A900 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#F2A900));
    background: -webkit-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: -o-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: -ms-linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    background: linear-gradient(top, #ffd65e 0%,#F2A900 100%);
    cursor: default;
}
/* eliminate the normal hover effect when it is current tool */
/*#toolMenu li.selectedTool a:hover {
    background: inherit !important;
    background: #f3f3f3 !important;
}*/
/* span holds the tool icon bkgnd image - here a default is provided */
#toolMenu li span, #subSites li span {
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 24px;
    line-height: 1.4;
    width: auto;
}

/* adjusting rendering of last item in the tool menu */
#toolMenuWrap > div:last-of-type li:last-of-type {
    border-width: 0;
}

#toolMenuWrap > div:last-of-type, #toolMenuWrap > div:last-of-type ul:last-of-type, #toolMenuWrap > div:last-of-type li:last-of-type, #toolMenuWrap > div:last-of-type li:last-of-type a {
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
    border-radius: 0 0 4px 0;
}
#toolMenu li a:link, #toolMenu li a, #subSites li a:link, #subSites li a {
    display: block;
    text-decoration: none;
    color: #444;
    font-weight: bolder;
    padding: 8px 6px 6px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow: hidden;
}
#toolMenu li a:hover, #subSites li a:hover, #toolMenu li a:focus, #subSites li a:focus {
    text-decoration: none;
    background: #274B82;
    background: -moz-linear-gradient(top, #486CB9 0%, #274B82 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#486CB9), color-stop(100%,#274B82));
    background: -webkit-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: -o-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: -ms-linear-gradient(top, #486CB9 0%,#274B82 100%);
    background: linear-gradient(top, #486CB9 0%,#274B82 100%);
    color: #fff;
}
/* END bSpace customization */
/* link in tool menu that allows adding one more tool, may be disabled */
#toolMenu li.moreTools {
    padding: 8px 0
}
#toolMenu li.moreTools a {
    display: inline;
    padding: 2px 5px;
    -moz-border-radius: 4px !important;
    -webkit-border-radius: 4px !important;
    -khtml-border-radius: 4px !important;
    border-radius: 4px !important;
    color: #444;
    margin-right: 6px;
}
#toolMenu li.moreTools a:hover {
    color: #fff
}
#toolMenu li.moreTools a span {
    display: inline-block;
    padding-right: 0;
}

/* PART 6 - SITE AFFILIATION,SITE TYPE/STATUS - children of #toolMenuWrap */
/* site logo wrapper  */
#worksiteLogo {
    height: auto;
    overflow: hidden;
    display: block;
}
/* setting the max-width by percentage to avoid crops and permit scaling when tool menu is minimized*/
#worksiteLogo img {
    display: block;
    margin: 5px auto;
    max-width: 90%
}
/* wrapper for the string that Sakai will output based on site type (ie. project,course) this is open ended and institution specific. Not sure what good this is so hiding it. */
#siteType {
    text-align: center;
    text-transform: capitalize;
    display: none;
}
/* BEGIN bSpace customization */
/* wrapper for the string that Sakai will output based on site status when status is "Unpublished"  */
#siteStatus {
    text-transform: capitalize;
    clear: both;
    color: #003A70;
    font-size: small;
    font-weight: bold;
    line-height: 130%;
    padding: 10px 3px;
    border: 1px solid #ccc;
    border-width: 0 0 1px 0;
    text-align: center;
    margin: 0;
}
/* link to inmediately publish the site */
#siteStatus a {
    text-decoration: none;
    display: block;
    padding: 3px;
    font-size: 0.88em;
    width: auto;
    margin: 10px 20px;
    color: #003A70;
}
/* END bSpace customization */

/* PART 7 - PORTLETS - children of #content
/* a page may display portlets in one column or two columns - the next three id selectors address the three possiblities - sole child of column is the .portlet   */
#col1 {
    padding-right: 1em
}
#col1of2 {
    width: 49%;
    float: left;
    margin: 0;
}
#col2of2 {
    width: 49%;
    float: right;
}
.portletTitle {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.portletTitle .action {
    padding: 2px 0 6px 2px;
    text-align: right;
    vertical-align: middle;
}
/* BEGIN BSPACE CUSTOMIZATION to fix BSP-2953 */
.portletTitle .action a#jsr-edit {
    padding: 2px;
}

.portletTitle .action a#jsr-edit:before {
    content: "\f040"; /* icon-pencil */
}
/* END BSPACE CUSTOMIZATION */
.portletTitle .action img {
    margin: 0;
    vertical-align: text-bottom;
    width: 18px;
    border: none;
    height: 18px;
}
/* BEGIN bSpace customization */
.portletTitle .action a {
    position: relative;
    text-align: left;
    padding: 0;
    text-decoration: none !important;
    width: 1em;
    height: 1.5em;
    outline: none;
    color: #444;
}
.portletTitle .title a:focus, .portletTitle .action a:focus {
    outline: black dotted thin
}
/* END bSpace customization */
.portletTitle .title {
    padding: 2px 20px 6px 0;
    height: 1em;
    float: left;
    color: #000;
}
.portletTitle .title img {
    margin: 0;
    vertical-align: text-bottom;
    width: 18px;
    border: none;
    height: 18px;
}
.portletTitle .title h2 {
    display: inline;
    margin: 0;
    padding: 0;
    color: #444;
    font-weight: bold;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.2em !important;
}
.portletTitle .title h2 .siteTitle {
    color: #333
}
/* BEGIN bSpace customization */
.portletTitle .title a {
    position: relative;
    text-decoration: none !important;
    border: 1px solid #fff;
    height: 1.5em;
    outline: none;
    color: #444;
}
.portletTitle .action a:hover, .portletTitle .action a:focus {
    color: #0064CD;
}
.portletTitle .title a:hover:before, .portletTitle .title a:focus:before {
    /*display: inline-block;*/
    color: #0064CD;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

.portletMainIframe {
    text-align: left;
    margin-bottom: .5em;
    height: auto;
    border: none;
    margin-top: 0;
}
/* PART 8 - FOOTER BLOCKS - descendants of #footer */
/* wrapper for links going to external sites */
.footerExtNav {
    color: #EEE;
    padding: 0.5em 0;
    background: #003A70;
}
.footerExtNav a, .footerExtNav a:link, .footerExtNav A:visited {
    color: #EEE;
    font-size: 0.96em;
    text-decoration: none;
    margin: 1em;
}
.footerExtNav a:hover {
    color: #©;
    text-decoration: underline;
}

/* the links displayed inside the wrapper above  */
/* a second wrapper - server info,build,etc  */
#footerInfo {
    display: inline-block;
    padding: 5px;
    vertical-align: top;
}
#footerInfo img {
    margin: 0;
}
/* a third wrapper - reserved for copyright blurbs  */
.sakaiCopyrightInfo {
    display: inline-block;
    width: 40%;
    padding: 0.5em 1em;
    font-size: .86em;
    color: #274B82;
    text-align: left;
}
/* END bSpace customization */

/* PART 9 - Tool Icons - applies to both left hand menu and submenus, as well as to submenus of sites in "Other sites" tray */

.icon-osp-evaluation {
    background-image: url(/library/image/silk/thumb_up.png) !important
}
.icon-osp-glossary {
    background-image: url(/library/image/silk/text_list_bullets.png) !important
}
.icon-osp-matrix, .icon-osp-exposedmatrix {
    background-image: url(/library/image/silk/table.png) !important
}
.icon-osp-presentation {
    background-image: url(/library/image/silk/briefcase.png) !important
}
.icon-osp-presLayout {
    background-image: url(/library/image/silk/layout_content.png) !important
}
.icon-osp-presTemplate {
    background-image: url(/library/image/silk/application_view_tile.png) !important
}
.icon-osp-style {
    background-image: url(/library/image/silk/style.png) !important
}
.icon-osp-wizard, .icon-osp-exposedwizard {
    background-image: url(/library/image/silk/wand.png) !important
}
/* BEGIN bSpace customization */
.toolMenuIcon, #otherSiteTools li, .portletTitle .title {
    position:relative;
}
ul.nav-submenu li.submenuitem a:before,
.toolMenuIcon:before,
.portletTitle .action a:before,
.portletTitle .title a:before,
#mastLogin span.drop,
#otherSiteTools li a:before,
#headerMin #loginLinks a#login-help:before,
.login .alertMessage:before {
    position:absolute;
    left:0;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    font-size: 1.3em;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
}
ul.nav-submenu li.submenuitem a:before,  #otherSiteTools li a:before {
    left: 4px;
    top: 5px;
}
.portletTitle .title a:before {
    content: "\f021"; /* icon-refresh (&#xf021;) */
}
.icon-sakai-announcements:before {
    content: "\f0a1"; /* icon-bullhorn */
}
.icon-sakai-chat:before {
    content: "\f075"; /* icon-comment */
}
.icon-sakai-datapoint {
    background-image: url(/library/image/silk/chart_line.png) !important
}
.icon-sakai-discussion:before, .icon-sakai-forums:before {
    content: "\f086"; /* icon-comments (&#xf086;) */
}
.icon-sakai-dropbox:before {
    content: "\f019"; /* icon-download-alt */
}
.icon-sakai-gmt {
    background-image: url(/library/image/silk/award_star_gold_3.png) !important
}
.icon-sakai-help:before, .portletTitle .action a:before {
    content: "\f059"; /* icon-question-sign */
}
.icon-sakai-iframe:before, .icon-sakai-rutgers-linktool:before {
    content: "\f0c1"; /* icon-link */
}
.icon-sakai-web-1©8 {
    background-image: url(/library/image/silk/application_go.png) !important
}
.icon-sakai-mailbox:before {
    content: "\f01c"; /* icon-inbox */
}
.icon-sakai-metaobj {
    background-image: url(/library/image/silk/application_form.png) !important
}
.icon-sakai-news:before {
    content: "\f09e"; /* icon-rss */
}
.icon-sakai-podcasts {
    background-image: url(/library/image/silk/ipod_cast.png) !important
}
.icon-sakai-postem {
    background-image: url(/library/image/silk/database_table.png )  !important
}
.icon-sakai-preferences:before {
    content: "\f013"; /* icon-cog (&#xf013;) */
}
.icon-sakai-sections:before, .icon-sakai-realms:before {
    content: "\f0e8"; /*  */
}
.icon-sakai-singleuser:before, .icon-sakai-createuser:before {
    content: "\f007"; /* icon-user (&#xf007;) */
}
.icon-sakai-syllabus:before {
    content: "\f0ca"; /*  */
}
.icon-blogger {
    background-image: url(/library/image/silk/book_edit.png) !important
}
.icon-sakai-assignment-grades:before, .icon-sakai-assignment2:before {
    content: "\f02d"; /*  */
}
.icon-sakai-gradebook-tool:before, .icon-sakai-gradebook-gwt-rpc:before {
    content: "\f091"; /*  */
}
.icon-sakai-messages:before {
    content: "\f003"; /* icon-envelope */
}
.icon-sakai-mailtool:before, .icon-sakai-emailtemplateservice:before {
    content: "\f0e0"; /* icon-envelope-alt */
}
.icon-sakai-poll:before, .icon-sakai-memory:before {
    content: "\f080"; /* icon-bar-chart (&#xf080;) */
}
.icon-sakai-sitestats:before, .icon-sakai-sitestats-admin:before {
    content: "\f012"; /* icon-signal (&#xf012;) */
}
.icon-sakai-presentation {
    background-image: url(/library/image/silk/monitor.png) !important
}
.icon-sakai-profile {
    background-image: url(/library/image/silk/vcard_edit.png) !important
}
.icon-sakai-reports {
    background-image: url(/library/image/silk/report_magnify.png) !important
}
.icon-sakai-resources:before {
    content: "\f07c"; /* icon-folder-open (&#xf07c;) */
}
.icon-sakai-rwiki:before {
    content: "\f040"; /* icon-pencil (&#xf040;) */
}
.icon-sakai-samigo:before, .icon-sakai-mneme-admin:before, .icon-sakai-mneme:before {
    content: "\f0ae"; /* icon-tasks (&#xf0ae;) */
}
.icon-sakai-schedule:before {
    content: "\f073"; /* icon-calendar (&#xf073;) */
}
.icon-sakai-search:before {
    content: "\f002"; /* icon-search (&#xf002;) */
}
.icon-sakai-siteinfo:before, .icon-sakai-sitesetup:before {
    content: "\f085"; /* icon-cogs (&#xf085;) */
}
.icon-sakai-site-roster:before, .icon-sakai-membership:before, .icon-sakai-users:before {
    content: "\f0c0"; /* icon-group (&#xf0c0;) */
}
.icon-sakai-synoptic-messagecenter {
    background-image: url(/library/image/silk/comment.png) !important
}
.icon-sakai-conferencing {
    background-image: url(/library/image/silk/webcam.png) !important
}
.icon-sakai-profile2 {
    background-image: url(/library/image/silk/vcard.png) !important
}
.icon-sakai-summary-calendar {
    background-image: url(../../image/silk/calendar.png);
}
.icon-sakai-synoptic-announcement {
    background-image: url(../../image/silk/flag_blue.png);
}
.icon-sakai-synoptic-chat {
    background-image: url(../../image/silk/user_comment.png);
}
.icon-sakai-subsite {
    background-image: url(/library/image/silk/chart_organisation.png) !important
}
.icon-sakai-iframe-service :before, .icon-sakai-iframe-myworkspace:before, .icon-sakai-iframe-site:before, .icon-sakai-motd:before {
    content: "\f015"; /* icon-home (&#xf015;) */
}
.icon-sakai-basiclti:before, .icon-sakai-basiclti-admin:before, .icon-sakai-resetpass:before {
    content: "\f084"; /* icon-key (&#xf084;) */
}
.icon-sakai-basiclti-admin {
    background-image: url(../../image/silk/application_go.png) !important
}
.icon-sakai-lessonbuildertool {
    background-image: url(../../image/silk/book_open.png) !important
}
.icon-my-libintro, .icon-my-libguides {
    background-image: url(../../image/silk/book.png) !important
}
.icon-sakai-see-all-tools:before {
    content: "\f0a9"; /* icon-circle-arrow-right */
}

.icon-sakai-signup:before {
    content: "\f017"; /* icon-thumbs-up */
}

.icon-sakai-privacy {
    background-image: url(../../image/silk/eye.png) !important
}
.icon-sakai-rsf-evaluation {
    background-image: url(../../image/silk/page_edit.png) !important
}
.icon-sakai-turningtool {
    background-image: url(../../image/silk/calculator.png) !important
}

.icon-sakai-iclicker:before {
    content: "\f0d0"; /* icon-magic */
}

.icon-sakai-bbb, .icon-sakai-rutgers-connect, .icon-portlet-\/sakai-elluminate-tool-sakai-elluminate {
    background-image: url(../../image/silk/group.png) !important
}
.icon-sakai-melete {
    background-image: url(../../image/sakai/tool-icons/sakai.melete.png);
}
.icon-sakai-blogwow {
    background-image: url(../../image/silk/application_view_gallery.png) !important
}
.icon-sakai-scormcloud {
    background-image: url(../../image/silk/script.png) !important
}
.icon-sakai-njvidbrowser {
    background-image: url(../../image/silk/film.png) !important
}
.icon-role-enter {
    background-image: url(/library/image/silk/arrow_undo.png) !important
}
.icon-role-exit {
    background-image: url(/library/image/silk/arrow_redo.png) !important
}
/* admin tools  */
.icon-sakai-aliases:before {
    content: "\f02b"; /* icon-tag (&#xf02b;) */
}
.icon-sakai-sites:before {
    content: "\f022"; /* icon-list-alt (&#xf022;) */
}
.icon-sakai-online:before {
    content: "\f06e"; /* icon-eye-open (&#xf06e;) */
}
.icon-sakai-archive:before {
    content: "\f018"; /* icon-road (&#xf018;) */
}
.icon-sakai-scheduler:before {
    content: "\f017"; /* icon-time (&#xf017;) */
}
.icon-sakai-su:before {
    content: "\f0f0"; /* icon-user-md (&#xf0f0;) */
}
.icon-sakai-usermembership:before {
    content: "\f00b"; /* icon-th-list (&#xf00b;) */
}
.icon-sakai-sitebrowser:before {
    content: "\f0ac"; /* icon-globe (&#xf0ac;) */
}
/* END bSpace customization */

/* PART 10: specific functionality: presence, chat */

/* presence and chat rendering */
#presenceArea {
    background-color: #fff;
    border: 1px solid #ccc;
    position: fixed;
    height: 265px;
    width: 175px;
    bottom: 26px;
    right: 18px;
}

/* wrapper for all elements of presence display   */
#presenceWrapper {
    width: 100%;
    height: 100%;
}
/* wrapper for title of iframe ("Users present")*/
#presenceTitle, #pc_title {
    color: #000;
    border-bottom: 1px solid #ccc;
    padding: 3px 3px 4px 3px;
    background: #eee;
    vertical-align: bottom;
    border-bottom: 1px solid #ddd;
    height: 15px;
    font-weight: bold;
}
#presenceTitle div, #pc_title div {
    position: absolute;
    top: 0px;
    text-align: center;
    right: 0px;
    bottom: 0;
    width: 22px;
    height: 22px;
    font-size: 120%;
    border-left: 1px solid #ccc;
}
#presenceTitle div a, #pc_title div a {
    width: 100%;
    height: 100%;
    display: block;
    background-image: url(../../image/silk/cross.png);
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent;
}
#pc_title div {
    position: absolute;
    top: 0px;
    text-align: center;
    right: 0px;
    bottom: 0;
    width: 17px;
    height: 17px;
    font-size: 120%;
    border-left: 1px solid #ccc;
    padding: 4px 5px 4px 4px;
}
/* this used to be an iframe, hence the name  */
#presenceIframe {
    height: 242px;
    width: 100%;
    overflow: auto;
}
.presenceList {
    list-style: none;
    margin: 3px !important;
    padding: 0;
}
.presenceList li.inChat {
    background: url(images/chatpresicon.png) right center no-repeat !important
}
.presenceList li {;
    padding: 3px 16px 3px 2px !important
}
/* list item when the user is an a chat room is a link to that chat room */
.presenceList li a {
    color: #009DCE;
    text-decoration: none;
}

/* main container for presence and portal chat.*/
#footerAppTray {
    font-size: .9em;
    position: fixed;
    right: 18px;
    bottom: 0;
    line-height: 1.2em;
    text-align: center;
    padding: 0;
    border: 1px solid #ccc;
    border-width: 1px 1px 0 1px;
    background: #eeeeee;
    background: -moz-linear-gradient(top, #eeeeee 0%, #e4e4e4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#e4e4e4));
    background: -webkit-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%);
    background: -o-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%);
    background: -ms-linear-gradient(top, #eeeeee 0%,#e4e4e4 100%);
    background: linear-gradient(top, #eeeeee 0%,#e4e4e4 100%);
    *width: 30px;
}
#footerAppTray #chattableCount {
    font-size: 80%;
    margin-left: 10px;
    outline: none;
}
#footerAppTray #presenceCount {
    font-size: 80%;
    outline: none;
}
#footerAppTray span.present {
    margin: -2px 0 0 5px !important;
    border: 2px solid #fff;
    background-color: #444;
    padding: 0 5px;
    color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 14px;
    width: auto;
    display: inline;
}
#footerAppTray span.empty {
    display: none;
}
#footerAppPresence {
    height: 100%;
    width: auto;
    color: #888;
    vertical-align: middle;
    float: right;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
#footerAppChat {
    vertical-align: bottom;
    color: #000;
    float: left;
    text-align: left;
    width: 200px;
}
#presenceToggle {
    color: white;
    text-decoration: none;
    text-align: center;
}

#chatToggle {
    display: block;
    padding: 6px 6px 5px 6px;
    color: #222;
    text-decoration: none;
    height: 16px;
    font-weight: bold;
}
#presenceToggle:focus, #chatToggle:focus {
    outline: 1px dotted #000;
}
.workspace #footerAppPresence {
    display: none;
    border: none;
}
#chattableCount {
    display: inline-block;
    vertical-align: middle !important;
    padding: 2px 5px !important;
    line-height: normal;
    width: auto !important;
    height: auto !important;
}

/* PART 11: Utilities */
/* Privacy Popup Styles */
div#privacy_tool_popup {
    position: absolute;
    background: #fff;
    color: #000;
    border: 4px solid #0198CD;
    width: 450px;
    top: 20%;
    left: 50%;
    margin-left: -225px;
    z-index: 1000;
    padding: 5px 5px 5px 10px;
}
div#privacy_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=70);
    opacity: 0.7;
    z-index: 0;
}

/* used to hide various blocks from sighted users that are in the source to help with accessibility  */
.portalBody .skip {
    display: inline !important; 
    position: fixed !important; 
    height: 1px !important; 
    width: 1px !important; 
    overflow: hidden !important;
    top: 0px !important;
    left: 0px; 
    padding: 0px 0px 0px 0px !important;
} 

/* jump-to links, tabbing into focus treatment  */
#skipNav a.internalSkip:focus, #skipNav a.internalSkip:active {
    text-decoration: none;
    font-size: 120%;
    position: fixed !important;
    background: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    vertical-align: middle;
    padding: 8px !important;
    outline: none;
    z-index: 200000;
    box-shadow: 0px 0px 3px #000;
    -webkit-box-shadow: 0px 0px 3px #000;
    -moz-box-shadow: 0px 0px 3px #000000;
    top: 8px !important;
    left: 5px  !important;
    height: auto  !important;
    color: #000;
    width: auto  !important;
}
/* append the value of the accesskey attr to the text*/
.internalSkip:after {content: ' [' attr(accesskey) ']'}

/* minimize tool menu */

/* when the tool menu is minimized the class "sakaiMinimizePageNavigation" gets added to the
 * #container block, inheritance is then used to hide, move and shring elements or hide expand them
 * in this skin we hide the text of the tool links by sliding it out of the viewport
 * but leave the tool icons displayed - so for the sacrificed of 30 px you still have 
 * page navigation. If you are not using icons the same effect will be achieved by setting ".sakaiMinimizePageNavigation #toolMenuWrap"
 * to display off screen and tweaking the padding of ".sakaiMinimizePageNavigation #content"
 * */
/* container for tool menu display toggle control */
#togglebar {
    float: left;
    width: 13px;
    height: 30px;
    padding-top: 2em;
}
/* hover effect for control */
#togglebar .toggleToolMenuHover {
    background-position: 0 0 !important;
}
#togglebar #toggleToolMax {
    background: url(images/toggleClose.png) -2px 0 no-repeat;
    padding: 4px;
    display: block;
    height: 50px;
}
#togglebar #toggleNormal {
    background: url(images/toggleOpen.png) -2px 0 no-repeat;
    padding: 4px;
    display: block;
    height: 50px;
}
a#toggleToolMenu {
    text-decoration: none
}

.sakaiMinimizePageNavigation #toolMenuWrap {
   /* display: none; uncomment if not using icons for the tool menu */
    width: 30px;
    overflow: hidden;
    border-right: 1px solid #CCC;
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
    border-radius: 0 0 4px 0;
}
.sakaiMinimizePageNavigation #toolMenuWrap li {
    text-align: left;
    overflow: hidden;
}
.sakaiMinimizePageNavigation  #toolMenu li.selectedTool {
    background: #fff;
}
/* BEGIN bSpace customization */
.sakaiMinimizePageNavigation  #toolMenu li.selectedTool span {
}
.sakaiMinimizePageNavigation #toolMenu li span, .sakaiMinimizePageNavigation #subSites li span {
    background-position: center left;
    padding-left: 25px;
}
.sakaiMinimizePageNavigation #toolMenu li a, .sakaiMinimizePageNavigation #subSites li a {
    display: block;
    height: 16px;
    padding-right: 0 !important;
}

.sakaiMinimizePageNavigation #toolMenuWrap #roleSwitch {
    display: none;
}
/*when the tool menu is shoved away a class of .sakaiMinimizePageNavigation gets added to parent block, here we style the selected tool link so that when 
everything except the tool icon is gone it is still distincts as the current tool (also hover treatment for tools and subsites)*/
/*.sakaiMinimizePageNavigation #toolMenu li.selectedTool a, .sakaiMinimizePageNavigation #toolMenu li a:hover, .sakaiMinimizePageNavigation #subSites li a:hover,.sakaiMinimizePageNavigation #toolMenu li a:focus, .sakaiMinimizePageNavigation #subSites li a:focus {
    background: #9cd1e8;
    background: -moz-linear-gradient(top, #9cd1e8 0%, #7bc1e1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9cd1e8), color-stop(100%,#7bc1e1));
    background: -webkit-linear-gradient(top, #9cd1e8 0%,#7bc1e1 100%);
    background: -o-linear-gradient(top, #9cd1e8 0%,#7bc1e1 100%);
    background: -ms-linear-gradient(top, #9cd1e8 0%,#7bc1e1 100%);
    background: linear-gradient(top, #9cd1e8 0%,#7bc1e1 100%);
}*/
/* END bSpace customization */
.sakaiMinimizePageNavigation #togglebar {
    padding-left: 0em;
    margin-top: 0em;
    margin-left: 0;
}
.sakaiMinimizePageNavigation #siteStatus {
    display: none;
}
.sakaiMinimizePageNavigation #content {
    /* adjust if not using icons in tool menu */
    padding-left: 45px;
}
/* portal timeout display*/
#timeout_alert_body {
    font-size: 130%;
    position: fixed;
    background: #fff;
    border: 3px solid #900;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 0.7em;
    vertical-align: middle;
    padding: 1em 1.5em 0.6em;
    outline: none;
    z-index: 200000;
    box-shadow: 0px 0px 3px #000;
    -webkit-box-shadow: 0px 0px 3px #000;
    -moz-box-shadow: 0px 0px 3px #000000;
    top: 20%;
    left: 50%;
    height: auto;
    color: #222;
    font-weight: bold;
    width: auto;
    margin-left: -180px;
}

#timeout_alert_body br {
    display: none;
}

#timeout_alert_body p {
    margin: 0;
    padding: 0 5px 10px;
    text-align: center;
}
#timeout_alert_body input {
    cursor: pointer;
    padding: 3px 28px !important;
    border: 1px solid #AAA !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #e7e7e7 !important;
    background: -moz-linear-gradient(top, #f7f7f7 0%, #e7e7e7 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#e7e7e7)) !important;
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%) !important;
    background: -o-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%) !important;
    background: -ms-linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%) !important;
    background: linear-gradient(top, #f7f7f7 0%,#e7e7e7 100%) !important;
    box-shadow: 0 0 5px rgba(200, 200, 200, .2);
    -moz-box-shadow: 0 0 5px rgba(200, 200, 200, .2);
    -webkit-box-shadow: 0 0 5px rgba(200, 200, 200, .2);
}

#timeout_alert_body input:hover, #timeout_alert_body input:focus     {
    background: #FDF1B2 !important;
    background: -moz-linear-gradient(top, #FDF1B2 0%, #FDDE7D 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDF1B2), color-stop(100%,#F9E7AF)) !important;
    background: -webkit-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: -o-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: -ms-linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    background: linear-gradient(top, #FDF1B2 0%,#FDDE7D 100%) !important;
    border: 1px solid #274B82 !important;
}

/* Qtip overrides used by tutorial*/
a.qtipLinkButton {
     right: 0px;
    top: 85px;
    background: #ddd !important;
    background: -moz-linear-gradient(top, #F7F7F7 0%, #E7E7E7 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#E7E7E7)) !important;
    background: -webkit-linear-gradient(top, #F7F7F7 0%,#E7E7E7 100%) !important;
    background: -o-linear-gradient(top, #F7F7F7 0%,#E7E7E7 100%) !important;
    background: -ms-linear-gradient(top, #F7F7F7 0%,#E7E7E7 100%) !important;
    background: linear-gradient(top, #F7F7F7 0%,#E7E7E7 100%) !important;
    text-align: center;
    width: auto;
    border-radius: 4px;
    border: 1px solid #ccc !important;
    border-width: 1px 1px 1px 1px !important;
    font-size: .85em;
    text-transform: capitalize;
    text-align: center;
    color: #000 !important;
    display: block;
    padding: 6px 12px;
    text-decoration: none !important;
    font-size: 12px !important;
    letter-spacing: normal !important;
}
a.qtipLinkButton img {
    vertical-align: bottom;
}
a.qtipLinkButton:hover {
     color: #7AA3CC !important;
}
/* warning displayed when js is disabled */
#portal_js_warn {
    font-size: 1.2em;
    background: #c00;
    color: #fff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 25%;
    z-index: 2002;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.portletTitle .action a.tool-directurl{
    padding:2px;
    background: url(/library/image/silk/link.png) center right no-repeat;
}

.portletTitle .action a.tool-directurl:hover{
    background: url(/library/image/silk/link.png) center right no-repeat;
}

.direct-url-wrap {
    font-size: 85%;
    color: #555;
}

.direct-url-wrap textarea {
    color: #000;
    overflow:auto;
    width:250px;
    display:block;
}