/* New Css File */

a {color:#b60000; text-decoration: none; -webkit-transition: all .2s ease;
  	-moz-transition: all .2s ease;
  	-o-transition: all .2s ease;
  	transition: all .2s ease; border-bottom: none;}
a:hover, a:focus {color:#960000; text-decoration: none;}

.header {background: #ac0000 url("../img/header-bg.jpg") repeat-x top center; height:170px; overflow:hidden; clear:both;
	-webkit-transition: height .2s ease;
  	-moz-transition: height .2s ease;
  	-o-transition: height .2s ease;
  	transition: height .2s ease;}
.header .container {position:relative;}

.logo { display:block; height:129px; width:177px; background: url("../img/logo.png") no-repeat center center; text-indent: -9999px;
margin: 0; position:absolute; top:22px; left:0;
	-webkit-transition: all .2s ease;
  	-moz-transition: all .2s ease;
  	-o-transition: all .2s ease;
  	transition: all .2s ease;}
.logo:hover { background: url("../img/logo-hover.png") no-repeat center center; border-bottom: none;}

ul.navigation { margin:0; padding:0; left:200px; top:40px; position:absolute;}
ul.navigation li { margin:0; padding:0 15px; list-style: none; float:left; border-right:2px solid #fff;}
ul.navigation li a { color:#fff; font: bold 20px/22px 'Open Sans',helvetica, arial, sans-serif; }
ul.navigation li a:hover, ul.navigation li a:focus {text-decoration: none; color:#ccc;}
ul.navigation li.first { padding: 0 15px 0 0;}
ul.navigation li.last { padding: 0 0 0 15px; border:none; margin-top:-12px;}

a.navnew {left:200px; top:85px; position:absolute; font: 18px/22px helvetica, arial, sans-serif; color:#fff;}
a.navnew span {font: 18px/22px helvetica, arial, sans-serif; color:#fff; border:1px solid #fff; padding:4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; border-radius: 4px; display:inline-block;
	-webkit-transition: all .2s ease;
  	-moz-transition: all .2s ease;
  	-o-transition: all .2s ease;
  	transition: all .2s ease;}

a.navnew:hover, a.navnew:focus { text-decoration: none; border-bottom: none;}
a.navnew:hover span, a.navnew:focus span { color:#ac0000; background-color: #fff;}

body.homepage .header { display:block; height:500px;}


/* Homepage Banner */
.heropromo {display:none;}
body.homepage .heropromo { display:block; color:#fff; padding-top: 210px; height:330px; background: url('../../imgs/ngtfamily-reg.png') no-repeat 220px 130px; margin-left:0;}
body.homepage .heropromo h1 { font: 800 32px/36px "Open Sans",helvetica, arial, sans-serif; width:300px; margin-bottom:20px;}
body.homepage .heropromo h4 { font: 300 15px/25px "Open Sans",helvetica, arial, sans-serif; width:400px; margin-bottom:20px;}
/* Large desktop */
@media (min-width: 1200px) {
	body.homepage .heropromo { display:block; color:#fff; padding-top: 220px; height:330px; background: url('../../imgs/ngtfamily.png') no-repeat 290px 90px; margin-left:0;}
	body.homepage .heropromo h1 { font: 800 40px/42px "Open Sans",helvetica, arial, sans-serif; width:400px; margin-bottom:20px;}
	body.homepage .heropromo h4 { font: 300 15px/25px "Open Sans",helvetica, arial, sans-serif; width:400px; margin-bottom:20px;}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	body.homepage .heropromo { display:block; color:#fff; padding-top: 131px; height:330px; background: url('../../imgs/ngtfamily-sm.png') no-repeat 150px 110px; margin-left:0;}
	body.homepage .heropromo h1 { font: 800 24px/26px "Open Sans",helvetica, arial, sans-serif; width:360px; margin-bottom:10px;}
	body.homepage .heropromo h4 { font: 300 15px/25px "Open Sans",helvetica, arial, sans-serif; width:400px; margin-bottom:20px;}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
	.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding: 5px 5px 0;}
	body.homepage .heropromo { display:block; color:#fff; padding-top: 0px; height:140px; background: url('../../imgs/ngtfamily-xs.png') no-repeat 240px -9px; margin-left:20px;}
	body.homepage .heropromo h1 { font: 800 25px/30px "Open Sans",helvetica, arial, sans-serif; margin-bottom:10px;}
	body.homepage .heropromo h4 { font: 300 13px/18px "Open Sans",helvetica, arial, sans-serif; margin-bottom:10px;}
	.breadcrumbs { display:none;}
	body .featured .promo {margin-bottom: 20px;width: 48%;float: left;margin-right: 4%;}
	body .featured .promoedge {margin-right: 0%;}
	.featured p {display:none;}
}
/* Landscape phones and down */
@media (max-width: 480px) { 
	.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding: 5px 5px 0;}
	body.homepage .heropromo { display:block; color:#fff; padding-top: 0px; height:230px; background: url('../../imgs/ngtfamily-xs.png') no-repeat 20px 55px;  margin-left:0; margin-right:0px;}
	body.homepage .heropromo h1 { font: 800 16px/2px "Open Sans",helvetica, arial, sans-serif; width:90%; margin:15px 0 15px 15px;}
	body.homepage .heropromo h4 {  font: 300 10px/15px "Open Sans",helvetica, arial, sans-serif; width:200px; margin-bottom:70px;}
	body.homepage .heropromo .btn {  padding: 12px 12px; margin-left:15px;}
	.breadcrumbs { display:none;}
	body .featured .promo {margin-bottom: 20px; width: 48%;float: left;margin-right: 4%;}
	body .featured .promoedge {margin-right: 0%;}
	.featured p {display:none;}
}





.footerlogo { display:block; width:50px; height:50px; background: url("../img/footerlogo.png") no-repeat center center; float:left; margin:0 20px 40px 0;}
.footer h6 { font:14px "open sans", helvetica, arial, sans-serif; font-weight: 400;}
.footer p { font-size:10px; line-height:12px;}


/* Landscape phone to portrait tablet =====================================================================================
===================================================================================== */

@media (min-width: 768px) and (max-width: 979px) { 
body.homepage .header {height:400px; }
.header { height:130px;}
.logo { display:block; height:91px; width:125px; background: url("../img/logosm.png") no-repeat center center;}
.logo:hover { background: url("../img/logo-hoversm.png") no-repeat center center;}

ul.navigation { margin:0; padding:0; left:150px; top:29px;}
ul.navigation li a { font-size: 18px; }
ul.navigation li a:hover, ul.navigation li a:focus  { border-color: #fff; }

a.navnew {left:150px; top:62px; font-size: 16px;}
a.navnew span {font-size: 16px;}

}


/* Mobile Header =====================================================================================
===================================================================================== */
.navbar-inverse .navbar-inner { background-color: #ac0000; background-image:none;}
a.brand {display:block; height:32px; width:136px; background: url("../img/logo-mobile.png") no-repeat center center; text-indent: -9999px; }
a.brand:hover, a.brand:focus {text-decoration: none; border-bottom: none;}
.navbar .brand { padding:14px 20px 0px !important;}

/* These media queries are for retina graphics */
@media only screen and (webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {
    /* Retina-specific stuff here */
    a.brand {display:block; height:32px; width:136px; background: url("../img/logo-mobile-2x.png") no-repeat center center;}
	a.brand:hover, a.brand:focus {text-decoration: none;}
	.footerlogo { display:block; width:50px; height:50px; background: url("../img/footerlogo.png") no-repeat center center; float:left; margin:0 20px 40px 0;}
}


.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a { font: bold 20px/22px 'Open Sans',helvetica, arial, sans-serif;}
.navbar-inverse .nav-collapse .nav>li>a, .navbar-inverse .nav-collapse .dropdown-menu a { color: #fff;}



/* Breadcrumbs =====================================================================================
===================================================================================== */
.breadcrumbs { background-color: #e8e8e8; padding:10px 0;}
.trail { margin-top:9px;}
@media (max-width: 760px) {
	.navbar-fixed-top { margin-bottom: 0px;}
	.breadcrumbs { margin:0 -20px; padding:10px 10px 10px 20px;}
}



/* Text Based Elemenst =====================================================================================
===================================================================================== */
hr { margin:10px 0 10px;}
h2.productname { margin-bottom:0; line-height: 30px; font-family:"Open Sans",helvetica, arial, sans-serif; font-weight:700 !important;}
h3.valuestatement { font-size:24px; line-height:28px;}
h3.miniheader { line-height:20px; margin-bottom:0;}
h3.miniheader span { font-size:12px;}
ul.megabullets li {font-size:20px; line-height:24px; margin-bottom:10px;}
dt, dd { line-height: 25px;}
dd {margin-bottom: 5px;}

table.text-center th, table.text-center td { text-align: center;}

.spotimg {
	float:right;
	width:300px;
	margin-left:40px;
}
@media (max-width: 575px) {
	.spotimg { 
		width:150px;
		margin-bottom:20px;
	}
}

/* Table Stuff */
.dataTables_wrapper { border: 1px solid #ccc; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px !important;}
.dataTables_info { margin-top:10px !important;}
table.display thead th, table.display tfoot th { text-align:left; font: 600 24px/30px 'Open Sans',helvetica, arial, sans-serif; padding:15px 0 15px 10px !important;}
table.linked-table td { padding: 10px 15px !important;}
table.linked-table td span { display:none;}
.dataTables_wrapper .dataTables_filter { position: absolute; right:0; top:-95px;}


table.linked-table tbody tr.odd { background-color: #e8e8e8;}
table.linked-table tbody tr.odd td.sorting_1 { background-color:#ccc;}
table.linked-table tbody tr.even td.sorting_1 { background-color:#e8e8e8;}
table.linked-table tbody tr:hover, table.linked-table tbody tr:hover td.sorting_1 { background-color: #ac0000 !important; color:#fff; cursor:hand !important; cursor: pointer !important;}
.dataTables_filter input, .dataTables_filter textarea, .dataTables_filter .uneditable-input { width: 100%; margin-left:-20px;}


/* Featured Products in the footer */
.featured {bottom-margin:5px;}
.featured .promo { position:relative;}

.featured .promo a { display: block}
.featured .promo a:hover img, .featured .promo a:focus img {-webkit-box-shadow: 0px 1px 7px rgba(50, 50, 50, 0.65);
-moz-box-shadow:0px 1px 7px rgba(50, 50, 50, 0.65);box-shadow:0px 1px 7px rgba(50, 50, 50, 0.65);}
.featured .promo span { position:absolute; bottom:0; left:0; padding:0 0 10px 10px;}
.featured .promo span h4 { margin:0; font-size:18px; line-height:18px; padding-right:20px;}
.featured .promo span p { margin:2px 0 0; font-size:12px;line-height:14px;}

.empty {width:100px;}
li.media a.pull-left { display: block; width:100px;}

/* Portrait Tablet */
@media (min-width: 768px) and (max-width: 979px) { 
	h3.valuestatement { font-size:18px; line-height:24px; }
	table.linked-table thead th, table.display tfoot th { text-align:left; font: 600 16px/18px 'Open Sans',helvetica, arial, sans-serif;}
}

/* Screens Smaller than iPads */
@media (max-width: 767px) {
	.dataTables_wrapper { margin-top:60px;}

	table.display { margin:0 auto !important; width:100%;}
	h3.valuestatement { font-size:14px; line-height:18px; }
	table.linked-table td { padding: 20px 10px !important; font-size:14px; line-height: 13px;}
	table.linked-table thead th, table.display tfoot th { text-align:left; font: 600 14px/15px 'Open Sans',helvetica, arial, sans-serif; padding:3px 0;}
	.dataTables_wrapper .dataTables_filter { text-align:left; top:-70px; left:0; position: absolute !important;}
	.dataTables_filter { width:95% !important; }
	.dataTables_filter input, .dataTables_filter textarea, .dataTables_filter .uneditable-input { margin-left:0px;}

	.featured .promo { margin-bottom:20px;}
	.featured .promo a:hover, .featured .promo a:focus {-webkit-box-shadow: none;
-moz-box-shadow:none;box-shadow:none; position:relative;}
	.btn-danger { margin-bottom:10px;}
}

/* Small iPhone */
@media only screen and (max-width : 320px) {
	table.display { margin:0 auto  !important; width:100%;}
	.dataTables_filter label { font-size:12px !important; }
	table.linked-table td { padding: 10px 3px !important; font-size:11px; line-height: 13px;}
	h2 { font-size:25px; line-height:30px;}
	.btn-danger { margin-bottom:10px;}
}

a.fancybox {margin:0 auto; display:block; text-align: center;}
a.fancybox:hover, a.fancybox:focus { 
	-webkit-box-shadow: 0px 1px 7px rgba(50, 50, 50, 0.45);
	-moz-box-shadow:0px 1px 7px rgba(50, 50, 50, 0.45);
	box-shadow:0px 1px 7px rgba(50, 50, 50, 0.45);}

/* This is fixes an issue with the border-bottom */
.fancybox-overlay a:hover, .fancybox-overlay a:focus { text-decoration: none; border-bottom: none !important; }

/* For Windows 8 Metro Support*/
@-ms-viewport{
    width: device-width;
}