/* custom <li> bullets

---------------------------------------------------------------------------------------
<UL STYLE="list-style-image: url(redball.gif)">
<LI>Bullet 1</LI> 
<LI>Bullet 2</LI>
</UL>

The rules for defining the URL are the same as those used in the A HREF and IMG tags.

<UL STYLE="list-style-
 images: url(http://www.netmechanic.com/
 news/vol3/redball.gif)">

---------------------------------------------------------------------------------------
<style type="text/css">
li.newbullet { list-style-image:url(http://www.depiction.net/images/arrow.gif) }
</style>

<ul>
<li class="newbullet">List item one</li>
<li>List item two</li>
<li class="newbullet">List item three</li>
</ul>

---------------------------------------------------------------------------------------
ul { list-style-type: none; }
ul li { padding-left: 15px; background: url(/newbullet.gif) 0px 3px no-repeat; }


Note:  You may have to adjust the left padding to approximately the width of your bullet image plus 5 or 6 pixels.  Also adjust the '3px' parameter, which is the y-position of the bullet in relation to the <li> item.
---------------------------------------------------------------------------------------
ul { list-style-image: url(bullet.gif); }

To specify an HTML bullet to use if the browser doesn’t support this part of CSS, add:

	list-style-type: disc;

to your rule. Depending on the image that you choose you may find that it doesn’t align itself with the list items the way that you intend. In that case you may choose to have the image be placed within the list item block (rather than outside the block). Adding the following:

	list-style-position: inside;

to your rule will make that change. These three declarations can be combined into a single, shorthand declaration as illustrated in the following rule:

ul { list-style: disc url(bullet.gif) inside; }

which is the equivalent of:

ul {
	list-style-type: disc;
	list-style-image: url(bullet.gif);
	list-style-position: inside;
	}

---------------------------------------------------------------------------------------
*/

@media screen {
html{ font-size: 16px; }
/*fs 64%*/
body { font: 100% Arial,Verdana,sans-serif;
	background-color: White;color: Black;margin: 0;padding: 0;}
a {color: #436976;background-color: transparent;text-decoration: none;}
img {border: none;vertical-align: middle;}
p {margin: 0 0 0.75em 0;line-height: 1.5em;}
p img {border: none;margin: 0;}
hr {border: 0;height: 1px;color: #678EC2;background-color: #678EC2;margin: 0.5em 0 1em 0;}
h1,h2,h3,h4,h5,h6 {color: Black;background-color: transparent;
	font-family: Arial,Verdana,sans-serif;
	font-weight: normal;margin: 0 0 0.25em 0;border-bottom: 1px solid #678EC2;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: Black ! important;text-decoration: none;}
h1 {font-size: 160%;}
h2 {font-size: 150%;}
h3 {font-size: 125%;border-bottom: none;font-weight: bold;}
h4 {font-size: 110%;border-bottom: none;font-weight: bold;}
h5 {font-size: 100%;border-bottom: none;font-weight: bold;}
h6 {font-size: 85%;border-bottom: none;font-weight: bold;}
ul {line-height: 1.5em;margin: 0.5em 0 0 1.5em;padding: 0;
	list-style-image: url(/image/bullet.gif);list-style-type: square;}
ol {line-height: 1.5em;margin: 0.5em 0 0 2.5em;padding: 0;list-style-image: none;}
li {margin-bottom: 0.5em;}
dt {font-weight: bold;}
dd {line-height: 1.5em;}
legend {background: White;padding: 0.5em;font-size: 90%;}
form {border: none;margin: 0;}
/*label {font-weight: bold;}*/
textarea {font: 100% Monaco,"Courier New",Courier,monospace;border: 1px solid #678EC2;
	color: Black;background: White url(/image/input_background.gif) repeat-x;width: 100%;}
input {font-family: Arial,Verdana,sans-serif; visibility: visible;
	border: 1px solid #678EC2; color: Black;vertical-align: middle; background: white }

}

/*fs 110%*/
.content { font-size: 100%; padding: 0; margin: 0.5em; background: white;}
.box { background-color: transparent; margin: 0.2em; padding: 0.2em; overflow: hidden; }
.boxb { background-color: transparent; margin: 0.2em; padding: 0.2em; overflow: hidden; 
	border: 1px solid; border-color: #2B486D; }
.panp { background-color: #F1F5F9; margin: 0; padding: 0.5em; overflow: hidden;}
.panbmp {display: block; margin: 1em; padding: 0.5em; border: 1px solid; border-color: #2B486D; 
	color: #2B486D; background-color: #F1F5F9; overflow: hidden; }
.fld { float: left; margin: 0 0 0 1em; padding: 0.2em; color: #0E1824; background-color: #F1F5F9;}
.fldinfo { float: left; margin: 0 0 0 0.2em; padding: 0 0.3em; color: #355A87;}
.label { float: left; margin: 0; padding: 0; color: #2B486D; background-color: #A3BBDB;}

/*
caption { text-align: center; font-weight: bold; margin: 1em 0 0 0; padding: 0.5em;
	border-top: 2pt outset #A3BBDB; border-right: 2pt outset #A3BBDB; border-left: 2pt outset #A3BBDB; 
	background-color: #CAD9E8; }	
thead { background-color: #A3BBDB; text-align: center; font-weight: bold; }	
tfoot { text-align: center; font-weight: bold; }	
*/

.butfrm { width: 5em; height: 1.2em; color: #0E1824; font-weight: normal; background-color:#D8E3EE; 
		border: 2px solid; border-top-color:#A3BBDB; border-left-color:#A3BBDB; 
		border-bottom-color:#2B486D; border-right-color:#2B486D; margin: 0.3em; 
		text-align: center; }
.butfrm:active { border-top-color:#2B486D; border-left-color:#2B486D; 
		border-bottom-color:#A3BBDB; border-right-color:#A3BBDB; }

dl.panbmp {margin: 1px 0 1em 0;border-bottom: 1px solid #678EC2;background-color: White;}
dl.panbmp a {text-decoration: none;}

dd.panItem a {border-bottom: none;}
dd.panItem a:visited {color: #436976;}
.even {background-color: #eef3f5;}
.odd {background-color: transparent;}
.panitem { background-color: #F4F8FB; margin: 0; padding: 1em 0 0.1em 0.3em; border-left: 1px solid #678EC2;border-right: 1px solid #678EC2; overflow: hidden;}
.panloginsect {margin: 0 0.8em 0 0.8em; padding: 0.8em; background-color: transparent; border-style: solid; border-top-color: #B1BCC9; border-left-color: #B1BCC9; border-right-color: #EAEDF0; border-bottom-color: #EAEDF0; }


@media all { #topmenu {text-align: center;} }

.openblk { display: block; }
.openinl { display: inline; }
.openinr { display: inline; position: relative; left: 95%; right: auto; }
.shut { display: none; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.disabled { opacity: 0.4;}
.greyed { opacity: 0.4;}
.error  { color: #e00000; }
.err  { color: #e00000; }
.success  { color: #008000; }
.ok  { color: #2B486D; }
.warn  { color: #D07000; }
.info  { color: #7389A5; }
.inf  { color: #7389A5; }
.blinking  { text-decoration: blink; }
.popup  { text-align: center; color: red; font-size: 150%; }
.actiontitle { font-weight: bold; font-size: 110%; background-color: #678EC2; color: white; margin-right: 2em; }
.actionsummary { font-weight: normal; font-style: italic; }
.statusline { background-color: #F4F8FB; margin: 0px; height: 1.5em; font-size: 120%; border: 1px solid #678EC2; padding: 0.2em; overflow: hidden; }

.basicbutton { display: inline; cursor: pointer; margin-right: 1em; width: 13em; margin-bottom: 0.5em; border-width: 2px; padding: 0.3em 2em; font-weight: normal; line-height: 1.6em; }
.smallbutton { display: inline; cursor: pointer; font-size: 90%; margin-right: 1em; width: auto; margin-bottom: 0; border-width: 2px; padding: 0 1em; font-weight: normal; line-height: 0.8em; }
.buttonon { background-color: #B9CBE3; border-style: inset; border-top-color: #000; border-left-color: #000; border-right-color: #FFF; border-bottom-color: #FFF; }
.buttonoff { background-color: #DEE7F1; border-style: outset; border-top-color: #FFF; border-left-color: #FFF; border-right-color: #000; border-bottom-color: #000; }
.loginbut { padding-left: 1em; padding-right: 1em; border-style: solid; border-width: 0 1px 1px 0; background-color: #DEE7F1; border-color: #000; white-space: nowrap; }
/*.loginbuttontext*/
.logininput { margin: 0; width: 13em; font-size: 100% }
.logininputlabel { float: left; width: 15em; margin: 0 0 0 1em; font-size: 100% }
.backinglb { background-color: #e9eded; }
.udc { border: 1px solid #678EC2; background-color: white; min-width: 3em; }
.prompt { visibility: hidden; float: left; width: 12px; }
.dummyprompt { visibility: hidden; float: left; width: 16px; }
.selnode { overflow: scroll; };

.viewlog {  height: 12em; overflow: auto; font-size: 95%; }

.chanview {  height: 12em; overflow: auto; font-size: 95%; }
.chancmdtitle { margin-right: 3em; font-size: 100%; color: #FAD5B4; }
.chancmdlab { font-size: 95%; color: white; }
.chancmdval { font-size: 95%; border: 1px inset; background-color: #f0f4f8; min-width: 10em; min-height: 1em; }
.chan_closed { background-color: #606060; color: #FFD0D0;  }
.chan_wait { background-color: #808080; color: #F5CA70;  }
.chan_open { background-color: white; color: #008446;  }
.chan_pingfail { background-color: #C0C0C0; color: #FF5757;  }
.chan_error { background-color: #DC0000; color: #E4F400;  }
.chan_info { background-color: transparent; color: #2B486D;  }

.config { background-color: #ffffff; }
.cfgcmd { background-color: #F4F8FB; margin: 0; padding: 0.3em; border: 1px solid #678EC2;}
.cfgmain {  }
.cfgitem { border: solid #678EC2; padding: 0.3em 0 0.3em 0; border-width: 0 0 1px 0; }
.cfgitemdes { height: 1.5em; margin: 0 0 5px 0; border: 0;}
.cfgitemdestit { float: left; width: 16em; font-weight: bold; font-size: 110%; background-color: #678EC2; color: white; margin-right: 2em; }
.cfgitemdessum { float: left; width: auto; font-weight: normal; font-style: italic; }
.cfgitemline { height: auto; margin: 0; border: 0; }
.cfgitemlineval { width: 16em; background-color: white; color: black; margin-right: 2em; }
.cfgitemlinepath { width: 25em; background-color: white; color: black; margin-right: 2em; }
/*[disabled] { background-color: #EBEAE7; }*/
.cfgitemlinevalcli { width: 13em; font-weight: normal; }
.cfgstatus { height: 1.2em; padding: 0.2em; background-color: #F9FBFB; }
.cfglinetab { width: auto; top: 0; left: 0; margin: 0; border: 0; padding: 0; }
.cfglinetab tr { width: auto; top: 0; left: 0; margin: 0; border: 0; padding: 0; }
.cfglinetab td { width: auto; top: 0; left: 0; margin: 0; border: 0; padding: 0; white-space: nowrap; }

.cscmd { margin: 0; padding: 0.3em; border: 1px solid #678EC2;}
/*.csstatus { height: 1.5em; font-size: 120%; padding: 0.2em; overflow: hidden; }*/

/********* BASIC *****************************************************

Keep these classes at the bottom so that they can be used as individual overrides
when specified in the class list of an element along with higher level classes.
Selector precedence is the order in which they are declared. See CSS Spec 6.4.1 Cascading order

bN border
cCN color
kCN background
d{b|i|f{l|r}}} display
fN[bi] font
mN margin
pN padding
v{o|s|v|h} visibility
*/

.db { display: block; }
.di { display: inline; }
.dib { display: inline-block; vertical-align: top; }
.dfl { float: left; }
.dfr { display: inline; position: relative; left: 95%; right: auto; }
.oa { overflow: auto; }
.oh { overflow: hidden; }
.b { border: 1px solid; border-color: #000000; }
.b1 { border: 1px solid; border-color: #000000 }
.b2 { border: 2px solid; border-color: #000000 }
.b1c3 { border: 1px solid; border-color: #2B486D; }
.b1c5 { border: 1px solid; border-color: #4878B6; }
.b3c7 { border: 3px solid; border-color: #A3BBDB; }
.b2 { border: 2px solid; }
.cen { text-align: center; }
.cb { color: #000000; }
.cw { color: #FFFFFF; }
.c1 { color: #0E1824; }
.c3 { color: #2B486D; }
.c4 { color: #375A8C; }
.c5 { color: #4878B6; }
.c6 { color: #7398C9; }
.c7 { color: #A3BBDB; }
.c8 { color: #CAD9E8; }
.c85 { color: #D8E3EE; }
.c9 { color: #F1F5F9; }
.k1 { background-color: #0E1824; }
.k3 { background-color: #2B486D; }
.k5 { background-color: #4878B6; }
.k6 { background-color: #7398C9; }
.k7 { background-color: #A3BBDB; }
.k8 { background-color: #CAD9E8; }
.k85 { background-color: #D8E3EE; }
.k88 { background-color: #EAF0F6; }
.k9 { background-color: #F1F5F9; }
.f9 { font-size: 90%; }
.f10 { font-size: 100%; }
.f11 { font-size: 110%; }
.m02 { margin: 0.2em; }
.m05 { margin: 0.5em; }
.m1 { margin: 1em; }
.m2 { margin: 2em; }
.mt05 { margin-top: 0.5em; }
.mt1 { margin-top: 1em; }
.mb05 { margin-bottom: 0.5em; }
.mb1 { margin-bottom: 1em; }
.ml05 { margin-left: 0.5em; }
.ml1 { margin-left: 1em; }
.p02 { padding: 0.2em; }
.p05 { padding: 0.5em; }
.p1 { padding: 1em; }
.p2 { padding: 2em; }
.vo { display: block; }
.vs { display: none; }
.vv { visibility: visible; }
.vh { visibility: hidden; }

/*********************************************/


#divmain {margin: 0; padding: 0; overflow: hidden;}

#main-logo {background: url(/image/logomain.gif) no-repeat;border: 0;margin: 0.75em 0em 0.75em 1.5em;padding: 0;}

#topmenu {background-color: transparent;padding: 0em 0em 0em 2em;white-space: nowrap;list-style: none;margin: 0;height: auto;line-height: normal;}
#topmenu li { display: inline; }
#topmenu li span {background-color: transparent; border-color: #678EC2; border-width: 1px;
	border-style: solid solid none solid; color: #436976; height: auto; margin-right: 0.5em;
	padding: 0em 1.25em; text-decoration: none; text-transform: lowercase;}
#topmenu li.selected span {background-color: #DEE7F1; border-bottom: #DEE7F1 1px solid; }
#topmenu li span:hover {background-color: #DEE7F1; border-bottom-color: #DEE7F1; }
#paninfo {background-color: #DEE7F1;border-top-color: #678EC2;border-top-style: solid;
	border-top-width: 1px;border-bottom-color: #678EC2;border-bottom-style: solid;
	border-bottom-width: 1px;line-height: 1.6em;color: Black;padding: 0em 3em 0em 3em;
	margin: 0;text-align: right;}

#divfooter {background-color: #DEE7F1;border-top: 1px solid #678EC2;border-bottom: 1px solid #678EC2;
	float: none;line-height: 1.2em;margin: 0.3em 0em 0.3em 0em;padding: 0.1em 0em 0.1em 0em;
	text-align: center;}
#divfooter p {margin: 0.25em 0;}
#divfooter a {text-decoration: none;color: #436976;border: none;}
#divfooter a:visited {color: #436976;}
#divfooter a:hover {text-decoration: underline;}
#main-colophon { float: none; margin: 0em 0em 2em 0em; padding: 0.5em 0em 1em 0em; text-align: center;}
#main-colophon .colophonIconXHTML {background-image: url(/image/valid_xhtml.png);}

#panlogring { margin: 1em; border: 1px solid #A3BBDB; }
#lrtitle { padding: 0 0.3em 0 0.3em; background-color: #F1F5F9; border-bottom: 2px solid #CAD9E8; overflow: hidden; }
#lropcl { float: right; }
#logring { width: 100%; height: 1.4em; margin: 0; overflow: auto; }
/* logline */
.ll  { width: 100%; padding: 0.2em; }

#debug { width: 100%; height: 6em; overflow:auto; }
#loginonline {top: 0;left: 0; margin: 0 0 0 0;}
/*>>>check if no border then margin and padding are same, then see why .topmenu is centered ! */
#panlocation { font-size: 100%; font-weight: bold; }
#loginsectudc { float: right; font-size: 100%; font-weight: normal; background-color: transparent; }
#pannodebutton {padding: 3px 1em; text-align: center; width: 70em; margin-top: 1em; margin-right: auto; margin-bottom: 1em; margin-left: auto; }
#chanbuttonopen { background-color: #B9CCD7; font-size: 95%; margin: 0.3em; padding: 0.1em; width: 8em; height: 0.8em; line-height: 0.8em; }


