@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: #339900;
}

.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;
}

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

#mainContent {
	width: 800px;
	width: 50em;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	color: #EC1C24;
	background: #FFF;
	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.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 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 a {text-decoration: none;}

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


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

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

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

#apps h3.apps_top {
	text-align: center;
	font-size: 22px;
	font-size: 1.375em;
	line-height: 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 {
	color:  #000;
}

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

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

#apps .app_text, #apps .app_text_blue, #apps .app_text_green, #apps .app_text_yellow, #apps .app_text_orange, #apps .app_text_red {
	margin: 0;
	padding: 0;
	margin: 1em;
	padding-bottom: 1em;
	clear: both;
	/*border-bottom: double .3em #EC1C24;*/
	overflow: hidden;
}
/*
#apps .app_text_blue { border-bottom: double .3em #3366FF;}

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

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

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

#apps .app_text_red { border-bottom: double .3em #EC1C24;}
*/
#apps a .buy {
	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 .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 {
	color:  #000;
	background: top center url(../graphics/titleBarYellow.png) no-repeat;
}

#apps .app_text_yellow 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 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 a:hover img {
	opacity: .8;
}

/* disclosure page additions ================================ */

#apps .app_text_yellow {
	margin: 16px 0 0 0;
	margin: 1em 0 0 0;
}

#apps img.wide {
	margin: 0;
	padding: 0;
	border: none;
}

#disclosure {
	/*height: 160px;
	height: 10em;
	background: top center url(../graphics/AppPrivacyDisclosure2.png) no-repeat;*/
}

#apps li {
	margin: 0;
	padding: 0;
	text-align: left;
	color: #000;
	line-height: 20px;
	line-height: 1.25em;
	margin-bottom: 10px;
	margin-bottom: .625em;
}

#apps ul {
	padding: 0;
	margin: 0;
	padding: 10px 10px 10px 40px;
	padding: .625em .625em .625em 2.5em;
}

#apps ul.disc {
	padding: 0;
	margin: 0;
}

#apps ul.disc li {
	float: left;
	display: inline;
	margin: 0;
	margin-top: 88px;
	margin-top: 4.889em;
	margin-left: 9px;
	margin-left: .5em;
	padding: 0;
	width: 148px;
	width: 8.222em;
	color: #FFF;
	font-size: 18px;
	font-size: 1.125em;
	line-height: 19px;
	line-height: 1.056em;
}

#apps ul.disc li.disc1 {
	margin-left: 11px;
	margin-left: .611em;
}

#apps ul.disc li.disc2 {
	margin-left: 9px;
	margin-left: .5em;
}

#apps ul.disc li.disc3 {
	margin-left: 10px;
	margin-left: .556em;
}

#apps ul.disc li.disc4 {
	margin-left: 10px;
	margin-left: .556em;
}

#apps ul.disc li.disc5 {
	margin-left: 9px;
	margin-left: .5em;
}

#apps p {
	margin:0;
	padding: 0 10px;
	padding: 0 .625em;
}

#apps p.text_small {
	padding: 0 10px;
	padding: 0 1em;
	font-size: 10px;
	font-size: .625em;
	line-height: 14px;
	line-height: 1.4em;	
}

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

/* ============ email styles ======= */

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


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

#socialMedia {
	width: 300px;
	width: 18.750em;
}

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

/* 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;
	line-height: 2.75em;
	border-bottom: .2em #FFF solid;
}
/* end smaller bar for 2 side by side */

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

#apps img {
	width: 29em;
}

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

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

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

/* 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 */


#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 {
	width: 127px;
	float: right;
}

#apps img {
	width: 19em;
}

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

}