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

/* App Framwork */
#capp_container { padding: 25px 35px 25px 20px; background: #fff !important; }
#capp_selTreadDepth {
	height: 35px;
	margin-bottom: 14px;
	border: #ababab 1px solid;
	background: url(../images/ui_bgSprite.png) repeat-x 0px 0px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#capp_selTreadDepth ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#capp_selTreadDepth ul li { float: left; margin: 0; padding: 0; text-align: center; width: 85px; height: 35px; line-height: 35px; color: #2c3d46; font-weight: bold; font-size: 18px; }
#capp_selTreadDepth ul li.capp_depth { cursor: pointer; }
#capp_selTreadDepth ul li.capp_depth:first-child { 
	-webkit-border-top-left-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
#capp_selTreadDepth ul li.capp_depth:last-child { 
	width: 92px;
	-webkit-border-top-right-radius: 2px;
	-webkit-border-bottom-right-radius: 2px;
	-moz-border-radius-topright: 2px;
	-moz-border-radius-bottomright: 2px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}
#capp_selTreadDepth ul li.capp_depth.capp_selected { background: url(../images/ui_bgMenu.jpg) repeat-x; color: #fff; }
#capp_selTreadDepth ul li.capp_sep { width: 11px; background: url(../images/ui_imgSprite.png) 0px -405px no-repeat; height: 35px; }
#capp_selTreadDepth ul li.capp_sep.capp_selectedFront { background-position: -32px -405px; }
#capp_selTreadDepth ul li.capp_sep.capp_selectedBack { background-position: -16px -405px; }
#capp_selTreadDepth ul span { line-height: 35px; font-size: 14px; }

/* Info Boxes */
.capp_infoBox {
	-webkit-box-shadow: 0px 1px 4px 0px rgba(172, 172, 172, 0.75);
	 box-shadow: 0px 1px 4px 0px rgba(172, 172, 172, 0.75);
	 padding: 10px;
	 margin: 0 0 10px;
}
.capp_infoBox h2 { background-color: #eaeeed; line-height: 30px; margin: 0 0 8px; padding: 0 8px; font-size: 13px; color:#000; }
#capp_dashboard { width: 495px; height: 206px; background: url(../images/ui_imgSprite.png) no-repeat 0px -189px #000; float: left; margin-right: 10px; position: relative; }
#capp_howToCheck { width: 385px; height: 186px; background-color: #fff; float: left; position: relative;margin-left:1px !important; }
#capp_howToCheck p { width: 145px; padding: 0 0 0 8px; font-size: 13px; line-height: 18px; color:#000; }
#capp_stoppingDistance { background-color: #fff; position: relative; }
#capp_tyreSprite { width: 228px; height: 179px; position: absolute; right: 10px; top: 17px; background: url(../images/ui_imgSprite.png) no-repeat 0px 0px; }
#capp_didYouKnowOverlay { position: absolute; display:none; top: 10px; left: 10px; width: 385px; height: 186px; background: url(../images/ui_imgSprite.png) no-repeat bottom right #fff;}
#capp_didYouKnowOverlay p { width: 230px; margin-bottom: 6px; }
#capp_didYouKnowOverlay p.capp_wide { width: 280px; }

/* Graph Areas */
#capp_stoppingDistanceGraph { width: 100%; height: 200px; background: url(../images/ui_bgGraph.jpg) repeat-x; }
#capp_stoppingDistanceGraphLegend {
	position: absolute;
	padding: 6px 5px 8px 8px;
	background-color: #fff;
	right: 30px;
	top: 63px;
	z-index: 5000;
	border: 1px solid #909090;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	height: 10px;
	-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.35);
	-moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.35);
	box-shadow:         1px 1px 5px rgba(50, 50, 50, 0.35);
}
#capp_legendOrange, #capp_legendBlue { float: left; margin-right: 5px; height: 12px; width: 16px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
#capp_legendOrange { background-color: #ff8622; }
#capp_legendBlue { background-color: #2673ac; }
#capp_legendVariable { margin-right: 10px; }
#capp_legendVariable, #capp_legend8mm { float: left; color: #3e576f; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
#capp_increaseGraph, #capp_remainingGraph { width: 174px; height: 174px; position: absolute; }
#capp_increaseGraph { left: 5px; top: 23px; }
#capp_remainingGraph { left: 315px; top: 20px; }
#capp_wearGraph { width: 82px; height: 139px; top: 10px; left: 203px; position: absolute; }
#capp_wearText { color: #fff; font-size: 9px; font-family: Arial, Helvetica, sans-serif; text-align: center; height: 20px; line-height: 9px; }
#capp_wearOuterGraphContainer { height: 100px; padding: 11px 0px 9px; background-color: #2ca000; }
#capp_wearInnerGraphContainer { height: 109px; background: url(../images/ui_bgWear.png) no-repeat; background-position: bottom; position: relative; }
#capp_carBar { position: absolute; width: 19px; height: 38px; left: 41px; top: 71px; background: url(../images/ui_car.png) no-repeat; }

/* General CSS */
.capp_clear { clear: both; }
.capp_center { text-align: center; }
.noPad { padding: 0; }