/* Buttons - from Steve, 5/26/2010*/
/* Yellow Button with Blue Hover */
.yellowImageButton {
	width: 100px; /* total width of button */
}
.yellowImageButton a.buttons {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowRight.png) no-repeat top right;
	display: block;
	float: left;
	height: 25px;
	margin: 10px 6px 10px 20px;
	padding-right: 18px;
	text-decoration: none;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.yellowImageButton a.buttons span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowLeft.png) no-repeat top left;
	color: #000;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
	white-space: nowrap;
}
.yellowImageButton a.buttons:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	display: inline;
	float: left;
	height: 25px;
	margin-right: 6px;
	padding-right: 18px;
	text-decoration: none;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.yellowImageButton a.buttons:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
}


/* Green Button with Blue Hover */
.greenImageButton {
	width: 100px; /* total width of button */
}
.greenImageButton a.buttons{
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGreenRight.png) no-repeat top right;
	display: block;
	float: left;
	height: 25px;
	margin: 10px 6px 10px 20px;
	padding-right: 18px;
	text-decoration: none;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.greenImageButton a.buttons span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGreenLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
	white-space: nowrap;
}
.greenImageButton a.buttons:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	display: inline;
	float: left;
	height: 25px;
	margin-right: 6px;
	padding-right: 18px;
	text-decoration: none;
	color: #ffff00;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.greenImageButton a.buttons:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #ffff00;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
}


/* Blue Button with Yellow Hover */
.blueImageButton {
	width: 100px; /* total width of button */
}
.blueImageButton a.buttons {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	display: block;
	float: left;
	height: 25px;
	margin: 10px 6px 10px 20px;
	padding-right: 18px;
	text-decoration: none;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.blueImageButton a.buttons span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
	white-space: nowrap;
}
.blueImageButton a.buttons:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowRight.png) no-repeat top right;
	display: inline;
	float: left;
	height: 25px;
	margin-right: 6px;
	padding-right: 18px;
	text-decoration: none;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.blueImageButton a.buttons:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowLeft.png) no-repeat top left;
	color: #000;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
}

/* Gray Disabled Button with No Hover */
.grayImageButton {
	width: 100px; /* total width of button */
}
.grayImageButton a.buttons {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayRight.png) no-repeat top right;
	display: block;
	float: left;
	height: 25px;
	margin: 10px 6px 10px 20px;
	padding-right: 18px;
	text-decoration: none;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.grayImageButton a.buttons span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
	white-space: nowrap;
}
/*.grayImageButton a.buttons:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayRight.png) no-repeat top right;
	display: inline;
	float: left;
	height: 25px;
	margin-right: 6px;
	padding-right: 18px;
	text-decoration: none;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
.grayImageButton a.buttons:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayLeft.png) no-repeat top left;
	color: #000;
	display: block;
	line-height: 25px;
	padding: 0 0 0 18px;
}*/



/* INPUT buttons */
.yellowImageInputButton {
	width: 100%;
}
.yellowImageInputButton button {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowRight.png) no-repeat top right;
	color: #000;
	height: 25px;
	/*margin: 10px 6px 10px 0;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border: none;
	padding: 0 2px; /* fix Chrome bug with missing right image */
}
.yellowImageInputButton button span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowLeft.png) no-repeat top left;
	color: #000;
	display: block;
	line-height: 25px;
	margin: -2px 0 0 0;
	*margin: 0;  /* IE hack*/
	padding: 0 10px 0 14px;
}
.yellowImageInputButton button:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	color: #fff;
	height: 25px;
}
.yellowImageInputButton button:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #fff;
	line-height: 25px;
}


.greenImageInputButton {
	width: 100%;
}
.greenImageInputButton button {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGreenRight.png) no-repeat top right;
	color: #fff;
	height: 25px;
	/*margin: 10px 0 10px 0;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border: none;
	padding: 0 2px; /* fix Chrome bug with missing right image */
}
.greenImageInputButton button span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGreenLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	margin: -2px 0 0 0;
	*margin: 0 2px;  /* IE hack*/
	padding: 0 10px 0 14px;
}
.greenImageInputButton button:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	color: #fff;
	height: 25px;
}
.greenImageInputButton button:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #fff;
	line-height: 25px;
}


.blueImageInputButton {
	width: 100%;
}
.blueImageInputButton button {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueRight.png) no-repeat top right;
	color: #fff;
	height: 25px;
	/*margin: 10px 6px 10px 0;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border: none;
	padding: 0 2px; /* fix Chrome bug with missing right image */
}
.blueImageInputButton button span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgBlueLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	margin: -2px 0 0 0;
	*margin: 0;  /* IE hack*/
	padding: 0 10px 0 14px;
}
.blueImageInputButton button:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowRight.png) no-repeat top right;
	color: #000;
	height: 25px;
}
.blueImageInputButton button:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowLeft.png) no-repeat top left;
	color: #000;
	line-height: 25px;
}

.grayImageInputButton {
	width: 100%;
}
.grayImageInputButton button {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayRight.png) no-repeat top right;
	color: #fff;
	height: 25px;
	/*margin: 10px 6px 10px 0;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	border: none;
	padding: 0 2px; /* fix Chrome bug with missing right image */
}
.grayImageInputButton button span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgGrayLeft.png) no-repeat top left;
	color: #fff;
	display: block;
	line-height: 25px;
	margin: -2px 0 0 0;
	*margin: 0;  /* IE hack*/
	padding: 0 10px 0 14px;
}
.grayImageInputButton button:hover {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowRight.png) no-repeat top right;
	color: #000;
	height: 25px;
}
.grayImageInputButton button:hover span {
	background: transparent url(/Shared/Styles/esriCore2010/images/buttonBgYellowLeft.png) no-repeat top left;
	color: #000;
	line-height: 25px;
}
/* end INPUT buttons */

<html xmlns="http://www.w3.org/1999/xhtml"><body xmlns="http://www.w3.org/1999/xhtml"><div xmlns="http://www.w3.org/1999/xhtml"><img width='77' height='5' src='chrome://livemargins/skin/monitor-background-horizontal.png' style='position: absolute;left:-77px;top:-5px'/> <img src='chrome://livemargins/skin/monitor-background-vertical.png' style='position: absolute;left:0;top:-5px;'/> <img id='monitor-play-button' src='chrome://livemargins/skin/monitor-play-button.png' onmouseover='this.style.opacity=1' onmouseout='this.style.opacity=0.5' style='position: absolute;left:1px;top:0;opacity:0.5;cursor:pointer'/>