/*
    colors:
    blue text: #302C98 
    yellow: #FBFF66
*/
/*
    font-sizes:
    .875em = 14px
.9375 = 15px

*/

body,div, ul, li, hr, h1,a{
    margin: 0;
    padding: 0;
}

body{
    background-color: #8BB9DB;
    font-family: "American Typewriter", Rockwell, "Rockwell Nova", serif;
    color:#222222;
}
body div{
    background-color: #ffffff;
}
#page_container{
    max-width: 80em;
    margin-left: auto;
    margin-right: auto;
    border-left:1px solid #302C98; 
    border-right:1px solid #302C98; 

}

	@media screen and (min-width:81em){	/*864px */
        #page_container{
            margin-top:.75em;

        }
}
h1{
    font-size: 1.75em;
    font-weight: 500;
    color:#302C98; 
        color:#006daa;
    text-align: center;
}
h2{
    font-size: 1.5em;
    font-weight: 500;
    color:#302C98; 
        color:#006daa;
    color:#006daa;
    text-align: center;
}
h3{
    font-size: 1.25em;
    font-weight: 500;
    color:#302C98; 
        color:#006daa;
    margin-left:.5em;
    margin-right:.5em;
    margin-top:1.75em;
}
	
p{
    max-width: 48em;
}
p, li{
    font-family: Georgia, serif;
}

li{
    padding-bottom: .25em;
    list-style-type: none;
}
a{
    color:#222222;
    color:#302C98; /*blue*/
    color:#00418c;
}
a:hover{
    color:#302C98; /*blue*/
    color:#982D2D; /*red*/
    color: #009900;
    
}
#deadlines, h3, #div_legal_notices, #please_note{   /*these are the things flush left indented for breathing room (in addition to mobile_padding)*/
    
    margin-left:.5em;
    margin-right:.5em;
    
}
.keep_together{	 
    white-space:nowrap;
}	
.center{
    margin-left:auto;
    margin-right:auto;
}   
.mobile_padding{
    padding-left: .5em;
    padding-right: .5em;
}

	@media screen and (min-width:40em){	/* */
        .mobile_padding{
            padding-left: 1em;
            padding-right: 1em;
        }
    }

/****************************************/
/*header, contact info,  and navigation*/

#div_logo{
     background-color: #FBFF66; /*yellow*/
}
#logo{
    width: 300px;
    max-width: 85%;
    padding-top: 1.375em;   /*22px*/
    padding-bottom: .75em;  /*16px*/
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#top_nav{
    background-color: #302C98;
    background-color:#006daa;

    color: #ffffff;
    padding: 1em 0em;
    font-size: .875em;      /*.875em = 14px*/
        font-size: 1em;

}
#top_nav ul{
    text-align: center;
}
#top_nav li{
    list-style: none;
    font-family: "Myriad Pro", sans-serif;
    text-align: center;

    display: inline-block;  /*needed so inline 'li' items can have margins between them*/ 
    margin-left: .625em;    /*space between list items*/
    margin-right: .625em;
    padding-bottom: 0; /*overrides the global .25em li padding so the text is centered in the blue bar (otherwise thered be more space below*/

}
#top_nav a{
    color:white;
    text-decoration: none;
}
#top_nav a:hover{
    color:#FBFF66;
    text-decoration: underline;
}
#div_contact_container{
    font-size: .9375em;
    color:#302C98;
        color:#006daa;
    padding-top: .75em;
    font-family: "verdana", sans-serif;
}
#phone{
    xfloat: left;
}
#address{
    xtext-align: right;
}

#yellow_bar{    /*will become blue in mq*/
    background-color: #FBFF66; /*yellow*/
    width:100%;
    height: .25em;
    border-top:.5em solid #ffffff;  /*this white border serves as spacing above the yellow bar. cant use padding (it would mean more yellow
                                        and cant use margin (or the blue bg would show. and cant use a standard <br> since the space is too big.  an alternative would be a br with smaller line-spacing if that was a thing*/*/
}
		#header_email{
                color:#006daa;
			text-decoration: none;
			
		}
        .hide_when_narrow{
            display:none;
        }

	@media screen and (min-width:59.375em){	/*864px  59.375=950px*/

            
        #header{    /*the entire top until the yellow bar*/
            padding-left:2em;
            padding-right: 2em;
            background-color: #FBFF66; /*yellow*/
            display: table;     /*TABLE CELLS WILL BE USED. THIS MAKES SURE THE BG IS UNIFORM*/
        }
        #div_logo{
            display:table-cell;	/*first column*/
            width:400px;
            background-color: #FBFF66; /*yellow*/
        }
        #logo{
            display:inline;
            max-width: 400px;
            float: left;
        }
        #div_nav_and_contact{
            display: table-cell;
            vertical-align: top;
            width:100%;
            background-color: #FBFF66; /*yellow*/

        }
        #top_nav{
            background-color: #FBFF66; /*yellow*/
            color: #302C98; /*blue*/
                color:#006daa;
            padding: 1em 0em;
            font-size: 1.25em;      /*18px*/
            width: 100%;
            vertical-align: top;
            margin:0;
        }
        #top_nav ul{
            text-align: right;
        }
        #top_nav li{
            font-family: "American Typewriter", Rockwell, "Rockwell Nova", serif;
            margin-left: 2em;    /*space between list items*/
            margin-right: 0em;
 
        }
        #top_nav a{
            color: #302C98; /*blue*/
                color:#006daa;
            text-decoration: none;
        }
        #top_nav a:hover{
            color: #999999; /*blue*/
            text-decoration: none;
        }
        #div_contact_container{
            background-color: #FBFF66; /*yellow*/
            font-size: .875em;
            color:#302C98;
                color:#006daa;
            padding-top: 0;
            width: 100%;
            font-size: 1em;
            padding-top:1em;
            padding: 1em 0em;
        }
        #div_contact_container, #phone, #address{
            background-color: #FBFF66; /*yellow*/
            width: 100%;
            font-size: 1.02em;
            padding: .5em 0 0 0;
        }
        #phone{
            text-align: right;
            padding-right: 1em;
            padding-bottom: .25em;
        }
        .hide_when_wide{
            display:none;
        }
        .hide_when_narrow{
            display:inline;
        }
        #yellow_bar{
            height: .25em;
            border:none;
            background-color: #302C98; /*blue*//*yellow bar turns blue!*/
            background-    color:#006daa;


        }
		
    }

        
        
/*end of header, contact info,  and navigation*/
/*********************************************/



/********************************************************/
/*start of bottom of page (everything under the header)*/


#jump_to {
    font-size: .8125em; /*13px*/    
    padding-top:.75em;
    color: #302C98;
        color:#006daa;
    text-align: center;
}

#jump_to a{
    text-decoration: none;
    color: #302C98;
        color:#006daa;
    
}

#jump_to a:hover{
    text-decoration: underline;
    
}




#leader{    /*entire bottom div starting with sd'd leader*/
    padding-top: 2em;   /*padding is used instead of margin since the bg would turn blue*/
}
#deadlines{
    border: 1px solid #302C98;
    border: 1px solid #006693;
    border-radius: 15px;
    padding: 1em 1em;
    margin-top:2em;
    color:#302C98;      /*blue*/
        color:#006daa;
    font-size: .9375em; /*15px*/    
    max-width: 36em; /* 576px*/
}
#the_word_deadlines{
    font-size: 1.2em; /*18 px - 18/15 - since #deadlines has 15px*/
    margin-bottom: 1em;
}

#the_yellow_sections p, #the_yellow_sections ul   {
    margin-left:2em;
}
#the_yellow_sections li{
    margin-bottom: .3125em;
       
}

.yellow_h2{
    border-radius: 15px;
    padding:.625em;
    margin-top:2em;
    font-size: 1.5em;  /*20px*/
    border:1px solid #302C98;      /*blue*/
    background-color:#FBFF66;   /*yellow*/
}

#open_rate{
    font-size:.875em;
    xfont-style: italic;
    color:#982D2D; /*red*/
    padding-left:.25em;  /*this padding is needed to align the paragraph with the list above since the font-size is decreased and ems are used.  without the font-size decrease theyd be lined up*/
}
#please_note{
    font-family: Georgia, serif;
    font-size: .875em;
    margin-left: .75em; /*although it was aligned properly, this was added to nudge it to the right to make it look more aligned with the Notices Published 1 Time heading. It should be aligned with those headings*/
}

	@media screen and (min-width:54em){	/* */
        #deadlines{
            margin-left: auto;
            margin-right: auto;
            max-width: 38em;
        }
        #the_word_deadlines{
            display: table-cell;
            padding-left: .25em;
        }
        #deadline_times{
            display: table-cell;
            padding-left: 2em;
        }
        #deadline_parenthesis{
            font-size: .875em;
        }

        /*shift just about everyting over for more white space on the left*/
        #the_yellow_sections ul, #the_yellow_sections #please_note, #the_yellow_sections h3, #the_yellow_sections p{
            padding-left: 1em;
            padding-right: 1em;

        }
        #the_yellow_sections #open_rate{
            padding-left:1.5em;  /*see notes on above #open_rate out of mq*/
        }        

        #div_legal_notices{
            max-width: 48em;
            margin-left: auto;
            margin-right: auto;
            padding-left:6em;
            xborder:1px dashed green;
        }
        .ul_legal_notices{
            display: table-cell;
            width: 23em;
            padding-left: 2em;

        }
        #p_leader{
            margin-top:1.5em;   /*space between h1 and p*/
        }
    }


	@media screen and (min-width:63em){	/*1008px */
        #the_yellow_sections h3{
            padding-left: 2em;
            padding-right: 3em;

        }
        #the_yellow_sections ul, #the_yellow_sections #please_note, #the_yellow_sections div, #the_yellow_sections p{
            padding-left: 3em;
            padding-right: 3em;

        }
        #the_yellow_sections #open_rate{
            padding-left:3.75em;  /*see notes on above #open_rate out of mq*/
        }        


    }

#uptown_homepage #convenient{
    margin-left: 2em;
}
#uptown_homepage #convenient li.c{
    list-style-type: disc;
    margin-left: 3em;
}
/*start of bottom of page (everything under the header and above footer)*/
/***********************************************************************/
#footer{
    background-color: #333333;
    text-align: center;
    padding: 3em 1em;
    color:#dddddd;
    font-family: Georgia, serif;
    font-size: .75em;
}
#footer img{
    max-width: 200px;
}




#footer_logo{
    background-color: #333333;
}
	#footer img{		/*the logo*/
/*
		max-width:95%;
		width: 17em;
		min-width:8em;
		display:block;
		margin-left:auto;
		margin-right:auto;
*/
        display: none;
	}
	#footer_logo a{		/*the logo*/
		max-width:95%;
		width: 16em;
		min-width:8em;
		display:block;
		margin-left:auto;
		margin-right:auto;
        background-size: 16em;
        height: 5em;   /*needed since only a bg is there. otherwise nothing would show*.
        margin-bottom: 4em;
	}
	#footer_logo a{		/*the logo*/
        background-image: url(images/BB_logo_for_dark_background.png);
        background-repeat: no-repeat;
	}
	#footer_logo a:hover{		/*the logo*/
        background-image: url(images/BB_logo_for_dark_background_hover.png);
        background-repeat: no-repeat;
	}


.contact_page p{
    font-size:1.25em; 
    font-family:Georgia,'xAmerican Typewriter', Rockwell, "Rockwell Nova", Verdana, sans-serif; 
    margin-left:1em;
    margin-right:1em;
}

	@media screen and (min-width:28em){	/*448px */
         .contact_page p{
            margin-left:2em;
            margin-right:2em;
        }
    }

@media screen and (min-width:47.75em){	/*764px */
         .contact_page p{
            font-size:1.25em; 
            margin-left:4em;
        }
    }

@media screen and (min-width:64em){	/*px */
         .contact_page p{
            font-size:1.25em; 
            margin-left:6em;
        }
    }

.hours h1{
    padding-left: 1em;
    padding-right: 1em;
}

#friends .img_friends_logos{
	width:24em;
	max-width: 75%;
	display: block;
	margin: auto;
	text-align: center;
}
#friends #bb_friends_logo{
	width:17em;
}
#friends.partners img{
	text-align: center;
}
#friends h2{
	font-weight: 500;
	font-size: 1.375em;
	font-family: Georgia, serif;
}

#friends	#bb_logo a{		/*the logo*/
		max-width:95%;
		width: 16em;
		min-width:8em;
		display:block;
		margin-left:auto;
		margin-right:auto;
        background-size: 16em;
        height: 5em;   /*needed since only a bg is there. otherwise nothing would show*.
        margin-bottom: 4em;
	}
	#footer_logo a{		/*the logo*/
        background-image: url(images/bb_complete_logo2.png);
        background-repeat: no-repeat;
	}
	#friends #bb_logo a:hover{		/*the logo*/
        background-image: url(images/bb_complete_logo_hover.png);
        background-repeat: no-repeat;
	}