/* style.css
   COMM1730 Workshop: Navigation (Task 2 Microsite)
*/

/* Positional reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: Georgia, serif;
  line-height: 1.6;
  color: #111;
  background-color: #fff;
}

/* The wrapper class (worksheet) */
.wrapper {
  width: 80%;
  margin: 5px auto;
}

/* Basic spacing */
h1 { font-size: 200%; margin: 16px 0 4px; }
h2 { font-size: 120%; font-style: italic; margin: 0 0 12px; }
h3 { font-size: 140%; margin: 18px 0 10px; }
p { margin: 0 0 12px; }

/* Blockquote for quotation (worksheet) */
blockquote {
  border-left: solid 4px #4E0102;
  padding-left: 12px;
  margin: 0 0 12px;
  font-style: italic;
}

/* Navigation (worksheet example) */
#navigation {
  font-family: Georgia, serif;
  font-size: 100%;
  border-top: solid 2px #4E0102;
  border-bottom: solid 2px #4E0102;
  padding: 8px 0;
  margin: 12px 0 18px;
}

#navigation ul { margin: 0; padding: 0; }

#navigation li {
  display: inline;
  list-style-type: none;
}

/* Link states (worksheet example) */
a:link, a:visited, a:active {
  color: #17037A;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #17037A;
  text-decoration: underline;
  font-weight: bold;
}

.current {
  text-decoration: underline;
  font-weight: bold;
}

/* Contact list */
.contact-details { margin: 0 0 12px; }
.contact-details li { list-style-type: none; margin: 0 0 4px; }

/* Form styling (Interactivity workshop uses fieldset/legend) */
.section_border {
  border: 1px solid #4E0102;
  padding: 12px;
  margin: 12px 0;
}
.section_title { font-weight: bold; padding: 0 6px; }

label {
  display: inline-block;
  width: 140px;
  margin: 6px 0;
}

input[type="text"], textarea {
  border: 1px solid #999;
  padding: 6px;
  width: 60%;
  max-width: 420px;
}

input[type="submit"], input[type="reset"] {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #999;
  background-color: #f5f5f5;
}

/* Light responsive behaviour (Responsive workshop idea) */
@media screen and (max-width: 640px) {
  .wrapper { width: 95%; }
  #navigation li { display: block; margin: 6px 0; }
}