body { 
font-family: 'Open Sans', sans-serif;
}

p{
margin:15px 0;
}

a{
cursor:pointer;
}

#slider {
	width:600px;
	height:250px;
	/*IE bugfix*/
	padding:0;
	margin:0;
	}

#slider li { list-style:none; }

/*************My Styles**************/
a{ display:block;}
.bigSprite{
	background-repeat:no-repeat;
	background-image:url(../images/journey/elements.png);
	background-position: top left;
	}
.swipesGreen{
	background-position: 0 -1px;
	width: 290px;
	height: 242px;
	}
.swipesRed{
	background-position: -347px -1px;
	width: 289px;
	height: 242px;
	}
.swipesBlue{
	background-position:-669px 0;
	width: 344px;
	height: 216px;
	}
.swipesGrey{
	background-position:-702px -512px;
  	width: 290px;
	height: 242px;
	}
.chooseEnvironment{
	background-position: -24px -266px;
	width: 243px;
	height: 74px;
	margin-left: 130px;
	}
.journeyComplete{
	background-position: -24px -342px;
	width: 243px;
	height: 100px;
	}
.viewResults{
	background-position: -24px -445px;
	width: 243px;
	height: 80px;
	}
.introHeading{
	background-position: -304px -266px;
	width: 446px;
	height: 126px;
	margin:0 auto;
	}
.switchBackground{
	padding-top: 11px;
	background-position: -318px -414px;
	width: 111px;
	height: 35px;
	padding-left: 10px;
	}
.switchBackground:hover{
	background-position: -318px -463px;
		}


.switchOnOff{
	background-position: -456px -414px;
	width: 61px;
	height: 27px;
	}
.switchOnOff:hover{
	background-position: -456px -447px;
	}
.btn.black_left{
	background-position:  -28px -546px;
	width: 117px;
	height: 38px;
	}
.btn.black_left:hover{
	background-position: -28px -589px;
	width: 117px;
	height: 38px;
	}
.btn.blue_right{
	background-position: -159px -546px;
	width: 117px;
	height: 39px;
	}
.btn.blue_right:hover{
	background-position: -159px -589px;
	}
/*.btn.green{
	background-position: -289px -546px;
	width: 117px;
	height: 39px;
	}
.btn.green:hover{
	background-position: -289px -589px;
	}
*/
.btn.orange{
	/*background-position: -423px -546px;*/
	background-position: -460px -546px;
	width: 118px;
	height: 39px;
	}
.btn.orange:hover{
	background-position: -460px -589px;
	}
.btn.close{
text-decoration: none;
float: right;
margin-right: -401px;
margin-top: 225px;
font-size: 13pt;
font-weight: 700;
color: white;
padding-top: 10px;
padding-left: 9px;
height: 29px;
}
a.cloudBtns{
	margin-right: 20px;
	float: left;
	width: 180px;
	height: 117px;
	position:relative;
	opacity:0;
	bottom:-300px;
	text-indent:-9999px;
	border:0;
	background-color:transparent;
	cursor:pointer;
	}
a.cloudBtns.first{
	margin-left:60px;
	margin-top: 20px;
	}
a.cloudBtns.middle{
	margin-top: 60px;
	}
a.cloudRural{
	background-position:-20px -647px;
	}
a.cloudRural:hover{
	background-position:-20px -789px;
	}

a.cloudDesert{
	background-position:-220px -647px;
	}
a.cloudDesert:hover{
	background-position:-220px -789px;
	}

a.cloudCity{
	background-position:-420px -647px;
	}
a.cloudCity:hover{
	background-position:-420px -789px;
	}
#introOnly{
	z-index:9;
	}
#introOnly2{
	display:none;
	z-index:9;
	}
#gps{
	margin: 50px auto 0;
padding: 115px 95px 0px 95px;
width: 705px;
height: 490px;
background: url(../images/journey/gps.png) no-repeat top left;
position:relative;
/*	padding: 115px 95px 0px 95px;
	width:825px;
	height:635px;
	background:url(../images/journey/gps.png) no-repeat top left;
*/	}
#gps .contentArea{
/*	padding-top: 20px;
*/	width:708px;
	height:405px;
	overflow:hidden;
	position: relative;
	z-index:10;
	/*top: 300px;
*/	}
.backgroundImages{
	float:left;
	height:410px;
	width:709px;
	z-index:-10;
	position:absolute;
 	top:0;
 	right:0;
 	opacity:.8;
	background-position: 0 0;	
 }
 #elementWrapper{
	 z-index:2;
	 }
#gps #map{
	background:url(../images/journey/backMap.jpg) no-repeat -13px -149px;
	}
#slideshow_holder{
	position:absolute;
	top:0;
	left:0;
	}
#slideshow_holder, .rhino-container{
	z-index:10;}
#slider.back_rural{
	background:url(../images/journey/backRural.jpg) no-repeat;
	}
#slider.back_desert{
	background:url(../images/journey/backDesert.jpg) no-repeat;
	}
#slider.back_city{
	background:url(../images/journey/backCity.jpg) no-repeat;
	}
#slider .left{
	width:500px;
	margin: 25px 0 0 25px;	
	}
#slider .center{
	width:345px;
	margin:0 auto;
	}
#slider .center h2.mainTitle {
	margin:0;
}
#slider .results{
	width:620px;
	margin:35px auto 0;	
	}
#introBlock{
	top:-300px;
	position: relative;
	opacity: 0;
}
.resultsHolder{
	background:url(../images/journey/resultsBox.png) no-repeat top left;
	width: 244px;
	height: 263px;
	padding: 25px 57px;
	font-size:10pt;
	}

span.makemodel{
	display:inline;
	}

.flLeft{
	float:left;
	}
.flRight{
	float:right;}
span{
	display:block;}
.circleImgs{
	position:relative;
	width:400px;
	height:185px;
/*	margin-left:30px;*/
	z-index:1;
	margin-top:-20px;
	}
.circleImgs.static{
	bottom: 80px;
	}
.circleImgs img{
	padding:0;
	float:left;
}
.circleImgs img.first{
	z-index: -2;
	}
.circleImgs img.second{
	margin:35px 0px 0px -15px;
	z-index: -1;
	}
.circleImgs img.third{
	z-index: 0;
	margin-left:-15px;
	}
.left .circleImgs img.first,
.left .circleImgs img.third{
	padding-top:25px;	
	}
.left .circleImgs img.second{
	padding-top:15px;	
	}
.controls img.scale{
	padding-bottom:40px;
	margin:0 auto;
	opacity:.7;
	}
.controls{
	background:red;
	float: right;
	width: 200px;
	height: 440px;
	padding: 10px 35px 35px 35px;
	text-align: center;
	line-height: 10pt;
	}
.controls.green{
	background:url(../images/journey/trans_green.png) repeat top left;
	height:360px;
/*	padding-top:100px;
*/	}
.controls.blue{
	background:url(../images/journey/trans_blue.png) repeat top left;
	}

#slider {
	width: 708px;
	height: 405px;
	padding: 0;
	margin: 0;
	overflow-y: visible;
}
.rhino-container {
	z-index:-8;
	}
h2.mainTitle{
/*	margin-top: 40px;
	margin-left: 75px;*/
	margin-left: 40px;
	padding: 0;
	z-index:-1;
}		
/*****************************Drop Down **************************/
ul
{
  list-style:none;
  padding:0px;
  margin:0px
}
ul#changeBackground {
z-index: 999;
position: absolute;
top: 135px;
left: 114px;
	}

ul#changeBackground li
{
  display:inline;
/*  float:left;
*/}

ul#changeBackground li a.dropdown
{
  color:#4183c4;
  margin-right:5px;
  font-weight:bold;
  font-size:16px;
  text-decoration:none;
  display:block;
  text-align:left;

}


ul#changeBackground li.sublinks a
{
  color:#6e95b6;
/*  margin-right:5px;*/
  font-size:12px;
  text-decoration:none;
  display:block;
 line-height:25px;
  text-align:center;

}

/*ul#changeBackground li a:hover
{
  color:#cccccc;
  background:#560E00;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;
}
*/

ul#changeBackground li.sublinks{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border: 1px solid #176AB6;
	background-color: white;
}
ul#changeBackground li.sublinks a
{
border-bottom: 1px solid #EAEAEA;
font-size: 8pt;
font-weight: 700;
cursor: pointer;	
/* padding: 5px 10px;
 color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  margin-top:2px;*/
}

ul#changeBackground li.sublinks a:hover
{
	background-color:#eaf3ff;
/*  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
*/}

ul#changeBackground li.sublinks{
	display:none;
}

#imageWrap img{
	position:absolute;
	z-index:1;
    background:url(../images/ajax-loader.gif) center center no-repeat; 
	}
div.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	z-index: 1000;
}
div.resultBar{
	background:url(../images/journey/inputGradient.png) repeat-x top left;
	height: 15px;
	width: 194px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
	color:#fff;
	padding:6px 11px;
	}

p.disclaimer{
	font-size:8pt;
	margin-top:40px;
	}

.rhino-firstItem h2.first,
.rhino-firstItem .circleImgs.first,
.rhino-firstItem .controls.first{
	position:relative;
}
.rhino-firstItem h2.first{
	top:-300px;
}
/*.rhino-firstItem .circleImgs.first img{
	top:-300px;
}*/
.rhino-firstItem  .circleImgs.first img{
	float: left;
	position:relative;
	opacity:0;
	bottom:-300px;
	}
.rhino-firstItem .wrapperControls.first{
	right:-300px;
}
.rhino-prev{
	display:none;
}
.rhino-firstItem .controls.first{
	right:-300px;	
}

select{
visibility:hidden;
position:absolute;
}

label{
font-size:9pt;
color:#fff;
position:relative;
top:-3px;
}

input[type=checkbox]{
background-image:url(../images/checkbox_off.html);
background-repeat:no-repeat;
width:61px;
height:27px;
-webkit-appearance: none;
cursor:pointer;
}

input[type=checkbox]:checked{
background: url(../images/checkbox_on.html);
}

.miniBlue{
	background-position: -753px -253px;
    width: 122px;
    height: 45px;
    color:#fff;
    font-size:7pt;
    font-weight:700;
    padding-top:28px;
	padding-left:33px;
	cursor:pointer;
	position:relative;
	z-index:12;
}

.miniWhite{
	background-position: -753px -330px;
    width: 127px;
    height: 45px;
    float:left;
    display:inline-block;
    color:#176ab6;
    font-size:7pt;
    font-weight:700;
    padding-top:28px;
	padding-left:22px;
	margin-right:4px;
}

div.dropdown_holder{
    float:left;
    display:inline-block;
    margin-left:-8px;
}

div.introdropdown{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border:1px solid #176ab6;
background-color:#fff;
width:130px;
position:relative;
z-index:11;
margin-top:-18px;
margin-left:11px;
height:0;
overflow-y:auto;
}

div.introdropdown ul{
display:none;
padding-top:15px;
}

div.introdropdown ul li{
border-bottom:1px solid #eaeaea;
font-size:8pt;
font-weight:700;
padding:5px 10px;
cursor:pointer;
}

div.introdropdown ul li:last-child{
border-bottom:0;
}

div.introdropdown ul li:hover{
background-color:#eaf3ff;
}

.btn.blue_left{
background-repeat:no-repeat;
background-image:url(../images/journey/elements.png);
background-position: top left;
background-position:-541px -414px;
width: 117px;
height: 39px;
}

.btn.blue_left:hover{
background-position: -541px -457px;
}

.btn.black_right{
background-position:-672px -414px;
    width: 117px;
    height: 39px;
}

.btn.black_right:hover{
background-position: -672px -457px;
}
#slider .ui-slider .ui-slider-range{
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
div.slider.ui-slider{
	margin-top:5px;
	}
div.clear{
		clear:both;
		}
a.startOver{
	text-decoration:underline;
	color:#fff;
	float:right;
	margin-top: 10px;
	font-size:12px;
	}
a.startOver:hover{
		text-decoration:none;
	}