body { color:#000; text-align:center; background: white url("images/greengrass2.jpg") top left repeat-y; margin: 0; padding: 10px; font-family: Verdana, Helvetica;}

/*div { border-style: solid; border-color: red;}*/

#title { color:#000; border-radius: 10px; position: relative; z-index: 3; top: 0; text-align: center; background-color: whitesmoke;
padding: 1em 0; margin: 1em 0; opacity: 0.9;}
#title h1 { font-size:40px;}
#title p { font-size:28px; margin:0.5em;}
#title em { font-size:20px;}

.red {color:red;}

#maincontainer { width: 400px; color:#000; border-radius: 10px; position: relative; z-index: 4; top: 0; text-align: left; background-color: whitesmoke; padding: 1em; margin: 1em auto; opacity: 0.9; font-size:16px;}
#maincontainer .red-text { color:red;}
#raindout { color:red;}
#maincontainer .green-text { color:green;}

table {border-collapse:collapse; border: 1px black solid; width:100%;}
th {border-bottom: 1px black solid; padding-top: 1em; width:100%;}
button:hover {   cursor: pointer;}
td {    text-align: center;}
.lj {    text-align: left;}
.tb {    border-top: thin solid #666666;}
.divider {    border-top: thin solid #666666;}

.default-value { margin: 1em; }

.concert { text-align: left; margin-bottom: 30px; padding-top: 25px; float:left; width: 100%; background: url("images/picket.png") top right repeat-y; background-size: 100%; z-index: 1;}
.cdate { width: 120px; float: left; font-size: 28px; font-weight: bold; border-radius: 10px; position: relative; z-index: 2; top: 0; text-align: center; background-color: whitesmoke; padding: 10px; margin: 0 30px; opacity: 0.8;}
.cdate .mon{font-size: 24px; padding: 10px 0px 0px; margin: 0px;}
.cdate .day{font-size: 40px; padding: 0px; margin: 0px;}
.cdate .tim{font-size: 20px; font-weight: normal; padding: 0px 0px 10px; margin: 0px;}
.cntr { width:100%;}

.archiveband { text-align: center; font-size: 18px;}
.archiveband::first-line { font-size: 24px; font-weight:bold;}
.smaller { color: gray; font-size: 12px;}
.archiveband img { height: 150px; margin: 10px; opacity: 1;}
.archiveband video { height: 240px; margin: 10px; opacity: 1;}

.cntr_archiveup { text-align: center; margin-top: 10px; font-size: 18px; background-color: whitesmoke; opacity: 1; width: 100%;}
.cntr_archive { text-align: center; margin: 10px; font-size: 18px; background-color: whitesmoke; opacity: 1; width: 100%; padding-top:15px;}
.cntr_archive h3 { padding:0;}
.cntr_archive img { height: 150px; margin: 10px; opacity: 1;}
.narrative { font-size: 14px;}
    
@media only screen and (min-width: 600px) {
  /* comes into effect for screens less than or equal to 600 pixels */
/*  #title {font-size: 1em;}
  ul.polaroids p {font-size: 1em; margin: 0 0 27px 0; }*/
  .cntr { width:900px; margin: auto;}
}

ul.polaroids { width: 100%; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids p { background: #fff; float: left; margin: 0 20px 27px 0; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333;
font-size: 18px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg);
-webkit-transition:-webkit-transform .15s linear; -moz-transition:-webkit-transform .15s linear; -o-transition:-webkit-transform .15s linear; }
ul.polaroids em { font-size: 14px; } 
ul.polaroids img { display: block; width: 300px; margin-bottom: 12px; }
ul.polaroids li:nth-child(even) p { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) p { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; position: relative; top: -5px; }
ul.polaroids li:nth-child(5n) p { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); position: relative; right: 5px; }
ul.polaroids li:nth-child(8n) p { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) p { position: relative; left: -5px; top: 3px; }
ul.polaroids li p:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }

#footer { float: left; width: 100%; margin: 20px; padding: 0; color:#FFF; text-align:center;}
#footer a {color:#FFF;}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #578c47;
  color: white;
}
#navigate img {
    margin: 0 1em;
    width: 90px;
    float: left;
    overflow: visible;
    position: relative;
    z-index: 20;
}