/*
   Hands-on Project 10-3
   Sung Kim | 7-19-26 | IST-239-W01

   Purpose:
   This project creates an interactive cycling route map for locations around Boulder, Colorado.
   Users can choose a starting point and ending point from two selection lists.
   Google Maps services display the cycling route on the map and provide turn-by-turn directions.
   The project demonstrates how JavaScript can work with the Google Maps API and respond to user selections.

   This CSS file controls the layout and appearance of the cycling route page, map, and directions panel.

   Filename: styles.css
   Related: project10-03.html, project10-03.js
*/

/* Applies border-box sizing to all page elements. */
* {
   box-sizing: border-box;
}

/* Resets default spacing and typography for common HTML elements. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* Displays HTML5 structural elements as block-level elements. */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

/* Sets the initial page body dimensions and base typography. */
body {
   line-height: 1;
   width: 1024px;
   background: #F5F5F5;
   margin: 0 auto;
   font-family: Georgia, "Droid Serif", serif; 
}

/* Removes default list markers. */
ol, ul {
   list-style: none;
}

/* Removes default quotation marks from quotes. */
blockquote, q {
   quotes: none;
}

/* Removes generated quote content. */
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* Collapses table borders and removes border spacing. */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

/* Sets the final page width, background, margins, and font. */
body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif; 
}

/* Removes default list markers. */
ol, ul {
   list-style: none;
}

/* Styles the page header and project title. */
header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: 0;
}

/* Styles the main cycling route content area. */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select:none;
   height: 640px;
}

/* Styles the main Boulder Cycling Routes heading. */
section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0 10px 0;
}

/* Styles the route-selection instruction text. */
section p {
   width: 800px;
   margin: 0 auto;
   font-size: 1.2em;
   line-height: 1.3;
   text-align: center;
}

/* Positions the route selection controls. */
fieldset {
   width: 90%;
   margin: 10px auto;
   position: relative;
   display: block;
   height: 185px;
}

/* Positions and sizes the starting-point selection list. */
fieldset select#startingPoint {
   position: absolute;
   top: 0;
   left: 220px;
   width: 180px;
}

/* Positions and sizes the ending-point selection list. */
fieldset select#endingPoint {
   position: absolute;
   top: 0;
   left: 460px;
   width: 180px;
}

/* Sizes and positions the Google Maps display area. */
div#bikeMap {
   width: 400px;
   height: 300px;
   border: 3px solid gray;
   margin: 0 15px 0 70px;
   float: left;
}

/* Sizes and positions the turn-by-turn directions panel. */
div#bikeDirections {
   width: 400px;
   height: 300px;
   border: 3px solid gray;
   margin: 0 30px 0 0;
   float: left;
   overflow: scroll;
}

/* Emphasizes the first option in each route selection list. */
select option:first-of-type {
   font-size: 1.3em;
   padding-bottom: 5px;
   font-weight: bold;
}