/* File   : default.css
   Purpose: Stylesheet for Radio Waterloo
   Author : Bob Jonkman bob@radiowaterloo.ca
   Date   : 23 February 2022
   Notes  : See https://radiowaterloo.ca/schedule
*/


@media  screen and (min-width: 1152px)  {
    body {
            border-style: solid ;
            border-width: 3ex 3ex ;
            border-color: black ;
            padding: 0 ;
    }

    #content {
            padding: 0 3em 3em ;
    }
}

@media screen and (max-width:1152px)    {

}

@media screen and (max-width:770px) {

}

/* Trying to simulate the WordPress TwentyFourteen theme... */

body {  color: white ;
        background: black ;
        margin: 0 ;
        font-family: sans-serif ;
}

#featured-image { width: 100% ;
                  height: auto ;
}

#gutter  { width:80% ;
           margin-left: 12em;
           background: white ;
           color: black;
}

#content {  margin-left: auto ;
            margin-right: auto ;
            padding: 1em 3em ;
            width: 474px ;
            font-size: 16px ;
            color: black ;
            background: white ;
}

      .legend       {   text-align: center ;
      }

      .legend table {   display:inline-block ;
/*                        float:right ; */
                        margin: 0 1em 3ex ;  ;
                        vertical-align: top ;
      }

p,
li,
table { hyphens:none ;
}

/* ********* Tables ******* */

table {   border-collapse: collapse ;
          border-spacing: 1px ;
          table-layout:fixed ;
          font-size:small ;
}

thead { font-weight: bolder ;
        font-size: 150% ;
}

td,
th { vertical-align:middle;
     padding: 1em .3em ;
     border: thin solid black ;
}

td { color: black ;
     background-color: white ;
}

th { background-color: black ;
     color: white ;
     text-transform: uppercase ;
     font-size: 100% ;
}


/* ***** end of Tables ***** */

ul,ol
    { list-style-position: outside ;
    }

img { max-width:100% !important; }

figure.alignright,
figure.alignleft { max-width:50% !important ; } /* because floating images on mobile squish the text */



/* Frequently Used */

.box   { border:thin solid black ;
         padding: 1em ;
         margin: .5em ;
}

a.box  { display: block ;
}

.center         {   text-align: center ;
                    vertical-align: middle ;
                    margin-left: auto;
                    margin-right: auto;
}

.alert { background: orange ;
              color: black ;
        font-weight: bold ;
}

.hilite,
.highlight { background: green ;
                  color: white ;
            font-weight: bold ;



.aside { float:right;
         border:thin solid black;
         padding:1em;
         margin-left:1em;
         margin-bottom:1em;
         text-align:center;
         vertical-align:middle;
         max-width:25%;
}

.attribution { border-top:thick double black;
               border-bottom:thin solid black;
               margin-top:3ex;
               font-size:smaller;
               clear:both;
}

.attribution a img { float:right;
                     margin:.5ex 0 .5ex .5ex;
}

blockquote { color:black; }


/* Chiclets */

.ical, .map, .atom { border:thin solid black; color: white !important; padding:0 .3em; font-weight:bold; font-variant:small-caps;}

.ical { background: #060 !important ; } /* White on Green - Contrast ratio: 7.24 AAA */

.map  { background: #008 !important ; } /* White on Blue - Contrast ratio 15.49 AAA */

.atom { background: #A20 !important ; } /* White on Orange - Contrast ratio 7.14 AAA */




/* EOF: default.css */