@font-face {
    font-family: 'ch_light';
    src: url('../fonts/cooperhewitt-light-webfont.woff2') format('woff2'),
         url('../fonts/cooperhewitt-light-webfont.woff') format('woff'),
         url('../fonts/cooperhewitt-light-webfont.ttf') format('truetype'),
         url('../fonts/cooperhewitt-light-webfont.svg#cooper_hewittlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ch_thin';
    src: url('../fonts/cooperhewitt-thin-webfont.woff2') format('woff2'),
         url('../fonts/cooperhewitt-thin-webfont.woff') format('woff'),
         url('../fonts/cooperhewitt-thin-webfont.ttf') format('truetype'),
         url('../fonts/cooperhewitt-thin-webfont.svg#cooper_hewittthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ch_book';
    src: url('../fonts/cooperhewitt-book-webfont.woff2') format('woff2'),
         url('../fonts/cooperhewitt-book-webfont.woff') format('woff'),
         url('../fonts/cooperhewitt-book-webfont.ttf') format('truetype'),
         url('../fonts/cooperhewitt-book-webfont.svg#cooper_hewittbook') format('svg');
    font-weight: normal;
    font-style: normal;

}




P {
	font-family : ch_light, arial, sans-serif;
	color : #000000;
	font-size : 18px
}



P.intro {
	font-family : ch_light, arial, sans-serif;
	color : #000000;
	font-size : 14px;
	margin-left : 50px;
	margin-right : 50px;
}

P.bio {
    font-family : ch_light, arial, sans-serif;
    color : #000000;
    font-size : 14px;
    margin-left : 70px;

}

P.note {
	font-family : ch_light, arial, sans-serif;
	color : #000000;
	font-size : 11px;
}

P.footer {
	font-size : 12px;
    margin: 20px;
}

P.navigation{
	font-family : ch_light, arial, sans-serif;
	font-size : 14px;
	text-decoration : none;
	color : #E0E0E0;
    font-weight: bold;
}

H1{
  	font-family : ch_light, arial, sans-serif;
	font-size : 36px;
    margin: 0 0 30px 0;
	text-decoration : none;
	color : #009DC8;
}

H1.name {
      font-family : ch_book, arial, sans-serif;
    font-size : 42px;
    text-align:right;
    text-decoration : none;
    color : #009DC8;
    margin-top:50px;
}

H2{
      font-family : ch_light, arial, sans-serif;
    font-size : 18px;
    font-style : bold;
    text-decoration : none;
    color : #009DC8;
    margin-left : 50px;
}


H2.noDent{
      font-family : ch_light, arial, sans-serif;
    font-size : 18px;
    font-style : bold;
    text-decoration : none;
    color : #009DC8;
    margin-left : 0px;
}
a:hover {
	color : #FF0000;
}

a {
	text-decoration : none;
	color : #E0E0E0;
}

td {
	font-family : ch_light, arial, sans-serif;
	color : #ffffff;
	font-size : 11px;
}

td.heading {
	font-family : ch_light, arial, sans-serif;
	color : #ffffff;
	font-size.
     : 12px;
	font-weight : bold;
}

div.spacer60{

    margin : 60px;
}
div.spacer50{

    margin : 100px;
}
div.spacer20{

    margin : 100px;
}

#wrap {
    width:950px;
    margin:0 auto;
    background:#fff;
}

#header {
    background: #fff ;
    }
#nav {
    position:relative;
    float:left;
    background:#fff;
    height:20px;
    margin-left: 80px;
    margin-right: auto;
    margin-top:55px;
    }
#main {

        float:left;
        padding:10px;
        background:#fff;
    }
#bottomMain {
        clear:both;
    }
#footer {
        clear:both;
        padding:5px 10px;
        background:#fff;
        height: 14px;
    }

        /* Navigation based upon http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
        * Modified by JDB Technology Solutions for Pat Walsh OCtober 2017
        */
        #nav
        {
            /*width: 60em; /* 1000 */
            width: 100em;
            font-family: 'ch_light', sans-serif;
            font-weight: bold;
            position: absolute;
            /*top: 25%;*/
            left: 50%;
            margin-left: -30em; /* 30 480 */

        }

            #nav > a
            {
                display: none;
            }

            #nav ul {
                list-style: none;
                margin-bottom: 0;
            }

            #nav li
            {
                position: relative;
                margin: 0;
            }
                #nav li a
                {
                    color: #000;
                    display: block;
                }
                #nav li a:active
                {
                    background-color: #000 !important;
                }

            #nav span:after
            {
                width: 0;
                height: 0;
                border: 0.313em solid transparent; /* 5 */
                border-bottom: none;
                border-top-color: #fff;
                content: '';
                vertical-align: middle;
                display: inline-block;
                position: relative;
                right: -0.313em; /* 5 */
            }

            /* first level */

            #nav > ul
            {
                height: 1.75em; /* 60 */
                background-color: #fff;
                list-syle: none;

            }
                #nav > ul > li
                {
                    width: 25%;
                    height: 100%;
                    float: left;
                }
                    #nav > ul > li > a
                    {
                        height: 100%;
                        font-size: 1.5em; /* 24 */
                        line-height: 1.5em; /* 60 (24) */
                        text-align: center;

                    }
                        #nav > ul > li:not( :last-child ) > a
                        {
                            border-right: 1px solid #FF5202;
                        }
                        #nav > ul > li:hover > a,
                        #nav > ul:not( :hover ) > li.active > a
                        {
                            background-color: #fff;
                        }


                /* second level */

                #nav li ul
                {
                    background-color: #fff;
                    display: none;
                    position: absolute;
                    top: 100%;
                    margin: 0;
                    z-index:8;
                }
                    #nav li:hover ul
                    {
                        display: block;
                        left: 0;
                        right: 0;
                    }
                        #nav li:not( :first-child ):hover ul
                        {
                            left: -1px;
                        }
                        #nav li ul a
                        {
                            font-size: 1.5em; /* 20 */
                            border-top: 1px solid #e15a1f;
                            padding: 0.75em; /* 15 (20) */
                        }
                            #nav li ul li a:hover,
                            #nav li ul:not( :hover ) li.active a
                            {
                                background-color: #e15a1f;
                            }


       @media only screen and ( max-width: 200em ) /* 1650 */
        {
            #nav
            {
                width: 100%;
                position: static;
                margin: 0;
            }
        }

        @media only screen and ( max-width: 40em ) /* 640 */
        {
            html
            {
                font-size: 75%; /* 12 */
            }

            #nav
            {
                position: relative;
                top: auto;
                left: auto;
            }
                #nav > a
                {
                    width: 3.125em; /* 50 */
                    height: 3.125em; /* 50 */
                    text-align: left;
                    text-indent: -9999px;
                    background-color: #e15a1f;
                    position: relative;
                }
                    #nav > a:before,
                    #nav > a:after
                    {
                        position: absolute;
                        border: 2px solid #fff;
                        top: 35%;
                        left: 25%;
                        right: 25%;
                        content: '';
                    }
                    #nav > a:after
                    {
                        top: 60%;
                    }

                #nav:not( :target ) > a:first-of-type,
                #nav:target > a:last-of-type
                {
                    display: block;
                }


            /* first level */

            #nav > ul
            {
                height: auto;
                display: none;
                position: absolute;
                left: 0;
                right: 0;
            }
                #nav:target > ul
                {
                    display: block;
                }
                #nav > ul > li
                {
                    width: 100%;
                    float: none;
                }
                    #nav > ul > li > a
                    {
                        height: auto;
                        text-align: left;
                        padding: 0 0.833em; /* 20 (24) */
                    }
                        #nav > ul > li:not( :last-child ) > a
                        {
                            border-right: none;
                            border-bottom: 1px solid #FF5202;
                        }


                /* second level */

                #nav li ul
                {
                    position: static;
                    padding: 1.25em; /* 20 */
                    padding-top: 0;

                }
        }
        .navtop {
            margin-top:65px;
        }