/*	CIEE Black Bar
		--------------------------------------
		Author:     Alayna Hebert
		Copyright:	(c) 2012 CIEE.
		All rights reserved.
		
		Table of Contents 
		--------------------------------------
		1. Fonts
	  2. Black Bar
		3. Media Queries

*/

/*------------------------------------------------*/
                   /*--Box Model--*/
/*------------------------------------------------*/

/* Reset border-box box-sizing that includes padding and border in the width/height */
#blackBarWrapper *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}


/*------------------------------------------------*/
                   /*--Fonts--*/
/*------------------------------------------------*/


/* use this for production */
@font-face {
  font-family: 'FontAwesome';
  src: url('//www.ciee.org/common/fonts/fontawesome-webfont.eot');
  src: url('//www.ciee.org/common/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('//www.ciee.org/common/fonts/fontawesome-webfont.woff') format('woff'), url('//www.ciee.org/common/fonts/fontawesome-webfont.ttf') format('truetype'), url('//www.ciee.org/common/fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* use this for staging */
/*@font-face {
  font-family: 'FontAwesome';
  src: url('//stagingnew.ciee.org/common/fonts/fontawesome-webfont.eot');
  src: url('//stagingnew.ciee.org/common/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('//stagingnew.ciee.org/common/fonts/fontawesome-webfont.woff') format('woff'), url('//stagingnew.ciee.org/common/fonts/fontawesome-webfont.ttf') format('truetype'), url('//stagingnew.ciee.org/common/fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}*/

/* use this for dev */
/*@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}*/

/*--/fonts--*/

/*------------------------------------------------*/
				/*--Black Bar--*/
/*------------------------------------------------*/

#blackBarWrapper{
  font-size:18px; 
  width:100%;
  z-index:1000;
  min-width:288px;
  color:#7b7b7b;}

#blackBar{
    height:40px;
    background: #111 url("//www.ciee.org/common/blackbar/images/blackBarBgPattern145x145.png");
    padding:0 5px 0 75px;
    font:bold .75em/1 arial, verdana, san-serif;
    position:relative;
    z-index:100;}

.bbIcon{
    font:1.64em/1em "FontAwesome", Arial, san-serif;
    vertical-align:middle;
    letter-spacing:.5em;
    text-shadow: 0 0 0;}

#bbCieeHome{
    position:absolute;
    top:0;
    left:0;
    z-index:100;}

#bbCieeHome a{
    display:block;
    width:80px;
    height:40px;
    background-color: #009bd7;
    -moz-transition: background-color .2s ease;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease;}

  #bbCieeHome a:hover {
    background-color: #f47a47;
    -moz-transition: background-color .2s ease;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease;}

 #bbCieeHome a:before {
    content:"ciee.org";
    color: #FFFFFF;
    font: normal 300 16px/38px "freight-sans-pro", sans-serif;
    padding-left: 15px;}

#bbCieeHome a:hover{
    background-position: 0 58px;}

#bbCieeDropMenu{
    float:left;
    cursor:pointer;
    margin-top:6px;
    margin-left: 16px;
    width:46px;
    height:28px;
    background: url("//www.ciee.org/common/blackbar/images/menuIcon46x58.png") 0 0;}

#bbCieeDropMenu.bbOpen, #bbCieeDropMenu:hover{
    background-position: 0 28px;}

#bbContact{
    float:right;
    padding:10px 9px;}

#bbContact a{
    display:block;
    padding-left:35px;
    height:18px;
    background: url("//www.ciee.org/common/blackbar/images/contactIcon27x37.png") no-repeat 0 0;
    color:#d7d7d7;
    padding-top:3px;}

#bbContact a:hover{
    background-position: 0 -19px;
    color:#F7F7F7;}

.bbContactText{display:none;}

#bbSearchMobile{
    display:block;
    float:right;
    cursor:pointer;
    margin-top:10px;
    margin-right:15px;
    width:15px;
    height:18px;
    background: url("//www.ciee.org/common/blackbar/images/searchIcon15x37.png") 0 0;}

#bbSearchMobile.bbOpen, #bbSearchMobile:hover{
    background-position: 0 17px;}

#bbSearch{
    display:none;
    float:left;
    position:relative;
    width:100%;
    padding:20px 5%;}

#bbSearch .searchBox{
    width:175px;
    height:24px;
    padding:3px 25px 3px 5px;
    font: normal 500 1.2em/10px "freight-sans-pro", sans-serif;
    background: #2e2e2e url("//www.ciee.org/common/blackbar/images/searchIcon15x37.png") no-repeat 153px -17px;
    color:#d7d7d7;
    border: 0;}

.focusField{
    background-color:#303030;
    color:#F7F7F7;
    background-position:153px -16px;}

#bbSearch .searchButton{
	position: absolute;
	right: 9px;
	top: 6px;
	border: none;}
	
.searchBoxHidden{
	display: none;}	

#bbMobileSearch{
    display:none;
    position:relative;
    float:left;
    width:100%;
    padding:15px 5%;
    background:#2a2a2a url("//www.ciee.org/common/blackbar/images/blackBarBgPattern145x145.png");
    border-bottom:1px solid #414141;
    z-index:100;}

#bbMobileSearch .searchBox{
    background-color: #383838;
	-webkit-box-shadow: 0px 1px 0px 0px #3a3a3a;
	box-shadow: 0px 1px 0px 0px #3a3a3a; 
    width:100%;
    height:32px;
    float:left;
    font:1.25em/1;
    padding:5px 22% 5px 3%;
    color:#FFF;
    border-top: 1px solid #191919;
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;}

#bbMobileSearch .searchButton{
    background: url("//www.ciee.org/common/blackbar/images/searchMobileIcon51x64.jpg") no-repeat 0 0;
    position:absolute;
    right:5%;
    top:16px;
    border:none;
    width:50px !important;
    height:32px !important;}

#bbMobileSearch .searchButton:hover{background-position:0 -32px;}

/*Dropdown*/
#blackBarDrop{
    display:none;
    float:left;
    position:relative;
    width:100%;
    padding:30px 5% 20px 5%;
    font: 400 1.125em/1em "freight-sans-pro", san-serif;
    background:#5B5B5B;
    background-image: url("//www.ciee.org/common/blackbar/images/blackBarBgPattern145x145.png");}

#blackBarDrop a, #blackBarDrop a:visited{
    color:#FFF;
    text-shadow: 0px 1px 1px #000000;
    -webkit-transition: color 200ms ease;
		-moz-transition: color 200ms ease;
    -ms-transition: color 200ms ease;
    -o-transition: color 200ms ease;
		transition: color 200ms ease;}

#blackBarDrop a:hover, #blackBarDrop a:active{
    color:#ef7e50;
		text-shadow: 0px 1px 1px #000000;
    -webkit-transition: color 200ms ease;
		-moz-transition: color 200ms ease;
    -ms-transition: color 200ms ease;
    -o-transition: color 200ms ease;
		transition: color 200ms ease;}

.bbColumn{margin:0 0 25px 0;}

.bbHeader{
    color:#009bd7;
    text-transform:uppercase;
    font-size:1.5em;
    text-shadow: 0px 1px 1px #000000;}

.bbSubHeader{
    display:block;
    color:#B6B6B6;
    font: 400 1.125em/1 "freight-sans-pro", sans-serif;
    font-style: italic;
    padding-top:1em;
    text-shadow: 0px 1px 1px #000000;}
    
.bbProgHeader {
		display:block;
    color:#b6b6b6;
    font: 400 1.750em/1 "freight-sans-pro", sans-serif; 
    padding-top:1em;
    text-align: center;
    text-transform: uppercase;
    padding: 0;
    text-shadow: 0px 1px 1px #000000;}  
    
.progColumn {
	margin-top: 10px;
	text-shadow: 0px 1px 1px #000000;}     

ul.bbMenu{
  margin:0;
  list-style-type:none;}

.bbMenu li{
  margin-top:10px; 
  font-size: 0.9em;
  line-height: 0.9em;
  padding:0;
  background:none;}

.bbMenu li:before {display:none;}

#bbSocialMedia a, #bbSocialMedia a:visited{color:#7b7b7b;}
#bbSocialMedia a:hover, #bbSocialMedia a:active{color:#dbd9d9}

#bbSearchCIEE{
    width:95%;
    padding:25px 0;}
    
#bbCIEE {margin-top: 20px;}    

#bbSearchCIEE .searchBox{
    background: #f1f1f1;
    background: linear-gradient(#f1f1f1, #bebebe);
    -pie-background: linear-gradient(#f1f1f1, #bebebe);
    width:75%;
    height:43px;
    float:left;
    font: 300 1.2em/1 "freight-sans-pro", san-serif;
    padding:5px 10px 5px 10px;
    color:#353434;
    border-top: none;
    border-left: 1px solid #1b1b1b;
    border-right: none;
    border-bottom: 1px solid #1d1d1d;
    -webkit-box-shadow: 0px 1px 0px 0px #4f4f4f;
		box-shadow: 0px 1px 0px 0px #4f4f4f; }

#bbSearchCIEE .focusField{
    background: #fafafa;
    background: linear-gradient(#fafafa, #dcdcdc);
    -pie-background: linear-gradient(#fafafa, #dcdcdc);}

#bbSearchCIEE .searchButton{
    position:relative;
    background: #bcbcbc;
    background: linear-gradient(#bcbcbc, #717171);
    -pie-background: linear-gradient(#bcbcbc, #717171);
    border-top: none;
    border-left: 1px solid #717171;
    border-right: 1px solid #1b1b1b;
    border-bottom: 1px solid #1d1d1d;
    padding:8px;
    -webkit-box-shadow: 0px 1px 0px 0px #4f4f4f;
	box-shadow: 0px 1px 0px 0px #4f4f4f;}

#bbSearchCIEE .searchButton:hover{
    background: #d5d5d5;
    background: linear-gradient(#d5d5d5, #7c7c7c);
    -pie-background: linear-gradient(#d5d5d5, #7c7c7c);}

#bbQuestions{
  color:#e7e7e7;
  font-size: 0.9em;
}

#bbQuestions a{
    display:block;
    width:150px;
    height:40px;
    padding:7px 10px;
    font-size: 0.9em;
    background: #17a2f9;
    background: linear-gradient(#17a2f9, #017bc8);
    -pie-background: linear-gradient(#17a2f9, #017bc8);
    border-radius: 3px;
    text-shadow: 0 1px 0 #0969a6;
    margin-top:10px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, .25), 0px 1px 3px 0px rgba(0, 0, 0, .75);
		box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, .25), 0px 1px 3px 0px rgba(0, 0, 0, .75);}

#bbQuestions span.bbIcon{text-shadow: 0 0 0;}
    
#bbQuestions a:hover, #bbQuestions a:active{
    color:#e7e7e7;
    text-shadow: 0 1px 0 #0969a6;
    background: #1892f9;
    background: linear-gradient(#1892f9, #014d9a);
    -pie-background: linear-gradient(#1892f9, #014d9a);}

#bbProgramPicker{
    float:left;
    clear:both;
    color:#e7e7e7;
    margin-top: 30px;
    display:none;}

#bbProgramPicker a{
    display:block;
    width:143px;
    height:37px;
    margin-top: 10px;
    padding:10px 35px;
    background: #fa6109;
    background: linear-gradient(#fa6109, #af4000);
    -pie-background: linear-gradient(#fa6109, #af4000);
    border-radius: 3px;
    cursor:pointer;
    text-shadow: 0 1px 0 #842c05;}

#bbProgramPicker a:hover, #bbProgramPicker a:active{
    color:#e7e7e7;
    background: #ed5f11;
    background: linear-gradient(#ed5f11, #952c01);
    -pie-background: linear-gradient(#ed5f11, #952c01);}

#bbCopyright{
    clear: both;
    font-size:0.7em;
    padding-top:25px;}
    
#bbCopyright img, #bbCopyright p{
    clear: both;
    margin-bottom:2px;
    padding:0;
    text-shadow: none;}     
                    
.closeButton {
		background: url("//www.ciee.org/common/blackbar/images/closeButton25x56.png") 0 0 no-repeat;
		cursor: pointer;
		position: absolute;
    bottom: 20px;
    right: 20px;
		height: 26px;
		width: 25px;} 
		
.closeButton:hover {background: url("//www.ciee.org/common/blackbar/images/closeButton25x56.png") 0 -30px no-repeat;}		   

.horizontalDivider {
		margin: 40px 0 0 0;
		width: 100%;
		position: relative;
		border-top: 1px solid #3e3e3e;
		border-bottom: 1px solid #000000;}

.horizShadow {
		background: radial-gradient(50% -85%, ellipse closest-corner, #030303, rgba(0, 0, 0, 0) 100%);
		-pie-background: radial-gradient(50% -85%, ellipse closest-corner, #030303, rgba(0, 0, 0, 0) 100%);
		height: 20px;
		width: 100%;
		position: relative;}
		
.bbVert {
	float: left;
	width: 4%;
	display: none;}				
		
.verticalDivider {
		height: 100%;
		position: relative;
		float: left;
		border-left: 1px solid #3d3d3d;
		border-right: 1px solid #000000;}
	
.vertShadow {
		background-image: radial-gradient(-50% 50%, ellipse cover, #171717, rgba(0, 0, 0, 0) 70%);
		-pie-background: radial-gradient(-50% 50%, ellipse cover, #171717, rgba(0, 0, 0, 0) 70%);
		height: 100%;
		width: 6px;
		float: left;
		position: relative;}
		
.bbLineShadow {
		background: #6e6e6e;
		background: linear-gradient(left, rgba(110,110,110,0.25) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0.25) 100%);
		-pie-background: linear-gradient(left, rgba(110,110,110,0.25) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0.25) 100%);
		position: absolute;
		top: 1px;
		width: 100%;
		height: 1px;
		z-index: 1000;}				

/*---/Black Bar--->

/*-------------------------------------------------------*/
                  /*--Media Queries--*/	
/*-------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	
  #bbCieeDropMenu{
    background: url("//www.ciee.org/common/blackbar/images/menuIcon-retina-92x116.png") 0 0;
    background-size: 46px 58px;}

  #bbContact a{
    background: url("//www.ciee.org/common/blackbar/images/contactIcon-retina-54x74.png") no-repeat 0 0;
    background-size: 27px 37px;}

  #bbSearch .searchBox{
    background: #191919 url("//www.ciee.org/common/blackbar/images/searchIcon-retina-30x74.png") no-repeat 153px 4px;
    background-size: 15px 37px;}

  .closeButton {
		background: url("//www.ciee.org/common/blackbar/images/closeButton-retina-50x112.png") 0 0 no-repeat;
    background-size: 25px 56px;} 

  #bbSearchMobile{
    background: url("//www.ciee.org/common/blackbar/images/searchIcon-retina-30x74.png") 0 0;
    background-size: 15px 37px;}

  #bbMobileSearch .searchButton{
    background: url("//www.ciee.org/common/blackbar/images/searchMobileIcon-retina-102x128.jpg") no-repeat 0 0;
    background-size: 51px 64px;}
}


@media screen and (min-width: 390px) /* Smart Phone and above */
{

}

@media screen and (min-width: 480px) /* Smart Phone and above */
{ 
		.bbProgHeader, .progColumn {display:none;}
			
}

@media screen and (min-width: 750px) /* Tablet and above */
{    
    .bbVert {
			margin-top: 30px;
			height: 890px;
			display: block;}
    
    .bbContactText{
      font: normal 500 1.2em/10px "freight-sans-pro", sans-serif;
      display:block;}
    
    #bbSearchMobile{display:none;}
    #bbMobileSearch{display:none;}
    
    #bbSearch{
        display:block;
        float:right;
        padding:6px 2px 6px 9px;
        width:auto;}

    .searchBox{}

    .focusField{
        background-color:#303030;
        color:#F7F7F7;
        background-position:153px -16px;}

    #blackBarDrop{padding:20px 5%;}
    
    .bbColumn{margin:25px 0 0 0;}
    
    #bbProgramLinks{
        float:right;
        width:45%;}

    #bbProgramLinks .bbColumn{
        width:100%;
        float:left;}

    #bbCIEE{
        float:left;
        width:45%;
        margin-top: 20px;}
        
    #bbSocialMedia{padding-top:25px;}
    
    #bbProgramPicker{clear:none;}
    .horizontalDivider, .horizShadow {display: none;} 
}

@media screen and (min-width: 1200px) /* Desktop and above */
{  
    
    #bbProgramLinks{width:63%;}
    
    #bbProgramLinks .bbColumn{
        padding:0 1%;
        width:33%;}
        
    #bbCIEE{width:28%;}
    
    #bbProgramPicker{padding-left: 30%;}

    #bbProgramPicker a{
        margin: -10px 0 0 20px;
        float:right;} 
    
    .bbVert {
    	margin-top: 55px;
			height: 400px;
    	width: 2.5%;} 
}

@media screen and (min-width: 1240px) /* Desktop and above */
{ 
.bbVert {width: 2%;}
}
/*---/media queries---*/