@CHARSET "BIG5";
* {
    box-sizing: border-box;
}
a{
    text-decoration:none;
}
html, body {
  width: 100%;
  height: 100%;
}

.home-body{
  margin: 0 auto;
  background: #ffffff url("./leftNav_bg.PNG") repeat-y left top;
  background-size: 290px 100%;
}
.analysis-body{
  min-width:900px;
  margin: 0 auto;
  background: #ffffff url("./leftNav_bg.PNG") repeat-y left top;
  background-size: 300px 100%;
}
p{
  text-indent: 50px;
  text-align: justify;
}
sup.ref{color:blue;}
.card{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important}

.top-container{height:108px;width:100%;position:relative;background: #ffffff;}
.top-logo-container{height:inherit;	float:left;}
img.logo{max-width:100%;max-height:100%;opacity:1 !important;}/* to fit the container */
.top-description{position:absolute;right:20px;bottom:10px;font-size:24px;font-family:"Segoe UI",Arial,sans-serif !important;}

.top-nav-container{width:100%;position:relative;}
ol.top-nav{
	background-color:#5F0F4E;
    margin: 0;
    padding: 0;
	font-size:0;
	overflow:hidden;
}
ol.top-nav li{
	float:left;
}
ol.top-nav li a{
	display:inline-block;
	color:white;
	font-size:20px;
	-webkit-transition:all 0.3s ease;
	transition:all 0.3s ease;
	padding:10px 15px 10px 15px !important;
}

ol.top-nav li a:hover:not(.active){background-color:#330F33;}
ol.top-nav li a.active{background-color:#E52A6F;}
ol.top-nav li.icon {display: none;}

.left-nav {
	position:absolute;
	left:0;
	width:286px;
    padding:5px;
    overflow-y:hidden;
    display:block;

}
.homeContent {
	position:relative;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:1.22em;
    line-height:30px;
    margin-left:286px;
    padding:20px;
    overflow:auto;
    display: none;
    -webkit-animation: fadeEffect 0.5s;
    animation: fadeEffect 0.5s;

}

ul.LN{
    float:left;
    padding:0 3px;
    overflow-y:hidden;
    display:block;
}
ul.LN li {
	float: left;
}
ul.LN li a {
	display: inline-block;
    font-family:"Segoe UI",Arial,sans-serif !important;
    font-size:1.22em;
    line-height:30px;
	padding: 0.5em; 
	margin-top: 0.4em;
	width:270px;
	border-radius: 5px; 
	background: #E0CFD5; 
	color:#5F0F4E;
	border:none;
	font-weight:600;
	letter-spacing:-1px;
    text-decoration: none;
    transition: 0.3s;
}
ul.LN li a:hover {background-color: #C1A3AD;}
ul.LN li a:focus {background: #801656; color: white;}
ul.LN li a.active {background: #5F0F4E; color: white;}


.home-image-container {
	display:block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    max-width:530px;
    overflow-x:auto;
    margin:auto;
}
img.home-image{
	width:500px;
	margin:auto;
}

img.faq{
	max-width:600px;
	margin:auto;
	
}

h3.home-title{
	text-align:left;
}
.acknowlegements{
	margin:20px;
}
.acknowlegements h3,h1{
	color:#801656;
}
.acknowlegements a{
	color:#4390AD;
}
.ACcontent a{
	color:#4390AD;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@media only screen and (max-width: 1300px) {
    .top-logo-container{height:96px;}
    .top-description{left:20px;bottom:0px;}
}/* description go to left */
@media only screen and (max-width: 945px) {
	.top-logo-container{float:none;}
    img.logo{display:block;margin:auto;}
    .top-description{font-size:20px;text-align:center;letter-spacing:0px;font-weight:600;}
}/* logo and description go to center */
@media only screen and (max-width: 900px) {
	.home-image-container{
	max-width:430px;
	}
	img.home-image{
	width:400px;
	}
	h3.home-title{
	letter-spacing:-1px;
	}
	.homeContent p{
	letter-spacing:-1px;
	}
}/* logo and description go to center */
@media only screen and (max-width: 600px) {
	.top-container{height:96px;}
	.top-logo-container{height:80px;}
    .top-description{font-size:16px;text-align:center;letter-spacing:0px;font-weight:500;}
}
@media only screen and (max-width: 492px) {
	.top-container{height:92px;}
    .top-description{font-size:12px;text-align:center;letter-spacing:-1px;font-weight:500;}
}
/* For a resoponsive top-nav */
@media screen and (max-width:680px) {
  ol.top-nav li:not(:first-child) {display: none;}
  ol.top-nav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ol.top-nav.responsive {position: relative;}
  ol.top-nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ol.top-nav.responsive li {
    float: none;
    display: inline;
  }
  ol.top-nav.responsive li a {
    display: block;
    text-align: left;
  }
}
.floating-text-box {
    float: left;
    max-width: 600px;
    margin: 10px;
}
.wrapper-main {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
}

.footer p{
	float: right;
	display: inline-block;
	color: #999999;
}

.footer Img{
	float: right;
	display: inline-block;
	height: 50px;
	padding: 5px;
	margin-left: 20px;
	opacity: 0.6;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    max-height: 50px;
    max-width: 350px;
    background-color: #fff;
}

.footer Img:hover{
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}