/* =============================================================
    CSS STYLES FOR i2bPortal 
    v2.0, 04/2013
   =============================================================
*/ 



/*
 * Base styles
 * --------------------------------------------------*/
body {
    background: #003555;
    color: #222;
    font: 100%/1.5 "museo",serif;  /* 100% means that you want your font to be full size which happens to be 16px accross all browsers.. 16px = 1em... so now we can use em's. /1.5 means line-height is 1.5em = 16px * 1.5 = 24px */
}
p,
ul,
ol {
    margin-bottom: 1em
}
h1, h2 { margin: 0; }





/*Sets a background image or background colour of the Portal Panes themselves */
.leftPaneBg {
	display: none;
}

.contentPaneBgWrapper {
	background-image: url(../images/contentPaneBg-middle.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	background-origin: border-box;
	background-size:100%;
    vertical-align: top;
    text-align: left;
	float: left;
	width: 701px;
	min-height: 666px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	margin-top: 1em;
	margin-right: 5%;
	overflow: hidden; 
}

.contentPaneBgWrapper2 {
    background-image: url(../images/contentPaneBg-top.jpg), url(../images/contentPaneBg-bottom.jpg);
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size:100%;
	min-height: 666px;
}

.contentPaneBg {
	padding: 65px 30px 80px 55px;
}

body.template2 .contentPaneBgWrapper {
	background-image: url(../images/contentPaneBg-middle.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	background-origin: border-box;
	background-size:100%;
    vertical-align: top;
    text-align: left;
	float: left;
	width: 1052px;
	min-height: 666px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	margin-top: 1em;
	margin-right: 5%;
	overflow: hidden; 
}

body.template2 .contentPaneBgWrapper2 {
    background-image: url(../images/contentPaneBg-top.jpg), url(../images/contentPaneBg-bottom.jpg);
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size:100%;
	min-height: 966px;
}



.rightPaneBgWrapper {
	background-image: url(../images/rightPaneBg-middle.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	background-origin: border-box;
	background-size:100%;
	text-align: left;
    vertical-align: top;
	float: left;
	width: 276px;
	min-height: 657px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	margin-top: 1em;
	overflow: hidden;
}

.rightPaneBgWrapper2 {
    background-image: url(../images/rightPaneBg-top.jpg), url(../images/rightPaneBg-bottom.jpg);
	background-position: top center, bottom center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size:100%;
	min-height: 657px;
}

.rightPaneBg {
	padding: 55px 35px 50px 25px;
}

body.template2 .rightPaneBg {
    display: none;
}



.inner {
    margin: auto;
    overflow: hidden;
    width: 95%;
	padding: 0 1.0548523%;
}



header {
	background: url(../images/BNAL-header-bg.jpg) top center no-repeat;
	height: 234px;
  
 }

header h1 {
	margin: 0.4em 0 0 0.875em;
	float: left;
}

h1 img {
	max-width: 100%;
	border: none;
	outline: none;
}






/* telephone-top */
#telephone-top{background-color:#fefefe; float:right; -webkit-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px; }

.phone { float:left; margin:0 0 0 0.5em; }
.email{ float:left; margin:0 0.5em 0 1em; }

.phone img {float:left; margin:0.2em 0 0 0;}
.email img{float:left; margin:0.4em 0 0 0;}

.phone p, .email p{color:#000000; float:left; font-size:0.875em; font-family:Verdana, Arial, sans-serif;  margin:0 0 0 0.3em;}

.email a, .phone a{color:#000000; text-decoration:none;}

.email a:hover, .phone a:hover{text-decoration:underline;}
.email-ico { background:url(../images/email.png) 0 7px no-repeat; padding-left: 18px; }
.phone-ico { background:url(../images/telephone.png) 0 3px no-repeat; padding-left: 18px; }

/* navigation-top */
#navigation-top{clear:right; float:right; }

.top-menu{float:left; display:block; margin: 2em 0 0 0;}

.top-menu li{float:left; margin: 0 0 0 2em; }

.top-menu a{ color:#000000;  font-size:1em;  text-decoration:none; }

.top-menu a:hover{text-decoration:underline; }





/*
 * Nav
 ** --------------------------------------------------*/

 .HeadBg {
	margin-left: 2em;
}

#nav-collapse{
	display: none;
	color: #fff;
	text-align: right;
	width: 100%;
	padding: .625em 0 .625em 0;
}
#nav-collapse.active{
	display: block;
}
#nav-collapse:after {
 	content: " \2630 "
} 
 
nav[role="navigation"] {
	background: url(../images/BNAL-navigation-bg.jpg) top center no-repeat;
	min-height: 35px;
    font-family: "museo", serif;
    overflow: hidden;
    text-transform: capitalize;
    width: 100%;
}
nav[role="navigation"] ul{
	margin-bottom: 0;
}
nav[role="navigation"] ul.hide{
	display:none;
}
    nav[role="navigation"] li.active a {
        color: #fff;
        font-weight: bold;
    }

        nav[role="navigation"] li a:active {
            color: #FFF;
        }
        nav[role="navigation"] li a:hover,
        nav[role="navigation"] li a:focus {
            color: #fff;
        }
    nav[role="navigation"] ul {
        margin: 0;
    }
	nav[role="navigation"] li{
		padding: .625em 2em .625em 0;
		border-top: 1px solid #333;
		
	}
    nav[role="navigation"] a {
        color: #fff;
		display: block;
        text-decoration: none;
		font-weight: 700;
		margin-right: 1em;
		margin-top: 0.375em;
		font-size: 1.0625em;
		border:0;
    }

	nav[role="navigation"] a:hover,
	nav[role="navigation"] a:focus{
        color: #ddd;
    }
	footer[role="contentinfo"] {
	    
		margin-top: 1em;
		color:#ccc;
		font-size: 0.875em;
		text-align: center;
	    
	}
	    footer[role="contentinfo"] .inner {
	        overflow: hidden
	    }
	    footer[role="contentinfo"] .top {
	        color: rgb(143,143,143);
			padding-right: 0;
	    }
	        footer[role="contentinfo"] .top a:after {
	            content: " \25B2 ";
	            font-weight: bold;
	        }

	    footer[role="contentinfo"] h1 {
	        text-align: center
	    }
	    footer[role="contentinfo"] ul {
	        margin-bottom: 0
	    }
	    footer[role="contentinfo"] h1 {
	        /* 20px / 40px */
	        margin-left: .5em;
	        margin-right: .5em;
	    }
		footer nav[role="navigation"] {
		    background: rgb(34,34,34);
		    background-image: none;
			font-size: .9em;
		}
		    footer nav[role="navigation"] li.active a {
		        color: #fff;
		        font-weight: bold;
		    }
		    footer nav[role="navigation"] li a:active {
		        color: #fff
		    }
		    footer nav[role="navigation"] li a:hover,
		    footer nav[role="navigation"] li a:focus {
		        color: #ccc
		    }
		    footer nav[role="navigation"] a {
		        color: #fff
				}
img.inline {
display: inline;
}



a:link.SiteFooterLink2,a:active.SiteFooterLink2,a:visited.SiteFooterLink2 {
	color:#ccc;
	text-decoration: underline;

}

a:hover.SiteFooterLink2,a:focus.SiteFooterLink2 {
	color:#fff;
	text-decoration: none;
}

a:link.SiteFooterLink1,a:active.SiteFooterLink1,a:visited.SiteFooterLink1 {
	color:#ccc;
	text-decoration: underline;

}

a:hover.SiteFooterLink1,a:focus.SiteFooterLink1 {
	color:#fff;
	text-decoration: none;
}


div.rightPaneBgWrapper a:link, div.rightPaneBgWrapper a:active, div.rightPaneBgWrapper a:visited {
	color:#00002f;
	text-decoration: underline;
}

div.rightPaneBgWrapper a:hover {
	color:#00002f;
	text-decoration: none;
}

div.contentPaneBg a:link, div.contentPaneBg a:active, div.contentPaneBg a:visited {
	color:#00002f;
	text-decoration: underline;
}

div.contentPaneBg a:hover {
	color:#00002f;
	text-decoration: none;
}



/* Mapping CSS hooks */

.leftPaneModuleBg {  }
.leftPaneModuleTitleContainer {  }
.leftPaneModuleTitle {  }
.leftPaneModuleContentContainer {  }
.leftPaneModuleText {  }
.leftPaneModuleLink {  }

.contentPaneModuleBg {  }
.contentPaneModuleTitleContainer {  }
.contentPaneModuleTitle {  }
.contentPaneModuleContentContainer { color: #000015; }
.contentPaneModuleText {  }
.contentPaneModuleText-s {
	font-size: 0.8125em;
}
.contentPaneModuleLink {  }

.PageTitleContainer {  }
.PageTitle {  }


.rightPaneModuleBg { }
.rightPaneModuleTitleContainer {  }
.rightPaneModuleTitle { color: #1b3855; }
.rightPaneModuleContentContainer { color: #000015; }
.rightPaneModuleText {  }
.rightPaneModuleLink {  }

.Breadcrumb { 
	color: #555;
	font-size: 0.75em; 
}
. {  }

a:link.BreadcrumbLink,a:active.BreadcrumbLink,a:visited.BreadcrumbLink {
	color:#555;
	text-decoration: underline;

}

a:hover.BreadcrumbLink,a:focus.BreadcrumbLink {
	color:#000;
	text-decoration: none;
}


.AddThisContainer-DesktopDefault { padding-top: 0.625em; }


.Form {  }
.FieldHead {  }
.FieldData { width: 95%; }
.RequiredFieldInd {  }
.FieldError {  }




/* Fleet page styles */
.fleet-vehicle {
	clear:both;
	margin-bottom: 2em;
	height: 200px;
	border-bottom: 1px dashed silver;
}

.fleet-vehicle:last-of-type {
	border-bottom: none;
}

.fleet-vehicle-img {
	float:left;
	width:35%;
	margin-right:5%;
	clear: left;
	display: block;
}

.fleet-vehicle-img img {
	max-width: 100%;
	display: block;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
	width: 100%;
}

.fleet-vehicle-desc {
	float:left;
	width:60%;
	clear: right;
	display: block;
}

.fleet-vehicle-desc h2, .fleet-vehicle-desc p, .fleet-vehicle-desc ul, .fleet-vehicle-desc li {
	font-size: 0.9375em;
}



/* Responsive Breakpoints */

/* 680px */
@media all and (max-width: 42.5em) {

	.wrapper{
		width:612px; /* 612px - 10% for margins */
		margin:0 auto;
	}

	.leftPaneBg {
		display: none;
	}

	.contentPaneBg {
		display: block;
		width: 100%;
	}

	.rightPaneBg {
		display: block;
		width: 100%;
	}
	
}


/* 860px */
@media all and (min-width: 53.75em) {

	.wrapper{
		width:1052px;
		margin:0 auto;
	}


}


/* 940px */
@media all and (min-width: 58.75em) {


}


/* 1300px */
@media all and (min-width: 81.25em) {


}









/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.middle { margin: 0 auto; }
.inLine { display: inline; }
.noPadding { padding: 0;}
.noMargin { margin: 0; }

.valignTop { vertical-align: top; }
.valignMiddle { vertical-align: middle; }
.valignBottom { vertical-align: bottom; }

.alignLeft { text-align: left;}
.alignCenter { text-align: center;}
.alignRight { text-align: right;}

/* Floated images with and without borders */
.leftjustifiedImage{float:left;margin:0 10px 5px 15px;}
.rightjustifiedImage{float:right;margin:0 15px 5px 10px}
* .leftjustifiedImage, * .rightjustifiedImage, .framedImage{background:#fff;border:1px solid #ccc;padding:2px}

.lighterImage {
 opacity:0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}











/* Site Admin Styles (duplicated from portalAdmin.css)-----------------------------------*/

/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link	{ color: Blue;  font-size: 8pt; font-family: "myriad-pro",sans-serif; text-decoration: underline; font-weight: Bold;}
A.CommandButton:visited	{ color: Blue;  font-size: 8pt; font-family: "myriad-pro",sans-serif; text-decoration: underline; font-weight: Bold;}
A.CommandButton:active	{ color: Blue;  font-size: 8pt; font-family: "myriad-pro",sans-serif; text-decoration: underline; font-weight: Bold;}
A.CommandButton:hover	{ color: Black;	 font-size: 8pt; font-family: "myriad-pro",sans-serif; text-decoration: underline; font-weight: Bold;}
  
/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
    font-family: "myriad-pro",sans-serif;
    font-size: 8pt;
    font-weight: normal;
}




/* Contest Entry Form Styles -----------------------------------------------*/

.contest	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			10pt;
			font-weight:		500;
			color:				Black;
			}


.contest-B	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			10pt;
			font-weight:		bold;
			color:				Black;
			}


.contest-LB	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size:			11pt;
			font-weight:		bold;
			color:				Black;
			}


.contest-s	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			9pt;
			font-weight:		500;
			color:				Black;
			}


.contest-sB	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			9pt;
			font-weight:		bold;
			color:				Black;
			}


.contest-emphasized	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			10pt;
			font-weight:		600;
			font-style:			italic;
			color:				#F0C028;
			}

.contest-Header	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			12pt;
			font-weight:		bold;
			color:				Black;
			text-align: center;
			}

.contest-legalese	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			9pt;
			font-weight:		600;
			color:				#F0C028;
			}

.contestInputField	{
			font-family:		Verdana, Arial, Helvetica, Sans-Serif;
			font-size: 			9pt;
			color:				Black;
			}

/* Calendar Events  ----------------------------------------------------------*/


A.CalendarEventLink:link	{ color: Black;  font-size: 10pt; font-family: "myriad-pro",sans-serif; text-decoration: none; font-weight: Normal;}
A.CalendarEventLink:visited	{ color: Black;  font-size: 10pt; font-family: "myriad-pro",sans-serif; text-decoration: none; font-weight: Normal;}
A.CalendarEventLink:active	{ color: Black;  font-size: 10pt; font-family: "myriad-pro",sans-serif; text-decoration: none; font-weight: Normal;}
A.CalendarEventLink:hover	{ color: Blue;  font-size: 10pt; font-family: "myriad-pro",sans-serif; text-decoration: underline; font-weight: Normal;}

/* Override or should I say... correct some jQuery Style issues - No clue where its getting its huge font size... so must use this to override */
.ui-widget { font-size: 11px !important; } 




/* Add This Widget -----------(Need one style class for each page template)-------------------------------------- */
.pageHeader
{
	width: 100%;
	padding-bottom: 2px;
	padding-top: 10px;
}



.addthis_button_facebook_like {
overflow:hidden;
width: 45px !important;
}

.addthis_pill_style {
width: 50px !important;
}

.telephone {
	font-family: "myriad-pro",sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	margin: 18% 0 0 1%;
	width: 150px;
}

.newSign {
	display: block;
	width: 500px;
	height: 60px;
	background:url('../images/new-icon.png') 0 0 no-repeat;
	padding: 10px 0 0 65px;
	text-align: left;
	font-family: "myriad-pro",sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #222222;
	margin: 0 auto;
	text-decoration: none;
}

span#announcements a:link, span#announcements a:visited, span#announcements a:active {
	text-decoration: none;
}

span#announcements a:hover {
	text-decoration: underline;
	color: #222222;
}







/* Rates Tables */

table.rates{
	background-color: #eeeeee;
	border-left: 1px solid #aaa;
	border-right: 1px solid #aaa;
	font-size:0.875em;
}


td.rates{
	border-left: 1px dashed #aaa;
	padding-left: 1em;
}


td.ratesleftcol{
	border-left: none;
	padding-left: 1em;
}

table.rates tr:hover {background-color: #A9DB80;}

td.ratesheader{
	background-color: #464646;
	color: #99CC00;
}

td.ratesheaderleft{
	border-right: 1px solid #eee;	
	background-color: #464646;
	text-align: center;
	color: #fff;
}

td.Wratesheader{
	background-color: #464646;
	text-align: left;
	color: #fff;
	font-weight: bold;
}

td.Wratesheaderleft{
	border-left: none;
	background-color: #464646;
	text-align: center;
	color: #fff;
	font-weight: bold;
}


/* Social Sharing Buttons Widget (i2b Control) -------------------------------------- */
.socialSharingButtons_Bar {
float: left;
display: block;
width: 350px;
padding-bottom: 0px;
margin-bottom: 0px;
vertical-align: bottom;
padding-left: 10px;
}

.socialSharingButtons_button_facebook {
float: left;
overflow: hidden;
width: 45px !important;
}

.socialSharingButtons_button_twitter 
{
float: left;
width: 70px;
padding-left: 10px;
}

.socialSharingButtons_button_google
{
float: left;
width: 60px;
}

.socialSharingButtons_button_pinerest
{
float: left;
width: 50px;
}