body { background: #999999; }
body, tbody, table, td, th { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
/*** main page ***/
.section-magcontent, .section-webbanner, .section-editor { margin-bottom: 50px }
.section-magcontent { }
.section-webbanner { }
.section-webbanner .item { margin-bottom: 10px }
.section-editor { }
.section-editor .bar { margin-bottom: 10px }
.section-editor .title { margin-bottom: 10px; font-size: 22px; font-weight: bold; padding: 10px 0px 7px 0px; text-align: center }
.section-editor .content { }
.section-editor .content p { font-size: 13px; line-height: 18px; }
.section-editor .content td { }
.section-bottom { }
.section-bottom .item { margin-bottom: 10px }
.iss_img { padding: 0 15px 15px 0; }
.banner { padding: 20px 0 20px 0; }
.right_b #demo #demo1 ul p { font-size: 12px; color: #DE7A1C; }
.right_b #demo #demo2 ul p { font-size: 12px; color: #DE7A1C; }
#demo { overflow: hidden; width: 200px; float: left; display: inline; background-color: #fff; }
.school_banner { margin: 15px 0px }
.clr { clear: both }
.main-cover-pic { background: url(../images/homepage_banner.jpg) right top no-repeat; padding: 10px 0px 0px 3px }
.main-cover-story { padding: 5px 0px 0px 3px; text-align: justify }
/* left bar */
#ben a { float: left; }
#test a { float: left; }
#func_banner a { float: left; }
#friend a { float: left; }
.iss_bar { display: none; height: 200px }
#leftbar { }
#leftbar .list { height: 350px; margin-bottom: 20px }
#leftbar .section { margin-bottom: 10px }
#leftbar .item { margin-bottom: 15px; margin-left: 10px }
.mainbar_3d { width: 25px; height: 49px; position: absolute; top : 120px; left: 898px; background-image: url(../images/3d_bar1.jpg); background-repeat: no-repeat; }
.logoimg { position: absolute; top : 0; left: 35px; }
#container { float: left; min-height: 100%; margin: 0 0 0 20px; position: relative; }
#header { background: #ffffff; float: left; background-image: url(../images/logo.jpg); background-repeat: no-repeat; }
#body { background: #ffffff; float: left; width: 888px; padding-bottom: 10px;	/* Height of the footer */ padding-left: 10px; background-image: url(../images/left_bar_bg.jpg); background-repeat: repeat-y; }
#footer { width: 100%; float: left; bottom: 0; height: 60px;		/* Height of the footer */ }
/* other non-essential CSS */
#header p, #header h1 { margin: 0; }
#footer p { margin: 0; }
/*/////////////////////////////////////////////////MAIN MENU*/
.activetop { background: #008C2C; }
.main_bar { width: 580px; margin: 0px 0px 0 318px; padding: 0; }
.main_bar img { padding: 0; margin: 0px }
ul#main_menu { float: left; height: 28px; width: 500px; font-size: 12px; font-family: "Lucida Grande", Verdana, sans-serif; list-style-type: none; margin: 0; padding: 0 0 0 80px; background-image: url(../images/main_bar_bg.jpg); }
ul#main_menu li { display: block; float: left; height: 20px; width: 100px; margin: 0; margin: 0 0 5px 0; }
ul#main_menu li a { color: #ffffff; width: 100px; text-decoration: none; display: block; text-align: center; line-height: 20px; padding: 0 0 0 0; margin: 0; }
ul#main_menu li:hover { background: #008C2C;	/*background-image:url(head_menu_bg.png); */	/*color: #ffffff; */ }
/*///////////////////////////////////////////////////footer*/
ul#footer_menu { padding: 0 0 0 250px; float: left; height: 20px; font-size: 12px; font-family: "Lucida Grande", Verdana, sans-serif; list-style-type: none; border-left: solid 1px #aaaaaa; }
ul#footer_menu li { display: block; float: left; margin: 0; border-right: solid 1px #aaaaaa; }
ul#footer_menu li a { color: #555555; text-decoration: none; display: block; line-height: 120%; padding: 0px 20px 0 20px; margin: 0; }
ul#footer_menu li a:hover { background: #009900; background-image: url(../images/footer_onclick.jpg); color: #ffffff; }
.footer_bar { border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd; background: #eeeeee; height: 50px; width: 898px; margin: 0 0 0 0; padding: 10px 0 10px 0px; }
.copyright { float: left; padding: 20px 0 0 260px; font-size: 10px; font-family: Verdana; }
/*//////////////////////////////////////////////left_bar*/
.left_bar {/*position: absolute;*/ Position: relative;	/*top: 119px;*/ width: 100%; height: 100%; margin: 0px; padding: 0px 0px 0 30px; float: left; }
/*//////////////////////////////////////////////left_bar*/
.right_bar { Position: relative;	/*background-attachment:fixed;	background-position: 9px 119px;	*/	/*top: 119px;*/ width: 400px; margin: 0px 0px 0 0px; }
/*//////////////////////////////////////////////search_bar*/
.search_bar {	/*background: #008C2C;*/ background-image: url(../images/search_bg.jpg); background-repeat: no-repeat;/*Position:relative*/ position: absolute; top: 100px; left: 40px; width: 272px; height: 100px; padding: 0 0 0 25px; }
ul#search_menu { float: left; width: 240px;	/*background: #ff00ff;*/ font-size: 12px; font-family: "Lucida Grande", Verdana, sans-serif; list-style-type: none; margin: 15px 0px 0 0px; padding: 0; }
ul#search_menu li { height: 18px; display: block; float: left; margin: 0;/*border-right:solid 1px #aaaaaa;*/ border-left: solid 1px #aaaaaa; }
ul#search_menu li a { color: #006C00; text-decoration: none; display: block; 	/*font-weight:bold;*/ line-height: 120%; padding: 3px 6px 0 6px; margin: 0; }
ul#search_menu li a:hover { /*background: #FF9900;*/ background-image: url(../images/search_btn_bg.jpg); }
.search_btn { margin: 8px 0 0 0; line-height: 160%; }
/*//////////////////////////////////////////////iss_bar,friend_bar,banner_bar*/
.iss_bar { font-size: 12px; background: url("../images/bb.jpg") 0 0 no-repeat; margin: 350px 0px 0px 5px; width: 280px; height: 150px; float: left; }
ul#blog_menu { float: left; height: 70px; width: 264px; font-size: 12px; font-family: "Lucida Grande", Verdana, sans-serif; list-style-type: none; margin: 0; padding: 28px 0 0 0; }
ul#blog_menu li { display: block; float: left; height: 70px; width: 70px; margin: 0; margin: 0px 0px 0 12px; }
ul#blog_menu .ben a { text-decoration: none; float: left; height: 70px; width: 70px; background: url("../images/ben_icon.jpg") 0 0 no-repeat; }
ul#blog_menu .ching a { text-decoration: none; float: left; height: 70px; width: 70px; background: url("../images/ching_icon.jpg") 0 0 no-repeat; }
ul#blog_menu .terry a { text-decoration: none; float: left; height: 70px; width: 70px; background: url("../images/terry_icon.jpg") 0 0 no-repeat; }
.ben span { line-height: 14px; display: none; }
.ching span { line-height: 14px; display: none; }
.terry span { line-height: 14px; display: none; }
.ben a:hover span { position: absolute; padding: 0px 0 0 15px; display: block; background: url("../images/cc.jpg") 0 0 no-repeat; top: 465px; left: 35px; height: 120px; width: 264px; color: #eee; text-align: left; }
.terry a:hover span { position: absolute; padding: 0px 0 0 15px; display: block; background: url("../images/cc.jpg") 0 0 no-repeat; top: 465px; left: 35px; height: 120px; width: 255px; color: #eee; text-align: left; }
.ching a:hover span { position: absolute; padding: 0px 0 0 15px; display: block; background: url("../images/cc.jpg") 0 0 no-repeat; top: 465px; left: 35px; height: 120px; width: 255px; color: #eee; text-align: left; }
ul#blog_menu .ben a:hover { background: url("../images/ben_icon_on.jpg") 0 0 no-repeat; }
ul#blog_menu .terry a:hover { background: url("../images/terry_icon_on.jpg") 0 0 no-repeat; }
ul#blog_menu .ching a:hover { background: url("../images/ching_icon_on.jpg") 0 0 no-repeat; }
.friend_bar {	/*background: #008C2C;*/ background-image: url(../images/friend_box_bg.jpg); background-repeat: no-repeat; width: 100%; height: 150px; float: left; }
.banner_bar { padding: 0 0px 6px 13px; width: 100%; float: left; }
.banner_bar a { padding: 10px 0 0 0; width: 100%; }
/**************** left post ***************/
.left_posts { padding: 40px 0 0 15px; }
.left_posts a { font-size: 12px; line-height: 130%; text-decoration: none; color: #CE00CE; }
.left_posts a:hover { color: #000000; text-decoration: underline; }
.left_news { padding: 45px 0 0 15px; }
.left_news a { font-size: 12px; line-height: 130%; text-decoration: none; color: #006432; }
.left_news a:hover { color: #000000; text-decoration: underline; }
.left_blog { background-image: url(../images/left_blog_icon.jpg); background-repeat: no-repeat; padding: 40px 0 0 5px; }
.left_blog a { font-size: 12px; line-height: 130%; text-decoration: none; color: #0080FF; }
.left_blog a:hover { color: #000000; text-decoration: underline; }
.iframe_c { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 5px 0 0 0; top: 190px; left: 38px; position: absolute; }
p.left_box { text-align: left; margin: 15px 0; font-size: 12px; }
p.left_box a { line-height: 22px; color: #3E7155; text-decoration: none; }
.detail a { font-size: 12px }
p.left_box a:hover { color: #000000; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #000000; }
p#cross-links { text-align: left }
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }
a:focus { outline: none }
img { border: 0 }
h4 { border-bottom: 1px solid silver; text-decoration: none; font-size: 14px; margin-bottom : 5px; padding-bottom: 3px; text-align : left; color : #70B08D }
.stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; }
.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 5px 0 0 0; position: relative; width: 280px; }
/* These 2 lines specify style applied while slider is loading */
.csw { width: 100%; height: 0px; background: #fff; overflow: hidden }
.csw .loading { margin: 0px 0 0px 0; text-align: center }
.stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; border-top: 2px solid #70B08D; /* this is the border. should have the same value for the links */ border-bottom: thin dotted #70B08D; /* this is the border. should have the same value for the links */ width: 280px; margin: 0; /*width: 240px;  Also specified in  .stripViewer .panelContainer .panel  below */ height: 250px; clear: both; background: #fff; }
.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none;/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ }
.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float: left; height: 100%; position: relative; width: 280px; /* Also specified in  .stripViewer  above */ }
.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; }
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; }
.stripNav ul { /* The auto-generated set of links */ list-style: none; }
.stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */ }
.stripNav a { /* The nav links */ width: 60px; font-size: 12px; text-align: center; line-height: 24px; background: #DDEDE3; color: #000; text-decoration: none; display: block; padding: 0 5px; }
.stripNav a:hover { background: #70B08D; }
.stripNav a.current { background: #70B08D; color: #fff; }
.stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 0px; text-indent: -9000em; display: none; }
.stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; }
.stripNavL { left: 260px; }
.stripNavR { right: 260px; }
.stripNavL { background: url("images/arrow-left.gif") no-repeat center; }
.stripNavR { background: url("images/arrow-right.gif") no-repeat center; }
.detail { font-size: 10px; color: #aaa; }

/**************** robot pages ***************/
ul#robot_menu { width: 573px; font-size: 12px; font-family: "Lucida Grande", Verdana, sans-serif; list-style-type: none; margin: 0 0 0 0px; padding: 0; }
ul#robot_menu li { display: block; float: left; width: 90px; margin: 0; }
.activebtn { background: #004B97;/* #FF9900;*/ }
ul#robot_menu li a { color: #ffffff; text-decoration: none; display: block; text-align: center; height: 22px; padding: 5px 0 0 0; }
ul#robot_menu li a:hover { background: #004B97;/* #FF9900;*/ background-image: url(../images/robot_menu_over.gif); color: #ffffff; }
.robot_bar { width: 570px; height: 30px; margin: 0 0 0 0; padding: 0 0 0 0; background-image: url(../images/robot_menu.GIF); background-repeat: repeat-x; background-position: 0 3px; }
.robot_rss_content_box { width: 560px; border: solid 5px #004B97; background: #fff;/* #FF9900;*/ }
.robot_rss_content_box p { padding-left: 8px; }
.robot_rss_content_top { Position: relative; margin: 0px 0 0 0px; }
.robot_news { padding: 0px 0 0 0; }
.robot_news a { font-size: 12px; line-height: 150%; text-decoration: none; border-bottom: dotted 1px #0080ff; color: #0080ff; margin: 20px 0 0 0; }
.robot_news a:hover { color: #000000; text-decoration: underline; }