@charset "UTF-8";

@import url(//fonts.googleapis.com/css?family=Monda);

/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width:100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Global */
html {min-width:320px}
body {background:url(../images/bg_gray.jpg) top repeat-x #b8b8b8;}
article {font:.8em Arial, Helvetica, sans-serif; line-height:1.25em; color:#000}
p {padding:1.5% 1%; width:98%; height:auto; float:left}
footer {width:100%; height:auto; float:left; text-align:center; font:.85em Verdana, Geneva, sans-serif; color:#000; padding:3% 0}
table {float:left}

a:link {text-decoration:none; color:#0066cc}
a:visited {text-decoration:none; color:#003366}
a:active {text-decoration:none; color:#003366}
a:hover {text-decoration:underline; color:#006699}

.leftNav {width:25%; height:auto; float:left; text-align:left; padding:0 5% 0 0}
.mainContent {width:70%; height:auto; float:right; text-align:left; padding:0 2.5% 3% 0}
.mainContent ul li {width:100%; height:auto; float:left}
.mainContent ol li {width:100%; height:auto; float:left}
.breadcrumb {width:100%; height:auto; margin:1% 0; float:left; font:.8em Verdana, Geneva, sans-serif; color:#333; text-align:left}
ul {list-style-position:inside; } 
ol {list-style-position:inside; } 
li {display:list-item; list-style-position:outside; }
.list ul li {list-style-position:inside; width:100%; height:auto; float:left; line-height:1.5em}


h2 {font:1.75em 'Monda', sans-serif; color:#000; line-height:1.5em; text-align:left; width:100%; height:auto; float:left}
.prgmPortalWrapper {width:100%; height:auto; float:left}
.prgmPortalCol1 {width:30%; height:270px; max-height:270px; float:left; margin:1% 1.6% 1% 1.5%; border:1px solid #ccc}
.prgmPortalCol2 {width:30%; height:270px; max-height:270px; float:left; margin:1% 1.2% 1% 1.6%; border:1px solid #ccc}
.prgmPortalCol3 {width:30%; height:270px; max-height:270px; float:right; margin:1% 1.5% 1% 1.3%; border:1px solid #ccc}
.portalHdr {font:1.125em Arial, Helvetica, sans-serif; line-height:1.25em; font-weight:bold; color:#333; text-align:center; padding:2% 0}
.portalIcon {text-align:center; padding:.5% 0}
.portalDesc {font:.875em Arial, Helvetica, sans-serif; line-height:1.35em; color:#666; padding:2% 5%; text-align:left}

.findnraWrapper {width:100%; height:auto; float:left; background-color:#333; margin:1% 0}
.findnra {width:45%; height:auto; float:left; padding:1% 0 1% 5%; text-align:right}
.indexprgms {width:50%; height:auto; float:right; text-align:right}

.footerL {width:40%; height:auto; float:left; text-align:left}
.footerR {width:60%; height:auto; float:right; text-align:right}

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}
#TopLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	padding:2% 0;
}
#TopNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#fff;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

@media all and (max-width: 480px) {
.prgmPortalCol1 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
.prgmPortalCol2 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
.prgmPortalCol3 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
#footer {clear:both; float:left; margin-left:0; width:100%; display:block;}
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media all and (min-width: 768px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#TopLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	padding:2% 0;
}
#TopNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#fff;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}

@media all and (max-width: 768px) {
.prgmPortalCol1 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
.prgmPortalCol2 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
.prgmPortalCol3 {width:97%; height:auto; float:left; margin:1%; border:1px solid #ccc}
.findnra {width:100%; height:auto; float:left; padding:1% 0; text-align:center}
.indexprgms {width:100%; height:auto; float:left; text-align:center}
.footerL {width:100%; height:auto; float:left; text-align:center}
.footerR {width:100%; height:auto; float:left; text-align:center}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media all and (min-width: 769px) {
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#TopLogo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	padding:2% 0;
}
#TopNav {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Content {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color:#fff;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}
	
/* Imported and Revised Classes */
.required {color:#F30; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; text-align:right; line-height:12pt}
.formTitle {width:98%; height:auto; float:left; font-weight:bold; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; line-height:16pt; color:#333; border-bottom:1px solid #ccc; padding:1%; margin:0 0 1% 0}
.schoolFormWrapper {width:100%; height:auto; float:left; margin:1px 0; font:12px Arial, Arial, Helvetica, sans-serif; line-height:12pt}
.schoolFormL {width:23%; height:auto; float:left; text-align:right; padding:1%; font:12px Arial, Arial, Helvetica, sans-serif; line-height:1em; color:#333; margin:.5% 0 0 0}
.schoolFormR {width:73%; height:auto; float:right; text-align:left; padding:1%; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; line-height:14pt}
.schoolFormR input {width:50%; height:auto; float:left; border:1px solid #ccc; background-color:#fff; padding:1%}
.formText textarea {width:98%; height:auto; float:left; border:1px solid #ccc; background-color:#fff; padding:1%}
.formText {width:98%; height:auto; float:left; padding:.5% 1%; font:12px Arial, Helvetica, sans-serif; line-height:12pt}
.formBtn {width:98%; height:auto; float:left; text-align:right; padding:1%; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; line-height:12pt}


/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */