@charset "utf-8";
/* CSS Document */

/**************************
GENERIC
**************************/

body{
	/* dark grey body text */
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;

	/* make the blue border around the whole page */
	margin: 20px;
	background-color: #8CA5B9;
}

A {
	/* Equiinet blue links */
	color:#003366;
}

A:hover {
	/* Equiinet orange links underlined on mouse-over */
	color: #F57202;
	text-decoration: underline;
}

/* We have a link at the top of the frame that will take lynx to the content
   of the page, but we do not want it to show up in graphical browswers. So,
   hide it with CSS which lynx does not understand. */
.skip{
	display: none;
}

/* Make iptables-dump headers not change colour on mouse-over. */
/* Fix this in code; apply 'name=' label to something other than 'a' tag.
 * Also, is h3 appropriate?  Shouldn't it be h2?
 */
a.iptables-dump {
	color:#003366;
	text-decoration: none;
}

.clearFloat{
	clear: both;
}
	
/**************************
PAGE CONTAINER
**************************/

.page_frame{
	background-color: #FFFFFF;
	/* white border all round */
	padding: 5px;
}
	
.main{
	/* This is here (rather than on main_left itself) so it will
	 * stretch from top to bottom of the main area whichever
	 * column is longer.
	 */
	/* background-image: url(/sys/images/bg_leftCol.gif); */
	background-position: left;
	background-repeat: repeat-y;

	background-image: url(/sys/images/watermark.gif);
	background-position: bottom right;
	background-repeat: no-repeat;

	background-color: #f8f8f8;
}
	
/**************************
HEADER
**************************/

.header{
}

.header_left{
	float: left;
	/* Use padding instead of margin here, or the logo appears to far to
	   the right on IE7. */
	padding: 18px 0 0 48px;
}

.header_left IMG{
	border: none;
}

.header_centre {
	/* The left margin is the same width as the left menu column */
	margin: 0 0 0 250px;
	padding-top: 4px;
}

/* Looks like IE6 needs this, otherwise it does not print the host
   and customisation text at the top of the screen.
   The '* html' makes browsers other than IE6 not take notice. */
* html .header_centre {
	height:70px;
}

.header H1{
	/* A large font automatically gets large top and bottom margins;
	 * normally this is what you'd want because the text will be near
	 * other text and the margins collapse together, but in this case,
	 * we want the large product name text to be closer than normal to
	 * the top of the window and to the smaller fqdn text below.
	 */
	margin: 0 0 0.2em 0;
}

.header H2{
	/* see above comment for why we make this margin small */
	margin: 0.2em 0;
}

.header_right{
	/* This is the customisation logo. */
	float: right;
	/* Push it a little in from the right edge? */
	margin: 0 30px 0 0;
}

.header_stripe{
	/* This is the solid orange colour which is visible
	 * from the left edge to the middle somewhere and the
	 * image which makes the right end fade out
	 */
	background: #eb710c url(/sys/images/bg_headerbtmBorder.jpg) no-repeat right top;
	height: 6px;
	/* IE6 seems to reserve space in the stripe for text, making the stripe
	  far too thick. Setting it to 0% makes the orange line nice and
	  thin again. */
	font-size: 0%;
}

/**************************
LEFT COLUMN
**************************/

.main_left{
	width: 15em;
	/* min-height: 500px; */
/* It's tempting to put the blue background here, but that makes it end
 * level with the bottom of the left menu, rather than continuing down to
 * the bottom of the main area.
 */
	background-color: #eaeff2;
/* IE7 goes completely potty if scrollbars appear on the left menu. */
	overflow: hidden;
	white-space: nowrap;
}

/*  round corner box */	

.rbroundbox {
	background-color: #B5C6D1;
	margin: 5px;
}

.rbtop DIV {
	BACKGROUND: url(/sys/images/corner_topLeft.gif) no-repeat left top;
}

.rbtop {
	BACKGROUND: url(/sys/images/corner_topRight.gif) no-repeat right top;
}

.rbbot DIV {
	BACKGROUND: url(/sys/images/corner_btmLeft.gif) no-repeat left bottom;
}

.rbbot {
	BACKGROUND: url(/sys/images/corner_btmRight.gif) no-repeat right bottom;
}

.rbtop DIV {
	FONT-SIZE: 1px; WIDTH: 100%; HEIGHT: 6px
}

.rbtop {
	FONT-SIZE: 1px; WIDTH: 100%; HEIGHT: 6px;
}

.rbbot DIV {
	FONT-SIZE: 1px; WIDTH: 100%; HEIGHT: 6px
}

.rbbot {
	FONT-SIZE: 1px; WIDTH: 100%; HEIGHT: 6px
}

.rbcontent {
	MARGIN: 0px 14px;
}


.rbroundbox P {
	color: #070D5C;
	font-weight: bold;
	font-size: 110%;
	text-align: center;
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

/**************************
MAIN COLUMN
**************************/

.main_right{
	float:right;
	/* We need to set this so the right area fills the whole
	 * space, otherwise it huddles up against the right edge.
	 */
	width: 100%;
	/* Why do we have to set this in IE?
	 * It works fine in firefox without it, but if we don't put it in
	 * for IE, the left menu leaves space for the right float!
	 */
	margin-left: -250px;
	margin-top: 3px;
}

.main_module{
	margin-left: 15em;
	padding: 20px;
	clear: both;
	overflow-x: auto;
	/* There really is no need for a vertical scroll bar, but windows puts
	   one in anyway when a horizontal one appears, because the horizontal
	   one obscures some of the text! Bah! So... pad the bottom and hide
	   the vertical scroll bar. */
	padding-bottom: 10pt;
	overflow-y: hidden;
}

/*---- top navigation ----*/

.navmenu{
	background-image: url(/sys/images/bg_topNav.jpg);
	background-repeat: repeat-x;
	background-position: top;
	background-color: #cccccc;
	border-top: 1px solid #AFBEC7;
	border-right: 1px solid #AFBEC7;
	border-left: 1px solid #AFBEC7;
	border-bottom: 2px solid #003366;
	margin: 0 0 0 15em;
	padding: 0px;
}

.navmenu ul{
	/* lists normally have large padding on the left, so they will be
	 * indented.  Our list is inline, so we space out the items
	 * uniformly in the li.
	 */
	margin: 0px;
	/* This reserves the necessary space for the li padding */
	padding: 6px;
}

.navmenu li{	
	list-style: none;
	display: inline;
	font-weight: bold;
	border-right: 1px solid #999999;
	/* vertical space fixed, horizontal space scales with font */
	padding: 6px 1em;
}

.menu-item a:link, .menu-item a:visited{
        text-decoration: none;
}

.menu-item a:hover{
        text-decoration: underline;
}

/*---- search ----*/

.search form{
	margin: 0px;
	padding: 0px;
}
.search{
	float: right;
	margin-top: 2px;
	padding-right: 20px;
}
	
/*---- help button ----*/

.help{
	float: right;
	margin-top: 5px;
	border: none;
}
	
/*---- log formatting ----*/	

pre{
	/* font-family: Arial, Helvetica, sans-serif; */
	font-family: monospace;
}
	
/**************************
FONTS
**************************/

legend{
	font-weight: bold;
	/* IE7 shows blue legends without this */
	color: #666666;
}

H1{
	color: #003366;
	font-size: 200%;
}

/* Default small icon if nothing else is set below */
H1.small_icon {
	/* This stuff is for making the small icon appear nicely next to the
	   title */
	background-repeat: no-repeat;
	background-image: url(/sys/images/icon_maintenance.gif);
	/* Shift it over to the right to make space for the icon */
	padding: 0 0 0 44px;
	/* Decrease bottom margin a little, otherwise the body of the
	 * main form looks a bit too far away.
	 */
	margin: 0 0 15px 0;
	min-height: 39px;
}

/*  different icons for H1 tags */

H1#home{
	background-image: url(/sys/images/icon_home.gif);
}
	
H1#users{
	background-image: url(/sys/images/icon_users.gif);
}
	
H1#centmang{
	background-image: url(/sys/images/icon_manage.gif);
}

H1#email, H1#maillist, H1#mail-fetch, H1#email-virus, H1#email-spam{
	background-image: url(/sys/images/icon_email.gif);
}
	
H1#email_filter-settings, H1#email_filter{
	background-image: url(/sys/images/icon_emailFilter.gif);
}
	
H1#security{
	background-image: url(/sys/images/icon_security.gif);
}
	
H1#emaillogs, H1#logs, H1#weblogs {
	background-image: url(/sys/images/icon_logs.gif);
}
	
H1#urlfilter{
	background-image: url(/sys/images/icon_web.gif);
}
	
H1#maintenance, H1#leftmenu-common, H1#netserv{
	background-image: url(/sys/images/icon_maintenance.gif);
}
	
H1#health-check{
	background-image: url(/sys/images/icon_health.gif);
}


H2{
	color: #F57202;
	font-size: 140%;
}


H3{
	font-size: 110%;
	color: #F57202;
	margin: 0 0 15px 0;
	padding: 2px 0 2px 7px;
	background-color: #FCECDF;
}

H4{
	font-size: 125%;
	color: #070D5C;
	margin: 0 0 15px 0;
}

H5{
	font-size: 100%;
	margin: 10px 0 0 0;
}

/* alerts
 *
 * Alerts have a large icon on the left and an h2 and some text on the right.
 */

.alert-warning, .alert-stop, .alert-ok{
	/* margin places the background image */
	margin: 10px 0 0 0;
	/* padding places the text; leave space for image on left */
	padding: 15px 0 0 125px;
	height: 119px;
	background-repeat: no-repeat;
}

.alert-stop {
	background-image: url(/sys/images/icon_stop.gif);
}

.alert-warning {
	background-image: url(/sys/images/icon_important.gif);
}

.alert-ok {
	background-image: url(/sys/images/icon_ok.gif);
}


/**************************
FOOTER
**************************/

.footer{
	background-image: url(/sys/images/bg_footer.jpg);
	background-repeat: repeat-x;
	background-color: #d4dde2;
}

.footer p{
	margin: 0;
	padding: 10px 0 10px 10px;
	color: #003366;
}
	
/**************************
FORM
**************************/	

FIELDSET{
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 0 15px 10px 15px;
	/* Sometimes, tables overflow the fieldset - see the expanded firewall
	   overview screen. IE does not extend the fieldset to contain the
	   table. These overflows make it look nicer. */
	overflow-x: auto;
	overflow-y: hidden;
}

.html_table{
	border-radius: 10px;
	/* Avoid the firefox left-table border 1px bug, and 10pt padding at
	   the bottom so that IE does not obscure content with the horizontal
	   scroll bar. */
	padding: 0 1px 10pt;
	overflow-x: auto;
	overflow-y: hidden;
	height: 100%;
}

input, textarea{
	margin: 0px;
}

textarea, select, input[type="text"], input[type="password"], input[type="checkbox"]{
	border: 1px solid;
	border-color: #cccccc;
	font-family: monospace;
}

textarea[readonly]{
	background-color: #eeeeee;
}

.submitBtn{
	margin: 10px 5px 5px 5px;
}

.form-item{
	clear: both; /* Needed so that form items start on a new line after
			buttons */
	margin: 10px 5px 5px 5px;
}

.form-label{
	float: left;
	clear: both;
	width: 200px;
	margin: 0px 10px 0 0; 
	text-align: right;
}

.form-label p{
	margin: 0px;
	padding: 0px;
}
	
.form-message{
	clear: both;
	width: 500px;
	color: #003366;
	/* font-weight: bold; */
}

/* Need this, otherwise select box appears to the right of the Add button on
   adddel screens. */
.html_table_select{
	clear: both;
}

.html_table_message{
	clear: both;
}

.html_table_radio{
	clear: both;
	/* This produces a border around the radio buttons, but it looks
		rubbish!
	-moz-border-radius: 10px;
	border: 1px solid;
	border-radius: 10px;
	border-collapse: collapse;
	*/
}
	
/*  sub radio */

.html_table_subradio_option{
	clear: both;
}

.html_table_subradio_option INPUT{
	float: left;
	vertical-align: bottom;
}
	
.html_table_subradio_option .form-text INPUT{
	margin: 0px;
}

	
.html_table_named_submit_button, .html_form_image_button, .html_form_named_submit_button{
	clear: both;
} 
	
INPUT.button-bottom, a.button-bottom{
	display: -moz-inline-block;
	display: inline-block;
	float: left;
	background-color: transparent;
	background-repeat: no-repeat;
	width: 86px;
	height: 25px;
	padding: 0px 4px 0 0;
	text-align: center;
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	font-weight: bold;
	text-decoration: none;
	border: none;
}

INPUT.button-bottom, INPUT.button-side{
	color: #0D1562;
	background-image: url(/sys/images/btn_bg.gif);
	background-color: transparent;
	background-repeat: no-repeat;
	width: 86px;
	height: 25px;
	padding: 0px 4px 0 0;
	text-align: center;
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	font-weight: bold;
	text-decoration: none;
	border: none;
}

a.button-bottom{
	color: #FFFFFF;
	padding: 4px 0px 0px 0px;
	height: 20px;
	background-image: url(/sys/images/bg_btnOrange.gif);
}

INPUT.button-bottom a:link, INPUT.button-bottom a:visited, INPUT.button-bottom a:hover{
	color: #000033;
	text-decoration: none;
}
	
#mainColCont  a.button-bottom,:link  #mainColCont a.button-bottom:visited, #mainColCont a.button-bottom:hover {
	color: #FFFFFF;
	text-decoration: none;
}

/**************************

TABLE PROPERTIES

**************************/

TABLE{
	margin: 0 0 5px;
}

TABLE.tt-border{
	text-align: left;
	border-collapse: collapse;
	margin: 0 0 15px;
	border: 1px solid #8CA5B9;
}

TABLE.tt-border th{
	color: #eeeeee;
	padding: 2px 5px 4px 2px;
	border-bottom: 1px solid #8CA5B9;
	vertical-align: top;
	background-color: #003366;
}

TABLE.tt-border td{
	color:#666666;
	padding: 2px 2px 4px 2px;
	background-color: #EDF1F3;
	border-bottom: 1px solid #8CA5B9;
	border-left: 1px solid #8CA5B9;
	vertical-align: top;
}

TABLE.tt-no-border{
	text-align: left;
	margin: 15px 0;
	border: none;
}

div.html_table_tree_row{
	height: 48px;
}

.html_table_tree_item{
	width: 32px;
	border: none;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
}

/* Make the email policy tree text line up with the branches. */
.html_table_tree_text{
	position: relative;
	top: -18px;
}

TABLE.tt-no-border td, TABLE.tt-no-border th{
	border-bottom: none;
	padding: 0px 0px 0px 10px;
}

TABLE td.tt-int{
	text-align: right;
}

TABLE td.tt-img{
	text-align: center;
}

TABLE td.tt-string{
	text-align: left;
}

td FONT{
	/* font-size: 75%; */
}

TR.nowrap {
	white-space: nowrap;
}

TD { white-space: inherit; }