/*@@@@@@@@@@@@ COMMENTS ARE ABOVE TARGET ITEMS @@@@@@@@@@@@ */
/*
* MamboTheme - Mambo 4.5.3 template - Version 1.0
* @Copyright (C) 2005, 2005 by MamboTheme.com. All rights reserved!
* @License http://www.mambotheme.com
*/
/*** General Mambo Styles
* --------------------
* The following are styles that are often used
* site wide by Mambo to provide better control
* of content's appearences.
*/
/*###################### OVERALL MAMBO STYLES######################*/

body {
	margin: 3px 0px 3px 0px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	vertical-align: top;
	font-family: Verdana, Helvetica, sans-serif;
	background:#F0F0F0;
        line-height:150%;
}
td, tr, p {
	font-size:12px;
	color:#474747;
	vertical-align: top;
        line-height:150%;
}
h1, h2, h3 {
	font-size:12px;
	padding-bottom:5px;
	margin-bottom:5px;
        line-height:150%;
}
ul
{
	margin: 0;
	padding-top: 0;
	padding-left: 15px;
	list-style: none;
        line-height:150%;
}
li
{
	line-height: 15px;
	padding-left: 15px;
	padding-top: 0px;
	background-image: url(../images/list.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px !important;
	background-position: 0px 4px;
        line-height:150%;
}

hr {
	background       : #C0C0C0;
	height           : 1px;
	width            : 100%;
        line-height:150%;
}

hr.separator {}
/* not used in to page nav bar but used for nicknames in forum posts by Simpleboard */
.pagenavbar {}
/* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */
.pagenav {
	color      : #34659d;
	
}
.pagenav_prev a {
background: url(../images/icon_prev.gif) no-repeat 0px 0px;
text-indent:-5000px;
display:block;
width: 50px;
height:17px;

}
.pagenav_next a {
background: url(../images/icon_next.gif) no-repeat 0px 0px;
text-indent:-5000px;
display:block;
width: 50px;
height:17px;
}
.back_button a{
background: url(../images/icon_back.gif) no-repeat 0px 0px;
margin: 10px 3px 10px 3px;
pading: 10px 10px 10px 10px;
text-indent:-5000px;
display:block;
width: 50px;
height:17px;
float:right;
}

/* ###################### LINKS ###################### */
a:link, a:visited {
	font-size        : 12px;
	color            : #005fa9;
	text-decoration  : none;
        ling-height      : 150%
}

a:hover {
	text-decoration  : underline;
        ling-height      : 150%
}

a.category:link, a.category:visited {
	color            : #34659d;
	letter-spacing   : 1px;
        ling-height      : 150%
}

a.category:hover {
	color            : #CC6600;
        ling-height      : 150%
}
/* ############## PATHWAY AND BOTTOM BUTTON BAR ############## */
.pathway {
	color            : #aaa;
        background       : #ffffff
}

a.pathway:link, a.pathway:visited {
	color            : #aaa;
  
}

a.pathway:hover {
	color            : #1974b2;
 
}
/* ################### MAIN AND SUB MENU SYSTEM ################### 
* You can control the way menu behave and look
* by using the CSS settings below
*/
ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
}

ul#mainlevel-nav li{
	display: block;
	background-image: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-top: 1px;
	float: left;
	margin: 0;
	width: auto !important;
	width_: 15%;
	font-size: 12px;
	line-height: 16px;
	white-space: nowrap;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

#mainlevel-nav a {
        font-weight:bold;
	font-family: Verdana, Helvetica, sans-serif;	
        font-size: 12px;
	line-height: 16px;
	padding-bottom: 5px;
	text-decoration: none;
	width: auto;
	color: #FFFFCC;
}
#mainlevel-nav a:hover {
	width: auto;
	color: #FF8800;
	text-decoration: none;
}

.mainlevel {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width: 159px;
        valign: middle;
}

a.mainlevel:link, a.mainlevel:visited {
        font-weight:bold;
	display: block;
	width:100%;
	border-bottom: 1px solid #ffffff;
	color: #022791;
	padding-top: 4px;
	padding-left: 5px;
	height: 20px !important;
	height: 25px;
	text-decoration: none;
	width: 159px !important;
	width: 165px;
	line-height: 16px;
}

a.mainlevel:hover {
	background-color: #C8E9FE;
	border-bottom: 1px solid #ffffff;
        line-height:16px;
}
.sublevel {
	padding-left: 15px;
	margin: 0px 0px 0px 0px;
	width: 156px;
        valign: middle;
	border-bottom: 1px solid #FCFEE3;
        line-height:16px;
}

a.sublevel:link, a.sublevel:visited {
	padding-left:15px;
        padding-bottom:10px
	font-size: 12px;
	color: #385576;
	text-align: left;
}

a.sublevel:hover {
	color: #FF5B02;
	text-decoration: none;
}
/* ###################### SECTION LISTING SETTINGS ###################### */
/* This is for styling the section table headers on a SECTION's page.
	An example would be those articles lists when you click on "News" or something?
	With a table header of "Date", "Item Title", "Author" and "Hits" ? That's the
	header that you will be controlling through this style */
/*** Mambo Sections Styles - Styling of sections tables */
.sectiontableheader {
	background-color : #4DA5FF;
	color            : #FFFFFF;
	padding: 4px 10px 4px 4px;
	letter-spacing   : 0px;
}
/* this is used when there's a whole list of data to provide and
	you need to create alternate colors for each row of data. This is
	the first color */ 
.sectiontableentry1 {
	line-height: 18px;
	height: 20px;
	background-color : #FFFFFF;
}
/* this is the second color for the row. So, the table generator,
	will alternate its style through sectionableentry1 and sectiontableentry2
	as it cycles through and outputs each row of data. Similar to forum's post
	listings */
.sectiontableentry2 {
	line-height: 18px;
	height: 20px;
	background-color : #f9f9f9;
}
* Mambo Components Styles
* -----------------------
* These stylings are to format the way components title
* is displayed
*/
.componentheading {
	font-size: 14px;
	color: #990000;
	margin-left: 10px;
	padding: 5px 5px 5px 0px;;

 } /* This is used for formatting the component's title
	when it is displayed on its own page on the frontend */
 
/**
* Mambo Modules formatting
* ------------------------
* These stylings are to format the way modules are
* displayed. It mainly deals with the format of its
* table. I think this doesn't need too much explaining
*/
/* styling the module table */
table.moduletable {
	width: 100%;
	margin-bottom: 0px;
	margin:  0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border-spacing: 0px;
	width: 165px;
}
/* styling the module header, and the module titles */
table.moduletable th {
	display: block;
	width:100%;
	border-bottom: 1px solid #c3c8cb;
	background-color:#BCDAF5;
	background:url(../images/bg.gif);
	padding-top: 5px;
	padding-left: 5px;
	height: 20px !important;
	height: 25px ;
	text-decoration: none;
	text-transform:uppercase;
	width: 159px;
}
/* well.. for formatting the table cells of the module table */
table.moduletable td {
	padding-top: 0px;
	font-size: 12px;
}
/**


/**
* ########## MAMBO GENERAL STYLING FOR SECTIONS/CATEGORIES/CONTENTS ###########
* ------------------------------------------------------
* These stylings are either sometimes or often used across
* Sections, categories and contents. They, therefore, deserves
* to be mentioned and separated from others.
*/
 /* For styling the date the content/articles are created under contents title */
.latestnews  {
	font-size        : 9px;
	color            : #999999;
	text-align       : left;
}
.latestnews ul
{
	margin: 0;
	padding-top: 0;
	padding-left: 10;
	list-style: none;
}
.latestnews li
{
	line-height: 15px;
	padding-left: 15px;
	padding-top: 0px;
	background-image: url(../images/latestnews.gif) ;
	background-repeat: no-repeat;
	background-position: 0px 3px;
}
.mostread {
	font-size        : 9px;
	color            : #999999;
	text-align       : left;
}
.mostread ul
{
	margin: 0;
	padding-top: 0;
	padding-left: 10;
	list-style: none;
}
.mostread li
{
	line-height: 15px;
	padding-left: 18px;
	padding-top: 0px;
	padding-right: 1px;
	background-image: url(../images/popular.gif) ;
	background-repeat: no-repeat;
	background-position: 0px 3px;
}
.createdate {
	background: url(../images/date.gif) no-repeat 0px 2px;
	padding-left:20px;
	color            : #999999;
	text-align       : left;
}
 /* styling the "Last updated on" text at the end of articles/contents */
.modifydate {
	color            : #999999;
	text-align       : left;}
.small {
	color            : #999999;
	text-align       : left;
}
/* For formatting the "Read on..." link for blogs and on frontpage. */
.readon{
	display:block;
	width: 100px;
	padding-left: 17px;
	background: url(../images/readon.gif) no-repeat;
} 
.readon:hover{
	display:block;
	padding-left: 17px;
	background: url(../images/readon_over.gif) no-repeat;
} 

/**
* ############## MAMBO FORM STYLES ##############
* -----------------
* Here are 2 styles that Mambo uses to let users control
* how their forms and buttons may look.
*/
.button {
	font-style       : normal;
	font-size        : 12px;
	color            : #000000;
	border           : 1px solid;
}

.inputbox {
	font-size        : 12px;
	color            : #000000;
	background       : #FFFFFF;
	border           : 1px solid;
}

div.search input {
	border:none;
	width:98%;
	font-size        : 12px;
	color            : #444444;
}
/**
* Mambo Tabbed Frontend Admin Interface
* -------------------------------------
* The CSS styles here defines how the frontend admin interface
* will look like when editing and adding news through frontend.
*/
 
.ontab {}/* For styling of the "Tab" buttons when editing contents through the frontend as admin. 
This .ontab is the styling for the tab when it is active or after its "clicked" */
.offtab {} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend. 
This the styling for the tab when it is NOT active or when it is NOT "clicked" */
.tabpadding {} /* this style is used set the size of the tab in the above */ 
.tabheading {} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */
.pagetext {} /* this style is used to style the content of the editing form contents (where HTMLArea sits and all its forms + contents) in
the frontend Administration interface */
/** 
* ##############  MAMBO STYLING FOR CONTENTS  ###############
* --------------------------
* All the styling for contents are listed below.
*/
/* This is used mainly for the table that holds the SECTIONS such as News.
	This is when you create a link to a Section and when clicked on it, it will display
	"News" then some description (with image if you selected one) and then a list of 
	Category of News. Yes! That entire thing is contained in a table with this style */
.contentpane {
	width: 100%;
	text-align       : justify;
	padding-left     : 5px;
	padding-right    : 5px;
}
/* Found this being used by Phil in his Shambo2. Don't know where else its used
in Mambo */
.contentpaneopen {
	width			   : 100%;
	text-align       : justify;
	padding-left     : 0px;
	padding-right    : 0px;
	height: 9px;
}
table.contentpaneopen td span.small {
	padding-left:20px;
	height:10px;
	background: url(../images/author.gif) no-repeat top left;
}
/* This is used in several places; the Heading of contents on the frontpage,
	it is also used for Section's heading (see above for explanation) "News" or
	whatever heading you used */
.contentheading{
	font-size:13px;
        font-weight:bold;
        height: 19px;
	background: url(http://ca.sdg.grid.cn/images/stories//notepad[1].gif) no-repeat;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 5px;
	padding-left: 20px;
	color: #2F6FBF;
	text-transform: UPPERCASE;
	overflow:hidden;
}
/* Couldn't find where is this yet. Will update this part when I
get to it. Sorry. If you know, please email me the infos */
.contentpagetitle {} 
/* When you create a link to a Section in the main menu and when clicked on it, it will display
	"News" then some description (with image if you selected one) and then a list of 
	Category of News. This style is used for formating the "DESCRIPTION" part of that page */
.contentdescription {}
/* This is used to format the table of the Tables of Contents or "Jump to" 
	box when it is enabled in a multiple paged content or article */
table.contenttoc {
width: 160px;
	border:			#E0E0E2 1px solid;
	margin:  10px 10px 10px 10px ;
	padding:		0px 0px 0px 0px;
	font-size:		90%;
}
/* the same as above, but this is used to format the td or
	table cells */
table.contenttoc th {
	display:		block;
	background-color:	#DDEEFF;
	line-height:		1.7em;
}
table.contenttoc td.toclink{
	display:		block;
	border-bottom:		#E0E0E2 1px solid;
	line-height:		1.7em;
}
a.toclink{
	display:		block;
}
table.contenttoc td {
	border-top:		#E0E0E2 1px solid;
	margin:			0 0 0 0;
	padding:		0px 3px 0px 20px;
	background: url(../images/arrow.png) no-repeat 3px 4px;
	background-color:	#E8F0F1;
}
 /* used for styling the texts used for displaying 
	those "stars" for rating in an article */
.content_rating {}
/* used for those voting texts (the one with voting RADIO buttons) */
.content_vote {} 
/*##############  START MBT CUSTOMED STYLING ###############*/
/* start top styling*/
#top_outer{
	width: 165px;
	height: 18px;
	border:	#97CBFD 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#top{
	width: 159px !important;
	width: 159px;
	height: 15px;
	padding:2px 0px 3px 3px;
	margin:	1px 1px 1px 1px;
}
/*end top styling*/
/* start top_module styling*/
#top_module_outer{
	width: 159px;
	height: 160px;
	border:	#cccccc 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background: url(../images/top_module_bg.gif) repeat;
}
#top_module{
	width: 159px !important;
	width: 159px;
	height: 148;
	padding:0px 0px 0px 0px;
	margin:	3px 3px 3px 3px;
	background: url(../images/top_module_bg.gif) repeat;
	overflow: hidden;
}
#top_module table.contentpaneopen td {
}
/*end top_module styling*/
/*start header_area styling*/
#header_area_outer{
	height: 160;
	border:	#97CBFD 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:url(../images/header.gif);
}
#header_area{
	height: 160;
	padding:0px 0px 0px 0px;
	margin:	0px 0px 0px 0px;
}
/*end header area styling*/

/*start pathway styling*/
#pathway_outer{
	width: 100%;
	height: 20px;
	border:	#97CBFD 1px solid;
	padding:3px 0px 0px 3px;
	margin:	1px 1px 0px 1px;

}
#pathway{

}

/*start leftmenu styling*/
#leftmenu_outer{
	width: 165px;
	border:	#97CBFD 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:url(../images/leftmenu_bg.gif);
        line-height:180%;
}
#leftmenu {
	width: 159px;
	margin:	0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background:url(../images/leftmenu_bg.gif);
        line-height:180%;
}
/*end left styling*/
/*start center area styling*/
#center_area_outer{
	border:	#97CBFD 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#center_area{
	padding: 3px 0px 0px 0px;
	margin:	0px 0px 3px 3px;
}
/*end center area styling*/
/*start rightmenu styling*/
#rightmenu_outer{
	width: 165px;
	border:	#cccccc 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background:url(../images/leftmenu_bg.gif);
}
#rightmenu {
	width: 159px;
	margin:	0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background:url(../images/leftmenu_bg.gif);
}
/*end right menu styling*/
/*start footer styling*/
#footer_area_outer{
	border:	#97CBFD 1px solid;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	background-color:#aaaaaa;
	background:url(../images/leftmenu_bg.gif);
}
/*end footer styling*/