/*   Color pallette for jgbg.org   */
/*     Blue =      #335577;            */
/*     Red =       #AA4444;           */
/*     Green =   #005500;            */
/*     Orange = #DD9944;          */
/*     Grey =      #333333;           */

body {
	background-color: #333333;
	font-family: garamond, san-serif;
}

#container {
         width: 100%;
         height: 100%;
         overflow: hidden;
}

#left {
          width: 20%;
          max-width: 300px;
          min-width: 150px;
          height: 100%;
          float: left;
}

#right {
	margin-left: 20%;
	height: 100%;
}

#logo {
	background-color: #335577;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold; 
	font-variant: small-caps;
	height: 12%;
	margin-right: 5%;
	padding: 2%;
          overflow: hidden;
}

#menu {
	background-color: #005500;
          height: 72%; overflow: auto;
	margin-top: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
	padding: 5px;
}

ul {
          margin: 0;
          padding: 0;
          list-style: none;
          width: 80px;                               /* Width of Menu Items */
          border-bottom: 1px solid #AA4444;
    }

ul li {
          position: relative;
    }

li ul {
          position: absolute;
          left: 79px;                                  /* Set 1px less than menu width */
          top: 0;
          display: none;
    }

                                                         /* Styles for Menu Items */
ul li a {
          display: block;
          text-decoration: none;
          color: #005500;
          background: #DD9944;               /* IE6 Bug */
          padding: 5px;
          border: 1px solid #AA4444;
          border-bottom: 0;
    }

                                                         /* Fix IE. Hide from IE Mac \*/
          * html ul li { float: left; height: 1%; }
          * html ul li a { height: 1%; }
                                                         /* End */

ul li a:hover { color: #335577; background: #AA4444; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

#contact {
          background-color: #AA4444;
          font-variant: small-caps;
          text-align: center;
          height: 13%;
          margin-right: 5%;
          margin-bottom: 5%;
          padding: 2%;
}
    #contact a:link { color: #335577; }
    #contact a:hover {background-color: #DD9944; text-decoration: none; color: #005500; }
    #contact a:visited { color: #005500; }

#title {
	background-color: #AA4444;
	text-align: right;
	font-family: garamond;
	height: 15%;
	padding: 5px;
}

#content {
	background-color: #DD9944;
	height: 72%; overflow: auto;
 	margin-top: 1%;
 	margin-bottom: 1%;
	padding: 5px;
}

    #content a:link { color: #005500; }
    #content a:hover {background-color: #AA4444; text-decoration: none; color: #335577;}
    #content a:visited { color: #335577; }

#footer {
	background-color: #335577;
 	height: 8%; 
	text-align: right;
	padding: 5px;
}