/** 
 * main.css
 * 
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content
 * 4. Sidebar
 * 5. Footer
 * 6. Media queries for responsive layout
 * 7. Accessibility helpers
 * 
 */

/************************************************************
 * 1. General HTML tags
 *
 */

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 17px;
}

body {
   margin: 0 auto;
   font-family: 'Tahoma', Helvetica, Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.4rem;
   color: #2A2A2A;
   background-color: #FFFFFF;
   -webkit-font-smoothing: antialiased;
}

td, input[type=text], textarea {
   font-size: 0.85rem;
}

img {
   width: 100%;
   font-size: 0.9rem;
}

h1 {
   /* for page headlines */
   font-size: 2rem;
   line-height:2.5rem;
   color: #2A2A2A;
   margin: 0;
}

h2 {
   /* for article titles on category lists */
   font-size: 1.1rem;
   font-weight: bold;
   color: #2A2A2A;
   padding-bottom: 0.3rem;
}

h3 {
   /* for category subtitles & sidebar headings */
   font-size: 1.2rem;
   font-weight: bold;
   color: #999999;
   text-transform: uppercase;
   border-top: 1px solid #CCCCCC;
   margin-bottom: 0.5rem;
   margin-top: 1rem;
   padding-top: 1.25rem;
}

.subhead {
   /* for minor subheadings */
   font-size: 0.9rem;
   font-weight: bold;
   color: #2A2A2A;
}

p {
   margin-bottom: 1rem;
}

a {
   color: #930000;
   text-decoration: none;
}

a:hover {
   color: #930000;
   text-decoration: underline;
}

blockquote {
   margin: 0 1.25rem 1rem 1.25rem;
   padding-left: 1.25rem;
   border-left: 4px solid #CCCCCC;
   font-style: italic;
   color: #777777;
}

.button {
   background-color: #EBF5F8;
   padding: 0.25rem 1rem;
   font-size: 0.85rem;
   border-radius: 0.5rem;
   border: 1px solid #88B7C8;
   margin-bottom: 1rem;
}

.button:hover {
   -moz-box-shadow: 2px 2px 4px #888888;
   -webkit-box-shadow: 2px 2px 4px #888888;
   box-shadow: 2px 2px 4px #888888;
   border: 1px solid #37687B;
}

.center {
   text-align: center;
}

.bold {
   font-weight: bold;
}

.blue {
   color: #3786BC;
}

.smaller {
   font-size: 0.9rem;
}

pre, code {
   background: #EEEEEE; 
   border: 1px solid #CCCCCC; 
}

pre {
   font-size: 0.9rem;
   line-height: 1.4rem;
   padding: 1rem;
   border-left: 4px solid #CCCCCC;
}

/************************************************************
 * 2. Masthead area
 *
 */

#header {
   background: #78836B url(../images/background.jpg) repeat-x;
   border-bottom: 1px solid #000000;
}

.container {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0;
   clear: both;
}

.logo {
   width: 100%;
   max-width: 350px;
   margin: 0 auto;
   padding: 0.5rem 0 0.2rem 0;
   display: block;
   text-align: center;
}

.topnav {
   margin: 0 0 0.5rem 0;
   padding: 0;
   font-family: 'Times New Roman', Times, serif;
   text-transform: uppercase;
   font-weight: bold;
   clear: both;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
}

.topnav li {
   list-style: none;
   margin: 0.3rem 1rem;
   text-align: center;
   flex: 0 1 auto;
}

.topnav a {
   font-size: 1.05rem;
   text-decoration: none;
   color: #000000;
}

.topnav a:hover {
   text-decoration: none;
   color: #E9E9E9;
}

.topnav li.current a {
   text-decoration: none;
   color: #E9E9E9;
}

.banner {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0.5rem 0;
   display: block;
   text-align: center;
   clear: both;
}

/************************************************************
 * 3. Main content
 *
 */

#main {
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 3rem 4.55% 0 4.55%;
   clear: both;
}

#content {
   min-height: 500px;
   margin-bottom: 3rem;
   list-style: disc inside none;
}

form.search {
   margin-bottom: 2rem;
   width: 30%;
   min-width: 280px;
   display: block;
}

form.search input {
   margin: 0;
   padding: 0.25rem 0.5rem;
   border: 1px solid #CCCCCC;
   width: 100%;
}

.featured {
   margin-top: 2rem;
   margin-bottom:2.5rem;
}

.featured img {
   margin-bottom: 1rem;
}

.col-2-3 {
   /* for home & article page layouts */
   width: 65%;
   float: left;
   padding-bottom: 2rem;
}

.col-1-3 {
   /* for home & article page layouts */
   width: 35%;
   padding-left: 7%;
   float: left;
   padding-bottom: 2rem;
}

.col-1-2 {
   /* for home page layout */
   width: 46.5%;
   float: left;
   padding-bottom: 2rem;
}

.col-1-2.last {
   /* for home page layout */
   width: 53.5%;
   padding-left: 7%;
   float: left;
   padding-bottom: 2rem;
}

.col-3-4 {
   /* for category & secondary page layouts */
   width: 72%;
   float: left;
   padding-bottom: 2rem;
}

.col-1-4 {
   /* for category & secondary page layouts */
   width: 28%;
   padding-left: 7%;
   float: left;
   padding-bottom: 2rem;
}

.category h3 {
   /* for category page listings */
   font-size: 1rem;
   font-weight: bold;
   color: #999999;
   text-transform: uppercase;
   border-top: 1px solid #CCCCCC;
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   margin-bottom: 0.5rem;
}

.listing {
   /* for category page listings */
   padding-left: 1.25rem;
   overflow: auto;
   font-size: 0.9rem;
}

.listing h2 {
   /* for category page listings */
   font-size: 0.9rem;
   font-weight: bold;
   color: #2A2A2A;
   padding-bottom: 0;
}

.listing p {
   font-size: 0.9rem;
   line-height: 1.2rem;
}

.listing img {
   /* for category page listings */
   float: right;
   margin-top: 0.4rem;
   margin-left: 1rem;
   margin-bottom: 0.5rem;
   width: 100%;
   max-width: 105px;
   text-align: center;
}

.which_cat {
   font-size: 0.9rem;
   color: #CCCCCC;
}

.main_photo {
   width: 100%;
   max-width: 650px;
   display: block;
   margin-bottom: 1rem;
   text-align: center;
}

.share {
   margin-bottom: 1rem;
}

.summary {
   font-size: 1.1rem;
   font-style: italic;
   color: #777777;
   padding: 1rem 0;
}

.required {
   border: 1px solid #888888;
   border-collapse: collapse;
   margin: 1.3rem 1rem 3rem 1rem;
}

.required tr {
   min-height: 1.3rem;
}

.required td.first {
   font-size: 0.9rem;
   color: #888888;
   padding: 0 0.5rem 0 1rem;
   text-align: right;
   vertical-align: top;
}

.required td.last {
   font-size: 0.9rem;
   color: #888888;
   padding: 0 1rem 0 0.5rem;
   text-align: left;
}

.time {
   width: 100%;
   max-width: 90px;
   text-align: center;
}

.cost {
   width: 100%;
   max-width: 88px;
   text-align: center;
}

.align_left {
   /* for images placed in rich text editor */
   float: left;
   margin: 0.5rem 1.5rem 1rem 0;
   width: 100%;
   max-width: 480px;
   text-align: center;
}

.align_right {
   /* for images placed in rich text editor */
   float: right;
   margin: 0.5rem 0 1rem 1.5rem;
   width: 100%;
   max-width: 480px;
   text-align: center;
}

.align_center {
   /* for images placed in rich text editor */
   display: block;
   margin: 0 auto;
   padding: 0.5rem 0 1.5rem 0;
   width: 100%;
   max-width: 480px;
   clear: both;
   text-align: center;
}

figure img {
   margin-bottom: 0.5rem;
   text-align: center;
}

figure figcaption {
   font-size: 0.9rem;
   font-style: italic;
   color: #888888;
   line-height: 1.3rem;
   margin: 0 auto;
   padding: 0 1.5rem;
   text-align: center;
}

.comments {
   font-size: 0.9rem;
   margin-top: 3rem;
   padding-top: 2rem;
   border-top: 1px solid #CCCCCC;   
}

.gallery {
   margin: 2rem 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: center;
}

.gallery li {
   margin: 0 0.65rem 1rem 0;
   padding: 0;
   flex: 0 0 auto;
   text-align: center;
}

/************************************************************
 * 4. Sidebar
 *
 */

#sidebar {
   margin-bottom: 0rem;
}

#sidebar h3 {
   font-size: 1.2rem;
   text-transform: uppercase;
   border: none;
   text-align: center;
   margin: 0;
   padding: 0;
}

.side_entry {
   padding-bottom: 1rem;
   border-bottom: 1px solid #CCCCCC;
   margin: 2rem 0;
   font-size: 0.85rem;
}

.side_entry img {
   width: 135px;
   margin: 0 auto;
   display: block;
   text-align: center;
}

.tags {
   margin-bottom: 1rem;
   list-style: none;
   display: flex;
   flex-flow: column;
   justify-content: flex-start;
   align-items: flex-start;
}

.tags li {
   padding: 0.1rem 1rem;
   border-radius: 0.5rem;
   border: 1px solid #88B7C8;
   background-color: #EBF5F8;
   font-size: 0.9rem;
   color: #000000;
   margin: 0.4rem 0 0.4rem 2rem;
   flex: 0 0 auto;
}

.tags li:hover {
   -moz-box-shadow: 2px 2px 4px #888888;
   -webkit-box-shadow: 2px 2px 4px #888888;
   box-shadow: 2px 2px 4px #888888;
   border: 1px solid #37687B;
}

.related {
   clear: both;
   margin-top: 0.75rem;
   list-style: disc inside none;
}

.related li {
   margin-bottom: 1rem;
}

.t-list {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
}

.t-list li {
   font-size: 0.9rem;
   margin-left: 1rem;
   padding: 0;
   text-align: center;
   flex: 0 0 auto;
}

/************************************************************
 * 5. Footer
 *
 */

#footer {
   background: #78836B url(../images/background.jpg) repeat-x;
   border-top: 1px solid #000000;
   font-size: 0.8rem;
   line-height: 1rem;
   color: #000000;
   clear: both;
   padding: 1rem 0 2rem 0;
}

#footer p {
   margin: 0 2rem auto;
   text-align: center;
}

.footnav {
   margin: 1rem 0;
   padding: 0;
   clear: both;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
}

.footnav li {
   list-style: none;
   margin: 0.3rem 1rem;
   padding: 0.3rem 0;
   text-align: center;
   flex: 0 1 auto;
}

.footnav a {
   font-size: 0.9rem;
   text-decoration: none;
   color: #E9E9E9;
}

.footnav a:hover {
   text-decoration: underline;
   color: #E9E9E9;
}

.copyright {
   padding-top: 0.5rem;
   color: #333333;
}

.copyright a {
   text-decoration: none;
   color: #333333;
}

.footnav a:hover {
   text-decoration: none;
   color: #333333;
}

/************************************************************
 * 6. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 700px) {
      /* mobile layout */ 

      html {
         font-size: 15px;
      }
      
      .col-2-3, .col-1-3, .col-1-2, .col-1-2.last, .col-3-4, .col-1-4 {
         width: 100%;
         padding: 0;
         float: none;
      }
      
      #content {
         width: 100%;
      }
      
      .time {
         width: 100%;
         max-width:80px;
      }
      
      .cost {
         width: 100%;
         max-width: 78px;
      }
      
      #sidebar {
         border-top: 1px solid #CCCCCC;
         width: 100%;
         padding: 2rem 0;
      }

}

/************************************************************
 * 7. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   white-space: nowrap;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
   clip: auto;
   overflow: visible;
   height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
   line-height: 40px;
   text-align: center;
   background: #333333;
   color: #FFFFFF;
}