/*
THIS IS NOT USED ANYMORE. We keep it because we're still migrating some old crap into hacks.css as it gets
rediscovered.
Put stuff in hacks.css instead
*/
	body
	{
	margin: 0;padding: 0;
	font:  normal 14px Verdana, Arial, Helvetica, sans-serif;
	background: #f2f2f2;
	}

	img
	{
		border: 0;
	}

	.white
	{
		background: #fff;
		clear: both;
	}

	.red
	{
		color: red;
	}


	.ta-center {
		text-align: center;
	}

	.ta-right {
		text-align: right;
	}

	.wrap, .hwrap
	{
		margin:0 auto;
		width:970px;
	}

	#ncontent
	{
		margin: 0 5px;
		padding-top: 0.5em;
	}

	/* graphs & flash demo are full width */
	body#wapp_graphs .wrap, body#wapp_flashdemo .wrap,
	body#wapp_jsgraphs .wrap
	{
		width:auto;
		border: 0;
	}

	body#wapp_graphs .hwrap,
	body#wapp_jsgraphs .hwrap
	{
		margin: 0 0 0 0.3em;
		width: auto;
	}

	body#wapp_jsgraphs
	{
		/* to be able to calculate exact max width */
		overflow-y: scroll;
	}
	
	body#wapp_graphs #nav
	{
		/* corresponds to the graph control panel */
		margin-right: 335px;
	}

	#flashdemo
	{
		text-align: center;
	}

	.center
	{
		text-align: center;
	}

	table th
	{
		text-align: left;
	}

/* HEADER */
	#header
	{
		margin: 2px 0 0 0;
		width: 100%;
		border-bottom: 1px solid #ddd;
		float: left;


	}

	#header #logo
	{
		height: 41px;
		margin:0 0 2px 0;
		padding:0;
		float: left;

		width: 160px;
		text-indent: -9999px;
		background: transparent url(/images/logo-hdpi.2.png) no-repeat center left;
	}

	@media
		/* we target webkit at 1:1, because it renders nicely whereas FF, Opera et al do not: */
		only screen and (-webkit-min-device-pixel-ratio: 1),
		only screen and (   min--moz-device-pixel-ratio: 1.25),
		only screen and (     -o-min-device-pixel-ratio: 5/4),
		only screen and (        min-device-pixel-ratio: 1.25),
		/* can this DPI one be removed? */
		only screen and (                min-resolution: 150dpi),
		only screen and (                min-resolution: 1.25dppx) { 

	    /* highDPI-specific stuff here 
	    oh the vendor-prefix nostalgia I feel...	    */
	    #header #logo
	    {
			background: none;
			text-indent: inherit;
			margin:-5px 0 2px 0;
			font-family: 'FontAwesome';
			-webkit-font-smoothing: antialiased;
			text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
			color: #8e0e00;
			font-size: 48px;
			text-decoration: none;
			height: 46px;
	    }
	}

/* NAV */
	#nav
	{
		padding-top: 11px;
		float: right;
		font: bold 18px Arial, helvetica, sans-serif;
	}

	.public #nav
	{
		padding-top: 7px;
	}

	#nav form, #nav p
	{
		display: inline;
		margin:0;
		padding: 0;
	}

	#nav a
	{
		padding: .2em .6em;
		text-decoration: none;
		color: #036;
		text-shadow: 1px 1px 0px rgba(221,221,221,190);
		position: relative;
	}


	#nav a:visited
	{
		color: #036;
	}

	#nav a:hover
	{
		background-color: #036;
		color: #fff;
		border-radius: 10px;
		text-shadow: none;
	}

	#nav a.on
	{
		color: #000;
	}

	#nav a.on:hover
	{
		background: none;
	}

	/* we use alertbubble in the nav to warn the user that global alert mute is enabled */
	.alertbubble {
		display: inline-block;
		position: absolute;
		top: 2px;
		right: 0px;
		padding:0px 4px 1px 4px;
		line-height: 12px;
		background-color:red;
		color:white;
		font-weight:bold;
		font-size:0.63em;
		font-family: "Helvetica Neue", Helvetica, Arial, "lucida grande",sans-serif;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);

		border-radius:3px;
		box-shadow:1px 1px 1px gray;
	}


/* CRUMBTRAIL */
	p#crumbtrail
	{
		margin: 0;
		padding: 0px 5px 10px 5px;
		font-size: 11px;
		color: #666;
		border: 0;
	}

	#crumbtrail span.sec
	{
		color: #000;
	}

/* forms */
	form.authelo
	{
		padding: 0em;
		font: normal 13px verdana, arial, sans-serif;
		margin: 0px;
	}

	form.authelo *
	{
		font-family: verdana, arial, sans-serif;
		font-size: 13px;
		letter-spacing: normal;

	}

/* formatting for fieldsets; the frames that group fields */

	form.authelo fieldset
	{
		border: 1px solid #ddd;
		/*width: 42em;*/
		background-color : #fff;
		margin: 1em 0 15px 0;
		padding: 0.75em 3em 1.5em 3em;

		border-radius: 4px;
	}

	form.authelo fieldset legend
	{
		background-color: white;
		padding: 0px 7px 0px 7px;
		font-weight: bold;
		margin-bottom: 0.6em;
	}

/* The divs that contain [label+element+hint] for each element type */

	form.authelo div.SFelemText,
	form.authelo div.SFelemTextarea,
	form.authelo div.SFelemPassword,
	form.authelo div.SFelemSelect,
	form.authelo div.SFelemDate,
	form.authelo div.SFelemRadio,
	form.authelo div.SFelemCheckbox,
	form.authelo div.SFelemGroup,
	form.authelo div.SFelemMany2Many
	{
		display: block;
		margin-bottom: 1em;
		padding-bottom: 1em;
		clear: left;
	}

	/* IE peekaboo hack */
	form.authelo div.SFelemCheckbox label.lblcheck
	{
		position: relative;
	}


	form.authelo div.SFelemHidden
	{
		display: none;
	}

	form.authelo div.SFelemSubmit
	{
		border: none;
		display: block;
		margin-right: 5px;
		margin-left: 0px;
		clear: left;
	}


/* Rule violations, displayed with each element */
	form.authelo div.violation
	{
		background: #ffffe1;
		padding: 1px 2px 1em 3px;
		margin-left: 0px;
		margin-bottom: 1.5em;
		overflow: visible;
	}

/* IE peek-a-boo hack */
	* html form.authelo div.violation
	{
		height: 1%;
	}

	form.authelo div.violation p.SFviolmessage
	{
		margin: 0px 0px 0.5em .2em!important;
		color: #f00!important;
		padding: 1px 0 1px 0!important;
		text-align: left;
		font: bold 0.85em arial, sans-serif!important;
	}

	p.SFviolmessage a
	{
		margin-left: 1em;
		font-size: 1em;

		color: #036;

		/* this is for when we have an icon & link contained within the violmessage,
		  e.g. when testing an http sensor that failed to find the wantedpattern */
		padding-bottom: 2px;
		font-weight: normal;
		text-decoration: none;
	}

/* The form element label */

	form.authelo label
	{
		width: 12em;
		float: left;
		cursor: pointer;
		margin: 0em 1em 0em 0em;
		color: #196;
		text-align: left;

	}

/* Labels for radio buttons & checkboxes */
	form.authelo div.SFelemRadio label.lblradio, form.authelo div.SFelemRadio label.lblcheck
	{
		margin: 0;
		font-size: .85em;
		text-align: left;
	}

	form.authelo div.horiz label
	{
		display: inline;
		float:none;
		margin: 0px 1em 0px 0px;
	}

	/* Container for vertically stacked options */
	form.authelo div.vertical
	{
		float: left;
		margin: 0em 0em 0.7em 0em;
		padding: 0px;
		clear: right;
		width: 13em;
	}

	form.authelo div.vertical label
	{
		clear: left;
		display: block;
		width: 90%;
		text-align: left;
	}


	form.authelo div.SFelemCheckbox label, form.authelo label.inline
	{
		display: inline;
		float:none;
		margin: 0px 1em 0px 0px;
	}



/* Form elements */

	form.authelo div.SFelemText input[type="text"]:focus,
	form.authelo div.SFelemDate input:focus,
	form.authelo div.SFelemPassword input:focus,
	form.authelo div.SFelemTextarea textarea:focus
	{
		background-color: #ffffe1;
	}

	/* makes input elems look nicer in firefox particularly */
	form.authelo div.SFelemText input[type="text"],
	form.authelo div.SFelemPassword input,
	select,
	form.authelo div.SFelemTextarea textarea
	{
		border-top:1px solid #7c7c7c;
		border-left:1px solid #c3c3c3;
		border-right:1px solid #c3c3c3;
		border-bottom:1px solid #ddd;
		padding: 3px 2px;
	}

/* Date/time elements */

	form.authelo div.SFelemDate label.lblcheck
	{
		width: auto;
	}

/* The optional hint text */

	form.authelo .SFhint
	{
		clear: left;
		margin: 0.2em 0em 0em 1.4em;
		/*width: 26em;*/
		width: 96%;
		/*display: none;*/
	}

	form.authelo .SFhint p /*, .hintp*/
	{
		border: none;
		font: normal 13px verdana, arial, sans-serif;
		margin: 0;
		color: #666;
		line-height: 135%;
	}
	
	form.authelo .SFhint p a.helpme
	{
		color: #666;

	}



/* DBForm update,delete,cancel button group */
	#SFc_QFsubmit, #SFc_QFdelete, #SFc_QFcancel
	{
		display: inline;
	}

/* DBFORM Many to Many rel */
	div.SFelemMany2Many table
	{
		border-collapse: collapse;
	}

	div.SFelemMany2Many table td, div.SFelemMany2Many table th
	{
		border: 1px solid #ccc;
		border-left: 0;
		border-right: 0;
		padding: 4px;
	}

	div.SFelemMany2Many table td.attrib
	{
		text-align: center;
	}

	div.SFelemMany2Many table td.attrib input
	{
		width: 3em;
	}


/* Lists with headings */
	ul.hasheadings li
	{
		margin-bottom: 1em;
	}

	li strong.listheading
	{
		display: block;
	}

/* AUTHELO STYLED FORMS */

	div.SFhint p
	{
		text-align: left;
	}

	form.authelo div.horiz label.lblradio
	{
		margin-right: 10px;
	}

	form.authelo label
	{
		width: 14em;
	}

	/* see font-awesome.css for icon def: */
	form.authelo div.sycreq label
	{
		font-weight: bold;
	}

	form.authelo div.sycreq label.lblradio
	{
		margin-right: 10px;
	}

	/* POPUP */

		body.aspopup #wrap
		{
			width: auto;
			border: 0;
		}

		body.aspopup #main
		{
			margin: 0 7px;
			width: auto;
		}

		body.aspopup #header
		{
			border-bottom: 1px solid #aaa;
			background-color: #ddf;

		}

		body.aspopup #header p
		{
			padding: 4px;
			margin: 0;
			font: bold 14px verdana;
			color: #900;
		}

		body.aspopup a.popupclose
		{
			float: right;

			font-size: 12px;
			font-weight: normal;
		}

	#main p#whywormly, #main p#featurelist, #main p#trynow
	{

		font-weight: bold;
		color: #c00;
		text-align: center;
	}


/* HOME PAGE */

	#hp .wrap
	{
		width: 950px;
	}

	ul.ticks
	{
		list-style: none;
		padding: 0 0 0 5px;
		margin:0;
	}

	ul.ticks li
	{
		padding: 0 0 0.5em 0em;
	}



	.hero h1, .hero h2
	{
		text-align: center;
		letter-spacing: -0.04em;
		border: 0;
		font-family: Arial, Helvetica, sans-serif;
	}

	.hero h1
	{
		font-weight: bold;
		font-size: 3.7em;
		margin: 0;
		padding-top: 25px;
		color: #221;
	}

	.hero h1.nopad
	{
		padding:0;
	}

	.hero h2
	{
		margin: 0 0 30px .1em;
		color: #333;
		font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	}

	#hp .ctoa
	{
		float: right;
		margin-left: 1em;
		font-size: 0.8em;
		text-align: center;
		color: #444;
	}


	#hp #tp2
	{
			margin: 0 12px;
	}

	#hp .ctoa a
	{
		border-radius: 15px;

			display: block;
			padding: 1.1em .7em;
			border: 2px solid #072;
			border-top-color: #090;
			border-left-color: #090;

			text-align: center;
			background: #00852b;
			font: bold 21px Arial, Helvetica;
			color: #fff;
			text-decoration: none;

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, #00892a),
			color-stop(0.4, #00922b),
			color-stop(0.8, #00a22b)
		);

		background-image: -moz-linear-gradient(
			center bottom,
			#00892a 10%,
			#00922b 40%,
			#00a22b 80%
		);
	}

	#hp .ctoa a.trial
	{
		color: #ffc;
	}

	#hp .ctoa a:hover
	{
	background: #090;
	}

	/* screen shots */
	#hp .shotsholder
	{
		margin: 0 0 2em 0;
		clear: both;
		background: #f2f2f2;
		padding: 15px 0 5px 7px;
	}

	#hp .shotscenter
	{
		margin: 0 auto;
		width: 970px;
	}

	#hp #shots
	{
		width: 100%;
	}

	#hp #shots, #hp #shots th
	{
		text-align: center;
		margin: 0;
	}

	#hp #shots th
	{
		font: bold 16px arial, Helvetica;
		padding: 0;
	}

	#hp #shots tr.shots td img
	{
		margin: 5px 0 0px 0;
	}

	#hp #shots td
	{
		padding: 0 1px;
	}

	#hp #logos
	{
		/*border-top: 1px solid #aaa;*/
		text-align: center;
	}
	#hp #logos img
	{
		/*border: 1px solid #aaa;*/
		padding: 0px 8px;
		margin: 5px 15px;
	}

	/* customer quote */
	#hp .quote
	{
		width: 402px;
		float: left;
		padding: 1.2em 2em .6em 2em;
		background: #f2f2f2;
		margin: 1em 0;

		border: 1px solid #f2f2f2;

	}

	#hp .quote, #hp .ctoa a, .rightbox, .ssltbox, .greyshadow
	{
		box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	}

	#hp .quote.rhs
	{
		margin-left: 30px;
	}

	#hp .quote .attrib
	{
		display: block;
		float: right;
		background: transparent url(/images/home/twologos.png) no-repeat top right;
		padding: 10px 110px 10px 0;
		font-size: 12px;
		color: #444;
		margin-right: -20px;
	}


	#hp .attrib.nn
	{
		background-position: right  5px;
	}

	#hp .attrib.reactive
	{
		background-position: right  -35px;
	}

	#hp #tp2 .quote p
	{
		font-size: 20px;
		font-family:  Georgia, serif;
		color: #7D7C74;
		text-align: justify;
	}
	.dquo
	{
		font-size: 45px;
		font-family:  Georgia, serif;
		vertical-align: bottom;
		color: #666;
	}

	/* big numbers */
	#hp #numbers
	{
		width: 100%;
		font-family: "Lucida Sans Unicode", Arial, sans-serif;
	}

	#hp #numbers th, #hp #numbers td
	{
		text-align: center;
		color: #036;
		width: 25%;
		/*border: 1px solid red;*/

	}

	#hp #numbers th
	{
		font-size: 32px;

	}


	#hp #tp2 p, #hp li {
	color: #333;
	font-family: Georgia, serif;
	font-size: 17px;
	line-height: 1.4em;
	}

	#hp p strong {
	background: none repeat scroll 0 0 #FFFFBB;
	font-weight: normal;
	}


/* JOIN */

	#SFc_iam
	{
		margin-bottom: 0px;
	}

	#SFc_iam #lbl4iam
	{
		float: left;
	}

	#SFc_iam label.lblradio
	{
		width: 16em;
		color: #777;
	}

	/* apps/welcome.inc.php */
	form#welcome
	{
		margin-left: 7px;
	}

/* LOST PASSWORD */
	p.idea
	{
		font-weight: bold;
		margin: 0 0 25px 0.2em;
	}


/* NOTIFICATIONS DIALOG BOXES  and "save" slide down for jsgraphs */
	#msgbox_container
	{
		position: absolute;
		top: -1px;
		left:0;
		width: 100%;
		z-index: 1000;
	}

	#msgbox, #saveslider
	{
		padding: 0.5em 1em 1em .5em;

		border: 1px solid #bbb;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.4);


		background: #ffffd1;
		width: 620px;
		display: block;
		margin: 0 auto;

		border-radius: 4px;

		border-top-left-radius: 0;
		border-top-right-radius: 0;

	}

	#saveslider {
		padding: 0;
		width: 13em;
		display: none;
		position: fixed;
		top: 0;
	}


	#msgbox.biginfo
	{
		width: 47em;
	}

	#msgbox.hover
	{
		background: #f9f9e9;
	}

	#msgbox h3
	{
		margin: 0;
		font-family: arial, helvetica, sans-serif;
		font-size: 18px;
		font-weight: bold;
		padding: 7px 0px 9px 5px;
		color: #036;
	}

	#msgbox p, #msgbox ul
	{
		margin: 0px;
		padding: 4px 1em 4px 40px;
		color: #222;
	}

	#msgbox p img
	{
		vertical-align: middle;
	}

	#msgbox ul li
	{
		font-size: 12px;
	}

	#msgbox .closeinfo
	{
		float:right;
		color: #a99;
		font-weight: bold;
		font-size: 0.8em;
		text-transform: uppercase;
		visibility: hidden;
		margin: -6px 0 0 0;
		padding: 0;
	}

	#msgbox.hover .closeinfo
	{
		visibility: visible;
	}


/* CONTENT */

	h1
	{
		font-size: 18px;
		padding: 0px;
		margin: 0px;
	}

	p, li
	{
		font-size: 13px;
	}


/* CONTENT BOXES */

	#left66
	{
		margin:0 auto;

		width: 630px;
		padding-left: 2px;
		padding-top: 5px;
	}

	#left66.wider
	{
		width: 720px;
	}

	div#right33
	{
		margin-left: 20px;
		float: left;
	}

	.rightbox
	{
		padding: 5px;
		width: 290px;
		margin: 1em 0;
		padding: 0;
		background: #fcfcfc;
		border: 1px solid #eee;

		border-radius: 2px;
	}

	.rightbox h2
	{
		font-size: 17px;
		color: #333;
		font-family: georgia, times new roman, serif;
		font-weight: normal;
		margin: 5px 5px 10px 5px;
		text-align: left;
		border: 0;
	}

	.rightbox h2.toolate
	{
		color: #a30;
		text-align: right;
	}

	.rightbox.content h2
	{
		text-align: left;
		margin: 10px 7px 5px 7px;

	}

	#right33 .rightbox p
	{
		margin: 13px 9px 20px 9px;
		text-align: justify;
		font-size: 12px;
		line-height: 130%;
	}

	div.centerimage
	{
		text-align:center;
	}

	div.centerimage img
	{
		border: 1px solid #ddd;
	}


/* FORMS */
        div.formouter
        {
        	background: #f2f2ff;
        	width: 470px;
        	padding: 0px 0px 10px 0px;
        }

        div.formouter h3
        {
		font-size: 17px;
		margin:0 5px 0 5px;
		padding: 0 0 3px;
		background: #f2f2ff;

		color: #900;
		text-align: left;
        }

        div.forminner
        {
        	background: #fff;
        	margin: 0px 5px 0px 5px;
        }

	form.authelo label
	{
		text-align: right;
		color: #335;
		font-family: arial, helvetica, sans-serif;
		padding-top: 3px;

	}

	form.authelo div.SFhint
	{
		text-align: right;
	}

	form.authelo div.SFelemSubmit
	{
		text-align: center;
	}

	h3.SFdivider
	{
		border-bottom: 1px solid #ccc;
		padding-bottom: 2px;
		margin-right: 3em;
		color: #444;
		position: relative;
	}

/* GRAPH PAGE GRAPHS*/

	form#graphperiodselector
	{
		margin: 0 15px;
	}

	form#graphperiodselector, form#graphperiodselector p, form#graphperiodselector select
	{
		display: inline;
	}

	form#graphperiodselector select
	{
		font-size: 12px;
		padding: 0;
	}

	div.gp_header
	{
		text-align: left;
		margin: 0 0 5px 0;
		background-color: #eef;
		border-bottom: 1px solid #fcc;
		color: #036;
		position: relative;
		padding: 1px 5px;
	}

	.gp_summary
	{
		font-weight: bold;
		font-size: 13px;
	}

	.gp_summary input
	{
		font-size: 10px;
	}

	.gp_summary .eipactive a
	{
		display: none;
	}

	div.gp_header a
	{
		font-size: 12px;
		text-decoration: none;
	}

	.gp_header a .icon:before
	{
		margin: 0 0 2px 6px;
		vertical-align: middle;
		border: 0;
	}


	div.gp_header .uptimereplink a
	{
		font-size: 11px;
		padding-left: 0.3em;
	}

	div.graphcontainer h3
	{
		margin: 0;
		padding: 0 5px;
		text-align: center;
		background-color: #ddd;
		cursor: pointer;
		font-size: 13px;
		font-family: verdana, arial, sans-serif;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
	}

	.graphcontainer h3, .graphcontainer
	{
		border-radius: 10px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	div.graphcontainer
	{
		margin: 5px 3px 3px 1px;
		background-color: #f2f2ff;
		float: left;
		padding: 0px;
		position: relative;

	}

	div.graphcontainer img
	{
		margin: 12px;
		border: 1px solid #777;
	}

	div.graphcontainer .controlpanel
	{
		position: absolute;
		right: -2px;
		top: -2px;
	}

	div.graphcontainer a.control_anchor
	{
		text-decoration: none;
		display: block;
	}

	/* templates */
	.jstemplate
	{
		display: none;
	}

/* new graph pages header jsgraphs */
	#wapp_jsgraphs #ncontent {
		margin: 0;
		padding:0;
	}

	#graphcollection {
		margin: 8px 7px;
	}

	/* JS Graph Header */
	.gp_header.jsgh {
		margin-top: 2px;
		padding: 1px 1px 9px 3px;
		height: 18px;
		border-bottom: 1px solid #d9d9d9;
		background: #f5f5f5;

		/* seriously, these prefixes are STILL needed! (2014/04/17) */
		background: -webkit-linear-gradient(top,#f5f5f5,#eee);
		background: -moz-linear-gradient(top,#f5f5f5,#eee);
	}

	.jsgh #cplPages {
		margin: 4px 0 0 2px;
		white-space: nowrap;
		overflow: hidden;
	}

	.jsgh .pagecontrols {
		float: right;
		border-left: solid 1px #d2d2d2;
		padding: 0 6px 0 8px;
		font-size: 12px;
	}

	.jsgh .pagecontrols.last {
		padding-right: 1px;
	}

	.cont .controlpanel
	{
		position: absolute;
		right: -5px;
		top: -3px;
		/* so that it does not get hidden because of graph popup  (which graph popup?) */ 
		z-index: 4500;
	}

	/* time range slider: */

	.controlpanel .timerange {
		width: 98%;
		margin-left: 3px;
		padding: 0;
	}

	.controlpanel .timelabels {
		width: 100%;
		border-collapse: collapse;
	}

	.timelabels td {
		color: #a2a2a2;
	}

	.timelabels .ta-center {
		font-weight: bold;
		color: #900;
	}

	.popout-list.graphset {
		width: 300px;
	}

	/* graph container, .cont is also used for RHS ads on free tools */
	.cont {
		margin: 4px 0 7px 0;

		float: left;
		/*border: 1px solid #aaa;*/
		box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
		border-left: 4px solid #f2f2f2;
		border-right: 4px solid #f2f2f2;
		position: relative;
	}

	.cont h3 {
		cursor: pointer;
		text-align: center;
		margin: 0;
		font-size: 12px;
		background: #f2f2f2;
		font-weight: normal;
	}

	.cont h3:hover {
		background: #ccf2f2;
	}

	.cont a.control_anchor
	{
		text-decoration: none;
		display: block;
		opacity: 0;
	}

	/* graph page header time range & size links */
	.jsgh .controls {
		display: inline-block;
	}
	.jsgh .controls a {
		display: inline-block;
		padding: 5px 6px 6px 6px;
		font-size: 13px;
	}

	.jsgh .controls a:hover,  .jsgh .controls a.current {
		background: #900;
		color: #fff;
	}

	/* for the small, medium and large icon buttons in the graph page header:; */
	.jsgh .controls a:hover .icon:before,  .jsgh .controls a.current  .icon:before {
		color: #fff;
	}

	.jsgh .controls.size .icon:before {
		margin: 0;
	}

	#graphs .graph {
		/*margin: 5px;*/
		background: #fff;
		/*padding: 8px 0 4px 4px;*/
		white-space: nowrap;
		overflow: hidden;
	}
	
	#graphs .graph .spinner:before {
		font-size: 4.875rem;
	}

	#graphs .yaxis {
		display: none;
	}


	#graphs .chart {
		/*float: left;*/
		display: inline-block;
		width: 100%;
	}

	#graphs .loading {
		text-align: center;
		height: 100%;
		position: absolute;
	}

	#graphs .clickable:hover {
	    cursor: pointer;
	    background-color: #FFFFE9;
	}

	#graphs  .legend {
		clear: left;
		background: #f2f2f2;
		color: inherit;
		display: block;
		overflow: hidden;
		padding: 0;
		text-align: center;
		height: 17px;
		visibility: hidden;
	}

	#graphs  .legend ul li {
		font-size: 11px;
		display: inline;
	}

	.legend .swatch {
		position: relative;
		top: 1px;
	}
	
	.legend .swatch:hover {
		outline: 1px solid black;
	}

	/* x-axis and y-axis tick labels
	overriding the defaults in rickshaw.min.js:; */
	.rickshaw_graph .x_tick .title,
	.rickshaw_graph .y_ticks text {
		font: normal 12px Arial, sans-serif;
		opacity: 0.65;
		color: #000;
		stroke-width: 0px;
		text-shadow: 1px 1px 1px rgba(221,221,221,190);
	}

	/* "large" graphs need bigger labels, legend & title: */
	.large .rickshaw_graph .x_tick .title,
	.large .rickshaw_graph .y_ticks text,
	#graphs .large  .legend ul li,
	.cont.large h3 {
		font-size: 14px;
	}


	#graphs  .large .legend {
		height: 24px;
	}

	/* and "small" graphs: */
	#graphs .small  .legend ul li,
	.cont.small h3 {
		font-size: 10px;
	}

	#graphs  .small .legend {
		height: 16px;
	}

	/* hide the y-axis vertical line, because the graph border serves the same function: */
	.rickshaw_graph .y_ticks path {
		display: none;
	}

	.rickshaw_graph path.area {
		opacity: 0.86;
	}

	.rickshaw_legend .action {
		opacity: 0;
	}

	.rickshaw_legend .action:hover {
		opacity: 1;
	}

/* end JSgraphs */

/* GRAPH CONTROL PANEL FLYOUT */
	div.flyoutholder
	{
		border: 1px solid #196;

		border-top-color: #999;
		border-left-color: #999;
		border-right-color: #666;
		border-bottom-color: #666;
		z-index: 1000;
	}

	div.flyoutholder h2
	{
		padding: 2px 2px 2px 4px;
		margin: 0px;
		height: 15px;
		font-size: 13px;
		color: #036;
		border: 0;
	}

	div.flyoutinner
	{
		border: 1px solid #196;

		border-top-color: #ccc;
		border-left-color: #ccc;
		border-right-color: #999;
		border-bottom-color: #999;
	}

	#cpl_form_XX
	{
		display: none;
	}

	input.num_sml
	{
		width: 4em;
	}

	input.larger
	{
		width: 20em;
	}

	.graph_cpl label
	{
		display: block;
		font-weight: bold;
		color: #888;
	}

	form.graph_cpl p
	{
		margin: 8px 2px 0px 7px;
		padding: 0;
	}

	form.graph_cpl span.violation
	{
		font-size: 80%;
		color: red;
		display: block;
		padding: 2px 0px 0px 0px;
		margin: 0;
	}

/* GRAPH MAIN CONTROL PANEL */
	div#maincpl
	{
		border: 1px solid #ddd;
		background-color: #eef;
		width: 330px;
		height: 100px;
		display: none;
		position: absolute;
		border-radius: 0 0 0 3px;

		box-shadow: 0px 2px 2px #aaa;
	}

	div#maincpl p#maincpl_status
	{
		position: absolute;
		font-style: italic;
		top: 76px;
		font-size: 13px;
		font-weight: bold;
		padding: 4px;
		margin: 0px 2px 0px 0px;
		border-top: 1px solid #ccc;
		width: 99%;
		text-align: center;
	}

	#maincpl p.lbl
	{
		float: left;
		margin: 0 10px 0 4px;
		padding: 7px 2px 2px 2px;
		font-weight: bold;
		font-size: 11px;
		color: #333;
	}

	#track1
	{
		background-color: #eef;
		width: 218px;
		height:36px;
		background-image: url(slider-track.gif);
		background-repeat: no-repeat;
		float: left;
		cursor: pointer;
		position: relative;
	}


	.ui-slider .ui-slider-handle
	{
		background: transparent url(slider-handle.gif) no-repeat center;
		width: 18px;
		height: 20px;
		position: absolute;
		top: 3px;
		margin-left: -9px;
	}


	div#validation_msgs
	{
		display: none;
	}

	/* graph page: MAIN CPL BUTTONS */

	#maincplbuttons
	{
		clear: left;
		padding: 0;
		text-align: center;
	}


/* FOOTER */
	#footer p.footer
	{
		border-top: 1px solid #bbb;

		margin: 0;
		font-size: 10px;
		text-align: center;
		clear: both;

		padding: 2px 0 2px 0;
	}


/* CHECKER SETUP */
	#SFc_cs_save, #SFc_cs_cancel, #SFc_cs_test
	{
		display: inline;
	}

	#wapp_checkersetup h3.SFdivider
	{
		margin:0;
		width: 14em;
		float: left;
		border: 0;
		padding-left: 3px;
	}

	#wapp_checkersetup div.horiz
	{
		background-color: #f2f2f2;
		margin-bottom: 4px;
	}

	#wapp_checkersetup div.SFelemRadio div.horiz
	{
		background-color: transparent;
	}

	#wapp_checkersetup  div.sgrpoff
	{
		border: 1px solid #ddd;
		border-top: 0;

		margin: 0 0 9px 0;
		padding: 5px 0 0 0;
		zoom: 1;
	}

	/* helpme link, and also the .lm link which is similar to helpme and used for contextual help links in the SSL tester */
	#wapp_checkersetup h3.SFdivider a.helpme, a.lm
	{
		text-decoration: none;
		color: #444;
	}

	#wapp_checkersetup h3#endofsensors
	{
		clear: both;
		float: none;
		margin-bottom:10px;
	}

	div.SFelemText.tny input
	{
		width: 4em;
	}

	div.SFelemText.huge input
	{
		width: 25em;
	}

	#wapp_checkersetup div.SFelemText,
	#wapp_checkersetup div.SFelemTextarea,
	#wapp_checkersetup div.SFelemPassword,
	#wapp_checkersetup div.SFelemSelect,
	#wapp_checkersetup div.SFelemDate,
	#wapp_checkersetup div.SFelemRadio,
	#wapp_checkersetup div.SFelemCheckbox
	{
		margin-bottom: 3px;
	}

	#wapp_checkersetup div.SFhint p
	{
		font-size: 11px;
		margin: 0 0 0 2px;
		color: #666;
	}

	#wapp_checkersetup form#checksetup
	{
		width: 64em;
	}

	/* long descriptions for form elements, used in dynamic floating hints */
	#wapp_checkersetup div.SFhint
	{
		background: #ffffe1;
		display: none;
		clear: none;
		margin: 0 8px 0 0;
		padding: 2px 4px 4px 2px;
		width: 270px;
		float: right;

		border: 1px dotted #999;
		background: #ffffd1;
	}

	#wapp_checkersetup div.SFhint strong, #wapp_checkersetup div.SFhint em
	{
		font-size: 11px;
	}

	/* 'advanced' elements which are initiallty hidden */
	#wapp_checkersetup div.advopt
	{
		padding: 0;
	}

	#wapp_checkersetup .advtoggle
	{
		padding: 0 0 .2em 1em;
	}

	#wapp_checkersetup .advtoggle a
	{
		font-size: 90%;
		color: #00C;
	}

/* exportdata hack for vertical checkbox alginment: */
	#wapp_exportdata #SFc_columns  label
	{
		float:left;
	}

	#wapp_exportdata button
	{
		clear: both;
		display: block;
	}

/* POLLER SETUP */
	#SFc_poll_submit, #SFc_poll_skip, #SFc_poll_showresp
	{
		display: inline;
	}

	#agenturl, #pollersetup #url
	{
		width: 22em;
	}

	p.bitinfo.agentoutdated
	{
		color: #900;
	}

	pre#pollerresponse
	{
		width: 100%;
		height: 30em;
		overflow: scroll;
		background: #e3e3e3;
		font-size: 0.9em;
	}



/* HOST EDITING / VIEW HOST  edithost */
	#SFc_cc_submit, #SFc_cc_submit_return, #SFc_cc_cancel
	{
		display: inline;
	}

	h2.host
	{
		padding: 0;
		margin: 0;
		border: 0;
		font: bold 21px arial, helvetica, sans-serif;

		color: #333;
	}

	.hostuid
	{
		color: #ccc;
		font-size: 12px;
	}

	div.ehfloater
	{
		float: left;
		width: 45%;
	}

	.hoststatus a.detlink
	{
		margin-left: 7px;
		text-decoration: none;
	}

	.hoststatus a.detlink:hover
	{
		background-color: #ffc;
		text-decoration: underline;
	}


	a.recentfailure
	{
		font-weight: bold;
		color: #900;
	}



	h3.smallcaps
	{
		margin:0;
		padding: 1px;
		font: normal 0.9em verdana;
		color: #444;
		text-transform: uppercase;
		background: #ddd;
		text-align: center;

	}

	.hostsensorconfig .reportnav
	{
		padding: 0px 0px 0px 5px;
		float: right;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		width: 28em;
		margin-bottom: 0.5em;

		border-bottom-left-radius: 10px;
	}

	.column.first h4
	{
		margin-right: 1.2em;
	}

	.hostsensorconfig .reportnav .column
	{
		float: left;
	}

	.reportnav h4
	{
		margin: 0.8em 0 1.5em 0;
	}

	.reportnav h4 a
	{
		text-decoration: none;
		background: transparent no-repeat center left;
		padding: 11px 3px 11px 5px;
		font-size: 13px;
		font-family: arial, helvetica, sans-serif;
		color: #00c;
	}

	.reportnav h4.hostdeps sup
	{
		font-size: 8px;
		font-family: Arial, Helvetica, sans-serif;
		background-color: yellow;
		font-weight: normal;
	}



	.reportnav h4 a:hover
	{
		background-color: #ffc;
	}

	.hoststatus
	{
		border-collapse: collapse;
		margin-top: 0.3em;
	}

	/* this is for the 'big tick' next to 'Current Status' on edithost: */
	.hoststatus .status
	{
		padding: 0;
	}

	.hoststatus td
	{
		padding: 9px 5px;
	}

	.hoststatus tr.btnsettings th
	{
		padding-top: 10px;
	}


	.hoststatus tr th
	{
		padding-right: 15px;
	}

	/* SENSOR LIST & HOST LIST TABLES */

	table#sensorconfig td.sensorcontainer
	{
		width: 31em;
	}

	td.sensorcontainer .starget
	{
		clear: left;
	}


	td.sensorcontainer
	{
		font-size: 0.8em;
	}

	td.sensorcontainer span.eipcontainer, #metrics-form .name
	{
		color: #333;
		font-size: 1.35em;
		display: block;
		padding: 6px 0;
		font-weight: bold;
	}

	.sensorcontainer .eipcontainer .icon:before {
	    margin-bottom: 6.5px;
	}


	.sensorcontainer input
	{
		margin: 0;
	}

	table#sensorconfig td.actions a img
	{
		margin-top: 3px;
	}

	/* health monitoring rules */
		table#hmrules td
		{
			padding: 6px 3px;
		}

		table#hmrules td.cond
		{
			font-size: 0.8em;
			color: #000;
		}

		table#hmrules td.cond span
		{
			display: block;
			font-size: 1.3em;
			font-weight: bold;
			color: #333;
			padding-bottom: 2px;
		}

		table#hmrules tr.breach td.obs, table#hmrules tr.breach td.bre
		{
			font-weight: bold;
			color: #900;
		}

	/* tab bar tabs */
		table#hosttabhead
		{
			width: 100%;
			border-bottom: 2px solid #555;
			border-collapse: collapse;
		}

		#hosttabhead td
		{
			padding: 0;
		}

		table#hosttabhead td.tabholder
		{
			margin: 0;
			display: none;
		}

		div.tabpanel
		{
			width: 100%;
			clear: both;
		}


		#modetabs
		{
			float: right;
			list-style: none;
			margin: 0;
		}

		#modetabs li
		{
			float: left;
		}

		#modetabs a {
			display: block;
		}
		
		#modetabs a, .graphtabs a 
		{
			padding: 0.4em 1.5em;
			margin: 0 0 0 6px;
			background-color: #DCDCDC;
			text-decoration: none;
			color: #999999;


			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}

		#modetabs .icon:before {
				font-size: 105%;
		}

		#modetabs a:hover, .graphtabs a:hover
		{
			background-color: #ffc;
			color: #000;
		}

		#modetabs a.active-tab, .graphtabs a.active-tab, .graphtabs a.active-tab:hover { /* since .popout-list breaks hover */
			background-color: #3e3e3e;
			color: #ccc;
		}

		/* scheduled downtime recurrence settings */
		#wapp_newperiod #recurrences h3
		{
			cursor: pointer;
		}

/* edit in place */

	.eipcontainer input
	{
		float: left;
	}

	.eipcontainer a.actBut
	{
		padding: 0px 0 0px 5px;
		margin-top: -2px;
	}

	em.eipwait
	{
		color: #009;
		font-weight: bold;
	}

/* MEMBERS (general styles) */

	/* container for most members pages */
	h2
	{
		font: bold 18px arial, helvetica, sans-serif;

		color: #333;
		border-bottom: 1px dotted #ccc;
		margin: 0px 10px 8px 0;
	}

	h2.noborder
	{
		border: 0;
		padding-top: 4px;
	}

	a.micro
	{
		font: normal 11px Verdana;
		text-decoration: none;
	}

	a.micro:hover {
		text-decoration: underline;
	}

	th.action
	{
		background-color: #cec;
	}

	table
	{
		font-size: 12px;
	}

	/* this is to make the 'data missing' links look good on this page: https://wormly.dev/hosthm/hostid/19657 */
	table a.helpme
	{
		padding-bottom: 1px;
	}

	/* all boxed content */
	#hostlist .state {
		width: 6.8em;
		white-space: nowrap;
	}

	.memtable
	{
		width: 100%;
		clear: both;
		border-collapse: collapse;

		margin: 0.4em 0;
	}

	.memtable td, .memtable th
	{
		padding: 5px;
	}

	.memtable.tight th
	{
		padding-left: 0;
	}

	.memtable.tight td
	{
		padding: 0;
	}

	.memtable .spacious
	{
		padding: 8px 0;
	}

	.memtable thead th, .memtable tr.thead th
	{
		color: #036;
		background-color: #f2f2f2;
	}

	.memtable thead.nogradient th
	{
		background-image: none;
	}

	/* prevent the appearing-checkbox flicker */
	.memtable thead th input
	{
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.memtable tbody tr td a.edithost
	{
		display: block;
		color: #3252B2;
		border: 1px solid #fff;
		padding: 4px 0;
		max-width: 300px;
	}

	.memtable tbody tr td a.edithost:hover, .memtable tbody tr:nth-child(even) td a.edithost:hover
	{
		color: #c00;
		border: 1px dotted #777;
		text-decoration: none
	}

	.memtable .actions
	{
		white-space: nowrap;
	}

	.memtable td.actions a
	{
		opacity: 0.8;
		margin: 2.5px 0;
	}

	.memtable td.actions  a:hover
	{
		opacity: 1;
	}

	.memtable.altrows tr:nth-child(even) td, .memtable.altrows tr:nth-child(even) th
	, .memtable tr.header th, .memtable tr.header td
	{
		background-color: #f2f2f2;
	}

	.memtable tbody tr.selected td
	{
		background-color: #ffff99 !important;
	}

	.memtable tbody tr:nth-child(even) td a.edithost, .memtable tr:nth-child(even) td.actions a img
	{
		border-color: #eee;
	}

	.memtable tbody tr.selected td a.edithost {
			border-color: transparent;
	}

	.memtable th.actions
	{
		/* this is to offset headers to they line up with columns of actBut's - which are wider than they first appear
		  due to the :hover button surround */
		padding-left: 12px;
	}

	.memtable .unknown
	{
		color: #999;
	}

	.memtable .icon.unknown
	{
		opacity: 0.5;
	}

	.clearer
	{
		clear: both;
	}

	.topspacer
	{
		margin-top: 1em!important;
	}

	a.SFbutton img.add
	{
		border: 0;
		vertical-align: bottom;
		margin-right: 5px;
	}

	p.bitinfo
	{
		background: #ffd;
		padding: 4px 6px;
		font: normal 13px arial;
		box-shadow: 1px 1px 1px #ccc;
		border-radius: 3px;
	}

	p.bitinfo b
	{
		color: #444;
	}

	p.bitinfo:before
	{
		margin-right: 0.3em;
	}

	#main p.bitinfo
	{
		margin-left: 0;
	}

	p.hasbutton.right
	{
		margin: 0 0 .4em 0;
	}

	/* action buttons use the same icon classes as our SFbutton icons */
	a.actBut
	{
		text-decoration: none;
		border: 1px solid;
		border-color: transparent;
		padding: 3px 0 3px 3px;
		display: block;
		float: left;
		/*width: 22px;*/
	}

	/* action buttons use image replacement; we don't want the text shown */
	a.actBut .icon
	{
		/*text-indent: -9999px;*/
		display: block;
		/*font-size: 90%;*/
		margin-left: 7px;
	}

	a.actBut:active, a.actBut:focus
	{
		/* DELETE this is to work around the firefox side-effect where focussed <a>'s with large text-indents
		  show a huge outlined area */
		outline:none;
	}

	/* when you hover over an action button, it looks like a regular button */
	a.actBut:hover, .hover-like-a:hover
	{
		border: 1px solid #333;
		background: #ddd;


		background: #fff url(button14.gif) repeat-x 0px -200px;
		border:1px solid #dedede;
		border-right:1px solid #bbb;
		border-bottom:1px solid #bfbfbf;

		border-radius: 4px;

	}

	.hover-like-a:hover {
		margin: -1px -1px 0 0;
	}
	
	/* members host search box */
		form#searchhosts
		{
			margin: 0;
			padding: 0;
		}

		form#searchhosts span.hostsearchbox
		{
			font: normal 12px arial;
		}

		form#searchhosts span.hostsearchbox input
		{
			margin-left: 31%;
			color: #666;
			width: 15%;
		}

		a.autoResume {
			background-color: rgba(95,185,70,0.3)/* #a6c5aa*/;
			border-radius: 6px;
		}
/* MEMBER ALERTS */
	div.memberalert
	{
		width: 350px;
		background-color: #cfc;
		border: 1px solid #900;
		color: #333;
		padding: 5px;
	}

/* VIEW FAILURES */
	p#daterange
	{
		padding: 0;
		margin: -5px 0 1.3em 2px;
		font-size: 11px;
	}

	#testhistory td.nopad
	{
		padding: 0;
	}


/* DAILY REPORTS */

	#informational_box, .infobox
	{
		border:2px solid #FFEAC9;
		border-left: 0;
		border-right: 0;
		margin:0 0 10px 0; /* 0 top so that it does not jump when sliding down */
		padding:5px 8px 5px 55px;
		background: #FFF0CC;

	}

	#informational_box.brief
	{
		padding: 5px 8px;
	}

	#informational_box.brief p
	{
		text-align: center;
	}

	#informational_box p, .infobox p
	{
		margin: 0 0 10px 0;
		font: normal 13px arial;
		line-height: 150%;
		color: #333;
	}

	#informational_box p.last
	{
		margin: 0;
	}

	#main p.slareport_nav
	{
		background: #eee;
		padding: 5px;
		margin: 0 0 8px 0;
		color: #999;
		font-size: 11px;
	}

	p.slareport_nav span.current
	{
		font-weight: bold;
		font-size: 14px;
		color: #036;
	}

	p.slareport_nav .perfgraphlink
	{
		margin-left: 20px;
	}

	table#slareport
	{
		width: 100%;
	}

	#slareport tr.fail td
	{
		background-color: #fdd;
	}

	#slareport tr.fail td.details
	{
		text-align: center;
	}

	#slareport tr.totals td
	{
		background-color: #e7e7e7;
		font-weight: bold;
		padding-bottom: 4px;
		border-top: 1px solid #888;
	}

	#slareport tr.totals td.legend
	{
		text-align: center;
	}

	span.hover
	{
		border-bottom: 1px dotted #555;
		padding-bottom: 1px;
		cursor: help;
	}

/* SETTINGS APP */
	div.appSettings h4
	{
		padding: 0;
		margin: 0.5em 0 0 0;
	}

	h4 a:hover
	{
		background-color: #ffa;
	}

	#main div.appSettings p
	{
		padding: 0;
		margin: 0 0 1.5em 0;
	}

	div.apsItem
	{
		margin: 0px 0px 5px 10px;
		display: block;
		float: left;
		font-size: 24px;
		clear: both;
	}

	div.freetoolsitem
	{
		background: transparent no-repeat 0 10px;
		padding: 5px 5px 5px 60px;
		margin: 5px 0px 13px 10px;
	}


/* ALERT TARGET SETUP */
	table#atargsetup
	{
		width: 100%;
		margin-top: 13px;
	}


	#wapp_atsetup option.custom
	{
		font-weight: bold;
	}

	#wapp_atsetup div.SFelemSubmit
	{
		text-align: center;
	}

	table#atargsetup tr#afterline th
	{
		font-size: 11px;
		font-weight: normal;
		padding: 0 0 0 2px;
	}

	table#atargsetup tr.channel_disabled
	{
		opacity:0.5;
	}

/* SETTINGS -> CONTACTS */
	#SFc_mcontact_submit, #SFc_mcontact_cancel, #SFc_mcontact_delete
	{
		display: inline;
	}


	#contactslist tr.splitgroup td, #shmrules tr.splitgroup td, #shmrules-wormly tr.splitgroup td
	{
		padding: 1px 3px;
		background-color: #eee;
		border-top: 1px solid #ccc;
	}

	#contactslist td > .pchannel
	{
		padding-left: 0.92em;
	}

	table#contactslist td
	{
		border: 0;
		padding: 3px 2px 3px 2px;
	}

	table#contactslist tr.channel_disabled
	{
		opacity:0.5;
	}

	#wapp_contacts h3.SFdivider
	{
		color: #036;
	}

	#wapp_contacts .chtest
	{
		margin-left: 10px;
	}

/* MY ACCOUNT   MYACCOUNT */
	.myacsectiontab
	{
		width: 100%;
		margin:0;
		border-collapse: collapse;
	}

	.myacsectiontab th, .myacsectiontab td
	{
		vertical-align:middle;
		padding: 0.7em 0em;
	}

	.myacsectiontab td.actions
	{
		width: 14em;
	}


/* BILLING */
	.memtable.billing td
	{
		padding: 4px 4px 4px 1em;
	}

	.memtable.billing tr td
	{
		border-top-width: 0;
	}

	.memtable.billing tr.break td
	{
		border-top-width: 1px;
	}

	.metrics-usage .excess
	{
		color: #a00;
		font-weight: bold;
	}

	.metrics-usage .pct
	{
		/*text-align: right;*/
	}

	.myacsectiontab tr.balance td, #costsummary .balance
	{
		color: #090;
	}

	.myacsectiontab tr.balance td.negative, #costsummary .balance.negative
	{
		color: #f00;
	}

	#billingstates tr.currentstate td
	{
		background-color: #dfd;
	}

	#billingstates td.alloff
	{
		text-align: center;
		font-style: italic;
	}

	#billingstates tr.counts th
	{
		font-weight: normal;
	}

	#billingstates tr.counts td
	{
		border-right: 1px solid #ddd;
		width: 13px;
	}

	#activatenow
	{
		background-color: #ff9;
		padding: 0.4em;
		border: 1px solid #ccc;
		margin-bottom: 10px;
	}

	#activatenow p.hasbutton
	{
		text-align: center;
	}

	h2.topspace
	{
		margin-top: 1.75em;
	}


/* PRICING */
	table#servicecharges
	{
		margin-bottom: 15px;

	}

	table#servicecharges td, table#notifyrates td
	{
		font-size: 11px;
	}

	table#notifyrates td.zero
	{
		color: #999;
	}

	#wapp_pricing .freebie
	{
		color: #090;
	}



/* INVOICE LIST */
	#invoices
	{
		margin-bottom: 1em;
	}

	#invoices td
	{
		padding: 5px 3px;
	}

	#invoices td.paid
	{
		color: #090;
	}

	#invoices td.overdue
	{
		color: #d00;
		font-weight: bold;
	}

/* prepayment */
	form#prepay input#amount
	{
		width: 5em;
	}

	form#pay input#description
	{
			width: 25em;
	}

/* PAY INVOICE */
	#invoice
	{
		background-color: #f0f0f0;
		margin-bottom: 3em;
		margin-top: 15px;
		padding: 6px 10px;
	}

	#invoice p.invnum
	{
		float: right;
		margin-right: 5px;
		width: auto;
	}

	#invoice p.invperiod
	{
		font-weight: bold;
		width: auto;
	}

	#invoice div.invitems
	{
		width: 100%;
		border-top: 1px solid #333;
		padding: 10px 0 10px 0;
	}

	#invoice div.invitems p
	{
		margin: 0 10px 0 10px;
	}

	#invoice div.invitems p label
	{
		width: 240px;
		font-weight: bold;
		float: left;
		color: #446;
	}

	#invoice div.invitems p.total
	{
		margin-top: 3px;
		border-top: 1px solid #ccc;
	}

	#invoice div.invitems p.balance
	{
		margin-top: 20px;
		color: #090;
	}

	#invoice div.invitems p.payable
	{
		margin-top: 20px;
	}

	#invoice div.invitems p .payamnt
	{
		text-decoration: underline;
		font-weight: bold;
		font-size: 16px;
	}

	#invoice div.invitems p.payable label
	{
		text-decoration: none;
		color: #454;
	}

	#invoice p.paynow
	{
		text-align: center;
		margin-bottom: 15px;
	}

	#invoice p.complete
	{
		font-weight: bold;
		color: #363;
	}

/* Activate, PRICING PLANS */
	/*#activateactions*/
	/*{*/
		/*text-align: center;*/
		/*padding-top: 10px;*/
	/*}*/
/**/
	/*#activateactions img*/
	/*{*/
		/*margin-top: 25px;*/
	/*}*/

	#pricingplans thead th
	{
		background-color: #ddd;
		padding: 5px;
	}

	#pricingplans
	{
		width: 100%;
		margin-bottom: 20px;
	}

	#pricingplans tbody tr td
	{
		padding: 9px 0 9px 3px;
	}

	#pricingplans tbody th
	{
		background-color: #eef;
		padding-left: 3px;
	}

	#pricingplans tr.prices td
	{
		font-weight: bold;
		color: #090;
	}

	#pricingplans tr.getdetails td
	{
		background-color: #eee;
	}

	#pricingplans tr.getdetails a
	{
		font-size: 11px;
	}

	#pricingplans tr.signups a, #pricingplans tr.freetrials a
	{
		display: block;
		background: #ffe640;
		font-size: 16px;
		font-weight: bold;
		padding: 4px;
		text-align: left;
		color: #99001D;
		text-decoration: none;
	}

	#pricingplans tr.freetrials a
	{
		background: #ffee90;
	}

	#pricingplans tr.signups a:hover, #pricingplans tr.freetrials a:hover
	{
		background: #bb9;

	}

/* plan specific pages: */

	#wapp_plans #leftcontent
	{
		width: 69%;
	}
	#wapp_plans #leftcontent h2
	{
		clear: both;
		margin-top: 25px;
	}

	#wapp_plans #leftcontent h2.first, div.tute h2.first
	{
		margin-top: 0px;
	}

	#wapp_plans   p img.rightimage
	{
		margin-bottom: 15px;
	}

	#right33 .rightbox.content.clear
	{
		background-color: #fff;
	}

	.rightbox.content.clear div.custspotlightimg
	{
		border: 0;
	}


	#wapp_plans #right33 .rightbox.content.clear
	{
		width: 185px;
		margin-left: 12px;
	}

	#main div.rightbox.content.clear h2
	{
		margin: 0;
		font: normal 15px verdana;
	}



	#main div#right33 div.rightbox.content.clear p
	{
		margin: 4px 3px 10px 3px;
	}

	#main div.rightbox.content.clear p.seal
	{
		text-align: center;
		margin: 0;
		padding: 0;
	}

	#morepower p
	{
		padding-bottom: 10px;
	}

	#wapp_plans div.rightbox table#included
	{
		font-size: 10px;
		margin: 4px 0px 10px 1px;
	}

	table#included td
	{
		border-bottom: 1px solid #ddd;
	}

	table#included tr.firstrow td
	{
		border-top: 1px solid #ddd;
	}

	table#included td img
	{
		vertical-align: middle;
	}

	/* BUY BUTTONS */
	div.actionpoints
	{
		clear: right;
		display: block;
		background: #ffe640;
		text-align: center;
		padding: 8px;

		margin: 10px 0 5px 0;
		font-size: 12px;
	}

	#main div.actionpoints h3
	{
		font: 17px verdana, arial, sans-serif;
		margin: 0;
	}

	#main div.actionpoints a:visited, #main div.actionpoints a
	{
		font-size: 19px;
		font-weight: bold;
		color: #99001D;
	}

	#main div.actionpoints a:hover
	{
		color: #686;
	}

/* Landing pages */
	#wapp_plans div.forminner
	{
		padding: 5px 5px 45px 10px;
		background-color: #f5f5f5;
	}

/* All submit buttons  */
	.SFbutton, button
	{
		white-space: nowrap;
		-webkit-appearance: none;
		margin: 0;
		text-decoration: none;
		padding: 4px 10px;
		/* this "*display" hack triggers "hasLayour" in IE; can probably be removed now? */
		display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;


		background: #f5f5f5;
		border:1px solid #dedede;
		border-right:1px solid #bbb;
		border-bottom:1px solid #bfbfbf;

		cursor: pointer;
		border-radius: 3px;
		text-shadow: 1px 1px #ddd;
		color: #333;

		font:  normal 12px Verdana,Arial, Helvetica, sans-serif;
		overflow: visible;
		line-height: 19px!important;
	}

.SFbutton .icon:before, button .icon:before {
	margin-right: 5px;
}
	
	.SFbutton:hover, button:hover
	{
		background: #e1e1e1;
    }

	.SFbutton.compact
	{
		padding: 2px 10px 3px 10px!important; /* we make this important for IE7 to override the hacks below */
	}

	.buttonseries
	{
		padding:0;
		margin: 0.5em 0;
	}

/* IE7 hacks: */
	*+html .buttonseries input.SFbutton, *+html .buttonseries button,
	{
		margin-right: 0.7em;
	}

	*+html button, *+html input.SFbutton
	{
		padding:3px 10px!important;
	}

/* this is for the login button in the nav */
	*+html .public #nav form *
	{
		vertical-align: top;
	}

/* fix the height of the top nav bar */
	*+html #header #logo
	{
		height: 43px;
	}


	*+html a.SFbutton
	{
		padding:5px 10px!important;
		margin-right: 0.95em;
	}


/* Contextual help */
  a.helpme {
    border-bottom: 1px dotted #999;
    text-decoration: none; 
  }

	a.helpme:hover
	{
		color: #900;
	}

/* HELP APP / TUTORIALS */

	#leftcontent
	{
		float: left;
		width: 60%;
		margin: 0.6em 0 0 3em;
	}


	body.aspopup  #leftcontent, body.aspopup  #left66
	{
		width: auto;
		float: none;
		margin: 0;
	}

	div.tute h2
	{
		margin-top: 1.3em;
	}

	div.tute h2 a
	{
		text-decoration: none;
		color: #940;
	}

	div.tute h2 a:hover
	{
		text-decoration: underline;
	}

	div.tute, div.answersolution
	{
		line-height: 140%;
	}

	div.tute p.centerimage
	{
		text-align: center;
	}

	#main div.tute h3
	{
		font-size: 13px;
		color: #333;
		margin-left: 7px;
	}

	#main div.tute p.therefore
	{
		margin-left: 3em;
		font-style: italic;
		padding-left: 20px;
	}

	div.panel
	{
		border: 1px solid #aba;
		margin-left: 7px;
		background-color: #f8f8f8;
	}

	div.tute div.graphlist
	{
		float: left;
		width: 40%;
	}


	div.tute div.graphlist ul li
	{
		margin-bottom: 2px;
	}

	div.tute div.graphlist ul
	{
		margin-bottom: 0;
	}


	div.tute div.graphlist p
	{
		margin:0;
	}

	div.tute img.inlineimg, div.answersolution img.inlineimg
	{
		border: 1px solid #ccc;
		margin: 7px 0 7px 0;
	}

	div.tute a:hover img.inlineimg
	{
		border: 1px dotted #900;
	}

	div.tute ol li {
		margin-bottom: 1em;
	}

	div.tute blockquote {
		color: #444;
		line-height: 130%;
		padding: 1em 0 0.5em 0;
	}


	p img.rightimage
	{
		margin: 2px 0px 2px 14px;
		border: 1px solid #ccc;
		float: right;
	}

	/* Right Boxes */
	#right33 .rightbox.content
	{
		width: 200px;
		padding: 5px 8px 5px 5px;
		margin-left: 50px;
		margin-bottom: 20px;
	}

	#right33 .rightbox.content p
	{
		font-size: 11px;
	}

	#right33 .rightbox.content p.quote
	{
		text-align: left;
		margin-left: 13px;
	}

	#right33 .rightbox.content p.hasbutton
	{
		text-align: center;
	}

	/* Customer spotlight */
	div.custspotlightimg img:hover, div.custspotlightimg img
	{
		border: 0;

	}

	div.custspotlightimg
	{
		text-align: center;

		/*border: 1px solid #999;*/
		margin: 2px 8px 0 8px;
		padding: 3px 0 0 0;

		/*background: #fff;*/
	}

	/* See also */
	ul.tutoriallist
	{
		padding: 0 0 0 1em;
	}
	ul.tutoriallist li
	{
		margin-bottom: 1em;
		padding-left: 5px;
	}


	ul.tutoriallist li
	{
		list-style: none;
	}

	ul.tutoriallist li a
	{
		font-weight: bold;
		color: #036;

	}

	ul.tutoriallist li span.description
	{
		font-size: 12px;
		color: #444;
		display: block;
		margin-top: 3px;
		width: 70%;
	}

	/* Tutorial signup box */
	div.tute div#trywormly
	{
		border: 2px solid #f2f2b7;
		border-right: none;
		border-left: none;
		background-color: #FFFFBB;
		padding: 10px;
		margin: 15px 0px 25px 0px;
	}

	div.tute div#trywormly h3
	{
		margin: 0;
		font: bold 18px georgia, "times new roman", serif;
		color: #530;
	}

	div.tute div#trywormly p
	{
		color: #000;
	}
/* FREE TOOLS */
	.ttools form input[type=text]
	{
		width: 16em;
	}

	ul.rhs_list
	{
		list-style-type: none;
		padding: 0;
		margin: 0 0 0 9px;
	}

	ul.rhs_list li
	{
		padding: 1px 0px 1px 3px;
		/*background: #ffd;*/
		margin-bottom: 1px;
	}

	ul.rhs_list li a
	{
		font-size: 11px;
	}

	/* ADS on RHS */
	#rhstoolad
	{
		background-color: #FFFa99;
		border:2px dotted #FFDDDD;
	}

	#right33 #rhstoolad p
	{
		text-align: left;
	}

	#rhstoolad h2
	{
		color: #e00;
	}

	#rhstoolad img.rightimage
	{
		border: 0;
	}

	#rhstoolad .cont
	{
		border-radius: 10px;
		padding: 3px 0;
		background: #f2f2f2;
	}

/* ssl web server tester */
	#wapp_ssl_test_website .wider
	{
		width: 85%;
	}

	#ssltest
	{
		width: 100%;
	}

	#ssltest h2
	{
		border: 0;
		background: #eee;
		padding: 4px 4px 4px 6px;
		margin:0;
		border-top-left-radius: 10px;
	}

	#ssltest .st td, #ssltest .st th
	{
		padding: 1.5em 0 1.5em 6px;
		vertical-align: top;
		border-top: 1px solid #DDD;
	}

	#ssltest .st
	{
		width: 100%;
		margin:0;
		border-collapse: collapse;
		table-layout: fixed;
	}

	/* fixed width attribute, and comment columns: */
	#ssltest .attr
	{
		width: 17em;
	}

	#ssltest .cipher
	{
		width: 20em;
	}

	#ssltest .comment
	{
		width: 23em;
	}

	#ssltest tr.warn
	{
		background: #FFFFD1;
	}

	#ssltest tr.error th, #ssltest tr.error th a.lm
	{
		color: #900;
	}

	#mprogress
	{
		border: 1px solid #f2f2f2;
		padding: 0px 7px 7px 5px;

		background: #eee;
		font-family: "Helvetica Neue", "Lucida Grande", "Arial";
		margin-bottom: 1.5em;
	}

	#mprogress .big
	{
		color: #039;
		font-weight: bold;
		font-size: 30px ;
	}

	#mprogress .score
	{
		font-size: 25px;
		margin-top: 3px;
		width: 150px;
		float: right;
		text-align: right;
		font-weight: bold;
	}

	#mprogress .score .low
	{
		color: #900;
	}

	#mprogress .score .medium
	{
		color: #8d6400;
	}

	#mprogress .score .high
	{
		color: #009700;
	}

	/* eventually this might be moved into a the global section: */
	#btnTweet
	{
		opacity: 0.8;
		cursor: pointer;
	}

	#btnTweet:hover
	{
		opacity: 1;
	}

	/* IE7 fix */
	#btnRepeatTest
	{
		margin-right: 0;
	}

	#mprogress .numeric
	{
		padding-left: 45px;
		margin-top: 6px;
	}

	#mprogress .subtext
	{
		color: #555;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 3px;
	}

	.lgicon.pending:before
	{
		content: none;
	}

	.lgicon.pending, .numeric.pending
	{
		background: transparent url(icons/spinner3-black.gif) no-repeat center left;
	}

	.lgicon.pending
	{
		padding: 6px 0 12px 36px;
	}

	/* learn more links: */
	#ssltest th a.lm
	{
		color: #000;
		text-decoration: none;
		border-bottom: 1px dotted #555;
	}

	#ssltest th a.lm:hover
	{
		color: #009;
	}

	#ssltest .comment a.lm
	{
		margin-left: 0.4em;
	}

	/* popup help window contextual note */
	#wapp_help p.note
	{
		font-size: 11px;
		background: #eee;
		padding: 1px;
		text-align: center;
		font-style: italic;
	}

	#wapp_help.aspopup p.note
	{
		display: none;
	}

/* admin stuff */
	#wapp_admin_users .memtable td
	{
		padding: 0;
	}

	#wapp_admin_users .memtable tr.activated td
	{
		background: #fd9;
	}

	/* overriding line 252 */
	#wapp_admin_feedback form.authelo div.SFelemCheckbox label
	{
		float: left;
	}

	#wapp_admin_feedback form.authelo div.SFelemCheckbox div.horiz label
	{
		width: auto;
	}

	#admin_masq p
	{
		font-size: 0.8em;
	}

	#admin_masq
	{
		position: absolute;
		right: 1em;
		background: #fff;
		padding: 0 2px;
	}

	.admin_hoverreveal
	{
		visibility: hidden;
	}

	#header:hover .admin_hoverreveal
	{
		visibility: visible;
	}

/* publish uptime stats */
	#badgestyles p
	{
		margin-left: 15px;
	}

	#badgestyles p.steps
	{
		font-weight: bold;
		margin-left: 5px;
	}

	#badgestyles p.badgesamples img
	{
		vertical-align: middle;
	}

	#uptimeurl
	{
		width: 25em;
	}

	ul.badge_list
	{
		list-style:none;
		margin-left: 10px;
		padding-left: 0;

	}

	div.clearfloats p
	{
		clear: both;
	}

	ul.badge_list li
	{
		margin:0 0 5px 0;
		float: left;

		border: 1px dotted #aaa;
/*
		border-right: 0;
		border-left: 0;
*/

		padding: 2px 0 0 0;

		width: 110px;
		height: 90px;
		text-align: center;
		vertical-align: middle;
	}


/* features matrix */
	table#features
	{
		width: 100%;
		font: normal 12px arial;
		margin: 20px 0 20px 2px;
		border-collapse: collapse;
	}

	table#features th
	{
		font-size: 13px;
		padding: 6px 2px 6px 2px;
		white-space: nowrap;

	}

	a.spansimg
	{
		text-decoration: none;
	}

	a.spansimg img, a.spansimg img:hover
	{
		border: 0;
	}

	table#features td
	{
		margin: 0;
		padding: 2px;
	}

	table#features tr.fcat td, table#features tr.fcat th
	{
		border-top: 1px solid #ccc;

	}

	table#features tr.fsub1 th
	{
		padding-left: 2ex;
		font-weight: bold;
		vertical-align: middle;
	}

	/* the windows and linux logos: */
	#features th .icon:before
	{
		font-size: 1.3em;
		display: inline;
	}

/* CHI form */
	#wapp_updatechi  #address, #wapp_pay_wp  #address, #wapp_activate  #address
	{
		width: 20em;
	}

/* invoice payment pay_wp */
	#wapp_pay_wp table#services
	{
		width: 100%;
	}

	#wapp_pay_wp table#services td
	{
		padding: 5px;
	}

/* testimonials */
	div.testimonial
	{
		background-color: #f6f6f6;
		padding-bottom: 15px;
		margin-bottom: 30px;
	}

	div.testimonial p.quote
	{
		font-size: 16px;
		color: #036;
		font-family: georgia, times new roman, serif;
		padding: 2px 25px 2px 20px;
		line-height: 150%;

	}

	div.testimonial p.quote img.left
	{
		margin-right: 2px;
	}

	div.testimonial p.quote img.right
	{
		margin-left: 4px;
	}

	div.testimonial p.signature
	{
		padding: 2px 2px 2px 6px;
		font: normal 12px verdana, arial;
		color: #111;
		background-color: #C0D0E0;
		margin-left: 0;
	}

	div.rightbox p.quote
	{
		font-style: italic;
		color: #050;
	}

/* developers wormly api wapi */

    code
    {
        margin-left: 8px;
        padding: 1em 1em 1em 20px;
        display: block;
        background-color: #ddd;
    }

	code strong
	{
		color: #c00;
	}

	code.pre
	{
		white-space:pre;
		margin-bottom: 1em;
	}

	code em {
		font-style: normal;
		color: #900;
		font-weight: bold;
	}

	code em.alt {
		color: #070;
	}

	div.wapitoc
	{
		float: right;
		background:#F2F2FF none repeat scroll 0% 50%;
		border:1px solid #DDDDDD;
		padding: 5px 15px 5px 5px;
		margin: 0 0 0 1em;
	}

	div.wapitoc ul
	{
		list-style: none;
		margin: 0;
		padding: 0;
	}

	div.wapitoc ul li
	{
		margin-bottom: 0.4em;
		font-weight: bold;
	}

	div.wapitoc ul li a
	{
		font-size: 0.85em;
	}

	dl
	{
		font-size: 0.9em;
		margin-left: 0.2em;
	}

	dl dt
	{
		font-weight: bold;
	}

	dl dd
	{
		margin-bottom: 1em;
	}

	.memtable.apiparams
	{
		margin: 0 0 1.5em 0;
	}

	.apiparams tr.arraymember td.param
	{
		padding-left: 1.5em;
	}

	.apiparams td.arrayheader
	{
		text-align: center;
		background: #eee;
		font-style: italic;
	}

	.memtable.apiparams th
	{
		white-space: nowrap;
	}

	span#apitestlink a
	{
		font-size: 0.6em;
		background: #ff0;
		padding: 2px;
		margin-left: 4em;
	}

	/* API explorer form */
	form#api_explorer div.SFelemText label, form#api_explorer div.SFelemSelect label
	{
		font-weight: bold;
		/*text-align: left;*/
		/*width: 5.5em;*/
	}

	form#api_explorer div.SFhint p, form#api_explorer div.SFhint
	{
		margin-left: 0;
	}

/* hosthm health metrics monitoring */
#hmrules .helpme {
color: #036;
margin-left: 30px;
}

	.hoststatus.metrics .status:before
	{
		/*font-size: 220%; MEANS 12px * 2.2; 1 rem = 16px by default. We use rem since IE 9-11 don't apply font-size on :before/:after properly  */
		font-size: 1.625rem;
		padding-right:0.2em;
	}


	table.hosthealthmetrics
	{
		margin-bottom: 1em;
	}

	table.hosthealthmetrics tr.rules td.ruledesc
	{
		padding-left: 2em;
		color: #888;
	}

	table.hosthealthmetrics thead th.metric
	{
		width: 330px;
	}

	table.hosthealthmetrics thead th.value
	{
		width: 200px;
	}

	.memtable.hosthealthmetrics td
	{
		border: 0;
		padding: 5px 3px;
	}

/* signup form */
		#hpform form#signup
		{
			margin: 0 0 0 .3em;
			padding: 1em 1.3em;
		}

		#hpform form#signup label
		{
			text-align: left;
			float: none;
			display: block;
			margin: 0 0 2px 0;
		}

		#hpform form.authelo div.SFelemText,
		#hpform form.authelo div.SFelemTextarea,
		#hpform form.authelo div.SFelemPassword,
		#hpform form.authelo div.SFelemSelect
		{
			margin-bottom: 0;
		}

		#hpform input
		{
			width: 20em;
		}

		#hpform form.authelo div.SFelemSubmit
		{
			text-align: left;
		}

		#hpwrap p strong
		{
			background: #FFFFbb;
			font-weight: normal;
		}

/* Questions & Answers */
	div.answerCategoryBlock
	{
		margin-top: 1.5em;
	}

	div.answerCategoryBlock h3
	{
		font-family: arial;
		color:#444444;
		font-size:0.9em;
		margin:0 0 0.2em 0;
		padding:0 0 0.1em 0;

	}

	div.answerCategoryBlock ul
	{
		margin: 0 0 1.2em 0;
		padding: 0 0 0 0.8em;
	}

	div.answerCategoryBlock ul li
	{
		font: normal 0.9em arial;
		color: #444;
		margin: 0 0 0.25em 0;
	}

	div.answerCategoryBlock div.floatleft
	{
		float: left;
		margin-right: 1.8em;
	}

	/* search tool */
	#main div.answerCategoryBlock form.qasearch input
	{
		font: normal 0.9em arial;
	}

	form.qasearch span.hint
	{
		display: block;
		font-size: 0.8em;
		color: #999;

	}


	#main div.answersolution h2 a
	{
		color: #999;
	}

	#main div.answersolution h1
	{
		color: #222;
	}

	#main div.answersolution h1, #main div.answersolution h3
	{
		font-family: arial, sans-serif;
		color: #039;
	}

	#main div.answersolution ul.answers
	{
		padding-left: 1.2em;
		margin-left: 0;
	}

	#main div.answersolution ul.answers li
	{
		margin-bottom: 0.5em;
		font: normal 1em arial;
		color: #444;
	}

	div.answerbodytext
	{
		padding-bottom: 2.5em;
	}

	div.answersolution p.breaker
	{
		margin-top: 2em;
		border-top: 1px dotted #999;
		font-style: italic;
	}

	/* search results */
	div.answersolution span.hilight
	{
		background: #FEFEBB;
		font-weight: bold;
		color: #000;
		text-decoration: underline;
	}

	#main div.answersolution ul.answers span.crumbs
	{
		padding: 2px 0 4px 0;
		display: block;
	}


	ul.answers.small
	{
		font-size: 90%;
	}

	#main div.answersolution ul.answers span.crumbs a
	{
		font-size: 0.8em;
		color: #999;
	}

/* support desk */
	#wapp_support form.authelo label
	{
		float: none;
		display: block;
		text-align: left;
		margin-left: 2px;
	}

	#wapp_support form.authelo textarea, #wapp_support form.authelo input
	{
		margin-left: 3px;
	}

	#wapp_support  h2
	{
		border-bottom: 0;
	}

	#wapp_support div.leftside
	{
		float: left;
		width: 50%;
		padding-right: 10px;
	}

	#wapp_support #main div.leftside p
	{
		margin-left: 2px;
	}

	#wapp_support div.rightside
	{
		width: auto;
	}

/* footer nav */
	#footer_wrap {
		margin: 0 auto;
		text-align: left;
		width: 960px;
	}
	#footer_content_wrap {
		float: right;
		padding-top: 1em;
		width: 100%;
	}

	ul.footer_titles {
		float: left;
		margin: 0 10px 0 0;
		padding: 16px;
		width: 150px;
	}
	ul.footer_titles li {
		color: #999;
		font-size: 11px;
		height: 19px;
		list-style: none outside none;
	}

	ul.footer_titles li.title {
		/*color: #779;*/
		font-weight: bold;
	}

	ul.footer_titles li.legal {
		font-weight: normal;
	}

	ul.footer_titles a {
		text-decoration: none;
		color: #999;
	}
	ul.footer_titles a:hover {
		color: #333;
	}
	ul.footer_titles .title {
		font-size: 12px;
	}

	.modal:focus {
		outline: none;
	}
	.modal {
		display: none;

		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 11000;
		width: 560px;
		margin: -250px 0 0 -280px;
		background-color: #ffffff;
		border: 1px solid #999;

		border-radius: 6px;
		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
		background-clip: padding-box;
		padding: 0 0 0.7em 0;
	}

	.modal .close-cross {
		margin-top: 7px;
		text-decoration: none;
		font-size: 17px;
		color: #000000;
		float: right;
		font-weight: bold;
		line-height: 13.5px;
		opacity: 0.25;
		text-shadow: 0 1px 0 #FFFFFF;
	}

	.modal-header {
		border-bottom: 1px solid #eee;
		padding: 5px 15px;
	}

	.modal-body {
		padding: 15px;
	}
	.modal-body form {
		margin-bottom: 0;
	}

	.modal-footer {
		background-color: #f5f5f5;
		padding: 14px 15px 15px;
		border-top: 1px solid #ddd;
		border-radius: 0 0 6px 6px;
		box-shadow: inset 0 1px 0 #ffffff;
		zoom: 1;
		margin-bottom: 0;
	}

	.modal-footer .SFbutton {
		width: 20%;
		margin: 0 5px;
		text-align: center;
	}

	.modal-backdrop {
	  background-color: #000000;
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 10000;
	}

	.modal-backdrop.fade {
	  opacity: 0;
	}

	.modal-backdrop, .modal-backdrop.fade.in {
	  filter: alpha(opacity=80);
	  opacity: 0.8;
	}

	#resume-when li {
		list-style-type: none;
		margin: 5px 0;
	}

	#resume-after-hours, #resume-after-minutes {
		width: 40px;
	}

	#resume-after-inputs {
		display: none;
	}

	#resume-after-link {
		color: #036;
	}

#legend-modal dl {
	margin: 10px 0;
}

#legend-modal dt {
	color: white;
	background-color: #333333;
    display: inline-block;
    min-width: 30px;
    padding: 3px 6px;
    text-align: center;

	border-radius: 5px;
	float: left;
	clear: left;
}

#legend-modal dd {
	display: inline;
	margin-left: 5px;
	padding-top: 3px;
	float: left;
	width: 195px;
}

#legend-modal .column {
	float: left;
	margin-right: 20px;
}

#legend-modal .page-wide
{
	display: none;
}

/* for alert groups (internally known as 'rosters') */
.roster-list {
	display: inline-block;
}

.roster-list * {
	margin: 0;
}

#wapp_jsgraphs .popout-list {
	min-width: 350px;
}

.other-rosters, .top-hosts, .popout-list {
	border-radius: 5px;
	box-shadow:  0 0 13px rgba(0,0,0,0.31);
	display: none;
	padding: 0 0 1em 0;
	border: 1px solid #C1C1C1;
	margin: 0 0 0 -6px;
	position: absolute;
	z-index: 5000;
	list-style: none;
	background-color: #FFF;
	max-height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
}

.other-rosters li a, .top-hosts li a, .popout-list li a {
	padding: 5px 10px;
	display: block;
	border: 1px solid #eee;
	font-size: 11px;
	white-space: nowrap;
}

.popout-list li a .icon:before {
	margin: 0 5px 2px 2px;
}

.popout-list .body {
	padding: 5px 12px;
}

.popout-list .body p {
	margin: 1em 0 0em 0;
}

.popout-list .body label {
	display: block;
}

.popout-list .body label {
	font-size: 12px;
	color: #036;
	font-weight: bold;
	padding-bottom: 2px;
}

/* the tools drop down on jsgraphs to add graphs and add,edit graph pages:; */

.gptools .addG {
	padding-left: 1.1em;
	padding-right: 1em;
	max-width: 325px;
}

.gptools .metric-search {
	margin-left: 10px;
	width: 12em;
}

.gptools .shmhosts, .graphset .shmhosts {
	font-size: 11px;
	color: #999;
	width: 11em;
	overflow: hidden;
}

.gptools .definitions a, .gptools .metrics a {
	padding-left: 13px;
}

/*FIXME remove ?*/
/*.top-hosts .pchannel {
    min-height: 16px;
    margin: -2px 3px 0 0;
}
*/
.top-hosts li span {
    max-width: 250px;
    overflow: hidden;
    display: inline-block;
    margin-bottom: -3px;
}

.top-hosts .disabled {
    opacity: 0.5;
}

.other-rosters .default {
	font-style: italic;
}

.other-rosters a, .top-hosts a, .popout-list li a {
	color: #2b2b2b;
	text-decoration: none;
}

#top-hosts-container {
    z-index: 1000;
    max-width: 40%; /* fixed the horizontal scrollbar in FF and chrome */
}

#top-hosts-container ul {
	width: 20em;
}

#top-hosts-container input {
    width: 97%; /* otherwise when there are a lot of host, the scrollbar will chop part of the input */
}

.other-rosters a:hover, .popout-list a:hover, .other-rosters .selected, .top-hosts .selected, .top-hosts a:hover, li.selected {
	background: #ffffe9;
}

.other-rosters .description, .top-hosts .description, .popout-list .description {
    font-weight: bold;
    font-size: 12px;
    color: #111;
    text-shadow: 1px 1px 0 #fff;
    padding: 7px 10px 6px 10px;
    background: #F6F8F8;
}

.headgradient{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f6f8f8',endColorstr='#e9eeee');
background: -webkit-gradient(linear,left top,left bottom,from(#F6F8F8),to(#E9EEEE));
background: -moz-linear-gradient(top,#F6F8F8,#E9EEEE);
}

.js-needed {
	display: none;
}

#roster-heading {
	border-bottom: 1px dotted #CCCCCC;
}

.ajax-overlay {
	background-color: black;
	filter: alpha(opacity=50);
	opacity: 0.5;
	border-radius: 10px;
}

.ajax-overlay, .overlay-message {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.overlay-message {
	text-align: center;
}

.overlay-message span {
	background-color: white;
	border-radius: 10px;
    padding: 8px;
}

#atsetup {
	margin-top: 13px;
}

#roster-actions {
	display: inline;
	float: right;
}

#roster-actions div {
	display: inline;
	float: left;
	border-left: 2px solid #ccc;
    margin-left: 4px;
    padding: 0 0 2px 4px;
}

#roster-actions div:first-child {
	border-left: none;
}

#roster-name-inline {
	display: inline-block;
	margin: 0;
}

/* /audit Activity log */

#audit-table td {
    padding: 8px 4px;
}

#audit-table td.comment {
    width: 230px;
    padding: 0;
}

#audit-table td.date {
    white-space: nowrap;
}

#audit-table td.anchor {
    padding-left: 10px;
}

#audit-table td .help, td.anchor a {
    visibility: hidden;
}

#audit-table td:hover .help, #audit-table .help.edited, tr:hover .anchor a {
    visibility: visible;
}

#audit-list .jump-to {
    text-align: right;
}

#audit-list .jump-to input {
    width: 180px;
}

#audit-list .jump-to form {
    position: relative;
    display: inline-block;
}

#audit-list form {
    font-size: 13px;
}

#audit-list .right {
    float: right;
}

#audit-list .right  p {
	text-align: right;
}

#audit-list .addcomment input {
    float: left;
    width: 120px;
    margin-top: 3px;
}

#audit-list .no-results {
    text-align: center;
    padding: 10px;
}

#audit-list .range-hint {
	color: #777;
	font-style: italic;
}

.alertbubble.hostdnd {
    font-size: 0.7em;
    position: relative;

    top: -8px;
    right: 6px;
}

.alertbubble.persondnd {
    font-size: 0.8em;
    position: relative;

    top: -4px;
    right: 10px;
}

.event {
    position: absolute;
}

.event .text {
    display: none;
}

.event:hover {
    margin: -3px 0 0 -5px;
}

.event:hover {
    padding: 2px 5px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid black;
}

.event:hover .text {
    display: block;
    float: right;
}

.hide {
    display: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.description.host-jump {
    display: none;
    font-weight: normal;
    font-size: 0.8em;
}

.host-help {
    padding-bottom: 0;
}

.host-help .description.host-jump {
    display: block;
}

/*
 * jQuery UI Resizable 1.10.3
  */
.ui-resizable-handle {
	position: absolute;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}

.ui-resizable-se {
	cursor: se-resize;
	width: 15px;
	height: 20px;
	right: -4px;
	bottom: -4px;
 	opacity: 0;
 	z-index: 10;
}


.cont:hover .ui-resizable-se,  .cont:hover .control_anchor {
 	opacity: 1;
}

/* /shmetrics/last page */
#last-metrics .description {
	border-bottom: 1px dotted black;
}

#last-metrics .SFbutton {
	padding: 1px 10px;
}

.pagination {
	margin-top: 20px;
}

.nothing-found {
	text-align: center;
}

#informational_box.nothing-found p {
	color: #353535;
	margin: 1em;
	font-weight: bold;
}

#hmdescription-edit .SFhint {
	padding-left: 178px;
}

#hmdescription-edit .description input {
	width: 215px;
}

.inline-form {
	display: inline;
}

.metric-description {
	max-width: 300px;
}

.metric-description .common {
	opacity: 0.4;
	color: #66d;
}

#shm-since label {
	margin-right: 8px;
}

#metric-search button {
	padding: 2px 10px;
}

#metric-search input {
	font-size: 12px;
	padding: 2px;
}

#metric-search td {
	padding-bottom: 10px;
}

#metric-search-name {
	min-width: 65%;
}

#shm-filter {
	/* So that the width of the first column does not change when changing host filter */
	/* Unless host nicename is really long */
	min-width: 120px;
}

/* Metrics tab: /edithost/hostid/X#metrics */
#zzmetrics li {
	margin-bottom: 0.36em;
}

#zzmetrics code {
	font-size: 18px;
	white-space: normal;
	margin: 0;
}

a.hero-img {
	border: solid 7px #8e0e00;
	padding: 0.5em;
	border-radius: 25px;
	display: block;
}

a.hero-img:hover {
	border-color: #f60;
}


p.donethis {
	padding-top: 0.4em;
}

/* SHM rule table */
#hmrules {
	margin: 0;
}

#hmrules td.state span {
	padding: 0 0 0 0.2em;
}

#hmrules.v2 .obs .breached {
	font-weight: bold;
}

#zzmetrics .lgicon:before {
	/*font-size: 200%;*/
	font-size: 1.5rem;
}

/* Colors of alertgroup icons depending on value */
.custom .alertgroup:before { /* non-default */
	color: #008000;
}

.red .alertgroup:before { /* don't send */
	color: #d50005;
}

/*.rsheader {*/
	/*margin-top: 30px;*/
/*}*/

/* Error "SHM hosts offline" - should never happen */
.shmerror {
	padding: 60px 0 40px 27%;
	width: 50%;
}

/* JSGraphs metric list in popup */
.metric-list {
	padding: 0;
	margin: 0 -18px 0 -12px;
}

.metric-list .disabled, #assign-rule-set .disabled {
	opacity: 0.4;
}

/* Delete page in popup */
.group-ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.graphname {
	font-weight: bold;
	padding-bottom: 5px;
}

p.series {
	font-size: 0.9em;
	clear: both;
}

.icon.placeholder
{
	display: inline-block;
	width: 21px;
	height: 13px;
}

.invisible, .invisible-initial {
	visibility: hidden;
}

.shmrules td {
	padding: 7px 3px;
}

.shmrules th .icon {
	height: 15px;
	width: 22px;
}

.shmrules td.current {
	background: #ffd;
	padding-left: 0.6em;
	opacity: 0.8;
}
	
.add-rule {
	position: relative;
	left: -13px;
}

.relative {
	position: relative;
	left: 0;
	top: 0;
}

/* #metrics tab - show this when data is loaded */
.spinner.normal-sized:before {
	font-size: 200%;
}

.spinner.input-spinner:before {
	font-size: 140%;
	opacity: 1;
}

.spinner.tiny:before {
	font-size: 100%;
	opacity: 1;
}

.loading-container {
	display: inline-block;
	position: relative;
	margin-top: -6px;
	top: 6px;
	overflow: hidden;
}

#user-metric-formula .spinner {
	position: absolute;
	margin-left: 5px;
	margin-top: -2px;
}

.hidden {
	visibility: hidden;
}

span.code {
	background-color: #ddd;
	padding: 1px 3px;
	font-family: monospace;
}

.comparison-column {
	width: 40px;
	font-weight: bolder;
}

.hoverable {
	border-bottom: 1px dotted #999;
}

.rule-value {
	display: block;
	white-space: nowrap;
}

/* Used to shown values fetched for a new/edited rule and when calculating value for a new formula */
.computed-values {
	float: right;
	margin: -0.5em 0.1em 0 0;
	padding: 0.5em;
	height: 11em;
	width: 50%;
	background: #f2f2f2;
	border: 1px solid #f2f2f2;
	overflow: hidden;
}

.computed-values .error, .computed-values .values {
	display: none;
}

.computed-values .values {
	margin-top: -3px;
}

.computed-values table {
	width: 100%;
}

.computed-values td, .computed-values th {
	font-size: 12px;
}

.computed-values .error {
	font-weight: bold;
	color: #ae0000;
}

.computed-values .nothing {
	/*color: #666;*/
	font: bold 12px verdana, arial;
	padding: 0 0 0.3em 0.1em;
}

.computed-values .hostname, .computed-values .name {
	padding-right: 20px;
	color: #335;
}

.computed-values .help {
	font-weight: bold;
	padding-right: 20px;
}

.computed-values .breaches, .host-breached {
	color: #ae0000; 
}

.computed-values .not-breaches {
	color: #007704;
}

/*#last-metrics .actions a {*/
	/*visibility: hidden;*/
/*}*/

/*#last-metrics tr:hover .actions a {*/
	/*visibility: visible;*/
/*}*/
	
.hostname-list span:after {
	content: ", ";
	margin-left: -3px;
}

.hostname-list span:last-child:after {
	content: "";
}

/* Formulas - not used ATM */
.formulas li {
	margin-top: 10px;
}

.formulas span, .shm-formula, .rule-description, span.pre {
	background: #ffd;
	padding: 0 4px;
	border-radius: 2px;
	white-space: normal;
}

span.pre.code {
	font: normal 14px courier, sans-serif;
}

#assign-rulesets {
	margin-bottom: 13px;
}

/*.shm-env-var {*/
	/*font-weight: bold;*/
/*}*/

.ruledescriptions li {
	margin: 15px 0;
}

/*.hintp {*/
	/*font-size: 12px;*/
/*}*/

#hmrules .helpme {
	color: #036;
	margin-left: 30px;
}

/* Popup shown when hovering series color - allows setting custom name and color */
.label-colors {
	width: 100%;
	height: 20px;
	padding: 6px 0;
}

.label-colors .box {
	border-radius: 0 6px 0 6px;
	float: left;
	height: 20px;
	margin: 1px;
	width: 23px;
	cursor: pointer;
}

.label-colors .box:hover {
	border: 1px solid gray;
	margin: 0;
}

.label-colors .box .tick {
	color: white;
	display: none;
	font-size: 16px;
	padding: 1px 4px;
}

.label-colors .box.selected .tick {
	display: block;
}

.select-custom-color {
	color: #2b2b2b !important;
	text-decoration: none !important;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}

#wapp_jsgraphs #color-selector {
	padding: 10px 10px 6px;
	min-width: 200px;
	background-color: #f6f8f8;
}

#label-name .SFelemText {
	margin-bottom: 5px;
	padding-bottom: 0;
}

#label-name label {
	width: 28px;
	margin-top: 4px;
}

#label-name input {
	width: 152px;
}

/* Metric for rule is too old */
.seen-long-ago {
	color: #900;
	font-style: italic
}

/* Pagination on shmetrics/last page */
.page-link {
	float: left;
	height: 28px;
	width: 28px;
	text-align: center;
	vertical-align: middle;
	line-height: 28px;
	margin: 0 5px;
}

.page-link.skipper {
	width: 10px;
}

.page-link a {
	color: #3252b2;
	text-decoration: none;
}

.page-link {
	background-color: white;
}

.page-link.current a {
	background: none repeat scroll 0 0 #e1e1e1;
}

.pagination .results {
	line-height: 28px;
	font-size: 12px;
}

.pagination .next {
	margin-left: 6px; /* ugly hack since I don't know why page-link margin does not work */
}

.graphtabs {
	border-bottom: 2px solid #555;
	margin-top: 12px;
	margin-bottom: 8px;
	padding-bottom: 5px;
	font-size: 13px;
}

/* Metrics currently plotted on a shm graph */
.current-metrics .delete {
	float: right;
}

.current-metrics .delete:before {
	font-size: 140%;
	position: relative;
	left: 2px;
}

.popout-list .single-line label {
	display: inline;
	margin-right: 10px;
}

.single-line input {
	vertical-align: bottom;
}

/* Used in graph popup to separate single-metric graphs */
/*.graph-divider {*/
	/*display: block;*/
	/*font-size: 11px;*/
	/*padding: 15px 10px 2px;*/
	/*font-weight: bold;*/
	/*border-bottom: 1px dotted #2b2b2b;*/
	/*color: #2b2b2b;*/
/*}*/

.icon.disabled:before {
	color: #444;
}

/* .slideText plugin */
span.sliding-line {
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	text-decoration: inherit;
}

.edit-ruleset-name {
	line-height: 24px;
}

.rs-id {
	color: gray;
	opacity: 0.5;
	font-weight: normal;
	margin-left: 10px;
}

/* SHMETRICS */

/* addrule: */

/* large line by line form items */ 
.Lformitem {
	padding: 0.3em 0 0.4em 0;
	margin: 1em 0 1em 0;
} 

#metricname {
	width: 20em;
	/*margin-left:1em;*/
}

/* Rulesets list : when accessed from shmetrics/last and a metric matches rule */
.rule-matches {
	background-color: #ffd;
}