html { margin:0px; padding:0px; background:#EEEEEE; }
body { margin:0px; padding:0px; max-width:1680px; margin:0px auto; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; 
	font-family:'Segoe UI', HelveticaNeue, Arial, sans-serif; font-size:20px; color:#222222; }
.page {max-width:1000px; min-width:240px; margin:0px auto; padding-left:1.5%; padding-right:1.5%;  background:#FFFFFF;}

.menubar {background:#000088; font-size:90%;}
.menubar ul {margin:0em; padding:0.5em 0em; list-style:none; color:#FFFFFF}
.menubar li {display:inline; margin:0em 3em 0em 0em; }
.menubar .last {margin:0px;}
.menubar .right {float:right; margin:0px;}
.menubar a {text-decoration:none; color:#FFFFFF; padding:0.5em 0.2em;}
.menubar a:hover {color:#00FFFF;}
#logo {float:right; padding-top:0.4em; padding-bottom:0em;}
#logo img {height:1.5em; border:0px;}
#expand_menu {display:none; padding-left:1em; padding-right:4em;}
#expand_menu img {position:relative; top:2px; border:0px;}

.title, h1 {font-family:Impact, HelveticaNeue-CondensedBlack, "Droid Sans", AvenirNextCondensed-Bold, Futura-CondensedExtraBold, 'Times New Roman', Arial;
	color:#4488cc; font-size:300%; font-weight:normal; margin:0px; padding-top:0.125em; padding-bottom:0.125em; line-height:1em;}
.long.title, h1.long , .long  h1 {font-size:275%; padding-top:0.15em; padding-bottom:0.15em;}

.titlebar {
	background: #D4EEFF;
	background: -webkit-linear-gradient(#AADDFF, #FFFFFF);
	background: -o-linear-gradient(#AADDFF, #FFFFFF);
	background: -moz-linear-gradient(#AADDFF, #FFFFFF);
	background: linear-gradient(#AADDFF, #FFFFFF);
	padding-top:0.3em; padding-bottom:0.1em;
}

.titlebar div {display:table-cell; vertical-align:middle;}
.title2 { padding-left:1em; font-size:80%; color:#224477;}
.tagline{ color:#000088; border-top:1px solid #000088; border-bottom:1px solid #000088; padding-bottom:0.1em;
	font-weight:normal; font-size:100%; }

.content {padding-top:0.75em; padding-bottom:1.5em; line-height:1.5em}

#leftcol {display:table-cell; flxoat:left; vertical-align:top; padding-right:1em;}		
.left_menu {font-size:90%; line-height:1.2em}
.left_menu_title {font-weight:bold; padding:0.5em 1em;border-bottom:solid #888888 1px; background:#CCCCCC;}
.left_menu a {display:block; padding:0.5em 1em; border-bottom:solid #888888 1px; 
	background:#F4F4F4; text-decoration:none; color:#000000;}
.left_menu a:hover { background-color:#FFFF00; }
.left_menu .selected { background-color:#99FF99; }

#rightcol {display:table-cell; vertical-align:top; width:100%}

.right_menu {display:block; float:right; max-width:50%; margin-top:0.3em; margin-left:1em;}
.right_menu img {display:block; max-width:100%; border:0px; margin-bottom:0.5em;}

.content_title {font-size:150%; font-weight:bold; color:#000088; margin:0px 0px 0.5em 0px;}
.content_desc {margin:0px 0px 1em 0px;}
.info {padding:0px 0px 0px 50px; background:url(images/info_40.png) no-repeat; background-position:0.0em 0.3em;}

.point {margin:0em 0px 1em 0px;}
.pointtitle, h3 {font-weight:bold; color:#C00000; font-size:inherit; margin:0px; padding:0px;}

.footerbar {background:#000088; font-size:90%; color:#FFFFFF; text-align:center; 
	padding-top:0.5em; padding-bottom:0.5em; clear:both;}
.footerbar:before {content:"\00A9  Advanced Software Engineering Ltd"}

@media (max-width:920px) {
	.menubar li	{margin-right:1.5em}
	.long.titlebar {font-size:80%;}
}

@media (max-width:799px) {
	.content {font-size:90%;}
	.titlebar {font-size:80%;}
}

@media (max-width:750px) {
	.menubar li	{margin-right:0.4em}
}
	
@media screen and (max-width:619px) {
	.menubar {text-align:left;}
	.menubar {padding-left:0px;}
	.menubar ul {position:absolute; visibility:hidden; padding:0px; margin:0px; background:#3388ff;}
	.menubar li {display:block; border-bottom:1px solid #0000ff; margin:0px;}
	.menubar .last {border-bottom:1px solid #3388ff;}
	.menubar li a {display:block; padding:0.5em 1.5em 0.5em 1.5em; }
	#expand_menu {display:inline-block;}
	
	.content {font-size:80%}
	
	#leftcol {display:table; width:100%; float:none; padding:0em; margin:0px 0px 1em 0px; text-align:center;}
	.optional {display:none !important;}
	.left_menu {display:table; width:100%; font-size:100%; padding:0px; margin:0px;}
	.left_menu .table {display:table; border-collapse:collapse; width:100%;}
	.left_menu_title {display:table-caption; border:1px solid #CCCCCC;}
	.left_menu .row {display:table-row;}
	.left_menu a {display:table-cell; width:50%; padding:0.5em; border:1px solid #CCCCCC;}
	
	.right_menu { width:50%; max-width:48vw; }
}

@media screen and (max-width:499px) {
	.fullscreen_on_narrow { width:100%; max-width:96vw; float:none; clear:both; margin:0.5em auto 0.5em auto; padding:0px; }
}

@media screen and (max-width:400px) {
	.footerbar {font-size:75%;}
	.tagline, h2 {font-size: 80%;}
	.titlebar {font-size:60%}
}