/* css reset */
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
 vertical-align: baseline;
 outline: 0;
 padding: 0;
 margin: 0;
 border: 0;
 }
/* remember to define focus styles! */
:focus {
 outline: 0;
 }
ol, ul {
 list-style: none;
 }
/* tables still need cellspacing="0" in the markup */
table {
 border-collapse: separate;
 border-spacing: 0;
 }
caption, th, td {
 font-weight: normal;
 text-align: left;
 }
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
 content: "";
 }
blockquote, q {
 quotes: "" "";
 }

/* css start */

body {
	margin:0;
	padding: 0;
	font-family: Helvetica;
	font-size: 100%;
	line-height: 1.5em;
	min-width: 800px;
	height: 100%;
}

html {
	height: 100%;
}

/* head */
div#head {
	padding: 0 1em;
	background-color: #224;
	color: #ffa;
	height: 80px;
	position: relative;
}
div#head h1 {
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 80px;
}
div#head small {
	margin: 0;
	padding: 0;
	font-size: 0.5em;
}

#head {
	background-color: #002266 !important;
	background-image: url(/images/gradient.png) !important;
	background-position: top right !important;
	background-repeat: repeat-x !important;
	width: 100% !important;
	margin:0em !important;
	padding:0em !important;
	}

#head h1 {
	text-indent: -1000px;
	background: transparent url(/images/title.png) top left no-repeat !important;
	position:absolute;
	width: 430px;
	left: 0px;
	height: 171px;
	z-index: 50;
}

#head div{
	background-color: transparent !important;
}
div#head a {
	color: #fff;
}
div#user_info {
	font-size: 12px;
	text-align: right;
	position: absolute;
	right: 5px;
	bottom: 15px;
}

div#my_pic {
	float: right;
	width: 50px;
	height: 50px;
	border: 1px solid #ace;
}
div#my_info {
	float: right;
	line-height: 1.1em;
	margin-right: 5px;
	height: 50px;
	line-height: 16px;
}
div#my_service {
	height: 18px;
	line-height: 18px;
	text-align: right;
	overflow: hidden;
	margin:3px 0;
}
div#my_service span, div#my_service img, div#my_service a{
	display: block;
	float: right;
}
div#my_service img, div#my_service span{
	margin-right: 5px;
}
/* friends and map */

div#content {
	overflow-y: auto;
}

/* technique from http://www.codingforums.com/archive/index.php/t-142983.html */

div#map_sidebar {
	background:#f1f8a7 url(/images/shadow.png) right repeat-y;
	width: 299px;
	position: absolute;
	top: 171px;
	margin-bottom: 18px;
	overflow-y: auto;
	bottom: 30px;
	overflow-x: hidden;
}
ul#map_sidebar {
	overflow: hidden;
}
div#map_canvas {
	position: absolute;
	top: 80px;
	left: 299px;
	bottom:0;
	right:0;
}
div#foot {
	text-align: center;
	font-size: .7em;
	color: #ffa;
	background-color: #224;
	overflow: hidden;
    position: absolute; 
    left: 0 !important; 
    bottom: 0 !important; 
	width: 300px;
	height: 30px;
	line-height: 30px;
}


/* Foot */
#foot {
	height: 48px !important;
	position:relative;
	background: #f8f3c9 url(/images/kudelabs.png);
}

#foot a {
	display: block;
	height: 48px;
}

.friends_list_top {
	overflow: hidden;
	padding:0 5px;
	margin-bottom: 10px;
	line-height: 100%;
}
.friends li {
	list-style-type: none;
	width: 49.5%;
	float: left;
	text-align: center;
	margin: 0.5em 0;
}
.friends li img {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	border: 1px solid #3B5998;
}
.friends li p {
	line-height: 18px;
}
.friends li a{
	color: #000;
}
#geocoding {
	padding: 0 5px;
}
/* home page */


.body_text { 
  padding: 1em;
}
.body_text p{
	margin: 1em 0;
	font-size: 0.9em;
	line-height: 1.8em;
}
.body_text h3{
	margin: 1em 0;
}


/* on the map */
.ppl_on_map {
	width: 350px;
}
.ppl_on_map li {
	width: 33.3%;
	float: left;
	text-align: center;
	list-style-type: none;
}
.ppl_on_map li img {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	border: 1px solid #3b5998;
}
.ppl_on_map h2 {
	font-size: 1em;
}
.ppl_on_map ul {
	margin-top: 10px;
}
.ppl_on_map p {
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	height: 40px;
	line-height: 20px;
	display: block;
}

/* showFriend */
.showFriend {
	width: 300px;
	padding-bottom: 10px;
	min-height: 350px;
}

.showFriend h3 {
	margin: 0.5em 0;
}
.showFriend img {
	width: 100px;
	float: left;
	display: block;
	border:1px solid #3b5998;
}
.showFriend a{
	font-size: 1em;
	color: #3b5998;
}
.showFriend .fcontent {
	margin-left: 110px;
}
.showFriend span {
	display: block;
	font-size: 0.8em;
	line-height: 150%;
	color: #000;
}

.showFriend h4 {
	font-size: .8em;
}

.showFriend .send_fb, .showFriend .send_tw{
	width: 50%;
	float: left;
	text-indent: 1em;
}

.showFriend .send_fb {
	background:url("/images/facebook_s.png") center left no-repeat;
}

.showFriend .send_tw {
	background:url("/images/twitter_s.png") center left no-repeat;
}

.showFriend textarea {
	width: 100%;
	height: 100px;
	font-size: .8em;
	margin-bottom: 5px;
}

#show_all a{
	color: #000;
}

.showFriend .clear{
	font:  0px/0px sans-serif;
	clear:  both;
	display:  block
}
/* accordions */

.accordion_toggle {
	display: block;
	height: 24px;
	background: #43dc62 url(/images/navsprites.png) top left no-repeat ;
	line-height: 24px;
	font-weight: normal;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	font-size: 0.8em;
	text-indent: 22px;
}

h2:hover{
	background-color: #a8fba0; 
	background-position: 0px -47px !important ;
	color: #000;
} 

h2:active{
	background-color: #43dc62; 
	background-position: 0px -24px !important ;
} 

.accordion_toggle_active, .toggle_opened,  h2.toggle_opened:hover {
	background: #fafcdd url(/images/navsprites.png) left -72px no-repeat !important ;
	color: #000;
}
.accordion_content {
	background: white url(/images/whiteshadow.png) top left repeat-y;
	color: #444444;
	overflow: hidden;
	font-size: 0.8em;
	padding-top: 1em;
}

.accordion_content h3 {
	height: 22px;
	line-height: 22px;
	text-indent: 22px;
	background: #fafcdd url(/images/navsprites.png) left -72px no-repeat !important ;
	color: #000;
	clear: both;
	font-size: .85em;

}

#friend_nav {
	font-size: 0.8em;
	font-weight: bold;
}

/* geocoding_errors */
span.error {
	color: #f00;
}

span.msg {
	color: #00f;
}

span.warning {
	color: #f0f;
}

/* Filter result */
#filter_result li.throughLocation a {
	color: #f00 !important;
}

/* Map Legends */
#legend {
	position: absolute;
	top: 85px;
	right: 5px;
	padding: 5px;
	width: 65px;
	background: url(/images/legends_bg.png);
	border: 2px solid #000;
	color: #fff;
}

#legend h2{
	font-size: 0.9em;
	text-align: center;
}
#legend li{
	height: 18px;
	line-height: 18px;
}
#legend span{
	font-size: 0.8em;
	float: right;
	text-align: right;
}
#legend img{
	float: left;
	display: block;
	width: 16px;
}

/* account manager */
#services h2{
	text-align: center;
	font-size: 1.2em;
	line-height: 120%;
	background-color: #224;
	color: #ffa;
	height: 40px;
	line-height: 40px;
	display: block;
}
#services ul{

}
#services li{
	height:38px;
	line-height: 19px;
	margin-top: 15px;
	padding: 0 5px;
}
#services img{
	display: block;
	float: left;
	border: 1px solid #666;
}
#services li a{
	float: right;
	display: block;
	font-size: 0.8em;
	line-height:38px;
	text-align: right;
	color: blue;
}
#services span{
	display: block;
	font-size: 0.8em;
	margin-left: 110px;
	margin-right: 70px;
}
#services #close{
	position: absolute;
	right: 5px;
	top: 15px;
	color: #fff;
	text-decoration: none;
}
#services .field{
	width: 80px;
}
#services .submit{
	float:right;
	margin-top: 20px;
}

/* loading progress */
div#progress {
	text-align:center;
}
div#progress span.completed{
	display: block;
	font-size: 4em;
	line-height: 120%;
	font-weight: bold;
}

/************for LabeledMarker***********************/
.LabeledMarker_markerLabel{
	font-size: 8pt;
	font-weight: bold;
	width: 32px;
	text-align: center;
}
/*************************end************************/


/* Filter */
#filter_form {
	margin:10px 5px;
}
#filter_left {
	height: 19px;
	line-height: 19px;
	margin-right: 18px;
	padding-left: 18px;
	background:url(/images/search_bg.png) no-repeat left top;
}
div.filter_right_noclear {
	height: 19px;
	width: 18px;
	float: right;
	background:url(/images/search_bg.png) no-repeat right bottom;
}
div.filter_right_clear {
	height: 19px;
	width: 18px;
	float: right;
	background:url(/images/search_bg.png) no-repeat right top;
	cursor: pointer;
}
#filter_left input{
	height: 17px;
	border: 0;
	line-height: 17px;
	margin-top: 1px;
	width: 100%;
	background: transparent;
	font-size: 0.8em;
}

#filter_div .noFriendMatched {
	color: #f00;
	text-align: center;
}

#RB_overlay {
  position: absolute;
  z-index:100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height:100%;
  background-color: #000;
  opacity: .6;
  filter: alpha(opacity=60);
}

#RB_redbox {
  width: 100%;
  position: absolute;
  top: 0px;
}

#RB_window {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 102;
	line-height: 0;
}

#RB_loading {
  position: relative;
  top: 200px;
  z-index: 101;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  text-align: center;
  background: #666 url(/images/redbox_spinner.gif) no-repeat center center;
  border: 2px solid black;
}

.redbox_contents {
  margin: 0 auto;
  text-align: left;
}
#services{
	text-align: left;
	border: 5px solid #666;
	width: 500px;
	height: 300px;
	background-color: #ffa;
	position: relative;
}







/*

Andy's Changes

*/

.ppl_on_map{overflow:auto; max-height: 620px;}


.friends li{display:block; width: 105px !important; position:relative !important;height: 32px; padding-left: 37px; text-align: left !important;}
.friends img{width: 25px !important; height: 25px !important; position:absolute !important; left: 5px; top: 0px; border-style: none !important;}
.friends li a{background-color: ; display:block; height: 32px; text-decoration: none; color: #444 !important;}
.friends li a:hover{color: black !important;}



#RB_overlay {
  position: absolute;
  z-index:100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height:100%;
  background-color: #000;
  opacity: .6;
  filter: alpha(opacity=60);
}

#RB_redbox {
  width: 100%;
  position: absolute;
  top: 0px;
}

#RB_window {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 102;
	line-height: 0;
}

#RB_loading {
  position: relative;
  top: 200px;
  z-index: 101;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  text-align: center;
  background: #666 url(../images/redbox_spinner.gif) no-repeat center center;
  border: 2px solid black;
}

.redbox_contents {
  margin: 0 auto;
  text-align: left;
}
#services{
	text-align: left;
	border: 5px solid #666;
	width: 500px;
	height: 300px;
	background-color: #ffa;
	position: relative;
}