/*! USE: coredesign.css, widgets.css !*/

/* Remove mobile parts when not in mobile mode */
#mobile-menu, div#mobile-current, div#scrolling-mobile-header, div#mobilecta, .mobile-navmenu-header, div#socialside
{
  display:none;
}

@media (max-width:959px)
{
  html:not(.iframed)
  {
    font-size:15px;
    line-height:130%;
  }
  html.mobile-menu-open, html.mobile-menu-closing, html.mobile-menu-open body
  {
    overflow:hidden;
  }

  /* Remove unneeded assets, reflow content */
    header#topnav
  , div#contentarealeftshadow
  , div#headercta
  , #homepageheader
  , #hompeagevideo
  , #sitelabel
  {
    display:none;
  }

  html.toplangroot body #navsidebar /* adding body to defeat corporatedesign.css */
  {
    display:block;
  }

  /* Logo + search bar */
  div#scrolling-mobile-header
  {
    display:block;
    position:relative;
    z-index:4;
  }

  /* The foldout menu */
  #navsidebar
  {
    -webkit-transition: -webkit-transform ease-in 200ms ;
    transition: transform ease-in 200ms ;

    -webkit-transform: translate3D(-300px,0,0);
    -ms-transform: translate3D(-300px,0,0);
    transform: translate3D(-300px,0,0);

    width:300px;
  }
  .move-with-menu
  {
    -webkit-transition: -webkit-transform ease-in 200ms ;
    transition: transform ease-in 200ms ;

    -webkit-transform: translate3D(0,0,0);
    -ms-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
  }
  /* modality overlay */
  .move-with-menu:after
  {
    content:"";
    display:block;
    position:absolute;

    background:rgba(51,51,51,.5);

    -webkit-transition: opacity ease-in 200ms;
    transition: opacity ease-in 200ms;
    opacity:0;
    z-index:9;
  }
  html.mobile-menu-open .move-with-menu:after
  , html.mobile-menu-closing .move-with-menu:after
  {
    display: block;
    top:0;
    bottom:0;
    left:0;
    right:0;
  }
  /* compensate for the 10px margin around the contentarea */
  html.mobile-menu-open #contentarea.move-with-menu:after
  , html.mobile-menu-closing #contentarea.move-with-menu:after
  {
    left:-10px;
    right:-10px;
  }

  html.mobile-menu-open .move-with-menu:after
  {
    opacity:1;
  }

  html.mobile-menu-open #navsidebar
  {
    -webkit-transform: translate3D(0,0,0);
    -ms-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
  }
  html.mobile-menu-open .move-with-menu
  {
    -webkit-transform: translate3D(300px,0,0);
    -ms-transform: translate3D(300px,0,0);
    transform: translate3D(300px,0,0);
  }
/*
  div#contentheader{ display: none; }
*/
  div#contentheader div#headercta
  {
    display: block;
    position: relative;
    width: 100%;
    top: -1px;
    left: auto;
    right: auto;
  }

  div#photosheadercontainer
  {
    height: auto;
    padding-top: 0;
  }
  div#photosheadercontainer:before
  {
    display: block;
    content: '';
    padding-top: 42%;
  }
  div#photosheadercontainer > div#photosheader
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  div#photosheader .wh-slideshow-item > a > img
  {
    left: 0;
    margin-left: 0;
    width: 100%;
  }

  div.socialside
  {
    padding-top:0;
  }
  div.socialsideicons
  {
    margin-top:4px;
    border-left:none;
  }

  div.wh-sticky#mobile-current
  {
    display:block;
    top:0;
    height:45px;
    width:100%;
    z-index:2;
  }

  html:not(.iframed) h1
  {
    font-size:20px;
  }
  html:not(.iframed) h2
  {
    font-size:18px;
  }
  html:not(.iframed) h3
  {
    font-size:16px;
  }
  #contentbody.fixed
  {
    padding-right:0;
  }

  div#socialside
  {
    display:block;
  }

  /*hide the footer */
  footer#footer
  {
    display: none;
  }

  footer div#footershare
  {
    position:relative;
    top:auto;
    left:10px;
  }
  footer nav#footerlinks, footer ul#websitelinks
  {
    display:none;
  }
  .nav-menu a.homebutton
  {
    display:none;
  }

  ul#mobile-footerlinks
  {
    padding:15px 25px;
    width:270px;
    margin:0;
    list-style: none;
    background: #222222;
  }
  ul#mobile-footerlinks > li a
  {
    color:#ffffff;
    text-transform: uppercase;
    font: normal 15px/250% "LinotypeUniversW02-Cn", "Arial Narrow", Arial;
    text-decoration: none;
  }

  #mobile-menu-footer a
  {
    color:#555555;
    white-space:nowrap;
    font: normal 15px "LinotypeUniversW02-Cn", "Arial Narrow", Arial;
    text-decoration: none;
  }

  #mobile-toplinks
  {
    position:absolute;
    text-align:justify;
    bottom:40px;
    left: 0px;
    width:100%;
    padding:0 19px 0 19px;
    overflow:hidden;
    height:30px;
    border-bottom: 1px solid #555555;
  }
  #mobile-toplinks a:after
  {
    content:" "; /*space to allow for justify*/
  }
  #mobile-toplinks:after
  {
    content:"";
    display:inline-block;
    width:100%;
    height:1px;
  }

  #mobile-languages
  {
    position:absolute;
    left: 19px;
    bottom: 10px;
    text-transform: uppercase;
  }
  #mobile-languages a + a
  {
    margin-left:20px;
  }

  .mobile-navmenu-header
  {
    display:block;
  }
  .nav-history
  {
    display:none;
  }
  html.mobile-open-path .nav-history
  {
    display:block;
  }
}

/* The not-iframe-rules repeated for the iframes, all for the benefit of news in employeeportal */
@media (max-width:639px)
{
  html.iframed
  {
    font-size:15px;
    line-height:130%;
  }
  html.iframed h1
  {
    font-size:20px;
  }
  html.iframed h2
  {
    font-size:18px;
  }
  html.iframed h3
  {
    font-size:16px;
  }
}


div#mobile-current span.menucount
{
  display:inline-block;
  position:absolute;
  top:10px;
  right:10px;
  border-radius:10px;
  border:2px solid #fff;
  color:#fff;
  font-size:10px;
  line-height:11px;
  height:12px;
  padding:0 3px;
  text-align: center;
  font-weight: bold;
}
  html.scheme1 div#mobile-current span.menucount
, html.scheme2 div#mobile-current span.menucount
, html.scheme3 div#mobile-current span.menucount
{
  border-color:#91c8ed;
  color:#91c8ed;
}
  html.scheme4 div#mobile-current span.menucount
, html.scheme5 div#mobile-current span.menucount
{
  border-color:#dd4c9c;
  color:#dd4c9c;
}

div.mobile-header
{
  background: #222222 url("../img/navsidebar/bg.png") top left repeat;
  height:60px;
  width:100%;
}
.mobile-navmenu-header
{
  background:#000000;
  height:60px;
  width:100%;
}
div.mobile-header .utlogo
{
  position:absolute;
  top:20px;
  left:20px;
}
div.mobile-header .search
{
  position:absolute;
  top:20px;
  left:290px;
}
.mobile-navmenu-header
{
  position:relative;
}
#mobile-navmenu-pathheader
, html.mobile-open-path #mobile-navmenu-normalheader
{
  display:none;
}
  html.mobile-menu-open.mobile-open-path #mobile-navmenu-pathheader
{
  display:block;
}
.navmenu-button
{
  display:inline-block;
  width:60px;
  height:60px;
  text-align:center;
  line-height:60px;

  position:absolute;
  top:0;
  cursor:pointer;
}
.navmenu-button:first-child
{
  left:0;
  border-right:solid 1px #333333;
}
.navmenu-button:last-child
{
  border-left:solid 1px #333333;
  right: 0;
}
.navmenu-widebutton, .mobile-search-area
{
  position:absolute;
  top:0;
  bottom:0;
  left:60px;
  right:60px;
}
.navmenu-widebutton
{
  padding-top:16px;
  text-align:center;
  cursor:pointer;
}
.mobile-search-area form
{
  width:100%;
  height:100%;
}
.mobile-search-area input
{
  -webkit-appearance:text;
  background:transparent;
  border:none;
  padding:0 18px;
  margin:-4px 0 0 0;
  width:100%;
  height:100%;
  font-size:14px;
  color:#777777;
}
.mobile-search-area input::-webkit-input-placeholder
.mobile-search-area input::-moz-placeholder
.mobile-search-area input::-ms-placeholder
{
  color: inherit;
  opacity: inherit;
}
div#mobile-menu-content
{
  position: relative;
  min-height:100%;
  padding-bottom:95px;
  background:#111111;
}
div#mobile-initialmenu div.nav-menu
{
  position:relative;
}
/* we reuse the existing UT logo as 'home' button, as it'll point to the right (language) root */
div#mobile-menu a.homebutton
{
  position:absolute;
  top:11px;
  right:15px;
}
div#mobile-menu a.homebutton > img
{
  display:none;
}
div#mobile-menu a.homebutton:after
{
  content:"HOME";
  text-transform: uppercase;
  font: normal 15px "LinotypeUniversW02-Cn", "Arial Narrow", Arial;
  color:#555555;
}
div#mobile-menu ul.nav-topicons
{
  background-color: transparent;
  -webkit-transform:scale(0.75);
  -webkit-transform-origin: 0 0;
  transform:scale(0.75);
  transform-origin: 0 0;
  height:43px;
  display:inline-block;
}
div#mobile-menu-top
{
  position:relative;
  height:45px;
  font: normal 16px "LinotypeUniversW02-Cn", "Arial Narrow", Arial;
}
div#mobile-menu-top .morebutton
{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:45px;
  padding-top:19px;
  text-align: center;
  font-size:8px;
  letter-spacing:3px;

  border-right-width: 1px;
  border-right-style: solid;
}
div#mobile-menu-top .menutitle
{
  position:absolute;
  top:0;
  bottom:0;
  padding:13px 0 0 10px;
  left:45px;
  width:220px;
}
div#mobile-menu-top .closebutton
{
  position:absolute;
  top:0;
  right:0px;
  width:50px;
  height:50px;
  overflow:hidden;
}
div#mobile-menu-top .closebutton .icon
{
  margin: 12px 0 0 18px;
}
div#mobile-menu-footer
{
  position:absolute;
  left:0;
  bottom:0;
  right:0;
}
div#mobile-current
{
  background: #ffffff;
  cursor:pointer;
}
div#mobile-current span.pathtitle
{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:13px 20px 0 55px;
  font: normal 16px "LinotypeUniversW02-Cn", "Arial Narrow", Arial;
  white-space: nowrap;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow:hidden;
  border-bottom:1px solid #dce1e6;
}
div#mobile-current.hasnomenu span.pathtitle
{
  padding-left:20px;
}
div#mobile-current .menubutton
{
  cursor: pointer;
  position:absolute;
  top:0px;
  left:20px;
  width:50px;
  height:50px;
  overflow:hidden;
}
div#mobile-current.hasnomenu .menubutton
{
  display:none;
}
div#mobile-current .menubutton .icon
{
  margin:10px 0 0 0;
}