/* City University of Hong Kong */
/* CSS Base Custom */

.cityu-icon-home a div {height: 20px; width: 20px; background: transparent url('https://template.cityu.edu.hk/template/img/themes/default/icon_home_hover.png') center 1px no-repeat;}
.cityu-icon-home a.active div {background-image: url('https://template.cityu.edu.hk/template/img/themes/default/icon_home_hover.png');}
.cityu-icon-home a:hover div {background-image: url('https://template.cityu.edu.hk/template/img/themes/default/icon_home_hover.png');}

#sitemap .cityu-icon-home {display: none;}

h1.sc, h2.sc, h3.sc, h4.sc, h5.sc {font-family: PMingLiU, MingLiU, sans-serif;}

#cityu-content table td { border:none; }
#cityu-content .DefaultTable1 th { border:1px solid #cccccc; }
#cityu-content .DefaultTable1 td { border:1px solid #cccccc; }
#cityu-content h2 { color:#3a428e; font-size:16px; font-weight:bold; }

/*------ Navigation Themes ------*/
/* login flyout */
#login-flyout { background-color: white; border: solid 1px black; margin-top: 5px; }
#login-flyout a { display: block; font-size: 90%; padding: 2px 6px 2px 6px; text-decoration: none; width: 120px; color:#000000; }
#login-flyout a:hover { background-color: #cccccc; color:#000000; }

/* text */
/*body.cityu-navtheme-ef #cityu-content .cityu-content-page h1 {color: #993366; border-bottom: 1px solid #D6BECB;}*/


/* For testing only */
/* #cityu-footer {border-color: red !important;} */


#cityu-media-slider-wrapper {width: 656px; overflow: hidden; float: left; background-color: #fff;}

#cityu-header-lang {float: left; padding: 2px 5px; height: 20px; line-height: 20px;}

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 100;
}

/********************************/
/* News Details - start */
/********************************/

.photo_list img { margin-right:5px; }
.photo_left img { float: left; margin: 0 14px 10px 0; }
.photo_right img { float: right; margin: 0 14px 10px 14px; }
/********************************/
/* News Details - end */
/********************************/

body { counter-reset: section; }
h1 { border:0 !important; margin-bottom: 10px !important; }

#diagram { display:block; height:500px; text-align:center; }
#diagram h1 { color:#d7712b; text-align:center; font-size:18px; font-weight:bold; margin-top:10px; }
#diagram .item1, #diagram .item2 { font-weight:bold; color:#666; padding:8px; color:#fff; border-radius:10px; width:75px; float:left; text-align:center; margin-left:5px; height:110px; font-family:calibri; text-transform:uppercase; font-size:13px; padding-top:10px; line-height:16px; box-shadow: 0px 2px 2px #ccc; }
#diagram .item1 a, #diagram .item2 a { text-decoration: none; color:#fff; }
#diagram .item1 a:hover, #diagram .item2 a:hover, #diagram .item1:hover a, #diagram .item2:hover a { text-decoration: none; color:#666; }
#diagram .item1 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a9e4f7+0,0fb4e7+100;Ble+3D+%235 */
background: #a9e4f7; /* Old browsers */
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}
#diagram .item2 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6e6b4+0,ed9017+100;Yellow+3D+%231 */
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top,  #f6e6b4 0%, #ed9017 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f6e6b4 0%,#ed9017 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
#diagram .item1:hover, #diagram .item2:hover { cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f9fe+0,d6f0fd+100;White+3D+%232 */
background: #f2f9fe; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f9fe 0%, #d6f0fd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f2f9fe 0%,#d6f0fd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f2f9fe 0%,#d6f0fd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */
}
#diagram .item1 img, #diagram .item2 img { margin-bottom:5px; }
#diagram .leftarrow1, #diagram .leftarrow2 { width: 0; height: 0; border-style: solid; border-width: 10px 17.3px 10px 0;border-color: transparent #1fb9e9 transparent; float:left;}
#diagram .rightarrow1, #diagram .rightarrow2 { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17.3px; border-color: transparent transparent transparent #1fb9e9; float:right;}
#diagram .leftarrow2 { border-color: transparent #ee9621 transparent; margin-left:130px; }
#diagram .rightarrow2 { border-color: transparent transparent transparent #ee9621; }
#diagram .uparrow { width: 0; height: 0; border-style: solid; border-width: 0 100px 30px 100px; border-color: transparent transparent #d7712b transparent; margin:10px 0 0 190px; }

#disclaimer { font-size:11px; line-height:14px; margin-top:30px; }
.group { width:680px; background:#efefef; padding-bottom:10px; counter-reset: subsection; }
.group .name { height:25px; z-index:999; font-weight:bold; text-transform:uppercase; color:#666; padding:8px 8px 5px 16px; color:#fff; border-radius:6px;  box-shadow: 0px 2px 3px #aaa; width:660px; }
.group .name:hover { cursor:pointer; }
.group .name a { color:#fff; }
.group #name1 { background:#0188cc; }
.group #name2 { background:#01ccad; }
.group #name3 { background:#cc016a; }
.group #name4 { background:#722dc1; }
.group .item { background:#fff; margin:0 50px 12px 50px; padding:8px; box-shadow: 0px 0px 1px #aaa; }
.group .title, .group .link-title { width:500px; font-weight:bold; counter-reset: first; padding-left: 1.5em; text-indent:-1.2em; }
.group .title-hidden { display:none; }
.group .title:before, .link-title:before { counter-increment: subsection; content: counter(subsection) ".  "; }
.group .item .desc { margin:8px 0 0 0; padding:8px 0 0 0; }

.embedly-toggle-link { cursor:pointer; display:inline-block; background-color:#eb7c23; padding:3px 3px 0px 3px; border-radius:2px; float:right; margin-top:-28px; }
.button-only { cursor:pointer; display:inline-block; float:right; margin-top:-28px; }
.button-only img { width:28px; }
.embedly-toggle, .embedly-show, .link-display { background:#fff; padding:0 10px; margin:10px 10px; }
.embedly-toggle { display:none; box-shadow: 0px 0px 2px #aaa; }
.embedly-show { display:block; box-shadow: 0px 0px 2px #aaa; }