/* css addons */
@import url("normalize.css");
@import url("fonts.css");
/* @import url("animate.css"); */

html a {outline:0;}
body {padding:0; margin:0; font-family: 'Source Sans Pro', Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑",sans-serif; font-size:90%; color:#555; font-weight:normal; min-height:100%; background:url(../../images/bg-tone.jpg)}
body.loading {background-image: url(images/loader.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center 200px;}
h1,h2,h3,h4,h5,h6 {margin :0; font-weight:400;}
h1{font-size:1.7em;}
a {outline:0; text-decoration:none; color:#333;}
a:hover {color:#666;}
p{margin:0 0 15px 0;}
p:last-child{margin:0 0 0 0;}
.lower {text-transform:lowercase;}
.ellipsis {white-space: nowrap; overflow: hidden;}
.ellipsis.multiline {white-space: normal;}
.hentry {line-height:150%}
.alignleft {float:left; margin: 4px 15px 15px 0;}
.alignright {float:right; margin: 4px 0 15px 15px;}
.cursor,
.clickable,
.clickload {cursor:pointer;}
.color-orange {color:rgb(215,91,28);}
.color-orange a {background-color:rgb(220,91,28); color: #fff; border-radius: 8px; padding: 10px 15px; display:inline-block; margin-top:10px; }
.color-orange a:hover {background-color:rgb(240,80,15)}
.color-lightgray {color:rgb(163,159,159);}

/* 
 * General
 */
#universe {box-sizing: border-box; max-width:2000px; position:relative; margin:0 auto; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    background: #eee; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #eee 0%, #aaa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #eee 0%, #aaa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #eee 0%, #aaa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.language-content {display:none;}

/* Header
----------------------------*/
#branding {max-width:2000px; margin: 0 auto; position:relative; z-index:100; float:none; border-width:0 0 1px 0;  border-color:rgb(220,220,220); border-style: solid; background:#fff; transition: all 500ms ease-in; max-height:200px; box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.3);} 
#branding h1 {margin:0; padding:0; vertical-align: text-top; position: absolute; top: 0; right:2%; width:12%; height:30px;}
#branding h1 a {display: block; width:100%; height:100%; background:url(../../images/tyss.svg) no-repeat; background-size: contain; background-position: center right; text-indent:-20000px; outline:0;}
.no-svg #branding h1 a {background:url(../../images/tyss.png) no-repeat;}

#branding.min {position: fixed; width:inherit; width:100%; max-height:40px;}
#branding.min h1 {top: 8px; height:24px;}
#branding.min #primary-menu-list {padding:9px 0 9px 0; height:22px; font-size:100%;}

/* Menus / Navigation
----------------------------*/
#primary-menu{}
#primary-menu-list{display:inline-block; margin:0 0 0 2%; padding:20px 0 20px 0; height:20px; vertical-align: middle;}
#primary-menu-list li {background-repeat: no-repeat; display:inline-block; padding-left:15px; margin-right:40px;}
#primary-menu-list li:last-child {margin-right:0;}
#primary-menu-list li a.active {color:rgb(0,0,0);}
#primary-menu-list li a:hover {color:rgb(0,0,0);}
#primary-menu-list li a {color:rgb(120,120,120);}

#secondary-menu{box-sizing: border-box; padding:20px 4% 0;}
#language-selector {display:inline-block; float:right;}
#language-selector span {cursor: pointer;}
#language-selector span:hover {color:#333;}
#language-selector .active {font-weight:bold; color:#333;}
.fb-like {float:left;}

/* Main Content
----------------------------*/
#main-content {
    position: relative;
    /*padding:30px 3% 30px;
    -webkit-column-count: 2; 
     -moz-column-count: 2; 
          column-count: 2;
    -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;*/
    padding: 30px 0 60px;
    clear: both;
}
#main-content ul {margin:0; padding:0;}
#main-content li {list-style: none; padding-left:16px; background-image:url(../../images/bullet.png); background-repeat: no-repeat; background-position: center left;}
#main-content .col-1 {position:relative; box-sizing: border-box; width:20%; padding:0 4% 0 4%; float:left; color:#444;}
#main-content .col-2 {position:relative; box-sizing: border-box; width:60%; padding:0 3% 0 3%; float:left; clear:right; color:#444;}
#main-content img.content {width:100%;}
#main-content img.content.left-col-image {position:absolute; width:28%; margin-left:-33%;}
#main-content img.content.right-col-image {position:absolute; width:28%; margin-left:95%;}
#main-content h2 {margin-bottom: 25px;}
#main-content .col-2 h3:nth-of-type(n+2) {margin-top:30px;}
.courses #main-content .col-1 {padding:0 0 0 4%;}
.courses #main-content .col-2 {padding:0 0 0 8%;}

#main-content .course-item {margin-bottom: 40px;}
#main-content .course-item:last-of-type {margin-bottom:0;}
#main-content .course-item h4 {color:rgb(215,91,28); line-height:90%;}
#main-content .course-item h2 {color:rgb(215,91,28); border-width:0 0 1px 0; border-style: solid; border-color: rgb(215,91,28); margin-bottom:0; line-height:100%}
#main-content .course-item a {color:rgb(215,91,28);}
#main-content .course-item a:hover {text-decoration: underline;}
#main-content .course-dates .dates {padding-right:10px; width:68%;}
#main-content .course-fees td {padding-right:10px; padding:0 10px; border-right: 1px solid rgb(163,159,159);}
#main-content .course-fees td:first-child {padding-left:0;}
#main-content .course-fees td:last-child {padding-right:0; border-right:0;}

#main-content .address h4 {margin-bottom:6px;}
#main-content .address p {line-height:130%;}

/* Secondary Content
----------------------------*/
#secondary-content.session-images img {width:25%; display: block; float:left;}

/* Banner + Carousel
----------------------------*/
#banner{border-width:0 0 1px 0;  border-color:rgb(220,220,220); border-style: solid;}
#banner img {width:100%;}
.carousel {}
.owl-carousel .owl-stage {cursor: -webkit-grab; cursor: grab;}
.owl-carousel .owl-stage:active {cursor: -webkit-grabbing; cursor: grabbing;}

/* Footer
----------------------------*/
#footer {z-index: 2; width: 100%; background-color: rgb(61,64,71); text-align: center; padding:15px 10px; color: rgb(165,165,165);
     -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow:hidden; clear:both;
}

/* Responsive
----------------------------*/
@media
/*screen and (max-device-width: 1600px), */
screen and (min-width: 1600px) {
    #branding h1 {top: 14px; height:36px}
	#primary-menu-list {padding:22px 0 22px 0; height:22px; font-size:120%; line-height:19px;}
    #main-content {font-size:150%;}
    #main-content h2 {font-size:240%; line-height:105%;}
    #main-content .course-item h2 {font-size:220%;}
    #main-content p {line-height:150%;}
	#main-content .chinese .page-title {font-size: 220%;}
    
}

@media
/*screen and (max-device-width: 1599px), */
screen and (max-width: 1599px) {
    #branding h1 {top: 12px; height:30px;}
	#primary-menu-list {padding:16px 0 16px 0; height:22px; font-size:120%; line-height:19px;}
    #main-content {font-size:130%;}
    #main-content h2 {font-size:230%; line-height:105%;}
    #main-content .course-item h2 {font-size:200%;}
    #main-content p {line-height:150%;}
	#main-content .chinese .page-title {font-size: 210%;}
}

@media
/*screen and (max-device-width: 1400px), */
screen and (max-width: 1400px) {
	#main-content .chinese .page-title {font-size: 200%;}
}

@media
/*screen and (max-device-width: 1300px), */
screen and (max-width: 1300px) {
	#main-content .chinese .page-title {font-size: 180%;}
}

@media
/*screen and (max-device-width: 1200px), */
screen and (max-width:1200px) {
    #branding h1 {top: 9px;}
	#primary-menu-list {padding:14px 0 14px 0; height:22px; font-size:110%; line-height:19px;}
    #main-content {font-size:110%;}
    #main-content h2 {font-size:220%; line-height:105%;}
    #main-content .course-item h2 {font-size:190%;}
    #main-content p {line-height:150%;}
	#main-content .chinese .page-title {font-size: 180%;}
}

@media
/*screen and (max-device-width: 1000px), */
screen and (max-width:1000px) {
    #branding {border-width:0 0 1px 0;}
    #branding h1 {top: 8px;}
	#primary-menu-list {padding:12px 0 12px 0; height:22px; font-size:100%; line-height:19px;}
    #main-content {font-size:110%;}
    #main-content h2 {font-size:210%; line-height:105%;}
    #main-content .course-item h2 {font-size:190%;}
    #main-content p {line-height:150%;}
	#main-content .chinese .page-title {font-size: 170%;}
    
    #banner{border-width:0 0 1px 0;}
}

@media
/*screen and (max-device-width: 900px) One Column Content*/
screen and (max-width:900px) {
    #secondary-menu{padding:20px 3% 0;}
    
    #main-content .col-1 {box-sizing: border-box; width:100%; padding:0 3% 0 3%;}
    #main-content .col-2 {box-sizing: border-box; width:100%; padding:15px 3% 0 3%;}
    #main-content img.content {width:100%;}
    #main-content img.content.left-col-image,
	#main-content img.content.right-col-image {position:relative; width:100%; margin:10px 0 10px 0;}
    
    .home #main-content .col-2 {padding-top:0;}
    .courses #main-content .col-1 {padding:0 3% 0 3%;}
    .courses #main-content .col-2 {padding:15px 3% 0 3%;}
}

@media
/*screen and (max-device-width: 680px), */
screen and (max-width:680px) {
    #branding h1 {top: 8px; height:24px;}
	#primary-menu-list {padding:9px 0 9px 0; height:22px; font-size:100%; line-height:22px;}
    #main-content {font-size:110%;}
    #main-content h2 {font-size:200%; line-height:105%;}
    #main-content .course-item h2 {font-size:180%;}
    #main-content p {line-height:150%;}
}

@media
/*screen and (max-device-width: 600px), */
screen and (max-width:680px) {    
    #branding {padding-top: 9px; border-width:0 0 1px 0;}
    #branding h1 {height:30px; width:100%; position:relative; display:block; left:auto; right:auto; top:auto; margin-top:9px;}
    #branding h1 a {background-position: center center;}
    #primary-menu-list {display:block; padding:9px 0 9px 0; margin:0; height:22px; font-size:100%; line-height:19px; text-align: center; width:100%;}
    #primary-menu-list li {padding-left:0; background-image:none;}
    
    #branding.min {position: fixed; padding-top: 0; width:inherit; width:100%}
    #branding.min h1 {display:none;}
    
    #banner{border-width:0 0 1px 0;}
    
    #main-content {font-size:110%;}
    #main-content h2 {font-size:180%; line-height:105%;}
    #main-content .course-item h2 {font-size:170%;}
    #main-content p {line-height:150%;}
}