body { font-family: verdana, sans-serif; font-size: 0.9em;}
h1 {color: #006edf; font-size: 1.8em;}
label { margin: 2px 0px 2px 5px; font-weight: bolder; font-size: 0.9em;}
label input {font-weight: normal; }
input#url { width: 280px; padding: 2px 4px;}
input#sdelta, input#tdelta { width: 2em; text-align: right; padding: 2px 4px; margin-right: 4px;}
input#sdelta { width: 5em;}
select#sets, input#url, input#tdelta, input#sdelta { border: solid #ccc 1px; color: #555;}
input#refresh { background-color: #007eff; color: white; font-weight: bold; font-size: 0.75em;}
div#path-container {width: 35%; float:left; border: solid #eee 1px; margin: 1em 1em 1em 1em;}
div#mates-container {float: right; width: 55%; margin: 1em 1em 1em 1em;}
div#path-container li { list-style-image: url("images/blue.png"); }
div#mates-container li#mno { list-style-image: url("http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif"); }
div#mates-container li#m1 { list-style-image: url("images/green.png");}
div#mates-container li#m2 { list-style-image: url("images/amber.png");}
div#mates-container li#m3 { list-style-image: url("images/yellow.png");}
div#mates-container li#m4 { list-style-image: url("images/red.png");}
div#mates-container li#m5 { list-style-image: url("images/pink.png");}
div#mates-container li#m6 { list-style-image: url("images/purple.png");}
div#mates-container li#m7 { list-style-image: url("images/beige.png");}
div#mates-container ul ul { margin-bottom: 0.7em;}
div#mates-container ul ul li { margin-bottom: 0.2em;}
#map { height: 550px; width: 98%;}
em.distance { font-weight: bolder;}
q.title { color: #007eff; font-style: italic;}
img { border: none; }
div#footer {clear: both; text-align: center; font-size: 0.8em;}