/*General design settings  */

body      { background-color: #FFFFFF; color: #000000; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size:medium; line-height:140%; }
h1  	    { font-size: xx-large; font-weight: normal; font-style: normal; line-height: 120%; }
h2          { font-size: x-large; font-weight: normal; font-style: normal; line-height:200% }
h3          { font-size: large; font-weight: normal; font-style: normal }
h4          { font-size: medium; font-weight: normal; font-style: normal }
h5          { font-size: small; font-weight: normal; font-style: normal }
h6          { font-size: x-small; font-weight: normal; font-style: normal }
sup   { font-size:small }
table     { border:none; width:100%; margin:0; padding:0 }
td        {
	margin: 0;
	padding: 3px;
	border: 1;
	vertical-align: top
}
td.header {
	padding: 5px;
	text-align: center;
	font-weight: normal;
	font-size: large;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	background-color: #F7F7F7;
}
a:link    { color: #000080; }
a:active  { color: #FF0000; }
a:visited { color: #0000FF; }
a:hover   { color: #4285F4; }
img { max-width: 100%; }
hr  { size:1px; color:#EA4335; margin-left:100px; margin-right:100px; border-color:#EA4335; border-style:solid; border-width:small; }



/*  These styles are for the dwt templates  */

div#container { background-color: #FFFFFF; width:100%; margin: auto; padding:0}
article#content { background-color: #FFFFFF; float:left; width:70%; padding:0 1% 0 4%; margin: auto; min-height:1500px }
article#contentLarge { background-color: #FFFFFF; float: left; width: 73%; margin: auto; min-height: 1500px;}

.topBottomBorder { background-color: #F7F7F7; width:100%; line-height:110%; text-align:center }
div.leftSideBar { background-color: #FFFFFF; float:left; width:1px; overflow:hidden; text-align:left; margin:auto; min-height: 1500px;}
div.rightSideBar{ float:right; width:23%; overflow:hidden; text-align:center; line-height:140%;}
div.adBanner    { background-color:#FFFFFF; float:left; width:100%; text-align:center; padding:10px; margin-bottom:10px }
div#searchBox   { float:left; height:40px; text-align:center; vertical-align:text-top; width:300px; padding:2px 0 2px 0 }
div#homeText    { float:left; padding:10px; width:300px; text-align:left; font-size: large; }
div.topButtons  { float:left; width:150px; text-align:center; overflow:hidden; padding-top:10px }
div#socialMedia { float:right; padding-right: 10px; padding-bottom:2px }
div#bottomnav { float:left; }
nav.navigation  { clear:both; padding:0; margin:auto; text-align:left; overflow:hidden; }
nav.smallScreen { float:left; padding:10px; width:100px; height:50px; text-align:left; border: 1px solid #C0C0C0; display:none; }
div.adSmallScreen { background-color:#FFFFFF; width:100%; text-align:center; display:none }


/*  These class definitions are for the body (content)  */

h1.activities  { font-size:large; text-align:center }

header#mainHeader { margin-bottom: 2px }
h3#materials   { padding-top: 20px }
ul.materialsList  { padding-bottom:20px }
ul.materialsList li { padding-bottom:5px }

.pageTitleShrink { font-size: medium; font-family: Helvetica, Arial, sans-serif}

.indexHighlight { clear:both; background-color: #F7F7F7; font-size: large }

.indexImage  { 	float:left; text-align:center; margin: 0 20px 0 20px; min-width:200px; max-width:300px; min-height:100px; vertical-align:middle }
.indexText  { 	float:left; margin:0; min-width:150px; max-width:550px; min-height:100px; vertical-align:middle }

div#indexLeft { clear:both; width: 36%; margin:2%; float:left; background-color:white; padding:1% }
div#indexRight { width: 55%; background-color:#f0f0f0; float:left; padding:1% }

.textXLarge { font-size: x-large; }
.textLarge { font-size: large; }
.textMedium { font-size: medium; }
.textSmall { font-size: small; }

.indentLarge   { margin-left: 80px }
.indentSmall   { margin-left: 40px }

.floatStop { clear:both; margin: 10px 0 10px 0; }
.floatRight { float: right; margin: 0 7px 20px 20px; vertical-align: text-top; }
.floatLeft { float: left; margin: 0 20px 5px 0; vertical-align: text-top; text-align:center; }

div.columnsTwo { float: left; padding: 2%; margin: 0 2% 1% 0; width: 43%; border-radius: 8px; border: 1px solid gray; font-size: large; }
div.columnsTwoB {
	float: left;
	padding: 2%;
	margin: 0 2% 1% 0;
	width: 43%;
	border-radius: 8px;
	border: 1px solid gray;
}
div.columnsThree { float: left; text-align: center; padding: 2%; margin: 1%; width: 25%; border-radius: 8px; border: 1px solid gray; }
div.columnsFour { float: left; text-align: center; padding: 5px; margin: 10px; width: 200px; min-height: 255px; font-size: medium;
border-radius: 8px; border: 1px solid gray }
div.columnsFourNoBorder { float: left; text-align: center; padding: 5px; margin: 10px; width: 200px; min-height: 240px; font-size: medium; border-radius: 8px; border: 1px solid white }
div.columnsFourTall { float: left; text-align:center; padding:5px; margin:10px; width: 200px; min-height:280px; font-size: medium; border-radius: 8px; border: 1px solid gray }
div.columnsFourTall img { border: 1px solid gray; }
div.columnsTwoNoBorder { float: left; padding: 2%; margin: 0 2% 1% 0; width: 43% }
div.columnsThreeNoBorder { float: left; text-align: center; padding: 2%; margin: 1%; width: 25%; }


div.galleryPage {
	float: left;
	text-align: center;
	padding: 5px;
	margin: 8px;
	width: 200px;
	min-height: 255px;
	font-size: medium;
	border-radius: 8px;
	border: 1px solid gray
}
div.galleryPage a   {
	font-size: medium;
	border-radius: 8px;
}
div.galleryPage img { border: 1px solid gray; }
div.topNav { padding: 15px 0 0 0; margin: 0; font-family: Segoe, "Segoe UI", Verdana, "sans-serif"; font-size: medium; width: 100%; }
div.addthis_inline_share_toolbox { margin: 0; }
div.addthis_relatedposts_inline_jd6d { margin: 0; }


div#grayLink  { text-align:center; margin:auto; width:85%; background-color:#F7F7F7; padding:5px; font-size:medium; border-radius: 4px } 
div#whiteLink  { text-align:center; margin:auto; width:85%; background-color:#F7F7F7; padding:5px; font-size:medium; border-radius: 4px }


/*  Prevents certain areas of the webpage from printing out  */


@media print {
	.no-print {display:none}
	div.topBottomBorder {display:none}
	div.columnsTwo {display:none}
	div.leftSideBar {display:none}
	div.rightSideBar {display:none}
	div.topNav {display:none}
	div.addthis_inline_share_toolbox {display:none}
	div.addthis_inline_share_toolbox_ynrb {display:none}
	div.addthis_relatedposts_inline_jd6d {display:none}
	nav.navigation {display:none}
	article#content { width:100% }
	article#contentLarge { width:100% }
	nav.smallScreen { display:none }
	article#content { width:98%; min-height:100px; }
	article#contentLarge { width:98%; min-height:100px }
}