﻿
body 
{
	background-image: url('../images/firefall-background.jpg');
	background-repeat: repeat-x;
	background-color: Black;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 9pt;
}

#container 
{
	width: 912px;
	margin-left: auto;
	margin-right: auto;
}

#firefall-header
{
	width: 900px;
	text-align: center;
	
}
#firefall-link
{
	width: 595px;
	float: left;
}
#wcc-link
{
	position: relative;
	top: 50px;
	width: 300px;
	float: left;
	vertical-align: middle;
}
#power-by-pocketfinder-lbt
{
	color: White;
	float: left;
	width: 300px;
	font-size: 18pt;
	padding: 10px 10px 10px 10px;
}
#i-want-one
{
	color: White;
	font-size: 14pt;
	float: right;
	width: 500px;
	padding: 10px 10px 10px 10px;
}

#firefall-icon
{
	width: 305px;
	/*border-top: solid 3px grey;
	border-right: solid 3px grey;*/
	float: right;
	height: 231px;
}
#firefall-icon #icon
{ 
	width: 65px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	border: solid 2px Beige;
	
}
#firefall-icon #name
{ 
	text-align: center;
	color: White;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
}
#picture
{
	clear: both;
	width: 900px;
	border: solid 3px #030710;
}
#locate-map
{
	clear: both;
	width: 700px;
	border: solid 3px #030710;
	border-right: none;
	float: left;
}

#info-area
{
	float: left;
	width: 200px;
	border: solid 3px #030710;
	background-color: #eeeeee;
}

#firefall-map
{
	position: relative; 
	width: 700px; 
	height: 557px; 
	text-align: center;
}

#firefall-info
{
	position: relative; 
	width: 200px; 
	height: 552px; 
}

#nav-copyright
{
	color: White;
	display:block;
	list-style-type: none;
	float: left;
}
a
{
	color: White;
}
a:hover
{
	color: Gray;
}
a:visited
{
	color: White;
}
img 
{
	border: none;
}

#BatteryHover, #SatHover, #CellHover, #LastUpdatedHover
{
	background-color: White;
	border: solid 2px Gray;
	padding: 5px 5px 5px 5px;
}



/* ------------- Information Panel ------------ */


.infobox-outer { width: 178px; background-image: url(../images/ui-box-top.png); background-repeat: no-repeat; background-position: left top; margin: 5px auto 0px auto; color: #666666; position: relative;}
.infobox-inner { width: 178px; background-image: url(../images/ui-box-bottom.png); background-repeat: no-repeat; background-position: left bottom; position: relative; }

.lastupdate-container { height: 40px; padding: 2px 0px 0px 0px; }
#lastupdated { text-align: center;}
#lastupdated .ago { color: #669900; }
#lastconnected {  text-align: center;}
#lastconnected .ago { color: #669900; }
#lastupdatedstamp { font-size: 0.8em; text-align: center; }
#next-connect-box { text-align: center; }
#next-connect-text { font-size: 0.8em; text-align: center; color: #669900;}

#address { text-align: center; color: #669900; padding: 5px 0px;}
#address span { display: block; text-align: center;}

#speed { position: relative; background-repeat: no-repeat; width: 101px; height: 37px; margin: 0px 0px 0px 12px; }
.mph
{
    background-image: url(../images/speed-bkg.png);
}
.kph
{
    background-image: url(../images/speed-bkg_kmh.png);
}
#speed #speedcount { position: absolute; top: 6px; right: 35px;}
#speed #speedtypechange { display: none; }
#speedodo { width: 66px; height: 22px; background-image: url(../images/odo-bkg.png); background-repeat: no-repeat; color: #FFFFFF; position: relative; text-align: right; padding: 3px 35px 0px 0px; margin: 10px 0px 0px 12px }
#trip { width: 66px; height: 22px; background-image: url(../images/trip-bkg.png); background-repeat: no-repeat; color: #FFFFFF; position: relative; text-align: right; padding: 3px 35px 0px 0px; margin: 10px 0px 0px 12px; }
#trip #tripcount {}
#tripreset { position: absolute; bottom: 16px; right: 12px;}
#speedToggle{ position: absolute; top: 22px; right: 12px;}

#heading { padding: 5px 8px 5px 12px; }
#heading #direction {}
#heading #direction .direction-icon { float: left; }
#heading #direction .direction-text { float: left; padding: 5px 0px 0px 6px; }
#heading #direction .direction-text span { color: #000000; }
#heading #altitude { margin: 2px 0px 0px 0px; }
#heading #altitude .altitude-icon { float: left; }
#heading #altitude .altitude-text { float: left; padding: 5px 0px 0px 6px; }
#heading #altitude .direction-text span { color: #000000; }
#heading #lat { margin: 6px 0px 0px 0px; }
#heading #lat .lat-icon { float: left; padding: 1px 0px 0px 3px; }
#heading #lat .lat-text { float: left; padding: 0px 0px 0px 10px; }
#heading #lat .lat-text span { color: #000000; }
#heading #lon { margin: 4px 0px 0px 0px; }
#heading #lon .lon-icon { float: left; padding: 1px 0px 0px 3px; }
#heading #lon .lon-text { float: left; padding: 0px 0px 0px 10px; }
#heading #lon .lon-text span { color: #000000; }


#truck-door-sm
{
    width: 50px;
	height: 60px;
	position: absolute;
	top: 13px;
	left: 12px;
}

#truck-temp-sm
{
	width: 60px;
	height: 40px;
	background-image: url('../images/currenttemp_background.jpg');
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	top: 16px;
	left: 100px;
}

#truck-temp-sm #truck-temp-degrees
{
	position: absolute;
	top: 10px;
	left: 12px;
	color: White;
}

.battery-sm-container 
{
	height: 86px;
}

#battery-sm 
{
	width: 35px;
	height: 75px;
	background-image: url('../images/batt-ind-vert-sm-bkg.png');
	background-position: left top;
	background-repeat: no-repeat;
	position: relative;
	float: left;
	margin: 5px 0px 5px 5px;
}

#battery-sm #battery-ind-sm 
{
	width: 0%;
	height: 26px;
	background-image: url('../images/batt-ind-vert-sm.png');
	background-position: left top;
	background-repeat: no-repeat;
	position: relative;
	top: 5px;
	left: 1px;
}

#signal-icon
{
	width: 135px;
	height: 85px;
	float: right;
	margin-top: 25px;
}

#signal-icon img
{
	width: 50px;
	margin: 5px;
}

#batt-percent-sm 
{
	position: relative;
	font-size: 13pt;
	color: #333333;	
	padding: 10px 0px 0px 0px;
	position: absolute;
	top: -8px;
	left: 30px;
}

#batt-timestamp-sm
{
	position:absolute;
	left:75px;
	top:6px;
	width:100px;
	font-size: 0.8em; 
	line-height: 90%; 
}

#batt-remain-sm 
{
	width: 178px;
	position: absolute;
	top: 53px;
	left: 13px;
	font-size: 8pt;
	line-height: 100%;
}

#batt-remain-sm #batt-est-sm 
{
	color: #637f37;
	display: inline;
}



#inaccurate-location
{
    padding: 5px;
    font-size: 8.5pt;
}
/************************************************************/

.clearfix 
{
	clear: both;
}