@charset "UTF-8";
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #FFF0AA;
	background-image: url(../graphics/gnp_webheader_final_bg.gif);
	background-repeat: repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	font-size: 100%; /* this allows em units to evenly work across most browsers */
	line-height: 1.25em;
}

span.highlight {
	font-style: italic;
	font-weight: bold;
	color: #FFFFCC;
}

.clear {
	clear: both;
}

.shadow {
	box-shadow: 3px 3px 4px 2px #999;
	box-shadow: .231em .231em .25em .125em #999;
}

.oneColElsCtrHdr #container {
	width: 800px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	width: 50em;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	background: bottom left url(../graphics/navbarstars.gif) no-repeat;
}

/* header styles */
#header {
	margin: 0;
	padding: 0;
	background: url(../graphics/gnp_webheader_title.png) no-repeat;
	height: 220px;
	height: 13.75em;
}

#header img#school {
	float: left;
	position: relative;
	left: 48px;
	left: 3.0em;
	margin: 0;
	padding: 0;
	background: center center url(../graphics/schoolhouse.png) no-repeat;
}

#header #navigation {
	margin: 0;
	padding: 0;
	/* background: url(../graphics/schoolhouse.png) no-repeat; */
	height: 220px;
	height: 13.75em;
}

/* ========================== For Nav Slider =========================== */

#nav_wrap {
	margin: 0;
	height: 65px; /* however tall it needs to be to fit your background image */
	height: 4.063em; /* however tall it needs to be to fit your background image */
	width: 100%;
	/* background-image: url(../graphics/gnp_logo_bike.png); */ /* This line puts the bike image to ride along the menu */
	background-image: none;
	background-repeat: no-repeat;
    padding-top: 152px; /* gives the image room to be viewed, pushing the ul down */
	padding-top: 9.5em; /* gives the image room to be viewed, pushing the ul down */
	overflow: visible;
	/* control the bicycle position in the js file */
}

/* ========================== end Nav Slider =========================== */

#topnav {
/*	background: #EC1C24 ; */

}

#header .navbar {
	margin: 30px 0 0 0;
	margin: 1.875em 0 0 0;
	height: 38px;
	height: 2.375em;
}

#header ul {
	text-align: center;
	margin: 0;
	/* padding: 0 110px 0 0; */
	padding: 0 25px 0 0; /* use this to space out links on top nav */
	padding: 0 1.5625em 0 0;
}

#header ul.navbar {
	/* padding: 0 246px; IE7 only on separate CSS file */
}

#header ul li {
	margin: 0;
	list-style-type: none;	
}

#header ul.navbar li {
	display: inline; /* float left; IE7 only on separate CSS file */
	margin: 0 .555em;
	line-height: 2em;
	font-variant: small-caps;
	font-size: 18px;
	font-size: 1.125em;
	font-weight: bold;
	letter-spacing: .5px;
	letter-spacing: .028em;
}

#header a {
	color:#FFF;
	text-decoration: none;
}

#header a:hover {
	color: #7F0D31;
	color: #FFF0AA;
	color: #FFEA81;
}

	/* image menu styles in separate imagemenu.css file (technically still part of the header area) */
	
/* end header styles */

.oneColElsCtrHdr #container2 {
	clear: both;
	background: url(../graphics/star_bg.gif);
	
}

#column1 h1, #column1 h2, #column1 h3, #column1 h4, #column1 h5, #column1 p, #column1 ul, #column1 li, #column1 img, #column2 h1, #column2 h2, #column2 h3, #column2 h4, #column2 h5, #column2 p, #column2 ul, #column2 li, #column2 img {
	margin: 0;
	padding: 0;
}

#mainContent {
	width: 800px;
	width: 50em;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	color: #EC1C24;
	background: #FFF;
	background: #FFF top left url(../graphics/iPadBg.png) no-repeat;
	overflow: hidden;
	min-height: 50em;
}

#mainContent p {
	text-align: left;
	font-size: 16px;
	font-size: 1em;
	margin: 0;
	padding: 10px;
	padding: .625em;
	color: #000;
}

#mainContent p.caption {/* not on products page */
	text-align: center;
	font-size: 12px;
	font-size: .75em;
	line-height: 16px;
	line-height: 1em;
	margin: 0;
	padding: 10px;
	padding: .625em;
	color: red;	
}

#mainContent p.intro {/* not on products page */
	text-align: left;
	font-size: 16px;
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	margin-top: 8px;
	margin-top: .5em;
	padding: 0 30px;
	padding: 0 1.875em;
	color: #000;
	clear: both;
	line-height: 1.5em;
}

#mainContent #column1, #mainContent .column1b {
	float: left;
	width: 500px;
	width: 31.25em;
	padding-right: 300px;
	padding-right: 18.75em;
	min-height: 100%;
}

#mainContent #column2, #mainContent .column2b {
	float: right;
	width: 300px;
	width: 18.75em;
	height: 100%;
	min-height: 100%;
	margin: 0;
	margin-left: -500px;
	margin-left: -31.25em;
	padding: 0;
}

/* =================== onSale & latest rotators ====================== */
#column1 #onSale {
	margin: 0;
	padding: 0;
	width: 202px;
	width: 12.625em;
	height: 340px;
	height: 21.250em;
	margin: 111px 0 25px 20px;
	margin: 6.9em 0 1.563em 1.25em;
	float: left;
	overflow: hidden;
}

#column1 #latest {
	margin: 0;
	padding: 0;
	width: 202px;
	width: 12.625em;
	height: 340px;
	height: 21.250em;
	margin: 3.95em 0 0 2.25em;
	float: left;
	overflow: hidden;
}

#onSale #rotator2, #latest #rotator3 {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 205px;
	width: 9.375em;
	height: 12.813em;
	margin: 1.65em 0 1em 1.65em;
	margin: 1.65em 0 2.75em 1.65em;
	float: left;
	overflow: hidden;
}

#onSale h2.boxH2, #latest h2.boxH2 {
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 16px;
	font-size: 1em;
	line-height: 17px;
	line-height: 1.063em;
	color: #51B848;
	text-align: center;
	overflow: hidden;
	letter-spacing: .04em;
}

#onSale p.boxP, #latest p.boxP {
	margin: 0;
	padding: 0;
	margin: 3px 0 0 0;
	margin: .231em 0 0 0;
	width: 100%;
	font-size: 13px;
	font-size: .813em;
	line-height: 14px;
	line-height: 1.077em;
	color: #000;
	text-align: center;
}

#onSale img, #latest img {
	margin: 0;
	padding: 0;
	float: left;
	margin-left: 37px;
	margin-left: 2.313em;

}

#mainContent #onSale a, #mainContent #latest a, #mainContent #column1 a, #mainContent #column2 a {
	text-decoration: underline;
}

#onSale a:hover, #latest a:hover, #mainContent #column1 a:hover, #mainContent #column2 a:hover {
	opacity: .8;
}

/* =================== end onSale & latest rotators ====================== */

/* social media styles */

#socialMedia {
	margin: 0;
	padding: 0;
	width: 370px;
	width: 23.125em;
	height: 75px;
	height: 4.688em;
	text-align: left;
	float: right;
}

#mainContent .fb-like {
	padding: 0;
	margin: 0;
	margin-top: 1.25em;
	width: 100%;
	height: 2em;
	text-align: left;
	display: block;
	float: left;
}

#socialMedia a {
	padding: 0;
	margin: 0;
}

#twitter {
	padding: 0;
	margin: 0;
	/* margin-left: 1em; */
	/* width: 100%; */
	display: inline;
	float: left;
}

#google {
	padding: 0;
	margin: 0;
	margin-left: .375em;
	display: inline;
	float: left;
}

/* end social media styles */

/* start badges styles */

div.badges {/* may not be used anymore */
	margin: 16px 0 0 0;
	margin: 1em 0 0 0;		
}

div.topbadge {
	margin: 0 0 8px 0;	
	margin: 0 0 .5em 0;
}

/* end badges styles */

/* ======================== Announcement Window ================ */

/* #modal *, #modal2 * {
	padding: 0;
	margin: 0;
	background: none;
	background: #FFF;	
}

#modal {
	width: 800px;
	width: 50em;
	text-align: center;
	position: fixed;
	z-index: 100;
	top: 0; 
	overflow: auto;
	margin: 0 auto;
	height: 100%;
}

#modal .redbox {
	padding: .3em;
	background: red;
}

#modal ul {
	list-style-type: none;
	text-align: left;
	margin: 0;
	padding: 0;	
}

 #modal ul li {
	display: block;
	padding-left: 1em;
}
*/

#announcement ul {
	list-style-type: none;
	text-align: left;
	margin: 0;
	padding: 0;	
}

#announcement ul li {
	display: block;
	/* background: #ffa; */
	/* margin-bottom: .2em;*/
	padding-left: 1em;
}

#announcement .close, #announcement ul li a, #announcement p a {
	text-decoration: underline;
	color: red;
}

.close:hover, .close:focus, #announcement a:hover, #announcement a:focus, #announcement p a:hover, #announcement p a:focus {
	text-decoration: none !important;
	cursor: pointer;
}

.antispam {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.antispam2 {
	display: none;
}


/* ======================== Home Page only ===================== */

#mainContent h1 {
	margin: 0;
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: bold;
	font-size: 24px;
	font-size: 1.5emx;
	color: #000;
	text-align: center;
	padding: 0 20px 0 25px;
	padding: 0 1.25em 0 1.563em;
	margin-bottom: 20px;
	margin-bottom: 1.25em;	
}

#mainContent h1.pgTitle { /* commented values for non-Google fonts */
	margin: 0;
	padding: 0;
	margin: 12px 0 12px 20px;
	margin: .462em 0 .462em .769em;
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: normal; /* font-weight: bold; */
	font-size: 26px; /* the new 1 em unit for this tag */
	font-size: 1.625em;
	line-height: 30px;
	line-height: 1.154em;
	color: #51B848;
	text-align: left;
	width: 300px;	/* width: 275px; */
	width: 11.538em;
	float: left;
	height: 70px;
	height: 2.692em;
}

#mainContent h2.category {
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 22px;
	font-size: 1.375em; /* the new 1 em unit for this tag */
	line-height: 44px; /* line-height was not necessary for non-Google font */
	line-height: 2em;
	color: #000;
	text-align: center;
	width: 500px;
	width: 22.727em;
	height: 44px;
	height: 2em;
	margin-bottom: 25px;
	margin-bottom: 1.136em;
	overflow: hidden;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
	letter-spacing: 1px;
	letter-spacing: .045em;
	clear: both;
}

#mainContent h2.subtitle {
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 22px;
	font-size: 1.375em; /* the new 1 em unit for this tag */
	line-height: 44px; /* line-height was not necessary for non-Google font */
	line-height: 2em;
	color: #000;
	text-align: center;
	width: 500px;
	width: 22.727em;
	height: 44px;
	height: 2em;
	overflow: hidden;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
	letter-spacing: 1px;
	letter-spacing: .045em;
	clear: both;
}

#mainContent h3 {
	padding: 0;
	margin: 0;
	text-align: center;
	color: #51B848;
	font-size: 1.125em;
	margin: .625em 0;
}

#mainContent #column2 h3.top-pad {
	padding-top: 3.750em;
}

#mainContent ul.catNav {
	padding: 0;
	margin: 0;
	width: 100%;
}

#mainContent ul.catNav li {
	list-style-type: none;
	color: #EC1C24;
	display: inline; /* float left; IE7 only on separate CSS file */
	margin: 0 1em;
	line-height: 2em;
	font-variant: small-caps;
	font-size: 18px;
	font-size: 1.125em;
	font-weight: bold;
	letter-spacing: .5px;
	letter-spacing: .028em;	
}

#mainContent a {text-decoration: none;}

#mainContent ul.catNav li a {
	color:#000;
	text-decoration: underline;
}

#mainContent ul.catNav li a:hover {
	text-decoration: none;
}

#mainContent ul.catNav li a.blue {
	color: #3366FF;
}

#mainContent ul.catNav li a.green {
	color: #00CC66;	
}

#mainContent ul.catNav li a.orange {
	color: #FF9900;	
}

#mainContent ul.catNav li a.red {
	color: #EC1C24;	
}

#mainContent ul.catNav li a.purple {
	color: #660099;	
}

#mainContent ul.catNav li a.black {
	color: #000;
}


/* =============== forced to break the rules because IE is the worst browser in the history of the planet ============ */
.IE_fix {
	margin: 0;
	padding: 0;
	clear: both;
	width: 100%;
	height: 1px;
	display: block;
}

/* ========================== makes a longer content area scroll before hitting the image rotator box ============== */

/*
#column2 {
	max-height: 375px;
	overflow: auto;
}
*/

/* ========================== end scroll before hitting the image rotator box ============== */

/* ========================== one way around the image rotator box ============== */

/*
#column2 .rotator_dodge {
	margin-left: 175px;
}
*/

/* ========================== end one way around the image rotator box ============== */

/* ========================== rotator box ============== */
#column2 .rotator {
	width: 209px;
	width: 13.063em;
	height: 287px;
	height: 17.938em;
	margin: 0;
	margin: 127px 0 50px 35px;
	margin: 7.938em 0 3.125em 2.188em;
	color: #000;
	overflow: hidden;
}

#column2 .rotator p:first-letter {
	font-size: 20px;
	font-size: 1.25em;
}

#column2 .rotator img {
	float: right;
	margin: 10px;	
	margin: .625em;	
}

#column2 .rotator img.border {
	border: 2px #FFF solid;	
	border: .125em #FFF solid;
}

#column2 .rotator img.border2 {
	border: 2px #999 solid;	
	border: 125em #999 solid;	
}

/* ========================== end rotator box ============== */

/* ========================== video box ============== */
#column2 iframe {
	margin: 0;
	margin-top: 25px;
	margin-top: 1.563em;
}

/* ========================== end video box ============== */

/* ============ app list styles ======= */

#apps {
	clear: both;
	margin: 0;
	padding: 0;
	padding-top: .3em;
	width: 800px;
	width: 50em;
	text-align: center;
	background-color:#FFF;
}

#apps h2 {
	font-family: "Righteous", "ITC Lubalin Graph", "Lubalin Graph", "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 22px;
	font-size: 1.375em;
	line-height: 44px; /* line-height was not necessary for non-Google font */
	line-height: 2em;
	color: #FFF;
	text-align: center;
	width: 500px;
	width: 22.727em;
	height: 44px;
	height: 2em;
	margin: 0 0 20px 0;
	margin: 0 0 .909em 0;
	overflow: visible;
	letter-spacing: 1px;
	letter-spacing: .045em;
}

#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	clear: both;
	display: block;
	width: 800px;
	width: 36.364em;
	margin-top: 1em;
}

#apps h2.blue {
	background: #3366FF;
}

#apps h2.green {
	background: #00CC66;
}

#apps h2.yellow {
	color: #000;
	background: #FFFF33;
	margin-top: 5px;
	margin-top: .313em;
}

#apps h2.orange {
	background: #FF9900;
}

#apps h2.red {
	background: #EC1C24;
}

#apps h2.purple {
	background: #660099;
}

#apps h2.black {
	background: #000;
}

#apps h2.topspace {
	margin-top: 22px;
	margin-top: 1em;
}

#apps h3.apps_top {
	text-align: center;
	font-size: 22px;
	font-size: 1.375em;
	margin: 0;
	padding: 0;
	display: inline;
	overflow: auto;
}

#apps .app_text_blue h3 {
	color:  #3366FF;
}

#apps .app_text_green h3 {
	color:  #00CC66;
}

#apps .app_text_yellow h3, #apps .app_text_yellow2 h3 {
	color:  #000;
	color:  #51B848;
}

#apps .app_text_orange h3 {
	color:  #FF9900;
}

#apps .app_text_red h3 {
	color:  #EC1C24;
}

#apps .app_text_purple h3 {
	color:  #660099;
}

#apps .app_text_black h3 {
	color:#000;
}

#apps .app_text, #apps .app_text_blue, #apps .app_text_green, #apps .app_text_yellow, #apps .app_text_yellow2, #apps .app_text_orange, #apps .app_text_red, #apps .app_text_purple, #apps .app_text_black {
	margin: 0;
	padding: 0;
	margin: .4em;
	padding-bottom: 1em;
	padding-top: .1em;/* not on products page */
	clear: both;
	border-bottom: double .3em #EC1C24;
	overflow: hidden;
}

#apps .app_text_yellow2 {
	padding-bottom: 0;
}

#apps .app_text_blue { border-bottom: double .3em #3366FF;}

#apps .app_text_green { border-bottom: double .3em #00CC66;}

#apps .app_text_yellow, #apps .app_text_yellow2 { border-bottom: double .3em #FFFF33; border-bottom: none;}

#apps .app_text_orange { border-bottom: double .3em #FF9900;}

#apps .app_text_red { border-bottom: double .3em #EC1C24;}

#apps .app_text_purple { border-bottom: double 4.8px #660099;}

#apps .app_text_black { border-bottom: double .3em #000;}

#apps a .buy, #apps a .buy_yellow, #apps a .buy_yellow2 {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 1em;
	color: #00ABBD;
	color: #FFF;
	text-align: center;
	line-height: 44px;
	line-height: 2.75em;
	height: 44px;
	height: 2.75em;
	background: top center url(../graphics/titleBar.png) no-repeat;
	overflow: visible;
	display: inline-block;
	width: 488px;
	width: 30.5em;
}

#apps a .buy_yellow {
	color: #000;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
	/* background: none; */ /* exists on product page */
}

/* smaller bar for 2 side by side */
#apps a .buy_yellow2 {/* not on product page */
	color: #000;
	background: top center url(../graphics/titleBarYellow350.png) no-repeat;
	width: 350px;
	width: 21.875em;
}
/* end smaller bar for 2 side by side */

#apps a:hover .buy_yellow, #apps a:hover .buy_yellow2 {
	opacity: .8;
}


#apps .app_text_blue a .buy {
	background: top center url(../graphics/titleBarBlue.png) no-repeat;
}

#apps .app_text_blue a:hover .buy {
	background: top center url(../graphics/titleBarBlue.png) no-repeat;
	opacity: .8;
}

#apps .app_text_green a .buy {
	background: top center url(../graphics/titleBarGreen.png) no-repeat;
}

#apps .app_text_green a:hover .buy {
	background: top center url(../graphics/titleBarGreen.png) no-repeat;
	opacity: .8;
}

#apps .app_text_yellow a .buy, #apps .app_text_yellow2 a .buy {
	color:  #000;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
}

#apps .app_text_yellow a:hover .buy, #apps .app_text_yellow2 a:hover .buy {
	color:  #000;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
	opacity: .8;
}

#apps .app_text_orange a .buy {
	background: top center url(../graphics/titleBarOrange.png) no-repeat;
}

#apps .app_text_orange a:hover .buy {
	background: top center url(../graphics/titleBarOrange.png) no-repeat;
	opacity: .8;
}

#apps .app_text_red a .buy {
	background: top center url(../graphics/titleBarRed.png) no-repeat;
}

#apps .app_text_red a:hover .buy {
	background: top center url(../graphics/titleBarRed.png) no-repeat;
	opacity: .8;
}

#apps .app_text_purple a .buy {
	color:  #FFF;
	background: top center url(../graphics/titleBarPurple.png) no-repeat;
}

#apps .app_text_purple a:hover .buy {
	color:  #FFF;
	background: top center url(../graphics/titleBarPurple.png) no-repeat;
	opacity: .8;
}

#apps .app_text_black a .buy {
	background: top center url(../graphics/titleBarBlack.png) no-repeat;
}

#apps .app_text_black a:hover .buy {
	background: top center url(../graphics/titleBarBlack.png) no-repeat;
	opacity: .8;
}

#apps img.noborder {
	margin: 0;
	padding: 0;
	margin: .3em .9em;
	float: left;
	border: none;
}

#apps a.back {
	margin: 0;
	padding: 0;
	margin-top: .5em;
	text-align: center;
	font-size: .7em;
	display: inline;
	text-decoration: underline;
}

#apps a.back:hover {
	text-decoration: none;
}

#apps .app_text_blue a.back {
	color: #3366FF;
}

#apps .app_text_green a.back {
	color: #00CC66;
}

#apps .app_text_orange a.back {
	color: #FF9900;
}

#apps .app_text_red a.back {
	color: #EC1C24;
}

#apps .app_text_purple a.back {
	color: #660099;
}

#apps .app_text_black a.back {
	color: #000;
}

#apps a:hover img {
	opacity: .8;
}


/* ============ end app list styles ======= */

/* ========================== footer styles =================== */

#footer { 
	margin: 0;
	padding: 0;
	padding-top: 5px;
	padding-top: .313em;
	clear: both;
	background: bottom center url(../graphics/footer_round.png) no-repeat; /* Need to change bg to plain white for IE6 */
	height: 35px;
	height: 2.188em;
	width: 50em;
	margin: 0 auto;
}

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	padding: .833em 0;
	font-size: 12px;
	font-size: .75em;
	font-variant: small-caps;
	letter-spacing: .5px;
	letter-spacing: .042em;
	text-align: center;
	color: #EC1C24;
}

p#dvd {
	font: 10px Arial, Helvetica, sans-serif;
	font: .625em Arial, Helvetica, sans-serif;
	color: #730220;
	text-align: center;
}

#dvd a {
	color: #730220;
	text-decoration: none;
}

#dvd a:hover {
	color: #8C6E5D;
	text-decoration: underline;
}

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {

.oneColElsCtrHdr #container {
	width: 100%;
}

#mainContent {
	width: 100%;
}

#apps {
	width: 100%;
}

#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	width: 100%;
}

#footer { 
	width: 100%;
}

/* ======================== Announcement Window ================ */
}

@media only screen and (max-width: 736px), only screen and (max-device-width: 736px) {

/* header styles */
#header {
	margin: 0;
	padding: 0;
	background: 60% 0% url(../graphics/GNPHeader480.png) no-repeat;
	height: 220px;
	height: 13.75em;
}

#apps a .buy {
	display: block;
	clear: both;
	margin: 0 auto;
}

#apps h3.apps_top {
	line-height: 1.25em;
	overflow: hidden;
	display: block;
}

}

@media only screen and (max-width: 667px), only screen and (max-device-width: 667px) {
	
#header {
	background: 80% 0% url(../graphics/GNPHeader480.png) no-repeat;
}

#column1 #onSale {
	margin: 35px 0 25px 20px;
	margin: 2.188em 0 1.563em 1.25em;
}

#column1 #latest {
	margin: -12px 0 0 36px;
	margin: -.750em 0 0 2.25em;
}

#column2 .rotator {
	margin: 52px 0 50px 35px;
	margin: 3.25em 0 3.125em 2.188em;
}

#apps a .buy_yellow2 {/* not on product page */
	border-bottom: .2em #FFF solid;
}

p#dvd {
	display: none;
}

}

@media only screen and (max-width: 568px), only screen and (max-device-width: 568px) {

#header {
	background: 130% 0% url(../graphics/GNPHeader480.png) no-repeat;
}

#header img#school {
	left: 1em;
}

#mainContent #column2, #mainContent .column2b {
	display: none;
}

}

@media only screen and (max-width: 489px), only screen and (max-device-width: 489px) {
/*	
#mainContent {
	width: 100%;
}
*/
#socialMedia {
	width: 300px;
	width: 18.750em;
}

/* CHANGES MADE ========================================== */
.oneColElsCtrHdr #container {
	background: none;
	margin: 0;
	overflow: hidden;
}

/* CHANGES MADE ========================================== */
#header {
	background: 0% 0% url(../graphics/GNPHeader480.png) no-repeat;
	height: 18.438em;
	padding-top: 5em;
	height: 100%;
}

#header img#school {
	display: none;
}

/* ========================== For Nav Slider =========================== */

/* CHANGES MADE ========================================== */
#nav_wrap {
	height: 0;
	padding: 0;
}

/* ========================== end Nav Slider =========================== */

/* CHANGES MADE ========================================== */
#header .navbar {
	margin: 0;
	height: 0;
}

/* CHANGES MADE ========================================== */
#header ul li {
	background-color: #EC1C24;
	border-bottom: .1em #FFF solid;
	width: 27em;
}

/* CHANGES MADE ========================================== */
#header ul.navbar li {
	display: block; /* float left; IE7 only on separate CSS file */
	margin: 0;
	line-height: 3em;
}

/* CHANGES MADE ========================================== */
#header a {
	display: flex;
	justify-content: center; /* works with display: flex to center content in modern browsers */
	align-items: center; /* works with display: flex to center content in modern browsers */
}

/* MAIN CONTENT TAGS */

/* CHANGES MADE ========================================== */
#mainContent #column1, #mainContent .column1b {
	/*remove entirely */
}

#mainContent #column2, #mainContent .column2b {
	display: none;
}

#mainContent iframe {/* changes the base size of the video */
	width: 460px;
	width: 28.750em;	
}

/* CHANGES MADE ========================================== */
#mainContent ul.catNav {
	/*remove entirely */
}

#mainContent ul.catNav li {
	margin: 0;
	display: block;
	line-height: 2.5em;
	border-bottom: .1em #FFF solid;
	width: 27em;
}

#mainContent ul.catNav li a {
	color:#000;
	text-decoration: none;
	display: block;
}

#mainContent ul.catNav li a:hover {
	color: #FFEA81;
	opacity: .8;
}

#mainContent ul.catNav li a.blue {
	color:  #FFF;
	background: top center url(../graphics/titleBarBlue.png) no-repeat;
}

#mainContent ul.catNav li a.green {
	color:  #FFF;
	background: top center url(../graphics/titleBarGreen.png) no-repeat;
}

#mainContent ul.catNav li a.orange {
	color:  #FFF;
	background: top center url(../graphics/titleBarOrange.png) no-repeat;
}

#mainContent ul.catNav li a.red {
	color:  #FFF;
	background: top center url(../graphics/titleBarRed.png) no-repeat;
}

#mainContent ul.catNav li a.purple {
	color:  #FFF;
	background: top center url(../graphics/titleBarPurple.png) no-repeat;	
}

#mainContent ul.catNav li a.black {
	color:  #FFF;
	background: top center url(../graphics/titleBarBlack.png) no-repeat;	
}

/* =================== onSale & latest rotators ====================== */

/* CHANGES MADE ========================================== */
#column1 #onSale {
	/*remove entirely */
}
/* CHANGES MADE ========================================== */
#column1 #latest {
	/*remove entirely */
}

/* ============ app list styles ======= */

/* CHANGES MADE ========================================== */
#apps {
	width: 30em;
	min-height: 50em;
}

/* CHANGES MADE ========================================== */
#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	/*remove entirely */
}

/* CHANGES MADE ========================================== */
#apps a .buy, #apps a .buy_yellow {
	margin-bottom: 1em;
	width: 100%;
	background: none;
}

/* CHANGES MADE ========================================== */
/* smaller bar for 2 side by side */
#apps a .buy_yellow2 {/* not on product page */
	line-height: 2.75em;
}
/* end smaller bar for 2 side by side */

/* CHANGES MADE ========================================== */
#apps h3.apps_top {
	/*remove entirely */
}

/* ============ end app list styles ======= */

/* ========================== footer styles =================== */

/* CHANGES MADE ========================================== */
#footer { 
	/*remove entirely */
}

#footer p {
	padding: 0;
}

/* CHANGES MADE ========================================== */
p#dvd {
	/*remove entirely */
}

}

@media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {

#header {
	background-size: contain;
}

#nav_wrap {
	height: 0;
	padding: 0;
}

#header ul li {
	width: 23em;
}

/* MAIN CONTENT TAGS */

#mainContent h1.pgTitle {
	margin-left: 0;
	text-align: center;
	width: 100%;
}

#mainContent {
	background: #FFF top center url(../graphics/iPadBg320c.png) repeat;
}

#mainContent #column1, #mainContent .column1b {
	float: left;
	width: 414px;
	width: 20em;
	width: 100%;
	padding-right: 0;
	padding-left: 86px;
	padding-left: 5.375em;
	min-height: 100%;
}

#mainContent #column2, #mainContent .column2b {
	display: none;
}

#column1 #latest {
	margin: 158px 0 0 20px;
	margin: 9.9em 0 0 1.25em;
}

div.topbadge {
	margin: 0 0 0 30px;
	margin: 0 0 0 1.875em;
	clear: both;
	width: 180px;
	width: 11.25em;
}

#mainContent iframe {/* changes the base size of the video */
	width: 384px;
	width: 24em;
}

#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	width: 19em;
}

#mainContent ul.catNav li {
	width: 23em;
}

#apps {
	width: 25.875em;
	min-height: 50em;
}

#apps a .buy_yellow2 {/* not on product page */
	width: 100%;
}

#footer { 
	margin: -.625em 0 0 0;
	padding: 0;
}

}

@media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {
	
#header ul li {
	width: 20.85em;
}

#mainContent #column1, #mainContent .column1b {
	padding-left: 67px;
	
}

#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	width: 17.125em;
}

#mainContent ul.catNav li {
	width: 20.85em;
}

#mainContent iframe {/* changes the base size of the video */
	width: 368px;
	width: 23em;
	padding-left: 0;
	margin-left: 0;
}

#apps {
	width: 23.4375em;
	min-height: 50em;
}
}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
	
/* CHANGES MADE ========================================== */
#mainContent {
	/*remove entirely */
}

#socialMedia {
	width: 5em;
	float: right;
}

/* CHANGES MADE ========================================== */
.oneColElsCtrHdr #container {
	/*remove entirely */
}

/* CHANGES MADE ========================================== */
#header {
	/*remove entirely */
}

/* CHANGES MADE ========================================== */
#header img#school {
	/*remove entirely */
}

/* ========================== For Nav Slider =========================== */

/* CHANGES MADE ========================================== */
#nav_wrap {
	/*remove entirely */
}

/* ========================== end Nav Slider =========================== */

/* CHANGES MADE ========================================== */
#header .navbar {
	/*remove entirely */
}

/* CHANGES MADE ========================================== */
#header ul li {
	width: 17.75em;
}

/* CHANGES MADE ========================================== */
#header ul.navbar li {
	/*remove entirely */
}

/* CHANGES MADE ========================================== */
#header a {
	/*remove entirely */
}

/* MAIN CONTENT TAGS */
/* CHANGES MADE ========================================== */
#mainContent h1.pgTitle { /* commented values for non-Google fonts */
	width: 12em;
}

#mainContent {
	background: #FFF top left url(../graphics/iPadBg320c.png) no-repeat;
}
/* CHANGES MADE ========================================== */
#mainContent #column1, #mainContent .column1b {
	/*remove entirely */
}

#mainContent #column2, #mainContent .column2b {
	display: none;
}

#mainContent p.caption {/* not on products page */
	margin-bottom: -2em;
}

#mainContent iframe {/* changes the base size of the video */
	width: 320px;
	width: 20em;
	width: 100%;	
}

#mainContent ul.catNav li {
	width: 18em;
}

/* =================== onSale & latest rotators ====================== */
/* CHANGES MADE ========================================== */
#column1 #onSale {
	margin: 35px 0 25px -8px;
	margin: 2.188em 0 1.563em -.55em;
}
/* CHANGES MADE ========================================== */
#column1 #latest {
	margin: 158px 0 25px -8px;
	margin: 9.9em 0 1.563em -.55em;
}

/* =================== end onSale & latest rotators ====================== */
/* CHANGES MADE ========================================== */
div.topbadge {
	margin: 0;
}

/* ============ app list styles ======= */

/* CHANGES MADE ========================================== */
#apps {
	width: 20em;
}

/* CHANGES MADE ========================================== */
#apps h2.blue, #apps h2.green, #apps h2.yellow, #apps h2.orange, #apps h2.red, #apps h2.purple, #apps h2.black {
	width: 100%;
}

/* CHANGES MADE ========================================== */
#apps a .buy, #apps a .buy_yellow {
	/*remove entirely */
}

/* smaller bar for 2 side by side */
#apps a .buy_yellow2 {/* not on product page */
	width: 320px;
	width: 18em;
}
/* end smaller bar for 2 side by side */

/* CHANGES MADE ========================================== */
#apps .app_text_yellow a .buy, #apps .app_text_yellow2 a .buy {
	/*remove entirely */
}
/* CHANGES MADE ========================================== */
#apps .app_text_yellow a:hover .buy, #apps .app_text_yellow2 a:hover .buy {
	/*remove entirely */
}

#apps img.noborder {
	width: 127px;
	float: right;
}

/* ============ end app list styles ======= */

/* ========================== footer styles =================== */
/* CHANGES MADE ========================================== */
#footer { 
	/*remove entirely */
}
/* CHANGES MADE ========================================== */
#footer p {
	/*remove entirely */
}
/* CHANGES MADE ========================================== */
p#dvd {
	/*remove entirely */
}

}