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

/*holds all of the slider elements and the button for the text box*/
.container{
	border-color: #999999;
	border-width:3px;
	border-style: solid;
	background-color:#dddddd;
	height:72px;
	width:241px;
	top:-5px;
	z-index:40;
}

/*holds all of the slider elements and the button for the text box*/
#numberOfCarsContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

#fuelConsumptionContainer{
	position:absolute;
	top:210px;
	left:445px;
	width:500px;
}

#averageDistanceContainer{
	position:absolute;
	top:310px;
	left:445px;
	width:500px;
}

#coalPlantEfficiencyContainer{
	position:absolute;
	top:160px;
	left:445px;
	width:500px;
}

#amountCoalPowerContainer{
	position:absolute;
	top:260px;
	left:445px;
	width:500px;
}

#numberOfLightsContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

#percentageLightsContainer{
	position:absolute;
	top:210px;
	left:445px;
	width:500px;
}

#efficientBuildingsContainer{
	position:absolute;
	top:310px;
	left:445px;
	width:500px;
}

#windEnergyContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

#pSolarEnergyContainer{
	position:absolute;
	top:160px;
	left:445px;
	width:500px;
}

#cSolarEnergyContainer{
	position:absolute;
	top:160px;
	left:445px;
	width:500px;
}

#nuclearEnergyContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

#ccContainer{
	position:absolute;
	top:160px;
	left:445px;
	width:500px;
}

#geothermalContainer{
	position:absolute;
	top:160px;
	left:445px;
	width:500px;
}

#percentageBiofuelContainer{
	position:absolute;
	top:210px;
	left:445px;
	width:500px;
}

#annualDeforestationContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

#ctContainer{
	position:absolute;
	top:110px;
	left:445px;
	width:500px;
}

/*holds the slider and its results*/
.panel{
	position:relative;
	left:30px;
	background-color:#dddddd;
	width:250px;
}

.slider {
	top:5px;
	width:450px;
	height:9px;
	background:url(img/slider-bg.png);
	position:relative;
	margin:0;
}


/*Style for the slider button*/
.ui-slider-horizontal .ui-slider-handle {
	width:14px;
	height:22px;
	position:absolute;
	top:-6px;
	margin-left:-12px;
	z-index:200;
	background:url(img/slider-button2.png);
	border: none;
}

/*Result div where the slider value is displayed*/
.slider-result {
	font-size:14px;
	height:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#112233;
	width:450px;
	text-align:right;
	position:relative;
	font-weight:100;
	top:-18px;
}

/*what the slider is changings name*/
.slider-text {
	font-size:16px;
	height:0px;
	font-family:"Times New Roman", Times, serif;
	color:#112233;
	width:500px;
	text-align:left;
	font-weight:50;
	top:18px;
}

a {
	outline:thin;
	-moz-outline-style:none;
}

/*the button that displays the text box*/
.numericButton{
	position:absolute;
	top:20px;
	left:2px;
	background-color:transparent;
	background-image:url(img/changeData.gif);/*this address has to be changed slightly to accesss the icon*/
	border-color: #999999;
    border-width:2px;
    border-style: solid;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	display:inline-block;
	color:#666666;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	font-style:normal;
	height:16px;
	line-height:16px;
	width:17px;
	text-decoration:none;
	text-align:center;
	z-index:300;
}

/*changes the image on the button when it is hovered over*/
.numericButton:hover{
	position:absolute;
	top:20px;
	left:2px;
	background-color:transparent;
	background-image:url(img/changeData.gif);/*this address has to be changed slightly to accesss the icon*/
	border-color: #999999;
    border-width:2px;
    border-style: solid;
	background-image:url(img/changeData_over.gif);/*this address has to be changed slightly to accesss the icon*/
}

/*changes the position and dimensions of the text box*/
.textEntry{
	position:absolute;
	top:43px;
	left:210px;
	width: 8;
	font-family:Arial;
	font-size:14px;
	font-style:normal;
	height:16px;
	z-index:300;
}

.max{
	width:450px;
	position:relative;
	text-align:right;
	top:20px;
}