﻿#content a.CTA-ArrowDTS,
#content .sys_CTAs a{background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-icon-white-right-arrow.png");
  font-weight:bold; 
  display:block; 
  text-decoration:none; 
  height: auto; 
  clear:both;
  background-color: #005597;
  color: #fff; 
  text-align:left; 
  padding: 10px 60px 10px 8px; 
  background-size: 18px auto; 
  background-position: right 10px top 50%; 
  background-repeat:no-repeat; 
  margin-bottom: 4px;
  border: 2px solid transparent;}

#wrapper #content a.CTA-ArrowDTS:hover,
#wrapper #content .sys_CTAs a:hover{background-color: transparent; color: #18194f; border-color: #18194f; text-decoration:none; background-image: url("/siteelements/images/base/internal/cta-icons/Colour/bg-icon-blue5-right-arrow.png");}

/* copy of 2020 welcome campaign css - uizcf 03/08/21 */

#content #thevideo {width: 100%; height: 300px; position: absolute; top: 0; left: 0; z-index:1; }
#content .sys_video-thumbnail {display:block; width: 466px; height: 300px; z-index:2; position: absolute; top: 0; left: 0; background-size: cover; background-position: 50%;}
#content .sys_video {width: 466px; height: 300px; position: relative; margin-bottom: 1em;}
#content .sys_video .sys_inner {padding: 12px; width: auto;bottom: 0; position:absolute; top: 0; left: 0; right: 0;}
#content .sys_video-play {z-index: 100;position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#content .sys_video-play:hover {cursor: pointer;}
#content .sys_video-text{position:absolute; top: 0; bottom: auto; left: 0;}
#content .sys_video-text .sys_video-title{color: #fff; font-size: 1.4em; line-height: 1.2em;}
#content .sys_video:hover .sys_video-button{background-size: 100%; border-color: #18194f; background-color: transparent; background-image: url("/ugstudy/clearing/2017/images/decorative/bg-playbutton.png"); }
#content .sys_video-button {border: 2px solid transparent; background: #18194f url("/ugstudy/clearing/2017/images/decorative/bg-playbutton-white.png") no-repeat; position: absolute; right: 0; bottom: 0; top: 0; left: 0; margin: auto auto; width: 70px; height: 70px; background-size: 100%;}




#welcomeSearchBox{float:left; width: 100%; margin-bottom: 2em; display:block; background: #007ca7;}
#welcomeSearchBox .sys_inner{padding: 12px;}
#welcomeSearchBox .welcome-search-row{}
#welcomeSearchBox .welcome-search-row label{display:none;}
#welcomeSearchBox .welcome-options-row{display:block;}
#welcomeSearchBox .welcome-options-row label{display:inline-block; color: #fff; font-weight:bold;}

#welcomeSearchBox .welcome-search-row input{display:inline-block; width: 70%; padding: 20px 1.25%; margin: 0 0 1% 0;border-color: #fff; color: #18194f;font-weight:bold; }
#welcomeSearchBox .welcome-options-row label{display:block; color: #fff; font-weight:bold; margin: 0 0 1% 0;}
#welcomeSearchBox .welcome-options-row select{display:block; border-color: #fff; font-weight:bold; width:; padding: 4px 1.25%; margin: 0 0 3% 0; width: 97%;}

#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{background-image:none; width: 26%; padding: 19px 0; margin: 0 0 1% -4px;  background-color: #18194f; background-image: none; border: 2px solid transparent; color: #ffffff; cursor: pointer; font-weight: bold; text-align: center;}
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit:hover{background-color: #000; border-color: #000; background-image:none;}

#welcomeSearchResults .sys_subitem{margin-bottom: 1em; }

#welcomeSearchResults .sys_subitem,
#welcomeSearchResults .sys_subitem.compulsory{position:relative; }
#welcomeSearchResults .sys_subitem.compulsory{border-color: #37a158;}

#wrapper #welcomeSearchResults .sys_subitem:hover,
#wrapper #welcomeSearchResults .sys_subitem.compulsory:hover{}

#welcomeSearchResults .sys_subitem-heading {font-weight:bold; padding-right: 50px;}

#welcomeSearchResults .compulsory .sys_subitem-heading {border-color: #37a158;}

#welcomeSearchResults .sys_subitem .searchDetails{padding: 6px;}
#wrapper #content #welcomeSearchResults .sys_subitem .entryDescription a{display:inline;text-decoration:underline; padding: 0!important; margin: 0;}
#wrapper #content #welcomeSearchResults .sys_subitem .entryDescription a:hover{color: #000; text-decoration:none; background: none; padding: 0;}



  
/* 2020 styles - ulzgw 30/06/2020 */
#content .tabs {background: #efefef; display:block; border-bottom: 1px solid #ccc;}  
#content .tabs li {list-style-type:none; display:inline-block; margin: 0;}
#content .tabs li a{display:block; padding: 16px;}




#content .inductionListing ul{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;padding: 0; width: 100%;}
#content .inductionListing li{width: 100%; display:inline-block; margin: 0 6px 6px 0;list-style-type:none;}
#content .inductionListing li a{background: url("/siteelements/images/base/internal/cta-icons/Colour/bg-icon-blue5-right-arrow.png") no-repeat right 10px top 50%; background-size: 18px; display:block; padding: 12px 8px; border-bottom: 1px solid #ccc; text-decoration:none; margin: 0; list-style-type:none;}
#content .inductionListing li a:hover,
#content .inductionListing li a:active,
#content .inductionListing li a:focus{text-decoration:none!important; background-color: #f6f6f6; border-color: #18194f;}

#content .welcomeStep{padding-left: 60px; position:relative; margin-bottom: 1em;}
#content .welcomeStepNumber{position:absolute; background: #005597; color: #fff; top: 0; left: 0; width: 18px; padding: 18px; text-align:center; font-size: 1.4em;}
#content .welcomeStepTitle{padding: 12px 12px 0 12px; font-size: 1.2em;}
#content .welcomeStepInfo{padding: 6px 12px 12px 12px;}
#content .welcomeStepInfo .CTA-Arrow{margin-top: 1.5em;}

#content .studentShowcase{min-height: 300px; position:relative;}  
#content .studentTitle{width: 47%; font-size: 1.2em;}  
#content .studentInfo{width: 47%; font-size: 1.2em; line-height: 1.2em;}  
#content .studentImage{position:absolute; right: 0; top: 0; bottom: 0; width: 50%;}  
#content .studentImage img{width: 400px; height: 300px; object-fit: cover;}


#content .welcomeVideo #thevideo {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video-thumbnail {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video {width: 100%; height: 330px;}
#content .welcomeVideo .sys_video-text{background: #18194f; bottom: 0; top: auto; left: 0; right: 0;} 
#content .welcomeVideo .sys_video-text .sys_inner{position:relative;}

#content .sys_socialNetworkingIcons img{padding: 0 4px 4px 0;}

#content .welcomeImageBanner{position:relative;}
#content .welcomeImageBanner img{width: 100%; height: auto;}

#content .welcomeImageCaption{padding: 12px; font-size: 1.4em; line-height: 1.2em; position:absolute; left: 0; right: 0; background: #18194f; bottom: 0; top: auto; color: #fff;}





@media only screen and (max-width: 967px) {

#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 22.5%;}

#welcomeSearchBox .welcome-options-row select{width: 90%;}


.LargeBannerWithTextOver {height: 228px;}
.LargeBannerWithTextOver .TextOverlay{padding: 1.5em; width: 40%;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2.8rem; line-height: 2.8rem; margin-bottom: .3em;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}


#content .welcomeVideo #thevideo {height: 452px;}
#content .welcomeVideo .sys_video-thumbnail {height: 452px;}
#content .welcomeVideo .sys_video {height: 452px;}

}

@media screen and (max-width: 767px) {

.LargeBannerWithTextOver {height: 280px; position:relative;background-size: cover; background-position: 100% 50%;}
.LargeBannerWithTextOver .TextOverlay{background: transparent url("/siteelements/images/base/internal/bg-textoverlay-blue5.png") repeat; position:absolute; left: 0; top: auto; right: auto;bottom: 0; width: auto; padding: 12px;}
.LargeBannerWithTextOver .TextOverlay .BannerTitle{font-size: 2rem; line-height: 2rem;}
.LargeBannerWithTextOver .TextOverlay .BannerText{font-size: 1.2rem; line-height: 1.4rem;}

  
  
#welcomeSearchResults .sys_subitem:before{position:relative; display:block; width: auto; padding: 4px;}  
  
  
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 27%;}
 
#welcomeSearchBox .welcome-options-row select{width: 100%;}

#wrapper #content #WelcomeTopLinksIntro{height: auto;}
#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro .sys_name{font-size: 2.5em; line-height: 1.1em;}

#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro{display:inline-block;position:relative; width: 60%!important; margin: 0!important;}
#wrapper #content #WelcomeTopLinksIntro .sys_image{display:inline-block; position:relative; left: 0; bottom: -14px; top: auto; }
#wrapper #content #WelcomeTopLinksIntro .sys_image img{height: 180px;width: auto; position:absolute; right: -20px; bottom: 0;}

#wrapper #content #WelcomeTopLinksIntro .sys_topPicks{z-index: 200;position:relative; padding: 12px!important; width: auto; left: auto; margin: 0!important;}
  
#WelcomeTopLinksIntro .sys_studentIntro .sys_introText,
#WelcomeTopLinksIntro .sys_studentIntro .sys_accent{width: 100%;}
  
#wrapper #content #WelcomeTopLinksIntro .sys_studentIntro .sys_inner ,
#wrapper #content #WelcomeTopLinksIntro .sys_topPicks .sys_inner{padding: 12px!important;}

#wrapper #content #WelcomeTopLinksIntro .sys_topPicks .sys_list{width: 100%;}


#content  #thevideo {width: 100%; height: 264px;}
#content .sys_video {width: 404px; height: 264px;}
#content .sys_video-thumbnail{width: 404px; height: 264px;}
  
  
  
  
  
  
  
  
#content .inductionListing ul{height: auto; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
#content .inductionListing li{display:block; margin: 0 0 6px 0;}
#content .studentShowcase{height: auto;}  
#content .studentTitle{width: 100%;}  
#content .studentInfo{width: 100%;}  
#content .studentImage{position:relative; width: 100%; }  
#content .studentImage img{width: auto; height: auto; object-fit: unset;}

  
#content .welcomeVideo #thevideo {height: 266px;}
#content .welcomeVideo .sys_video-thumbnail {height: 266px;}
#content .welcomeVideo .sys_video {height: 266px;}
 

#content ul#navLinks {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
}

/* Navbar links */
#content #navLinks li {
    float: left;
}

#content #navbar a {
    margin: 36px 0;
}

#content #navbar a:not(.button--outline--blue-four) {
    display: inline-block;
    text-align: center;
    padding: 14px;
    border-bottom: 2px solid transparent;
}

#content #navbar a:not(.button--outline--blue-four):hover,
#content #navbar a:not(.button--outline--blue-four):active,
#content #navbar a:not(.button--outline--blue-four):focus{border-color: rgb(26, 41, 107);}
  
  
  
  
  

}



@media only screen and (min-width: 768px) and (max-width: 967px) {
  

  
}



@media only screen and (max-width: 479px) {
#welcomeSearchBox .welcome-search-row input#itemSearchSubmit{width: 26%;}

#wrapper #content .sys_video,
#wrapper #content #thevideo,
#wrapper #content .sys_video-thumbnail{width: 100%; height: 264px;}

#wrapper #content .extraordinaryHero .sys_video,
#wrapper #content .extraordinaryHero #thevideo,
#wrapper #content .extraordinaryHero .sys_video-thumbnail{height: 100%;}

  
}

/* hide the description in standard contensis search results on temporary search page */
dd.sys_search-description {display: none;}

/* WS Jul 20 - added override for extraordinary hero vid */
#content .extraordinaryHero .welcomeVideo .sys_video-text {
    display:none;
}

#content .extraordinaryHero .welcomeVideo .sys_video-thumbnail {
    width: 100%;
    height: 100%;
}

#content .extraordinaryHero .welcomeVideo .sys_video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

#content .extraordinaryHero .welcomeVideo .sys_video-thumbnail {
    height: 100%;
}
#content .extraordinaryHero .welcomeVideo #thevideo {
    height:100%;
}