/*
PRODUCTION PAGES CSS FILE
link to this file in the with
*NOTE* in "variables" files, use only the filename (e.g. '../blackstyle.css') as '?version=latest' is appended automatically by ...archive.shared.prod-index
*/
body {
font-family: arial, helvetica, sans-serif;
background-image: url("shared/prods-bkgrnd.gif");
background-attachment:fixed;
background-color : #000000;
color : #ccccff;
margin:0;
}
a { text-decoration:none }
a:link { color: #BBBB00}
a:visited { color: #777700}
a:hover { color: #FFFF00}
h1, h2, h3, h4, h5, h6 {
-webkit-margin-before:0.4em;
-webkit-margin-after:0.4em;
margin-top:0.4em;
margin-bottom:0.4em;
}
#navigation li {
list-style: none;
float: left;
margin: 0.8em 1em 0.8em 0em;
}
#navigation li a {
display: block;
text-decoration: none;
color: #ffff00;
font-size: 0.9em;
margin: 2px 1em;
}
#navigation li a:hover {
background-color: blue;
}
#navigation li a:visited {
color: #FFFFFF;
}
.wpb {
border-style:solid;
border-color:white;
border-width:4px;
}
/* styles for award layouts (see 201[6|7]04_festivals) */
/* far too complex. Avoid.*/
.awards {
max-width:600px;
margin: auto;
background-color:#000;
border: solid #333 2px;
}
.awards a {
text-decoration: none;
}
.aw_head {
background-color:#444;
text-align:center;
padding: 8px;
}
.aw_body {
padding: 16px 4px 20px 4px;
}
.aw_1 {
display: inline-block;
width: 33%;
text-align:left;
}
.aw_2 {
display: inline-block;
width: 34%;
text-align:center;
}
.aw_3 {
display: inline-block;
width: 33%;
text-align:right;
}
/* END styles for award layouts (see 201604_festivals) */
/* Awards and adjudicators layouts for festivals, Ball Boys etc */
/* tables with line-by-line striping */
.bbawards {width:100%; max-width:640px; margin:auto;}
.bbawards tr {background-color:#222; padding:12px;}
.bbawards tr:nth-child(even) {background-color: #333;}
.bbawards th {padding: 12px;}
.bbawards td {padding:12px; text-align:left;}
/* small awards tables on yyyymm_festivals pages and elsewhere*/
.atable {width:100%; max-width:900px; margin:auto;}
.atable tr {background-color:#222; padding:12px;}
.atable th {background-color:#222; padding:12px; text-align:center;}
.atable td {padding:12px; text-align:left;}
.atablx tr {background-color:#333; padding:12px;}
.atablx th {background-color:#333; padding:12px; text-align:center;}
.atablx td {background-color:#333; padding:12px; text-align:left;}
/* END awards layouts for Ball Boys etc*/
/* horizontal timenu items */
.menubox {
display: inline;
text-decoration: none;
font-weight: bold;
padding: 6px;
background-color: #080808;
margin: 5px;
line-height: 2.5;
border-radius: 5px;
white-space:nowrap;
}
.menuboo {
display: inline;
text-decoration: none;
padding: 4px;
background-color: #222;
border: solid 2px #333;
margin: 5px;
line-height: 2.5;
border-radius: 5px;
white-space:nowrap;
}
/* END horizontal timenu items */
/* b_shows_top menu */
.bstmenud {
background: #333;
position:fixed;
padding: 2px;
top:0px;
left:60px;
border-radius: 4px;
}
.bstmenua {
text-decoration: none;
padding: 1px;
border: solid 1px #666;
background: #484848;
color: #7ec3ef;
border-radius: 4px;
margin-right: 4px;
}
/* END b_shows_top menu */
/* Flex container/s for general use */
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
-webkit-flex-flow: row wrap;
justify-content: space-around;
flex-wrap: wrap;
}
.flex-item {
text-align: center;
margin: 0.5em;
flex: 1 1 auto;
}
.flex-item-fixed {
text-align: center;
vertical-align: middle;
margin: 0.5em;
flex: 0 0 auto;
}
.flex-item-middle {
text-align: center;
margin: 0.5em;
display: flex;
-webkit-flex-direction:column;
flex-direction: column;
-webkit-justify-content:center;
justify-content:center;
resize:vertical;
/* overflow: auto; */
}
.flex-item-middle div {
resize: vertical;
/* overflow: auto; */
}
/* END Flex container/s for general use */
/* Flex object for miscellaneous pages */
.ibk {
width: 224px;
height: 400px;
padding: 8px;
margin: 8px;
background-color: #fff;
color: #000;
}
/* END Flex object for miscellaneous pages */
/* For the entire 'body' file */
.content-wrapper {
width:100%;
max-width:1980px;
margin:auto;
text-align: center;
}
/* END For the entire 'body' file */
/* Dropdown Button */
.dropbtn {
cursor: pointer;
}
/* The container
- needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
line-height:1.25;
padding:4px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
/* CAST list classes */
.middle {
text-align:center;
margin:auto;
}
.R47 {
width:47%;
text-align:right;
}
.C6 {
width:6%;
text-align:center;
}
.L47 {
width:47%;
text-align:left;
}
.cast-table th, td {
padding: 4px;
margin: 4px;
}
/* END CAST list classes */
.smcaps {
font-variant:small-caps;
}
.smi {
font-size:x-small;
font-style:italic;
}
/* shrink facebook graphic on narrow screens */
#fbgfx {
width:600px;
height:315px;
border:0;
margin: 16px auto 16px auto;
}
@media only screen and (max-width: 632px) {
#fbgfx {
width:300px;
height:158px;
border:0;
margin: 4px auto 4px auto;
}
}
/* END shrink facebook graphic on narrow screens */
/* START different images for < 500px */
.over500 {
}
.under500 {
display:none;
}
@media only screen and (max-width: 500px) {
.over500 {
display:none;
}
.under500 {
display:inline-block;
}
}
/* END different images for < 500px */
/* START different images for < 700px */
.over700 {
}
.under700 {
display:none;
}
@media only screen and (max-width: 700px) {
.over700 {
display:none;
}
.under700 {
display:inline-block;
}
}
/* END different images for > & < 700px */
/* START different content for > & < 900px */
/* WIDE and NARROW used by pix-engine */
.wide {
}
.narrow {
display:none;
}
.over900 {
}
.under900 {
display:none;
}
@media only screen and (max-width: 900px) {
.wide {
display:none;
}
.narrow {
display:inline-block;
}
.over900 {
display:none;
}
.under900 {
display:inline-block;
}
}
/* END different content for > & < 900px */
/* BEGIN content for topnav menu in X_shows_top */
/* Add a background color to the top navigation */
.topnav {
background-color: #111;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
background-color:#222;
color: #fff;
text-align: center;
padding: 8px 8px;
text-decoration: none;
font-size: 10px;
border:solid #333 1px;
}
/* Add an active class to highlight the current page */
.tnactive {
background-color: #000;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.tndropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.tndropdown .tndropbtn {
font-size: 10px;
background-color:#222;
border:solid #333 1px;
outline: none;
color:#fff;
padding: 8px 8px;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.tndropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
}
/* Style the links inside the dropdown */
.tndropdown-content a {
float: none;
color: #fff;
padding: 8px 8px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background on topnav links and the dropdown button on hover */
.topnav a:hover, .tndropdown:hover .tndropbtn {
background-color: #444;
color: white;
}
/* Add a grey background to dropdown links on hover */
.tndropdown-content a:hover {
background-color: #555;
color: white;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.tndropdown:hover .tndropdown-content {
display: block;
z-index: 1;
}
/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
.topnav a:not(:first-child), .tndropdown .tndropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: fixed;
right: 0px;
top: 0px;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .tndropdown {float: none;}
.topnav.responsive .tndropdown-content {position: relative;}
.topnav.responsive .tndropdown .tndropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/* END content for topnav menu in X_shows_top */
.trinity {
font-family: "Times New Roman", Times, serif;
}
/* Typed newspaper extracts */
.press {
background:ivory;
color:brown;
width:75%;
max-width:512px;
margin:auto;
padding:16px 32px;
text-align:justify;
border-radius:25px;
}
.press h1, h2, h3, h4 {
text-align:center;
}
.press div {
font-family: 'Times New Roman', Times, serif;
}
/* // Typed newspaper extracts */
/* Home page notes */
.notes {
width:75%;
max-width:512px;
margin:auto;
background:#111;
border-radius:25px;
padding:24px 32px;
text-align:justify;
}
.notes h1, h2, h3, h4 {
text-align:center;
}
/* START the classes used to dim or omit things during a playing Album */
.dim {
opacity: 0.2;
filter:alpha(opacity=20); /* for IE8 and earlier */
}
.off {
display:none;
}
/* END the classes used to dim or omit things during a playing Album */
/* Facebook-alike for lifted comments */
.facebook {
width:75%;
max-width:512px;
margin:auto;
background:white;
color:black;
border-radius:10px;
padding:12px 16px;
text-align:justify;
}
.facebook h4 h5 {
text-align:left;
}
.facebook a:link { color:blue }
.facebook a:visited { color:darkblue}
.facebook a:hover { color: lightblue}
/* END Facebook-alike for lifted comments */
/* END CSS File blackstyle.css */