@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url(../font/raleway.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(../font/SourceSansPro.woff) format('woff');
}



.hide{ display:none; }
.fLeft{ float:left; }
.fRight{ float:right; }
.clearBoth{ clear:both; }
.aLeft{ text-align:left; }
.aRight{ text-align:right; }
.vaTop{ vertical-align:top; }
.vaBottom{ vertical-align:bottom; }

body{ font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:center; background:url(../image/BG_Exclaimation.png) no-repeat bottom center; }


#pageContainer{ padding:0; margin:0 auto; width:900px; text-align:left; }

#header{ position:relative; height: 580px; }
#header h1, #header h2{ margin:0; padding:0 }
#CUHK_Logo a, #ILC_Logo a, #DIY_Logo a{ display:block; width:100%; height:100%; }
#CUHK_Logo{ background:url(../image/CULogo.png) no-repeat; width:67px; height:53px; position:absolute; top:130px; right:75px;  }
#ILC_Logo{ background:url(../image/ILCLogo.png) no-repeat; width:70px; height:54px; position:absolute; top:130px; right:150px; }
#DIY_Logo{ background:url(../image/DIY_Logo.png) no-repeat; width:320px; height:130px; position:absolute; top:0px; left:10px; }

#menu{ position:absolute; top:135px; left:-10px; width:330px; height:330px; background:url(../image/buttonShadow.png) no-repeat left 5px;}
#menu ul{ list-style:none; display:block; position:relative; }
#menu li{ display: block; width:150px; height:150px; position:absolute; }
#menu li a{ display:block; width:150px; height:150px; text-decoration:none; color:#FFFFFF; font-weight:normal; font-family:'Raleway', Arial, Helvetica, sans-serif; }
#menu li a span{ display:block; padding: 80px 10px 0 0; text-align:right; font-size:29px; }
#btn_Read{ background:url(../image/btn_Read.png) no-repeat 0 0; }
#btn_Watch{ background:url(../image/btn_Watch.png) no-repeat 0 0; }
#btn_Listen{ background:url(../image/btn_Listen.png) no-repeat 0 0; }
#btn_Write{ background:url(../image/btn_Write.png) no-repeat 0 0; }
#btn_Read:hover, #btn_Watch:hover, #btn_Listen:hover, #btn_Write:hover{ background-position:0 -160px; }

#il_Read{ top:0; left:10px; }
#il_Watch{ top:0; left:165px; }
#il_Listen{ top:155px; left:10px; }
#il_Write{ top:155px; left:165px; }

#featurePic{ width:841px; height:378px; position:absolute; top:200px; left:40px; }
#bodyContainer{ padding:0 45px 0 50px; }

#footerContainer{ color:#FFFFFF; background:#C3C3C3; border-top:2px solid #e1e1e1; height:250px; text-align:center;  }
#footer{ margin: 0 auto; width:820px; font-size:13px; text-align:left; padding: 20px 40px;  }
#footer h5{ font-size:13px; }
#footCircles{ height:44px; margin:10px 0; }

#footCircles a{ text-decoration:none; margin-right:2px; display:block; float:left; width:44px; height:44px; background-repeat:no-repeat; background-position:0 0; }
#footCircles a:hover{ background-position:0 -50px; }
#btn_SmallRead{ background-image:url(../image/btn_ReadSmall.png); }
#btn_SmallWatch{ background-image:url(../image/btn_WatchSmall.png); }
#btn_SmallListen{ background-image:url(../image/btn_ListenSmall.png); }
#btn_SmallWrite{ background-image:url(../image/btn_WriteSmall.png); }
#footCircles a:hover span{ display:block; position:relative; text-align:center; top:-17px; color:#FFFFFF;}


.footItem{ margin-right:20px; }
#footer h5, #footer p{ margin:0; padding:0; }