/* muddlerstyle.css */

title {background-image:url("muddler6.gif");
       background-position:left;
       
       }
      
link:hover  {
       }
        
body {
	background-image: url("gradiantgrey.gif");
	background-repeat: repeat-y;
	}
	
h1 {
	color: maroon;
	font-family: Twang LET;
	font-size: 50px ;
	}
	
h2 {
	color: maroon;
	font-family: Twang LET;
	font-size: 40px ;
	text-align: center;
    }

h3 {
	color: maroon;
	font-family: Twang LET;
	font-size: 30px ;
	text-align: center;
	}

a {
	color: maroon;
	}
	
a:visited {
	color: black;
	}
	
a:hover {
	color: white;
	background-color: black;
	} 
	
p1 {
	text-align: center;
	color: maroon;
	font-family: Freestyle Script;
	font-size: 30px ;
	}
    
#all {
		border: 3px groove maroon;
		width: 1000px;
		height: 1000px;
		position: absolute;
		left: 0px;
		top: 0px;
		}

#head {
		text-align: center;
		width: 100%;
		background-image: url("tranquility.jpg");
        background-repeat:no-repeat;
        clear: both;
		}
		
#head2 {
		text-align: center;
		background-image: url("gradiantgrey.gif");
		}
		
#body {
		text-align: center;
		padding-top: 1%;
		}
		
#body1 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body2 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body3 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body4 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body5 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body6 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body7 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body8 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body9 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body10 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body11 {
		text-align: justify;
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 30px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
        
#body12 {
		border-bottom: 2px groove maroon;
		float: left;
		width: 100%;
		min-height: 430px;
		padding-top: 1%;
		padding-bottom: 1%;
		clear: both;
		}
         
#left {
		display: inline;
		float: left;
		width: 21%;
		border: 3px groove maroon;
		overflow: auto; 
		max-height: 420px;
		min-height: 30em
		}
		
#right {
		float: left;
		width: 75%;
		border: 3px groove maroon;
		min-height: 30em;
		max-height: 420px;
		}
		
.target {
		position: relative;
		}
		
.content {
		position: relative;
		width: 21%;
		}
		
.content ul {
		position: relative;
		left: 20%;
		width: 80%;
		}

#lightbox-Image {
        float: right;
		width: 75%;
		border: 3px groove maroon;
		min-height: 30em;
		max-height: 420px;
        } 
               
#img {
		float: left;
		margin-right: 2%;
        background-color: transparent;
		}
        
#img ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
        
#img li {
        list-style-type: none;
        float: left;
		text-align: center;
           }
                             
#img a:hover {
             padding-top: -20%;
             padding-bottom:20%;
             width: 100%;
             display: block;
             border: 3px gray inset;
             border-bottom-width: 200px;
             background-image:url('');
             }
             
.img {
		float: left;
		margin-right: 2%;
		}
        
.img2 {
		float: right;
		margin-left: 2%;
		}
               		
#menu {
		position: relative;
		width: 20%;
		}
		
#menu li {
		list-style-type: none;
		margin-left: -2em;
		text-align: center;
		}
		
#menu a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
		
#menu a:visited {
		color:black;
		}
		
#menu a:hover {
		border: 3px gray inset;
		}
		
        
        
#menu3 ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
        
#menu3 li {
		list-style-type: none;
		float: left;
		width: 32%;
		text-align: center;
		}
        
#menu3 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
         
#menu3 a:visited {
		color:black;
		}
        
#menu3 a:hover {
		border: 3px gray inset;
		}
                                       
        
            
#menu31 ul {
		margin-left: -2.5;
		}

#menu31 li {
		list-style-type: none;
		float: left;
		width: 32%;
		text-align: center;
		}

#menu31 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}

#menu31 a:visited {
		color: black;
		}
        
#menu31 a:hover {
		border: 3px gray inset;
		}
        
#menu4 ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
		
#menu4 li {
		list-style-type: none;
		float: left;
		width: 24%;
		text-align: center;
		}
		
#menu4 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
		
#menu4 a:visited {
		color:black;
		}
		
#menu4 a:hover {
		border: 3px gray inset;
		}
        
#menu41 ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
		
#menu41 li {
		list-style-type: none;
		float: left;
		width: 24%;
		text-align: center;
		}
		
#menu41 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
		
#menu41 a:visited {
		color:black;
		}
		
#menu41 a:hover {
		border: 3px gray inset;
		}
#menu5 ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
		
#menu5 li {
		list-style-type: none;
		float: left;
		width: 19%;
		text-align: center;
		}
		
#menu5 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
		
#menu5 a:visited {
		color:black;
		}
		
#menu5 a:hover {
		border: 3px gray inset;
		}
        
#menu51 ul {
		margin-left: -2.5;
		text-align: center;
		width: 96%;
		float: left;
		clear: both;
		}
		
#menu51 li {
		list-style-type: none;
		float: left;
		width: 19%;
		text-align: center;
		}
		
#menu51 a {
		text-decoration: none;
		color: maroon;
		display: block;
		border: 3px gray outset;
		background-color: gray;
		}
		
#menu51 a:visited {
		color:black;
		}
		
#menu51 a:hover {
		border: 3px gray inset;
		}
        
.balloon1 {
		text-align: left;
		border: 2px groove maroon;
        float: left;
		min-width: 600%;
		min-height: 30px;
		padding-top: 0%;
		padding-bottom: 0%;
		
        margin-left: -150px;
        background-color: blue;
        
		}
                
.nav, .nav ul {
        
		padding: 0;
		margin-left: 0em;
		list-style: none;
		}
		
.nav li {	
		float: left;
		width: 10em;
		list-style-type: none;
		
		}
		
.nav li li {
		float: left;
		width: 10em;
		list-style-type: none;
		
		}
		
.nav li li li {
		
        margin-left:1em
		}
		
.nav a {
		display: block;
		width: 10em;
		}

.nav li ul {
        display: none;
		}
		
.nav li ul ul {
		margin-left: 0em;
		}
        
.nav li:hover >ul{
		display: block;
		}
		
.nav li:hover > ul ul, #nav li:hover > ul ul ul, #nav li:hover > ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
		left: -999em;
		}

.nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover  ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
        display: block;
		}					

#footer{
		text-align: center;
		margin-top: 0px;
		color: maroon;
		}