html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.first {
  height: 50px;
  position: relative;
}

.second {
  flex-grow: 1;
  position: relative;
}

.myImg {
    position: absolute;
  max-width: 1200px;
  max-height: 100%;
}



@media (max-width: 664px)
{
	.desktop 
	{
		display: none;
	}
}

body 
{ 
	background: white !important;	/* override bootstrap colors */
    height:100%;
    margin: 0;
    padding: 0;
}
          
/* forces images to shrink to fit */
img
{
	padding: 0;
	width: 100%;
}


.title
{
	max-width:342px;
}

.tiny 
{
	font-family:Arial; 
	font-size:11; 
	color: #35485F;		/* ## nearblack */
}
.tiny a:link {color: #466EC9; text-decoration:underline;}		/* ## bluetext */

.things 
{
	font-family:Arial; 
	font-size:14.5; 
	color: #35485F;		/* ## nearblack */
}
.things a:link {color:#466EC9; text-decoration:underline;}		/* ## bluetext */

.maintext
{
	font-family:Arial; 
	font-size:16; 
	color:#35485F;		/* ## nearblack */
}

.header
{
	font-family:Arial; 
	font-size: 18; 
	color: #466EC9;		/* ## bluetext */
}


/********** 
	NAVBAR 
***********/

/* to make the navbar reappear on scroll up */
#topbar 
{	
    position: absolute;
    top: 0px;	/* offset from top */
    left: 0;
    z-index: 0;
    width: 100%;
    padding: 0px;
    text-align: left;
    background: rgba(0, 0, 0, 0);
    color: #fff;
}
	
a:link {color: #466EC9;  }		/* ## bluetext */
a:hover {color: #014FFF ; }	/* bright blue */
a:visited {color: #7B93C9 ; }		/* greyish blue */

/* look of navbar */
.navbar
{ 
	background: #000000 !important;		/* ## topbkg */
    border: 0 !important;
    margin: 0	!important;
    padding: 0	!important;
}
.navbar-toggle
{ 
	background: #000000 !important;		/* ## topbkg */
    border: 0 !important;
    margin: 0	!important;
    padding: 0	!important;
    cursor:pointer	!important;
}

.dropdown-menu
{ 
	background: #000000 !important;		/* ## topbkg */
    border: 0 !important;
    margin: 0	!important;
    padding: 0	!important;
}

.dropdown-toggle
{ 
	background: #000000 !important;		/* ## topbkg */
}

.navbar-nav a:link {color:#D7EDFF !important;}
.navbar-nav a:visited {color:#D7EDFF !important;}
.navbar-nav a:active {color:#D7EDFF !important;}
.navbar-nav a:hover {color:#D7EDFF !important;  background:#2A2B34 !important;}	/* bar color of selected item */

.dropdown-menu a:link {color:#D7EDFF !important;}
.dropdown-menu a:visited {color:#D7EDFF !important;}
.dropdown-menu a:active {color:#D7EDFF !important;}
.dropdown-menu a:hover {color:#D7EDFF !important;  background:#2A2B34 !important;}	/* bar color of selected item */

.weditem a:link {color:#FF8E8D !important;}
.weditem a:visited {color:#FF8E8D !important;}
.weditem a:active {color:#FF8E8D !important;}
.weditem a:hover {color:#FF8E8D !important;  background:#2A2B34 !important;}

.curitem a:link {color: #FFFBCF !important;}		/* ## selMenuItem */
.curitem a:visited {color: #FFFBCF !important;}		/* ## selMenuItem */
.curitem a:active {color: #FFFBCF !important;}		/* ## selMenuItem */
.curitem a:hover {color: #FFFBCF !important;  background:#2A2B34 !important;}		/* ## selMenuItem */

.imgLinks {font-family:Arial; font-size:20; color:#C7C984;}
.imgLinks a:link {color:#466EC9; text-decoration:none;}		/* ## bluetext */
.imgLinks a:visited {color:#466EC9; text-decoration:none;}		/* ## bluetext */
.imgLinks a:active {color:#466EC9; text-decoration:none;}		/* ## bluetext */
.imgLinks a:hover {color:#466EC9; text-decoration:none;}		/* ## bluetext */

.bluethings {font-family:Arial;}
.bluethings a:link {color:#466EC9; text-decoration:underline;}		/* ## bluetext */
.bluethings a:visited {color:#466EC9; text-decoration:underline;}		/* ## bluetext */
.bluethings a:active {color:#466EC9; text-decoration:underline;}		/* ## bluetext */
.bluethings a:hover {color:#466EC9; text-decoration:underline;}		/* ## bluetext */

.bannercontact {font-family:Arial; font-size:12px; color: #E4EDFF;}		/* ## bcontact */
.bannercontact a:link {color: #E4EDFF;}		/* ## bcontact */
.bannercontact a:visited {color: #E4EDFF;}		/* ## bcontact */
.bannercontact a:active {color: #E4EDFF;}		/* ## bcontact */
.bannercontactline {border-color: #E4EDFF; margin-top:0.3em; margin-bottom:0;}		/* ## bcontact */

@media (max-width: 550px) /* for anything smaller than this */
{	/* dump the contact info if too small  */
 	.bannercontact
 	{
 		display:none;
 	}
}


/* don't bold table headers so they look like normal rows */
th {font-weight: normal;}
   

/* ALL OF THE FOLLOWING only applies to larger screens (overridden below) ***********************/
#pushdown {height: 110;}

/* do not pad navbar */
.navbar-collapse 
{
	padding-left: 0;
	padding-right: 0;
}

/* make dropdown items same height as main toolbar */
.dropdown-menu li a
{
	line-height: 40px;
}

/* ALL OF THE FOLLOWING only applies to smaller screens ***********************/
@media (max-width: 840px) /* for anything smaller than this */
{	/* keep the navbar to one line.  px value is the full width of the menu */
    .navbar-header {float: none;}
    .navbar-toggle {display: block;}
    .navbar-collapse {border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 1.0);}
    .navbar-collapse.collapse {display: none!important;}
    .navbar-nav {float: none !important; margin: 7.5px -15px;}
    .navbar-nav>li {float: none;}
    .navbar-nav>li>a {padding-top: 10px; padding-bottom: 10px;}
    .navbar-text {float: none; margin: 15px 0;}
    .navbar-collapse.collapse.in {display: block!important;}
    .collapsing {overflow: hidden!important;}

	#logoheader	{display: none;}
	#pushdown {height: 51;}
	
	/* must pad navbar when vertical */
	.navbar-collapse 
	{
		padding-left: 15;
		padding-right: 15;
	}

	/* make dropdown items same height as main toolbar */
	.dropdown-menu li a
	{
		line-height: 30px !important;
	}
}

/* ALL OF THE FOLLOWING only applies to larger screens ***********************/
@media (min-width: 840px) /* for anything larger than this */
{
	/* dropdown hovers instead of waiting for click */
	.dropdown:hover .dropdown-menu
	{
		display: block;
	}

	/* scrollbar on all pages so the centering matches */
	body 
	{
		overflow-y: scroll;
	}

	/* center the menu */
    #nav-center 
    {
        width: 840px; /* width of menu */
    }
}




/********** 
	HOME
***********/
.lightbk {background: #EBEEF5;}
.dkbluebk {background: #303981;}

.yellowtext {color: #F9FFD8;}
.yellowtext a {color: #A3D9FF;}

.typical {font-family:Arial; font-size:15; color:#283647;}		/* ## nearerblack */
.typical a:link {color:#466EC9; }		/* ## bluetext */
.typical a {color:#466EC9;}		/* ## bluetext */
.typical a:hover {color:#283647;}		/* ## nearerblack */

.public {font-family:Arial; font-size:15; color:#FFFBCF;}
.public a {font-size: 17; background-color:#CDD4FE; color:#990000; text-decoration:underline;}
.public a:hover {font-size: 17; background-color:#CDD4FE; color:#990000; text-decoration:underline;}
.public a:link {color:#990000; text-decoration:underline;}

.testimonial {font-family:Arial; font-size:12; color:#283647;}		/* ## nearerblack */
.testimonial a:link {font-size: 14; color:#466EC9; }		/* ## bluetext */
.testimonial a {color:#466EC9;}		/* ## bluetext */
.testimonial a:hover {color:#466EC9;}		/* ## bluetext */

.announcement {font-family:Arial; font-size:13.3; color:#990000;}
.hdr {font-family:Arial; font-size:2; color:#F9FFD8; font-weight:normal; display:inline;}

.tlink a:link {color:#d9EDF5; cursor:default;}
.tlink a:visited {color:#d9EDF5; cursor:default;}
.tlink {font-family:Times Roman; font-size:1; color:#d9EDF5; font-weight:normal; white-space:nowrap; line-height:10%;}

/* to make fb icon align with bottom of text */
#fbimg {vertical-align: baseline;}

.home-badges-small {display: none;}
.home-badges-large {display: inline-block;}
.home-twopanels-col {display: none;}
.home-twopanels-row {display: table-row;}
@media (max-width: 480px)
{
	.home-badges-small {display: inline-block;}
	.home-badges-large {display: none;}
	.home-twopanels-col {display: table-row;}
	.home-twopanels-row {display: none;}

/* this was the original plan for the home-twopanels
however IE doesn't stack if it's inline-block 
and other browsers won't align to L/R for row and
center for col if it's block.
	.home-sidestack th
	{
		display: inline-block;
	}
	*/
}

.home-flanked {display: table-cell;}
.home-below {display: none;}
@media (max-width: 780px)
{
	.home-flanked {display: none;}
	.home-below {display: table-row;}
}

/********** 
	BAND
***********/
.photocenter {display: none;}
.photoright {display: block;}
@media (max-width: 527px)
{
		.photocenter {display: block;}
		.photoright {display: none;}
}



/********** 
	SONGS
***********/
@media (max-width: 679px)
{
	.songs-sidestack th 
	{
		display: block;
		width: 100%;
		float: left;
	}
}
.songs-sidestack 
{
	font-family:Arial; 
	font-size:10pt; 
	color:#EBF4FF;
}

.songcategory
{
	font-family: Arial; 
	font-size: 13pt;
	font-weight: bold;
	color: #EBF4FF;
}




/********** 
	SAMPLES
***********/
.audImg
{
	max-width:300px;
	width:300px;
	height:61px;
}


/********** 
	PHOTOS
***********/
.photoText {font-family:Arial; font-size:11; color:#35485F;}		/* ## nearblack */
.shortSpace {font-family:Arial; font-size:3;}

.thumbcell
{
	text-align:center;
	vertical-align:bottom;
}
.thumb
{
	max-width: 240px;
	opacity: 1;	
}
.thumb:hover {	opacity: 0.75;	}

.blankrow
{
	height: 15px;
}

.nextback
{
	cursor:hand; 
}



/********** 
	WEDDINGS
***********/
.weddingblock
{
	background: #FEF7FF;
	border-bottom: 1px solid #C4CFEA;
}

.bullet
{
	font-family:Arial; 
	font-size:14.5; 
	color: #2B57E6;
}

.quotation
{
	font-family:Arial; 
	font-size:10pt; 
	color:#440D0D;
	background: #f0f0f0;
}
.quotation a:link {color:#466EC9; }		/* ## bluetext */
.quotation a:visited {color:#466EC9;}		/* ## bluetext */
.quotation a:active {color:#466EC9; }		/* ## bluetext */
.quotation a:hover {color:#466EC9; }		/* ## bluetext */



/********** 
	CORPORATE
***********/
@media (max-width: 530px)
{
	.corp-sidestack th
	{
		display: block;
		width: 100%;
		float: left;
	}
}

.photo-with-text
{
	position: relative;
}

.text-on-photo-TL
{
	position: absolute;
	top: 8px;
	left: 12px;
	font-family:Arial; 
	font-size: 10;
	color: #ECF2BB;
}

.text-on-photo-TR
{
	position: absolute;
	top: 8px;
	right: 12px;
	font-family:Arial; 
	font-size: 10;
	color: #ECF2BB;
}


/********** 
	VENUES
***********/
.venuemargin {width: 34px;}
@media (max-width: 800px) 
{
	.venuemargin {width: 12px;}
}
@media (max-width: 730px) 
{
	.venuemargin {width: 0px;}
}

.venuelist-small {display: inline;}
.venuelist-large {display: none;}
@media (min-width: 800px)
{
	.venuelist-small {display: none;}
	.venuelist-large {display: inline;}
}

.venuelisttext
{
	font-family:Arial; 
	font-size:10pt; 
	line-height: 16pt;
	color:#35485F;		/* ## nearblack */
}




/********** 
	TESTIMONIALS
***********/
.review 
{
	font-family:Arial; 
	font-size:12pt; 
	color:black;
	background: #f0f0f0;
	padding-top: 12;
	padding-left: 12;
	padding-right: 12;
}

.comment-header {font-family:Arial; font-size:21; color: #466EC9;}		/* ## bluetext */



/********** 
	CONTACT
***********/
.item
{
	font-family:Arial; 
	font-size:16; 
	color:#35485F;		/* ## nearblack */
	padding-left: 12;
	padding-right: 12;
}
.item a:link { text-decoration:underline;}

.darkline {border-top: 1px solid #aaaaaa;}

.itemBlack
{
	font-family:Arial; 
	font-size:16; 
	color:black;
	padding-left: 12;
	padding-right: 12;
}
.itemBlack a:link { text-decoration:underline;}

.itemNoUnderscore
{
	font-family:Arial; 
	font-size:16; 
	color:black;
	padding-left: 12;
	padding-right: 12;
}

.headerbuffer 
{
	font-family:Arial; 
	font-size: 19; 
	color: #466EC9;		/* ## bluetext */
	padding-left: 12;
	padding-right: 12;
}