/*  These styles are the defaults for both the dwt templates and the editable content  */

body {font-family: Helvetica, Arial, sans-serif ; color: rgb(0,0,0); background-color: #FFFFF0; font-size: large; line-height:140% }

p { margin-bottom:2em }

h1 {font-size: xx-large; color: rgb(102,102,51); font-weight: normal; font-style: normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:120%}
h2 {font-size: x-large; color: rgb(51,0,153); font-weight: normal; font-style: normal }
h3 {font-size: 16pt; color: rgb(102,102,51); font-weight: normal; font-style: normal }
h4 {font-size: medium; color: rgb(51,0,153); font-weight: normal; font-style: normal }
h5 {font-size: small; color: rgb(102,102,51); font-weight: normal; font-style: normal }
h6 {font-size: x-small; color: rgb(51,0,153);}

img { border:0 }

hr { color: rgb(102,102,51); }

a:link {color: rgb(204,102,51);}
a:visited {color: rgb(102,51,153);}
a:active {color: rgb(153,153,0);}

li { padding-left: 5px;padding-bottom:15px }
ul {list-style-image: url('images/kidzonebullet1a.gif');}
ul ul {list-style-image: url('images/kidzonebullet2a.gif');}
ul ul ul {list-style-image: url('images/kidzonebullet3a.gif');}


/*  These styles are for the dwt templates  */
/*  Remember . indicates a CLASS which can be used multiple times on a page  
	   while # indicates an ID which should only be used once per page  */

div#container { width:100%; margin:0 auto; }
article#mainContent { background-color: #FFFFF0; float:left; width:72%; padding-top:20px; padding-bottom:40px; padding-left: 1%; padding-right:1%; }

div#pageTemplateTop { background-color:#FFFFCC; width:100%; margin:0 auto; }
footer#pageTemplateBottom { background-color:#FFFFCC; width:100%; margin:0 auto; }

nav#leftSideBar { float:left; width:10%; display:inline; overflow:hidden; text-align:left; padding-left:5px; background-color: #FFFFCC; height:1800px; line-height:100%; font-size:small }
nav#rightSideBar { float:left; width:14%; display:inline; overflow:hidden; text-align:right; padding-left:10px; background-color: #FFFFCC;  height:1800px; line-height:100%; font-size:small }

.button { float:left; width:20%; height:100px; text-align:center; overflow:hidden;  }
div#advertisingBanner { float:left; width:59%; height:100px; text-align:center; padding-top:0px }
nav.siteNav { float:left; width:14%; height:40px; background-color:#FFFFCC; text-align:center; overflow:hidden; font-size:medium; padding-top:10px }
div#search { float:left; width:37%; height:50px; text-align:center; background-color:#FFFFCC;  }
nav#socialMedia {float:left; width:20%; height:45px; background-color:#FFFFCC; text-align:center; overflow:hidde; padding-top:5px; }

nav.footerContainer { width:80%; margin:auto; font-size:medium; text-align:center }
nav.footerThree { float:left; width:32%; padding: 5px 0 5px 0; background-color: #FFFFCC; border:1px; border-style: solid; border-color: #333300; text-align:center; margin-bottom: 25px }
nav.footerFive { float:left; width:16%; padding: 5px 0 5px 0; background-color: #FFFFCC; border:1px; border-style: solid; border-color: #333300; text-align:center; margin-bottom: 25px }

/*  These styles are for the editable content  */
/*  Remember . indicates a CLASS which can be used multiple times on a page  
	   while # indicates an ID which should only be used once per page  */

nav#pageNav { padding: 15px 0 15px 0; margin: 0; font-size: small; width: 100%; background-color: #FFFFCC; line-height:100% }   /*  Navigation ID - top of page in yellow-ish box  */

nav.otherNav { background-color: #ddeeff; width: 100%; padding: 15px 0 15px 0; margin-top: 70px; font-size: medium; line-height:100%; text-align:center }  /*  Navigation CLASS - centered - I usually use at the bottom of page  */

header#mainHeader { font-size: large; margin-bottom:10px }
#author { font-size: small; margin-bottom:30px; font-style:italic } 

img.activityImageRight { float: right; margin: 10px 0 40px 20px; vertical-align: text-top; text-align:center; }
img.activityImageLeft { float: left; margin: 0 20px 5px 0; vertical-align: text-top; text-align:center; }

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

.printVersionLink { background-color: #eeddff; }

.indexSection { background-color: #DDDDDD; font-weight: bold;}

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

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

div.columnsTwoWithBorder { float: left; padding: 1%; margin: 1%; width: 45%; border-style:solid; border-color:rgb(102,102,51) }
div.columnsTwoNoBorder { float: left; padding: 1%; margin:1%; width: 45% }
div.columnsThreeNoBorder { float: left; padding: 1%; margin: 1%; width: 29% }
div.columnsFourNoBorder { float: left; padding: 1%; margin:1%; width: 20%; }
div.columnsFour { float: left; padding: 5px; margin:5px; width: 220px; min-height: 310px; border-style: solid; border-color:rgb(102,102,51); text-align:center }