/* updated 09/12/2009
 * @author: sze y goh

[TOC]
[Main]
	0-	Reset CSS
    1-	Utilities
	2-	Form Elements
	3-	Table
	4-	Fieldset
	5-	Flot
	6-	Tooltip
	7-	General Layout
        7.0- #notification-bar
		7.1- #masthead
		7.2- #admin
		7.3- #tabs
	8-	Content Layout
		8.1- #header
		8.2- #views 1.0
		8.3- #views 2.0
		X-	Subfilter (to be deleted when dashboards migrate to new facet navigator)
	9-	Footer Layout

[Misc Pages]
	10-	Targets management
	11-	ROPO
	12-	Login
	13- Clear Cache Instruction

[Active Development]
	14-	Faceted Navigator
	15-	Advanced Search
	16-	Datepicker
	17-	Tag
	18-	IE Hacks (to be deleted)
    19- Scorecards
    20- DataTables
    21- TableTools
    22- Horizontal bar sparkline
    23- Inline label on facet
    24- Highcharts
    25- Status dashboard
    26- Executive dashboard

/* =0	Reset CSS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a, a:hover {
	color: #000;
	text-decoration: none;
}

abbr, acronym, fieldset, img, a img { border: none; }

/* =1	Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body, html {
	font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	height: 100%;
}

html{
    overflow-y: scroll;
}

/* IE set width so that table will not extend beyond browser's width */
*html body {
	width: 100%;
}

#container {
	height: auto !important;
	height: 99.9%;
	min-height: 100%;
    	overflow-x: hidden;
	position: relative;
	width: 100%;
}

.right-float, .float-right  { float: right; }
.left-float, .float-left	{ float: left; }
.center		{ text-align: center; }
.right		{ text-align: right; }
.left		{ text-align: left; }

.show       { display:block; }
.hide       { display:none; }

.clear      { clear: both; }
.margin-top10 { margin-top: 10px; }
.margin-top20 { margin-top: 20px; }
.margin-bottom10 { margin-bottom: 10px; }
.margin-bottom20 { margin-bottom: 20px; }

/*  loading box  */
#loading_box {
	background-color: #000;
	border: none;
	color: #fff;
	margin: 0;
	padding: 20px;
	text-align: center;
    filter: alpha(opacity=70); /* internet explorer */
	-khtml-opacity: 0.7;      /* khtml, old safari */
	-moz-opacity: 0.7;       /* mozilla, netscape */
	opacity: 0.7;           /* fx, safari, opera */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
	#loading_box img  {
		vertical-align: middle;
	}
	#loading_box span {
		font-style: normal;
		padding: 0 5px;
	}
    #loading_box .speedinfo-good, #loading_box .speedinfo-average, #loading_box .speedinfo-bad{
        font-weight: bold;
    }
    #loading_box .speedinfo-good{
        color: #70be44;
    }
    #loading_box .speedinfo-average{
        color: #ffde00;
    }
    #loading_box .speedinfo-bad{
        color: #ed1b24;
    }

#install-overlay{
    background: #fff;
    border:1px solid #61a7f2;
    color: #444;
    font-weight:normal;
    padding: 5px 10px 10px 10px;
    position: absolute;
    right: 5px;
    text-align:center;
    top: 5px;
    width: 270px;
    z-index:999;
}
    #install-overlay .close span{
        color:#5590d2;
        cursor: pointer;
        display: inline-block;
        float: right;
        font-size:10px;
        padding:0 0 5px 0;
        *padding:0 0 0px 0;
        _padding:0 0 0px 0;
        text-align: right;
        width:auto;
    }
    #install-overlay p{
        padding:0 10px;
    }

.install-button{
    background: #20509e url(../images/install_button_left.gif) -10px;
    border-left: 1px solid #21519f;
    border-right: 1px solid #21519f;
    margin-top: 1em;
    text-align: center;
}

.install-button a, .install-button a:hover {
    color: #ffffff;
    cursor: pointer;
    display: block;
    height: 29px;
    line-height: 29px;
    text-decoration: none;
    font-weight: bold;
}

/*  type styles  */
.smallcaps, .byline, #tabs {
	font-size: 7pt;
	letter-spacing: 1px;
	text-transform: uppercase;
	vertical-align: middle;
}

#stack_title {
	padding-left: 5px;
}

.error{
    color: #c00;
}

/* =2   Form Elements
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* FORM ELEMENTS - BUTTONS, FORMS, ET. AL. */
/* GMAIL BUTTONS */
/* Start custom button CSS here
---------------------------------------- */
.btn	{
  vertical-align: top; display:inline-block;
  background:none; margin:0; padding:3px 0; border-width:0; overflow:visible;
  font:90%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333; cursor:pointer; }
* html button.btn		{	padding-bottom:1px; }
/* Immediately below is a temporary hack to serve the following margin values only to Gecko browsers Gecko browsers add an extra 3px of left/right
   padding to button elements which can't be overriden. Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn	{	margin:0 -3px; }
.btn span	{
  background:#fff;
  margin:0;
  padding:3px 0;
  border-left:1px solid #bbb;
  border-right:1px solid #aaa;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #bbb;
  border-bottom:1px solid #aaa;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span		{	border-right-width:0; }
button.pill-l span span	{	border-right:1px solid #bbb; }
button.pill-c span		{	border-right-style:none; border-left-color:#fff; }
button.pill-c span span {	border-right:1px solid #bbb; }
button.pill-r span		{	border-left-color:#fff; }
#advanced span span		{	background: url(../images/icons/icon-search.gif) no-repeat 10% 50%; font-size: 7px; padding: 5px .5em 4px 9px;}

/* only needed if implementing separate hover/focus/active state for buttons */
.btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
  cursor:pointer; /* important for any clickable/pressable element */
  border-color:#9cf !important;
  background: url(../images/icons/icon-sprite.png) repeat-x 0 -1247px;
  color:#FFF;
  }
.btn:active span {
  background: url(../images/icons/icon-sprite.png) repeat-x 0 -1247px;
  outline:none;
  color:#FFF;
  }
.btn:focus, .btn:active {
  outline:none; /* doesn't seem to be respected for <button>, only <a> */
  }
/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#0c81a8;
  }

input, textarea, select	{
	font-size: 11px;
	margin: 0;
	padding: 1px;
}

input[type="text"],
input[type="submit"],
input[type="button"],
select, textarea {
	background: #fff url(../images/icons/icon-sprite.png) repeat-x 0 -1300px;
    background-color: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
}

input[type="button"],
input[type="submit"]	{
	background: #fff url(../images/icons/icon-sprite.png) repeat-x 0 -420px;
	color: #777;
	letter-spacing: 1px;
	padding: 4px 15px;
	-moz-border-radius: 6px; -moz-border-radius: 6px;
	-webkit-border-radius: 6px;-webkit-border-radius: 6px;
}

input.button-active,
input[type="submit"] { font-weight: bold; color: #0c81a8; }
.inactive {
    filter: alpha(opacity=60); /* internet explorer */
	-khtml-opacity: 0.6;      /* khtml, old safari */
	-moz-opacity: 0.6;       /* mozilla, netscape */
	opacity: 0.6;           /* fx, safari, opera */
}

input.big, select.big, option.big {
	font-size: 20px;
 	padding: 3px;
}

input.button-small {
	font-size: xx-small;
	padding: 3px 8px;
    *padding: 2px 8px;
    _padding: 2px 8px;
	-moz-border-radius: 4px; -moz-border-radius: 4px;
	-webkit-border-radius: 5px;-webkit-border-radius: 4px;
}

input[disabled]{
    color: #999;
    cursor: default;
}

input.button-add {
	font-size: 14px;
	padding: 0 1px;
	font-weight:bold;
	-moz-border-radius: 4px; -moz-border-radius: 4px;
	-webkit-border-radius: 4px;-webkit-border-radius: 4px;
}

input[type="radio"] {
	vertical-align:middle;
}

.radio {
	font-weight: normal;
	margin: 0 0 0 5px;
}

/* =3   Table
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
table {
	border-spacing: 0;
	color: #444;
	font-size: 11px;
	text-align: left;
	width: 100%;
}

table thead th {
	border-bottom: 2px solid #888;
	font-size: 11px;
	font-weight: bold;
	padding: 6px 5px;
    text-shadow: 0px 1px 0px #fff;
}

table th {
	font-weight: normal;
}

table .thead-small th {
	font-size: 11px;
	padding: 1px 5px;
	text-transform: none;
}

table td {
	border-bottom: 1px solid #E9E9E9;
	padding: 10px 5px;
	vertical-align: top;
}

table .title td {
	font-weight: bold;
	font-size: 14px;
	background-color: #F5F5F5;
}

table input {
	font-size: 10px;
	padding: 1px;
}

table tr.odd td {
	background-color: #f6f6f6;
}

/* =4	Fieldset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
fieldset ul			{	list-style-type: none; }
fieldset ul li		{	padding: 0 0 10px 0; }
fieldset label		{	padding: 0 5px 0 0; font-weight: bold;}
fieldset .red		{	color: #ff0000; vertical-align: middle;} /*alert*/

/*  filter-query> grey div below facet navigator  */
fieldset.filter-query {
	background-color: #EEE;
	border-top: 1px solid #fff;
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 15px 10px;
	-moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px;
	-webkit-border-bottom-right-radius: 12px;-webkit-border-bottom-left-radius: 12px;
	}

	fieldset.filter-query label {
		float: left;
		padding: 4px 5px 3px 0;
	}

	fieldset.filter-query span {
		float: left;
		padding: 0 3px;
	}

	fieldset.filter-query legend {
		font-size: 11px;
		font-weight: normal;
		letter-spacing: 1px;
		margin: 0;
		padding: 2px 0;
		text-transform: uppercase;
	}

	fieldset.filter-query hr {
		border: none;
		color: #000;
		height: 1px;
		margin: 0;
		padding: 2px 0;
	}

	fieldset.filter-query fieldset legend {
		font-size: 10px;
		font-weight: normal;
		margin: 0;
		padding: 2px 0 6px 0;
		text-transform: uppercase;
	}

/* =5   Flot
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*
#wrapper-hori-graph {
    *width: 100%;
    margin: 0;
    padding: 0 80px;
    width: auto;
    _width: 100%;
}
#wrapper-hori-graph #content_graph_container {
    margin: 0 0 20px 0;
}
*/

#content_graph_container{
    display: block;
    float: left;
    width: 85%;
}

#content_area_graph {
    height: 400px;
    margin: 0 0 0px 0;
    width: 100%;
}

/*  flot> placeholder
 *  graph width 100% - with new faceted navigator
 */
#placeholder {
	float: left;
	margin: 5px 0 0 0;
	width: 100%;
}

/*  graph width 78% - with old subfilter facet navigator
 *  to be deleted once subfilter is deleted

#old-placeholder {
	float: left;
	margin: 5px 0 0 0;
	width: 78%;
}
 */

/*  flot> legend  */

#graph-legend{
    background: -moz-linear-gradient(top, #fff, #eee 10%, #fff);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.10, #eee), to(#fff));
    background-color: #fff;
    border: 2px solid #555;
    display: block;
    float: right;
    height: 375px;
    margin: 20px 0 0 0;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0px 0 0 0px;
    width: 14%;
}
/* chrome/safari hack */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #graph-legend{
        margin:18px 0 0 0;
    }
}
    #graph-legend table tr{
        cursor: pointer;
    }
        #graph-legend table tr.inactive{
            filter: alpha(opacity=40); /* internet explorer */
	        -khtml-opacity: 0.4;      /* khtml, old safari */
	        -moz-opacity: 0.4;       /* mozilla, netscape */
	        opacity: 0.7;           /* fx, safari, opera */
            color: #bbbbbb;
        }
        /*#graph-legend table tr.graph-0{
            background: #e8f2ff;
        }
        #graph-legend table tr.graph-1{
            background: #fbe7ea;
        }*/
    #graph-legend table tr:hover{
        background: -moz-linear-gradient(top, #ccc, #eee 10%, #ccc);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.10, #eee), to(#ccc));
        background-color: #eee;
        color: #000;
    }

    #graph-legend table td{
        border: none;
        padding: 5px 5px;
        vertical-align: middle;
    }
    #graph-legend .legendColorBox{
        height: 6px;
        width: 18px;
    }

#graph-legend table td{
	white-space:normal;
}

.legend, .legend table{
    font-size: 9px;
}
/*
.legend table {
    width: auto;
}
    .legend table td{
    }

.legendColorBox .color-box {
	height: 8px;
	width: 8px;
}

.legend {
    color: #444;
    float: left;
    font-weight: normal;
    margin: 1px 20px;
    padding: 5px 10px;
    width: 90%;
}
*/
/*  flot> title header  */
/*#graph-header {
	background: url(../images/icons/icon-sprite.png) 0 -140px repeat-x;
  	display: block;
  	font-family: 'Droid Serif', Arial, sans-serif;
	line-height: 1em;
	margin: 5px 0 0 0;
	width: 100%;
	padding-left:10px;
	}
*/
	/*	clearfix after #graph-header */
	*html #graph-header:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}
	*html #graph-header {
		display: inline-block;
		height: 1%;
	}
	    #graph-header .sub-header {
            color:#1c80fe;
            cursor: default;
            display: inline;
            font-family: 'Droid Sans', Arial, sans-serif;
            font-size: 11px;
            font-weight: bold;
		}

        #graph-header .sub-header .title {
            padding: 0 5px 0 5px;
            text-transform: uppercase;
        }

        #graph-header .sub-header .between{
            color: #999;
            font-weight: normal;
            padding: 0 5px 0 0;
        }


	/*  header> title  */
	/*#graph_title {
		color: #000;
		float: left;
		font-size: 19px;
		font-weight: normal;
		letter-spacing: -0.5px;
        line-height: 38px;
		padding: 0 5px 0 10px;
        word-spacing: 1px;
	}
    #graph_title .between{
        margin:0 5px;
    }
    #graph_title.graph-0, .graph-0, table.dt-display thead .graph-0, table.dt-display thead th.graph-1{
        color:#1c80fe;
    }
    #graph_title .graph-1, .graph-1, table.dt-display thead .graph-1, table.dt-display thead th.graph-1{
        color:#DC1634;
    }*/

/*  flot> view toggles */
#view-type {
    float: right;
}
    #view-type ul { }

				#view-type ul li {
		border: 1px solid #FFFFFF;
    cursor: pointer;
    float: right;
    height: 19px;
    line-height: 19px;
    list-style: none outside none;
    margin: 11px 0 0 2px;
    padding: 0 5px;
    width: 16px;
}

#view-type ul .title {
		color: #000000;
    cursor: default;
    float: right;
    font-size: 9px;
    height: 10px;
    letter-spacing: 1px;
    line-height: 10px;
    list-style: none outside none;
    margin: 12px 20px 0 5px;
    padding: 3px 0 0 5px;
    text-transform: uppercase;
}

#view-type ul .selected {
		background: #CCEAF6;
		border: 1px solid #95D0F2;
		padding-bottom: 2px;
}

#view-type ul span {
		display: inline-block;
		height: 16px;
		width: 16px;
}
        #view-type ul .table-only{
            background: url(../images/icons/icon-sprite.png) -180px -769px no-repeat;
        }
        #view-type ul .graph-with-table{
            background: url(../images/icons/icon-sprite.png) -180px -814px no-repeat;
        }
        #view-type ul .graph-only{
            background: url(../images/icons/icon-sprite.png) -180px -859px no-repeat;
        }
        #view-type ul .legend-hide{
            background: url(../images/icons/icon-sprite.png) -192px -944px no-repeat;
            padding-right:7px;
            *padding-right:17px;
            _padding-right:17px;
        }
        #view-type ul .legend-show{
            background: url(../images/icons/icon-sprite.png) -192px -899px no-repeat;
            padding-right:7px;
            *padding-right:17px;
            _padding-right:17px;
        }
        .toggle-graph-scale{
            float: right;
            font-weight: normal;
            margin: 0 15px 0 0;
        }
        .speedtests{
            background: #1414A3;
            display: block;
            float:right;
            /*position: absolute;
            right: 3px;
            top: 10px;*/
            height: 40px;
            margin:0px 0px 0 0;
        }
            .speedtests .good, .speedtests .average, .speedtests .bad{
                cursor: pointer;
                display: block;
                height: 30px;
                width: 25px;
            }
            .speedtests .good{
                background: url(../images/icons/icon-sprite.png) -294px 5px no-repeat;
            }
            .speedtests .average{
                background: url(../images/icons/icon-sprite.png) -324px 5px no-repeat;
            }
            .speedtests .bad{
                background: url(../images/icons/icon-sprite.png) -354px 5px no-repeat;
            }

/*  flot> axes titles */
.x-label, .y-label {
	font-weight: bold;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.y-label {
	margin: 0;
}

    .y-label .graph-0, .y-label .graph-1, .y-label .measure, .y-label .sub-measure{
        padding: 0 5px 0 0;
    }

.x-label {
	margin: 7px 0;
	text-align: center;
}

/*  flot> graph bar labels  */
.tickLabel {
    font: 8px Helvetica, Arial, sans-serif;
	padding: 0;
	width: auto;
}

/*  flot> display dropdown for individual tables  */
#yui_xaxis_list	{
	padding-bottom:5px;
	text-align: center;
}
    #yui_xaxis_list select{
        display: inline;
        width: 120px;
    }

/* flot> legend select all/none by etieqa */
/*
#graph-legend .select-acti{
	background-color: #494949;
    color: #7EE6F5;
    font-size: 6pt;
    letter-spacing: 1px;
    list-style-type: none;
    padding: 3px 5px;
    text-transform: uppercase;
    float: left;
    width: auto;
	cursor:pointer;
}

#graph-legend .selected {
    background-color: #494949;
    color: #fff;
    font-size: 6pt;
    letter-spacing: 1px;
    list-style-type: none;
    padding: 3px 5px;
    text-transform: uppercase;
    float: left;
    width: auto;
	cursor:pointer;
}
*/
#graph-legend li{
    cursor: pointer;
    float: right;
    height: 19px;
    line-height: 19px;
    list-style: none outside none;
    margin: 0;
    padding: 0 5px 0 0;
    width: 10px;
}

#graph-legend .legend-show {
	background: url(../images/icons/icon-sprite.png) no-repeat scroll -1px -998px transparent;
    display: inline-block;
    height: 16px;
    padding-right: 7px;
    width: 3px;
}

#graph-legend .legend-hide {
	background: url(../images/icons/icon-sprite.png) no-repeat scroll -10px -998px transparent;
    display: inline-block;
    height: 16px;
    padding-right: 7px;
    width: 3px;
}




/* =6   Tooltip
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*
 *  flot tooltip: 			#info
 *  ropo table tooltip:		.info
 */

#info,
.info {
	background-color: #000;
	color: #fff;
	font-size: 11px;
	padding: 10px;
	width: auto;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
    filter: alpha(opacity=80); /* internet explorer */
	-khtml-opacity: 0.8;      /* khtml, old safari */
	-moz-opacity: 0.8;       /* mozilla, netscape */
	opacity: 0.8;           /* fx, safari, opera */
	*width: 17%!important;
	_width: 17%!important;


}
.info		{ position: absolute; }
*html #info	{ width: 1%; } /* IE fix the oversized toolTip issue */

	#info hr,
	.info hr {
		border: none;
		color: #000;
		height: 1px;
		margin: 0;
		padding: 2px 0;
	}
	#info span,
	.info span	{ padding-bottom: 6px;}
	#info .big,
	.info .big	{ font-size: 16px; font-weight: bold;}
	#info .mid,
	.info .mid	{ font-size: 12px; font-weight: bold;}

/* =7   General layout
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  =7.0	#notification bar  */
#notification-bar{
    background: -moz-linear-gradient(top, #fff2b6, #fae793);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff2b6), to(#fae793));
    background-color: #ffc;
    border-bottom: 1px solid #dedede;
    color: #574804;
    cursor: default;
    display: none;
    -webkit-box-shadow: inset 0px -8px 16px #f8dc62;
    -moz-box-shadow: inset 0px -8px 16px #f8dc62;
    box-shadow: inset 0px -8px 16px #f8dc62;
    font-size: 11px;
    line-height:24px;
    margin: 0px 0 0px 0;
    padding: 0 0 0 0px;
    text-align: right;
    text-shadow: 0 1px 0 #fdf5d4;
    z-index: 9999;
}
    #notification-bar a, #notification-bar a:hover{
        text-decoration: underline;
    }

    #notification-bar .icon-sync{
        background: url(../images/icons/icon-sprite.png) -296px -30px no-repeat;
        float: left;
        height: 16px;
        margin:3px 8px 0 0;
        width: 16px;
    }
    #notification-bar .close{
        /*background: url(../images/icons/icon-sprite.png) -329px -25px no-repeat;*/
        /*background: -moz-linear-gradient(top, #fae793, #d9b30a);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fae793), to(#d9b30a));
        background-color: #fae793;*/
        color: #fff;
        cursor: pointer;
        float: right;
        font-size: 9px;
        height: 24px;
        margin:0px 0px 0 10px;
        padding:0px 9px 0 10px;
        *padding:0px 10px 0 10px;
        _padding:0px 10px 0 10px;
    }
    #notification-bar .status{
        background: -moz-linear-gradient(top, #f8dc62, #f8dc62 50%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ac251), color-stop(0.50, #70BE44));
        background-color: #f8dc62;
        border-right: 1px solid #fff2b6;
        -webkit-box-shadow: inset 0px 0px 22px #e9c00b;
        -moz-box-shadow: inset 0px 0px 22px #e9c00b;
        box-shadow: inset 0px 0px 22px #e9c00b;
        float: right;
        height: 24px;
        margin: 0px 0px 0 10px;
        position: relative;
        width: 108px;
        *width: 109px;
        _width: 109px;
    }
    #notification-bar .fill-ok{
        background: -moz-linear-gradient(top, #aad890, #70BE44 50%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ac251), color-stop(0.50, #70BE44));
        background-color: #70BE44;
        text-shadow: 0 0px 1px #264117;
        /*float: left;
        height: 24px;*/
    }
    #notification-bar .fill-below{
        background: -moz-linear-gradient(top, #f4797f, #ED1B24);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef3a42), color-stop(0.50, #ED1B24));
        background-color: #ED1B24;
        /*float: left;
        height: 24px;*/
        text-shadow: 0 0px 1px #67080c;
    }

/*  =7.1	#masthead  */
#mast {
	/*background: url(../images/icons/icon-sprite.png) repeat-x 0 -60px;*/
	background: #00008b; /* Old browsers */
	background: -moz-linear-gradient(19% 120% 90deg, #00008b, #1D1DC8); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00008b), color-stop(100%,#1d1dc8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(bottom, #00008b 0%,#1d1dc8 100%); /* Chrome10+,Safari5.1+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d1dc8', endColorstr='#00008b',GradientType=0 ); /* IE6-9 */

	font-size: 11px;
	height: 41px;
	margin: 0 0 0px 0;
	padding: 0;
	-webkit-box-shadow: 0px 0px 8px #666;
	-moz-box-shadow: 0px 0px 8px #666;
	box-shadow: 0px 0px 8px #666;
	border-bottom: 1px solid #E1E1E1;
}

#mast h1 {
	background: url(../images/icons/icon-sprite.png) no-repeat 0 -950px;
	float: left;
	font-size: 12px;
	height: 0px !important; /* for most browsers */
	height /**/:30px; /* for IE5.5's bad box model */
	margin: 5px 0 0 30px;
	overflow: hidden;
	padding: 30px 0 0 0;
    text-indent: -9999px;
	width: 140px;
}
/* IE
*html #mast h1 { position: absolute; }
*/

/*  =7.2	#admin navigation> user | manage cal | changelog | logout  */
#admin {
    font-family: 'Droid Sans', Arial, sans-serif;
    text-shadow: 0px 1px 0px #000;
	position: absolute;
	right: 25px;
}
	#admin a, #admin a:visited { }
	#admin a:hover {
		/*border-bottom: 1px solid #000;*/
        color: #fff;
		text-decoration: underline;
	}

	#admin ul {
	    /*border-left:1px solid #dedede; */
        float:right;
        list-style: none;
    }
    #admin ul li select{
        margin: 11px 8px 10px 0px;
        *margin: 10px 8px 10px 0px;
        _margin: 10px 8px 10px 0px;
    }

	#admin ul li {
        float:left;
        font-weight: normal;
        border-right: 1px solid #000099;
        position: relative;
        vertical-align: top;
    }

    #admin ul li a {
		border-left: 1px solid #2424cc;
        color:#cccce8;
        display:block;
        font-weight: normal;
        float:left;
        height: 40px;
        line-height: 40px;
        margin: 0;
        padding:0px 8px;
    }

	#admin ul li.first, #admin ul li.first a {
	    border-left: none;
    }
	#admin ul li.last, #admin ul li.last a	{ border-right: none; }
	#admin select {
		margin: 0 0 -4px 0;
		padding: 0;
		width: 100px;
	}

/*  #admin icons */

/*
#admin-user {
	background: url(../images/icons/icon-sprite.png) no-repeat -250px 0;
	padding-left: 16px;
}
*/

#admin-cal {
	background: url(../images/icons/icon-sprite.png) no-repeat -250px -15px;
	padding-left: 16px;
}

/*  =7.3	#tabs> sales, ropo, reach, inventory  */
#tabs {
    border-right: 1px solid #2424CC;
    border-left: 1px solid #000099;
    float: left;
    font-family: 'Droid Sans', Arial, sans-serif;
    height: 40px;
    margin: 0 0 0 0px;
	padding: 0 0 0 10px;
	/*position: absolute;
    top:0px;
    left:160px;
    */
    text-shadow: 0px 1px 0px #000;
    z-index: 99;
	/*top: 48px;
	*top: 41px;
	_top: 41px;*/
}

#tabs ul{
    float: left;
    list-style: none;
}

#tabs li {
    float:left;
    vertical-align: top;
    list-style: none;
	margin: 0 0px 0 0;
	padding: 0;
    position: relative;
}

#tabs li.title {
	border: none;
	padding: 0;
}

#tabs li a, #tabs li div.pulldown-link, #tabs li .pulldown-link, #tabs li .pulldown-link {
	border-left: 1px solid #2424CC;
    border-right: 1px solid #000099;
    border-bottom:0px solid #fff;
	color: #cccce8;
    display: block;
    float: left;
	font-size: 11px;
	font-weight: normal;
	height: 40px;
    letter-spacing: normal;
    line-height: 40px;
	margin: 0px 0 0 0;
    outline: none;
	padding: 0px 15px 0px 15px;
	text-transform: none;
    width: ;
}
    #tabs li a{
        padding: 0px 15px 0px 15px;
    }
    #tabs li div.pulldown-link, #tabs li a.pulldown-link {
        cursor: pointer;
        padding: 0px 5px 0px 15px;
    }

#tabs li a.active {
	background-color: #fff;
    border-left:0px solid #fefefe;
    border-bottom:0px solid #dfe6e7;
    *border-bottom:1px solid #ffffff;
    border-right: 1px solid #fff;
	color: #00008b;
    display: inline-block;
	font-size: 11px;
	font-weight: bold;
	height: 48px;
    *height: 40px;
    letter-spacing: normal;
    line-height: 40px;
	margin: 0px 0 0 0;
	padding: 0px 15px 0px 15px;
    text-shadow: 0px 1px 0px #fff;
	text-transform: none;
}
    #tabs li a.active:hover{
        color: #00008b;
        text-decoration: underline;
    }

#tabs li .pulldown-active, #tabs li div.pulldown-active {
    background: -moz-linear-gradient(top, #fff, #eee, #fff);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.50, #eee), to(#fff));
	background-color: #eee;
    border-left: 0px solid #dedede;
    *border-left: 0px solid #dedede;
    border-bottom: 0px solid #dfe6e7;
    border-right: 1px solid #fff;
	color: #000;
    cursor: default;
    display: inline-block;
	font-size: 11px;
	font-weight: normal;
	height: 41px;
    letter-spacing: normal;
    line-height: 41px;
	margin: 0px 0 0 0;
	padding: 0px 21px 0px 15px;
    *padding: 0px 21px 0 15px;
    position: relative;
    text-shadow: 0px 1px 0px #fff;
	text-transform: none;
    width: ;
    z-index:901;
}

#tabs a.active:hover {
    color: #fff;
    text-decoration: underline;
}
#tabs a:hover, #tabs li div.pulldown-link:hover {
    color: #fff;
}
#tabs li .pulldown-active:hover, #tabs li div.pulldown-active:hover {
    color: #000;
}

/*  beta  */
#tabs a.beta {
	background: url(../images/icons/icon-sprite.png) right -1254px no-repeat;
    padding: 0px 36px 0px 15px;
}

#tabs .pulldown-link .beta{
    background: url(../images/icons/icon-sprite.png) right -1247px no-repeat;
    display: block;
    float: left;
	font-size: 11px;
	font-weight: normal;
	height: 40px;
    letter-spacing: normal;
    line-height: 40px;
    margin: 0;
    padding-right: 38px;
	text-transform: none;
}

#tabs a.beta-active {
	background: #dfe6e7 url(../images/icons/icon-sprite.png) right -1254px no-repeat;
    border-left:1px solid #fefefe;
    border-bottom:1px solid #dfe6e7;
	color: #000;
    display: inline-block;
	font-size: 11px;
	font-weight: bold;
	height: 40px;
    letter-spacing: normal;
    line-height: 40px;
	margin: 0px 0 0 0;
	padding: 0px 36px 0px 15px;
	text-transform: none;
}

#tabs a.beta-active:hover {
	color:#92a1a2;
}

#tabs a.two-line{
    height: 20px;
    line-height: 10px;
    padding: 10px 36px 10px 15px;
}

#tabs .home{
    background:url(../images/icons/icon-sprite.png) no-repeat -171px -629px;
    border-left: 1px solid #2424CC;
    border-right: 1px solid #000099;
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 0px 0px 0 0px;
    width: 40px;
    filter: alpha(opacity=70); /* internet explorer */
	-khtml-opacity: 0.7;      /* khtml, old safari */
	-moz-opacity: 0.7;       /* mozilla, netscape */
	opacity: 0.7;           /* fx, safari, opera */
}
    #tabs span.home:hover{
        filter: alpha(opacity=100); /* internet explorer */
    	-khtml-opacity: 1.0;      /* khtml, old safari */
	    -moz-opacity: 1.0;       /* mozilla, netscape */
    	opacity: 1.0;           /* fx, safari, opera */
    }

#tabs .home-active{
    background: #1414A3 url(../images/icons/icon-sprite.png) no-repeat -171px -629px;
    border-left: 1px solid #2424CC;
    border-right: 1px solid #000099;
    cursor: pointer;
    display: block;
    height: 40px;
    margin: 0px 0px 0 0px;
    width: 40px;
    *width: 43px;
}

#mast .pulldown, #admin .pulldown{
    background:url(../images/icons/icon-sprite.png) no-repeat -273px -3px;
    *background:url(../images/icons/icon-sprite.png) no-repeat -273px 13px;
    _background:url(../images/icons/icon-sprite.png) no-repeat -273px 13px;
    height:7px;
    width:7px;
    margin: 0 0 0 2px;
    padding:0 5px 0 5px;
}

/* dropdown */
#mast .pulldown-link{
}

/*#mast ul li a.active{
    background: #fff;
}*/

    #pulldown-menu, #pulldown-sub-menu{
        background: -moz-linear-gradient(top, #fff, #eee, #fff);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.50, #eee), to(#fff));
        background-color: #fff;
        border:1px solid #fff;
        *border:1px solid #dedede;
        _border:1px solid #dedede;
        *border-top: none;
        _border-top: none;
        -webkit-box-shadow: 0px 6px 18px #777;
        -moz-box-shadow: 0px 6px 18px #777;
        box-shadow: 0px 6px 18px #777;

        padding:0px 0 0 0;

        text-shadow: 0px 1px 0px #fff;

        width:169px;
        z-index:900;
    }
    #pulldown-menu{
        display: none;

        left: 0px;
        *left: 0px;
        _left: 0px;

        position: absolute;
        top: 41px;
    }
    #pulldown-sub-menu{
        display: ;

        left: 0;
        *left: 250px;

        position: absolute;
        top: 0;
        z-index:999;
    }

        #mast #pulldown-menu ul, #mast #pulldown-sub-menu ul{
            border-left: none;
            margin:0px 0 0 0;
        }

        #mast #pulldown-menu ul li, #mast #pulldown-sub-menu ul li{
            border-right: none;
            position: relative;
        }

        #pulldown-menu ul li a, #pulldown-sub-menu ul li a{
            border-left:none;
            border-right:none;
            color: #475354;
            font-weight: normal;
            height: auto;
            line-height: 12px;
            margin: 0;
            padding: 6px 8px 8px 14px;
            width:147px;
            *width:168px;
            _width:168px;
        }
            #pulldown-menu ul li a:hover, #pulldown-menu ul li a.active:hover, #tabs li #pulldown-menu ul li a.active:hover{
                background: #cceaf6;
                color:#000;
                width:147px;
                *width:168px;
                _width:168px;
            }
        #pulldown-menu ul li a.active, #tabs li #pulldown-menu ul li a.active{
            /*background: #cceaf6;*/
            background: none;
            border:none;
            color:#000;
            font-weight: bold;
            height: auto;
            line-height: 12px;
            margin: 0;
            padding: 6px 8px 8px 15px;
            text-decoration: none;
            width:147px;
            *width:168px;
            _width:168px;
        }
        #tabs li #pulldown-menu ul li a.beta {
        	background: url(../images/icons/icon-sprite.png) right -1254px no-repeat;
            border:none;
        	color: #475354;
            display: inline-block;
        	font-size: 11px;
        	font-weight: normal;
        	height: auto;
            letter-spacing: normal;
            line-height: 12px;
        	margin: 0px 0 0 0;
        	padding: 6px 8px 8px 14px;
        	text-transform: none;
            width:147px;
            *width:167px;
            _width:167px;
        }
            #tabs li #pulldown-menu ul li a.beta:hover, #tabs li #pulldown-menu ul li a.beta-active:hover {
                background: #cceaf6 url(../images/icons/icon-sprite.png) right -1254px no-repeat;
                *background: #cceaf6 url(../images/icons/icon-sprite.png) -233px -1254px no-repeat;
                _background: #cceaf6 url(../images/icons/icon-sprite.png) -233px -1254px no-repeat;
            	color: #000;
                width:147px;
                *width:168px;
                _width:168px;
            }
        #pulldown-menu ul li a.beta-active, #tabs li #pulldown-menu ul li a.beta-active{
            /*background: #cceaf6;*/
            background: url(../images/icons/icon-sprite.png) right -1254px no-repeat;
            border:none;
            color:#000;
            font-weight: bold;
            height: auto;
            line-height: 12px;
            margin: 0;
            padding: 6px 8px 8px 15px;
            width:147px;
            *width:167px;
            _width:167px;
        }

.shadow{
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 1.0);
    -webkit-box-shadow:0 0px 4px rgba(0, 0, 0, 0.8);
    height:1px;
    margin-top:-1px;
    position:absolute;
    width:100%;
    z-index:0;
}

#exec-tabs{
    background: -moz-linear-gradient(center top , #F2F2F2 0pt, #DCDCDC 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#dcdcdc));
    background-color: #f2f2f2;
    border-bottom: 1px solid #C6C6C6;
    border-top: 1px solid #ddd;
    float: left;
    margin: 0 0 30px 0;
    padding: 10px 0 0 0;
    width: 100%;
}
    #exec-tabs ul{
        float: left;
        list-style: none;
        margin: 0 0 -1px 0;
        padding: 0px 30px 0 26px;
        position: relative;
        *position: ;
        width: 100%;
        z-index: 890;
    }
        #exec-tabs ul li{
            float: left;
            font-size: 12px;
            margin: 0;
            padding: 0;
        }
            #exec-tabs ul li a{
                background: -moz-linear-gradient(top, #d0d0d0 0%, #adadad 50%, #adadad 51%, #c6c6c6 100%); /* firefox */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d0d0), color-stop(50%,#adadad), color-stop(51%,#adadad), color-stop(100%,#c6c6c6)); /* webkit */
                background-color: #c6c6c6;
                /*-webkit-border-top-left-radius: 6px;
                -webkit-border-top-right-radius: 6px;
                -moz-border-radius-topleft: 6px;
                -moz-border-radius-topright: 6px;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                */
                color: #444;
                cursor: pointer;
                display: block;
                margin: 4px 4px 0 4px;
                padding: 8px 10px 5px 10px;
                text-shadow: 0px 1px 0px #ccc;
            }
                #exec-tabs ul li a:hover{
                    color: #222;
                }

            #exec-tabs ul li a.active{
                background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 50%, #eee 51%, #ffffff 100%); /* firefox */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#e3e3e3), color-stop(51%,#ddd), color-stop(100%,#ffffff)); /* webkit */
                background-color: #fff;
                color: #222;
                cursor: default;
                margin: 4px 4px 0 4px;
                text-shadow: 0px 1px 0px #fff;
            }
            #exec-tabs ul li a.tab-add{
                background: url(../images/icons/icon-sprite.png) no-repeat -215px -635px;
                cursor: pointer;
                height: 19px;
                margin: 4px 0 0px 4px;
                padding: 8px 0 0 19px;
                width:;
                text-shadow: 0px 1px 0px #fff;
            }
    #exec-tabs span{
        cursor: pointer;
        font-weight: bold;
    }

/* =8   Content layout
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#content {
	margin: 0 auto;
	padding: 0 20px;
}
*html #content	{ width: 100%; }	/*  IE hack  */
#content-main	{ width: 100%; }	/*  old dashboards  */

/*  =8.1	#header  */
#header {
	background: url(../images/icons/icon-sprite.png) repeat-x scroll 0 -340px transparent;
    border-bottom: 1px solid #e1e1e1;
	color: #494949;
    cursor: default;
	height: 33px;
	height: 33px\9!important; /* IE hack, \9 or backslash 9 will override any other IE hack */
	line-height: 33px;
	padding-left: 14px;
	padding-right: 14px;
}

/* IE header is shorter if height is set at 43px */
*html #header {	height: 53px; }

	/*  header> fieldset  */
	#header fieldset		{	padding: 15px 0;}
	#header fieldset span	{	padding: 0 20px 0 0;}
	#header label			{	padding: 0 5px 0 0; color: #32424f; font-size: 11px;}

	/*  dashboard header> title */
	#title {
		float:left;
        font-family: 'Droid Serif', Arial, sans-serif;
        text-shadow: 1px 1px 0px #eee;
	}

	#title .headline {
		font-size: 19px;
        letter-spacing: -0.5px;
        word-spacing: 1px;
		padding: 0px 10px 0 0;
		vertical-align: middle;
		float: left;
	}

	#title .headline a { color:#fff; }
	#title .byline {
		border-left: 1px solid #bbb;
		font-size: 11px;
        letter-spacing: normal;
		padding: 4px 10px 4px 10px;
	}
        #title .count, #title #view_count, #title #stack_count, #graph_title #view_count, #graph_title #stackstack_count, .byline .view_count{
            color: #7f7f7f;
            padding: 0 5px 0 3px;
        }

        #title .byline a{
            color: #fc0;
            display: inline-block;
            font-weight: bold;
            height: 20px;
            line-height: 20px;
        }
        #title .byline-menu{
            background: #fff;
            border-bottom: none;
            display: none;
            left:126px;
            position: absolute;
            top:10px;
            width:auto;
        }
            #title .byline-menu ul{

            }
            #title .byline-menu ul li{
                color:#222;
                display: block;
                list-style: none;
                padding:0;
            }
            #title .byline-menu ul li.toggle{
                background: #fc0;
                color:#00008b;
                display: block;
                *display: inline-block;
                _display: inline-block;
                font-size: 10px;
                font-weight: bold;
                letter-spacing:1px;
                line-height:25px;
                padding: 3px 5px 11px 5px;
                text-transform: uppercase;
                width: 205px;
            }
                #title .byline-menu ul li a{
                    background: #fc0;
                    border-bottom: 1px solid #dbaf00;
                    border-top: 1px solid #ffdb4c;
                    color:#222;
                    display: block;
                    *display: inline-block;
                    _display: inline-block;
                    font-size: 11px;
                    line-height: normal;
                    padding: 5px 10px 5px 5px;
                    width: 200px;
                }
                #title .byline-menu ul li a:hover{
                    background: #ffdb4c;
                    border-bottom: 1px solid #dbaf00;
                    border-top: 1px solid #ffdb4c;
                    color:#000;
                    display: block;
                    *display: inline-block;
                    _display: inline-block;
                    font-size: 11px;
                    line-height: normal;
                    padding: 5px 10px 5px 5px;
                    width: 200px;
                }

	/*  dashboard header> date */
	#calendar {
		color: #494949;
		float: right;
        font-family: 'Droid Serif', Arial, sans-serif;
		font-size: 20px;
		letter-spacing: -1px;
        text-shadow: 1px 1px 0px #eee;
	}

    /*  for cot panel target settings */
    #header .upload-light{
        background: url(../images/icons/icon-sprite.png) -140px -1256px no-repeat;
    }

    #header a.upload-light{
        color: #fff;
        font-size: 20px;
        margin: 0 5px 0 20px;
        padding: 0 0 0 26px;
        text-decoration: underline;
    }

    #header .upload-container{
        background: #2b2f7f;
        padding: 15px 20px;
        position: absolute;
        right: 10;
        *right: 9;
        _right: 9;
        top: 55;
    	-moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px;
    	-webkit-border-bottom-left-radius: 12px; -webkit-border-bottom-right-radius: 12px;
    }

    #header .light a{
        color: #fff;
        font-size: 12px;
        margin: 0 0 0 0px;
        padding: 0 0 0 0px;
        text-decoration: underline;
    }

/*  =8.2	#views v1.0
 *  to be deleted once dashboards migrate to new faceted navigator
 */

#views {
	background: url(../images/icons/icon-sprite.png) repeat-x 0 -340px;
	border-bottom: 1px solid #dfdfdf;
	border-top: 1px solid #fff;
	height: 45px;
	}

	/*  views>fieldset  */
	#views fieldset			{	padding: 15px 0;}
	#views fieldset span	{	padding: 0 20px 0 0;}
	#views label			{	padding: 0 5px 0 0; color: #32424f; font-size: 11px;}

	#views ul {	list-style-type:none; }

		#views li {
			background-color:transparent;
			color:#AAA;
			display:block;
			float:left;
			font-size:8px;
			height: 45px;
			padding: 0 8px;
			text-align: center;
			text-transform: uppercase;
		}

		#views li.divider {
			border-left: 1px solid #FEFEFE;
			border-right: 1px solid #DFDFDF;
			margin: 0;
			padding: 0;
		}

		#views li.views-title {
			font-weight:bold;
			letter-spacing:1px;
			margin: 27px 0 -30px 0;
		}

		#views li span {
			display: block;
			margin: 0;
			padding: 27px 0 8px 0;
		}

		#views li:hover,
		#views li.active {
			background-color: #EEE;
			color: #000;
		}

		#views li.views-title:hover {
			background-color: transparent;
		}

/*  #setting
 *  currently ONLY used in calendarManagement.html
 *
 */
#settings {
	float:right;
	list-style-type:none;
}
	#settings li.cal-financial-year {
		background: url(../images/icons/icon-sprite.png) no-repeat -250px -30px;
	}
		#settings li.cal-financial-year a {
			vertical-align: middle;
			padding-left:20px;
		}

/*  =8.3	#views 2.0  */
#views-container {
	background: url(../images/icons/icon-sprite.png) repeat-x 0 -340px;
	border-bottom: 1px solid #dadada;
/*	border-top: 1px solid #e1e1e1;*/
	color:#494949;
	font-size:8px;
	height: 63px;
	text-transform: uppercase;
    text-shadow: 0px 1px 0px #fff;
		clear:both;
}
    #views-container ul ul{
        position: relative;
        /*z-index:0;*/
    }

	/*  #views .facet-title icon
	 *
	 *	minus 7px from position-y to accommodate extra spacing
	 *  #views to be deleted
	 */
	#views .product,
	#views-container ul ul .product		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -493px; cursor: pointer; }
	#views .location,
	#views-container ul ul .location	{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -539px; cursor: pointer; }
	#views .channel,
	#views-container ul ul .channel		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -583px; cursor: pointer; }
	#views .time,
	#views-container ul ul .time		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -673px; cursor: pointer; position: relative; *position: static; }
    #views .time-range,
	#views-container ul ul .time-range	{	background: url(../images/icons/icon-sprite.png) no-repeat 33% -719px; cursor: pointer; position: relative; *position: static; }

	#views .mtd,
	#views-container ul ul .mtd			{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -763px; }
	#views .ytd,
	#views-container ul ul .ytd			{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -808px; }
	#views .all,
	#views-container ul ul .all			{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -853px; }

	#views .value,
	#views-container ul ul .value		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -898px; cursor: pointer; position: relative; *position: static; }
	#views .percent,
	#views-container ul ul .percent		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -943px; cursor: pointer; position: relative; *position: static; }
    #views .quantity,
	#views-container ul ul .quantity		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -1213px; cursor: pointer; position: relative; *position: static; }
	#views .outlet,
	#views-container ul ul .outlet		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -1168px; cursor: pointer; position: relative; *position: static; }
	#views .order,
	#views-container ul ul .order		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -1123px; cursor: pointer; position: relative; *position: static; }
	#views-container ul ul .tonnage     {   background: url(../images/icons/lorry.png) no-repeat center 30% transparent; cursor: pointer; position: relative; *position: static; }

	#views-container ul ul .target-grp 	{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -989px; cursor: pointer; position: relative; *position: static; }
	#views-container ul ul .traffic 	{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -1033px; cursor: pointer; position: relative; *position: static; }

	#views .targets,
	#views-container ul ul .targets		{	background: url(../images/icons/icon-sprite.png) no-repeat 35% -1078px; cursor: pointer; position: relative; *position: static; }

	#views-container ul ul .table-column-icon {	  background: url(../images/icons/icon-sprite.png) no-repeat scroll 106% -673px transparent; }

    #views-container ul ul .all-status  { background: url(../images/retailer-all.png) no-repeat 50% 25%; cursor: pointer; position: relative; *position: static; }
    #views-container ul ul .on-status   { background: url(../images/retailer-active.png) no-repeat 50% 25%; cursor: pointer; position: relative; *position: static; }
    #views-container ul ul .off-status  {   background: url(../images/retailer-inactive.png) no-repeat 50% 25%; cursor: pointer; position: relative; *position: static;}

	#views-container ul ul #menu_time   {   cursor: pointer; }
	#views-container ul ul .active		{	background-color: #cceaf6; }

	#views-container a					{ 	color:#AAA; }
        #views-container span a{
            color: #494949;
        }

	#views-container a:hover			{ 	color:#4898fe; }

/* views time-range specific styles */
#views .time-range,
#views-container ul ul .time-range{
    width: 98px;
}
    #views .pulldown,
    #views-container .pulldown{
        background: #DADADA url(../images/icons/icon-sprite.png) no-repeat -245px -49px;
        *background: #DADADA url(../images/icons/icon-sprite.png) no-repeat -247px -48px;
        _background: #DADADA url(../images/icons/icon-sprite.png) no-repeat -247px -48px;
        height: 7px;
        width: 96%;
        *width: 100%;
        margin: 0 0 0 0px;
        padding: 0 2px;
        bottom: 0;
        position:absolute;
        right: -1px;
        *right:-1px;
        bottom: 0px;
        *bottom: -1px;
    }
        #views div.pulldown:hover,
        #views-container div.pulldown:hover{
            background: #D5F3FF url(../images/icons/icon-sprite.png) no-repeat -245px -49px;
        }
    #views .wide,
    #views-container .wide{
        background: #DADADA url(../images/icons/icon-sprite.png) no-repeat -230px -49px;
        *background: #DADADA url(../images/icons/icon-sprite.png) no-repeat -232px -48px;
    }
        #views div.wide:hover,
        #views-container div.wide:hover{
            background: #D5F3FF url(../images/icons/icon-sprite.png) no-repeat -230px -49px;
        }

#views .tab-container,
#views-container ul ul .tab-container{
    padding: 27px 0px 0px 0px;
    text-align: center;
}
    #views .tab-container .days,
    #views-container ul ul .tab-container .days{
        font-size: 10px;
        font-weight:bold;
        height:13px;
        *height:14px;
        margin:0;
        padding:0 0 0px 0;
    }
    #views .tab-container .start,
    #views-container ul ul .tab-container .start,
    #views .tab-container .end,
    #views-container ul ul .tab-container .end{
        display: inline;
        margin:0;
        padding:0;
    }

/*  measure selector  */
    #views-container .measure-selector{
        /*
        left:0;
        position:absolute;
        top: 47px;
        */
        float: right;
        margin: -4px 0px -3px 0;
    }
        #views-container .measure-selector ul{

        }
        #views-container .measure-selector ul li{
            background: none;
            border-left: 1px solid #dfdfdf;
            display: block;
            float:left;
            height: 17px;
            line-height: 17px;
            margin: 0;
            padding: 0 10px;
            width: auto;
        }
        #views-container .measure-selector ul li.selected{
            background: #cceaf6;
            color: #000;
        }

/*  #views category title  */

#views-xaxis, #views-yaxis, #views-measure, #sales-period-tab, #soh-tab, #views-tab {
	display: block;
	float: left;
	list-style-type: none;
}
    #views-container ul ul.items .active{
        background: -moz-linear-gradient(top, #e2f5ff 20%, #e2f5ff 50%, #9cdaff 50%, #bee7ff 90%);
	 	background: -webkit-gradient(linear, 0% 0%, 0% 80%, from(#E2F5FF), to(#BEE7FF), color-stop(.6,#E2F5FF),color-stop(.6,#9CDAFF));
        background-color: #CCEAF6;
        text-shadow: 0px 1px 0px #e9f6fb;
        *color: #11485e;
        _color: #11485e;
		*height: 65px; /* et add to fix IE6 layout */
		_height: 65px; /* et add to fix IE6 layout */
    }

	#views-xaxis li.title,
	#views-yaxis li.title,
    #sales-period-tab li.title,
    #soh-tab li.title,
    #views-tab li.title,
    #views-measure li.title {
		background: url(../images/icons/icon-sprite.png) repeat-x 0 -420px;
		border-bottom: 1px solid #DFDFDF;
		border-right: 1px solid #DFDFDF;
        cursor: default;
		height: 13px;
		margin-right: 1px;
		padding: 4px 0 0 10px;
	}
	#views-measure li#accumulate { /* et add for Accumulative Icon */
		background: url(../images/icons/icon-sprite.png) no-repeat -103px -1462px;
		height: 64px;
		*height: 75px;
		_height: 75px;
	}
  	#views-measure li#accumulate.active{ /* et add for Accumulative Icon on active */
		background: url(../images/icons/icon-sprite.png) no-repeat -143px -1462px #E9F6FB!important;
		height: 64px;
		*height: 75px;
		_height: 75px;
	}
  	#views-measure{
	width:40px!important;
	}

	*html #views-xaxis li.title,
	*html #views-yaxis li.title,
    *html #sales-period-tab li.title,
    *html #soh-tab li.title,
    *html #views-tab li.title,
    *html #views-measure li.title {
		padding: 4px 0 3px 10px;
		margin-bottom: -10px;
	}

	#views-xaxis .xaxis,
	#views-yaxis .yaxis,
    #sales-period-tab .yaxis,
    #soh-tab .yaxis,
    #views-tab .yaxis {
		list-style-type: none;
		*margin-top: 0px;
		_margin-top: 0px;
	}
    #views-measure .items {
        list-style-type: none;
        *margin-top: -10px;
		_margin-top: -10px;
    }

		#views-xaxis .xaxis li,
		#views-yaxis .yaxis li,
        #sales-period-tab .yaxis li,
        #soh-tab .yaxis li,
        #views-tab .yaxis li {
			background: transparent;
			display: block;
			float: left;
			height: 46px;
			*height: 47px;
			_height: 47px;
			text-align: center;
			width: 70px;
		}
            #views-xaxis .inactive span, #views-yaxis .inactive span{
                cursor: default;
                color: #999;
            }

        #views-measure .items li {
			background: transparent;
            color: #11485e;
            cursor: pointer;
			display: block;
		    float: left;
            font-weight: normal;
			height: 64px;
            line-height: 64px;
			*height: 65px;
			_height: 65px;
			text-align: center;
			width: 17px;
		}

        #views-measure .items li#transaction {
            font-size: 12px;
        }

			#views-xaxis .xaxis li.divider,
			#views-yaxis .yaxis li.divider,
            #sales-period-tab .yaxis li.divider,
            #soh-tab .yaxis li.divider,
            #views-tab .yaxis li.divider,
            #views-measure .items li.divider {
				border-left: 1px solid #DFDFDF;
				border-right: 1px solid #FEFEFE;
				width: 0; float:left;
			}

	#views-xaxis li span,
	#views-yaxis li span,
    #sales-period-tab li span,
    #soh-tab li span,
    #views-tab li span,
    #views-measure li span {
		display: block;
		padding: 27px 0 8px 0;
	}

/* fix by gary - manual tabs collection list */
*html #content .eight-tabs,
*html #content .seven-tabs,
*html #content .six-tabs,
*html #content .five-tabs,
*html #content .four-tabs,
*html #content .three-tabs,
*html #content .two-tabs,
*html #content .one-tab,
*html #content .pullout-tab {
	float: left;
	display: block;
	list-style-type: none;
}

*html #content .eight-tabs	{	width: 576px; }
*html #content .seven-tabs	{	width: 504px; }
*html #content .six-tabs	{	width: 432px; }
*html #content .five-tabs	{	width: 360px; }
*html #content .four-tabs	{	width: 288px; }
*html #content .three-tabs	{	width: 216px; }


*html #content .two-tabs	{	width: 144px; }
*html #content .one-half-tab{	width: 100px; }
*html #content .one-tab		{	width: 72px; }
*html #content .pullout-tab		{	width: 19px; }

/* fix by etieqa - manual tabs collection list */
*html #expand-navigator .eight-tabs,
*html #expand-navigator .seven-tabs,
*html #expand-navigator .six-tabs,
*html #expand-navigator .five-tabs,
*html #expand-navigator .four-tabs,
*html #expand-navigator .three-tabs,
*html #expand-navigator .two-tabs,
*html #expand-navigator .one-tab,
*html #expand-navigator .pullout-tab {
	float: left;
	display: block;
	list-style-type: none;
}

*html #expand-navigator .eight-tabs	{	width: 576px; }
*html #expand-navigator .seven-tabs	{	width: 504px; }
*html #expand-navigator .six-tabs	{	width: 432px; }
*html #expand-navigator .five-tabs	{	width: 360px; }
*html #expand-navigator .four-tabs	{	width: 288px; }
*html #expand-navigator .three-tabs	{	width: 216px; }
*html #expand-navigator .two-tabs	{	width: 144px; }
*html #expand-navigator .one-half-tab{	width: 100px; }
*html #expand-navigator .one-tab		{	width: 72px; }
*html #expand-navigator .pullout-tab		{	width: 19px; }

/*  #views 2.0 targets icon  */
#views-targets {
	background: #262627 url(../images/icons/icon-sprite.png) 0 -800px no-repeat;
	float:right;
	height: 63px;
	list-style-type:none;
	width: 66px;
}
	#views-targets li {
		background: url(../images/icons/icon-sprite.png) no-repeat 35% -1078px;
		height: 27px;
		margin: 5px 0 0 0;
		text-align:center;
	}
	#views-targets li span {
		display:block;
		padding: 28px 0 0 0;
	}
	#views-targets a		{ color:#333; }
	#views-targets a:hover	{ color:#4898fe; }

/* =X  SUBFILTER (old facet navigator) - used in salesPerformance.html, reach.html
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* to be deleted with new facet navigator */

#subfilter {
	float: right;
	font-size:11px;
	width: 20%;
}
	#subfilter ul	{ list-style-type:none; }
	#subfilter li li{ margin:0; }

	/*  detail level  */
	.subfilter-view {
		background-color:#f8f8f8;
		clear: both;
		list-style-type: none;
	}

	.subfilter-view:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
	}

	html[xmlns] .subfilter-view	{	display: block; }
	* html .subfilter-view		{	height: 1%; }

/*  detail level icons  */
.subfilter-view li	{ display:inline; }
span.link-pointer	{ cursor:pointer; } /* fake link without anything style */

.subfilter-view span {
	background-color: #f8f8f8;
	border-right: 1px solid #ebe9ea;
	display: block;
	float: left;
	font-size: 8px;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	padding: 4px 1px 5px 0;
	width: 13%;
}
	.subfilter-view span a {
		margin: 2px 0 0 0;
		display: block;
	}

	.subfilter-view span.select,
	.subfilter-view span:hover {
		background-color: #cceaf6;
		color: #000;
	}

/*  filter list */
.sub-filter { list-style-type:none; }

	.sub-filter li {
		background-color: #f8f8f8;
		border-bottom: 1px solid #ebe9ea;
		border-top: 1px solid #fffdfe;
		color: #444;
		margin: 0;
		padding: 4px 8px;
	}
		.sub-filter li li {
			font-size: 10px;
			padding: 3px 15px;
		}

		.sub-filter li.last {
			border-bottom: none;
		}

		.sub-filter li.link {
			cursor: pointer;
			margin: 0;
			text-decoration: none;
		}

		.sub-filter li.link:hover {
			background-color: #e6f3f8;
			text-decoration:none;
		}

		.sub-filter li.link.active,
		.sub-filter li.link.select {
			background-color: #3b87a9;
			color: #fff;
			text-decoration:none;
		}

		.sub-filter li input {
			margin: 0 5px 0 0;
			vertical-align: middle;
		}

		.sub-filter li.title {
			background-color: #cceaf6;
			padding: 5px 10px 5px 28px;
			font-weight: bold;
			border: none;
			text-transform: uppercase;
			font-size: 9px;
		}

span.fakelink {
	text-decoration: none;
	padding: 0;
	cursor:pointer;
}

span.fakelink:hover {
	text-decoration:underline;
}


/* =8.4  Collapsible Facet  */

#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	}

#panel
{
	display: ;
	width: 100%;
}

#togglebar
{
    /*background-image: url(../images/toggle/togglebg.png);
	background-repeat:repeat-x;
	height: 24px;*/
    background:#fff;
    text-align: center;
}

#togglebar .toggle-btn
{
  background: url(../images/hide_menu.png) no-repeat scroll center top transparent;
  background-position:top center;
  background-repeat:no-repeat;
  cursor: pointer;
  height: 21px;
  margin: 0 auto auto;
  text-align: center;
  width: 90px;
}

#togglebar .active
{
  background-position:top center;
  background-repeat:no-repeat;
  cursor:pointer;
  margin: auto;
  /*margin-top:-38px;
  *margin-top:-42px;
  _margin-top:-42px;
  margin-bottom:34px;*/
}


/* =9   Footer Layout
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#footer {
	/*background: #fff url(../images/icons/icon-sprite.png) repeat-x 0 -180px;*/
    background: -moz-linear-gradient(center top , #F2F2F2 0pt, #DCDCDC 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#dcdcdc));
    background-color: #f2f2f2;
    bottom: 0 !important; bottom: -1px; /* for certain IE widths */
    border-top: 1px solid #c6c6c6;
    border-bottom: 0px solid #ddd;

    font-family: 'Droid Sans', Arial, sans-serif;
	height: 35px;
    position: absolute;
    text-shadow: 0px 1px 0px #fff;
	width: 100%;
	z-index:997;
}
    #footer .shadow{
        -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
        -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4);
        height:1px;
        margin-top:-1px;
        position:absolute;
        width:100%;
        z-index:0;
    }
	#footer div { padding: 0px 5px 0 5px; }
	#footer p {
		color: #777;
    float:right;
		font-size: 11px;
		line-height:35px;
		margin: 0px 0px 0px 10px;
    padding: 0;
		text-align: right;
	}
        #footer p a{
            border-left: 1px solid #f2f2f2;
            border-right: 1px solid #ccc;
            display: block;
            float: left;
            line-height: 35px;
            padding: 0 10px 0 10px;
						margin-right:10px;
        }
        #footer p a.last{
            border-right: none;
        }

	#footer img {
		float: left;
		margin: 0px 0 0 0px;
	}
	#footer-clear {
		clear: both;
		height: 150px;
		width: 100%;
	}
    .footer-logo{
        background: url(../images/icons/icon-sprite.png) 10px -909px no-repeat;
        border-right: 1px solid #ccc;
        display:inline-block;
        float:left;
        height:35px;
        margin: 0;
        padding: 0;
        width:67px;
    }


/* =10   Targets management
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#targets { cursor: pointer; }

	/*  links  */
	#targets a {
		color: #666;
		text-decoration: none;
	}

	#targets input {
		font-size: 11px;
		text-align: right;
		width:50px;
	}

	/*  table properties  */
	#targets th {
		font-weight: bold;
		font-size: 9px;
	}
	#targets td {
		text-align: right;
		padding: 6px 5px;
	}
	#targets th,
	#targets td				{ border-right: 1px solid #EFEFEF; }
	#targets .head th		{ border-bottom: 2px solid #0A3B4D; }
	#targets .target-parent	{ text-align:left; }

	#targets .first	th {
		border-bottom: 1px solid #EEE;
		padding: 2px 5px;
	}

/*  targets table row properties  */
#targets th.level1 {
	background-color: #0A3B4D;
	color: #fff;
	font-size: 16px;
}

#targets .level2 th.total {
	background-color:#126280;
	color: #fff;
	font-size: 14px;
}

#targets .level3 th.total {
	background-color:#68ACC4;
	color: #fff;
	font-size: 12px;
}

#targets .level4 th.total {
	background-color:#87d1ea;
	color: #fff;
	font-size: 10px;
}

#targets .level5 th.total {
	color: #000;
	font-size: 9px;
	background-color: #c0efff;
}

#targets .level5 td {
	border-top: 1px solid #c0efff;
}

#targets .level6 th.total {
	color: #222;
	font-size: 9px;
}

#targets .level7 th.total {
	color:#333;
	font-size: 9px;
}

#targets .total span.left {
	float: left;
	font-size: 9px;
	text-align: left;
}

#targets .total span.right {
	float: right;
	font-size: 12px;
	text-align: right;
}

#targets th.current {
	background-color: #26a8ff;
	color: #fff;
	text-transform:uppercase;
}

#targets th.active,
#targets td.active {
    background: #d2d3d4 url(../images/target-active.png) no-repeat bottom center;
	border: none;
	color: #fff;
}

#targets .location {
	font-size: 11px;
	font-weight: bold;
	display:block;
	text-align: left;
	vertical-align:top;
}

#targets .channel {
	background-color:#F9F9F9;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
}

#targets .total-row td {
	background-color: #EFEFEF;
	color: #000;
	font-size:125%;
	font-weight: bold;
}

/*  extra styling on Gary's table  */
tr.row-total {
	background-color: #EFEFEF;
	font-weight: bold;
}


/*  columnHover
 *  highlights row and/or column on mouseover
 */
#targets span.left,
#target span.right,
#targets a:hover,
#targets tbody td:hover {
	background-color: #f0faff;
	color: #ff7200;
	text-decoration: none;
	cursor:pointer;
}

#targets td.betterhover,
#targets tbody tr:hover,
#ropo td.betterhover,
#ropo tbody tr:hover	{ background: #f0faff; }
#targets .down			{ display:none; }

/*  targets> columnFilter  */

#targets-columnFilter {
	display: inline;
	float: right;
}
	#targets-columnFilter li {
		border: 1px solid #333;
		border-bottom: none;
		display: block;
		float:left;
		margin:0 3px;
		padding: 5px 3px;
		text-align: center;
		width: 30px;
	}
		#targets-columnFilter li.on	{
			border-bottom: 1px solid #fff;
			color: #ff0000;
			font-weight: bold;
			margin-bottom: -1px;
		}

		#targets-columnFilter li.off {
			background-color: #999;
			border: 1px solid #999;
			color: #999;
			font-weight: bold;
		}

.second-header{
    background:#cceaf6;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 20px;
    height:40px;
    line-height: 40px;
    padding:0 10px;
}

#views-container.views-no-title{
	height: 46px;
}

/* =11   ROPO table
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#ropo {
	cursor:pointer;
	font-size: 11px;
}
	#ropo td { text-align:right; }
	#ropo th {
		font-size: 10px;
		text-align: center;
	}

	#ropo .head th {
		border-bottom:2px solid #888;
		color: #888;
		text-align: left;
		vertical-align: top;
	}

/*  ropo leftmost column  */
#ropo .ropo-location {
	display:block;
	font-size: 11px;
	font-weight:bold;
	text-align: left;
}

#ropo .level1,
#ropo .level2,
#ropo .level3,
#ropo .level4,
#ropo .level5,
#ropo .level6,
#ropo .level7 { color:#888; }

#ropo .total-row td {
	background-color:#F1F1F1;
	color:#000;
	font-weight:bold;
}

#ropo .ropo-highlight-head {
	background-color:#F1F1F1;
	color:#000;
	font-weight: bold;
	width: 50px;
}

#ropo .ropo-highlight {
	background-color:#FBFBFB;
	color:#000;
}

/*  highest count on each table row  */
#ropo td.ropo-highest {
	border-bottom:2px solid #7FB903;
	color: #429300;
}

/*  lowest count on each table row  */
#ropo td.ropo-lowest {
	border-bottom:2px solid #C31718;
	color: #C31718;
}

/*  ropo target  */
#ropo .target {
	height: 100%;
	width: 45px;
}
#ropo .target-parent td { padding: 4px 5px; }

#ropo .ropo-target-overall-percent {
	display:block;
	line-height: 26px;
	padding: 15px 0 0 0;
}

#ropo .ropo-target-overall-outlet {
	color:#666;
	display:block;
	font-size:90%;
	letter-spacing: -1px;
	text-transform:uppercase;
}

#ropo .ropo-target-overall-outlet span {
	color:#333;
	font-size: 140%;
	padding: 0 2px 0 0;
}

/*  added by Robin STARTS  */
.total1 {
	color:#000;
	display: block;
	font-size: 30px;
	letter-spacing: -2px;
}

.total2 {
	color:#000;
	display: block;
	font-size: 25px;
	letter-spacing: -2px;
}

.total3 {
	color:#555;
	display: block;
	font-size: 20px;
	letter-spacing: -2px;
}

.total4,
.total5,
.total6 {
	color:#777;
	display: block;
	font-size: 18px;
	letter-spacing: -2px;
}

.mouseover-contain { display:none; }
/*  added by Robin ENDS  */


/*  ropo target test  */
/*  ropo month selector  */
.ropo-months li {
	display: inline;
	padding: 0 10px;
	border-right: 1px solid #666;
	color:#666;
}
/*  ropo mockups
 *  to be deleted when ropo in /mockups are deleted
 */
tr.east,
tr.west,
tr.area-west,
tr.area-east,
tr.dist,
tr.srep { display:none; }

/* =13	Clear Cache Instruction
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#clearCache {
	background:#e7e7e7 url(../images/clearCache/cache-bg.jpg) no-repeat bottom right;
	margin: 25px;
	padding: 40px 30px 20px 30px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
#clearCache{
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}
	#clearCache h3 {
		background: url(../images/login-header.png) no-repeat top left;
		display:block;
		height: 59px;
		width:259px;
	}
	#clearCache h3 span		{ display:none; }

	#clearCache .subtitle {
        font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
		font-size: 11px;
		letter-spacing: 1px;
		margin:0;
		padding:5px 0 20px 0;
		text-transform: uppercase;
	}
	#cache-panel h4 {
					color: #2e3688;
					margin-bottom:10px;
					font-size:14px;
					font-family: 'Droid Serif', Arial, sans-serif;
					text-shadow: 1px 1px 0px #eee;
	}
	#cache-panel span {
			color: #494949;
			margin-top:20px;
			font-size:12px;
			font-family: 'Droid Serif', Arial, sans-serif;
			text-shadow: 1px 1px 0px #eee;
			text-transform:uppercase;
			display:block;
	}

	#cache-panel ul{list-style: decimal; margin:20px 0;}
	#cache-panel ul li{margin-left:30px; padding:3px 0;}

	a.cache{
		color:#1C80FE;
	}

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

	p#login-msg{
	font-family: 'Droid Sans',Helvetica,Arial,sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 0;
    height:12px;
    }

/* =  Active Development = new features currently underway
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* =14   Faceted Navigator (new)
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  facet> detail level icon | ALL | L1 | L2 | L3 | L4 | L5 | L6 | L7  */

.facet-zoom {
	float: right;
	font-size: 8px;
	text-transform: uppercase;
    text-shadow: 0px 1px 0px #fff;
	*margin-left:-3px;
	}
	.facet-zoom li {
		border-left: 1px solid #fff;
		cursor:pointer;
		display:block;
		float:left;
		height: 21px;
		margin: 1px 0 0 0;
		*margin:0px;
		_margin:0px;
		text-align: center;
		width: 30px;
		*width: 33px;
		_width: 33px;
	}

	.facet-zoom span {
		display: block;
		padding: 12px 0 0 0;
	}

	.facet-zoom .level1	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -502px; }
	.facet-zoom .level2	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -532px; }
	.facet-zoom .level3	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -562px; }
	.facet-zoom .level4	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -592px; }
	.facet-zoom .level5	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -622px; }
	.facet-zoom .level6	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -652px; }
	.facet-zoom .level7,
	.facet-zoom .level8,
	.facet-zoom .level9,
	.facet-zoom .level10	{	background: url(../images/icons/icon-sprite.png) no-repeat 0 -681px; }

	.facet-zoom li:hover.level1, .facet-zoom .level1-active {	background: url(../images/icons/icon-sprite.png) no-repeat -40px -502px; }
	.facet-zoom li:hover.level2, .facet-zoom .level2-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -532px; }
	.facet-zoom li:hover.level3, .facet-zoom .level3-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -562px; }
	.facet-zoom li:hover.level4, .facet-zoom .level4-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -592px; }
	.facet-zoom li:hover.level5, .facet-zoom .level5-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -622px; }
	.facet-zoom li:hover.level6, .facet-zoom .level6-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -652px; }
	.facet-zoom li:hover.level7, .facet-zoom .level7-active,
	.facet-zoom li:hover.level8, .facet-zoom .level8-active,
	.facet-zoom li:hover.level9, .facet-zoom .level9-active,
	.facet-zoom li:hover.level10, .facet-zoom .level10-active	{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -681px; }

/*  facet> detail level icon | ALL | L1 | L2 | L3 | L4 | L5 | L6 | L7 | L8 | L9 (strictly for Geo only) */
	#left_side_outletSales .facet-zoom li {	background: url(../images/icons/icon-sprite.png) no-repeat -177px -1659px; }

	#left_side_outletSales .facet-zoom li:hover, #left_side_outletSales .facet-zoom .active {	background: url(../images/icons/icon-sprite.png) no-repeat -215px -1659px; }

/*  facet> the window that encapsulates the entire browser for one filter navigator */
.facet-window {
	margin:0;
	padding:0;
}

/*  facet> title bar
 *  viewable even if facet window is collapsed
 */
.facet-title {
	cursor:pointer;
	font-size: 10px;
	letter-spacing: 1px;
	list-style-type:none;
	text-transform: uppercase; }

	/*  facet> title bar  */
	.facet-title li.header {
		background:#efefef url(../images/icons/icon-sprite.png) repeat-x 0px -305px;
		border-bottom: 1px solid #E1E1E1;
		height: 15px;
		padding:7px 4px 0px 4px; }

		*html .facet-title li.header { height: 22px; }

        .partial { color: #999; cursor: default; }

	/*  facet> title bar categories: location | product | channel | time  */
	#left_side_location,
	#left_side_channel,
	#left_side_product,
    #left_side_target,
	#left_side_time,
	#left_side_source,
	#left_side_textFilter {
		clear: both;
		margin: 0 0 0px 0;
		padding: 0; }

	/*  facet> title bar icon  */
	/*  #views 2.0> new facet-header-icon  */
    .facet-header-icon, .facet-header-icon-compare{
        text-shadow: 0px 1px 0px #fff;
    }

	#products .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -140px -500px;
		padding: 3px 0 12px 28px;
	}

    #products-tabbed .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -136px -497px;
		color:#999;
		padding: 6px 12px 6px 32px;
		margin-left: -4px;
	}
	/*   2 date ranges  */
	#products-tabbed .facet-header-icon-compare {
		background: url(../images/icons/icon-sprite.png) no-repeat -135px -723px;
		color:#999;
		padding: 6px 12px 6px 28px;
	}

	#sites .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -140px -545px;
		padding: 3px 0 12px 28px;
	}

    #kpi .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -140px -1040px;
		padding: 4px 0 12px 28px;
	}

	#channels .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -140px -590px;
		padding: 3px 0 12px 28px;
	}

	#target-grp .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -140px -995px;
		padding: 3px 0 12px 28px;
	}

	#target-source .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat scroll -180px -1583px;
		padding: 3px 0 12px 28px;
	}

	#outlet-sales .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat scroll -180px -1625px transparent;
		padding: 3px 0 12px 28px;
	}

	#textFilter .facet-header-icon {
    background: url(../images/icons/icon-sprite.png) no-repeat -355px -1547px transparent;
    padding: 3px 0 12px 28px;
	}

	/*  one date range  */
	#times .facet-header-icon {
		background: url(../images/icons/icon-sprite.png) no-repeat -135px -678px;
		color:#999;
		padding: 6px 12px 6px 32px;
		margin-left: -4px;
	}
	/*   2 date ranges  */
	#times .facet-header-icon-compare {
		background: url(../images/icons/icon-sprite.png) no-repeat -135px -723px;
		color:#999;
		padding: 6px 12px 6px 28px;
	}

	/* facet> title bar> date range selected  */
	#times span.active, #products-tabbed span.active	{
		background-color: #cceaf6;
		color: #000;
		filter: alpha(opacity=100); /* internet explorer */
		-khtml-opacity: 1.0;      /* khtml, old safari */
		-moz-opacity: 1.0;       /* mozilla, netscape */
		opacity: 1.0;           /* fx, safari, opera */ }

/*  facet-container>
 *  container for facet-dialogue
 *  height set to 170px
 */
.facet-container {
	display: none;
	height: 170px;
	margin:0;
	padding:0;
	width: 100%;
}
.facet-panel-one{
    height: 100px;
    *height: 80px;
    _height: 80px;
}
.facet-panel-two{
    height: 200px;
    *height: 160px;
    _height: 160px;
}

/*  facet container> date range window  */
.facet-container .date-panel {
	background-color:#F2F2F2;
	height: 80px;
       margin: 0 0 0px 0;
	padding: 10px 15px 10px 15px;
	position:relative;
	_position:;
}

/* facet container for range slider */
div.slide-range-wrapper { padding: 3px 10px; }
#slider-range{margin:3px 5px 0;}
.facet-container-ams{
    display: none;
    height: 85px;
    margin: 0;
    padding: 0;
}

.facet-list-ams {
    background-color: #FCFCFC;
    display: block;
    height: 65px;
    list-style-type: none;
    padding: 0;
    text-transform: none;
}

/* date range input field */
.facet-container .date-panel input[type="text"]	{
	font-size: 20px;
	margin: 0 5px 0 0;
	padding: 2px;
	width: 150px;
      }

/*  faceted navigator - advanced search button> icon
 *
 *  transfer to icon_sprite.png
 */
#advanced span span {
	background: url(../images/icons/icon-search.gif) no-repeat 10% 50%;
	font-size: 7px;
	padding: 5px .5em 4px 9px;
}

/*  facet-dialogue
 *  lists within one dimension
 */
.facet-dialogue {
	border-bottom: 1px solid #DDD;
	border-left: 1px solid #EEE;
    font-family: 'Droid Sans', Arial, sans-serif;
	float:left;
	margin: 0;
    position:relative;
    width: 100%;
}
	.facet-dialogue li.title {
		background-color:#494949;
		color:#EFEFEF;
		font-size: 10px;
		letter-spacing: 1px;
		list-style-type:none;
		padding: 3px 7px 3px 10px;
		text-transform: uppercase;
	}
	.facet-dialogue li.title div {
		color:#7ee6f5;
		float:right;
        letter-spacing: -0.2;
		margin: 0 1px 0 1px;
        padding:0 2px;
		text-transform: uppercase;
        width: auto;
	}
	.facet-dialogue li.title div.selected, .facet-dialogue li.title .selected {
		background:#7ee6f5;
		color:#225f68;
        float:right;
        letter-spacing: -0.2;
        margin: 0 1px 0 1px;
		padding:0 2px;
		text-transform: uppercase;
        width: auto;
	}
	.facet-dialogue li.title div a { color:#12d1ed; }

/* facet> select all/none */
.facet-dialogue li div.select-all, .facet-dialogue li .select-all {
    background: url(../images/icons/icon-sprite.png) no-repeat 0 -1000px;
    float: right;
    margin:0 0px 0 4px;
    width:6px;
    *width:10px;
    _width:10px;
}
.facet-dialogue li div.select-none, .facet-dialogue li .select-none	{
    background: url(../images/icons/icon-sprite.png) no-repeat -10px -1000px;
    float: right;
    margin:0 0px 0 4px;
    width:6px;
    *width:10px;
    _width:10px;
}


/* facet list items */
.facet-list				{	padding: 0; display:block; list-style-type:none; background-color:#FCFCFC; height: 153px; *height: 140px;overflow: auto; *overflow: scroll; text-transform: none; }
.facet-list li			{	font-size: 10px; cursor: pointer; border-top: 1px solid #fff; padding: 2px 8px;}
/* list item - number of items indicator e.g. MALAYSIA (34) */
.facet-list li span.right					{	float:right; }
/* list item : color when hover */
.facet-list li.inactive 					{	background-color:#e5e5e5; color:#333;} /* denotes not all children are selected */
.facet-list li.active, .facet-list li:hover	{	background-color:#7ee6f5; color:#225f68;} /* denotes all children selected */
.facet-list li.hide							{	display:hide; color:#FFF;}

/* search box + link to advanced search for facet list */
li.facet-list-search, .facet-list-search		{	background:#fff; padding: 0px 6px; list-style-type:none;}
li:hover.facet-list-search	{	background-color:#fff; }
li.facet-list-search input	{	color:#666; font-family:'Droid Sans', Arial, sans-serif; width: 100%; font-size: 10px; margin: 5px 0; padding: 3px 2px; text-transform: uppercase;}
li.facet-list-search label	{	text-transform:lowercase; font-weight: normal;}
li.facet-list-search label a			{	text-decoration:underline; color:#CCC; }
li.facet-list-search label a:hover		{	text-decoration:none; background-color:none;}

/* search box's suggest-like overlay */
#search-overlay{
    background: #fff;
    height:159px;
    *height:160px;
    _height:160px;
    left:0;
    padding: 0 0px;
    position:absolute;
    top:40px;
    *top:39px;
    _top:39px;
    width:100%;
    z-index:9999;
}
    #search-overlay ul{
        background:#fff;
        border: 1px solid #ccc;
        *border: 1px solid #969696;
        _border: 1px solid #969696;
        /*border-bottom: none;*/
        cursor: default;
        list-style: none;
        margin: 0 6px;
        padding: 5px 0 0 0;
    }
    #search-overlay ul li{
    }
    #search-overlay ul li a{
        /*border-bottom: 1px solid #ccc;
        *border-bottom: 1px solid #969696;
        _border-bottom: 1px solid #969696; */
        color: #555;
        display: block;
        font-size: 8pt;
        font-weight: bold;
        letter-spacing: normal;
        padding:3px 3px 3px 6px;
        text-transform: uppercase;
        *width:100%;
        _width:100%;
    }
    #search-overlay ul li a:hover{
        background: #7ee6f5;
        color: #000;
    }

/*  facet navigation submit button */
.facet-submit {
    background:#f9f9f9 url(../images/icons/icon-sprite.png) repeat-x 0px -215px;
    *background:#f9f9f9 url(../images/icons/icon-sprite.png) repeat-x 0px -218px;
    _background:#f9f9f9 url(../images/icons/icon-sprite.png) repeat-x 0px -218px;
    border-color: -moz-use-text-color #E1E1E1;
    border-left: 1px solid #E1E1E1;
    border-right: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    border-width: 1px;
    clear:both;
	padding:8px 12px;
    *padding:6px 12px 7px 12px;
    _padding:6px 12px 7px 12px;
    text-align:right;
	/*
    -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;
    */
}

/*  facet>dropdown  */
.facet-selection {
	font-size: 8px;
	letter-spacing: 1px;
	list-style:none;
	margin:0;
	padding:0;
	text-transform: uppercase;
	width:auto;
}
.facet-selection li {
	border-left:1px solid #DEDEDE;
	display:inline;
	float:right;
	list-style:none;
	list-style-position:outside;
	padding: 7px 5px 8px 5px;
	position:relative;
}
.facet-selection li a {
	display: block;
	text-decoration:none;
	white-space: nowrap;
	outline:0;
}
#facet-selection-tag {
	background: url(../images/icons/icon-sprite.png) no-repeat 4px -1013px;
	padding: 7px 10px 8px 20px;
}
/* tag drop-down selection */
.facet-tag {
	background-color:#EFEFEF;
	border:1px solid #E1E1E1;
	display:none;
	float:right;
	font-size:9px;
	margin:8px 0;
	padding:0;
	position:absolute;
	right:0;
	text-transform:none;
	-webkit-border-top-left-radius: 7px;-webkit-border-bottom-left-radius: 7px;-webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-topleft: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px;
	z-index:1000;
}

.facet-tag li {
	border:none;
	padding:0;
	width: 200px;
}

.facet-tag li a {
	color:#999;
	padding: 5px 25px;
}

/* option1: add tag */
.facet-tag-add a {
	background: url(../images/icons/icon-sprite.png) no-repeat 8px -1060px;
	border-bottom: 1px solid #E1E1E1;
}

.facet-tag-add a:hover {
	background-color:#E1E1E1;
	color:#000;
	-webkit-border-top-left-radius: 7px; -moz-border-radius-topleft: 7px;
}

/* option2: edit tags */
.facet-tag-edit a {
	background: url(../images/icons/icon-sprite.png) no-repeat 8px -1105px;
	border-bottom: 1px solid #E1E1E1;
}

.facet-tag-edit a:hover {
	background-color:#E1E1E1;
	color:#000;
}

/* option3: browse tags */
.facet-tag-browse .title {
	background: url(../images/icons/icon-sprite.png) no-repeat 8px -1150px;
	color:#000;
	display: block;
	padding: 5px 25px;
}

.facet-tag-browse ul {
	height: 120px;
	overflow-y: scroll;
}

.facet-tag-browse ul li input {
	height:8px;
	margin-left:25px;
}

.facet-tag-browse button {
	font-size: 9px;
	padding:5px 0 10px 25px;
}

/*  only for mockups */
/*  investigate which of these #ids are still relevant  */
#product-category .facet-dialogue	{	width:49.9%;}
#product-cate .facet-dialogue		{	width:33%;}
#location .facet-dialogue			{	width:16.5%;}
#channel .facet-dialogue			{	width:24.9%;}
#tag .facet-dialogue				{	width:49.9%;}
/*#left_side_product .facet-dialogue	{	width:33.2%;}
#left_side_location .facet-dialogue	{	width:16.5%;}
#left_side_channel .facet-dialogue	{	width:24.8%;}*/



/* =15	Advanced Search
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#advanced-container			{	padding:10px;}
#advanced-container h3		{	font-size: 16px; color:#0089b7; line-height: 13px;}
#advanced-container h4		{	font-size: 9px; color:#0089b7; font-family: Tahoma; text-transform: uppercase; font-weight: normal; letter-spacing: 1px;}
#advanced-container .clear 	{	clear:both; padding: 0 0 10px 0;}
#advanced-container label	{	margin:0; padding:0; }

#advanced-search 	{
	background: #e2f4ff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	padding: 10px 15px;
	margin: 10px 0;
	position: relative;
	color:#0089b7;
}
#advanced-search p {
	font-style:italic;
	font-size: 11px;
	padding: 3px 0;
}
/*	advanced search > input box */
#advanced-input {
    background-color: #ffffff;
	background-color: rgba(255,255,255,0.5);
	padding: 1px;
}
#advanced-input input {
	outline: 0;
	border: 1px solid #dae2e9;
	background: #f9f9f9 url(../images/icons/icon-sprite.png) no-repeat 5px -1255px;
	color: #363d42;
	width:100%;
	padding: 5px 38px 5px 35px;
}
#advanced-input ul		{ float:right; }
#advanced-input ul li	{ display:block; }


/* drop down menu for granularity icons */
#advanced-search .granularity-button			{	list-style-type:none; font-size: 12px; margin:-39px 0 0 0; z-index:1000; width:55px; background-color:#F2F2F2; padding: 6px 0 5px 0; border: 1px solid #DEDEDE;}
#advanced-search .granularity-button li			{	cursor:pointer; background: url(../images/icons/icon-expand.png)no-repeat 90% 50%; border:none;}

/* drop down */
#advanced-search .granularity-option			{	position:absolute; margin: 30px 0 0 -1px; padding: 0 5px 0 6px; list-style-type:none; border:1px solid #DEDEDE; background-color:#FCFCFC; -webkit-border-bottom-left-radius: 7px;-webkit-border-bottom-right-radius: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; }
#advanced-search .granularity-option li			{	display:block; background-image: none; padding:6px 0 3px 0; border:none; border-bottom: 1px solid #DEDEDE; }
#advanced-search .granularity-option li a		{	color:#AAA; }
#advanced-search .granularity-option li a:hover	{	color:#333; }
#advanced-search .granularity-option li.last	{	border:none; }

label.advSearch				{	background: url(../images/icons/icon-search.gif) no-repeat center left; padding-left:6px; letter-spacing:0;}

#advanced-result			{	}
#advanced-result .adv-item	{	background-color:#e2f4ff; border: 1px solid #00a4dc; cursor:pointer;
								margin: 2px; padding: 2px 8px; display:block; float:left;
								-webkit-border-radius: 2px;	-moz-border-radius: 2px; }
#advanced-result .inactive	{	background-color:#efefef; border: 1px solid #555; cursor:pointer;
								margin: 2px; padding: 2px 8px; display:block; float:left;
								-webkit-border-radius: 2px;	-moz-border-radius: 2px; }

#advanced-result .x			{	background: url(../images/icons/icon-sprite.png) no-repeat -40px -990px;
								padding: 0 2px 0 8px; display:inline; float:right; cursor: pointer;}

#advanced-result .collapse	{	font-size: 10px; text-transform: uppercase; padding: 4px;}
#advanced-result .collapse li	{	list-style-type:none; cursor:pointer }

#advanced-result .datatable-container			{	width:100%; margin:0; }
#advanced-result table.dt-display				{	border: 1px solid #ccc; width: 100%; }
#advanced-result table.dt-display td.main-col	{	text-align:left; }

.adv-item em {
	background: #333;
	color:#fff;
	-webkit-border-radius: 3px;	-moz-border-radius: 3px;
	text-align: center;
	font-size:9px;
	padding: 8px 10px;
	font-style: normal;
	z-index: 2;
	position:absolute;
	margin:-45px 0 0 -10px;
	display:none; }

#advanced-option			{	}
#advanced-option label		{	float:left; width:30%; clear:right; display:block;}
#advanced-option span		{	display:block; }
#advanced-container	.title	{	color: #0089b7; font-size:15px; line-height:20px; font-weight:bold;}


/* panel containers - mtd, ytd */
#panel-mtd	{   height: 80px; display: none; background-color:#F2F2F2; padding: 10px 15px; position:relative; _position:;}
#panel-ytd	{	height: 80px; display: none; background-color:#F2F2F2; padding: 10px 15px; position:relative; _position:;}
#panel-mtd input[type="text"], #panel-ytd input[type="text"], #panel-float input[type="text"]	{   padding: 2px; font-size: 20px; margin: 0 5px 0 0; width: 150px; }

/* panel containers - mtd, ytd */
#panel-float	{
    background: -moz-linear-gradient(top, #fff, #ddd 40%, #fff);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.40, #ddd), to(#fff));
    background-color: #f2f2f2;
    border: 2px solid #0472ec;
    -moz-border-radius: 6px;
    -webkit-box-shadow: 0px 3px 9px #777;
    -moz-box-shadow: 0px 3px 9px #777;
    box-shadow: 0px 3px 9px #777;
    height: ;
    padding: 10px 15px;
    width: auto;
    z-index: 1200;
}
    #panel-float .close{
        border-bottom: 1px solid #222;
        color: #222;
        cursor: pointer;
        margin: 0 10px;
        padding:0 0px;
    }

.float-checkbox-list{
}

    .float-checkbox-list ul{
        border-bottom: 1px solid #ccc;
        list-style:none;
        margin: 0 0 5px 0;
        padding: 0 0 5px 0;
    }
    .float-checkbox-list label{
        display: block;
    }
    .float-checkbox-list ul li{
        font-size: 11px;
        margin: 0 0 5px 0;
        text-transform: none;
    }
    .float-checkbox-list ul li:hover{
        background: #fff;
    }


/* =16	Datepicker
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  date picker facet container  */
.date-range {
	list-style:none;
}
	.date-range li,
	.date-range img {
		vertical-align: middle;
	}
	.date-range label {
		display: block;
		font-size: 130%;
		line-height: 160%;
	}

	.date-range span {
		float: left;
	}
		.date-range span label {
			clear: both;
			color: #444;
			display: block;
			font-size: 8px;
			text-align: left;
			text-transform: uppercase;
		}
		.date-range span.small, span.small {
			color: #666 !important;
			float: none;
			font-size: 9px;
			font-style: normal;
			line-height: 25px;
			vertical-align: middle;
		}
        .date-range em { /* (extra label on no. of working days */
            color: #666;
            font-size: 12px;
            font-style: normal;
            font-weight: bold;
            height: 31px;
            line-height: 31px;
            _margin:-5px 0 0 0;
            *margin:-5px 0 0 0;
            text-transform: none;
        }
		div.small {
			color: #666 !important;
			float: none;
			font-size: 9px;
			font-style: italic;
            height:25px;
			line-height: 25px;
			vertical-align: middle;
		}
    .date-range-error{
        background:#c00;
        color: #FFD4D4;
        display:none;
        font-size: 9px;
        padding: 2px 5px;
        text-align: center;
        text-transform: uppercase;
        width: 295px;
        position:absolute;
        top:18px;
    }

.view-one{
    background:url(../images/icons/icon-sprite.png) -142px -768px;
    height:17px;
    width:21px;
}
.view-two{
    background:url(../images/icons/icon-sprite.png) -142px -858px;
    height:17px;
    width:21px;
}

/*  default date range icons
 *  by day | week | wtd | month | mtd | year | ytd
 */
.duration-picker {
	font-size: 7px;
	text-transform: uppercase;
}
	.duration-picker li	{
		display: block;
		float: left;
		list-style-type: none;
		text-align: center;
	}

	.duration-picker li a {
		display: block;
		border: 0px solid #eaeaea;
		padding: 20px 0 2px 0;
		margin-left: -1px;
		width: 30px;
	}
	*html .duration-picker li 	{ margin: -10px 0 0 0; }
	*html .duration-picker li a	{ padding: 15px 0 3px 0; }

	.duration-picker li a:hover 	{ color:#1b54ff; cursor: pointer; }

	.duration-picker .hour a		{	background:url(../images/icons/icon-sprite.png) no-repeat 0 4px;}
	.duration-picker .hour a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat 0 -26px;}

	.duration-picker .day a			{	background:url(../images/icons/icon-sprite.png) no-repeat -30px 4px;}
	.duration-picker .day a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -30px -26px;}

	.duration-picker .week a		{	background:url(../images/icons/icon-sprite.png) no-repeat -60px 4px;}
	.duration-picker .week a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -60px -26px;}
	.duration-picker .wtd a			{	background:url(../images/icons/icon-sprite.png) no-repeat -90px 4px;}
	.duration-picker .wtd a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -90px -26px;}

	.duration-picker .month a		{	background:url(../images/icons/icon-sprite.png) no-repeat -120px 4px;}
	.duration-picker .month a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -120px -26px;}
	.duration-picker .mtd a			{	background:url(../images/icons/icon-sprite.png) no-repeat -150px 4px;}
	.duration-picker .mtd a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -150px -26px;}

	.duration-picker .year a		{	background:url(../images/icons/icon-sprite.png) no-repeat -180px 4px;}
	.duration-picker .year a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -180px -26px;}
	.duration-picker .ytd a			{	background:url(../images/icons/icon-sprite.png) no-repeat -210px 4px;}
	.duration-picker .ytd a:hover	{	background:#cfedff url(../images/icons/icon-sprite.png) no-repeat -210px -26px;}

/* UI test - YUI date picker */
#dateCurrent		{	font-size: 18px; background: url(../images/icons/icon-expand.png) no-repeat center right;
						padding: 12px 18px; text-align: right; float:right; }

/*  YUI calendar container
 *  used in date range picker
 */
#calContainer,
#calContainer2,
#calContainer3,
#calContainer4 {
	clear: both;
	display: none;
	z-index: 9999;
	float: left;
	position: absolute;
}
	#calContainer table,
	#calContainer2 table,
	#calContainer3 table,
	#calContainer4 table {
		text-align: left;
		width:auto;
	}

#calContainer {
	top: 80px;
}

#calContainer2 {
	top: 80px;
	_top: 340px;
	*top: 340px;
	z-index: 999;
}
#calContainer3 {
	top: 80px;
	_top: 418px;
	*top: 418px;
	z-index: 999;
}

#calContainer4 {
	top: 113px;
	right: 36px;
}

*html #calContainer { width: 100%; }

/* =17   Tag 10/29/2009
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*  tag cloud  */
.tag-result {
	border-right:1px solid #CCC;
	display:block;
	float:left;
	padding-right: 10px;
	width:24%;
}

.tag-result div	{
	display:inline;
	margin-right: 5px;
	padding: 3px 5px;
}

.tag-result h4 {
	font-size: 9px; color:#0089b7;
	font-family: Tahoma;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 1px;
}

.tag-result div div:hover { background-color:#e2f4ff; }
.tag-result .one	{	font-size: 100%; }
.tag-result .two	{	font-size: 130%; }
.tag-result .three	{	font-size: 160%; }
.tag-result .four	{	font-size: 190%; }
.tag-result .five	{	font-size: 220%; }
.tag-result .six	{	font-size: 250%; }

.tag-result .x {
	background: url(../images/icons/icon-sprite.png) no-repeat -40px -995px;
	cursor: pointer;
	display: inline;
	padding: 0 0 0 5px;
}

.tag-result .x span {
	color:#fff;
	font-size: 1px;
	padding: 0;
}

/*  tag list  */
.tag-list {
	margin-left: 25%;
	padding: 0 10px;
}

/* tag list table tag-item */
.tag-item {
	background-color:#EFEFEF;
	display:inline;
	float:right;
	margin: 0 3px;
	padding:2px 5px;
}

.tag-item a.x { float:right; }
.tag-item span {
	float:left;
	padding:0;
	width:5%;
}

.tag { padding: 1px 3px; }

.tag:hover {
	background-color:#1c80fe;
	color:#FFF;
	cursor:pointer;
}

.tag-add {
	color: #1c80fe;
	cursor:pointer;
	font-size: 140%;
	font-weight:bold;
}

.tag-add:hover	{ color:#db0021; }

/*  tag management page  */

/*  tag header>
 *  displays number of tags and sort tags: alphabetically | by list | by cloud
 */
.tag-header {
	background-color:#CFCFCF;
	margin: -25px 0 0 0;
	padding: 5px;
}
	.tag-header div		{ display:inline; }
	.tag-header a		{ color:#fff; text-decoration:underline; }
	.tag-header a.active{ color:#555; }

/*  tag header> total tags  */
.tag-total {
	background-color:#555;
	color:#CCC;
	padding: 5px 8px;
}

/*  tag header> sort tag options  */
.tag-sort		{	float: right; }
.tag-sort img	{	margin:0 3px 0 0; }


/* =18  IE Hacks
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/*	facet-dialogue */
*html .facet-dialogue li.title span			{	margin:-12px 0 0 0; padding: 0 3px;}
*html .facet-dialogue-view					{	margin:-15px -8px 0 0; }
*html .facet-dialogue-view li.select-all,
*html .facet-dialogue-view li.select-none 	{	height: 15px; }


/* =19  Scorecards
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#scorecards{
    padding:10px 20px 10px 20px;
}
    #scorecards .dt-contain{
        padding: 10px 0 0 0;
    }
    #scorecards .dt-contain a{
        border-bottom: none;
    }
        #scorecards .dt-contain a:hover{
            border-bottom: none;
            text-decoration: none;
        }

    #scorecards .panel-spacer{
        display:block;
        float:left;
        width:2%;
        *width:2%;
        _width:2%;
    }
    #scorecards table{
        border-collapse: separate;
        border-right: none;
    }
    #scorecards table td{
        border-bottom: 1px solid #e9e9e9;
    }
    #scorecards table tr.last td{
        border-bottom: none;
    }
    #scorecards table.dt-display thead th{
        padding:5px;
    }
    #scorecards table.dt-display td.main-col{
        background:#fff;
        border-bottom: 1px solid #e9e9e9;
        width:200px;
    }
    #scorecards table.dt-display tr.last td.main-col{
        border-bottom: none;
    }
    #scorecards table.dt-display tr.total td{
        border-bottom: none;
        border-top:1px solid #000;
        background: #f1f1f1;
        color: #000;
        font-weight: bold;
    }
    #scorecards table.dt-display tr.total td.main-col{
        background: #f1f1f1;
        border-top:1px solid #000;
    }
    #scorecards h1{
        border-bottom: 0px solid #222;
        font-size: 20px;
        font-weight: normal;
        margin: 0 0 0px 0;
        padding:20px 10px 10px 10px;
    }
    #scorecards h2{
        display:block;
        font-size: 12px;
        font-weight: bold;
        margin:10px 0 0 0;
        padding:10px 10px 10px 10px;
        width: 100%;
    }

.date-panel{
    background:#f2f2f2;
    border-bottom:1px solid #e1e1e1;
    font-size: 12px;
    letter-spacing: normal;
    padding:10px 10px 10px 32px;
    text-transform: none;
}
    .date-panel .label{
        color: #444444;
        font-size: 8px;
        line-height: 160%;
        text-transform: uppercase;
    }
    .date-panel div{
        padding: 0 10px 0 0;
    }

#scorecards table.dt-display td.below, #scorecards table.dt-display tr.total td.below{
    background: -moz-linear-gradient(top, #ef3a42, #ED1B24 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef3a42), color-stop(0.50, #ED1B24));
    background-color: #ED1B24;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #f25a60;
}

#scorecards table.dt-display td.safe, #scorecards table.dt-display tr.total td.safe{
    background: -moz-linear-gradient(top, #7ac251, #70BE44 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ac251), color-stop(0.50, #70BE44));
    background-color: #70BE44;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #97d076;
}

#scorecards table.dt-display td.over, #scorecards table.dt-display tr.total td.over{
    background: -moz-linear-gradient(top, #ffe533, #FFDE00 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe533), color-stop(0.50, #FFDE00));
    background-color: #FFDE00;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #fff6bb;
}

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

table.dt-display tr td.fail-fill, .dt-display tbody tr.odd:hover td.fail-fill, .dt-display tbody tr.even:hover td.fail-fill{
    background: -moz-linear-gradient(top, #c7c7c7, #eaeaea 65%, #ddd);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c7c7c7), color-stop(0.65, #eaeaea), color-stop(0.65, #ddd));
    background-color: #eaeaea;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #f25a60;
}

table.dt-display tr td.success-fill, .dt-display tbody tr.odd:hover td.success-fill, .dt-display tbody tr.even:hover td.success-fill{
    background: -moz-linear-gradient(top, #7ac251, #70BE44 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ac251), color-stop(0.50, #70BE44));
    background-color: #70BE44;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #97d076;
}

table.dt-display tr td.pending-fill, .dt-display tbody tr.odd:hover td.pending-fill, .dt-display tbody tr.even:hover td.pending-fill{
    background: -moz-linear-gradient(top, #ffe533, #FFDE00 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffe533), color-stop(0.50, #FFDE00));
    background-color: #FFDE00;
    color: #333;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    text-shadow: 0 1px 0 #fff6bb;
}

table.dt-display td.below, table.dt-display td.fail{
    /*
    background: -moz-linear-gradient(top, #ef3a42, #ED1B24 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef3a42), color-stop(0.50, #ED1B24));
    background-color: #ED1B24;
    */
    border-bottom: 2px solid #ED1B24;
    color: #ED1B24;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    /*text-shadow: 0 1px 0 #f25a60;*/
}
    td.below a{
        border:none;
        color:#FF0033;
        display: block;
        height: 100%;
        width:100%;
    }

table.dt-display td.safe, table.dt-display td.success{
    /*
    background: -moz-linear-gradient(top, #7ac251, #70BE44 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #7ac251), color-stop(0.50, #528d31));
    background-color: #70BE44;
    */
    border-bottom: 2px solid #70BE44;
    color: #70BE44;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    /*text-shadow: 0 1px 0 #97d076;*/
}
    td.safe a{
        border:none;
        color:#fff805;
        display: block;
        height: 100%;
        width:100%;
    }

table.dt-display td.over, table.dt-display td.pending{
    /*
    background: -moz-linear-gradient(top, #ddc000, #FFDE00 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ddc000), color-stop(0.50, #FFDE00));
    background-color: #FFDE00;
    */
    border-bottom: 2px solid #ddc000;
    color: #ddc000;
    display: table-cell;
    line-height: 24px;
    padding: 0 5px 0 5px;
    /*text-shadow: 0 1px 0 #fff6bb;*/
}
    td.over a{
        border:none;
        color:#32cd32;
        display: block;
        height: 100%;
        width:100%;
    }

/*
over [ #32cd32, #46d246, #5bd75b, #6fdc6f, #84e184, #98e698, #adebad, #c2f0c2, #d6f5d6, #ebfaeb ]
safe [ #fff805, #fff91e, #fff937, #fffa50, #fffb69, #fffb82, #fffc9b, #fffdb5, #fffecd, #fffee6 ]
below [ #ff0033, #ff1947, #ff335c, #ff4c70, #ff6685, #ff7f99, #ff99ad, #ffb3c2, #ffccd6, #ffe6eb ]
*/

/* =20  DataTables
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* DataTables - jquery plugin (general styles) */

.datatable-container {
    *width: 100%;
    margin: 0 20px 20px 20px;
    _width: 100%;
}
#graph-table {
    margin: 20px 0 0 0;
}
.dt-contain {
    *overflow-x: scroll;
    *width: 100%;
    background-color: #fff;
    color: #333;
    font: 10px/1.45em Arial, Helvetica, sans-serif;
    margin: 0 0px 0px 0px;
    overflow-x: auto;
    padding: 0px;
    _overflow-x: scroll;
    _width: 100%;
}
.dt-contain a {
    border-bottom: 1px solid #ccc;
    color: #444444;
    text-decoration: none;
}
.dt-contain a:hover {
    border-bottom: 0px solid #fff;
    color: #000;
    text-decoration: none;
}
.dt-contain ul {
    color: #B0BED9;
}

/* DataTables - jquery plugin (features styles) */
/*
 * DESCRIPTION
 *
 * The styles given here are suitable for the demos that are used with the standard DataTables
 * distribution (see www.datatables.net). You will most likely wish to modify these styles to
 * meet the layout requirements of your site.
 *
 * Common issues:
 *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
 *     no conflict between the two pagination types. If you want to use full_numbers pagination
 *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
 *     modify that selector.
 *   Note that the path used for Images is relative. All images are by default located in
 *     ../images/ - relative to this CSS file.

 * NOTES
   Default names changed for semantics

    #example >> #dt-table
    .display >> .dt-display
    #dt_example >> .dt-contain
*/
/* Custom styles - added by curry */

table.dt-display td.group {
    text-align: left;
}

/* this is for columns to be left-aligned */
table.dt-display td.main-col {
    padding: 5px 5px 5px 5px;
}
table.dt-display td.main-col, .dt-display td.left, table.dt-display td.left, .dt-display .left, table.dt-display .left,
#facebox table.dt-display td.left, #facebox .dt-display td.left, #facebox table.dt-display .left{
    text-align: left;
}

/* temporary hack to set main-col width to 100px */
table.dt-display td.main-col span {
    display: block;
    width: 100px;
}

table.dt-display th.main-title {
    background: #fff;
    cursor: default;
    text-align:;
}
table.dt-display {
    border: 1px solid #ccc;
    width: 100%;
}

/* DataTables features */

/*--- to fix header table issue for IE---*/
*.dataTables_wrapper {
    clear: both;
}
.dataTables_wrapper {
    clear: both;
		position:relative;
}
.dataTables_processing {
    border: 1px solid #ddd;
    color: #999;
    font-size: 11px;
    left: 50%;
    margin-left: -125px;
    padding: 2px 0;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 250px;
}
.dataTables_length {
    float: left;
    line-height: 2;
    margin: 0px 0 0px 0px;
    padding: 0px 10px 0px 0px;
    width:;
}
.dataTables_filter {
    float: left;
    line-height:;
    margin: 0px 0 0px 0px;
    padding: 0px 10px 0px 0px;
    text-align:;
    width:;
}
.dataTables_info {
    float: right;
    line-height: 2;
    width:;
}
.dataTables_paginate {
    color:#888;
    display:block;
    font-size:11px;
    float: right;
    padding: 2px 0 0 0;
    *padding:2px 0 0 0;
    _padding:2px 0 0 0;
    line-height: 16px;
    text-align:;
}
.dataTables_paginate a {
    color: #888;
}
/* DataTables display */

table.dt-display {
    margin: 0 0px;
}
table.dt-display thead, .dt-display thead th.band1, .dt-display thead th.band2, .dt-display thead th.band3 {
    color: #222;
}
table.dt-display thead th, #facebox table.dt-display thead th {
    *cursor: hand;
    background: #fff url(../images/icons/icon-sprite.png) 0px -305px repeat-x;
    border-bottom: 1px solid #ccc;
    border-left: 0px solid #ccc;
    border-right: 1px solid #ccc;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    padding: 5px 20px 5px 5px;
    vertical-align: top;
}
table.dt-display tfoot th, #facebox table.dt-display tfoot th {
    border-right: 1px solid #ccc;
    border-top: 1px solid black;
    color: #000;
    font-weight: bold;
    padding: 5px;
    text-align: right;
}
table.dt-display tr.heading2 td {
    border-bottom: 10px solid #aaa;
}
table.dt-display td, #facebox table.dt-display td {
    border-right: 1px solid #ccc;
    padding: 5px;
    text-align: right;
}
table.dt-display td.center {
    text-align: center;
}

/* DataTables sorting */

table.dt-display thead th.sorting_asc, #facebox table.dt-display thead th.sorting_asc {
    background: #ececec url(../images/DataTables/sort_asc.gif) no-repeat top right;
}
table.dt-display thead th.sorting_desc, #facebox table.dt-display thead th.sorting_desc {
    background: #ececec url('../images/DataTables/sort_desc.gif') no-repeat top right;
}
table.dt-display thead th.sorting, #facebox table.dt-display thead th.sorting {
    background: #ececec url('../images/DataTables/sort_both.gif') no-repeat top right;
}

/* DataTables row classes */
/*
this style is overwritten by the one in style.css
    table.dt-display tr.odd {
	    background-color: #ddffdd;
    }
*/

.dt-contain table tr.odd:hover {
    background-color: #f6f6f6;
}
table.dt-display tr.even {
    background-color: #fff;
}
table.dt-display tr.odd {
    background-color: #edf5ff;
}
tr.even {
    background-color: white;
}

/* Misc */

.top, .bottom {
    background-color: #F5F5F5;
    border: 1px solid #CCCCCC;
    padding: 15px;
}
.top .dataTables_info {
    float: none;
}
.dataTables_empty {
    text-align: center;
}
tfoot input {
    color: #444;
    margin: 0.5em 0;
    width: 100%;
}
tfoot input.search_init {
    color: #999;
}
td.group {
    background: #f9f9f9;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #222;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4;
}
td.details {
    background-color: #d1cfd0;
    border: 2px solid #A19B9E;
}
.example_alt_pagination div.dataTables_info {
    width: 40%;
}
.paging_full_numbers {
    height:;
    line-height:;
    width:;
}
.paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active {
    *cursor: hand;
    /*
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;

    border: 0px solid #aaa; */
    cursor: pointer;
    margin: 0px 0 0 0px;
    padding:2px 4px 0px 4px;
    *padding:2px 4px 0px 4px;
    _padding:2px 4px 0px 4px;
}
.paging_full_numbers a.paginate_button {
    background-color:;
}
    .paging_full_numbers .first{
        background: url(../images/DataTables/sprite-TableTools.png) -34px 2px no-repeat;
        height: 16px;
        width: 16px;
    }
    .paging_full_numbers .previous{
        background: url(../images/DataTables/sprite-TableTools.png) -34px -44px no-repeat;
        height: 16px;
        width: 16px;
    }
    .paging_full_numbers .next{
        background: url(../images/DataTables/sprite-TableTools.png) -34px -90px no-repeat;
        height: 16px;
        width: 16px;
    }
		.paging_full_numbers #popupTable_next.next {
				background: url(../images/DataTables/sprite-TableTools.png) no-repeat scroll -34px -90px transparent !important;
		}
    .paging_full_numbers .last{
        background: url(../images/DataTables/sprite-TableTools.png) -34px -136px no-repeat;
        height: 16px;
        width: 16px;
    }
        .paging_full_numbers a.first:hover, .paging_full_numbers a.previous:hover, .paging_full_numbers a.next:hover, .paging_full_numbers a.last:hover{
            filter: alpha(opacity=50); /* internet explorer    */
        	-khtml-opacity: 0.5;      /* khtml, old safari   */
        	-moz-opacity: 0.5;       /* mozilla, netscape  */
        	opacity: 0.5;           /* fx, safari, opera */
        }


.paging_full_numbers a.paginate_button:hover .first a {
    filter: alpha(opacity=50); /* internet explorer    */
	-khtml-opacity: 0.5;      /* khtml, old safari   */
	-moz-opacity: 0.5;       /* mozilla, netscape  */
	opacity: 0.5;           /* fx, safari, opera */
}

.paging_full_numbers a.paginate_button:hover {
    color:#000;
}
.paging_full_numbers a.paginate_active {
    background-color:;
    color: #000;
    font-weight: bold;
}
table.dt-display tr.even .row_selected td {
    background-color: #B0BED9;
}
table.dt-display tr.odd .row_selected td {
    background-color: #9FAFD1;
}

/* Sorting classes for columns */
/* For the standard odd/even */

tr.odd td.sorting_1, tr.odd td.sorting_2, tr.odd td.sorting_3 {
    background-color: #dbeaff;
}
tr.even td.sorting_1, tr.even td.sorting_2, tr.even td.sorting_3 {
    background-color: #edf5ff;
}
tr.odd .gradeA td.sorting_1 {
    background-color: #c4ffc4;
}
tr.odd .gradeA td.sorting_2 {
    background-color: #d1ffd1;
}
tr.even .gradeA td.sorting_1 {
    background-color: #d5ffd5;
}
tr.even .gradeA td.sorting_2 {
    background-color: #e2ffe2;
}
tr.odd .gradeC td.sorting_1 {
    background-color: #c4c4ff;
}
tr.odd .gradeC td.sorting_2 {
    background-color: #d1d1ff;
}
tr.even .gradeC td.sorting_1 {
    background-color: #d5d5ff;
}
tr.even .gradeC td.sorting_2 {
    background-color: #e2e2ff;
}
tr.odd .gradeX td.sorting_1 {
    background-color: #ffc4c4;
}
tr.odd .gradeX td.sorting_2 {
    background-color: #ffd1d1;
}
tr.even .gradeX td.sorting_1 {
    background-color: #ffd5d5;
}
tr.even .gradeX td.sorting_2 {
    background-color: #ffe2e2;
}
tr.odd .gradeU td.sorting_1 {
    background-color: #c4c4c4;
}
tr.odd .gradeU td.sorting_2 {
    background-color: #d1d1d1;
}
tr.even .gradeU td.sorting_1 {
    background-color: #d5d5d5;
}
tr.even .gradeU td.sorting_2 {
    background-color: #e2e2e2;
}

/* Row highlighting example - by default, class 'ex_highlight is appended on the body tag */

.dt-display tbody tr.even td, .dt-display tbody tr.even td.highlighted, .dt-display tbody tr.odd td, .dt-display tbody tr.odd td.highlighted {
    border-bottom: 0px solid #f6f6f6;
}
.dt-display tbody tr.even:hover td, .dt-display tbody tr.even td.highlighted {
    background: #d5effc url(../images/DataTables/hl.png) repeat-x top;
    text-shadow: none;
}
.dt-display tbody tr.odd:hover td, .dt-display tbody tr.odd td.highlighted {
    background: #d5effc url(../images/DataTables/hl.png) repeat-x top;
    text-shadow: none;
}
.dt-control, .dt-control-2, .filter-control-buttons{
    background: url(../images/DataTables/wbg.gif) 0 -1px repeat-x;
    border: 1px solid #ccc;
    border-top: 0px;
    color: #444;
    display: block;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    margin: 0px 0px;
    padding: 0px 10px;
    height: 26px;
    line-height: 26px;
    text-shadow: 0px 1px 0px #fff;
    text-transform:;
    /*
    _margin-top: 6px;
    *margin-top: 6px;
    */
}
.dt-control{
  padding-top:4px;
  *padding-top:4px;
  _padding-top:4px;
  *padding-bottom:4px;
  _padding-bottom:4px;
}

.dt-control-2{
    background: #ECECEC;
    border-bottom: none;
    border-top: none;
  padding:2px 10px;
  *padding-top:4px;
  _padding-top:4px;
  *padding-bottom:4px;
  _padding-bottom:4px;
}

.dt-control .filter, .dt-control .filter2, .dt-control .filter3, .dt-control .filter4, .dt-control .filter5 {
    cursor: pointer;
    float: left;
}
    .dt-control .filter{
        background: url(../images/DataTables/sprite-TableTools.png) -32px -184px no-repeat;
        height: 20px;
        width: 16px;
        *width: 26px;
        _width: 26px;
    }
        .dt-control div.filter:hover{
            filter: alpha(opacity=50); /* internet explorer    */
        	-khtml-opacity: 0.5;      /* khtml, old safari   */
        	-moz-opacity: 0.5;       /* mozilla, netscape  */
        	opacity: 0.5;           /* fx, safari, opera */
        }

.dt-control-2 .remove-filter {
    cursor: pointer;
    margin-left: 20px;
    float: right;
}

.filter-control-buttons {
    overflow: hidden;
}

.filter-control-buttons .submit-button {
    cursor: pointer;
    float: left;
    margin: 0 5px;
}

.filter-control-buttons .add-button {
    cursor: pointer;
    float: left;
    margin: 0 5px;
}
/* this was used in the pagination label */
.sep-right {
    border-right: 1px solid #bbb;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    padding-right: 10px;
    *padding-right: 10px;
    _padding-right: 10px;
}

/* controls the style for table breadcrumbs */
.table-crumbs {
    color: ;
    /* display: block;
    float: left;
    width: 100%; */
    margin: 0px 0px;
    padding: 0px 5px;
}
.table-crumbs #table-title {
    color:;
    font-size: 11px;
    font-weight: bold;
    line-height: 40px;
    margin: 0px 0px 0px 0px;
    padding: 0 0px 0px 0px;
    width: 100%;
}
.table-crumbs span{
    border-right: 1px solid #d7d7d7;
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
}
.table-crumbs .band1, .table-crumbs .band2, .table-crumbs .band3{
    border-right:none;
}
    .table-crumbs .band1 {   /*safe*/
        color: #70be44;
    }
    .table-crumbs .band2 {   /*over*/
        color: #ddc000;
    }
    .table-crumbs .band3 {   /*below*/
        color: #ed1b24;
    }

/* controls the header style for SKU-site table */
.dt-display th.total, .dt-display th.bold {
    border-bottom: 2px solid #222;
    text-align: left;
}
.dt-display th.band1, #content th.band1 {
    border-bottom: 2px solid #70be44;
    padding-left: 5px;
    text-align: left;
}
.dt-display th.band2, #content th.band2 {
    border-bottom: 2px solid #ffde00;
    padding-left: 5px;
    text-align: left;
}
.dt-display th.band3, #content th.band3 {
    border-bottom: 2px solid #ed1b24;
    padding-left: 5px;
    text-align: left;
}

/* Etieqa: To control all columns we use this */
table td{white-space: nowrap;}
.dataTables_wrapper tbody {
    white-space: nowrap;
}

/* =21   TableTools
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

.DTTT_container {
    background: url(../images/DataTables/wbg.gif) 0 -1px repeat-x;
    border: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 0px solid #ccc;
    display: block;
    margin: 0px 0px;
    padding: 2px 5px;
}
.DTTT_button, #facebox .popup table .DTTT_container .DTTT_button, #facebox table .DTTT_container .DTTT_button, #facebox .DTTT_container .DTTT_button, #facebox #info_table .DTTT_container .DTTT_button {
    display: block;
    float: left;
    margin: 0;
    position: relative;
    height: 25px;
    width: 25px;
}
.DTTT_button_csv {
    background: url(../images/DataTables/sprite-TableTools.png) 3px -127px no-repeat;
    border: 0px solid #f0f0f0;
}
.DTTT_button_csv:hover, #facebox .DTTT_button_csv:hover{
    background: url(../images/DataTables/sprite-TableTools.png) 4px -192px no-repeat;
}
.DTTT_button_xls {
    background: url(../images/DataTables/sprite-TableTools.png) 3px -391px no-repeat;
    border: 0px solid #f0f0f0;
}
.DTTT_button_xls:hover, #facebox .DTTT_button_xls:hover{
    background: url(../images/DataTables/sprite-TableTools.png) 4px -456px no-repeat;
}
.DTTT_button_clipboard {
    background: url(../images/DataTables/sprite-TableTools.png) 3px 8px no-repeat;
    border: 0px solid #f0f0f0;
}
.DTTT_button_clipboard:hover, #facebox .DTTT_button_clipboard:hover {
    background: url(../images/DataTables/sprite-TableTools.png) 4px -60px no-repeat;
}
.DTTT_button_print {
    background: url(../images/DataTables/sprite-TableTools.png) 3px -259px no-repeat;
    border: 0px solid #f0f0f0;
}
.DTTT_button_print:hover, #facebox .DTTT_button_print:hover {
    background: url(../images/DataTables/sprite-TableTools.png) 4px -324px no-repeat;
    cursor: pointer;
}
.DTTT_PrintInfo {
    -moz-border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    background-color: #3f3f3f;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    color: white;
    height: 150px;
    left: 50%;
    margin-left: -200px;
    margin-top: -75px;
    opacity: 0.9;
    padding: 10px 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 400px;
}
.DTTT_PrintInfo h6 {
    font-size: 28px;
    font-weight: normal;
    line-height: 28px;
    margin: 1em;
}
.DTTT_PrintInfo p {
    font-size: 14px;
    line-height: 20px;
}

.DTTT_button_swap {
    background: url(../images/DataTables/sprite-TableTools.png) 0px -526px no-repeat;
    border: 0px solid #f0f0f0;
}
.DTTT_button_swap:hover, #facebox .DTTT_button_swap:hover{
    background: url(../images/DataTables/sprite-TableTools.png) 1px -591px no-repeat;
}

/* =22   Horizontal bar sparkline
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

.hori-sparkline-wrapper, .dt-contain .hori-sparkline-wrapper {
    position:;
    width: 100%;
}
.hori-sparkline, .dt-contain .hori-sparkline {
    height: 12px;
    margin: 2px 0px 0px 0;
    position:;
    width: 160px;
}
.hori-sparkline ul {
    display: block;
    font-size: 11px;
    list-style: none;
    width: 100%;
}
.hori-sparkline ul li, .hori-sparkline .target {
    height: 12px;
}

/* general link styles */
.hori-sparkline ul li.sband1 a, .hori-sparkline ul li.sband2 a, .hori-sparkline ul li.sband3 a,
.hori-sparkline ul li.sku-band1 a, .hori-sparkline ul li.sku-band2 a, .hori-sparkline ul li.sku-band3 a {
    display: none;
    margin: 2px;
}
.hori-sparkline ul li.sband1 a:hover, .hori-sparkline ul li.sband2 a:hover, .hori-sparkline ul li.sband3 a:hover {
    background: #333;
    color: #fff;
}

/* SKU healthy */
.hori-sparkline ul li.sku-band1{
  float: left;
  background: #159e31;
}

/* SKU warning */
.hori-sparkline ul li.sku-band2{
  float: left;
  background: #53db50;
}

/* SKU risky */
.hori-sparkline ul li.sku-band3{
  float: left;
  background: #c5ffcb;
}

/* red */
.hori-sparkline ul li.sband3 {
    border-left: 3px solid #222;
    float: left;
    text-align: left;
    width: 49%;
}
.hori-sparkline ul li.sband3 a {
    background:;
    color:;
    display:;
}
.hori-sparkline ul li.sband3 ul li {
    background: #ed1b24;
    float: left;
}

/* yellow and green */
.hori-sparkline ul li.positive {
    float: left;
    text-align: right;
    width: 49%;
}

/* yellow */
.hori-sparkline ul li.sband2 {
    background: #ffde00;
    float: right;
}
.hori-sparkline ul li.sband2 a {
    color:;
}

/* green */
.hori-sparkline ul li.sband1 {
    background: #70be44;
    float: right;
}
.hori-sparkline ul li.sband1 a {
    color:;
}
.hori-sparkline-title ul {
    list-style: none;
}
.hori-sparkline-title ul li {
    *margin: 0 -8px 1px 0;
    border-right: 2px solid #ccc;
    color: #999;
    font-size: 9px;
    font-weight: normal;
    height: 16px;
    line-height: 16px;
    margin: 0 -9px 1px 0;
    padding: 0px 10px 0 0;
    text-transform: uppercase;
    _margin: 0 -8px 1px 0;
}

/* =23   Inline labels on facet
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.label-a{
    color: #1c80fe;
    font-weight: bold;
    padding: 0 10px;
}

.label-error{
    background:#c00;
    color: #FFD4D4;
    font-weight: bold;
    padding: 0 10px;
}

/* =23   Highcharts
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
#highcharts-container{
    height: 478px;
    width: 100%;
    margin: 0 auto;
}

#chart-option-box {
    -moz-border-radius: 6px;
    background-color: #efefef;
    background-color: rgba(239,239,239,0.9);
    -webkit-border-radius: 6px;
    border: 2px solid #222;
    -webkit-box-shadow: rgba(0, 0, 0, .3) 1px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, .3) 1px 1px 2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 0px;
    width: ;
    /*position: relative;*/
    display: none;
    margin-left: -10px;
}
    #chart-option-box .close{
        -moz-border-radius-bottomleft: 2px;
        -moz-border-radius-bottomright: 2px;
        -webkit-border-bottom-left-radius: 2px;
        -webkit-border-bottom-right-radius: 2px;
        background: #222;
        color: #fff;
        display: block;
        font-size:11px;
        padding: 2px 10px;
        text-align: right;
        text-decoration:none;
    }
    #chart-option-box ul{
        margin: 0;
        padding: 0;
    }
    #chart-option-box ul li{
        border-top: 1px solid #fff;
        *background-color: #fff;
        _background-color: #fff;
        list-style: none;
    }
    #chart-option-box ul li.first{
        border-top:none;
    }
    #chart-option-box ul li.last, #chart-option-box ul li.last div, #chart-option-box ul li.last div:hover{
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom: none;
    }
    #chart-option-box ul li div{
        text-shadow: 0px 1px 0px #fff;
        border-bottom: 1px solid #e1e1e1;
        color: #333;
        cursor: pointer;
        display: block;
        margin: 0;
        padding: 4px 10px 7px 8px;
        text-decoration: none;
    }
    #chart-option-box ul li div:hover{
        background: -moz-linear-gradient(top, #adeff9, #7ee6f5, #adeff9);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(.0, #adeff9), color-stop(.6, #7ee6f5), to(#adeff9));
        background-color: #7ee6f5;
        color: #000;
        cursor: pointer;
    }
    #chart-option-box ul li.first div:hover{
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
    }
    #chart-option-box ul li div.inactive{
        color: #555;
        *color: #999;
        _color: #999;
        cursor: default;
    }
    #chart-option-box ul li div.inactive:hover{
        background: #efefef;
        *background: #fff;
        _background: #fff;
        *color: #555;
        _color: #555;
    }
        #chart-option-box ul li .zoom-in, #chart-option-box ul li .zoom-out, #chart-option-box ul li .zoom-all, #chart-option-box ul li .view-underlying-data, #chart-option-box ul li .view-stack-graph{
            display:block;
            float:left;
            height:16px;
            width:22px;
        }

        #chart-option-box ul li .zoom-in{
            background: url(../images/icons/icon-sprite.png) no-repeat -214px -770px;
        }
        #chart-option-box ul li .zoom-out{
            background: url(../images/icons/icon-sprite.png) no-repeat -214px -814px;
        }
        #chart-option-box ul li .zoom-all{
            background: url(../images/icons/icon-sprite.png) no-repeat -214px -860px;
        }
        #chart-option-box ul li .view-underlying-data{
            background: url(../images/icons/icon-sprite.png) no-repeat -214px -904px;
        }
        #chart-option-box ul li .view-stack-graph{
            background: url(../images/icons/icon-sprite.png) no-repeat -214px -948px;
        }

    /* for the highcharts tooltip */
    .highcharts-tooltip{
        z-index: 8;
    }
    .highchart-tooltip-xaxis{
        font-size: 12px;
        font-weight: bold;
    }
    .highchart-tooltip-yaxis{
        color: #888;
        font-size: 11px;
        text-transform: uppercase;
    }
    .highchart-tooltip-figure{
        font-size: 16px;
        font-weight: bold;
        padding: 0 5px;
    }
    .highchart-tooltip-option{
        color:#888;
        line-height: 16px;
    }

/* =25   Status dashboard
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.status-ok, .status-disruption, .status-outage, .status-info{
    display: inline-block;
    float: left;
    height: 16px;
    width: 16px;
}

.status-ok{
    background: url(../images/icons/icon-sprite.png) no-repeat -40px -1029px;
}
.status-disruption{
    background: url(../images/icons/icon-sprite.png) no-repeat -40px -1059px;
    cursor: pointer;
}
.status-outage{
    background: url(../images/icons/icon-sprite.png) no-repeat -40px -1089px;
    cursor: pointer;
}
.status-info{
    background: url(../images/icons/icon-sprite.png) no-repeat -40px -1119px;
    cursor: pointer;
}

/* =26   Executive dashboard
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

.column     {	width: 33%; }
.column-full {   width: 100%; }
    .column-full .portlet{
    }

.column{
    float: left;
    padding-bottom: 20px;
}
.column-full{
    float: left;
    padding-bottom: 20px;
}

.portlet {
    border: 1px solid #8A8A8A;
    -webkit-box-shadow: 0px 0px 4px #bbb;
    -moz-box-shadow: 0px 0px 4px #bbb;
    box-shadow: 0px 0px 4px #bbb;
    color: #444;
	margin: 0px 10px 20px 10px;
}

.portlet-add-content a
{
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 47%, #f8b500 48%, #fbdf93 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* webkit */
    background-color: #fceabb; /* old browsers */
    border: 2px solid #ffcc00;
    border-bottom: none;
    color: #663300;

	/* display: block before hiding */
	display: block;
    font-size: 11px;
    font-weight: bold;
    height: 33px;
    line-height: 16px;
    margin: -75px 0 0 0;
    *margin: -70px 0 0 0;
    padding: 4px 0 0 0px;
	/* link stays at same place on page */
	position: fixed;
    right: 46%;

	/* link goes at the bottom of the page */
	top: 100%;
	text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 100px;
    /* link is above all other elements */
	z-index: 998;

    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
*html .portlet-add-content a{
    position: absolute;
}

.portlet-header {
    /*
    background: -moz-linear-gradient(top, #8E9297, #5E656E);
	background: -webkit-gradient(linear, left top, left bottom, from(#8E9297), to(#5E656E));
    background-color: #5E656E;
    */
    background: -moz-linear-gradient(top, #f2f2f2 0%, #f2f2f2 50%, #e1e1e1 51%, #ececec 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(50%,#f2f2f2), color-stop(51%,#e1e1e1), color-stop(100%,#ececec)); /* webkit */
    background-color: #e2e2e2; /* old browsers */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: move;
    font-family: 'Droid Serif', Arial, sans-serif;
	padding: 5px 10px 5px 10px;

}
    .portlet-header a{
        color: #222;
        font-size: 12px;
        font-weight: bold;
        text-shadow: 0px 1px 0px #fff;
    }
        .portlet-header a:hover{
            color: #222;
            text-decoration: underline;
        }

    .portlet-header .ui-icon {
    	float: right;
    }

#portlet-container .options{
    float: right;
}
    #portlet-container .options .maximize, #portlet-container .options .refresh, #portlet-container .options .settings, #portlet-container .add-content,
    #exec-tabs .settings{
        cursor: pointer;
        display: inline-block;
        height: 14px;
        *height: ;
        margin: 0 0px 0 4px;
        padding: 0;
        width: 14px;
        filter: alpha(opacity=40); /* internet explorer */
    	-khtml-opacity: 0.4;      /* khtml, old safari */
	    -moz-opacity: 0.4;       /* mozilla, netscape */
	    opacity: 0.4;           /* fx, safari, opera */
    }
    #portlet-container .options .maximize{
        background: url(../images/icons/icon-sprite.png) no-repeat -242px -772px;
    }
    #portlet-container .options .refresh{
        background: url(../images/icons/icon-sprite.png) no-repeat -242px -862px;
    }
    #portlet-container .options .settings, #exec-tabs .settings{
        background: url(../images/icons/icon-sprite.png) no-repeat -242px -817px;
    }
    #portlet-container .add-content{
        background: url(../images/icons/icon-sprite.png) no-repeat -242px -908px;
    }
    #portlet-container .options span:hover, #exec-tabs span:hover{
        filter: alpha(opacity=100); /* internet explorer */
    	-khtml-opacity: 1.0;      /* khtml, old safari */
	    -moz-opacity: 1.0;       /* mozilla, netscape */
	    opacity: 1.0;           /* fx, safari, opera */
    }

.portlet-panel{
    background: -moz-linear-gradient(top, #ffffff, #e9e9e9, #f9f9f9 ); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#e9e9e9), color-stop(100%,#f9f9f9)); /* webkit */
    background-color: #f9f9f9; /* old browsers */
    border-top: 1px solid #cacaca;
    padding: 10px 20px;
}
    .portlet-panel div{
        padding: 5px 0;
    }
    .portlet-panel .input-controls{
        text-align: right;
    }

.portlet-content {
    background: #fff;
    border-top: 1px solid #8A8A8A;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
	padding: 10px;
}

.ui-sortable-placeholder {
    background: #fafafa;
	border: 2px dotted #333;
    -webkit-box-shadow: 0px 0px 0px #bbb;
    -moz-box-shadow: 0px 0px 0px #bbb;
    box-shadow: 0px 0px 0px #bbb;
	visibility: visible !important;
	height: 100px !important;
}

.ui-sortable-placeholder * {
	visibility: hidden;
}

/* portlet form elements */
#portlet-container .ui-widget input, #portlet-container .ui-widget select, #portlet-container .ui-widget textarea, #portlet-container .ui-widget button {
    cursor: default;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
#portlet-container .ui-widget input[type=text], #portlet-container .ui-widget textarea{
    cursor: text;
    width: 60%;
}

#portlet-container .ui-widget input[type=button]{
    cursor: pointer;
}

#portlet-container label{
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 20%;
}

/**
 * Top Blue Toolbar
**/
#dashboards-menu,
#bookmarks-menu {
  margin-top: 1em;
  margin-right: 1em;
}

.outlet-link {
  text-decoration: underline;
  cursor: pointer;
}