/********************************************************
Design: Vinci Chow (vincichow@cuhk.edu.hk, ticoneva.com)
Version: 2012-11-15b "Akerlof" - 955px fork
********************************************************/

/*****************************basic styles*****************************/

		body {
			margin-left: auto;   
			margin-right: auto; 
			width:960px; 	/*IE ignores this.  Need to change .centerfix below. Can't delete this either to get centering work in non-IE*/
			
			font-family: Arial, Helvetica, sans-serif;	
			font-size: 12px;			
			
			background-color: #FFFFFF;
		}
		.ie body {
			text-align: center;
		}

		a {
			color: #000000;
			text-decoration:none;
			cursor: pointer;
		}
		a:hover {
			text-decoration:underline;
		}		
		
		table {
			/* font-family: Arial, Helvetica, sans-serif; */	
                        font-family:'Times New Roman', Times, seriF;
			font-size: 12px;
			border: 0px;
		}		
		td {
			vertical-align:top;
		}	
		
		h1, h2, h3, h4 {
			/* font-family:Arial, Helvetica, sans-serif; */		
			font-family:Georgia, "Times New Roman", Times, serif;
		}
		
		h1 {
			font-size: 32px;
			font-weight: normal;
			color: #000000;
			text-shadow: 2px 2px 3px #eeeeff;
		}
		h2 {
			font-size: 24px;
			font-weight: normal;
			text-shadow: 1px 1px 1px #DDDDDD;
		}
		h3 {
			font-size: 20px;
			font-weight: normal;		
			// color: #aa82c8;
                        color: #333333;
			text-shadow: 1px 1px 1px #FFFFFF;
		}

		h4 {
			font-size: 16px;
			font-weight: bold;
			text-shadow: 1px 1px 1px #FFFFFF;
		}
		h5 {
			/* font-family: Arial, Helvetica, sans-serif; */
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size: 14px;
			font-weight: bold;
			text-shadow: 1px 1px 1px #FFFFFF;
		}	

		h6 {
                        margin:20px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			font-weight: normal;
			text-shadow: 1px 1px 1px #FFFFFF;
		}	
/*		
		ul {
			list-style-type: square;
			color: #dab018;
			list-style-image: url(images/sq_dab018.png);

		}
		ul p, ul span, ul div {
			color: #000000;
		}								
*/

                p {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size: 14px;

                }

/*****************************custom styles*****************************/
		
		.myheader {
			width:100%;
			overflow:hidden;
			margin-bottom: 6px;	
		}
		.ie .myheader {
			 height: 75px;
			 margin-bottom: 0px;
		}

		.header_items {
			float: left;
		}
		.ie .header_items {
			
		}

		.header_icon {
			background-image: url('./images/CUHK-logo.jpg');
			background-repeat:no-repeat;
			height: 69px;
			width: 110px;
			float: left;
		}
/*		.ie .header_icon {
			position: absolute;
			left: 0px;
			top: 0px;
			height: 75px;
		}*/
		
		.header_links {
			text-align: right;
			float: right;
			margin-right: 8px;
		}
		.header_links a {
			display: block;
			color: #666666;
		}
		
		.heading_container {
			position:relative; 
			height:100px; 
			overflow:hidden;
			margin-bottom: 6px;	
		}

		.heading_base {
			background-image: url('./images/header_bkg.png');
			border-radius: 10px;
			box-shadow: 3px 5px 5px #AAA;
			-webkit-box-shadow: 0px 3px 5px 0px #AAA;
			float: left;
			background-color:#FFFFFF;
			height: 90px;
			width:780px;
			z-index: 2;
		}
		.noshadow {
			box-shadow: 0px 0px 0px #AAA;
			-webkit-box-shadow: 0px 0px 0px 0px #AAA;		
		}
		.ie div.heading_base  {
			width:780px;
		}		
		.ie .heading_base  {
			width: 780px;
		}	
		
		.heading_base span, .heading_base a {
			background-color:transparent;
					
			float: left;

			line-height:30px;
			color:#FFFFFF;
			text-shadow: 1px 1px 2px #888888;
			text-decoration:none;
	
			font-family:Arial, Helvetica, sans-serif;
			font-size:16px;
						
			border: 1px;	
        }
		.heading_base a:hover {
			text-decoration:none;
		}
		
        .heading_left {
			border-radius: 5px 0px 0px 5px;
			width: 32px;	
        }

		.heading_mid {
			display: block;
			padding-left: 27px;
			padding-right: 27px;
			
			text-align:center;
		}
		.ie .heading_mid {
			padding-right: 25px;
		}			

		a.heading_mid:hover, a.heading_mid_selected, a.heading_right:hover {
			text-decoration:none;
			//change color of font;
			color: #fee89c;
			/*or change background here: background-image: url('./images/heading_bkg_light.png');*/			
		}
		a.heading_mid_lighted {
			background-image: url('./images/heading_bkg_light.png');
			text-decoration:none;
		}	
		a.heading_mid_lighted:hover {
			text-decoration:none;
		}	
		a.heading_mid_nh:hover {
			color:#FFFFFF;
		}
		.default_cursor {
			cursor: default;
		}						
		
		.heading_right {
			border-radius:0px 5px 5px 0px;
			text-align:right;
			display: block;
			width: 59px;
			padding-right: 8px;
			font-size: 12px;
			overflow: hidden;
		}
		.ie .heading_right {
			font-size: 13px;
			width: 89px;
			padding-top: 2px;
			height: 25px;
		}

		.submenus span {
			display:none;
			z-index: 3;
			position:absolute;	
		
			background-color: #fdf3d7; /*old color: #fffaec;*/
			background-image: url('./images/bwg_v_yellow_s.png');
			background-repeat: repeat-x;
			font-family: Arial, Helvetica, sans-serif;	
			font-size: 12px;
			
			width:164px;
			border:1px solid;
			border-color: #ffbc00;
			padding-left: 5px;
			padding-right: 5px;
			padding-top: 3px;
			padding-bottom: 5px;
			box-shadow: 0px 1px 2px #ffbc00;
			
			opacity: 0.90; 	
			zoom: 1;
			filter: alpha(opacity=90);
		}
		.submenus span a {
			text-decoration: none;
			display: block;
			padding : 4px 5px 4px 10px;
		}
		.submenus span a:hover {
			text-decoration: none;
			background-color: #fee89c;
		}
		.submenus hr {
			border: 1px;
			color: #ffbc00;
			background-color: #ffbc00;
			height: 1px;		
		}		
		

		.ie .shadow_blur {
			background-color:#999999;
			z-index: -1;			
   		 	filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=4);
		}
		.ie .shadow_blur_1px {
			background-color:#999999;
			z-index: -1;			
   		 	filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1);
		}		
		.ie .heading_shadow {
			height:32px;
			width:950px;
			position:relative;
			left:-4px;
			top:-33px;		
		}

		.big_photo_bkg {
			width: 950px;
			height: 390px;
			position: relative;  /*for positioning the selector*/
			
			border:1px solid;
			border-color: #AAAAAA;
			margin-bottom: 10px;
			display: block;
			float: left;
			text-align:right;
			overflow: hidden;

			background-color: #000000;
			/*box-shadow: 0px 2px 5px #888888; */
		}
		
		.big_photo_actual {
			width: 100%;
			height: 100%;
			position: relative;
						
			color: white;
			text-align: left;
		}
		.big_photo_actual div {
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 70px;
			overflow: hidden;
			background-color: #222222;
			background-image: url(./images/bp_black.png);
			background-repeat: repeat-x;
			opacity: 0.92; 	
			filter: alpha(opacity=92);			
		}
		.ie6 .big_photo_actual div {
			background-image: url(./images/bp_black_222.png);
			background-repeat: repeat-x;
		}
		.big_photo_actual div div {
		/*the actual text is here*/
			position: relative;
			width: 700px;
			padding: 10px;
			color: white;
			text-align: left;	
			background:none;
		}
		.big_photo_actual div div a {
			color: white;
		}
			
		.big_photo_caption {
			font-family:Verdana, Arial, Helvetica, sans-serif;
			
			font-size: 22px;	
			font-weight:bold;
			color: white;
			text-shadow: 2px 2px 2px #444444;
			
			margin: 12px;
			float: right;
			display: inline;
		}
		
		.big_photo_selector {
			width: 200px;
			/*full height: height: 350px;*/
			max-height: 350px;
			position: absolute; 
			top: 0px;
			right: 0px;			
			
			background-color: #EFEFEF;
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAFAFA), to(#D1D1D1));
			background-image: -webkit-linear-gradient(top, #FAFAFA, #D1D1D1); 
			background-image: -moz-linear-gradient(top, #FAFAFA, #D1D1D1); 
			background-image: -ms-linear-gradient(top, #FAFAFA, #D1D1D1); 
			background-image: -o-linear-gradient(top, #FAFAFA, #D1D1D1); 
			
			opacity: 0.95; 	
			/*This causes PNG transparency issue in IE 8 
			filter: alpha(opacity=95);*/
			border-radius: 5px;
			box-shadow: 0px 3px 10px #444444;
			-webkit-box-shadow: 0px 3px 10px 0px #444444;
			
			padding: 5px;
			margin: 15px 10px;		
			
			text-align: left;			
		}
		.ie .big_photo_selector {
			width: 220px;
			height: 370px;		
			padding: 0px 12px 0px 12px;
			margin: 15px 0px 0px;
			border: 0px;
			background-color: transparent;
			background-image: url(images/bkg_photo_container.png);
			background-repeat: no-repeat;
		}
		.ie6 .big_photo_selector {
			background-image: url(images/bkg_photo_container.gif);
		}
		.big_photo_selector a {
			font-family: Georgia, "Times New Roman", Times, serif;
			
			font-size: 14px;
			text-decoration: none;
			display: block;
			padding: 2px 10px 2px 10px;
			margin: 10px 0px 10px 0px;

			border: 0px solid transparent;
		}
		.big_photo_selector a:hover {
			text-decoration: none;
		}
		.big_photo_selector_selected {
			text-decoration: none;
			color: #FFFFFF;
			background-color: #777777;
			border-radius: 4px;
		}
		
		.dept_name {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size: 32px;
			text-decoration:none;
			text-shadow: 0px 0px 1px #AAAAAA;
			display: block;
		}
		.ie .dept_name {
		
		}
		a.dept_name:hover  {
			text-decoration:none;
		}
		
		.uni_name {
			font-family:Georgia, "Times New Roman", Times, serif;
			font-size: 16px;
			text-decoration:none;
			padding-left: 2px;
		}		
		a.uni_name:hover  {
			text-decoration:none;
		}	

		.bodyspacing {
			margin-left: 3px;
			margin-right: 3px;
			width: 943px;			
		}
	
		/*common properties among bodybox and contentbox*/
		.bodybox, .contentbox, .contentbox4 {
			border:1px solid #b48fb6; /*was #AAAAAA;*/			
			background-color: #eeeeee; /*#F1F1F1; f1e0f2*/
			background-image:url("./images/bg.jpg");
                        background-size:100% 100%;
			background-repeat:no-repeat;
			overflow: auto;		
			box-shadow: 0px 2px 10px #b48fb6; /*was 888888*/
			-webkit-box-shadow: 0px 2px 10px 0px #b48fb6;	
			
			font-family: Arial, Helvetica, sans-serif;								
		}

                .ccecontentbox {
                    border:none;
                    background-color:#ffffff;
                    background-image:url("./images/bg.jpg"); 
                    background-size: 969px 600px;
                    background-repeat:no-repeat;
                    width:960px;
                    overflow: auto;		
                }
		
                .cce15contentbox2 {
                    border:none;
                    background-color:#ffffff;
                    background-image:url("./images/bg2.jpg");
                    background-size: 969px 300px;
                    background-repeat:no-repeat;
                    width:960px;
                    overflow: auto;		
                }
		
                .cce15contentbox3 {
                    border:none;
                    background-color:#ffffff;
                    background-image:url("./images/bg3.jpg");
                    background-size: 969px 120px;
                    background-repeat:no-repeat;
                    width:960px;
                    overflow: auto;		
                }

		.bodybox {
			padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			margin-left: 3px;
			margin-right: 8px;
			margin-bottom: 8px;
			border-collapse: collapse; 
			text-align: justify;
			float: left;
			/*overflow: hidden;*/
		}			
		.ie .bodybox {
			width: 944px;
		}
		div.bodybox, span.bodybox {
			width: 883px;
		}
		table.bodybox {
			width: 945px;
			background-color: #d8c1d9;
			background-image:url(./images/bwg_v_darkpurple_s.png);
			background-repeat:repeat-x;			
		}
		.bodybox td td {
			box-shadow: 0px 0px 0px #c8a3cb; 
			-webkit-box-shadow: 0px 0px 0px 0px #c8a3cb;			
		}
		.bodybox td th {
			background-color:transparent;
			background-image: none;	
			
			font-size: 1em;
			font-weight: bold;	
			color: #000000;
			text-align: left;
			text-shadow: 0px 0px 0px #222222; 
			border-bottom: 1px solid #a97eab;
		}
		
		.bodybox .menu_panel {
			height:100%; 
			width: 180px; 
			float:left; 
			margin: 0px 0px -30px 0px;
			padding: 15px 10px 15px 10px;
			background-color:transparent;
			background-image: none;
			box-shadow: 0px 0px 0px #c8a3cb; 
			-webkit-box-shadow: 0px 0px 0px 0px #c8a3cb;

			font-size: 14px;
			color: #000000;
			text-align: left;
			text-shadow: 1px 1px 3px #DDDDDD; /*can try a97eab 7e5e7f*/
		}	
		.ie .bodybox .menu_panel {
			color: #000000;
		}
		span.bodybox .menu_panel, div.bodybox .menu_panel {
			margin: 0px 35px -30px -30px;
		}
		.bodybox .menu_panel a {
			color: #000000;
		}					
		.bodybox .menu_panel a:hover, .bodybox .menu_panel a.selected {
			color: #FFFFFF;
			text-shadow: 1px 1px 3px #7e5e7f;
			text-decoration: none;
		}
		.bodybox .content_panel {
			width: 700px;
			border-right: 1px solid #b48fb6;
			padding: 20px 30px 20px 30px;
			background-color: #f8eff8;
			background-image:url(./images/bwg_v_purple_s.png);
			background-position: 0% -20px;
			background-repeat:repeat-x;
			
			box-shadow: -4px 0px 8px #c8a3cb; 
			-webkit-box-shadow: -4px 0px 8px 0px #c8a3cb;
		}
		.ie .bodybox .content_panel {
			border-right: 0px;
		}
				
		.bodybox_title {
			font-family:Arial, Helvetica, sans-serif;
			font-size: 32px;
			font-weight: normal;
			color: dab018;
			margin-top: 2px;
			margin-bottom: 5px;
			margin-left: 5px;
			text-shadow: 1px 1px 3px #DDDDDD;			
		}
		
		.boxes {
			width: 955px;
		}
		
		.contentbox, .contentbox4 {
			float: left;
			margin-right: 8px;
			z-index: 1;	
			padding-bottom:10px;
			margin-bottom: 8px;
			font-size: 12px;
		}
		.contentbox p, .contentbox4 p {
			padding-left: 10px;
			padding-right: 10px;
		}
		
		/**********************more common properties***************************/
		.bodybox ul, .contentbox ul, .contentbox4 ul {
			list-style-type: square;
		}
		.contentbox ul, .contentbox4 ul {
			/*until I work out a more convenient way to set bullet color, not including .bodybox ul, */
			color: b48fb6;
		}		
		.bodybox ul p, .bodybox ul span, .bodybox ul div, .contentbox ul p, .contentbox ul span, .contentbox ul div, .contentbox4 ul p, .contentbox4 ul span, .contentbox4 ul div{
			color: #000000;
			padding-left: 0px;
			padding-right: 0px;			
		}

		.bodybox h1, .contentbox h1, .contentbox4 h1, .bodybox h2, .contentbox h2, contentbox4 h2, .bodybox h3, .contentbox h3, .contentbox4 h3, .bodybox h4, .contentbox h4, .contentbox4 h4, .bodybox h5, .contentbox h5, .contentbox4 h5 {
			color: #000000; 
			margin-bottom: 3px;
		}
		.bodybox h1, .contentbox h1, .contentbox4 h1 {
			text-shadow: 0px 0px 2px #b37fb8;
		}		
		.bodybox h2, .contentbox h2, .contentbox4 h2 {
			text-shadow: 0px 0px 1px #b37fb8;
		}	
		.bodybox img, .contentbox img, .contentbox4 img {
			border: 1px solid #AAAAAA;	
			box-shadow: 0px 2px 10px #888888;
			-webkit-box-shadow: 0px 2px 10px 0px #888888;				
		}	
		.bodybox hr, .contentbox hr, .contentbox4 hr {
			border: 1px;
			color: #a97eab;
			background-color: #a97eab;
			height: 1px;		
		}				
		.bodybox table {
			border-collapse:collapse;
		}
		.bodybox table tr, .bodybox table td {
			padding: 5px;
		}

		.box_520 {
			width: 520px;
		}
		.ie .box_520 {
			width: 522px;
		}
		
		.box_220 {
			width: 420px;
			margin-right: 0px;
		}
		
		.faculty_photo_box {
			width: 218px;
			overflow: hidden;
			margin-right: 0px;
		}
		.ie .faculty_photo_box {
			background-color: transparent;
			border: 0px;
		}
		
		.subtitle, .gradient_subtitle,.gradient_subtitle_grey, .bodybox th  {
			font-size: 14px;
			font-weight: normal;
			color:#FFFFFF;
			text-shadow: 1px 1px 2px #222222; /*#888888 for dda301 #444444 for b48fb6*/
			
			padding: 3px;
			padding-bottom: 5px;
			border-bottom:1px solid #b79db8;
			/*box-shadow: 0px 0px 5px #937595;*/ 				
			background-color: #b48fb6;  /*dab018 dda301 929fd9 cuhk-purple: 6e008f light purple: b48fb6 b27cb5*/	
		
		}
		.ie .subtitle {
		}
		.bodybox .subtitle, .bodybox .gradient_subtitle, .bodybox th {
			margin: 0px -30px 0px -30px;
			font-size: 16px;
		}
		
		.gradient_subtitle, .bodybox th {
			background-color: #caa0cc; /*was d9acdb*/
			background-image: url('./images/subtitle_bkg.png');		
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#a97eab), to(#caa0cc));
			background-image: -webkit-linear-gradient(top, #a97eab, #caa0cc); 
			background-image: -moz-linear-gradient(top, #a97eab, #caa0cc); 
			background-image: -ms-linear-gradient(top, #a97eab, #caa0cc); 
			background-image: -o-linear-gradient(top, #a97eab, #caa0cc); 			
		}
		.gradient_subtitle_grey {
			background-color: #cccccc; 
			background-image: url('./images/subtitle_bkg_grey.png');		
			background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ababab), to(#cccccc));
			background-image: -webkit-linear-gradient(top, #ababab, #cccccc); 
			background-image: -moz-linear-gradient(top, #ababab, #cccccc); 
			background-image: -ms-linear-gradient(top, #ababab, #cccccc); 
			background-image: -o-linear-gradient(top, #ababab, #cccccc); 			
		}		
		
		.address, .disclaimer {
			text-align: center; 
			margin-top: 10px;
			clear: both;
		}
		.ie .address, ie. disclaimer {
			margin-left: 112px;
			text-align: left;
		}
		.disclaimer {
			font-size: 10px;	
			color: #777777;
			text-align: left;
		}
		
		.lang_switcher {
			text-align: center;
		}
		.ie .lang_switcher {
			width: 755px;		
		}
		
		.lang_switcher_top {
			float: left;
			position: relative;
			left: 100px;
		}
		
		.faculty_name {
			font-size: 16px;
			display: block;
		}
		.faculty_photo {
			width: 300px;
			margin-bottom: 10px;
			float: right;
		}
		
		.ie .center_fix {
			width: 955px;
			text-align:left;
			position:relative;			
		}
		
		body2 {
			background-color:#c4c4c4;
			background-image: url('images/bkg_gradient.png');
			background-position:center;
			background-repeat:repeat-y;		
		}

		.img_w_shadow {
			border:1px solid;
			border-color: #AAAAAA;		
			box-shadow: 0px 2px 10px #888888;
			-webkit-box-shadow: 0px 2px 10px 0px #888888;				
		}		

		.img_w_border {
			border:1px solid;
			border-color: #AAAAAA;
		}
		
                .cce15button1 {
                     background-image: url('images/prog.jpg');
                     background-repeat: no-repeat;
                     backsize:100% 100%;
                     padding:0px;
                     margin:0px;
                     width:240px;
                     height:60px;
                     border:1px solid;
                     border-color: #AAAAAA;
                     box-shadow: 0px 2px 10px #888888;
                     -webkit-box-shadow: 0px 2px 10px 0px #888888;

                }
                .cce15button2 {
                     background-image: url('images/button_reg.jpg');
                     background-repeat: no-repeat;
                     backsize:100% 100%;
                     padding:0px;
                     margin:0px;
                     width:240px;
                     height:60px;
                     border:1px solid;
                     border-color: #AAAAAA;
                     box-shadow: 0px 2px 10px #888888;
                     -webkit-box-shadow: 0px 2px 10px 0px #888888;
                }
                .cce15button3 {
                     background-image: url('images/button_venue.jpg');
                     background-repeat: no-repeat;
                     backsize:100% 100%;
                     padding:0px;
                     margin:0px;
                     width:240px;
                     height:60px;
                     border:1px solid;
                     border-color: #AAAAAA;
                     box-shadow: 0px 2px 10px #888888;
                     -webkit-box-shadow: 0px 2px 10px 0px #888888;
                }
                .cce15button4 {
                     background-image: url('images/button_contact.jpg');
                     background-repeat: no-repeat;
                     backsize:100% 100%;
                     padding:0px;
                     margin:0px;
                     width:240px;
                     height:60px;
                     border:1px solid;
                     border-color: #AAAAAA;
                     box-shadow: 0px 2px 10px #888888;
                     -webkit-box-shadow: 0px 2px 10px 0px #888888;
                }
 
                div.ccebox {
                     background-color:#ffffff;
                       font-weight:bold;
                       text-shadow:0px 1px 2px #333333;
			box-shadow: 2px 5px 10px #888888;
			-webkit-box-shadow: 2px 5px 5px 0px #888888;				
                        padding-left:20px;
                }

                .ccefont1 {
                     font-family: Georgia, "Times New Roman", Times, serif;
                     color:#000000;
                     font-weight:normal;
                     font-size:30px;
                     text-shadow:2px 3px 5px #333333;
                }
                .ccefont3 {
                     font-family: Georgia, "Times New Roman", Times, serif;
                     color:#000000;
                     font-weight:normal;
                     font-size:8px;
                }

                .ccefont2 {
                     font-family: Georgia, "Times New Roman", Times, serif;
                     font-weight:normal;
                     color:#ffffff; 
                     font-size:18px;
                     text-shadow:2px 3px 5px #333333;
                }
                
                .contentbox4, .contentbox4 h3, contentbox4 p {
                    background-image:none;
                     font-family: Georgia, "Times New Roman", Times, serif;
                }