@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.gif) 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);
	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;
}

/* may not exist in html page - part of old text on home page
#mainContent p.intro {
	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 .75em 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 ====================== */

/* facebook 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: -1em;
	display: inline;
	float: left;
}

/* end facebook styles */

/* ======================== 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;	
}



/* =============== 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 40px 35px;
	margin: 7.938em 0 2.5em 2.188em;
	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;
	min-height: 50em;
}

#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: 1em;
	padding-bottom: 1em;
	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_yellow2 { border-bottom: double .3em #FFFF33;}

#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 {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
	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;
	background: none;
}

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

#apps a:hover .buy_yellow {
	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 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: 480px), only screen and (max-device-width: 480px) {
	
#mainContent {
	width: 480px;
	width: 30em;
}
	
/* KEEP IT */
.oneColElsCtrHdr #container {
	width: 480px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	width: 30em;
	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: none;
	margin: 0;
	overflow: hidden;
}

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

/* KEEP IT */
#header img#school {
	float: none;
	position: relative;
	left: 0;
	margin: 0;
	padding: 0;
	background: none;
	height: 4.688em;
}

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

/* KEEP IT */
#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: 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 */
	height: 0;
	padding: 0;
}

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

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

/* KEEP IT */
#header ul li {
	margin: 0;
	list-style-type: none;
	background-color: #EC1C24;
	border-bottom: .1em #FFF solid;
	width: 27em;
}

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

/* KEEP IT */
#header a {
	color:#FFF;
	text-decoration: none;
	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 */
}

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

/* KEEP IT */
#apps {
	clear: both;
	margin: 0;
	padding: 0;
	padding-top: .3em;
	width: 30em;
	text-align: center;
	background-color:#FFF;
	min-height: 50em;
}

/* KEEP IT */
#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;
	width: 100%;
}

/* KEEP IT */
#apps a .buy, #apps a .buy_yellow {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
	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: 100%;
	background: none;
}

/* ============ 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: 30em;
	margin: 0 auto;
}

#footer p {
	padding: 0;
}

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

/* html {overflow: hidden;}*/

}

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
	
	#mainContent {
	width: 320px;
	width: 20em;
}
	
/* KEEP IT */
.oneColElsCtrHdr #container {
	width: 320px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
	width: 20em;
	margin: 0; /* 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: none;
	margin: 0;
}

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

/* KEEP IT */
#header img#school {
	float: none;
	position: relative;
	left: 0;
	margin: 0;
	padding: 0;
	background: none;
	height: 4.688em;
}

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

/* KEEP IT */
#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: 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 */
	height: 0;
	padding: 0;
}

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

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

/* KEEP IT */
#header ul li {
	margin: 0;
	list-style-type: none;
	background-color: #EC1C24;
	border-bottom: .1em #FFF solid;
	width: 17.75em;
}

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

/* KEEP IT */
#header a {
	color:#FFF;
	text-decoration: none;
	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 */
}

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

/* KEEP IT */
#apps {
	clear: both;
	margin: 0;
	padding: 0;
	padding-top: .3em;
	width: 20em;
	text-align: center;
	background-color:#FFF;
	min-height: 50em;
}

/* KEEP IT */
#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: 320px;
	width: 20em;
	margin-top: 1em;
	width: 100%;
	height: auto;
}

/* KEEP IT */
#apps a .buy, #apps a .buy_yellow {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
	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: auto;
	display: inline-block;
	height: auto;
	background: none;
}

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

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

#apps img.noborder {
	margin: 0;
	padding: 0;
	margin: .3em .9em;
	/* float: left; */
	border: none;
	width: 90%;
}

/* ============ 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: 20em;
	margin: 0;
}

#footer p {
	padding: 0;
}

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

/* html {overflow: hidden;}*/
	
}