/* CSS MARKWHITINGDAVIS.COM/WEBDEV */

body {
	width: 100%;
	margin: 20px auto 0;
	background-color: #77aa77; 
	background-image:url('../../images/spider-web.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	color: #665544;
	}   

#header {
    width: 100%;
    height: 98px;
    margin: 0 auto 10px;
    border-top: 2px solid rgba(50,100,50,.5);
	border-bottom: 2px solid rgba(50,100,50,.5);
	background-color: rgba(240,250,240,.9);
	z-index: 200;
		}

	.logo-block {
		float: left;
		margin-left: 2%;
		width: 318px;
	}
        
		.logo-block img {
		    width:90px;
		    float: left;
		    margin: 6px 12px 0 1%;
		    }
		    
	    .logo-block h2 {
		    color: #336633;
		    font-size: 1.5em;
		    padding-top: 24px;
	    	}
            
            
/* START NAVIGATION */    
 nav {
    margin:10px 1% 0 0;
	float:right;              
    font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
    font-weight:lighter;
    }
    
	#menu-icon {
		display: hidden;
		margin-right: 10px;
		margin-top: 12px;
		width: 40px;
		height: 40px;
		background: black url(../../images/menu-icon.png) center;
		}
		

    nav ul ul {
        display: none;
        z-index: 2;        
    	}

        nav ul li:hover > ul {                       
            display: block;
            }


    nav ul {
        margin: 0 auto;                       
        background: none;        
        list-style: none;
        position: relative;
        display: table;                
        width: 100%;                            
            }

        nav ul li 
            {
            display:inline-block;
			padding: 8px 2px; 
            line-height: 15px;
            }
                                    
      nav li.current 
            {
            background-color: rgb(150,150,150);
            }

            nav ul li:hover {
                background-color: rgb(50,50,50);
            }
    
            nav ul li:hover a {
                color: #fff;               
            }
            
            nav ul li a {               
				padding: 5px; 
                color: black;
                text-decoration: none;                
            }

                nav ul ul {
                    background: none;
                    position: absolute; width:80px;
                    border-radius: 0px;
					margin-top: 8px;
					margin-left: -30px;
					}
                              
                    nav ul ul li {                       
                        background: rgb(100,100,100);;
                        border: none;
                        text-align: center;
                        width:120px;
                        padding: 8px;                     
                    	}
                    
                    ul.a-muse {                       
                        margin-left: -50px;                       
                    	}
                    
                    li.a-muse {                       
                        width:170px;                        
                    	}
                                        
                        nav ul ul li a {
                            color: #fff;
                        	}
                        	
                        nav ul ul li a:hover {                                
                            }

						nav ul ul ul {
							position: absolute; left: 100%; top:0;
        					}               							
/* END NAVIGATION */ 	
            
/* BEGIN CONTENT */


    h1 {
	    margin: 30px auto;
	    border-radius: 8px;
	    padding: 8px 6px 4px;
	    background-color: rgba(240,240,240,.9);
	    width: 350px;
	    text-align: center;
	    color: #444444;
	    font-size: 2.5em;
	    text-shadow: 2px 3px 4px rgba(40,40,40,.6);
    }
    
    .box {
	    margin: 3px auto 10px;
		border-radius: 4px;
	    padding:4px 8px;
	    width: 280px;
/* 	    border: 1px solid black; */
	    background-color: rgba(240,250,240,.9);
    	}
    
    	.box h2 {
	    	text-align: center;
	    	margin: 5px auto -12px;
	    	}
	    	
		.box p {
	    	text-align: center;
	    	font-size: 1.2em;
	    	line-height: 1.3em;
	    	
	    	}
/* END CONTENT */



/* BEGIN FOOTER */             
	footer {
        margin: 40px auto 0;
        padding-top: 12px;
        background-color: rgba(240,250,240,.5);
        border-radius: 9px;                
        width:200px;
		min-width: 200px; 
		height: 40px;
    	}
    	     
	     .ssl {
			margin: 0 auto;
			width: 130px;
			}
			#siteseal {				
				width: 130px;
			}			
/* END FOOTER */ 			

/*MEDIA QUERY*/
@media only screen and (max-width : 800px) {

	header {
		position: absolute;
	}

	#menu-icon {
		display:inline-block;
		}

		nav ul, nav:active ul { 
			display: none;
			position: absolute;
			padding: 15px 0;
			background: rgb(200,200,200);
/* 			border: 1px solid yellow; */
			right: 20px;
			top: 60px;
			width: 148px;
			border-radius: 4px 0 4px 4px;
			}
			
		nav:hover ul {
			display: block;
			}
			
		nav:hover ul ul {
			display: none;
			width:200px;
			}

		nav ul li {
			text-align: center;
			width: 100%;
			padding: 18px 0;
			margin: -9px 0;
			}
			
			nav ul ul li {
				text-align: center;
				width: 150px;
				padding: 18px 0;
				margin: 0;
				}

	
		nav ul:hover ul { 
			position: absolute;
			background: none;
			border: none;
			left: -120px;
			top: 0px;
			width: 25%;
			border-radius: 4px 0 4px 4px;
			}