/* City University of Hong Kong */
/* CSS Base Custom */


/* For testing only */
/* #cityu-footer {border-color: red !important;} */
#cityu-header-deptnames { float:none}
#cityu-header-deptname { width:100%}

#logo-l { float:left; padding:10px 0}
#logo-r {float:right;}
.floar-r { float:right}
.floar-l { float:left}

.clr { clear:both}

.bigtitle { line-height:1em}

.float-content { }
.float-content .w-full { margin:0 auto; margin: 0 20px 30px 20px; }
.float-content .w-core {width:60%}
.float-content .w-meet {}
.float-content .con-l{ float:left}
.float-content .con-r{ float:right}
.dot-line { height:25px; margin:0 0 10px 0; background:url(../images/home-dot.jpg) left bottom repeat-x;}
.dot-line2 { height:15px; margin:10px 0; background:url(../images/home-dot.jpg) left bottom repeat-x;}

#slideshow {}
.picthumb {}
.banneritem {position:relative; width: 697px; height:384px }
.bannername {position:absolute; top:359px; left: 0; height: 25px;width:697px; overflow: hidden; background:url(../images/cover.png) left top repeat; color:#FFFFFF; }
.bannernameinner {margin:10px 0 0 10px; }

#homenews {padding:10px}
#homenewshead {}
#homenewshead .paging {}
#homenewslist {}
#homenewslist .item {width:185px; float:left; padding-bottom:15px;}
#homenewslist .item .inner {width:170px;}
#homenewslist .item .pic {}

#homenewslist .item .date { padding:5px; font-size:11px; color:#999; text-align:center }
#homenewslist .item .lnk { color:#333333; font-size:12px}
#homenewslist .item .lnk a { color:#333333; text-decoration:none}
#homenewslist .item .lnk a:hover { text-decoration:underline}

/*about*/
#about-bottom-content {padding-top:15px}
#about-bottom-content #info-l {width:279px; float:left; margin-right:15px }
#about-bottom-content #info-r { float:left; width:600px}


#teching-all {padding:15px 0}
#teching-all .item {float:left; width:215px; height:360px; margin: 0 10px 10px 0 }
#teching-all .item .innert {padding:5px; background-color:#e4e3e3; height:340px}
#teching-all .item .pic {padding-bottom:5px}
#teching-all .item .name {padding:7px 0; color:#333333; font-size:12px; font-weight:bold; border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8; line-height:1.3em}
#teching-all .item .info {padding:7px 0; font-size:12px; line-height:1.3em}
#teching-all .item .data {float:left; width:180px; }
#teching-all .item .mail { float:left; width:20px;}

#staff-detail { font-size:12px}
#staff-detail #staff-l {width:300px; float:left;margin-bottom:15px}
#staff-detail #staff-l .staff-name { font-size:22px; font-weight:bold}
#staff-detail #staff-l .staff-edu { line-height:1.6}
#staff-detail #staff-l .staff-post {font-weight:bold}
#staff-detail #staff-l .staff-desc-1 {padding:15px 0; margin-bottom:15px; 	font-size: 12px; color: #333;}
#staff-detail #staff-l .staff-desc-2 {background:#F6F6F6; padding:5px; margin-bottom:15px; 	font-size: 12px; color: #333;}
#staff-detail #staff-l .staff-desc-3 {background:#F6F6F6; padding:5px; 	font-size: 12px; color: #333;}

#staff-detail #staff-c {width:355px; float:left; padding-left:10px;margin-bottom:15px}
#staff-detail #staff-r{width:225px; float:left; padding-left:10px;margin-bottom:15px}
#staff-detail #staff-r .staff-info {background:#F6F6F6; padding:5px; margin-bottom:15px; 	font-size: 12px; color: #333;}

#staff-detail #staff-r .staff-desc-4 {overflow-y:scroll; height:450px; width:200px; background:#f6f6f6; padding:8px; font-size: 12px; color: #333;}

#public-policy { text-align:center; padding:15px 0}

#content-center { text-align:center}

#dotors-studies {}
#dotors-studies .data{ width:500px; float:left}
#dotors-studies .pic{width:300px; float:left}


.program-top-content {margin-bottom:15px; border-bottom:1px solid #e8e8e8; padding-bottom:10px; margin-bottom:10px}
.program-top-content .program-top-l {width:197px; float:left; margin-right:20px}
.program-top-content .program-top-r {float:left; width:680px}
.program-top-content .briefcrousename {font-family: Arial, Helvetica, sans-serif;	font-size: 22px;	font-weight: bold;	color: #333;}
.program-top-content .briefcrousename .coursename{width:600px; float:left}
.program-top-content .briefcrousename .iconlink{width:360; float:left}
.program-top-content .briefdeschead {padding:5px 10px;	font-size: 14px;color: #F90;font-weight: bold;}
.program-top-content .briefdesc {padding:5px 10px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8}

.program-top-menu {margin-top:30px;border-bottom:1px solid #e8e8e8}
.program-top-menu .menuitem { float:left;  }




/**** conference and seminars ****/
#conference-menu .item {float:left; overflow:hidden; text-align:center}
#conference-menu .width-1 {width:163px}
#conference-menu .width-2 {width:179px}
#conference-menu .width-3 {width:148px}
#conference-menu .width-4 {width:208px}
#conference-menu .width-5 {width:104px}
#conference-menu .width-6 {width:148px}
.conference-item {padding:10px 0}
.conference-item .pic {width:140px; float:left; margin-bottom:10px}
.conference-item .con {float:left}


/******** research  ************/
#research-support {}
#research-support .col-1 {width:168px; }
#research-support .col-2 {width:120px}
#research-support .col-3 {width:50px; text-align:center}
#research-support .col-4 {width:80px}
#research-support .col-5 {width:410px}
#research-support .rowhead {background-color:#d7e1e1;}
#research-support .rowhead .col-1,
#research-support .rowhead .col-2,
#research-support .rowhead .col-3,
#research-support .rowhead .col-4,
#research-support .rowhead .col-5 {  float:left; font-size:12px; font-weight:bold; padding:3px 5px; border-left:1px solid #fff}
#research-support .row {border-bottom:1px solid #e8e8e8}
#research-support .row .col-1, 
#research-support .row .col-2, 
#research-support .row .col-3, 
#research-support .row .col-4, 
#research-support .row .col-5 { padding:5px 5px;float:left} 

#research-student {}
#research-student .col-1 {width:180px; }
#research-student .col-2 {width:50px; text-align:center}
#research-student .col-3 {width:470px}
#research-student .col-4 {width:140px; text-align:center}
#research-student .rowhead {background-color:#d7e1e1;}
#research-student .rowhead .col-1,
#research-student .rowhead .col-2,
#research-student .rowhead .col-3,
#research-student .rowhead .col-4 {  float:left; font-size:12px; font-weight:bold; padding:3px 5px; border-left:1px solid #fff}
#research-student .row {border-bottom:1px solid #e8e8e8}
#research-student .row .col-1, 
#research-student .row .col-2, 
#research-student .row .col-3, 
#research-student .row .col-4 { padding:5px 5px;float:left} 




/*** research publication **/
#research-pub {}
#research-pub .pubhead {padding:0 5px 10px 5px; width:900px; }
#research-pub .pubhead .desc {float:left; width:750px; font-size:12px}
#research-pub .pubhead .selectyear { float:right; width:100px; text-align:right;}
#research-pub .catename { background-color:#A20004; padding:5px 10px; color:#fff; font-size:#16px; font-weight:bold; margin-bottom:15px}
#research-pub .row {padding:0 5px}
#research-pub .info { font-size:12px; width:650px; border-bottom:1px solid #e8e8e8; margin-bottom:10px; padding-bottom:10px}
#research-pub .info .infopin, 
#research-pub .info .infodesc,
#research-pub .info .infoyear  { float:left; width:300px; padding-left:10px}
#research-pub .funder { background-color:#e5e5e5; padding:5px 10px; -moz-border-radius:7px;	-webkit-border-radius:7px;	border-radius:7px; }
/*** meet **/
#meet-imgmap {}
#meet-lnk { display:none; margin-top:30px}
#meet-detail {width:650px; margin-left:100px}

/** why **/
#minors { font-size:12px}
#minors .row {}
#minors .row .topic{ font-weight:bold; color:#951a1d; padding-bottom:5px}
#minors .row .con{}

#greeting {padding-left:10px}
#greeting .row {margin-bottom:30px}

#why-commmon {width:650px; margin-left:100px}
#why-commmon img {margin:0 0 30px 10px}

/** news **/
#newslist {}
#newslist .col-1 {width:55px; }
#newslist .col-2 {width:390px;}
#newslist .col-3 {width:220px}
#newslist .col-4 {width:190px;}
#newslist .rowhead {background-color:#951a1d;}
#newslist .rowhead .col-1,
#newslist .rowhead .col-2,
#newslist .rowhead .col-3,
#newslist .rowhead .col-4 {  float:left; font-size:12px; font-weight:bold; padding:3px 5px;  color:#fff}
#newslist .row {border-bottom:1px solid #e8e8e8}
#newslist .row .col-1, 
#newslist .row .col-2, 
#newslist .row .col-3, 
#newslist .row .col-4 { padding:5px 5px;float:left} 

/*** engaging **/
#engaging1 {margin-bottom:30px}
#engaging1 .row {width:900px;padding:5px; border-bottom:1px solid #e8e8e8; margin-bottom:5px }
#engaging1 .row .con { float:left; width:680px; padding-top:15px}
#engaging1 .row .pic {float:right; width:200px}

#engaging2 {}
#engaging2 .col-1 {width:480px; }
#engaging2 .col-2 {width:110px;}
#engaging2 .col-3 {width:60px}
#engaging2 .col-4 {width:200px;}
#engaging2 .name {color:#0468b4; font-size:16px; font-weight:bold; padding:7px 0; border-bottom:1px solid #e8e8e8; padding-left:5px}
#engaging2 .rowhead {background-color:#951a1d;}
#engaging2 .rowhead .col-1,
#engaging2 .rowhead .col-2,
#engaging2 .rowhead .col-3,
#engaging2 .rowhead .col-4 {  float:left; font-size:12px; font-weight:bold; padding:3px 5px;  color:#fff}
#engaging2 .row {border-bottom:1px solid #e8e8e8; background-color:#fbfbfb}
#engaging2 .row .col-1, 
#engaging2 .row .col-2, 
#engaging2 .row .col-3, 
#engaging2 .row .col-4 { padding:5px 5px;float:left} 

/*********************** responsive ************************/
@media screen and (max-width: 800px) {
	
	#slideshow {}
	.banneritem {position:relative; width: 260px; height:384px}
	.bannername {position:absolute; top:100px; left: 0; width: 260px; height: 50px; overflow: hidden; background:url(../images/cover.png) left top repeat; font-size:11px  }
	.bannernameinner {margin:5px 0 0 10px; line-height:15px}
	.program-top-content .program-top-l {width:197px; float:none; }
	.program-top-content .program-top-r {width:auto; float:none }
	.program-top-menu .menu-item {   }
	
    #research-support .col-1 {width:auto}
	#research-support .col-2 {width:auto}
	#research-support .col-3 {width:auto; text-align:left}
	#research-support .col-4 {width:auto}
	#research-support .col-5 {width:auto}
	#research-support .rowhead { display:none}
	#research-support .row {padding:7px 0}
	#research-support .row .col-1, 
	#research-support .row .col-2, 
	#research-support .row .col-3, 
	#research-support .row .col-4, 
	#research-support .row .col-5 { padding:0px 5px;float:none} 
	
	#research-student .col-1 {width:auto}
	#research-student .col-2 {width:auto; text-align:left}
	#research-student .col-3 {width:auto}
	#research-student .col-4 {width:auto; text-align:left}
	#research-student .rowhead { display:none}
	#research-student .row {padding:7px 0}
	#research-student .row .col-1, 
	#research-student .row .col-2, 
	#research-student .row .col-3, 
	#research-student .row .col-4 { padding:0px 5px;float:none} 
	
	
	#staff-detail #staff-l {width:auto;}

	#staff-detail #staff-c {width:auto; }
	#staff-detail #staff-r{width:auto;}
	#staff-detail #staff-r .staff-desc-4 {width:auto; height:auto}
	
	#research-pub .pubhead {padding:0 0 10px 0; width:auto  }
	#research-pub .pubhead .desc {float:none; width:auto}
	#research-pub .pubhead .selectyear { float:none; width:auto; text-align:left;}
	
	#research-pub .info { width:auto;}
	#research-pub .info .infopin, 
	#research-pub .info .infodesc,
	#research-pub .info .infoyear  { float:none; width:auto; padding-left:10px}
	
	
	#newslist .col-1 {width:auto}
	#newslist .col-2 {width:auto; text-align:left}
	#newslist .col-3 {width:auto}
	#newslist .col-4 {width:auto; text-align:left}
	#newslist .rowhead { display:none}
	#newslist .row {padding:7px 0}
	#newslist .row .col-1, 
	#newslist .row .col-2, 
	#newslist .row .col-3, 
	#newslist .row .col-4 { padding:0px 5px;float:none} 
	
	#engaging2 .col-1 {width:auto}
	#engaging2 .col-2 {width:auto;}
	#engaging2 .col-3 {width:auto}
	#engaging2 .col-4 {width:auto;}
	#engaging2 .rowhead { display:none}
	#engaging2 .row {padding:7px 0}
	#engaging2 .row .col-1, 
	#engaging2 .row .col-2, 
	#engaging2 .row .col-3, 
	#engaging2 .row .col-4 { padding:0px 5px;float:none} 

	
	
	#meet-imgmap {display:none}
	#meet-lnk { display:block}
	#meet-detail {width:auto; margin-left:0}
	
	#why-commmon {width:auto; margin-left:0}
	#why-commmon img {margin:0 0 15px 0}
	
	#engaging1 .row {width:auto}
	#engaging1 .row .con { float:none; width:auto; margin-bottom:10px; padding-top:5px }
	#engaging1 .row .pic {float:none; width:auto}	
	
}