/*
Based on Origo (v1.1 - Oct 04, 2012). For more information, see http://andreasviklund.com/templates/origo/
Modified by Shenghui Wu at June 15, 2029 for the home page of Computational Cognitive Engineering Lab @ HKUST.
*/

*{margin:0; padding:0;}

/* General styles */
body {background:#0a0a0a url(../images/background.jpg) top center no-repeat; color:#ccc; font:100% 'Economica',Tahoma,sans-serif; line-height:1.3em;}
a {color:#d06060; text-decoration:none; font-weight:400;}
a:hover {text-decoration:underline;}
p {margin:0 0 15px 0; line-height:1.2em; font-size:1.0em; text-align: justify;}
ul,ol,dl {margin:0 0 15px 0; line-height:1.5em;}
h1 {color:#00FF00; font-size:1.0em; margin-bottom:0;}
/* h1 a {text-transform:none; font-weight:400;} */
h1 a:hover {text-decoration:none; color:#FF0000;}
h2 {font-size:2.2em; color:#333; margin:0 0 5px;}
h3 {font-size:1.6em; margin:0 0 5px 0;}
/* h2,h3 {color:#d06060; font-weight:400; line-height:1.2em; font-family:'Economica', sans-serif;} */
h4 {font-size:1.2em}

/* Main layout container */
#layout {margin:40px auto 0; width:960px;}
body.wider #layout {margin:40px auto 0; width:1200px;}

/* Footer */
#footer {background:#0a0a0a url(../images/insidebg.jpg) top center no-repeat;}
#footer .col {color:#555; border-top:1px dotted #1a1a1a; padding:20px 0;}
#footer p {text-align:center;}
#footer a {color:#555; font-weight:400; text-decoration:none; border-bottom:1px dotted #333;}
#footer a:hover {color:#aaa; text-decoration:none; border-bottom:1px dotted #888;}
#footer p#link {margin: 0 0 5px 0; font-size: 1.2em;}
#footer #link a {color:#003874; font-weight:400; text-decoration:none; }
#footer #link a:hover {color:#2168b4; text-decoration:none; border-bottom:1px dotted #888;}

/* Grid classes, fixed width, 960px with 12 columns */
.col {margin:0 10px; overflow:hidden; float:left; display:inline;}
.col img {max-width:100%;}
.row {width:960px; margin:20px auto 0; overflow:hidden;}
.row .row {margin:0 -10px; width:auto;	display:inline-block;}
.c1 {width:60px;}
.c2 {width:140px;}
.c3 {width:220px;}
.c4 {width:300px;}
.c5 {width:380px;}
.c6 {width:460px;}
.c7 {width:540px;}
.c8 {width:620px;}
.c9 {width:700px;}
.c10 {width:780px;}
.c11 {width:860px;}
.c12 {width:940px;}

/* Grid classes, fixed width, 1200px with 12 columns - add class="wider" to the <body> element to use this */
body.wider .row {width:1200px;}
body.wider .c1 {width:80px;}
body.wider .c2 {width:180px;}
body.wider .c3 {width:280px;}
body.wider .c4 {width:380px;}
body.wider .c5 {width:480px;}
body.wider .c6 {width:580px;}
body.wider .c7 {width:680px;}
body.wider .c8 {width:780px;}
body.wider .c9 {width:880px;}
body.wider .c10 {width:980px;}
body.wider .c11 {width:1080px;}
body.wider .c12 {width:1180px;}

/* Menu list styles */
ul.menu {list-style:none; margin:0; padding:10px 0; border-top:1px solid #333;}
ul.menu li {list-style:none; text-align:center; font-size:1.2em; margin:0 0 10px; padding:0 0 8px 0; color:#888; border-bottom:1px solid #333;}
ul.menu li a {font-size:1.2 em; font-weight:400;}
ul.menu li a:hover {color:#eee; text-decoration:none;}

/* attempt at new style */
ul.inline li {font-size:0.9em}
ul.inline li a {color:#0021a5}

/* Additional text classes */
.slogan {color:#bbb; font-size:1.0em;}
.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}
.alignjustify {text-align:justify;}
.nomargin {margin:0; padding:0;}
.separator {height:100px; margin:0; padding:0; background: #0a0a0a url(../images/insidebg2.jpg) bottom center no-repeat; border-bottom:1px dotted #1a1a1a;}
.larger {font-size:1.2em;}
.smaller {font-size:0.9em;}
.spacer {margin:0 20px;}
.clear {clear:both;}
.hide {display:none;}

/* Light styles, apply by using class="light" on the body HTML element */
body.light {background:#f5f5f5 url(../images/background-light.jpg) top center no-repeat; color:#555;}
body.light a {color:#d06060;}
body.light a:hover {color:#2168b4;}
body.light h1 {color:#000000; font-size:1.2em; margin-bottom:0;}
body.light h1 a:hover {color:#015bbb;}
body.light h2 {color:#555;}
/* body.light h1,  */
body.light h2 {color:#000000;} 
body.light h3 {color:#003874;}
body.light ul.menu {border-top:1px solid #ddd;}
body.light ul.menu li {border-bottom:1px solid #ddd;}
body.light ul.menu li a:hover {color:#333;}
body.light .separator {background: #f5f5f5 url(../images/insidebg2-light.jpg) bottom center no-repeat; border-bottom:1px dotted #ccc;}
body.light .slogan {color:#444;}
body.light #footer {background:#f5f5f5 url(../images/insidebg-light.jpg) top center no-repeat;}
body.light #footer .col {color:#555; border-top:1px dotted #ccc;}
body.light #footer a {color:#555; border-bottom:1px dotted #ddd;}
body.light #footer a:hover {color:#444; border-bottom:1px dotted #eee;}

/* Alternate colors, apply by adding class="blue" (or any of the other available colors) to the body HTML element */
body.blue a {color:#003874;}
/* body.red h1 {color:#000000; font-size:1.0em} */

/* Freestyle01 additions */
body.freestyle01 {font:105% 'Alike';}
body.freestyle01 #layout {margin:20px auto 0; width:960px; min-height: 110vh;}
/* body.freestyle01 h1, body.freestyle01 h2, body.freestyle01 h3, body.freestyle01 ul.menu li a */
/* {font-family: 'Dosis', sans-serif;} */
/* body.freestyle01 p.slogan {font-family: 'Dosis', sans-serif; text-transform; margin-top:10px; font-size:1.3em;} */
body.freestyle01 p.slogan {text-transform:upper-case; margin-top:10px; font-size:1.3em;} */
body.freestyle01 h1 {line-height:1.7em;}
body.freestyle01 h1 {font-size:1.8em;}
body.freestyle01 h2 {font-size:1.5em; font-weight:bold;}
body.freestyle01 h3 {font-size:1.5em;}
body.freestyle01 h4 {font-size:1.2em; font-weight:bold;}
body.freestyle01 ul.menu {list-style:none; margin:0 0 15px 0; border:0; padding:0; position:relative;}
body.freestyle01 ul.menu li {list-style:none; text-align:left; font-size:0.9em; margin:0 0 1px; border:0; color:#888;}
body.freestyle01 ul.menu li a {font-size:1em; color:#555; padding:7px 5px 7px 8px; border-left:5px solid #ccc; background-color:#a8cde7; display:block; font-weight:bold;}
/* body.freestyle01 ul.menu li a.current {color:#333; border-color:#3288a8; background-color:#dadada;text-decoration:none;} */
body.freestyle01 ul.menu li a.current {color:#fff; border-color:#003874; background-color:#2a75ac;text-decoration:none;}
body.freestyle01 ul.menu li a:hover {color:#fff; border-color:#015bbb; background-color:#2a75ac;text-decoration:none;transition: .3s;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;}
body.freestyle01 ul.menu ul.subpages {margin:9px 0 -10px 15px;}
body.freestyle01 ul.menu ul.subpages a {font-size:0.8em; padding:4px 5px 4px 8px;}
body.freestyle01 #footer {font-size:0.7em; color:#999;}
body.freestyle01 #footer p {color:#999;}
body.freestyle01 #footer p a {color:#999;}
body.freestyle01 #footer p a:hover {color:#555;}
body.freestyle01 #ctrblock li {font-size:0.9em; line-height:1.3em;}
body.freestyle01 #ctrblock a {color:#B40000;}
body.freestyle01 #ctrblock a:hover {color:#2168b4;}
body.freestyle01 #ctrblock.contact li {font-size:1.0em; line-height:1.3em;}

.go-top {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 35px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #404040;
  color: #FFFFFF;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.go-top.show { bottom: 20px; }

.go-top:hover {
  background-color: #2168b4;
  color: #FFFFFF;
}

.go-top .fa.fa-angle-up {
  color: #FFFFFF;
}