/* CSS Document */

/* JOEY GREEN CSS - January 4, 2014 */

<!--
iframe {
	border-style:none
}
	
body {
	background-image: url(images/violet_background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size:auto;
	background-attachment: fixed;
}
-->
#wrap {
	width:1300px;
	margin-left:auto;
	margin-right:auto;
}

.left {
	width:990px;
	float:left;
}
.right {
	width:240px;
	float:right;
	margin-top:10px;
	text-align:middle;
}

.rightphoto {
	float: right;
	padding:10px 10px 10px 10px;
}

.leftphoto {
	float: left;
	padding:10px 10px 10px 0px;
}

.center {
    text-align: center;
}

#adcontainer {
	float: left;
	width: 977px;
	padding-bottom: 0px;
	text-align:right;
	order:1;
}

#banner {
	background-color:#006599;
	float: left;
	width: 977px;
	padding-bottom: 0px;
	order: 3;
}

#navigationbar {
	background-color:#000066;
	float: left;
	width: 977px;
	list-style-type: none;
	margin: 0;
    padding: 0;
    overflow: hidden;
	order: 4;
}

nav {
    float: left;
	font: bold 13px/150% Arial, Helvetica, sans-serif;
	text-align: center;
	border-right: 1px solid #bbb;
}

nav:last-child {
    border-right: none;
}

nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav a:hover:not(.active) {
    background-color:#06C;
}

.active {
    background-color: #4CAF50;
}

#containermidsection {
	display: -webkit-flex; /* Safari */
    display: flex;
	float: left;
	width: 977px;
	padding-bottom: 0px;
	order: 5;
}
	
#containerwackyuses {
	background-image: url("images/violet_hblend.jpg");
	float: left;
	width: 577px;
}
	
#yellowtextbox {
	float: left;
	width: 524px;
	background-color: #FFCC00;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 0px;
	margin-right: 20px;
	padding-right: 10px;
}

#yellowtextbox2 {
	float: left;
	width: 524px;
	background-color: #FFCC00;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 20px;
	padding-right: 10px;
}

#tipscontainer {
	background-color: #FFFFFF;
	float: left;
	width: 484px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding-right: 25px;
	padding-bottom: 20px;
	padding-left: 25px;
	padding-top: 10px;
}

#videocontainer {
	float: left;
	width: 534px;
	margin-left: 20px;
}

#contentscontainer {
	display: table;
	background-color: #FFFFFF;
	float: left;
	width: 534px;
	margin-left: 20px;
	margin-bottom: 20px;
}
	
#column1 {
	display: table-cell;
	background-color: #FFFFFF;
	width: 247px;
	float:left; 
	text-align:left;
	padding-left: 10px;
	padding-right: 10px;
}

#column2 {
	display: table-cell;
	background-color: #FFFFFF;
	width: 247px; 
	float:right;
	text-align:left;
	padding-left: 10px;
	padding-right: 10px;
}

#containermedia1 {
	display: -webkit-flex; /* Safari */
    display: flex;
	background-color: #ff9900;
	float: left;
	width: 275px;
}

#containermedia2 {
	float: left;
	width: 275px;
}

#press {
	background-color: #ff9900;
	float: left;
	width: 245px;
	padding-left: 20px;
	padding-right: 10px;
	padding-bottom:20px;
	}

#recenttv {
	background-color: #FFFFFF;
	float: left;
	width: 245px;
	padding-left: 20px;
	padding-right: 10px;
	padding-bottom:20px;
}

#videos {
	-webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;background-image: url("images/violet_hblend.jpg");
	float: right;
	width: 702px;
	text-align:center;
	padding-bottom:15px;
}
	
#faqscontainer {
	font: 16px/150% Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	float: left;
	width: 514px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	padding-left: 15px;
	padding-right: 15px;
}

#subhead {
	background-color:#000000;
	width: 300px;
	padding-top:2px;
	padding-bottom:2px;
	text-align:center;
	margin:auto;
}

img.norbertcover {
	border: 2px solid blue;
	margin-left: auto;
	margin-right: auto;
}
table.norbert {
	border: 0.5px solid black;
	column-rule: 0.5px solid black;
	grid-rows: 0.5px solid black;
	table-layout:auto;
    width: 300px;
	margin:auto;
	background-color:#FFFFFF;
}

/* center logos */
img.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.norbert-container {
	background-color:#FFCC00;
	width: 380px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	text-align:center;
}

#containerjoeybooks {
	-webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
	background-color:#009966; 
	float: right;
	width: 400px;
	padding-bottom: 0px;
	text-align:center;
}

#books {
	background-color:#009966;
	width: 400px;
	text-align:center;
	padding-top: 10px;
	padding-bottom: 10px;
}

.floating-box {
    display: inline-block;
    height: 144px;
	width:auto;
    margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-top: 20px;
}

figure {
    display: block;
    margin-top: 0em;
    margin-bottom: 1em;
	margin-left: 0px;
	margin-right: 0px;
}

figcaption {
	font: 14px/120% Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
}

.floating-video {
    display: inline-block;
    height: 144px;
	width:auto;
    margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-top: 20px;
}

#subscribebookright { 
	float: right;
	width: 305px;
	padding-left: 15px;
	text-align:center;
	order:2;
}

#trademark {
	text-align:center;
	font: 12px/120% Arial, Helvetica, sans-serif;
	color:#000;
	font-size: 12px;
}

#copyright {
	background-color:#000066;
	width: 977px;
	clear:both;
	order: 5;
}


table {
    font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color:#E2DDF6;
}

/* All standard text on site */
p {
	font: 12px/150% Arial, Helvetica, sans-serif;
	color: #000000;
	}
	
p2 {
	font: 16px/150% Arial, Helvetica, sans-serif;
	color: #000000;
	margin-left:-20px;
	}

/* Adjust default indent on lists */
ul, ol {
	font: 16px/150% Arial, Helvetica, sans-serif;
	color: #000000;
	margin-left:-20px;
	}
	
/* Add space after paragraphs */
li {
  margin: 14px 0;
}

/* Indent first line of pragraph */
.indent { 
	text-indent: 60px;
	}

	/* Headline */
h1 {
	font: bold 184px/100% Arial, Helvetica, sans-serif;
	text-align: left;
	color: #990000;
	font-size: 24px;
	}
	
/* Headline 2 */
h2 {
	font: bold 184px/100% Arial, Helvetica, sans-serif;
	text-align: center;
	color: #990000;
	font-size: 24px;
	}
	
/* Headline 3 */
h3 {
	font: bold 184px/100% Arial, Helvetica, sans-serif;
	text-align: left;
	color:#003;
	font-size: 18px;
	line-height:1.3;
	}
		
/* Headline 4 */
h4 {
	font: bold 13px/150% Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
	}
	
	/* Headline 5 */
h5 {
	font: bold 14px/120% Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
}

	/* Headline 6 */
h6 {
	font: bold 18px/110% Verdana, Geneva, sans-serif;
	text-align: center;
	color:#FFFFFF;
	font-size: 18px;
	margin-top: 2px;
	margin-bottom: 2px;
	}
	
	/* Headline 7 */
h7 {
	font: bold 32px/100% Arial Black, Helvetica, sans-serif;
	text-align:center;
	color:#333;
	font-size: 32px;
	margin-top: 0px;
	margin-bottom: 0px;
	}
	
		/* Headline 8: Norbert */
h8 {
	font: bold 48px/80% Arial Black, Helvetica, sans-serif;
	text-align:center;
	color:#9400D3;
	font-size: 48px;
	margin-top: 0px;
	margin-bottom: 0px;
	}
	
			/* Headline 9: Norbert Black */
h9 {
	font: bold 48px/80% Arial Black, Helvetica, sans-serif;
	text-align:center;
	color:#333;
	font-size: 48px;
	margin-top: 0px;
	margin-bottom: 0px;
	}

/* Search subhead */
.search {	
	font: bold 184px/100% Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFF00;
	font-size: 18px;
	}
		
/* No underline on links except for hovering */
a:link, a:active, a:visited {
	text-decoration: none;
	}
		
a:hover {
	text-decoration: underline;
		}
	
/* Reversed white navigation text */
.nav_txt {
	font: bold 13px/150% Arial, Helvetica, sans-serif;
	text-align: center;
	color:#0099CC;
	}

/* Nav Bar link colors */
a.nav:link {
	color:#FFFFFF;
	text-decoration: none;
	}
	
a.nav:active {
	color:#FFFFFF;
	text-decoration: none;
	}

a.nav:visited {
	color:#FFFFFF;
	text-decoration: none;
	}
	
a.nav:hover {
	color:#66CCFF;
	text-decoration: underline;
	}
	
.nav_none {
	color:#66CCFF;
	}
	
/* Footer small text reversed */
.footer {
	font: 9px/150% Arial, Helvetica, sans-serif;
	text-align: center;
	color:#FFFFFF;
	}


/* Tablet Screen */

@media screen and (max-width:991px) {

	*{padding: 0px;margin: 0px;box-sizing: border-box;}
	.img-responsive{max-width: 100%;height: auto;}
	html,body{overflow-x: hidden;overflow-y: scroll;}
	body{padding: 0px;margin: 0px;}	
	#wrap {width:767px;}
	#adcontainer {order: 5; width:100%;}
	#subscribebookright {order: 4;width:25%;padding-left:16px;padding-right: 16px;text-align: center;}
	#banner {order: 1; width:75%;}
	#navigationbar {order: 2; width:75%;}
	nav a {padding: 8px 7px;}
	#containermidsection {width:75%;}
	#containerwackyuses {width:65%;}
	#containerjoeybooks {width: 35%;}
	#faqscontainer {width: 80%;margin-left: 0;margin-right: 0;margin-bottom:16px;padding-right: 16px;padding-bottom:16px;padding-left: 48px;padding-top:16px;}
	.norbert-container {background-color: #FFCC00;width:100%;}
	#subhead {width:100%;}
	#tipscontainer {width: 100%;margin-left: 0;margin-right: 0;margin-bottom:16px;padding-right: 16px;padding-bottom:16px;padding-left: 48px;padding-top:16px;}
	#books {width: 100%;}
	table.norbert {width: 100%;}


	#videocontainer {width: 100%;margin-left: 0px;}
	#contentscontainer{width: 100%;margin-left: 0px;}
	#column1, #column2 {width: 50%;}
	#copyright {width:75%;}

}

@media screen and (max-width:767px){
	html,body{overflow-x: hidden;overflow-y: scroll;}
	#wrap{width: 100%;display: flex;flex-direction: column;}
	#adcontainer{order: 5;}
	#banner{order: 1;width: 100%;}
	#banner .right {width: 100%;padding:8px 16px;margin: 0px!important;}
	ul, ol {font: 12px/16px Arial, Helvetica, sans-serif;}
	#navigationbar {order: 2;width: 75%;}
	nav a {padding: 4px 5px;}
	#subscribebookright{order: 4;width: 100%;}
	#containermidsection {width: 100%;flex-direction: column;order: 3;}
	#containerwackyuses {width:100%;}
	#faqscontainer {width: 80%;margin: 0px;}
	#faqscontainer ol{margin-left: 0px;}
	#videocontainer iframe{width: 100%;height: auto;}
	#containerjoeybooks {width: 100%;}
	/* barbasol page */
	#tipscontainer {width: 100%;margin: 0px;}
	#tipscontainer ol{margin-left: 0px;}
	#copyright {width:100%;}
}