@charset "utf-8";
/* CSS Document */

body {
	background-color: #ffff66;
	padding: 30px; 
	padding-top: 40px;
}
div#container {
	background-color: #EBEB00;
	margin: 0px auto 0px auto;
	padding: 10px;
	min-height: 400px;
	-moz-border-radius: 10px;
	-moz-box-shadow: 2px 2px 2px #666;
	-webkit-border-radius: 10px;
	-webkit-box-shadow: 2px 2px 2px #666;
	border: 3px solid #ffbe66;
	color: #B366FF;
	font-family: arial, sans-serif;
	text-align: center;
	font-weight: normal;
}
.wf-loading {
	visibility: hidden;
}
.wf-inactive {
	visibility: visible;
}
.wf-active h1 {
	font-family: 'Luckiest Guy', 'Just Another Hand', 'Reenie Beanie', serif;
	color: #FF66B3;
	text-shadow: 2px 2px 2px #333;
	font-weight: normal;
	font-size: 2.5em;
}
.wf-active p {
	font-family: 'Just Another Hand', 'Reenie Beanie', serif;
	font-size: 2em;
}
/* --- div#navbar adjustments --- */
div#navbar {
    width: 480px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    /* --- ADJUSTMENT FOR TITLE RISING --- */
    /* Instead of a negative margin, let's try to manage spacing differently.
       If the navbar is intended to overlap with the logo, we might need
       to adjust the logo's margin-top instead, or position the navbar.
       For now, let's remove the negative margin and see. */
    margin-top: -45px; /* Changed from -61px */
    /* Add a padding-bottom to create space below the buttons inside the navbar */
    padding-bottom: 10px; /* New: Creates space within navbar below buttons */
    text-align: center;
    /* --- NEW ADDITION FOR GAP FIX --- */
    /* Add overflow: hidden or a specific height to contain its inline-block children.
       Overflow: hidden is a common 'clearfix' for inline-block layouts. */
    overflow: hidden; /* Recommended for containing inline-block children */
    /* Or you could give it a min-height or height if you want a fixed navbar size: */
    /* min-height: 40px; */ /* Example if you want a minimum height */
}

/* --- ul#nav (No changes from last recommendation, keeping for context) --- */
ul#nav {
    padding-left: 0px;
    display: inline-block;
    margin: 0;
    /* If you added padding here previously, keep it or adjust based on visual need */
    /* padding: 0 10px; */
}

/* --- ul#nav li (No changes from last recommendation, keeping for context) --- */
ul#nav li {
    list-style-type: none;
    float: none; /* Crucial: removes the left alignment */
    display: inline-block;
    margin: 0 15px; /* Adjust this value for desired spacing between buttons */
    vertical-align: top;
}

/* --- ul#nav li a (Minor adjustment for margin-bottom) --- */
ul#nav li a {
    background-image: url(../images/nav-buttons-new.png);
    background-repeat: no-repeat;
    display: block;
    width: 115px;
    overflow: hidden;
    line-height: 32px;
    margin-right: 0; /* Set to 0 as li margin handles spacing */
    /* --- ADJUSTMENT FOR GAP FIX --- */
    /* Move this margin to the li, or adjust it if you want vertical space
       *below* each button, otherwise, it can be removed.
       If the 5px was intended to add space below the whole row of buttons,
       the padding-bottom on #navbar is a better place for it. */
    margin-bottom: 0; /* Set to 0, or very small, as #navbar padding handles this */
    text-indent: -5000px;
}
ul#nav li a.nav-home{
	background-position: 0px -35px;
}
ul#nav li a:hover.nav-home{
	background-position: -120px -35px;
}
ul#nav li a.nav-bestpics{
	background-position: 0px -70px;
}
ul#nav li a:hover.nav-bestpics{
	background-position: -120px -70px;
}
ul#nav li a.nav-albums{
	background-position: 0px -105px;
}
ul#nav li a:hover.nav-albums{
	background-position: -120px -105px;
}
ul#nav li a.nav-movies{
	background-position: 0px -140px;
}
ul#nav li a:hover.nav-movies{
	background-position: -120px -140px;
}
#logo {
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}
.picasa-show {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	margin-bottom: 10px;
}
h2.slideshows {
	height: 40px;
	text-indent: -5000px;
	background-image: url(../images/h2-slideshows.png);
	background-repeat: no-repeat;
	background-position: center;
}
h2.movieclips {
	height: 40px;
	text-indent: -5000px;
	background-image: url(../images/h2-movieclips.png);
	background-repeat: no-repeat;
	background-position: center;
}
ul.linklist {
	list-style-type: none;
	text-align: center;
}
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}
.clear-both {
	clear: both;
}
div.photo-thumb {
	margin-bottom: 10px;
	float: left;
	text-align: center;
}
div.photo-thumb a {
}
div.photo-thumb a img {
        margin: 10px auto 0px auto;
        border: 3px solid #eee;
        -moz-box-shadow: 0px 0px 10px #333;
        -webkit-box-shadow: 0px 0px 7px #333;
        box-shadow: 0px 0px 5px 3px #333;
}
div.photo-thumb p {
	width: 80%;
	margin: 10px auto 0px auto;
	font-family: 'Just Another Hand', 'Reenie Beenie', serif; 
	font-size: 1.5em;
}
/*
div.album-thumb {
	float: left; 
	text-align: center; 
}
div.album-thumb a {
}
div.album-thumb a img {
	margin: 10px auto 0px auto;
	border: 3px solid #eee;
	-moz-box-shadow: 0px 0px 10px 3px #333;
	-webkit-box-shadow: 3px 3px 4px #333;
	box-shadow: 3px 3px 4px #000;
}
div.album {
	height: 130px; 
	margin-right: 10px; 
	margin-bottom: 20px; 
	padding: 10px; 
	float: left; 
	text-align: center; 
}
div.album a {
}
div.album a img {
	border: 3px solid #eee;
	-moz-box-shadow: 0px 0px 10px 3px #333;
	-webkit-box-shadow: 3px 3px 4px #333;
	box-shadow: 3px 3px 4px #000;
}
*/
div.gallery-photo {
	margin: 10px 0px 10px 0px;
}
div.gallery-photo img.photo-nav-button {
	border: none;
}
div.gallery-photo img.photo {
	vertical-align: middle;
	border: 5px solid #eee;
	-moz-box-shadow: 0px 0px 10px 3px #333;
	-webkit-box-shadow: 0px 0px 10px 3px #333;
	box-shadow: 0px 0px 10px 3px #333;
}