/* ================ drag and drop  ================ */
.what-is-temperature{
	position: relative;
}

#temperatureContent .cool-fact{
	display: inline-block;
	font-size: .9em;
}

.what-is-temperature a{
	background: none;
	padding: 0;
}

.too-hot{
	height: 560px;
	background: url(../images/too-hot-river.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}

/*.too-hot .droppable{ outline: solid 1px #f00; }*/

/*
.too-cold{
	height: 462px;
	background: url(../images/thermometer-river.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}

.too-cold .droppable{ outline: solid 1px #120A8F; }
*/
/*
#tree{
	top: 0;
	left: 0;
}
*/
/*
.droppable{ outline: solid 1px #f00; }

.too-hot-no-wrong{ outline: solid 1px #000; }

.too-hot-yes-correct{ outline: solid 1px #ff0; }
*/

#fan{
	width: 200px;
	height: 74px;
	position: absolute;
	top: 90px;
	right: 27px;
}

#fan-2{
	width: 111px;
	height: 65px;
	position: absolute;
	top: 146px;
	right: 229px;
}

#fan-3{
	width: 93px;
	height: 57px;
	position: absolute;
	top: 182px;
	right: 343px;
}

#lemonade{
	top: 0;
	right: 0;
}

#tree{
	width: 140px;
	height: 40px;
	position: absolute;
	bottom: 107px;
	right: 27px;
}

#too-hot-yes-2{
	width: 165px;
	height: 40px;
	position: absolute;
	bottom: 157px;
	right: 230px;
}

#too-hot-yes-3{
	width: 100px;
	height: 12px;
	position: absolute;
	bottom: 206px;
	right: 330px;
}

#too-hot-no-1{
	width: 613px;
	height: 560px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#too-hot-no-2{
	width: 200px;
	height: 55px;
	position: absolute;
	top: 0;
	right: 27px;
}

#too-hot-no-3{
	width: 200px;
	height: 130px;
	position: absolute;
	top: 200px;
	right: 27px;
}

#too-hot-no-4{
	width: 200px;
	height: 80px;
	position: absolute;
	bottom: 0;
	right: 27px;
}


#too-hot-no-5{
	width: 612px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
}

#too-hot-no-6{
	width: 570px;
	height: 35px;
	position: absolute;
	top: 101px;
	left: 0;
}

#too-hot-no-7{
	width: 500px;
	height: 35px;
	position: absolute;
	top: 137px;
	left: 0;
}

#too-hot-no-8{
	width: 370px;
	height: 49px;
	position: absolute;
	top: 173px;
	left: 0;
}

#too-hot-no-9{
	width: 611px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#too-hot-no-10{
	width: 400px;
	height: 52px;
	position: absolute;
	bottom: 103px;
	left: 0;
}

#too-hot-no-11{
	width: 253px;
	height: 29px;
	position: absolute;
	bottom: 160px;
	left: 30px;
}

#too-hot-no-12{
	width: 180px;
	height: 30px;
	position: absolute;
	top: 270px;
	right: 230px;
}

#too-hot-no-13{
	width: 400px;
	height: 115px;
	position: absolute;
	top: 224px;
	left: 0;
}

.what-is-temperature .fish{
	width: 185px;
	height: 65px;
	display: block;
	cursor: pointer;
	position: absolute;
	top: 243px;
	left: 20px;
	z-index: 1000;
	background: url(../images/trout.svg) no-repeat 0 0;
	background-size: contain;
	opacity: .8;
	-webkit-transform: scale(.8);
}

#replaceTooHotFish{
	width: 425px;
	height: 95px;
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 0;
}

.what-is-temperature .active-fish{
	opacity: 1;
	-webkit-transform: scale(1);
}

.answer-yes{
	background: #3d81a7;
	box-shadow: 0 0 12px rgba(0,0,0,.8);
}

.answer-no{
	background: #b81d1d;
	box-shadow: 0 0 12px rgba(0,0,0,.8);
}

.animated-fish{
	width: 210px;
	height: 72px;
	position: absolute;
	top: 180px;
	right: 90px;
}

.animated-fish-default{
	background: url(../images/animated-trout.svg) no-repeat 0 -216px;
	background-size: 210px 288px;
	opacity: 1;
	z-index: 100;
}

.animated-fish-step-1{
	background: url(../images/animated-trout.svg) no-repeat 0 0;
	background-size: 210px 288px;
	z-index: 200;
}

.animated-fish-step-2{
	background: url(../images/animated-trout.svg) no-repeat 0 -72px;
	background-size: 210px 288px;
	z-index: 200;
}

.animated-fish-step-3{
	background: url(../images/animated-trout.svg) no-repeat 0 -144px;
	background-size: 210px 288px;
	z-index: 200;
}




/*
.temperature-answers{
	padding: 0 20px 40px 20px;
	outline: solid 1px #f00;
}
*/








/* ================= thermometer ================= */
.too-cold{
	width: 842px;
	height: 459px;
	background: url(../images/thermometer-words-river.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}
/*
.thermometer{
	width: 167px;
	height: 459px;
	background: url(../images/thermometer.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}
*/
#slider-vertical{
	width: 43px;
	height: 128px;
	position: absolute;
	top: 91px;
	left: 70px;
}
/*
.ui-slider-handle{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #f00;
	position: absolute;
	left: 10px;
	z-index: 1000;
	outline: solid 1px #f00;
}
*/

.ui-slider-vertical .ui-slider-range-min {
bottom: 0;
}
.ui-slider-vertical .ui-slider-range {
left: 0;
width: 100%;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
/*
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px;
}
*/
.ui-slider .ui-widget-header {
	background: #cccccc url(../images/thermometer-background.svg) 50% 50% repeat-y;
}
/*
user agent stylesheetdiv {
display: block;
}
Inherited from div#slider-vertical.ui-slider.ui-slider-vertical.ui-widget.ui-widget-content.ui-corner-all
.ui-widget-content {
color: #222222;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
}
*/
.ui-slider {
text-align: left;
}

.ui-slider-vertical .ui-state-default{
	border: 1px solid #d3d3d3;
	background: #e6e6e6;
	font-weight: normal;
	color: #555555;
}
.ui-slider-vertical .ui-slider-handle {
left: -.3em;
margin-left: 0;
margin-bottom: -.6em;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}

.ui-slider .ui-slider-handle{
	width: 52px;
	height: 52px;
	border-radius: 50%;
	left: -5px;
	margin-bottom: -26px;
	z-index: 1000;
	box-shadow: 0 0 6px rgba(0,0,0,.7);
}

.ui-slider .ui-widget-content a { color: #222222; }
/*
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 4px;
}
*/
.ui-slider .ui-state-default, .ui-slider .ui-widget-content .ui-state-default, .ui-slider .ui-widget-header .ui-state-default {
	border: 3px solid #fff;
	background: -webkit-radial-gradient(75% 75%, rgba(255,158,158,1) 0%,rgba(196,0,0,1) 100%);
	/*background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;*/
	font-weight: normal;
	color: #555555;
}
/*
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
*/
/*
.ui-slider.ui-slider-vertical.ui-widget.ui-widget-content.ui-corner-all
.ui-widget-content {
color: #222222;
}

.ui-slider .ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.1em;
}
*/
.ui-slider {
text-align: left;
}