/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2010 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.

  ********************************************
  Coppermine version: 1.5.3
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.6.x/themes/toh_history/style.css $
  $Revision: 6985 $
  $LastChangedBy: gaugau $
  $Date: 2010-01-02 11:38:29 +0100 (Sa, 02 Jan 2010) $
**********************************************/
/* Colors used in this style sheet:
    Hex 000000 = RBG   0,   0,   0 = black
    Hex 5F5F5F = RBG  95,  95,  95 = light black
    Hex BDBEBD = RBG 189, 190, 189 = dark grey
    Hex ebffe8 = RBG 209, 215, 220 = medium grey
    Hex CCCCCC = RBG 204, 204, 204 = medium grey
    Hex E4E4E4 = RGB 228, 228, 228 = medium grey
    Hex fafef9 = RBG 239, 239, 239 = dark white
    Hex FFFFFF = RBG 255, 255, 255 = white
    Hex 005D8C = RBG   0,  93, 140 = dark blue
    Hex 0033CC = RBG   0,  91, 104 = medium blue
    Hex 00aa00 = RBG  14, 114, 164 = light blue
    Hex 840084 = RBG 132,   0, 132 = purple
    Hex 00529B = RGB   0,  82, 155 = blue
    Hex BDE5F8 = RGB 189, 229, 247 = cyan
    Hex 4F8A10 = RGB  79, 138,  16 = dark green
    Hex DFF2BF = RGB 223, 242, 191 = light green
    Hex 9F6000 = RGB 159,  96,   0 = dark brown
    Hex FEEFB3 = RGB 254, 239, 179 = light brown
    Hex D8000C = RGB 216,   0,  12 = red
    Hex FFBABA = RGB 255, 186, 186 = pink
    Hex D63301 = RGB 214,  51,   1 = red
    Hex FFCCBA = RGB 255, 204, 186 = pink
*/


body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   background-color: #f4fbf4 !important;
   padding: 0 20px 0 20px;
   padding-top: 62px !important; /* need this to adjust for the fixed header  */
   background: #009900 url(images/green_background_test_a.png);  
   color: black;
   margin: 0 auto;
}


/* **************************** */   
   .strip_image {
/*       max-width: 10vw!important;  */
       height: auto;
   }

   #film {
       width: 100%!important;   
   }

   #film .thumb a:link  {
       width: 100%!important;
   }

   .tape  {
       width: 100%!important;
       height: 100%!important;
       margin-left: 0!important;
   }

   .remove {
       display: none!important;
   }
/* **************************** */      

 

/* The emerging W3C standard

   that is currently Firefox-only */
* {
   scrollbar-width: auto;
   scrollbar-color: #00cc00 white;
   scrollbar-thumb: #009900;
}
/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
   width: 20px;
}
*::-webkit-scrollbar-track {
   background: white;
}
*::-webkit-scrollbar-thumb {
   background-color: black;
   border-radius: 20px;
   border: 3px solid white;
}
::-webkit-scrollbar-thumb:hover {
   background: #009900;
}

#btn-back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  opacity: 1.0;
}

#btn-back-to-top:hover {
  background-color: #555;
}



#logo {
   float: left;
   border: none;
}
#header {
   width: 70%;
   float: right;
   text-align: center;
}
#sysmenu {
   margin-top: 5px;
}
.clearer {
   clear: both;
}
/*
table {
   font-size: 12px;
}
*/
   
h1 {
   font-weight: bold !important;
   font-size: 22px !important;
   text-decoration: none;
   line-height: 120%;
   color: #008800;
   /*
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    margin: 2px;
*/
}
h2 {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 18px;
   margin: 0;
}
h3 {
   font-weight: normal;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   margin: 2px;
}
p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 100%;
   margin: 2px 0;
}
pre.filepath {
   margin: 0;
   padding: 0;
}
ul, ol {
   margin-left: 5px;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
}
li {
   margin-left: 10px;
   margin-top: 4px;
   margin-bottom: 4px;
   padding: 0;
   list-style-position: outside;
}
ul li {
   list-style-type: disc;
   list-style-type: none;
}
.textinput {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   border: 1px solid #ebffe8;
   border: 1px solid #00aa00;
   padding-right: 3px;
   padding-left: 3px;
}
.listbox {
   font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
   font-size: 100%;
   border: 1px solid #ebffe8;
   vertical-align: middle;
}
.button {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 85%;
   border: 1px solid #005D8C;
   background-image: url('images/button_bg.gif');
   background-position: 50% bottom;
   cursor: pointer;
   padding-left: 0;
   padding-right: 0;
   margin-right: 2px;
}
.radio {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   vertical-align: middle;
}
.checkbox {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
/* vertical-align: middle;  */
   margin-right: 5px;
}
a:link {
   color: #0033CC;
   text-decoration: none;
}
a:visited {
   color: #0033CC;
   text-decoration: none;
}
a:focus {
   color: #0033CC;
   text-decoration: none;
}
a:hover {
   color: #0033CC;
   text-decoration: underline;
}
a:active {
   color: #0033CC;
   text-decoration: none;
}
.bblink a {
   color: #0033CC;
   text-decoration: none;
}
.bblink a:hover {
   color: #0033CC;
   text-decoration: underline;
}
.maintable {
   border: 1px solid #00aa00;
   background-color: #fafef9;
   margin-top: 1px;
   margin-bottom: 1px;
   width: 100% !important;
}
.tableh1 {
   background: #00aa00;
   color: #FFFFFF;
   padding-top: 3px;
   padding-right: 10px;
   padding-bottom: 3px;
   padding-left: 10px;
   font-weight: bold;
}
.tableh2 {
   background: #ebffe8;
   background: #e1fdda;
   color: #000000;
   padding-top: 3px;
   padding-right: 10px;
   padding-bottom: 3px;
   padding-left: 10px;
   font-weight: bold;
}
.tableb {
   background: #fafef9;
   background: #e1fdda;
   padding-top: 3px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
}
/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {
   background: #ffffff; /* was E4E4E4  */
}
.tablef {
   background: #ebffe8;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
}
.catrow_noalb {
   background: #ebffe8;
   color: #000000;
   padding-top: 3px;
   padding-right: 10px;
   padding-bottom: 3px;
   padding-left: 10px;
/*   
   border-top: 1px solid #00cc00;
   border-bottom: 1px solid #00cc00;
*/
}
.catrow {
   background: #fafef9;
   padding-top: 3px;
   padding-right: 10px;
   padding-bottom: 3px;
   padding-left: 10px;
}
.album_stat {
   font-size: 85%;
   margin: 5px 0;
}
.thumb_filename {
   font-size: 80%;
   display: block;
}
.thumb_title {
   font-weight: bold;
   font-size: 80%;
   padding: 2px;
   display: block;
}
.thumb_caption {
   font-size: 80%;
   padding: 1px;
   display: block;
}
.thumb_caption a {
   text-decoration: underline;
   color: #000000;
}
.thumb_num_comments {
   font-weight: normal;
   font-size: 80%;
   padding: 2px;
   font-style: italic;
   display: block;
}
.user_thumb_infobox {
   margin-top: 1px;
   margin-bottom: 1px;
}
.user_thumb_infobox th {
   font-weight: bold;
   font-size: 100%;
   margin-top: 1px;
   margin-bottom: 1px;
   text-align: center;
}
.user_thumb_infobox td {
   font-size: 80%;
   margin-top: 1px;
   margin-bottom: 1px;
   text-align: center;
}
.user_thumb_infobox a {
   text-decoration: none;
   color: #000000;
}
.user_thumb_infobox a:hover {
   color: #000000;
   text-decoration: underline;
}
.sortorder_cell {
   background: #00aa00;
   color: #FFFFFF;
   padding: 0;
   margin: 0;
}
.sortorder_options {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background: #00aa00;
   color: #FFFFFF;
   padding: 0;
   margin: 0;
   font-weight: normal;
   font-size: 80%;
   white-space: nowrap;
}
.navmenu {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;
   font-size: 100%;
   font-weight: bold;
   background: #00aa00;
   border-style: none;
}
.navmenu img {
   margin-top: 1px;
   margin-right: 5px;
   margin-bottom: 1px;
   margin-left: 5px;
}
.navmenu a {
   display: block;
   padding-top: 2px;
   padding-right: 5px;
   padding-bottom: 2px;
   padding-left: 5px;
   text-decoration: none;
   color: #FFFFFF;
}
.navmenu a:hover {
   background: #fafef9;
   text-decoration: none;
   color: #000000;
}
.admin_menu {
   padding: 2px 2px;  
   font-family: Arial, Helvetica, sans-serif;
   font-size: 80%;
   border: 1px solid #005D8C;
   background-color: #FFFFFF;
   background-image: url('images/button_bg.gif'); 
   background-position: 50% bottom;
   background-repeat: repeat-x;
   color: #000000;
   margin-top: 2px;
   margin-bottom: 2px;
   text-align: center;
}
.admin_menu a {
   color: #000000;
   text-decoration: none;
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 2px;
   padding-right: 2px;
}
.admin_menu a:hover {
   color: #000000;
   text-decoration: underline;
}
.admin_float {
   float: left;
   margin-left: 1px;
   margin-right: 1px;
   margin-top: 1px;
   margin-bottom: 5px;
   white-space: nowrap;
   display: block;
   position: relative;
   /*width:100px;*/
}
.admin_menu_wrapper {
   width: 100%;
   white-space: normal;
}
#admin_menu_anim {
   background-image: url('images/button_bg_anim.gif');
}
.icon {
   vertical-align: middle;
   margin-right: 1px;
}
.comment_date {
   color: #5F5F5F;
   font-size: 90%;
   vertical-align: middle;
}
.image {
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
   margin: 2px;
}
/* pseudo-classes for image links */
a:link .image {
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
   margin: 0;
}
a:visited .image {
   border-style: solid;
   border-width: 1px;
   border-color: #840084;
   margin: 2px;
}
a:focus .image {
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
   margin: 2px;
}
a:hover .image {
   border-style: solid;
   border-width: 1px;
   border-color: #0033CC;
   margin: 2px;
}
a:active .image {
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
   margin: 2px;
}
/* pseudo-classes for middlethumb links */
a:link .middlethumb, a:visited .middlethumb, a:focus .middlethumb, a:hover .middlethumb, a:active .middlethumb {
   border: 2px solid blue;
}
.imageborder {
   border: 1px solid #000000;
   background-color: #FFFFFF;
   margin-top: 3px;
   margin-bottom: 3px;
}
.display_media {
   background: #fafef9;
   padding-top: 3px;
   padding-right: 3px;
   padding-bottom: 3px;
   padding-left: 3px;
}
.thumbnails {
   background: #fafef9;
   border: 1px solid #dddddd;
   border: 1px solid #00aa00;
   padding: 5px;
}

.footer {
   font-size: 9px;
}
.footer a {
   text-decoration: none;
   color: #000000;
}
.footer a:hover {
   color: #000000;
   text-decoration: underline;
}
.statlink {
   color: #FFFFFF;
}
.statlink a {
   text-decoration: none;
   color: #FFFFFF;
}
.statlink a:hover {
   color: #FFFFFF;
   text-decoration: underline;
}
.alblink {
   font-weight: bold;
}
.alblink a {
   text-decoration: underline;
   color: #000000;
}
.alblink a:hover {
   color: #000000;
   text-decoration: underline;
}
.catlink {
   display: block;
   margin-bottom: 2px;
   font-weight: bold;
}
.catlink a {
   text-decoration: underline;
   color: #000000;
}
.catlink a:hover {
   color: #000000;
   text-decoration: underline;
}
.topmenu {
   line-height: 130%;
   font-size: 100%;
}
.topmenu a {
   color: #0033CC;
   text-decoration: none;
}
.topmenu a:hover {
   color: #0033CC;
   text-decoration: underline;
}
.img_caption_table {
   border: none;
   background-color: #FFFFFF;
   width: 100%;
   margin: 0;
}
.img_caption_table th {
   background: #ebffe8;
   font-size: 100%;
   color: #000000;
   padding-top: 4px;
   padding-right: 10px;
   padding-bottom: 4px;
   padding-left: 10px;
   border-top: 1px solid #FFFFFF;
}
.img_caption_table td {
   background: #fafef9;
   padding-top: 6px;
   padding-right: 10px;
   padding-bottom: 6px;
   padding-left: 10px;
   border-top: 1px solid #FFFFFF;
   white-space: normal;
}
.debug_text {
   border: #BDBEBD;
   background-color: #fafef9;
   width: 100%;
   margin: 0;
}

.listbox_lang {
   color: #000000;
   background-color: #ebffe8;
   border: 1px solid #00aa00;
   font-size: 80%;
   font-family: Arial, Helvetica, sans-serif;
   vertical-align: middle;
}
.pic_title {
   color: #000000;
/*   font-size: 120%;  */
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-align: center;
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1.0em;
}
h1.pic_title {
   font-size: 12px !important;
   padding-top: 10px;
}
.pic_caption {
   color: #000000;
   font-size: 100%;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-align: center;
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 0;
   margin-bottom: 0;
   line-height: 1.0em;
}
h2.pic_caption {
   padding-bottom: 10px;
}

#cpg_main_block {
   border: 2px solid #666666; 
   padding: 0 20px 20px 20px;
   margin: 0 auto;
   background-color: #f4fbf4 !important;
   max-width: 1280px;
}
.important {
   /* background-image : url(images/important.gif); */
   color: red;
   font-weight: bold;
   padding-left: 1px;
   padding-right: 1px;
   padding-top: 3px;
   padding-bottom: 3px;
}
#cpgChooseLanguageWrapper {
   float: left;
   margin-left: 3px;
   margin-right: 3px;
   margin-top: 0;
   margin-bottom: 0;
}
#cpgChooseThemeWrapper {
   float: left;
   margin-left: 3px;
   margin-right: 3px;
   margin-top: 0;
   margin-bottom: 0;
}

/*   Start of Filmstrip stuff   */
#filmstrip .maintable {
   width: 100%;
}
#filmstrip {
   overflow: auto;
}
.filmstrip_background {
   background-color: #000000;
}
.prev_strip {
   text-align: left;
}
.next_strip {
   text-align: right;
}
/*   End of Filmstrip stuff   */

/** Swfupload css **/
div.fieldset {
   border: 2px solid #00aa00;
   margin: 10px 0;
   padding: 20px 10px;
}
div.fieldset span.legend {
   position: relative;
   padding: 3px;
   top: -30px;
   background-color: #00aa00;
   color: #fff;
}
div.flash {
   width: 375px;
   margin: 10px 5px;
   border-color: #D9E4FF;
}
input[disabled] {
   border: 1px solid #ccc
} /* FF 2 Fix */
.progressWrapper {
   width: 357px;
   overflow: hidden;
}
.progressContainer {
   margin: 5px;
   padding: 4px;
   border: solid 1px #E8E8E8;
   background-color: #F7F7F7;
   overflow: hidden;
}
/* Message */
.message {
   margin: 1em 0;
   padding: 10px 20px;
   border: solid 1px #FFDD99;
   background-color: #FFFFCC;
   overflow: hidden;
}
/* Error */
.red {
   border: solid 1px #B50000;
   background-color: #FFEBEB;
}
/* Current */
.green {
   border: solid 1px #DDF0DD;
   background-color: #EBFFEB;
}
/* Complete */
.blue {
   border: solid 1px #CEE2F2;
   background-color: #F0F5FF;
}
.progressName {
   font-size: 8pt;
   font-weight: 700;
   color: #555;
   width: 323px;
   height: 14px;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
}
.progressBarInProgress, .progressBarComplete, .progressBarError {
   font-size: 0;
   width: 0%;
   height: 2px;
   background-color: blue;
   margin-top: 2px;
}
.progressBarComplete {
   width: 100%;
   background-color: green;
   visibility: hidden;
}
.progressBarError {
   width: 100%;
   background-color: red;
   visibility: hidden;
}
.progressBarStatus {
   margin-top: 2px;
   width: 337px;
   font-size: 7pt;
   font-family: Arial;
   text-align: left;
   white-space: nowrap;
}
a.progressCancel {
   font-size: 0;
   display: block;
   height: 14px;
   width: 14px;
   background-image: url(../../images/cancelbutton.gif);
   background-repeat: no-repeat;
   background-position: -14px 0;
   float: right;
}
a.progressCancel:hover {
   background-position: 0 0;
}
.swfupload {
   vertical-align: top;
}
/**styles for photo manager*/
table#pic_sort tr td {
   padding: 4px;
   border-bottom: 1px solid #CCCCCC;
}
/** styles for album manager and photo album*/
table#album_sort tr td {
   padding: 3px;
   border-bottom: 1px solid #CCCCCC;
}
table#album_sort tr td span.editAlbum {
   margin-left: 100px;
   font-size: 10px;
   line-height: 100%;
   text-decoration: underline;
   cursor: pointer;
   display: none;
   color: #FF0000;
}
.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
   border: 1px solid;
   margin: 10px 0;
   padding: 15px 10px 15px 50px;
   background-repeat: no-repeat;
   background-position: 10px center;
}
.cpg_message_info {
   color: #00529B;
   background-color: #BDE5F8;
   background-image: url('../../images/message/info.png');
}
.cpg_message_success {
   color: #4F8A10;
   background-color: #DFF2BF;
   background-image: url('../../images/message/ok.png');
}
.cpg_message_warning {
   color: #9F6000;
   background-color: #FEEFB3;
   background-image: url('../../images/message/warning.png');
}
.cpg_message_error {
   color: #D8000C;
   background-color: #FFBABA;
   background-image: url('../../images/message/stop.png');
}
.cpg_message_validation {
   color: #D63301;
   background-color: #FFCCBA;
   background-image: url('../../images/message/error.png');
}
#GB_overlay {
   width: 100%;
   height: auto;  
}
#GB_caption {
   width: auto;
}
#GB_window {
   background-color: #fafef9;
   border: 5px solid #00aa00;
   overflow: hidden;
   margin: 0 auto;
}
#GB_frame {
   background-color: white !important;
}
.external {
   background: transparent url('../../images/link.gif') 100% 50% no-repeat;
   padding-right: 10px;
}
.detail_head_collapsed, .detail_head_expanded {
   color: #0033CC;
}
/* *********************************************
   
   The next lines set up the 
	Border Box around the area that says
	The Toronto Optimists History Photo Gallery
	Album Lists, Last Uploads, etc

******************************************* */

#brdheader div.box {
   border-top-width: 5px;
}
div.box {
   overflow: hidden;
   border: 1px solid #00aa00;
   background-color: #ffffff;
   margin-left: 0;
   margin-bottom: 15px;
   width: 100%;
}
div.blockpost > div > div.inbox {
   padding-bottom: 1px;
}
div.block div.inbox, div.blockmenu div.inbox {
   padding: 3px 15px
}

.inbox p {
   font-size: 14px;
   margin: 5px 0;
   font-family: Verdana, Arial, Helvetica, sans-serif;
}

#brdmenu {
   background-color: #00aa00;
   color: #fff;
   padding: 6px;
   font-weight: bold;
}
#brdmenu a:link, #brdmenu a:visited {
   color: #fff;
   text-decoration: none;
}
#brdmenu a:hover {
   color: #37ff37;
   text-decoration: none
}
#brdwelcome {
   line-height: 1.4em;
   padding: 5px;
   padding-bottom: 7px;
}
#brdwelcome a:link, #brwelcome a:visited {
   text-decoration: underline
}
#brdwelcome a:hover {
   text-decoration: none
}
/* End of "	Enclose Gallery Name and other info	*/
/*	Define stuff for the Dropdown Menus	and fixed header	*/
/*	Define stuff for the Fixed Header 

		Opti Head, name, march on, etc

*/
.wrapper {
   position: -webkit-sticky;
   position: -moz-sticky;
   position: -o-sticky;
   position: -ms-sticky;
   position: sticky;
   top: 0;
   margin-bottom: 15px;
   padding-top: 0;
   width: auto;
   height: 152px; /* This will be the height of the Fixed Header - changed from 145px on July 20 */ ;
   border-top: 5px solid #009900;
   border-bottom: 6px solid #009900;
   background-color: black;
   z-index: 2000; /* Make sure the menus are always on Top  */
   display: block;
}
/*

.container {

	height: 140px;

	top: 0;

	margin: 4px 0 0 20px;

	padding: 0;

}

.opti-icon {

	width: 140px;

	height: 140px;

	margin: 2px 20px 0 0;

	background: url('images/toronto_optimists_crest_original_008800_130px.png') no-repeat;

	float: left;

	text-align: center;

	border: none;

	display: block;

	-webkit-filter: drop-shadow(1px 1px 2px #000000);

	filter: drop-shadow(1px 1px 2px #000000);

}

.opti-icon img {

	margin: 10px 0 0;

}



#header {

	border-top: 8px solid #000000;

}
*/
/*   Start of Bootstrap Navbar Stuff   */
.brand-text {
   color: #00ee00 !important;
   font-weight: bold;
   font-size: 18px;
   margin-bottom: 20px;
}
.dropdown-submenu {
   position: relative;
}
.dropdown-submenu .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: 0;
   border-radius: 0.25rem;
   display: none;
}
.dropdown-submenu:hover .dropdown-menu {
   display: block;
}
.dropdown-menu.show {
   display: block;
}
.navbar-nav .nav-link {
   font-weight: bold;
   color: white;
}
.navbar-nav .nav-item .nav-link:hover {
   background-color: #e4fbe5;
   color: #009900;
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
   background-color: #e4fbe5;
}
.navbar-dark {
   background-color: #009900 !important;
   border: none !important;
   border-width: 0 !important;
   padding: 0;
}
.bg-dark {
   background-color: #009900 !important;
}
.custom-bg {
   background-color: #009900 !important;
   background-color: #000000 !important;
}
a.navbar-custom.nav-link {
   color: white;
   font-weight: bold;
}
a.navbar-brand:hover {
   text-decoration: none;
}
.navbar-brand {
   font-weight: bold;
   color: #00ee00 !important;
   float: left;
   font-size: 1.3em !important;
}
.navbar-toggler {
   padding-right: 0 !important;
}
.navbar-toggler-icon {
   float: right;
}
/*   End of Navbar Stuff   */
.titles {
   /* font-family: Times, Times New Roman, Times, serif; */
   font-family: Arial, Helvetica, sans-serif;
   /*	font-style: italic; */
   font-style: normal;
   color: white;
   letter-spacing: 1.5pt;
   /*	font-size-adjust: .52;  */
   /*	margin: 0 0 0 143px; */
   margin: 0;
   padding: 0;
   line-height: 2.0em;
}
.title_line_1 {
   padding: 0;
   margin: 10px 0 0 0;
   color: #00aa00;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.3em;
   font-weight: bold;
   font-style: italic;
   text-align: left;
   /*	text-shadow: -1px -1px 3px #000000; */
   /*	color: inherit; */
}
.title_line_2 {
   margin: 0;
   padding: 4px 0;
   color: black;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.8em;
   text-shadow: -1px -1px 3px #dddddd;
   /*	text-shadow: -1px -1px 3px #000000; */
   text-align: left;
}
.title_line_3 {
   margin: -2px 0 0 0;
   padding: 0;
   color: inherit;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.4em;
   font-weight: bold;
   text-align: left;
   /*	text-shadow: -1px -1px 3px #000000; */
}
hr.bob {
   border: 0;
   border-top: 1px solid #009900;
   opacity: 1;
}
/*	Start of Flex stuff	*/
.flex-container-buttons {
   display: flex;
   line-height: 1.0;
   flex-wrap: wrap;
   align-content: space-between;
   padding: 0;
   width: auto;
}
.flex-container-buttons > div {
   width: 100px;
   margin: 10px;
   text-align: center;
}
/*	End of Flex stuff	*/
.bobs-button {
   /*	background: rgba(0, 153, 0, 1.0); */
   background: #007700;
   border-radius: 8px;
   border: 1px solid #009900;
   text-shadow: .1em .1em 1em #000000;
   display: inline-block;
   cursor: pointer;
   color: #ffffff;
   font-family: Arial;
   font-size: 15px;
   font-weight: bold;
   padding: 6px 24px;
   text-decoration: none;
}
.bobs-button:hover {
   /*	background: linear-gradient(to bottom, #5cb811 5%, #77d42a 100%); */
   background-color: #b9f9b9;
   color: black;
}
.bobs-button:active {
   position: relative;
   top: 1px;
}

[id] {
   /* This code is need to make in-page links work properly
	If the code is not included, the link takes you to text after the ID */
   /* NOTE: Make sure overflow is not AUTO or HIDDEN or DISPLAY: INLINE to make this work   */
   scroll-margin-top: 105px; /* Adjust this value to be slightly more than your header height */
   scroll-margin-top: 90px; /* Adjust this value to be slightly more than your header height */
}

#star_rating {
   background-color: white;
}

/* *****************
**  Tablet Stuff  **
***************** */
@media (max-width: 768px) {
   .navbar-brand {
      font-size: 1.2em !important;
   }
   body {
      padding: 62px 0 0 0; 
   }
   #cpg_main_block {
      width: auto;
      padding: 0 15px 15px 15px;
      margin: 0 auto;
   }
   td#voting_table.tableh2 {
      width: 100%;
   }
   #picinfo table td + td {
      word-break: break-all;
      margin-left: auto;
      margin-right: auto;
   }
   #GB_window {
      width: auto !important;
      background-color: #fafef9;
      border: 2px solid #00aa00;
      overflow: hidden;
      left: 0 !important;
      right: 0 !important;
   }
   #GB_frame {
      background-color: white !important;
   }
   #GB_overlay {
      width: auto;
      height: auto;  
   }
   #GB_caption {
      width: auto;
   }
}

/* *********************
**  Cell Phone Stuff  **
********************* */
@media (max-width: 480px) {
   .title_line_1 {
      font-size: 1.0em;
   }
   .title_line_2 {
      font-size: 1.4em;
   }
   .title_line_3 {
      font-size: 1.0em;
   }
   .navbar-brand {
      font-size: 1.0em !important;
   }
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     font-size: 25px;
   }
   body {
      padding: 62px 0 0 0; /* need this to adjust for the fixed header  */
   }
   [id] {
   /* This code is need to make in-page links work properly
      If the code is not included, the link takes you to text after the ID */
   /* NOTE: Make sure overflow is not AUTO or HIDDEN or DISPLAY: INLINE to make this work   */
      scroll-margin-top: 63px; /* Adjust this value to be slightly more than your header height */
   } 
   .pad_15px {
      padding-left: 0;
   }
   /*
   .h1 {
      
   }
   .h2 {
      font-size: 1em;
      color: red;
   }
   */
   .year-width {
      width: 30px;
   }
   .button.navbar-toggler-icon {
      float: right;
   }
   .section {border: 1px solid black; padding: 10px; width: 100%;}
   .section-remember {padding: 10px; width: 100%;}

   .rehearsal-reports {padding: 10px;}
   
   h1 {
	   color: #ffff00; 		/* Change header color to indicate small screen  */
	   line-height: 1.6; 
	   background-color: #009900;
	   text-align: center;
	   padding: 15px;
      text-shadow: 2px 2px #000000;
	  }	
   
   h2, h3 {line-height: 1.1;}
   h2 {font-size: 1.1em}
   h3 {font-size: 1.9em;}

	.bobs-button {padding: 8px 3px; background: #007700; margin: 10px 0}
	.table-ql button {margin-bottom: 8px;}

   .yt_years_column_1 {
      width: 100%;
      color: #009900;
   }
   .yt_years_column_2 {
      width: 35%;
   }
   .yt_years_column_3 {
      width: 65%;
   }
   
   .list-group-item {
      text-align: center;
   }
 
   .p_remember_page_text {
   	font-family: Times, serif; 
      font-style: italic;
      font-weight: bold;
      text-shadow: -1px -1px 2px #bbbbbb;
      font-size: 1.4em;
   }
   .remember_table_column_1 {
      width: 37%;
      text-align: left;
   }
   .remember_table_column_2 {
      width: 63%;
   }
   ul.remember_pad_7px {
      margin: 1em 0;
      padding-left: 5px;
   }
   .remember-comments {
      padding-left: 0;
      text-indent: 0;
      padding-top: 5px; 
      padding-bottom: 0;
      font-style: italic;
   }
   .lightbox-image {
      width: 319px !important;
      height: auto;
   }
   h1.pic_title {
      background-color: white;
      width: auto;
      text-shadow: none;
   }
   .navmenu a {
      padding: 2px 0 2px 0 !important;
   }
   .tableb_alternate {
      width: auto;
/*      max-width: 310px !important; */
   }
   .tableb {
      width: auto;
/*      max-width: 310px !important; */
   }
   .image {
      width: 100% !important;
      height: auto;
   }
   .comments {
      max-width: 100vw !important;
   }
   .picpage {
/*      max-width: 310px;  */
   }
   .thumbnails {
      height: auto;
      border: 1px solid #00cc00;
   }
   .thumb {
      padding-right: 5px;
   }
   
   .strip_image {
      max-width: 45px;
   }
   
   
   td#voting_table.tableh2 {
      width: 100%;
   }
   #picinfo table td + td {
        word-break: break-all;
   }
   div.block div.inbox, div.blockmenu div.inbox {
      padding: 3px 5px
   }
   div.box {
      border: 0;
   }
   #cpg_main_block {
      border: 2px solid #666666; 
      padding: 0 5px 0 5px;
   }
   .maintable {
      width: 100%;
      overflow: auto;
      border: 0;
   }
   .tableh1 {
      padding: 5px;
   }
   .tableh2 {
/*      white-space: nowrap;  */
   }
   .tableh2.td:first-child {
      font-weight: bold;
      color: blue;
   }
   .tableb {
      margin-left: 0;
      margin-right: 0;
      padding-left: 5px;
      padding-right: 5px;
   }
   .catrow {
      padding-left: 0;
      font-size: 90%;
   }
   #GB_window {
      width: auto !important;
      background-color: #fafef9;
      border: 2px solid #00aa00;
      overflow: hidden;
      left: 0 !important;
      right: 0 !important;
   }
   #GB_frame {
      background-color: white !important;
   }
   #GB_overlay {
/*      width: auto;
      height: auto;  */
   }
   #GB_caption {
      width: auto;
   }
   .checkbox {
      margin-right: 5px;
   }
   .footer {
      padding-top: 0;
   }
   .navbar-brand {
      font-weight: bold;
      color: #2ffd36 !important;
      float: left;
   }
   #filmstrip td.thumbnails {
      width: 100%;
   }
   #filmstrip .thumbnails {
       position: relative;
       padding: 0px;
       -webkit-transition: none;
       -o-transition: none;
       transition: none;
   }

}