/* Main LiveBus.org Stylesheet
   ----------------------------------------
   Filename:    main.css
   Author:      James Wheare
   Date:        2006-09-03
   ---------------------------------------- */

/* Prepare the canvas
   ---------------------------------------- */
* {
    margin:0;
    padding:0;
    border:0;
}

body {
    background:#042044;
    font:normal 83% 'Verdana', sans-serif;
}

div#container {
    margin:0 auto 20px auto;
    padding:20px 3em 1.5em 3em;
    width:80%;
    min-width:700px;
    background:#fff;
}

h2 {
    margin:1.2em 0 0 0;
    font:normal 1.3em 'Helvetica', 'Arial', sans-serif;
}
h3 {
    margin:1.4em 0 0 0;
    font:bold 1.1em 'Helvetica', 'Arial', sans-serif;
}
h4 {
    margin:1.5em 0 0 0;
    font:bold 1em 'Helvetica', 'Arial', sans-serif;
}

p {
    margin:1em 0 1.3em 0;
    line-height:1.3;
}

ul {
    margin:1em 0 1.3em 0;
}
li {
    padding:0.2em 0;
}
ul li {
    list-style-type:none;
    list-style-position:inside;
}
ol li {
    list-style-type:decimal;
    list-style-position:outside;
}

a {
    color:#00e;
}
a:visited {
    color:#143064;
}
a:hover {
    color:#e53324;
}

abbr, acronym, span.abbr {
    cursor:help;
    border-bottom:1px dotted #aaa;
}

span.highlight {
    background:#ff9;
    color:#000;
    padding:0.1em 0.3em;
    margin:0 -0.2em;
}

/* Main heading
   ---------------------------------------- */
h1 {
    margin-right:10px;
    padding-bottom:8px;
    border-bottom:2px solid #000;
    font:normal 30px 'Helvetica', 'Arial', sans-serif;
    line-height:0;
}
h1 a {
    text-decoration:none;
}
h1 img {
    margin-bottom:-8px;
}
p#strapline {
    margin:-7px 0 0 0;
    padding:12px 0 0 0;
    color:#777;
    background:url(../images/header-marker-small.gif) no-repeat 100% 0;
}
p#strapline strong {
    color:#871600;
}
p#breadcrumb {
    margin:0.6em 0 1em 0;
    color:#7f9dbc;
}
p#breadcrumb strong {
    color:#0f3d9c;
}

/* Map container
   ---------------------------------------- */
body.alt div#mapColumn {
    float:left;
    width:53%;
}

div#wallet {
    display:block;
    margin:0 0 1.5em 0;
    border:1px solid #7f9dbc;
}

h2#mapTitle {
    margin:0;
    padding:0.3em 0;
    text-indent:0.3em;
    color:#333;
    background:#ddd;
    font:normal 0.8em 'Verdana', sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.2em;
    border-bottom:1px solid #7f9dbc;
}
h2#mapTitle a {
    text-decoration:none;
    font-weight:bold;
}

div#map {
    height:380px;
}

body.alt div#wallet {
    margin:0 0 1em 0;
    border:1px solid #000;
}
body.alt div#map {
    height:600px;
}
body.alt.stop h2#mapTitle {
    color:#1d4524;
    background:#e5ffe3;
    border-color:#33773d;
}
body.alt.route h2#mapTitle {
    color:#0e487d;
    background:#e6eaed;
    border-color:#072776;
}
body.alt.stop div#wallet {
    border-color:#33773d;
}
body.alt.route div#wallet {
    border-color:#072776;
}

button#locator {
    float:right;
    margin-left:0.3em;
    padding:0.5em;
    color:#000;
    background:#ddd;
    font-weight:bold;
    border:1px solid;
    border-color:#aaa #666 #666 #aaa;
}
button#locator.active {
    color:#111;
    background:#ccc;
    border-color:#666 #aaa #aaa #666;
}

/* Grouped content
   ---------------------------------------- */
div.group {
    width:45%;
    float:right;
    margin:0 0 1em 0;
    padding-bottom:15px;
    background:url(../images/rounded-bottom-right.gif) no-repeat bottom right;
}
div.group h2 {
    margin:0 0 0.7em 0;
    padding:0.5em 15px;
    background:url(../images/rounded-top-left.gif) no-repeat top left;
    border-bottom:1px solid #fff;
}
div.group h2 span.highlight {
    margin:0;
    padding:0.2em;
}
div.group h3 {
    margin:1em 15px 0.7em 15px;
}
div.group p {
    margin:0.8em 15px 0.3em 15px;
}
div.group p.subnote {
    color:#333;
    font-size:0.8em;
}
div.group ul {
    margin:0.8em 15px 0.3em 15px;
    padding:0;
}
div.group li {
    padding:0.2em;
}
div.group li.focus {
    background:#eee;
}
div.group ul a {
    text-decoration:none;
}
/* Stop styles */
div.group.stop {
    background-color:#50bb60;
}
div.group.stop h2 {
    color:#e6f7dc;
    background-color:#33773d;
}
div.group.stop h2 a {
    color:#0d3514;
}
div.group.stop h2 a:hover {
    color:#002500;
}
div.group.stop a:link {
    color:#09308f;
}
div.group.stop a:hover {
    color:#d50304;
}
div.group.stop ul a {
    font-weight:bold;
}
div.group.stop li.focus {
    background:#d7ffd2;
}
/* Route styles */
div.group.route {
    color:#222;
    background-color:#96b2cd;
}
div.group.route h2 {
    color:#DEE6FD;
    background-color:#072776;
}
div.group.route h2 a {
    color:#fff;
}
div.group.route li.focus {
    background:#e6eaed;
}

div#route ul.buttons li {
    color:#6f8daf;
    display:inline;
}
div#route ul.buttons img {
    vertical-align:middle;
}

/* Block lists
   ---------------------------------------- */
ol#stopList {
    margin:1em 1em 0 3em;
}
div#stopList ul,
ul#stopList,
ul.mainRoutes {
    margin:1em 1em 0 1em;
}
#stopList li,
ul.mainRoutes li {
    padding:0.4em;
    color:#000;
    border-bottom:1px solid #D6E7D0;
}
ul.mainRoutes li,
.route #stopList li {
    border-bottom:1px solid #D8DDE2;
}
#stopList a,
ul.mainRoutes a {
    text-decoration:none;
}
#stopList li.odd {
    background:#D7FFD2;
}
ul.mainRoutes li.odd,
.route #stopList li.odd {
    background:#ECF1F7;
}
#stopList li.even {
    background:#E5FFE3;
}
ul.mainRoutes li.even,
.route #stopList li.even {
    background:#E6EAED;
}
#stopList li.primary,
.route #stopList li.primary {
    background:#2378e2;
    border-bottom:1px solid #2378e2;
}
#stopList li.primary a {
    color:#fff;
}
#stopList li.focus {
    background:#1D4524;
    border-bottom:1px solid #1D4524;
}
.route #stopList li.focus {
    background:#0E487D;
    border-bottom:1px solid #0E487D;
}
#stopList li.focus a {
    color:#fff;
}
#stopList li.focus span {
    color:#bEc6dD;
}

/* Front page
   ---------------------------------------- */
p#instructions {
    margin:0.8em 0 1em 0;
    padding:0.6em 0.7em;
    background:#ffe433;
    color:#871600;
    border:1px solid #fb2;
    font:normal 1.2em 'Helvetica', 'Arial', sans-serif;
    line-height:1.7;
}
p#instructions img.marker {
    vertical-align:middle;
}
p#instructions strong {
    color:#000;
}

div#about {
    color:#666;
}


/* Search
   ---------------------------------------- */

form#stopSearch {
    margin:0.3em 15px;
}
form#stopSearch input {
    padding:0.2em;
    border:1px solid #33773d;
}
form#stopSearch input#stopSearchInput {
    margin-right:0.5em;
}
form#stopSearch p {
    margin:1em 0;
}

ul.bull li {
    list-style-type:square;
}

/* Route list
   ---------------------------------------- */

h2#mainRoute {
    margin:0 0 1em 0;
    padding:0.5em;
    color:#dee6fd;
    background:#072776;
}
h2#mainRoute span {
    font-size:0.9em;
}
div#routeLists {
    float:right;
    width:45%;
    margin:0 0 1em 0;
}
div#routeLists h3 {
    margin:0 0 1em 0;
}
dl.routeList {
    margin:0 0 1em 0;
}
dl.routeList dt {
    padding:0.5em;
    color:#fff;
    background:#30587d;
    font-weight:normal;
}
dl.routeList dt.focus {
    background:#0e487d;
}
dl.routeList dt a {
    color:#bec6dd;
}
dl.routeList dd {
    padding:0.5em;
    color:#333;
    background-color:#96b2cd;
}

/* Stop detail
   ---------------------------------------- */
div#stop {
    float:left;
    width:50%;
    padding-bottom:1.5em;
}
dl.details {
    margin-bottom:0.8em;
}
dl.details dt {
    font:bold 1.1em 'Helvetica', 'Arial', sans-serif;
    line-height:1.4;
}
dl.details dt span {
    font-weight:normal;
    font-size:0.9em;
}
dl.details dd {
    margin-top:0.3em;
    font-size:0.9em;
    color:#555;
}

table.stopTimes {
    width:100%;
}
div#stop table.stopTimes {
    font-size:1.2em;
}
table.stopTimes th {
    color:#444;
    text-align:left;
    font-size:0.9em;
    line-height:1.4;
    border-bottom:1px solid #555;
}
table.stopTimes td {
    font-size:0.9em;
    line-height:1.5;
}
table.stopTimes td span.routeNumber {
    color:#000;
    font-size:1.1em;
    font-weight:bold;
}

p.stopMessage {
    font-size:0.8em;
    line-height:1.2;
    margin-bottom:0;
}

p.stopSms {
    padding:0.4em 0.5em;
    background:#ed5f00;
    color:#000;
    border:1px solid #a13;
    font-size:0.8em;
    line-height:1.4;
}
p.stopSms img {
    margin:0 0.5em -1px 0;
}
p.stopSms a {
    color:#ff0;
}
p.stopSms a:hover {
    color:#ff7;
}
p.stopSms span.highlight {
    background:#fa2;
    margin:0;
    padding:0.2em;
}

p.geo {
    color:#777;
    font-size:0.9em;
}

div#stopRoutes {
    float:none;
    width:auto;
    margin-left:52%;
}
div#stopRoutes li {
    color:#333;
}
div#stopRoutes li span.routeNumber {
    color:#000;
    font-size:1.1em;
    font-weight:bold;
}
div#stopRoutes a:link {
    color:#09308f;
}
div#stopRoutes a:hover {
    color:#e53324;
}

div#nearby {
    float:none;
    width:auto;
    margin-left:52%;
}
div#nearby h2 a {
    text-decoration:none;
    color:#fff;
}
div#nearby h2 img {
    margin:0 0 -3px 0;
}
div#nearby.collapsed {
    padding:0;
    background:#33773D url(../images/rounded-bottom-right.gif) no-repeat bottom right;
}
div#nearby.collapsed h2 {
    margin:0;
    border:0;
    background-color:transparent;
}
div#nearby.collapsed ul#stopList {
    display:none;
}

/* Stop info window
   ---------------------------------------- */
div.stopInfo {
    width:300px;
}
div.stopInfo h3 {
    margin:0 0 0.5em 0;
}
div.stopInfo h3 span {
    font-weight:normal;
    font-size:0.9em;
}

/* Footer
   ---------------------------------------- */
div#footer {
    clear:both;
    padding:1.2em 1.5em;
    background:#F8FF9A;
    border:1px solid #fe1;
}
div#footer p {
    margin:0;
    padding:0.1em 0;
    font-size:0.9em;
    line-height:1.4;
}