html { margin: 0px; padding: 0px; }

body {
	margin: 0px; padding: 0px;
	/* text-align: center; */
}

img { border: 0px; }

.clear { clear: both; }

/*************** fonts *****************/
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .8em;
}

#footer {
    font-size: 85%;
}


/*************** layout ***************************/
#body2col{
    max-width: 99%;
    /* background: url('/images/columns2.gif') repeat-y; */
}

#body3col {
    width: 950px;
    background: url('/images/columns3.gif') repeat-y;
}

#body2 {
    min-height: 400px;
    width: 170px;
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: #d1d4e2;
}

/* html>body #body2 { width: 175px; } */

#body2col #body1 {
    float    : left;
    max-width: 740px;
    padding  : 5px;
}

html>body #body2col #body1 {
    max-width: 740px;
}

#body2col #body1_noPad {
    float    : left;
    max-width: 748px;
    padding  : 1px;
}

iframe {
    max-width: 730px;
}

#body3col #body1 {
    width: 600px;
    float: left;
    padding: 10px;
    max-width: 580px;
}

html>body #body3col #body1 { width: 580px; }

#body3 {
    width: 150px;
    padding: 10px;
    float: left;
    /* box model hack */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 130px;
}

html>body #body3 { width: 130px; }

#container {
    max-width : 950px;
    margin    : 0px 2px;
    text-align: left;
}

div#flashmovie {
    background: url('/images/bg.jpg') no-repeat;
    overflow  : hidden;
    max-width : 950px;
    width     : 100%;
    height    : 139px;
}

#logo {
    margin: 0px auto;
    height: 80px;
    text-align: left;
}

.logo {
    margin: 0px auto;
    height: 80px;
    text-align: left;
}

.flex-menu {
    display   : flex;
    flex-direction: column;
    min-height: 30px;
    max-width : 950px;
    width     : 99%;
}

.flex-menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.flex-menu li { float: left; }
.flex-menu a {
    font-size: 1.2em;
    float    : left;
    padding  : 5px 0px 5px 16px;
}

.flex-menu a.menuToggle {
    float: left;
    padding: 3px 0px 3px 5px;
}    
	
.submenu {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style: none;
}
.submenu li {
    margin-bottom: 3px;
}

.submenu a {
    display : block;
    width   : 150px;
    padding : 5px 5px 5px 5px;
    border  : solid 1px;
    font-size: 1.1em;
}

div.menuHdr {
    padding-top : 5px;
    font-weight : bold;
    font-size   : 18px;
}

/* html>body .submenu a { width: 158px; } */

#footer {
    width  : 99%;
    padding: 5px 2px 5px 2px;
    margin-top:    1.5em;
    margin-bottom: 0;
}

.centered {
    text-align  : center;
    margin-left : auto;
    margin-right: auto;
}

table.hoursForm {
    margin-left :  0;
    width       : 99%;
}

table.hoursForm td {
    margin      : 2px 0;
    text-align  : right;
}

table.hoursForm td:nth-child(1) {
    width       : 60%;
}

table.hoursForm td:nth-child(1) input[type=text] {
    width       : 80%;
    padding     : 1px 1px;
}

table.hoursForm td:nth-child(2) input[type=text]  {
    width       : 8em;
    padding     : 1px 1px;
}
table.volunteer {
    width      : 99%;
    padding    : 1em auto;
}

table.volunteer th {
    width      : 49%;
    padding    : 1em 1em;
    text-align : center;
}
table.volunteer td {
    width      : 49%;
    padding    : 1em 1em;
    text-align : left;
    vertical-align: top;
}

/***************** other media styles *********************/

@media print {
	#logo, #menu, .submenu, #flashmovie, #footer { display: none; }
	
	#body2col, #body3col, 
	#body2col #body1, html>body #body2col #body1, 
	#body3col #body1, html>body #body3col #body1, 
	#body3, html>body #body3,
	#body2, html>body #body2, 
	#container { width: auto; float: none; }
	
	#body2col, #body3col { background-image: none; }
	
	#body2, #body1, #body3 { padding: 20px; }
	
}

@media handheld {
	#body2col, #body3col, 
	#body2col #body1, html>body #body2col #body1, 
	#body3col #body1, html>body #body3col #body1, 
	#body3, html>body #body3,
	#body2, html>body #body2, 
	#container { width: auto; float: none; }
	
	#body2col, #body3col { background-image: none; }
	
	#body2, #body1, #body3 { padding: 20px; }
		
	#flashmovie { display: none; }
	
	.submenu, .submenu li { margin: 0px; }
	.submenu li { display: inline; }
	.submenu a:link, .submenu a:visited { display: inline; width: auto; border: none; background: none;  }
	.submenu a:hover { background: none; border: none;  }
}