body {background: #FFFFFF; color: #333333;  font-family: courier new, tahoma, arial; font-size: 15px; margin: 0px; padding: 0px; text-align: center; }
h2 { color: #008ABC; font-family: courier new, tahoma, arial; font-size: 16px; }
p{ line-height: 110%; margin: 0px; padding: 0px;}
ul{ line-height: 110%; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;}
* html body { }
html,body{height:100%;width:100%;}
img { border: 0px; }
a{ color: #333333; }

.outer{ height:100%; width:100%; display:table; vertical-align:middle; }
.container { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 667px; } 
.inner { width: 778px; height: 667px; text-align: left; margin-left:auto; margin-right:auto; position: relative;}
.choice { width: 778px; height: 592px; background: url(../imgs/white10perc.png) repeat; position: absolute; left: 0px; top: 75px; z-index:102;}
.chlang { width: 340px; height: 120px; background: url(../imgs/lang_bg.gif) no-repeat; margin:200px auto; text-align: center; padding-top: 20px;}
.chlang p, .chlang a{color: #FFFFFF; font-size: 14px;}
.chlang a{ padding: 0px 10px 0px 10px; text-decoration: none;}
.chlang a:hover{ /*color: #BBBBBB;*/ font-weight: bold; text-decoration: none; }
.space{ width: 778px; height:10px;}
.container_logo{ height:109px; width: 778px;}
.logo{ background: url(../imgs/baseone_logo.jpg) no-repeat; margin-left: 23px; width: 263px; height:109px; float: left;}
.moto{ height:20px; width:468px; padding: 29px 24px 0px 0px; font-size: 16px; float: left; text-align: right;}
.moto b{ color: #008ABC; font-weight: bold;}
.langbar{ height:20px; width:468px; padding: 40px 24px 0px 0px; font-size: 12px; float: left; text-align: right;}
.langbar a{ color: #333333; padding: 0px 8px 0px 8px; text-decoration: none;}
.langbar a:hover{ color: #008ABC; font-weight: bold; text-decoration: none;}
.langbar span{ color: #008ABC; font-weight: bold; padding: 0px 8px 0px 8px; text-decoration: none;}
.pg_left{ width:20px; height: 496px; float: left;}
.pg_right{ width:15px; height: 366px; /* h+ p-t + p-b = 496*/padding:125px 0px 5px 5px; float: right; font-size: 13px}
.pg_right hr{ border: 0 none currentColor; border-top: 1px solid #333333; height: 0px; margin: 15px 8px 15px 0px; width: 7px;}
.pg_right a{ font-size: 12px; color: #A0A0A0; text-decoration: none; padding-top: 15px;}
.pg_right a:hover{ color: #333333;}
.playground{ width:738px; height: 496px; float: left; position: relative;}
/* 628/240 = 2,616666666666667 */
.blue { background: url(../imgs/blue.gif) no-repeat; margin: 3px; padding: 0px; width: 240px; height:240px; float: left;}
.blueon { background: url(../imgs/darkblue.gif) no-repeat; margin: 3px; padding: 0px; width: 240px; height:240px; float: left;}
.grey { background: url(../imgs/grey.gif) no-repeat; margin: 3px; padding: 0px; width: 240px; height:240px; float: left;}
.greyon { background: url(../imgs/darkgrey.gif) no-repeat; margin: 3px; padding: 0px; width: 240px; height:240px; float: left;}
.blueon a,.blueon1 a,.blueon2 a,.blueon3 a, .greyon a,.greyon1 a,.greyon2 a,.greyon3 a, .blue a, .grey a{ color: #FFFFFF; font-size: 22px; font-weight: bold; text-decoration: none; width: 220px; height:40px; display: block; padding: 200px 0px 0px 20px}
.menu { width: 778px; text-align: center; padding:16px 0px 20px 0px; font-size: 16px;}
.menu a{ padding: 0px 10px 0px 10px; text-decoration: none;}
.menu a:hover{ color: #008ABC; font-weight: bold; text-decoration: none;}
.menu span{ font-weight: bold; padding: 0px 10px 0px 10px; text-decoration: none;}
.on{ color: #008ABC; font-weight: bold; padding: 0px 10px 0px 10px; text-decoration: none;}
.heading h3 { color: #333333; font-family: arial, tahoma, courier new, tahoma, arial, tahoma; /*font-family: courier new, tahoma, arial;*/ font-size: 14px; margin: 0px; padding: 0px;}
.heading h2 { color: #008ABC; font-family: arial, tahoma, courier new, tahoma, arial, tahoma; /*font-family: courier new, tahoma, arial;*/ font-size: 15px; margin: 0px; padding: 0px;}
.heading {text-align: left; margin: 10px 0px 5px 10px; font-weight: bold; float: left;}
.close {text-align: right; margin: 10px 10px 0px 0px; font-weight: bold; float: right;}
.close a{ color: #333333; font-weight: bold; text-decoration: none; font-size: 16px; padding: 5px;}
.close a:hover{ color: #008ABC; font-weight: bold; text-decoration: none; }
.c1 {width: 280px; display: inline-block;}
.textblock { background: #FFFFFF; opacity: 0.98; filter: alpha(opacity=98); display: none;}
.textblock p{ font-family: calibri, arial, tahoma; margin: 8px /*from top*/ 40px /*from right*/ 8px /*bottom*/ 20px /*from left*/; padding: 0px; text-align:justify; filter:alpha(opacity=100); opacity:1; background-color: #fff; }
.textblock p.bluep{ color: #008ABC; filter:alpha(opacity=100);opacity:1; background-color: #fff;}
.textblock p.bluep b{ color: #333333;}
.textblock p.bluep a{ color: #008ABC; filter:alpha(opacity=100);opacity:1; background-color: #fff;}
.textblock p.bluep a:hover { text-decoration: none;}
a.download { text-decoration: none; color: #008ABC;}
/*a.download:hover{ text-decoration: underline;}*/
a.download:hover{ color: #333333;}

.textblock div.clear ul{list-style-image: url(../imgs/bullet10.gif); margin: 5px 40px 0px 20px; padding: 0px 0px 0px 15px; font-size: 15px; font-family: calibri;}
.textblock div.clear ul p{ margin: 2px 0px 2px 5px; padding: 0px;}

.textblock ul{ list-style-type:square; font-family: tahoma, arial, tahoma; text-align: justify; filter:alpha(opacity=100);opacity:1; background-color: #fff;}
/*.tooltipped { text-decoration: overline;}
.tooltipped:hover{ text-decoration: none;}*/
.tooltipped { border-bottom: 0px dotted #333333; padding-left: 10px; padding-right: 10px;}
.tooltipped:hover{ border-bottom: none; background: #EEEEEE; color: #008ABC;}
.textblock li{ padding-bottom: 1px; padding-left: 1px; text-align: justify;}
.textblock div.float {float:left; padding: 0px 15px 0px 0px;}
.textblock div.float p, .textblock div.floatl p{ margin: 3px -15px 3px 20px;}
/*.textblock div.float {float:left; width:237px; text-align: left; background: green;}*/
.textblock div.floatl {float:left;}
.textblock div.clear, .clear {clear:both;}

.bbg {  position: absolute; top: 0; left: 0; background: #e0e0e0; width: 100%; opacity: 0.96; filter:alpha(opacity=96); display: none;}
.bigtxt { margin: 50px auto; width: 800px; display: block; z-index: 9999; background: white; box-shadow: 2px 2px 5px #888888; padding: 16px; padding-bottom: 24px;}
.bigtxt .clear {padding-left: 10px; padding-right: 20px; text-align: justify; }
.bigtxt .close {margin: 10px 0px 0px 0px; }

#scroll-pane1 { width: 100%; height: 416px; overflow: auto; }
#scroll-pane2 { width: 100%; height: 176px; overflow: auto; }
#scroll-pane3 { width: 100%; height: 416px; overflow: auto; }
#scroll-pane4 { width: 100%; height: 416px; overflow: auto; }
#scroll-pane5 { width: 100%; height: 176px; overflow: auto; }
#scroll-pane6 { width: 100%; height: 416px; overflow: auto; }
#scroll-paneB1 { width: 780px; height: 620px; overflow: auto; }


/*.textblock div.left {float:left; width: 296px;  }
.textblock div.right {float:right; width: 170px; background: red;}*/
#text1, #text4 { position: absolute; top: 13px; left: 259px; width: 466px; height: 466px;}
#text2 { position: absolute; top: 259px; left: 13px; width: 712px; height: 220px;}
#text5 { position: absolute; top: 13px; left: 13px; width: 712px; height: 220px;}
#text3, #text6 { position: absolute; top: 13px; left: 13px; width: 466px; height: 466px;}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	/*opacity: 0.85;*/
}
#tooltip h3, #tooltip div { margin: 0; }

#tooltip.pretty {
	font-family: Tahoma;
	border: none;
	width: 240px;
	padding:20px;
	height: 131px;
	background: url('../imgs/shadow2.png');
}
#tooltip.pretty h3 {
	margin-bottom: 0.75em;
	font-size: 13px;
	width: 240px;
	text-align: justify;
	font-weight: normal/*normal*/;
	color: #008ABC;
}
#tooltip.pretty div { width: 240px; text-align: center; }
#tooltip ul {list-style-image: url(../imgs/bullet19.gif) ; margin-left: 5px; padding-left: 5px; line-height: 150% }

