/* General styles */

* { 
margin: 0; 
padding: 0; 
}

body {
margin: 10px auto;
background-color: #ffffee;
color: #4a1e00;
line-height: 130%;
font-family: arial, verdana, sans-serif;
}

td {
vertical-align: top;	
}


p {
padding:  .5em 0 .5em 0 ;	
}

.brn {
color: #663300;	
}

.purp {
color: #660066;	
}

.blue {
color: #000080;	
}

.dkred {
color: #990000;	
}

.dkbrn {
color: #330000;	
}

.dkbrninset{
color: #330000;
padding: .5em .9em .5em .9em;
}

.ltred {
color: #cc0033;	
}

.grn {
color: #005500;	
}

.dark {
color: #590a18;	
font-size: 90%;
}	

.italic {
font-style: italic;	
}

.alignrt {
text-align: right;	
}

.tiny {
color: #000080; 
font-size: 80%;	
}

.dot ul {
list-style: disc inside;

}

.dot li {
padding: 0 0 0 1.5em;	
margin: 0 0 0 1.5em;
}

.floatright
{
float: right;
margin: 0 0 1em 1em;
}


.cutter {
background-image: url("../images/cutter.gif");
background-repeat: repeat-x;	
}
	
    /* Header styles */
#header {
border-top: 10px solid #590a18;
clear:both;
float:left;
width:100%;
background-color: #000080;
color: #000080;
border-bottom: 1px solid #000080;
border-bottom: 10px solid #590a18;
text-align: bottom;
     /*   overflow: auto;       check this */
}

#znsheader1 {
border-top: 10px solid #336600;
clear:both;
float:left;
width:100%;
background-color: #ffcc33;
color: #cc0000;
border-bottom: 6px solid #336600;
text-align: bottom;
     /*   overflow: auto;       check this */
}

#znsheader2 {
border-top: 4px solid #660066;
clear:both;
float:left;
width:100%;
background-color: #cc0000;
color: #cc0000;
border-bottom: 6px solid #660066;
text-align: bottom;
     /*   overflow: auto;       check this */
}

#header h1, #header a {

background-image: url("../images/chalice23.jpg");
background-repeat: no-repeat;
height: 165px;
color: #000080;
font-size: 0px !important;
text-align: right;
float: left;
width: 900px !important;
clear: both;
}

#znsheader2 h1, #znsheader2 a {

background-image: url("../zns/images/happykids4.bmp");
background-repeat: no-repeat;
height: 180px;
color: #cc0000;
font-size: 0px !important;
text-align: right;
float: left;
width: 900px !important;
clear: both;
}

#header p	{
clear: both;
	}

#znsheader2 p	{
clear: both;
	}
	
#header .slogan {
margin: 0px;
padding: 0 1em 0 0;
text-align: right;
color: #ffffff;
font-size: 100%;
font-family: arial, verdana, sans-serif;
}
	
#znsheader2 .slogan {
margin: 0px;
padding: 0 1em 0 0;
text-align: right;
color: #ffffff;
font-size: 100%;
font-family: arial, verdana, sans-serif;
}

	
	/* column container */

	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	
	.znscolmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	
	/* common column settings */
	.colright,
	.colmid,
	.colleft, 
	.znscolright,
	.znscolmid,
	.znscolleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}
	
	.col1,
	.col2,
	.col3, 
	.znscol1,
	.znscol2,
	.znscol3 {
		float:left;
		position:relative;
		padding:1em 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	
	.threecol {
		background:#cbb99d;		/* right column background colour */
	}
	
	.znsthreecol {
		background:#ffcc33;		/* right column background colour */
	}
	
	.threecol .colmid {
		right:20%;			/* width of the right column */
		background:#ffffff;		/* center column background colour */
	}
	
	.znsthreecol .znscolmid {
		right:20%;			/* width of the right column */
		background:#ffffff;		/* center column background colour */
	}

	
	.threecol .colleft {
		right:60%;			/* width of the middle column */
		background:#cbb99d;	/* left column background colour */
	}
	
	.znsthreecol .znscolleft {
		right:60%;			/* width of the middle column */
		background:#ffcc33;	/* left column background colour */
	}
	
	.threecol .col1 {
		width:56%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
        font-size: 90%;
        font-family: arial, verdana, sans-serif;
    }

	.znsthreecol .znscol1 {
		width:56%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
        font-size: 90%;
        font-family: "Comic Sans MS", arial, verdana, sans-serif;
    }

.threecol .col1 a
{
color: #000080;
}


.znsthreecol .znscol1 a
{
color: #000080;
}
.threecol .col1 a:hover
{
color: #095eb3;
}

.znsthreecol .znscol1 a:hover
{
color: #095eb3;
}

.threecol .col1 ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

.znsthreecol .znscol1 ul
{
list-style-type: none;
padding: 0;
margin: 0;
}


	.threecol .col2 {
		width:16%;			/* Width of left column content (column width minus padding on either side) */
		left:26%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}

	.znsthreecol .znscol2 {
		width:16%;			/* Width of left column content (column width minus padding on either side) */
		left:26%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	
	.threecol .col3 {
		width:16%;			/* Width of right column content (column width minus padding on either side) */
		left:90%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */

     }

	
	.znsthreecol .znscol3 {
		width:16%;			/* Width of right column content (column width minus padding on either side) */
		left:90%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */

     }


	/* subcolumn containers for center column*/
	
	.znscolsubmask, 
	.znscolsubmaskx,
	.znscolsubmasky {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole center column */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	
	/* common subcolumn settings */
	
	.znscolsubright,
	.znscolsubmid,
	.znscolsubleft,
	.znscolsubrightx,
	.znscolsubmidx,
	.znscolsubleftx,
	.znscolsubrighty,
	.znscolsubmidy,
	.znscolsublefty {
		float:left;
		width:100%;			/* width of column  */
		position:relative;

	}
	
	.znscola,
	.znscolb,
    .znscolc,
  	.znscold,
	.znscole,
	.znscolf,
	.znscolg,
	.znscolh,
	.znscoli {
		float:left;
		position:relative;
		padding:0 0 0 0;	
		overflow:hidden;
	}
	
	
	.znsthreesubcol {
		background:#ffffcc;		/* right subcolumn background color */
	}
	
	.znsthreesubcolx {
		background:#99ffff;		/* right subcolumn background color 2nd set of center column subcolumns */
	}

	.znsthreesubcoly {
		background:#ccffcc;		/* right subcolumn background color 3rd set of center column subcolumns */
	}

	
	.znsthreesubcol .znscolsubmid {
		right:30%;			/* width of the right column */
		background:#ffcc66;		/* center subcolumn background color */
	}
	
	.znsthreesubcolx .znscolsubmidx {
		right:40%;			/* width of the right column */
		background:#ffff66;		/* center subcolumn background color 2nd set */
	}
	
	.znsthreesubcoly .znscolsubmidy {
		right:35%;			/* width of the right column */
		background:#ccccff;		/* center subcolumn background color 3rd set */
	}

	
	.znsthreesubcol .znscolsubleft {
		right:35%;			/* width of the middle column */
		background:#99ffcc;	/* left subcolumn background color */
	}

	.znsthreesubcolx .znscolsubleftx {
		right:35%;			/* width of the middle column */
		background:#99ff33;	/* left subcolumn background color 2nd set  */
	}
	
	.znsthreesubcoly .znscolsublefty {
		right:50%;			/* width of the middle column */
		background:#ffffcc;	/* left subcolumn background color 3rd set  */
	}

	.znsthreesubcol .znscola {
		width:31%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
        color: #660066;
    }

	.znsthreesubcol .znscolb {
		width:31%;			/* Width of left column content (column width minus padding on either side) */
		left:36%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
		color: #336600;
	}

	.znsthreesubcol .znscolc {
		width:26%;			/* Width of right column content (column width minus padding on either side) */
		left:75%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
        color: #336600;
     }

	.znsthreesubcolx .znscold {
		width:31%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
        color: #cc0000;
    }

	.znsthreesubcolx .znscole {
		width:21%;			/* Width of left column content (column width minus padding on either side) */
		left:46%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
		color: #330099;
	}

	.znsthreesubcolx .znscolf {
		width:36%;			/* Width of right column content (column width minus padding on either side) */
		left:85%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
        color: #660099;
     }

	.znsthreesubcoly .znscolg {
		width:46%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
        color: #660066;
    }

	.znsthreesubcoly .znscolh {
		width:11%;			/* Width of left column content (column width minus padding on either side) */
		left:41%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
		color: #336600;
	}

	.znsthreesubcoly .znscoli {
		width:31%;			/* Width of right column content (column width minus padding on either side) */
		left:95%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
        color: #996600;
     }

	
	/*    fix above this   */

#update {
    clear: both;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #590a18;
	font-size: 70%; 
	text-align: right;
    padding: 1em;
}
	
#menu 
{
width=100%
float: left;
display: block;
color: #ffffff;
background-color: #cbb99d;
font-size: 90%;
font-family: arial, verdana, sans-serif;
}

#znsmenu 
{
width=100%
float: left;
display: block;
color: #ffffff;
background-color: #ffcc33;
font-size: 90%;
font-family: arial, verdana, sans-serif;
}

#menu ul
{
margin: 0;
list-style-type: none;
}

#znsmenu ul
{
margin: 0;
list-style-type: none;
}


#menu li 
{ 
margin: 0 0 2% 0; 
}

#znsmenu li 
{ 
margin: 0 0 2% 0; 
}


#menu a 
{
display: block; 
color: #ffffff;
background-color: #000080;
width: 100%;
padding: 2% 2%;  
text-decoration: none;
}

#znsmenu a 
{
display: block; 
color: #ffffff;
background-color: #336600;
width: 100%;
padding: 2% 2%;  
text-decoration: none;
}


#menu a:hover
{
display: block;
background-color: #409eff;
color: #ffffff;
}

#znsmenu a:hover
{
display: block;
background-color: #339900;
color: #ffffff;
}


#active a
{
display: block;
color: #fff;
background-color: #590a18;
width: 100%;
padding: 2% 2%;
text-decoration: none;
}

#znsactive a
{
display: block;
color: #fff;
background-color: #660066;
width: 100%;
padding: 2% 2%;
text-decoration: none;
}

	
	
	/* Footer styles */
	
#footer1
{
clear: both;
float:left;
width: 100%;
margin: 0;
padding: 0;
color: #ffffff;
background-color: #000080;
border-top: 10px solid #590a18;
font-size: 14px;
font-family: arial, verdana, sans-serif;
text-align: right;
overflow: auto;
}

#znsfooter1
{
clear: both;
float:left;
width: 100%;
margin: 0;
padding: 0;
color: #ffffff;
background-color: #cc0000;
border-top: 6px solid #336600;
border-bottom: 2px solid #336600;
font-size: 14px;
font-family: arial, verdana, sans-serif;
text-align: right;
overflow: auto;
}


#footer1 p {
padding: 0 1em 0 0;	
}
#znsfooter1 p {
padding: 0 1em 0 0;	
}

#footer2
{
clear: both;
float:left;
width: 100%;
margin: 0;
padding: .5em 0 .5em .5em ;
color: #ffffff;
background-color: #590a18;
border-top: 1px;
font-size: 12px;
font-family: arial, verdana, sans-serif;
}

#znsfooter2
{
clear: both;
float:left;
width: 100%;
margin: 0;
padding: .5em 0 .5em .5em ;
color: #ffffff;
background-color: #660066;
border-top: 2px solid #ffcc33;
font-size: 12px;
font-family: arial, verdana, sans-serif;
border-bottom: 10px solid #336600;
}

#footer2 ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

#znsfooter2 ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

#footer2 li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}


#znsfooter2 li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

#footer2 a 
{
color: #ffffff;
}
#znsfooter2 a 
{
color: #ffffff;
}

#footer2 a:hover
{
color: #cbb99d;
}
#znsfooter2 a:hover
{
color: #cbb99d;
}