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

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

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

#header img#school {
	float: left;
	position: relative;
	left: 48px;
	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;
}

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

#nav_wrap {
	margin: 0;
	height: 65px; /* 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 */
	overflow: visible;
	/* control the bicycle position in the js file */
}

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

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

}

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

#header ul {
	text-align: center;
	margin: 0;
	/* padding: 0 110px 0 0; */
	padding: 0 25px 0 0; /* this change made to fit new Apps link on top nav */
}

#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 1.2em;
	line-height: 2em;
	margin: 0 10px;
	line-height: 36px;
	font-variant: small-caps;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .5px;
}

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

#header a:hover {
	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);
}

#mainContent {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	color: #EC1C24;
	background: #FFF;
	background: #FFF top left url(../graphics/columns_bg.gif) repeat-y;
	/* border: 1px solid #FFF0AA; */
	overflow: hidden;
}

#mainContent p {
	text-align: left;
	font-size: 14px;
	margin: 0;
	padding: 10px;
}

#mainContent #column1, #mainContent .column1b {
	float: left;
	width: 216px;
	padding-right: 584px;
	min-height: 100%;
}

#mainContent #column2, #mainContent .column2b {
	float: right;
	width: 582px;
	width: 587px;
	height: 100%;
	min-height: 100%;
	margin: 0;
	/* margin-top: 35px; */
	margin-left: -583px;
	margin-left: -588px;
	padding: 0;
	background: top left url(../graphics/column_top.gif) no-repeat;
}

#column1 .servicelist {
	margin: 0;
	margin-top: 35px;
	padding: 0;
	padding-bottom: 25px;
	border-right: 2px solid #EC1C24;
	/* background-color: #eee; */
	font-family: Lubalin Graph, Times New Roman, Times, serif;
	font-weight: bold;
	text-align: left;
}

#column1 .servicelist ul.serviceheading {
	margin: 0;
	margin-top: 20px;
	margin-left: 40px;
	padding: 0;
	font-size: 16px;
}

#column1 .servicelist ul.serviceheading li {
	margin: 0;
	padding: 0;
	list-style-type: square;
	list-style-image: url(../graphics/bullet2.gif);
}

#column1 .servicelist ul.serviceheading ul.sideservices {
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
	font-size: 14px;
}

#column1 .servicelist ul.serviceheading ul.sideservices li.nobullet {
	margin: 0;
	margin: 5px;
	padding: 0;
	list-style: none;
	list-style-image: none;
	color: #00ABBD;
	font-weight: normal;
}

#column1 .servicelist ul.serviceheading ul.sideservices li.nobullet a {
	color: #00ABBD;
	text-decoration: none;
}

#column1 .servicelist ul.serviceheading ul.sideservices li.nobullet a:hover {
	color: #EC1C24;
	text-decoration: underline;
}

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

#column2 .column_top {
	padding-top: 35px;
}

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

#column2 .quote1 {
	margin: 0;
	margin-top: 35px;
	margin-left: 75px;
	padding: 0;
}

#column2 .quote2 {
	margin: 0;
	margin-left: 25px;
	padding: 0;
}

#column2 .quote3 {
	margin: 0;
	margin-left: 110px;
	padding: 0;
}

#column2 .quote4, .after_gallery .quote4 {
	margin: 0;
	padding: 0;
	margin-left: 200px; /* remove this line if returning to old quotes positioning */
	/* float: right;    for old quotes positioning
	position: relative; for old quotes positioning
	right: 10px; 		for old quotes positioning     */	
}

#column2 .quote1, #column2 .quote2, #column2 .quote3, #column2 .quote4, .after_gallery .quote4 {
	background: top left url(../graphics/quotemarks1.gif) no-repeat;
	/* margin-bottom: 33px;  for old quotes positioning */
	margin-bottom: 10px;
}

#column2 ul.quote, .after_gallery ul.quote {
	margin: 0;
	padding: 0;
	padding: 10px 15px;
	color: #00ABBD;
	text-align: left;
	font-family: Times New Roman, Times, serif;
	font-style: italic;
}

#column2 ul.quote li, .after_gallery ul.quote li {
	font-size: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#column2 ul.quote li.first, .after_gallery ul.quote li.first {
	font-size: 13px;
}

#column2 ul.quote li.second, .after_gallery ul.quote li.second {
	font-size: 15px;
	margin-left: 35px;
}

#column2 ul.quote li.third, .after_gallery ul.quote li.third {
	font-size: 17px;
	margin-left: 15px;
}

#column2 ul.quote li.fourth, .after_gallery ul.quote li.fourth {
	padding: 10px 15px 10px 0;
	font-size: 19px;
	margin-left: 70px;
	background: top right url(../graphics/quotemarks2.gif) no-repeat;
	background-repeat: no-repeat;
	display: inline;
}

#column2 ul.quote a, .after_gallery ul.quote a {
	color: #00ABBD;
	text-decoration: none;
}

#column2 ul.quote a:hover, .after_gallery ul.quote a:hover {
	color: #00ABBD;
	text-decoration: underline;
}

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

#column2 img#spacer { /* only for a spacing test */
	margin: 0;
	padding: 0;
	float: left;
	padding: 15px 15px 15px 0;
	background-color: gray;
	border: none;
	position: relative;
	top: 426px;
	overflow: auto;
	/* background-color: gray; */
}

#mainContent h1 {
	margin: 0;
	font-family: Lubalin Graph, Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 22px;
	color: #EC1C24;
	text-align: center;
	padding: 0 20px 0 25px;
	margin-bottom: 20px;	
}

#column2 p {
	font-size: 14px;
	line-height: 24px;
	color: #00ABBD;
	color: #000;
	text-align: left;
	padding: 0 20px 0 25px;
	margin-bottom: 10px;
	text-indent: 20px;
}

#column2 img {
	float: right;
	margin: 20px;
	padding: 7px;
	border: 2px solid #EC1C24;
	background-color: #FFF0AA;
}

#column2 img.top {
	float: right;
	margin: 0 20px 20px 20px;
	padding: 7px;
	border: 2px solid #EC1C24;
	background-color: #FFF0AA;
}

#column2 img.noborder_top {
	float: right;
	margin: 0 20px 20px 20px;
	border: none;
	background: none;
}

#column2 img.noborder {
	float: right;
	margin: 20px;
	border: none;
	background: none;
}

#column2 a {
	color: #00ABBD;
}

#column2 a:hover {
	color: #EC1C24;
	text-decoration: underline;
}

#column2 ul {
	font-size: 14px;
	text-align: left;
	padding: 0 20px 0 25px;
	margin-bottom: 10px;
	margin-left: 40px;
	list-style-type: square;
}

#column2 ul li {
	font-size: 14px;
	text-align: left;
	list-style-type: square;
}

#column2 .bottom {
	padding-bottom: 10px;
}

#mainContent .nobullet li {
	list-style-type: none;
}

#mainContent .indent1 {
	text-indent: 37px;
}

/* =============== for content to the side of the bottom gallery ============ */
.after_gallery {
	clear: right;
	float: left;
	width: 410px;
/*	height: 204px; */
}

.after_gallery a {
	color: #00ABBD;
}

.after_gallery a:hover {
	color: #EC1C24;
	text-decoration: underline;
}

.after_gallery2 {
	clear: right;
	float: left;
	width: 410px;
}


/* =============== end content to the side of the bottom gallery ============ */

/* =============== 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;
}
/* =============== end - none of the other known non-markup fixes would work in this situation ============ */

.after_gallery3 {
	clear: both;
	float: right;
	width: 582px;
	width: 587px;
	height: 100%;
	min-height: 100%;
	margin: 0;
	/* margin-top: 35px; */
	margin-left: -583px;
	margin-left: -588px;
	padding: 0;
}

#mainContent .column1b {
	clear: both;
	height: 100%;
}

#mainContent .column2b {
	background: none;
}


/* =============== testimonials on the About page ============ */
#mainContent ul.fullquote {
	margin: 0;
	margin-bottom: 25px;
	padding: 0;
	padding: 0 20px 0 25px;
	color: #00ABBD;
	text-align: left;
	font-family: Times New Roman, Times, serif;
	font-style: italic;
	font-size: 14.5px;
}

#mainContent .after_gallery2 ul.fullquote {
	padding-left: 15px;
}

#mainContent ul.fullquote li {
	margin: 0;
	padding: 0;
	color: #00ABBD;
	text-align: left;
	font-family: Times New Roman, Times, serif;
	font-style: italic;
	font-size: 14.5px;
	line-height: 19px;
	list-style-type: none;
	margin-bottom: 10px;
}

#mainContent ul.fullquote li.quoter, #mainContent ul.fullquote li.title, #mainContent ul.fullquote li.company {
	margin: 0;
	padding: 0;
	font-style: normal;
}

#mainContent ul.fullquote li.quoter, #mainContent ul.fullquote li.company {
	font-weight: bold;
}
/* =============== end testimonials on the About page ============ */

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

#mainContent .rotator {
	clear: left;
	clear: both;
	float: left;
	width: 209px;
	height: 287px;
	margin: 0 10px 5px 65px;
	margin: 0 10px 0px 65px;
	background: #CCC;
	background: #FC6;
	border: 2px #EC1C24 solid;
	color: #000;
	overflow: hidden;
}

#mainContent .rotator p:first-letter {
	font-size: 20px;
}

#mainContent .rotator img {
	float: right;
	margin: 10px;	
}

#mainContent .rotator img.border {
	border: 2px #FFF solid;	
}

#mainContent .rotator img.border2 {
	border: 2px #999 solid;	
}

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

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

.antispam2 {
	display: none;
}

#mainContent span {
	font-weight: bold;
}

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

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

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


#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 */
	font-size: 12px;
	font-variant: small-caps;
	letter-spacing: .5px;
	text-align: center;
	color: #EC1C24;
}

p#dvd {
	font: 10px 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;
	background: none;
	background-color: #FFF;
}

#column1, .rotator {
	display: none;	
}

#mainContent #column1, #mainContent .column1b, .after_gallery2 {
	width: 30em;
	padding: 0;
	margin: 0;
}

#mainContent #column2, #mainContent .column2b {
	width: 30em;
}

.after_gallery2, .column2b {
	display: none;	
}

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

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

#mainContent #column1, #mainContent .column1b, .after_gallery2 {
	width: 20em;
	padding: 0;
	margin: 0;
}

#mainContent #column2, #mainContent .column2b {
	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 */
}

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

}