/*font for logo*/
@font-face {
	font-family: 'gothic';
	src: url('/font//gothic.eot');
	src: local('gothic'), url('/font/gothic.woff') format('woff'), url('/font/gothic.ttf') format('truetype');
}

body {
	height: 100%;
}

html, #aspnetForm {
	font-family: Verdana, Tahoma, Arial;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: none repeat scroll 0 0 #FFFFFF;
	overflow: inherit; /* triggers 100% height in Opera 9.5 */
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -310px; /*the bottom margin is the negative value of the footer's height */
}

.push {
	height: 250px; /* '.push' must be the same height as 'footer' */
}


/*footer {
	height: 300px; /* '.push' must be the same height as 'footer' 
}*/


.LoginBtn {
	font-size: small !important;
	font-weight: bold;
	color: darkblue;
}


@media screen and (max-width:58.125em) {


	/*footer {
		height: 680px; /* '.push' must be the same height as 'footer' */
	/*}*/

	.wrapper {
		margin: 0 auto -180px; /*the bottom margin is the negative value of the footer's height */
	}
}

@media screen and (max-width:30em) {
	footer {
		/*height: 900px;  '.push' must be the same height as 'footer' */
		color: #d9eef7;
		/*border: solid 1px #0076a3;*/
		background: #9DA7EC; /* Old browsers */
		/*	background-color:  darkblue;*/
		text-align: left;
	}

	.push {
		height: 230px;
	}

	.wrapper {
		margin: 0 auto -310px auto; /*the bottom margin is the negative value of the footer's height */
	}
}

.footer_pad {
	padding: 10px 0;
}


select {
	font-size: 0.9em;
	font-family: Verdana, Tahoma, Arial;
	font-weight: bold;
}

fieldset {
	border: 1px solid #bfd3ee;
}

#container {
	background: none repeat scroll 0 0 white;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	width: 960px;
	margin: 0 auto;
	min-height: 100%;
	overflow: visible;
}

html #container {
	height: 100%;
}

#LogoText {
	FONT-WEIGHT: bold;
	color: #000099;
	font-family: Verdana, Tahoma, Arial;
	font-size: 24pt;
}

#headertext {
	float: left;
	padding-left: 5px;
	padding-top: 2px;
	font-size: 8pt;
	text-align: left;
	width: 212px;
	font-weight: bold;
	color: #000099;
}

#footer {
	background-color: white;
	width: 960px;
	height: 85px;
	text-align: right;
	margin: -100px auto 0 auto;
	/*margin: 0px auto 0 auto;*/
}

.panelArea {
	border: 1px solid #222222;
	padding: 5px;
	margin: 2px 5px 2px 2px;
	background-color: #eaf1fa;
}

.timeline-img-container {
	/*overflow: auto;*/
	width: 100%;
}

#pg_container {
	min-height: 100%;
	position: relative;
	height: 100%;
}

#pg_body {
	min-height: 100%;
	padding-bottom: 2px;
}

#pg_footer {
	/*position:absolute;*/
	/*height:90px;*/
	width: 100%;
	bottom: 0;
}

div#JavaHolder {
	vertical-align: top;
	text-align: center;
	width: 100%;
	/* height:1%;*/
	position: static;
	overflow: hidden;
}

div#Welcome {
	height: 16px;
}

div#whitebg {
	height: 100%;
}

.hideDiv {
	height: 1%;
	position: static;
	min-height: 1px;
}

.widepg_title {
	font-size: 1.1em;
	font-weight: bold;
	color: #000099;
}

.toolsimg {
	LEFT: 208px;
	WIDTH: 188px;
	POSITION: relative;
	TOP: -8px;
	HEIGHT: 27px;
}

.nav_one_img {
	LEFT: 300px;
	WIDTH: 73px;
	POSITION: relative;
	TOP: -8px;
	HEIGHT: 27px;
}

.nav_two_img {
	left: 195px;
	width: 188px;
	position: relative;
	top: -8px;
	height: 27px;
	text-align: right;
}

.swsconnectimg {
	LEFT: -15px;
	TOP: -15px;
	WIDTH: 200px;
	POSITION: relative;
	HEIGHT: 1px;
	Z-INDEX: 10;
}

.navborder {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 370px;
	/*cursor:pointer;*/
}

.navborder_hover {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 370px;
	BACKGROUND-COLOR: #D3D4FF; /*#DDEEFF;*/
	/*cursor:pointer;*/
}

.navwideborder {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 80%;
	cursor: pointer;
}

.navwideborder_hover {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 800px;
	BACKGROUND-COLOR: #D3D4FF; /*#DDEEFF;*/
	cursor: pointer;
}

.navwideborder_small {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 350px;
	cursor: pointer;
}

.navwideborder_hover_small {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 350px;
	BACKGROUND-COLOR: #D3D4FF; /*#DDEEFF;*/
	cursor: pointer;
}

.navheader1 {
	FONT-WEIGHT: bold;
	color: #000099;
	font-family: Verdana, Tahoma, Arial;
	font-size: 0.9em;
	margin: 0px;
	padding: 0px;
}

.navheader2 {
	color: #000099;
	font-family: Verdana, Tahoma, Arial;
	font-size: 0.8em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

.navtext {
	/*padding-top:4px; */
	margin-top: 2px;
	color: #000000;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.navtextbox {
	font-size: 0.8em;
	color: #000000;
	padding-right: 2px;
	padding-left: 4px;
	padding-bottom: 0px;
	padding-top: 3px;
	margin: 0px;
}

.navpicture {
	border-width: 0px;
	filter: alpha(opacity=100); /* Ignore errors about not existing, this does work, different options are for different browsers*/
	-moz-opacity: 1.0;
	cursor: pointer;
	opacity: 1.0; /* Ignore errors about not existing, this does work, different options are for different browsers*/
}

.navpicture_hover {
	border-width: 0px;
	filter: alpha(opacity=50); /* Ignore errors about not existing, this does work, different options are for different browsers*/
	-moz-opacity: 0.5;
	cursor: pointer;
	opacity: 0.5; /* Ignore errors about not existing, this does work, different options are for different browsers*/
}

.navbanner {
	border: silver 1px solid;
}

.navnews {
	border-right: silver 1px solid;
}

/*************************************************************************************************************************/
/*************************************************************************************************************************/
/*****************************************            LOADING PANEL         **********************************************/
/*************************************************************************************************************************/
/*************************************************************************************************************************/

.loadingpanel_top {
	border: gray 1px solid;
	PADDING-RIGHT: 9px;
	PADDING-LEFT: 9px;
	Z-INDEX: 2147483647;
	BACKGROUND-IMAGE: url(/Images/Icon/spacer.gif);
	PADDING-BOTTOM: 9px;
	PADDING-TOP: 9px;
	BACKGROUND-REPEAT: repeat;
	POSITION: absolute;
	LEFT: 50%;
	/*TOP: 50%;*/
	TOP: 380px;
	/* The following is not an error, this ensure the loadingpanel_top which display animation is always centred in the windows regardless of scrolling or window size*/
	/*top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (documentElement.clientHeight/2) : document.body.scrollTop + (document.body.clientHeight/2));
	LEFT: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + (documentElement.clientWidth/2) : document.body.scrollLeft + (document.body.clientWidth/2));*/
	BACKGROUND-COLOR: white;
	TEXT-ALIGN: center;
}

.loadingpanel_top_300 {
	border: gray 1px solid;
	padding: 10px 6px 6px 6px;
	Z-INDEX: 2147483647;
	BACKGROUND-IMAGE: url(/Images/Icon/spacer.gif);
	POSITION: absolute;
	LEFT: 50%;
	/*TOP: 50%;*/
	TOP: 250px;
	BACKGROUND-COLOR: white;
	TEXT-ALIGN: center;
}

#dashboard_img_latest {
	border: gray 1px solid;
	PADDING-RIGHT: 9px;
	PADDING-LEFT: 9px;
	Z-INDEX: 2147483647;
	BACKGROUND-IMAGE: url(/Images/Icon/spacer.gif);
	PADDING-BOTTOM: 9px;
	PADDING-TOP: 9px;
	BACKGROUND-REPEAT: repeat;
	POSITION: absolute;
	LEFT: 40%;
	/*TOP: 50%;*/
	TOP: 60px;
	/* The following is not an error, this ensure the loadingpanel_top which display animation is always centred in the windows regardless of scrolling or window size*/
	/*top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (documentElement.clientHeight/2) : document.body.scrollTop + (document.body.clientHeight/2));
	LEFT: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + (documentElement.clientWidth/2) : document.body.scrollLeft + (document.body.clientWidth/2));*/
	BACKGROUND-COLOR: white;
	TEXT-ALIGN: center;
}

.memofield {
	height: 150px;
}

/*************************************************************************************************************************/
/*************************************              HEADING SECTION             ******************************************/
/*************************************************************************************************************************/

.SectionHeading {
	background-color: #bfd3ee;
	font-family: Verdana, Tahoma, Arial;
	font-size: 1.4em;
	color: #000099;
	FONT-WEIGHT: bold;
}

.SectionHeadingMedium {
	background-color: #bfd3ee;
	font-family: Verdana, Tahoma, Arial;
	font-size: 14pt;
	color: #000099;
	FONT-WEIGHT: normal;
}

.SectionHeadingSmall {
	background-color: #bfd3ee;
	font-family: Verdana, Tahoma, Arial;
	font-size: 1.1em;
	color: #000099;
	FONT-WEIGHT: normal;
}

/*************************************************************************************************************************/
/*****************************************              HEADING             **********************************************/
/*************************************************************************************************************************/

h1, .heading1 {
	FONT-WEIGHT: bold;
	color: #000099;
	font-family: Verdana, Tahoma, Arial;
	font-size: 1.6em;
}

h2 {
	font-size: medium;
	color: #000099;
	font-style: italic;
	font-weight: bold;
}

/*h4 for IndexRelationship page table header only */
h4 {
	font-size: medium;
	color: #000099;
	/* font-style: italic;*/
	font-weight: bold;
}

.speedwell {
	font-weight: bold;
}

.subexpire_header {
	font-weight: bold;
	font-size: small;
	background-color: red;
	color: white;
}

.warning {
	font-weight: bold;
	font-size: small;
	color: red;
}

.label {
	font-weight: bold;
	font-size: small;
	color: #000099;
}

.A_H2 {
	margin: 1px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-style: normal;
	/*line-height:0;*/
	page-break-after: avoid;
}

.heading2 {
	font-size: medium;
	color: #000099;
	font-style: italic;
	font-weight: bold;
}

.heading3 {
	font-size: small;
	color: #000099;
	font-weight: normal;
	font-style: italic;
}

.BoldText {
	font-weight: bold;
}

.SmallControlText {
	font-size: 0.8em;
	font-family: Verdana, Tahoma, Arial;
	color: Black;
}

.normal {
	font-size: 0.9em;
	font-family: Verdana, Tahoma, Arial;
	color: #000099;
}


.PadSmallTextControl {
	PADDING-BOTTOM: 3px;
	PADDING-TOP: 3px;
}

.linespacing {
	font-size: 0.4em;
}

.HeadingText {
	font-size: 1.4em;
	color: #000099;
}

.HeadingText_Main {
	font-size: 1.4em;
	color: #000099;
}

.SubText {
	font-size: 1.3em;
	color: #000099;
}

.LargeText {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 1.1em;
	color: Black;
}

.LargeText_Main {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 1.3em;
	color: Black;
}

.NormalText {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 1.0em;
	color: Black;
}

.SmallText {
	font-size: 0.8em;
}

#UpdateProgress1 img {
	vertical-align: middle;
	margin: 2px;
}

.mapborder {
	BORDER-RIGHT: #000099 1px solid;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	OVERFLOW: hidden;
	BORDER-LEFT: #000099 1px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #000099 1px solid;
}

.mapbordertop {
	BORDER-RIGHT: #000099 1px solid;
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-TOP: 0px;
	MARGIN: 0px;
	OVERFLOW: hidden;
	BORDER-LEFT: #000099 1px solid;
	PADDING-BOTTOM: 0px;
	BORDER-TOP: #000099 1px solid;
}

.bgpic {
	background-position: right center;
	background-image: url(Images/edtDown.jpg);
	background-repeat: repeat-x;
}

.displayblock {
	display: block;
}

a:link.displayblockblacktext {
	text-decoration: none;
	color: black;
	display: block;
}

a:active.displayblockblacktext {
	text-decoration: none;
	color: black;
	display: block;
}

a:visited.displayblockblacktext {
	text-decoration: none;
	color: black;
	display: block;
}

.CancelButton {
	cursor: pointer;
	padding: 3px;
	font-size: 0.8em;
	font-family: Verdana, Tahoma, Arial;
	color: Black;
}

.ImageDisabled {
	filter: alpha(opacity=25); /* Ignore errors about not existing, this does work, different options are for different browsers*/
	-moz-opacity: 0.25;
	opacity: 0.25; /* Ignore errors about not existing, this does work, different options are for different browsers*/
	cursor: wait;
}

.PositionLabelDown {
	POSITION: relative;
	TOP: 240px;
}

.PositionLabelCenter {
	POSITION: relative;
	left: 25%;
}

.TextAlignCenter {
	TEXT-ALIGN: center;
}

.TextPadding {
	padding: 5px;
}

.HideElement {
	display: none;
	visibility: hidden;
}

.ShowElement {
	display: block;
	visibility: visible;
}

.CMEFuturesGridViewRowHeight {
	height: 20px;
}

.textAreaFix {
	padding-right: 7px;
}

#backgroundPopup {
	display: none;
	position: fixed;
	_position: absolute; /* hack for internet explorer 6*/
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #000000;
	border: 1px solid #cecece;
	z-index: 2;
}

#popupContact {
	display: none;
	position: fixed;
	_position: absolute; /* hack for internet explorer 6*/ /*height: 384px;
	width: 408px;  */
	background: #FFFFFF;
	border: 2px solid #cecece;
	z-index: 3;
	padding: 1px;
	font-size: 1.3em;
	text-align: center;
}

#popupContactClose {
	font-size: 1.4em;
	line-height: 14px;
	right: 6px;
	position: static;
	color: #6fa5fd;
	font-weight: 700;
}

.masterwidth {
	width: 960px;
}

/*** the following part is used to control different divs on master page ***/

#topnav {
	width: 962px;
	margin: 0 auto;
	overflow: hidden;
}

#navbar {
	text-align: right;
}

#leftnav {
	float: left;
	width: 0; /*set the left nar bar width*/
}

#bodyContainer {
	width: 100%; /*would change this if left nav bar needed*/
	height: 1%; /*100%*/
	display: block;
}

#leftpart {
	width: 600px; /*would change this if left nav bar needed*/
	float: left;
	vertical-align: top;
}

#rightpart {
	width: 350px; /*would change this if left nav bar needed*/
	float: right;
}

#bottom_rightpart {
	margin-top: 8px;
	padding: 5px;
	width: 325px; /*would change this if left nav bar needed*/
	float: right;
	/*	height :130px;	*/
}

.buybutton {
	margin: 0 5px;
	float: right;
	Height: 83px;
	Width: 163px;
	background-image: url(/Images/common/buy_button.png);
	background-repeat: no-repeat;
	padding: 0.2em 0.2em .2em 0.2em;
	display: inline-block;
	outline: none;
	cursor: pointer;
	padding-top: 0.8em;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	font-size: 120%;
	font-family: Verdana, Tahoma, Arial;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.WeatherInstallBG {
	background-image: url(/Images/ScreenShot/weatherstn.jpg);
	background-repeat: no-repeat;
	/*background-position: 415px;*/
	background-position: right;
	width: 100%;
}

.WeatherInstallBox {
	padding-right: 320px;
}

a:hover.buybutton {
	color: Black;
}

a:visited.buybutton {
	color: Black;
}

a:link.buybutton {
	color: Black;
}

.buyweatherdata {
	margin: 0 5px;
	float: right;
	Height: 83px;
	Width: 163px;
	BORDER-TOP-STYLE: none;
	BORDER-RIGHT-STYLE: none;
	BORDER-LEFT-STYLE: none;
	BORDER-BOTTOM-STYLE: none;
}

.fp {
	height: 1px;
	border-top: 1px solid rgb(211, 212, 255);
	background-color: rgb(211, 212, 255);
}

.imagespace_top {
	margin-top: 5px;
	margin-bottom: 5px;
	vertical-align: bottom;
}

.imagespace {
	margin: 5px;
}

.imagespace_floatright {
	margin-left: 5px;
	margin-top: 5px;
	margin-right: 5px;
	float: right;
	DISPLAY: block;
	margin-bottom: 15px;
}

.newsboxstyle {
	width: 593px;
}

.colorbox {
	padding: 10px;
	margin-bottom: 5px;
	background-color: #d3d4ff;
	width: 300px;
	float: left;
	border: solid 1px silver;
}

.colorbox2 {
	padding: 10px;
	margin-bottom: 5px;
	background-color: #B9BCF9;
	width: 270px;
	float: right;
	border: solid 1px silver;
}

.msgbox {
	border-right: #002d96 1px solid;
	padding-right: 5px;
	border-top: #002d96 1px solid;
	padding-left: 5px;
	padding-bottom: 5px;
	margin: 5px;
	border-left: #002d96 1px solid;
	padding-top: 5px;
	border-bottom: #002d96 1px solid;
	background-color: #ffd69a;
}

#hr_10 {
	min-height: 100px;
	height: 100px;
	clear: both;
}

.hr_5 {
	height: 50px;
	clear: both;
}

.hr_1 {
	height: 10px;
	clear: both;
}

.hr_1_new_default {
	height: 200px;
	clear: both;
}

.hr_0 {
	height: 4px;
	min-height: 4px;
	clear: both;
}

.msgborder {
	padding: 10px;
	/*background: rgb(211,212,255);*/
}

#cookiemsgbox {
	background-color:#cdd1ff;
	color: blue;


}

.warningmsgbox {
		background-color:#EE4141;
		color: #D7DAEC;
}

#cookiemsgbox, .warningmsgbox {
		background: none repeat scroll 0 0 inherit;
	bottom: 0;
	position: fixed;
	padding: 1em 0;
	/*opacity: 0.8;*/
	width: 100%;
	z-index: 50;
	/*display: none;*/
	display: inline-block;
 
}

.cookiemsg, .warningmsg {
	
	margin: auto;	
	font-size:medium;
	font-family:gothic;
	 max-width: 890px;
	     display: -webkit-box;

}

.cookie_hide{
	display:none!important;
}

.cookie-close-btn {
	background: url(/images/icon/closebtn.png) no-repeat scroll transparent;
	cursor: pointer;
	height: 20px;
	width: 20px;
	
	display: inline-block;
	margin-right: 10px;
	/*vertical-align:top;*/
}
 .warning-close-btn {
	background: url(/images/icon/cross.png) no-repeat scroll transparent;
	cursor: pointer;
	height: 23px;
	width: 24px;

	display: inline-block;
	margin-right: 10px;
	/*vertical-align:top;*/
}

.jlp-cookie-info .cookieright {
	text-decoration: none;
	color: #FFF;
	float: right;
}

.noticemsgbox {
	border: 1px solid #C0C0C0;
	padding: 2px 2px 2px 5px;
	margin-bottom: 1px;
	position: fixed;
	left: 20px;
	top: 30px;
	overflow: auto;
}

#contents {
	padding-bottom: 0px;
}

/* to fix the ul disc cannot be displayed in IE  */
ul {
	margin-left: 1.3em;
}

ol {
	margin-left: 1.3em;
	list-style-type: decimal;
}

/******************************************************************************/
/****************************     a      **************************************/
/******************************************************************************/

li a, li a:link, li a:visited, li a:hover, li a:active, a, a:link, a:visited, a:hover, a:active, span.stdLink, stdLink {
	color: #000099;
	text-decoration: none;
}

	a.navheader1, a.SubText, a:link.navheader1, a:link.SubText, a:link.HeadingText, a:link.HeadingText_Main, a:link.SubText,
	a:visited.navheader1, a:visited.SubText, a:visited.HeadingText, a:visited.HeadingText_Main, a:visited.SubText,
	a:hover.navheader1, a:hover.SubText, a:hover.HeadingText, a:hover.HeadingText_Main, a:hover.SubText,
	a:active.navheader1, a:active.SubText, a:active.HeadingText, a:active.HeadingText_Main, a:active.SubText {
		color: #000099;
	}

	/* 2013/09/19 IB DevExpress Grid was modifying Grid.Column.PropertiesHyperLinkedit.Style.CSSClass with DevExpress Skin class
    which meant that any a tag href were not SWS standard colours, using this CSS override to set the colours to Black
    which looks OK with the background colour chosen for highlighting selected item in grid.
*/

	a.dxeHyperlink_Office2010Blue.SWSURLPlainBlack, a.dxeHyperlink_Office2010Blue.SWSURLPlainBlack:visited {
		color: #000000;
		text-decoration: none;
	}

.dxeHyperlink_Office2010Blue.SWSURLPlainBlack a, dxeHyperlink_Office2010Blue.SWSURLPlainBlack a:visited {
	color: #000000;
	text-decoration: none;
}

.navborder_white {
	border-right: silver 1px solid;
	border-top: silver 1px solid;
	border-left: silver 1px solid;
	border-bottom: silver 1px solid;
	height: 76px;
	width: 370px;
	background-color: White;
	/*cursor:pointer;*/
}

div.tbl_table {
	clear: both;
	display: table;
}

div.tbl_row {
	clear: both;
	width: 100%;
	min-height: 22px;
	display: table-row;
}

div.tbl_cell {
	float: left;
	width: 100%;
	min-height: 22px;
	min-width: 80px;
	display: table-cell;
	height: 100%;
}

div.column_20 {
	min-width: 20px;
	width: 20px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_80 {
	min-width: 80px;
	width: 80px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_120 {
	min-width: 80px;
	width: 120px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_180 {
	min-width: 80px;
	width: 180px;
	float: left;
	overflow: hidden;
	height: 100%;
	margin-left: 23px;
}

div.column_250 {
	min-width: 80px;
	width: 250px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_350 {
	min-width: 350px;
	width: 350px;
	float: left;
	height: 100%;
	overflow: hidden;
}

div.column_430 {
	min-width: 80px;
	width: 430px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_550 {
	min-width: 80px;
	width: 550px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.column_580 {
	min-width: 80px;
	width: 580px;
	float: left;
	overflow: hidden;
	height: 100%;
}

div.title_area {
	border: silver 1px solid;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.title_area_thin {
	/*border: silver 1px solid;*/
	margin-top: 3px;
	margin-bottom: 5px;
}

div.marketFrame {
	padding: 0.5em;
	margin: 0.5em 0;
	border: 1px solid silver;
}

.title_sub {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.9em;
	text-align: right;
	margin-left: 12em;
}

img.title_img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2em;
}

h1.title_text {
	vertical-align: middle;
	font-weight: bold;
	color: #000099;
	display: inline-block;
	font-size: 1.7em;
}

h1.title_text_thin {
	vertical-align: middle;
	font-weight: bold;
	color: #000099;
	display: inline-block;
	font-size: 1.7em;
	margin: 3px;
}

h1.title_text_small {
	padding: 20px 1px 5px 110px;
	margin: 0px;
	font-size: smaller;
	vertical-align: middle;
	color: #000099;
	padding: 0px;
}

h1.title_text_no_img {
	padding: 10px 0px 10px 5px;
	margin: 0px;
	vertical-align: middle;
	display: inline-block;
	font-size: 1.7em;
	font-weight: bold;
	color: #000099;
}

h1.title_text_wide_no_img {
	padding: 13px 0px 13px 5px;
	margin: 0px;
	vertical-align: middle;
	display: inline-block;
	font-size: 1.7em;
	font-weight: bold;
	color: #000099;
}

div.text_area {
	padding: 2px 0px 2px 1px;
	border: silver 1px solid;
	min-height: 100px;
	width: 100%;
	clear: both;
}

floating_panel {
	Z-INDEX: 1;
	LEFT: 52%;
	WIDTH: 433px;
	POSITION: absolute;
	TOP: 30%;
	HEIGHT: 312px;
}

.colorbox_Promo {
	padding: 10px;
	margin-bottom: 5px;
	background-color: #d3d4ff;
	float: left;
	margin-right: 8px;
	border: solid 1px silver;
	line-height: 1.2em;
}

.blankbox_Promo {
	padding: 10px;
	margin-bottom: 5px;
	float: left;
	margin-right: 8px;
	border: solid 1px silver;
	background-position: right bottom;
	background-image: url(../Images/common/box_corner_image.png);
	background-repeat: no-repeat;
	line-height: 1.2em;
}

.border_Promo {
	border: solid 1px silver;
}

.border {
	border: solid 1px silver;
}

.signup_Promo {
	padding: 5px;
	margin-bottom: 5px;
	margin-right: 8px;
	border: solid 1px silver;
	float: right;
	width: 438px;
	height: 376px;
}

.newsbox {
	padding: 10px;
	width: 100%;
	height: 700px;
	overflow: auto;
	margin-top: 4px;
	margin-bottom: 8px;
}

.newsFrame {
	position: relative;
	display: block;
	width: 617px;
	min-height: 273px;
}

.newsArea {
	line-height: 1.2em;
	border: solid 1px silver;
	padding: 10px;
	width: 595px;
	border: solid 1px silver;
	background-position: right bottom;
	background-image: url(../Images/common/box_corner_image.png);
	background-repeat: no-repeat;
	margin-bottom: 5px;
	min-height: 250px;
}
/* Invisible left hotspot temp not in use */
div.scrollingHotSpotLeft {
	/* The hotspots have a minimum width of 75 pixels 
	   and if there is room the will grow and occupy 10% 
	   of the scrollable area (20% combined). 
	   Adjust it to your own taste. */
	min-width: 30px;
	width: 8%;
	height: 100%;
	/* There is a big background image and it's used to 
	solve some problems I experienced in Internet Explorer 6. */
	background-image: url(../Images/common/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first cursor url is for Firefox and other 
		browsers, the second is for Internet Explorer */
	cursor: url(../Images/cursors/cursors/cursor_arrow_left.cur), url(../Images/cursors/cursor_arrow_left.cur),w-resize;
}

/* left hotspot */
div.scrollingHotSpotLeftInit {
	min-width: 27px;
	width: 7%;
	height: 100%;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	background-image: url(../Images/common/arrow_left.gif);
	background-color: #fff;
	background-repeat: no-repeat; /* Standard CSS3 opacity setting */
	opacity: 0.35; /* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35; /* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35); /* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */
	zoom: 1;
	cursor: url(../Images/cursors/cursor_arrow_left.cur), url(../Images/cursors/cursor_arrow_left.cur),e-resize;
	display: none;
}

/* Invisible right hotspot temp not in use */
div.scrollingHotSpotRight {
	min-width: 30px;
	width: 8%;
	height: 100%;
	background-image: url(../Images/common/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 20;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* right hotspot */
div.scrollingHotSpotRightInit {
	min-width: 27px;
	width: 7%;
	height: 100%;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat; /* Standard CSS3 opacity setting */
	opacity: 0.35; /* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35; /* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35); /* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */
	zoom: 1;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),w-resize;
	display: none;
}

/* Invisible right hotspot temp not in use */
div.scrollingHotSpotRight {
	min-width: 30px;
	width: 8%;
	height: 100%;
	background-image: url(../Images/common/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 20;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}

/* The scroll wrapper is always the same width and 
   height as the containing element (div). Overflow 
   is hidden because you don't want to show all of 
   the scrollable area.
*/
div.scrollWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea {
	position: relative;
	width: auto;
	height: 100%;
}

/*************************************************************************************************************************************/
/**************************			    Forecast Table and Color Range vs Climatology					  ****************************/
/*************************************************************************************************************************************/

/* Forecast Table and Color Range vs Climatology */
table.FCastTable {
	border-bottom: solid 1px #bfd3ee;
	border-right: solid 1px #bfd3ee;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: x-small;
}

td.FCastTable {
	border-bottom: solid 1px #bfd3ee;
	border-right: solid 1px #bfd3ee;
	text-align: center;
}

td.PDFChart {
	cursor: pointer; /*CH use pointer to indicate click to view PDF popup*/
	background-image: url(../Images/common/PDFTag.png);
	background-repeat: no-repeat;
	background-position: top left;
}

.CRFreezing {
	background-color: #191987;
	color: White;
}

.CRVeryCold {
	background-color: #3366FF;
	color: White;
}

.CRCold {
	background-color: #5C85FF;
}

.CRABitCold {
	background-color: #BECEFF;
}

.CRNormal {
	/*MM: intentionally blank*/
}

.CRABitWarm {
	background-color: #FFB2B2;
}

.CRWarm {
	background-color: #FF6666;
}

.CRVeryWarm {
	background-color: #BA1919;
	color: White;
}

.CRInferno {
	background-color: #730000;
	color: White;
}

table.CRLegend {
	width: 100%;
	font-size: 0.7em;
	height: 2em;
}

td.CRLegend {
	border: 0;
	margin: 0;
	padding: 0;
}

.CRRainDRY {
	background-color: #FFFFCC;
	color: Black;
}

.CRRainTrace {
	background-color: #CCFFCC;
	color: Black;
}

.CRRainDrizzle {
	background-color: #99FF99;
	color: Black;
}

.CRRainLight {
	background-color: #33FF66;
	color: Black;
}

.CRRain {
	background-color: #33CC00;
	color: Black;
}

.CRRainSustained {
	background-color: #009900;
	color: Black;
}

.CRRainHeavy {
	background-color: #006633;
	color: White;
}

.CRRainDownpoor {
	background-color: #003300;
	color: White;
}

.CRRainTorrent {
	background-color: #000000;
	color: White;
}

.mainRow {
	vertical-align: middle;
	font-weight: bold;
	color: #000099;
	font-size: 1.5em;
	margin: 3px;
}

	.mainRow div {
		margin: 15px 0;
	}

/*************************************************************************************************************************************/
/*********************************			    Forecast Dashboard Maps DIV					  ****************************************/
/*************************************************************************************************************************************/

/* This class is used to embed the Maps into a div that is relative to force the content on the right hand side of the screen */
.DIVMAPRelative {
	position: relative;
}

/* This CSS will make the first column picture appear on the right hand side of the screen */
.DIVMAPRightSide1ColPictures {
	clear: both;
	position: absolute;
	right: -350px;
	padding: 10px;
	background-color: White;
	border: 1px solid Gray;
	width: 280px;
	height: 700px;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}

/*  This CSS will make the second column picture appear on the right hand side of the screen */
.DIVMAPRightSide2ColPictures {
	clear: both;
	position: inherit;
	right: 630px;
	padding: 10px;
	background-color: White;
	border: 1px solid Gray;
	width: 560px;
	height: 700px;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}

/*  This CSS will make the second column picture appear on the right hand side of the screen */
.DIVMAP3ColPictures {
	clear: both;
	position: inherit;
	padding: 5px;
	background-color: White;
	border: 1px solid Gray;
	width: 960px;
	height: 700px;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}

/*****************************************
popout window on new paid user model user control
*******************************************/
.tblborder {
	width: 100%;
	border-left: #3399cc 1px solid;
	border-right: #3399cc 1px solid;
	background-color: #99ccff;
	border-bottom: #3399cc 1px solid;
	height: 100%;
	min-height: 100%;
}

.tblrow {
	width: 100%;
	height: 18px;
	border-bottom: #3399cc 1px solid;
	clear: both;
	background-color: #99ccff;
}

.tblheader {
	border-right: #3399cc 1px solid;
	float: left;
	width: 33%;
	font-weight: bold;
	text-align: center;
	color: white;
	background-color: #3366cc;
	vertical-align: middle;
	height: 100%;
	min-height: 100%;
	height: 22px;
}

.tbl_sub_header {
	border-right: #3399cc 1px solid;
	border-bottom: #3399cc 1px solid;
	float: left;
	width: 33%;
	font-weight: bold;
	text-align: left;
	height: 100%;
	min-height: 100%;
}

.tblvaluecell {
	border-right: #3399cc 1px solid;
	border-bottom: #3399cc 1px solid;
	float: left;
	width: 33%;
	text-align: left;
	font-size: 1.0em;
	background-color: transparent;
	height: 100%;
	min-height: 100%;
}

.tblcolumnrecal {
	width: 49.5%;
}

.tblcolumnbest {
	width: 49.5%;
}

/*************************************************************************************************************************************/
/*****************************************			    Rounded box					  *********************************************/
/**************************************************************************************************************************************/

div.RoundedPanel {
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border: 1px solid rgb(69, 157, 229);
	overflow: hidden;
}

div.RoundedPanel_Hover {
	background: rgb(211,212,255);
}

.lowZIndexPanel {
	z-index: 80 !important;
}

/*************************************************************************************************************************************/
/*****************************************			    LEFT SIDE PANEL					  *********************************************/
/**************************************************************************************************************************************/
.LeftSidePanel {
	position: absolute;
	top: 38px;
	left: 5px;
	display: none;
	background: #EAF4FF;
	border: 1px solid #111111;
	color: #000080;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	/*width: 250px;*/
	min-height: 150px;
	height: auto;
	padding: 10px 10px 20px 20px;
	z-index: 80;
	font-size: 0.9em;
}

	.LeftSidePanel p {
		margin: 0 0 15px 0;
		padding: 0;
		color: #000000;
	}

	.LeftSidePanel a, .panel a:visited {
		margin: 0;
		padding: 0;
		text-decoration: none;
		border-bottom: 1px solid #cccccc;
	}

		.LeftSidePanel a:hover, .panel a:visited:hover {
			margin: 0;
			padding: 0;
			text-decoration: none;
			border-bottom: 1px solid #ffffff;
		}

a.LeftSidePanelTrigger {
	text-decoration: none;
	letter-spacing: -1px;
	font-family: Verdana, Tahoma, Arial;
	color: #fff;
	padding: 0.5em 32px 0.5em 5px;
	background: #153463 url(../../Images/common/plus.png) 85% 55% no-repeat;
	border: 1px solid #444444;
	/*-webkit-border-radius: .5em;
  -moz-border-radius: .5em;*/
	display: block;
}

	a.LeftSidePanelTrigger:hover {
		text-decoration: none;
		letter-spacing: -1px;
		font-family: Verdana, Tahoma, Arial;
		color: #fff;
		padding: 0.5em 32px 0.5em 5px;
		background: #153463 url(../../Images/common/plus.png) 85% 55% no-repeat;
		border: 1px solid #444444;
		/*-webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;*/
		display: block;
	}

a.active.LeftSidePanelTrigger {
	background: #153463 url(../../Images/common/minus.png) 85% 55% no-repeat;
}

/*******************************************************/
/* pop up notice message box on UC_GoogleMapsStnTable.ascx user control*/
/*******************************************************/
#popupNotice {
	width: 550px;
	height: 200px;
}

/*************************************************************************************************************************************/
/**********************************************				    BUTTONS SECTION					  ************************************/
/*************************************************************************************************************************************/

/* CSS3 buttons that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button buttonblue" */
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Arial, Helvetica, sans-serif;
	padding: 0.5em 0.5em .5em 0.5em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

	.button:hover {
		top: -2px;
		left: -2px;
		text-decoration: none;
	}

	.button:active {
		position: relative;
		top: 1px;
	}

/* CSS3 small buttons i.e. no padding that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button SmallButton buttonblue" */
.SmallButton {
	font: 10px/100% Arial, Helvetica, sans-serif;
	padding: .1em 0.1em .1em 0.1em;
}

/* CSS3 small buttons i.e. no padding that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button MediumButton buttonblue" */
.MediumButton {
	font: 10px/100% Arial, Helvetica, sans-serif;
	padding: .25em 0.25em .25em 0.25em;
}

/* Buttons Colors : BLUE */
a.buttonBlue:link, a.buttonBlue:hover, a.buttonBlue:visited, a.buttonBlue:active {
	color: White;
}

.buttonBlue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #153463;
	background-image: linear-gradient(bottom, #010D29 15%, #153463 73%);
	background-image: -o-linear-gradient(bottom, #010D29 15%, #153463 73%);
	background-image: -moz-linear-gradient(bottom, #010D29 15%, #153463 73%);
	background-image: -webkit-linear-gradient(bottom, #010D29 15%, #153463 73%);
	background-image: -ms-linear-gradient(bottom, #010D29 15%, #153463 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, #010D29), color-stop(0.73, #153463) );
}

	.buttonBlue:hover {
		color: White;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background-image: linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -o-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -moz-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -webkit-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -ms-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #0016A3), color-stop(0.52, #647CD1) );
	}

	.buttonBlue:active {
		color: #80bed6;
		background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	}

/* Buttons Colors:BLUE HIGHLIGHTED */
a.buttonBlueHighlighted:link, a.buttonBlue:hover, a.buttonBlue:visited, a.buttonBlue:active {
	color: White;
}

.buttonBlueHighlighted {
	color: white;
	border: solid 1px #0076a3;
	background: #0066FF;
	background-image: linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -o-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -moz-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -webkit-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -ms-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, #0066FF), color-stop(0.73, #153463) );
}

	.buttonBlueHighlighted:hover {
		color: White;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background-image: linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -o-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -moz-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -webkit-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -ms-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #00CCFF), color-stop(0.52, #647CD1) );
	}

a.buttonBlueHighlighted:active, a.buttonBlueHighlighted:visited {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
}


/* Buttons Colors : GREEN */
a.buttonGreen:link, a.buttonGreen:hover, a.buttonGreen:visited, a.buttonGreen:active {
	color: White;
}

.buttonGreen {
	color: #d9eef7;
	border: solid 1px #1a9602;
	background: #15631c;
	background-image: linear-gradient(bottom, #167d0a 4%, #29bb14 43%);
	background-image: -o-linear-gradient(bottom, #167d0a 4%, #29bb14 43%);
	background-image: -moz-linear-gradient(bottom, #167d0a 4%, #29bb14 43%);
	background-image: -webkit-linear-gradient(bottom, #167d0a 4%, #29bb14 43%);
	background-image: -ms-linear-gradient(bottom, #167d0a 4%, #29bb14 43%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #167d0a), color-stop(0.43, #29bb14) );
}

	.buttonGreen:hover {
		color: White;
		background: #09ad00;
		background: -webkit-gradient(linear, left top, left bottom, from(#229415), to(#05f323));
		background-image: linear-gradient(bottom, #229415 4%, #05f323 49%);
		background-image: -o-linear-gradient(bottom, #229415 4%, #05f323 49%);
		background-image: -moz-linear-gradient(bottom, #229415 4%, #05f323 49%);
		background-image: -webkit-linear-gradient(bottom, #229415 4%, #05f323 49%);
		background-image: -ms-linear-gradient(bottom, #229415 4%, #05f323 49%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #229415), color-stop(0.49, #05f323) );
	}

	.buttonGreen:active {
		color: #80bed6;
		background: -webkit-linear-gradient(bottom, #229415 4%, #05f323 49%);
	}




/* Buttons Colors : YELLOW */
a.buttonYellow:link, a.buttonYellow:hover, a.buttonYellow:visited, a.buttonYellow:active {
	color: White;
}
.buttonYellow {
	color: White;
	border: solid 1px #ccc308;
	background: #c18d13;
	background-image: linear-gradient(bottom, #c18d13 4%, #f3d747 43%);
	background-image: -o-linear-gradient(bottom, #c18d13 4%, #f3d747 43%);
	background-image: -moz-linear-gradient(bottom, #c18d13 4%, #f3d747 43%);
	background-image: -webkit-linear-gradient(bottom, #c18d13 4%, #f3d747 43%);
	background-image: -ms-linear-gradient(bottom, #c18d13 4%, #f3d747 43%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #c18d13), color-stop(0.43, #f3d747) );
}
	.buttonYellow:hover {
		color: White;
		background: #bda319;
		background: -webkit-gradient(linear, left top, left bottom, from(#bda319), to(#fbf638));
		background-image: linear-gradient(bottom, #bda319 4%, #fbf638 49%);
		background-image: -o-linear-gradient(bottom, #bda319 4%, #fbf638 49%);
		background-image: -moz-linear-gradient(bottom, #bda319 4%, #fbf638 49%);
		background-image: -webkit-linear-gradient(bottom, #bda319 4%, #fbf638 49%);
		background-image: -ms-linear-gradient(bottom, #bda319 4%, #fbf638 49%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #bda319), color-stop(0.49, #fbf638) );
	}

	.buttonYellow:active {
		color: #80bed6;
		background: -webkit-linear-gradient(bottom, #bda319 4%, #fbf638 49%);
	}


/* Buttons Colors : DISABLED */
a.buttonDisabled:link, a.buttonDisabled:hover, a.buttonDisabled:visited, a.buttonDisabled:active {
	color: White;
}

.buttonDisabled {
	color: #d9eef7;
	border: solid 1px gray;
	background: gray;
	background-image: linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -o-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -moz-linear-gradient(bottom, gray 15%,gray 73%);
	background-image: -webkit-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -ms-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, gray), color-stop(0.73, black) );
}

	.buttonDisabled:hover {
		color: White;
		background: gray;
		background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
		background-image: linear-gradient(bottom,gray 4%, gray 52%);
		background-image: -o-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -moz-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -webkit-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -ms-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #0016A3), color-stop(0.52, #647CD1) );
	}

	.buttonDisabled:active {
		color: gray;
		background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
	}

/* Buttons Colors:Disabled HIGHLIGHTED */
a.buttonDisabledHighlighted:link, a.buttonDisabled:hover, a.buttonDisabled:visited, a.buttonDisabled:active {
	color: White;
}

.buttonDisabledHighlighted {
	color: white;
	border: solid 1px gray;
	background: gray;
	background-image: linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -o-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -moz-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -ms-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, gray), color-stop(0.73, gray) );
}

a.buttonDisabledHighlighted:active, a.buttonDisabledHighlighted:visited {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
}

.buyButtonDivPos {
	position: relative;
	bottom: 100px;
}

span.ui-dialog-title, span.ui-button-text {
	font-size: 0.8em;
}

/******************************************************************
Marketing page format	
*******************************************************************/

#mPage {
	clear: both;
}

	#mPage > div:nth-of-type(1), #mPage .mPage_title {
		font-size: 1.7em;
		color: darkblue;
		margin-bottom: 0.5em;
		font-weight: bold;
		padding-top: 1em;
	}


	#mPage > div:nth-of-type(2), #mPage .mPage_body {
	}

	#mPage > div:nth-of-type(3), #mPage > .mPage_attachment_title {
		margin: 20px 0;
		font-size: 1.3em;
		font-weight: bold;
	}

	#mPage > div:nth-of-type(4), #mPage > .mPage_attachment {
	}

		#mPage > div:nth-of-type(4) > table td, #mPage > .mPage_attachment > table td {
			text-align: center;
			/*margin:20px 50px;*/
			padding: 2px 7px;
		}

			#mPage > div:nth-of-type(4) > table td:first-child, #mPage > .mPage_attachment > table td:first-child {
				/*min-width:350px;*/ /*min-wdith not good when viewed on mobile*/
			}


		#mPage > div:nth-of-type(4) > table tr:nth-child(odd), #mPage > .mPage_attachment > table tr:nth-child(odd) {
			background-color: #e2edf8;
		}

/*rotor.css*/
/* default rotator styles */
#rotator {
	position: relative;
	height: 325px;
	overflow: hidden; /*background-color: white;*/
	margin: 0px;
	padding: 0px;
}

	#rotator .slide {
		height: 325px; /*position: absolute;*/
		top: 0px;
		left: 0px;
		overflow: hidden;
		background: white;
		display: none;
		margin: 0px;
		padding: 0px;
	}

/* default rotator nav styles */
#rotator-nav {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 59; /*background: white;*/
	opacity: .5;
	filter: alpha(opacity=40);
	padding: 4px;
	-moz-border-radius: 4px;
}

	#rotator-nav:hover {
		opacity: 1;
		filter: alpha(opacity=100);
	}

	#rotator-nav li {
		display: block;
		float: left;
		padding: 0 2px;
	}

	#rotator-nav a {
		border: 3px solid #B6B6B6;
		color: #6B6B6B;
		font: 24px Arial;
		padding: 2px 8px;
		text-decoration: none;
		outline: medium none;
		background-color: ghostwhite;
		border-radius: 3px;
	}

		#rotator-nav a:hover, #rotator-nav .current a {
			color: #0063B1;
			border-color: #0063B1;
		}

.loading {
	background: url(/App_Themes/Office2010Blue/Editors/Loading.gif) 50% 50% no-repeat;
	height:100%
}

.databox {
	padding: 10px;
	margin-bottom: 5px;
	background-position: right bottom;
	background-image: url('/Images/common/box_corner_image.png');
	background-repeat: no-repeat;
	/*width: 960px;*/
	height: 325px;
	/*border: solid 1px silver;*/
	line-height: 1.2em;
	max-height: 100%;
}

.WeatherInstallFG {
	padding-right: 320px;
}

.HomeBanner {
	height: 100%;
	margin-bottom: 20px;
	position: relative;
}

@media screen and (max-width:52.75em) {

	#rotator {
		height: 450px;
	}

		#rotator .slide {
			height: 450px;
		}

	.databox {
		/*width: 510px;*/
		height: 450px;
	}

	.HomeBanner {
		width: 530px;
		height: 450px;
	}

	.WeatherInstallFG {
		padding-right: 320px;
	}
}

@media screen and (max-width:36em) {

	#rotator {
		height: 650px;
	}

		#rotator .slide {
			height: 650px;
		}

	.databox {
		width: 323px;
		height: 640px;
		padding-bottom: 45px;
	}

	.HomeBanner {
		width: 333px;
		height: 650px;
		/*position: absolute;*/
	}

	.newsboxstyle {
		width: 333px;
	}

	#leftpart {
		width: 333px;
	}

	.WeatherInstallFG {
		padding: 5px;
	}

	.WeatherInstallBG {
		padding: 0px;
		/*background-image:url('');*/
		background-position: bottom;
		background-position: 0 200px;
		background-size: 333px;
	}
}
/*Mao Icons */

@font-face {
	font-family: 'icomap';
	src: url('/font/icomap.eot?-q9p9sx');
	src: url('/font/icomap.eot?#iefix-q9p9sx') format('embedded-opentype'), url('/font/icomap.woff?-q9p9sx') format('woff'), url('/font/icomap.ttf?-q9p9sx') format('truetype'), url('/font/icomap.svg?-q9p9sx#icomap') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="mapicon-"], [class*=" mapicon-"] {
	font-family: 'icomap';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 32px;
}

.mapicon-square:before {
	content: "\e600";
}

.mapicon-circle:before {
	content: "\e601";
}

.mapicon-magnifier:before {
	content: "\e602";
}

.mapicon-error:before {
	content: "\e603";
}

.mapicon-resize:before {
	content: "\e604";
}

.mapicon-download:before {
	content: "\e605";
}

.mapicon-cog:before {
	content: "\e606";
}

.mapicon-checked:before {
	content: "\e607";
}

.mapicon-play:before {
	content: "\e608";
}

.mapicon-info:before {
	content: "\e609";
}
/*Default*/

@font-face {
	font-family: 'fontawesome';
	src: url('/font/fontawesome.eot');
	src: url('/font/fontawesome.eot?#iefix') format('embedded-opentype'), url('/font/fontawesome.svg#fontawesome') format('svg'), url('/font/fontawesome.woff') format('woff'), url('/font/fontawesome.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body, html {
	font-size: 100%;
	padding: 0;
	margin: 0;
}

/* Reset */
/**,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}*/
/*above on * causes conflict with DevExpress Styles - needf to apply reste to effect non-devexpress controls  */
.reset,
.reset:after,
.reset:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


.resets > *,
.resets > *:after,
.resets > *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

img {
	border: 0 none;
	text-align: center;
	float: none;
}

a:hover {
	color: #000;
}

.container > header {
	width: 90%;
	max-width: 65em;
	margin: 0 auto;
	padding: 1.275em 1.875em 0;
}



	.container > header h1 {
		font-size: 2.125em;
		line-height: 1.3;
		margin: 0;
		float: left;
		font-weight: 400;
	}

	.container > header h2 {
		font-size: 2.125em;
		line-height: 0.9em;
		margin: 0;
		float: left;
		font-style: normal;
		font-weight: 400;
	}

.map_splitter_header {
	height: 118px;
}

.dxeMemo_Office2010Blue td {
	padding: 0 7px 0 0 !important;
}

.container > header span {
	display: block;
	/*font-weight: 700;*/
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0 0 0.5em 0.1em;
}

.container > header nav {
	float: right;
	padding-right: 25%;
}

	.container > header nav a {
		display: block;
		float: left;
		position: relative;
		width: 2.5em;
		height: 2.5em;
		/*	background: #fff;
	border-radius: 50%;*/
		color: transparent;
		margin: 0 0.1em;
		/*	border: 4px solid #9DA7EC;
	text-indent: -8000px;*/
	}

		.container > header nav a:after {
			content: attr(data-info);
			color: #9DA7EC;
			position: absolute;
			width: 100%;
			top: 110%;
			text-align: center;
			right: 0;
			opacity: 0.0;
			pointer-events: none;
			font-size: 12px;
		}

		.container > header nav a:hover:after {
			opacity: 1;
		}

/*#LogIn {
	padding-left: 15%;
}*/





.testafter:after {
	content: attr(data-info);
	color: #9DA7EC;
	position: absolute;
	width: 100%;
	top: 110%;
	text-align: center;
	right: 0;
	opacity: 0.8;
	pointer-events: none;
	font-size: 12px;
}



/*.container > header nav a:hover {
	background: #9DA7EC;
}*/
nav > div.subnav {
	width: 129px;
	position: relative;
}

.subnav > div.funtionbtnContainer {
	position: absolute;
	white-space: nowrap; /* ensure tooltip like text doesn't wrap*/
}

.icon-drop:before,
.icon-arrow-left:before {
	font-family: 'fontawesome';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 2;
	text-align: center;
	color: #9DA7EC;
	-webkit-font-smoothing: antialiased;
	/*text-indent: 8000px;*/
	padding-left: 8px;
}

.container > header nav a:hover:before {
	color: #fff;
}

.icon-drop:before {
	content: "\e000";
}

.icon-arrow-left:before {
	content: "\f060";
}

.extendpage-body {
	max-width: 1280px;
	margin: 0 auto;
}

.heading {
	color: white;
	font-family: 'Gothic', Calibri, Arial, sans-serif;
}

.logo {
	background: #4C8136 url('/images/SWDWebLogoBanner_thin.jpg') no-repeat center bottom;
	border-top: 4px solid #9DA7EC;
}

.logo_thin {
	background: #4C8136 url('/images/SWDWebLogoBanner_extrathin.jpg') no-repeat center bottom;
	border-top: 4px solid #9DA7EC;
}

.swdLogoMob {
	background: url('');
}

.imgPad {
	/*padding: 1.2em 2.3em 0 2.3em;*/
}

.minButtonPad {
	padding: 0 2.3em 1.2em 1.2em;
	margin: initial;
}

.minButtonPadLast {
	padding: 0 1.5em 0 1em;
	margin: initial;
}

.appItem_width {
	padding: 0 0.8em;
	margin: initial;
}

.appSubItem {
	padding: 0 0 0 1em;
	margin: initial;
}

.btPad {
	margin-bottom: 0.4em;
	/*height: 3.6em;*/
	padding: 0.2em;
}

.btPadLast {
	/*margin-bottom: 0.4em;
	height: 3.6em;*/
	padding: 0.2em;
}

.btPadSmall {
	height: 1.8em;
	width: 50px !important;
	margin: 2em 0 1em auto;
}

.reset_width {
	width: auto !important;
}

.button_width {
	width: 33%;
	display: inline-block !important;
	margin-bottom: 23px;
	margin-top: 13px;
}

.span_width {
	vertical-align: middle;
	width: 60%;
	display: inline-block;
	font-size: 10px;
}

ul.login {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

	ul.login > li {
		position: relative;
		float: left;
		overflow: hidden;
	}

		ul.login > li > div, ul.login > div, .loginTempDiv {
			margin: 0 0 0 15px;
			padding: 2px;
		}

h3.smallMargin {
  -webkit-margin-before: 0.65em;
  -webkit-margin-after: 0.65em;
  margin-bottom: 0.65em;
  margin-top: .65em;
}

h3.tile_title {
	-webkit-margin-before: 2em;
	border-bottom: 1px solid #9DA7EC;
	white-space: nowrap;
	overflow: hidden;
	font-weight: normal;
}

div.tile_title {
	-webkit-margin-before: 2em;
	border-bottom: 1px solid #9DA7EC;
	white-space: nowrap;
	overflow: hidden;
	font-weight: normal;
	margin-bottom: 2em;
	margin-top: 2em;
}

	div.tile_title .mainTitle {
		float: left;
		font-size: 1.3em;
	}

	div.tile_title .subTitle {
		float: right;
	}

ul.appItem {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
}

ul.appItem li {
		vertical-align: top;
		/*height: 240px;*/
}

/*ul.appItem  a {    line-height: 150%;}*/


h3.tile_title_pad {
	margin-right: 2em;
}

.newNav {
	font-family: Verdana, Tahoma, Arial;
	font-size: 1.0em;
}

	.newNav a, .newNav a:visited, .newNav a:hover, .newNav a:active {
		text-decoration: underline none;
		text-decoration-color: none;
		text-emphasis-color: none;
		color: none;
	}

	.newNav .heading h1 {
		color: white;
	}

div.smaller_font {
	font-size: 0.8em;
}

.ContentDiv {
	margin: 0 auto;
	max-width: 60em;
	position: relative;
	/*font-size:12px;*/
	/*background-color: #f0f0f0;*/
}

.moreLink {
	font-size: 0.7em;
	/*padding-top:1.3em;*/
	text-align: center;
	/*position:absolute;*/
	padding-left: 4.3em;
}

div.baseFont {
	font-size: 0.9em !important;
}

.HPMenuLink a, .HPMenuLink a:visited, .HPMenuLink a:hover, .HPMenuLink a:active {
	text-decoration: underline;
}

.more_products {
	text-align: center;
	border-top: 1px solid white;
	padding-top: 6px !important;
}

.loginBreadCrum {
	margin: 2px 0;
	text-align: right;
	font-size: small !important;
	/*position above wxch banner*/
	    z-index: 1;
    position: relative;
}

/* Media queries*/

@media screen and (max-width:52.75em) {

	.ContentDiv {
		margin: 0 auto;
		padding-left: 5%;
		padding-right: 5%;
	}

	.ContentDiv_Apps {
		margin: 0 auto;
		max-width: 31em; /*40em*/
	}

	h3.smallMargin {
		/*-webkit-margin-before: 1.5em;
		-webkit-margin-after: 1.5em;*/
	}

	.logo {
		background: #4C8136 url('/images/SWDWebLogoBannerTab.jpg') no-repeat left bottom;
	}

	.container > header h1 {
		font-size: 1.4em;
	}

	/*.heading {
		border-bottom: 4px solid #95A7DE;
	}*/
}

@media screen and (max-width: 43em) {

	.ContentDiv_Apps {
		max-width: 30em;
	}

	.swdLogoMob {
		background: url('/images/FlowerOnly.png') no-repeat left bottom;
		width: 8em;
		height: 7em;
	}

	.logo {
		background: #4C8136 url('/images/plainbg.jpg');
	}

	.heading {
	}

	#LogIn {
		padding-left: 0;
	}
}

@media screen and (max-width:36em) {

	.moreLink {
		font-size: 110%;
	}

	h3.tile_title_pad {
		border-bottom: 0px;
		-webkit-margin-before: 0em;
	}

	.ContentDiv {
		margin: 0 auto;
	}

	.ContentDiv_Apps {
		margin: 0 auto;
		max-width: 80%;
	}
}

@media screen and (max-width:36em) {
	.moreLink {
		padding-left: 0.3em;
	}
}

h3.specialMargin {
	/*margin-top: 0.7em !important;*/
}

/* Component */

.cbp-hrmenu {
	width: 100%;
	margin-top: 0em;
	border-bottom: 4px solid #9DA7EC;
}

	/* general ul style */
	.cbp-hrmenu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		white-space: nowrap; /* CH this may cause problems when resizing*/
	}

	/* first level ul style */
	.cbp-hrmenu > ul,
	.cbp-hrmenu .cbp-hrsub-inner {
		width: 90%;
		max-width: 65em;
		margin: 0 auto;
		padding: 0 1.875em;
	}

		.cbp-hrmenu > ul > li {
			display: inline-block;
		}

			.cbp-hrmenu > ul > li > a {
				font-weight: 700;
				padding: 1em 1.5em; /*2em before menu names changed*/
				color: white;
				display: inline-block;
			}

				.cbp-hrmenu > ul > li > a:hover {
					color: #9DA7EC;
				}

			.cbp-hrmenu > ul > li.cbp-hropen a,
			.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
				color: #fff;
				background: #9DA7EC;
			}

	/* sub-menu */
	.cbp-hrmenu .cbp-hrsub {
		display: none;
		position: absolute;
		background: #9DA7EC;
		width: 100%;
		left: 0;
		z-index: 6000;
	}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 1em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 2em 0;
}

.productSubItem {
	width: 17% !important;
}

.aboutSubItem {
	width: 27% !important;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.cbp-hrsub h4 {
	color: #D7DAEC;
	padding: 2em 0 0.6em;
	margin: 0;
	font-size: 160%;
	font-weight: 400;
}

/* Examples for media queries */

.cbp-rfgrid {
	margin: 35px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

	.cbp-rfgrid li {
		position: relative;
		float: left;
		overflow: hidden;
		width: 25%; /* Fallback */
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
	}

		.cbp-rfgrid li a,
		.cbp-rfgrid li a img {
			display: block;
			width: 100%;
			cursor: pointer;
		}

			.cbp-rfgrid li a img {
				max-width: 100%;
			}

			/* Flexbox is used for centering the heading */
			.cbp-rfgrid li a div {
				position: absolute;
				left: 20px;
				top: 20px;
				right: 20px;
				bottom: 20px;
				background: rgba(71,163,218,0.2);
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flex;
				display: flex;
				-webkit-align-items: center;
				-moz-align-items: center;
				-ms-align-items: center;
				align-items: center;
				text-align: center;
				opacity: 0;
			}

				/*.cbp-rfgrid li a:hover div {
	opacity: 1;
}*/


				.cbp-rfgrid li a div h3 {
					width: 100%;
					color: #fff;
					text-transform: uppercase;
					font-size: 1.4em;
					letter-spacing: 2px;
					padding: 0 10px;
				}



.apphome > *,
.apphome > *:after,
.apphome > *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.apphome {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

	.apphome li {
		position: relative;
		float: left;
		overflow: hidden;
		width: 50%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2)-1px;
	}

		.apphome li a,
		.apphome li a img {
			display: block;
			/*width: 100%;*/
			cursor: pointer;
			  
		}

			.apphome li a h3 {
				line-height: 150%;
				padding:0;
				    /*-webkit-margin-before: 0;
    -webkit-margin-after: 0;*/


			}


			.apphome li a img {
				max-width: 100%;
			}

.app_foot {
	margin: 35px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
}

	.app_foot li {
		position: relative;
		float: left;
		overflow: hidden;
		width: 33%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}

.main_foot {
	margin: 0px;
	padding: 0;
	list-style: none;
	position: relative;
	display: block;
}

footer {
	text-align: center;
}

.foot_img {
	padding: 0 23px 0 23px;
}

.main_foot_div {
	/*width: 25%;
	display:inline-block;*/
	color: white;
	font-size: 12px;
}

	.main_foot_div a:hover, .main_foot_div a:visited, .main_foot_div a:active, .main_foot_div a:link {
		color: white;
	}

.main_foot li {
	position: relative;
	/*float: left;*/
	overflow: hidden;
	/*width: 25%; 
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
		display: block;*/
}

	.app_foot li a,
	.main_foot li a,
	.cbp-rfgrid li a img {
		display: block;
		width: 100%;
		cursor: pointer;
	}

/* Example for media query: change number of items per row */

.MQSize:before {
	content: "MW=None";
}

.headshowmenu {
	display: none !important;
}

.cbp-hrmenu-ss {
	display: block;
}

@media screen and (max-width: 72.875em) {
	.cbp-hrmenu {
		font-size: 80%;
	}

	.productSubItem {
		width: 25% !important;
	}

	.aboutSubItem {
		width: 19% !important;
	}
}

@media screen and (max-width: 52.75em) {
	.MQSize:before {
		content: "MW=52.75em";
	}

	.cbp-hrmenu {
		font-size: 80%;
	}


	.cbp-rfgrid li {
		width: 50%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2);
	}


	.apphome > li {
		width: 100%; /* Fallback */
		width: -webkit-calc(100% / 1);
		width: calc(100% / 1);
	}
}

@media screen and (max-width: 43em) { /*640px */

	.MQSize:before {
		content: "MW=43em";
	}


	nav > div.subnav {
		width: 171px; /*allow space for menu button shown below*/
		height: 60px;
	}

	.headshowmenu {
		display: block !important;
	}

	.cbp-hrmenu-ss {
		display: none; /* HIDE MENU ON SMART PHONE*/
	}

	.cbp-hrmenu {
		font-size: 120%;
		border: none;
	}

		.cbp-hrmenu > ul,
		.cbp-hrmenu .cbp-hrsub-inner {
			width: 100%;
			padding: 0;
		}

		.cbp-hrmenu .cbp-hrsub-inner {
			padding: 0 2em;
			font-size: 75%;
		}

		.cbp-hrmenu > ul > li {
			display: block;
			border-bottom: 4px solid #9DA7EC;
		}

			.cbp-hrmenu > ul > li > a {
				display: block;
				padding: 1em 3em;
			}

		.cbp-hrmenu .cbp-hrsub {
			position: relative;
		}

	.cbp-hrsub h4 {
		padding-top: 0.6em;
	}

	.apphome li {
		width: 100%; /* Fallback */
		width: -webkit-calc(100% / 1);
		width: calc(100% / 1);
		margin-top: 4px;
	}

	div.appSubItem {
		padding: 0;
	}
}

@media screen and (max-width:36em) {

	.MQSize:before {
		content: "MW=36em";
	}

	.cbp-hrmenu .cbp-hrsub-inner > div {
		width: 100%;
		float: none;
		padding: 0 2em;
	}


	.cbp-rfgrid li {
		width: 100%; /* Fallback */
	}

	.apphome li {
		width: 100%; /* Fallback */
		padding: 0;
	}
}

@media screen and (max-width:25em) {

	.MQSize:before {
		content: "MW=25em";
	}
}
/*searchbox*/

/* Search icon by IcoMoon, made with http://icomoon.io/app/ */
@font-face {
	/*font-family: 'icomoon';
	src: url('/font/search/icomoon.eot');
	src: url('/font/search/icomoon.eot?#iefix') format('embedded-opentype'), url('/font/search/icomoon.woff') format('woff'), url('/font/search/icomoon.ttf') format('truetype'), url('/font/search/icomoon.svg#icomoon') format('svg');*/
	font-family: 'svgicons';
	src: url('/font/svgicons.eot');
	src: url('/font/svgicons.eot?#iefix') format('embedded-opentype'), url('/font/svgicons.woff') format('woff'), url('/font/svgicons.ttf') format('truetype'), url('/font/svgicons.svg#svgicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.sb-icon-search:before {
	content: "\e606";
}

.hm-icon-home:before {
	content: "\e600";
}

.mp-icon-apphome {
	font-family: 'svgicons' !important;
	float: none !important;
	font-size: 32px;
	vertical-align: middle;
}

	.mp-icon-apphome:before {
		content: "\e600";
	}

.mm-icon-menu:before {
	content: "\e601";
}


.lg-icon-login:before {
	content: "\e607";
}

.lg-icon-logout:before {
	content: "\e608";
}



.sb-search {
	position: relative;
	margin-top: 0px;
	width: 0%;
	min-width: 37px;
	height: 37px;
	float: right;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
	-webkit-backface-visibility: hidden;
}


.sb-search-button, .iconmoon-button {
	position: relative;
	margin-top: 0px;
	width: 0%;
	min-width: 37px;
	height: 37px;
	float: left;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
	-webkit-backface-visibility: hidden;
	font-size: 32px;
}


.sb-search-input {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px #9DA7EC solid;
	outline: none;
	background: #fff;
	width: 95%;
	height: 37px;
	margin: 0;
	z-index: 5;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 13px;
	color: #2c3e50;
}

	.sb-search-input::-webkit-input-placeholder {
		color: #9DA7EC;
	}

	.sb-search-input:-moz-placeholder {
		color: #9DA7EC;
	}

	.sb-search-input::-moz-placeholder {
		color: #9DA7EC;
	}

	.sb-search-input:-ms-input-placeholder {
		color: #9DA7EC;
	}

.mm-icon-menu,
.sb-icon-search,
.sb-search-submit,
.hm-icon-home, .lg-icon-login, .lg-icon-logout {
	width: 37px;
	height: 37px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	line-height: 37px;
	text-align: center;
	cursor: pointer;
}

.sb-icon-search {
	z-index: 99;
}

.mm-icon-menu,
.sb-icon-search, .hm-icon-home, .lg-icon-login, .lg-icon-logout {
	color: #fff;
	background: #9DA7EC;
	/*font-size: 18px;*/
	font-family: 'svgicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}


.sb-search-open {
	width: 200px;
}

/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
	width: 100%;
}

.sb-search.sb-search-open {
	/*position: absolute;*/
	width: 200px;
	/*float:right;*/
}

	.sb-search.sb-search-open .sb-icon-search,
	.no-js .sb-search .sb-icon-search {
		background: #9DA7EC;
		color: #fff;
		z-index: 11;
	}

	.sb-search.sb-search-open .sb-search-submit,
	.no-js .sb-search .sb-search-submit {
		z-index: 10;
	}

/*************************************************************************************************************************************/
/**********************************************				    BUTTONS SECTION					  ************************************/
/*************************************************************************************************************************************/

/* CSS3 buttons that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button buttonblue" */

.ns_button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Verdana, Tahoma, Arial;
	padding: 0.2em 0.2em .2em 0.2em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.hp_button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Verdana, Tahoma, Arial;
	padding: 0.2em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}


.hps_button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 9px/100% Verdana, Tahoma, Arial;
	padding: 0.2em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	/*-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);*/
}

.hp_button_pic {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px/100% Verdana, Tahoma, Arial;
	padding: 2em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	/*padding-top: 50px; */
	margin-bottom: 4em;
}



.crop_Grid {
	margin-bottom: 2px !important;
}

.standardButton {
	padding: 0.5em;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
}

.smallstandardButton {
	padding: 0.2em;
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
}

.rnd_button {
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
}

.buttonText {
	color: Black;
	font-size: 120%;
	font-family: Verdana, Tahoma, Arial;
	font-weight: bold;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.hp_button:hover {
	top: -2px;
	left: -2px;
	text-decoration: none;
}

.hp_button:active {
	position: relative;
	top: 1px;
}

/* CSS3 small buttons i.e. no padding that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button SmallButton buttonblue" */
.SmallButton {
	font: 10px/100% Arial, Helvetica, sans-serif;
	padding: .1em 0.1em .1em 0.1em;
}

/* CSS3 small buttons i.e. no padding that gracefully degrade to rectangles in IE */
/* this is to be used with a color */
/* use  class = "button MediumButton buttonblue" */
.MediumButton {
	font: 10px/100% Arial, Helvetica, sans-serif;
	padding: .25em 0.25em .25em 0.25em;
}


.hp_buttonOffice2010Blue {
	border: solid 1px #ABBAD0;
	color: #1E395B;
	background: #E1EDFA;
	background: -moz-linear-gradient(top, #E1EDFA 0%, #D1DFEF 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1EDFA), color-stop(100%,#D1DFEF)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* IE10+ */
	background: linear-gradient(to bottom, #E1EDFA 0%,#D1DFEF 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1EDFA', endColorstr='#D1DFEF',GradientType=0 ); /* IE6-9 */
}

	.hp_buttonOffice2010Blue:hover {
		border: solid 1px #eecc53;
		color: #1E395B;
		background: #E1EDFA;
		background: -moz-linear-gradient(top, #E1EDFA 0%, #D1DFEF 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1EDFA), color-stop(100%,#D1DFEF)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #E1EDFA 0%,#D1DFEF 100%); /* IE10+ */
		background: linear-gradient(to bottom, #E1EDFA 0%,#D1DFEF 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1EDFA', endColorstr='#D1DFEF',GradientType=0 ); /* IE6-9 */
	}



.hp_btn_Office2010Blue {
	color: #1e395b;
	font: normal 11px Verdana, Geneva, sans-serif;
	border: 1px solid #abbad0;
	background: #d1dfef url('/App_themes/Office2010Blue/Editors/edtBtnBack.png') repeat-x left top;
	padding: 1px;
}

	.hp_btn_Office2010Blue:hover {
		color: #1e395b;
		background: #fcf8e5 url('/App_themes/Office2010Blue/Editors/edtBtnHBack.png') repeat-x left top;
		border: 1px solid #eecc53;
	}

	.hp_btn_Office2010Blue a, .hp_btn_Office2010Blue a:hover, .hp_btn_Office2010Blue a:visited {
		color: #1e395b;
	}



.hp_buttonBlue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #bec1e8; /* Old browsers */
	background: -moz-linear-gradient(top, #bec1e8 0%, #989ee9 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bec1e8), color-stop(100%,#989ee9)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bec1e8 0%,#989ee9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bec1e8 0%,#989ee9 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bec1e8 0%,#989ee9 100%); /* IE10+ */
	background: linear-gradient(to bottom, #bec1e8 0%,#989ee9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bec1e8', endColorstr='#989ee9',GradientType=0 ); /* IE6-9 */
}

	.hp_buttonBlue:hover {
		color: White;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background-image: linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -o-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -moz-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -webkit-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -ms-linear-gradient(bottom, #0016A3 4%, #647CD1 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #0016A3), color-stop(0.52, #647CD1) );
	}

	.hp_buttonBlue:active {
		color: #80bed6;
		background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	}

/* Buttons Colors:BLUE HIGHLIGHTED */
a.hp_buttonBlueHighlighted:link, a.hp_buttonBlue:hover, a.hp_buttonBlue:visited, a.hp_buttonBlue:active {
	color: White;
}

.hp_buttonBlueHighlighted {
	color: white;
	border: solid 1px #0076a3;
	background: #0066FF;
	background-image: linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -o-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -moz-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -webkit-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -ms-linear-gradient(bottom, #0066FF 15%, #153463 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, #0066FF), color-stop(0.73, #153463) );
}

	.hp_buttonBlueHighlighted:hover {
		color: White;
		background: #007ead;
		background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
		background-image: linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -o-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -moz-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -webkit-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -ms-linear-gradient(bottom, #00CCFF 4%, #647CD1 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #00CCFF), color-stop(0.52, #647CD1) );
	}

a.hp_buttonBlueHighlighted:active, a.hp_buttonBlueHighlighted:visited {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
}

.hp_buttonGreen {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #b1ceab; /* Old browsers */
	background: -moz-linear-gradient(top, #b1ceab 0%, #4f8947 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1ceab), color-stop(100%,#4f8947)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* IE10+ */
	background: linear-gradient(to bottom, #b1ceab 0%,#4f8947 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1ceab', endColorstr='#4f8947',GradientType=0 ); /* IE6-9 */
}

.greenbuttonlike {
	color: white;
	border: solid 1px #0076a3;
	background: #b1ceab; /* Old browsers */
	background: -moz-linear-gradient(top, #b1ceab 0%, #4f8947 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1ceab), color-stop(100%,#4f8947)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #b1ceab 0%,#4f8947 100%); /* IE10+ */
	background: linear-gradient(to bottom, #b1ceab 0%,#4f8947 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1ceab', endColorstr='#4f8947',GradientType=0 ); /* IE6-9 */
}

.hp_buttonGreen:hover {
	color: White;
	background: #6ba565; /* Old browsers */
	background: -moz-linear-gradient(top, #6ba565 0%, #6eb75f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ba565), color-stop(100%,#6eb75f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #6ba565 0%,#6eb75f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #6ba565 0%,#6eb75f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #6ba565 0%,#6eb75f 100%); /* IE10+ */
	background: linear-gradient(to bottom, #6ba565 0%,#6eb75f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba565', endColorstr='#6eb75f',GradientType=0 ); /* IE6-9 */
}

.hp_buttonGreen:active {
	color: #80bed6;
	background: -webkit-linear-gradient(bottom, #229415 4%, #05f323 49%);
}

.hp_buttonYellow {
	border: solid 1px #84893D;
	background: #b9bc98; /* Old browsers */
	background: -moz-linear-gradient(top, #b9bc98 0%, #b6bc6f 19%, #b6bf55 50%, #b7bc82 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9bc98), color-stop(19%,#b6bc6f), color-stop(50%,#b6bf55), color-stop(100%,#b7bc82)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #b9bc98 0%,#b6bc6f 19%,#b6bf55 50%,#b7bc82 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #b9bc98 0%,#b6bc6f 19%,#b6bf55 50%,#b7bc82 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #b9bc98 0%,#b6bc6f 19%,#b6bf55 50%,#b7bc82 100%); /* IE10+ */
	background: linear-gradient(to bottom, #b9bc98 0%,#b6bc6f 19%,#b6bf55 50%,#b7bc82 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9bc98', endColorstr='#b7bc82',GradientType=0 ); /* IE6-9 */
}

	.hp_buttonYellow:hover {
		border: solid 1px #84893D;
		background: #fefcea; /* Old browsers */
		background: -moz-linear-gradient(top, #fefcea 0%, #ccb11c 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#ccb11c)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #fefcea 0%,#ccb11c 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #fefcea 0%,#ccb11c 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #fefcea 0%,#ccb11c 100%); /* IE10+ */
		background: linear-gradient(to bottom, #fefcea 0%,#ccb11c 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#ccb11c',GradientType=0 ); /* IE6-9 */
	}

a.hp_buttonYellow:link, a.hp_buttonYellow:hover, a.hp_buttonYellow:visited, a.hp_buttonYellow:active,
a.hp_buttonGray:link, a.hp_buttonGray:hover, a.hp_buttonGray:visited, a.hp_buttonGray:active,
a.hp_buttonGreen:link, a.hp_buttonGreen:hover, a.hp_buttonGreen:visited, a.hp_buttonGreen:active,
a.hp_buttonBlue:link, a.hp_buttonBlue:hover, a.hp_buttonBlue:visited, a.hp_buttonBlue:active {
	color: White;
}

.hp_buttonGray {
	color: #d9eef7;
	border: solid 1px gray;
	background: #bacde0; /* Old browsers */
	background: -moz-linear-gradient(top, #bacde0 0%, #7b8c95 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bacde0), color-stop(100%,#7b8c95)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bacde0 0%,#7b8c95 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bacde0 0%,#7b8c95 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #bacde0 0%,#7b8c95 100%); /* IE10+ */
	background: linear-gradient(to bottom, #bacde0 0%,#7b8c95 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bacde0', endColorstr='#7b8c95',GradientType=0 ); /* IE6-9 */
}

	.hp_buttonGray:hover {
		color: White;
		background: #6b95bf; /* Old browsers */
		background: -moz-linear-gradient(top, #6b95bf 0%, #608293 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b95bf), color-stop(100%,#608293)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #6b95bf 0%,#608293 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #6b95bf 0%,#608293 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #6b95bf 0%,#608293 100%); /* IE10+ */
		background: linear-gradient(to bottom, #6b95bf 0%,#608293 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b95bf', endColorstr='#608293',GradientType=0 ); /* IE6-9 */
	}

	.hp_buttonGray:active {
		color: gray;
		background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
	}

/* Buttons Colors:Gray HIGHLIGHTED */
a.hp_buttonGrayHighlighted:link, a.hp_buttonGray:hover, a.hp_buttonGray:visited, a.hp_buttonGray:active {
	color: White;
}

.hp_buttonGrayHighlighted {
	color: white;
	border: solid 1px gray;
	background: gray;
	background-image: linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -o-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -moz-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -ms-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, gray), color-stop(0.73, gray) );
}


a.hp_buttonGrayHighlighted:active, a.hp_buttonGrayHighlighted:visited {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
}


/* Buttons Colors : DISABLED */
a.hp_buttonDisabled:link, a.hp_buttonDisabled:hover, a.hp_buttonDisabled:visited, a.hp_buttonDisabled:active {
	color: White;
}

.hp_buttonDisabled {
	color: #d9eef7;
	border: solid 1px gray;
	background: gray;
	background-image: linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -o-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -moz-linear-gradient(bottom, gray 15%,gray 73%);
	background-image: -webkit-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -ms-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, gray), color-stop(0.73, black) );
}

	.hp_buttonDisabled:hover {
		color: White;
		background: gray;
		background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
		background-image: linear-gradient(bottom,gray 4%, gray 52%);
		background-image: -o-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -moz-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -webkit-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -ms-linear-gradient(bottom, gray 4%, gray 52%);
		background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, #0016A3), color-stop(0.52, #647CD1) );
	}

	.hp_buttonDisabled:active {
		color: gray;
		background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
	}

/* Buttons Colors:Disabled HIGHLIGHTED */
a.hp_buttonDisabledHighlighted:link, a.hp_buttonDisabled:hover, a.hp_buttonDisabled:visited, a.hp_buttonDisabled:active {
	color: White;
}

.hp_buttonDisabledHighlighted {
	color: white;
	border: solid 1px gray;
	background: gray;
	background-image: linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -o-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -moz-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -ms-linear-gradient(bottom, gray 15%, gray 73%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, gray), color-stop(0.73, gray) );
}


a.hp_buttonDisabledHighlighted:active, a.hp_buttonDisabledHighlighted:visited {
	color: white;
	background: -webkit-gradient(linear, left top, left bottom, from(gray), to(gray));
}
/* AppHomeIcons*/
@font-face {
	font-family: 'apphome';
	src: url('/font/apphome.eot?cn7l0q');
	src: url('/font/apphome.eot?#iefixcn7l0q') format('embedded-opentype'), url('/font/apphome.woff?cn7l0q') format('woff'), url('/font/apphome.ttf?cn7l0q') format('truetype'), url('/font/apphome.svg?cn7l0q#apphome') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="appicon-"], [class*=" appicon-"] {
	font-family: 'apphome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 150px;
}




.appicon-corn:before {
	content: "\e600";
}


.appicon-fire:before {
	content: "\e602";
}

.appicon-dashboard:before {
	content: "\e601";
}

.appicon-dollar:before {
	content: "\f155";
}

.appicon-earth:before {
	content: "\e603";
}

.appicon-oilbarrel:before {
	content: "\e900";
}





@font-face {
	font-family: 'DataPackIcons';
	src: url('/font/DataPackIcons.eot?46f852');
	src: url('/font/DataPackIcons.eot?46f852#iefix') format('embedded-opentype'), url('/font/DataPackIcons.ttf?46f852') format('truetype'), url('/font/DataPackIcons.woff?46f852') format('woff'), url('/font/DataPackIcons.svg?46f852#DataPackIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="datapackicon-"], [class*=" datapackicon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'DataPackIcons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 150px;
}

.datapackicon-rain_drop:before {
	content: "\e900";
}

.datapackicon-population_weight:before {
	content: "\e903";
}

.datapackicon-world_map_euro:before {
	content: "\e904";
}

.datapackicon-Wind_Turbine:before {
	content: "\e905";
}

.datapackicon-solar_panel:before {
	content: "\e906";
}

/*from DataInventory page and Usercontrols*/

.splitterContainer {
	position: relative;
	width: 100%;
	height: 100%;
	top: -10000px;
	left: -10000px;
}

.ui-dialog .ui-dialog-buttonpane {
	text-align: center;
}


	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
		float: none;
	}

.mqstyle1 {
	width: 102px;
	min-width: 102px;
	height: 28px;
}

ul {
	margin-left: 1.3em;
}


.style1 {
	width: 100%;
}

.style2 {
	width: 23px;
}

img {
	border-width: 0px;
}

/* Overriding style for devexpress issues*/
tbody.padtb > td {
	padding: 4px;
}

table.padtb {
	border-collapse: separate;
	border-spacing: 4px;
}

/*bug fix: the jquery ui dialogue z index value is not big engouht
.ui-front {
	z-index: 150000 !important;
}*/

.disable_grayout, .disable_grayout span {
	background-color: lightgray;
	color: gray;
}

div #cover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	background: #000;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

.mktDoc {
	position: absolute;
	top: 23px;
	left: 680px;
	display: block;
	width: 290px;
}

	.mktDoc td {
		background-color: #e2edf8;
		padding: 3px;
		text-align: center;
	}



@media screen and (max-width:58.125em) {
	.mktDoc {
		position: static;
	}
}

/* footer css*/
.footer-distributed {
	background-color: #9DA7EC;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 30px 50px;
	margin-top: 80px;
}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right {
		display: inline-block;
		vertical-align: top;
	}

	/* Footer left */

	.footer-distributed .footer-left {
		width: 30%;
	}

	/* The company logo */

	.footer-distributed h3 {
		color: #ffffff;
		font: normal 36px 'Cookie', cursive;
		margin: 0;
	}

		.footer-distributed h3 span {
			color: #5383d3;
		}

	/* Footer links */

	.footer-distributed .footer-links {
		color: #ffffff;
		margin: 20px 0 12px;
		padding: 0;
	}

		.footer-distributed .footer-links a {
			display: inline-block;
			line-height: 1.8;
			text-decoration: none;
			color: inherit;
		}

	.footer-distributed .footer-company-name {
		color: #40464D;
		font-size: 14px;
		font-weight: normal;
		margin: 0;
	}

	/* Footer Center */

	.footer-distributed .footer-center {
		width: 30%;
	}

		.footer-distributed .footer-center i {
			background-color: #8794e9;
			color: #ffffff;
			font-size: 25px;
			width: 38px;
			height: 38px;
			border-radius: 50%;
			text-align: center;
			line-height: 42px;
			margin: 10px 15px;
			vertical-align: middle;
		}

			.footer-distributed .footer-center i.fa-envelope {
				font-size: 17px;
				line-height: 38px;
			}

		.footer-distributed .footer-center p {
			display: inline-block;
			color: #ffffff;
			vertical-align: middle;
			margin: 0;
		}

			.footer-distributed .footer-center p span {
				display: block;
				font-weight: normal;
				font-size: 14px;
				/*line-height: 2;*/
			}

			.footer-distributed .footer-center p a {
				color: #ffffff;
				text-decoration: none;
			}


	/* Footer Right */

	.footer-distributed .footer-right {
		width: 39%;
	}

	.footer-distributed .footer-company-about {
		line-height: 20px;
		color: #40464D;
		font-size: 13px;
		font-weight: normal;
		margin: 0;
	}

		.footer-distributed .footer-company-about span {
			display: block;
			color: #ffffff;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 20px;
			margin-top: 20px;
		}

	.footer-distributed .footer-icons {
		margin-top: 25px;
	}

		.footer-distributed .footer-icons a {
			display: inline-block;
			width: 35px;
			height: 35px;
			cursor: pointer;
			background-color: #8794e9;
			border-radius: 2px;
			font-size: 20px;
			color: #ffffff;
			text-align: center;
			line-height: 35px;
			margin-right: 3px;
			margin-bottom: 5px;
			padding-top: 5px;
		}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 1150px) {

	.footer-distributed {
		font: bold 14px sans-serif;
	}

		.footer-distributed .footer-left,
		.footer-distributed .footer-center,
		.footer-distributed .footer-right {
			display: block;
			width: 100%;
			margin-bottom: 40px;
			text-align: center;
		}

			.footer-distributed .footer-center i {
				margin-left: 0;
			}
}

.inline {
	display: inline-block;
	margin: 5px;
}

.logos {
	padding: 0 25px 0 25px;
}

.infotext {
	font-size: smaller;
}

.cust_form {
	/*height: 600px;*/
	width: 410px;
	margin: 25px;
	display: inline-block;
	padding:0 20px 20px 20px;
	background-color: aliceblue;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2);
}

.logo_div {
	padding: 10px;
	display: inline-block;
	width: 320px;
	text-align: center;
	vertical-align: top;
}

@media screen and (max-width:72em) {
	.cust_form {
		height: 600px;
		width: 600px;
	}
}

@media screen and (max-width:36em) {

	.cust_form {
		height: 600px;
		width: 410px;
		margin: 0;
		padding: 0;
	}

	.logos, .logo_div {
		padding-left: 0;
		padding-right: 0;
		width: 95%;
	}
}

@media screen and (max-width:30em) {

	.cust_form {
		height: 600px;
		/*width: 360px;*/
		margin: 0;
		padding: 0;
	}
}


.CTABtn_2, .CTABtn, CTABtn_3{
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	text-indent: 0;
	display: inline-block;
	color: #000000;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	height: 50px;
	line-height: 50px;
	width: 200px;
	text-decoration: none;
	text-align: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2);
}




.CTABtn{
	/*-moz-box-shadow: inset 0px 1px 0px 0px #f2e8a7;
	-webkit-box-shadow: inset 0px 1px 0px 0px #f2e8a7;*/
	/*box-shadow: inset 0px 1px 0px 0px #f2e8a7;*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41) );
	background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
	background-color: #ffce79;
	text-shadow: 1px 1px 0px #f2e8a7;
	border: 1px solid #eeb44f;
}

		.CTABtn:disabled{
			background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #acabaa), color-stop(1, #aaa8a4) );
	background: -moz-linear-gradient( center top, #d1cdc6 5%, #b0aaa1 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
	background-color: #d9d7d4;
	text-shadow: 1px 1px 0px #d1d1cf;
	border: 1px solid #928e87;
		}


	.CTABtn:hover:enabled  {
		background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79) );
		background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100% );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
		background-color: #eeaf41;
	}

.CTABtn_2 {
	/*-moz-box-shadow: inset 0px 1px 0px 0px #F2A7A7;
	-webkit-box-shadow: inset 0px 1px 0px 0px #F2A7A7;
	box-shadow: inset 0px 1px 0px 0px #F2A7A7;*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #FF7979), color-stop(1, #EE4141) );
	background: -moz-linear-gradient( center top, #FF7979 5%, #EE4141 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
	background-color: #FF7979;
	text-shadow: 1px 1px 0px #f2a7a7;
	border: 1px solid #EE4F4F;
}


	.CTABtn_2:hover:enabled  {
		background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ee4141), color-stop(1, #ff7979) );
		background: -moz-linear-gradient( center top, #ee4141 5%, #ff7979 100% );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee4141', endColorstr='#ff7979');
		background-color: #ee4141;
	}

	.CTABtn:link, .CTABtn_2:link {
		color: black;
	}

	.CTABtn:active, .CTABtn_2:active, CTABtn_3:active {
		box-shadow: inset 0 -2px 1px rgba(255,255,255,0.2), inset 0 3px 2px rgba(0,0,0,0.12);
		position: relative;
		top: 1px;
	}

	 .CTABtn_3{
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #777777), color-stop(1, #3e3e3e) );
    background: -moz-linear-gradient( center top, #777777 5%, #3e3e3e 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#777777', endColorstr='#3e3e3e');
    background-color: #b5b5b5;
    text-shadow: 1px 1px 0px #e8e8e8;
    border: 1px solid #656565;

	 }


.dialogWithDropShadow {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/*.wrapper {
	overflow: hidden;
}*/

.CTA_Text, .CTA_Text_Quote, .CTA_Text_Large, .CTA_Text_Sub, .CTA_Text_SW {
	color: white;
	text-shadow: 0 0 6px #000000;
	font-weight: normal;
	padding: 15px;
}


.CTA_Text_SW {
	/*font-family: 'Century Gothic', Tahoma, Geneva, Verdana, sans-serif;*/
	font-size: 23pt;
}

.CTA_Text_Large {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 20pt;
}

.CTA_Text, .CTA_Text_Sub {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 16pt;
}

.CTA_Text_Quote {
	font-family: 'Times New Roman', Times, serif;
	font-style: italic;
	font-size: xx-large;
}

.CTA_Text_Sub {
	padding: 0;
}

.Main_Exp_div {
	width: 500%;
	margin-left: -200%;
	/*margin-top: -23px;*/
	height: 400px;
	text-align: center;
}


.rotator_ul {
	height: 400px !important;
	/*top: -18px;*/
}

#rotator .slide {
	height: 400px;
}

.exp_convtainer_div {
	height: 400px;
	text-align: center;
}

.container_div {
	margin: 0 auto;
	width: 960px;
}

.grad1 {
	height: 15px;
	background: -webkit-linear-gradient(#808080, white); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#808080, white); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#808080, white); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#808080, white); /* Standard syntax (must be last) */
}

hr {
	border-width: 0px;
	height: 1px;
	margin: 25px 0;
	background-color: lightgray;
}

.Arrow {
	width: 64px;
	height: 64px;
	background: url(/Images/HomePageBanner/SelArrow.png) no-repeat;
	position: absolute;
	bottom: 0;
	/*z-index:999999;
			
			top:64px;*/
}


#SPArrowHide {
	background-color: white;
	top: 370px;
	height: 30px;
	position: absolute;
	width: 500%;
	left: -200%;
	display: none;
}


@media screen and (max-width: 72.875em) {

	/*.container_div {
				width: 72.875em;
			}*/

	/*.CTA_Text_Large {
				font-size: 16pt;
			}

			.CTA_Text {
				font-size: 14pt;
			}

			.CTA_Text_Quote {
				font-size: x-large;
			}*/
}

@media screen and (max-width: 52.75em) {


	#SPArrowHide {
		display: block;
	}

	.container_div {
		width: 52em;
	}

	.CTA_Text_Large {
		font-size: 16pt;
	}

	.CTA_Text {
		font-size: 12pt;
	}

	.CTA_Text_Quote {
		font-size: x-large;
	}
}

@media screen and (max-width: 43em) {
	.container_div {
		width: 43em;
	}
}

@media screen and (max-width:36em) {
	.container_div {
		width: 400px;
	}
}
@media screen and (max-width:30em) {
	.CTA_Text_Quote {
		font-size: large;
	}
}

@media screen and (max-width:25em) {
	.container_div {
		width: 310px;
	}
}

.PicFrame {
	background-color: white;
	border: 10px solid white;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}



@media screen and (min-width: 43.001em) {
	.ForDeskTops {
		visibility: visible;
	}

	.ForSmartPhones {
		visibility: hidden;
		display: none !important;
	}
}

@media screen and (max-width: 43em) {
	.ForDeskTops {
		visibility: hidden;
		display: none !important;
	}

	.ForSmartPhones {
		visibility: visible;
	}
}


.click_box {
	text-align: center;
	padding: 8px 0;
	font-family: 'Helvetica Neue',Roboto,'Segoe UI',Calibri,sans-serif;
	font-size: Large;
	font-weight: bold;
}

p.click_box a {
	padding: 8px;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffce79), color-stop(1, #eeaf41) );
	background: -moz-linear-gradient( center top, #ffce79 5%, #eeaf41 100% );
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffce79', endColorstr='#eeaf41');
	background-color: #ffce79;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2);
	color: #000000;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.7);
	font-weight: bold;
	font-size: small;
	display: inline-block;
	width: 130px;
}

	p.click_box a:hover {
		background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #eeaf41), color-stop(1, #ffce79) );
		background: -moz-linear-gradient( center top, #eeaf41 5%, #ffce79 100% );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeaf41', endColorstr='#ffce79');
		background-color: #eeaf41;
	}

	p.click_box a:active {
		box-shadow: inset 0 -2px 1px rgba(255,255,255,0.2), inset 0 3px 2px rgba(0,0,0,0.12);
		position: relative;
		top: 1px;
	}


/*reposition banner navigation*/
.next-icon {
	right: -2900px;
	top: -230px;
}

.prev-icon {
	left: 1847px;
	top: -230px;
}


@media screen and (max-width:72.875em) {

	.next-icon {
		right: 0;
		top: -230px;
	}

	.prev-icon {
		left: 0;
		top: -230px;
	}
}


.prev-icon, .next-icon {
	position: absolute;
	text-align: center;
}







#twitterfeed {
	width: 458px;
	display: inline-block;
	padding: 0 0 15px 25px;
}

@media screen and (max-width:72.875em) {
	#twitterfeed {
		padding: 0;
	}
}