/* layout
----------------------------------------------- */

*{ margin: 0; padding:0; }

body{
    font: 11px "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;
    color: #666;
    background-color: #000000;
    }

.boxborder {
    text-align: center;
	width: 500px;
	height: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
	background-color: #fff;
}
	
.cnybox {
	width: 230px; 
	height: 230px;  
	background-color: #FFCCFF;
	border: 10px solid #CC66FF;
	float: left;
}	

.mabox {
	width: 230px; 
	height: 230px;  
	background-color: #88aaFF;
	border: 10px solid #224488;
	float: left;
}	

.tinbox {
	width: 230px; 
	height: 230px;  
	background-color: #ddddff;
	border: 10px solid #acb2dd;
	float: left;
}	

.lbox {
	width: 230px; 
	height: 230px;  
	background-color: #ddFFaa;
	border: 10px solid #99cc66;
	float: left;
}		

.square {
	padding: 10px;
}
	
.box{
	float: left;
	margin: 5px;
	padding: 20px; 
	background-color: #fff;
	border: 1px solid #ced4ca;
	border-bottom: 3px solid #ced4ca;
	border-right: 3px solid #ced4ca;
	font-size: 0.9em;
	}

#wrapper { padding: 20px 0 0 65px;}

#gschichtli {
    padding-top: 0;
    \width: 500px;  /* IE5Win */
    w\idth: 440px;  /* Others */
    font-size: 1.0em;
    }

#gschenkli {
    padding-top: 0;
    \width: 350px;  /* IE5Win */
    w\idth: 320px;  /* Others */
    font-size: 1.0em;
    }

#musik {
    padding-top: 0;
    \width: 350px;  /* IE5Win */
    w\idth: 320px;  /* Others */
    font-size: 1.0em;
    }

#gschenklidetail {
	padding-top: 0;
	\width: 600px;	/* IE5Win */
	w\idth: 540px;	/* Others */
	font-size: 1.0em;
	} 
	
#gaestebuch {
    padding-top: 0;
    \width: 350px;  /* IE5Win */
    w\idth: 320px;  /* Others */
    font-size: 1.0em;
    }

#footer {
    padding-top: 0;
    \width: 350px;  /* IE5Win */
    w\idth: 320px;  /* Others */
    font-size: 1.0em;
    }

    			 /* IE5Win */	/* Others */
#sidebar-1 { \width: 220px;	w\idth: 170px; } 

#left-bar { width: 20px; position:fixed; top: 60px; left:20px;}
#left-bar img{  padding-bottom: 3px; }
* html div#left-bar { width: 20px; top: 38px; left:20px; position:absolute; }


.bildlibox{
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    }

.gschenklibox{
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    }

.gschenklidetail{
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    }
    
.musik{
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    }
    
.gaestebuch{
    float: left;
    margin: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    }

#introwrapper { 
    padding: 20px 20px 20px 20px;
    text-align: center;
    }

.intro{
    margin: auto;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    text-align: center;
	\width: 810px;	/* IE5Win */
	w\idth: 800px;	/* Others */
    }
        
.footer{
    float: left;
    margin-top: 500px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ced4ff;
    border-bottom: 3px solid #ced4ff;
    border-right: 3px solid #ced4ff;
    text-align: left;
    font-size: 1.0em;
    }
    
/* typography
----------------------------------------------- */

h1,
h2,
h3{ font-family: "Lucida Grande", Tahoma, Arial, sans-serif; }

h1 { text-indent: -9000px; margin: 0; display: none;}
h2 { margin-top: 25px; margin-bottom: 0; font-size: 16px; color: #2211CC; }
h3 { font-size: 14px; color: #666; }

p { line-height: 1.5em; margin: 0.5em 0 1.5em 0; }

ol, ul { line-height: 1em; margin: 1em 0 1em 1em;   }

ul li,
ol li{ margin-bottom: 0.2em; }

img, a img{ border:0px;}

a, a:hover { color: #2211CC; text-decoration: none; }
a:hover { color: #aa88ff; }

table {
    border-spacing: 0 0;
    background-color: #ceceff;
}

th {
    font-size: 12px;
}

/* forms
----------------------------------------------- */

input, textarea, select {
    border: 1px solid #C1C0B5;
    background-color: #FAFAF0;
    color: #555;
    font-size: 1em;
    font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    }

/* blog posts
----------------------------------------------- */

img {
    border: 0px;
    padding: 3px 3px 3px 3px;
    margin: 0 0 0 0;
    }

img.icon {
    border: 0px;
    padding: 0 15px 0 15px;
    margin: 0 0 0 0;
    text-align: center;
    vertical-align:middle;
    }

.block {
  padding-top: 8px;
  border-bottom: 1px solid #ced4ff; }

.titlecomment {
    margin-top: 0;
    padding-top: 1px;
    font-size: 0.9em;
    color: #999;
    }

.postheader
    {
    font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
    FONT-SIZE: 14px;
    color: #2211CC;
    text-align: center;
    padding-bottom: 5pt;
    padding-right: 5px;
    padding-left: 5px;
    FONT-WEIGHT: bold;
    margin-top: 0;
    }

.postleft
    {
    font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    font-size: 11px;
    background-color: #ceceff;
    text-align: left;
    float: left;
    margin: 2px 2px 0 0;
    padding: 5px 5px 5px 5px;
    }

.postright
    {
    font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    font-size: 11px;
    background-color: #ceceff;
    text-align: left;
    float: right;
    padding: 5px 5px 5px 5px;
    }

.postimage
    {
    font-size: 11px;
    background-color: #ceceff;
    text-align: center;
    padding: 3px 3px 3px 3px;
    }

.gschenkpost
    {
    margin: 5px 0 5px;
    padding: 5px 0 5px;
    }

.gschenkpost td
    {
    padding: 5px;
    }

.gschenkpost input
    {
    margin-top: 10px;
    }
    
p.date {    color: white;
            font-size: 24px;
            background-color: #bbf;
            text-align: center;
            float: left;
            margin: 6px 10px 0 0;
            padding: 8px 3px 8px 3px;
       }

p.dateright {
            color: white;
            font-size: 24px;
            background-color: #bbf;
            text-align: center;
            float: right;
            margin: 6px 0 0 10px;
            padding: 8px 3px 8px 3px;
            }

p.date span 
    { 
    color: white; 
    font-size: 10px; 
    line-height: 22px; 
    background-color: #6666ff; 
    margin: 5px 0 0; 
    padding: 0 10px 0; 
    display: block; 
    }

p.dateright span 
    { 
    color: white; 
    font-size: 10px; 
    line-height: 22px; 
    background-color: #6666ff; 
    margin: 5px 0 0; 
    padding: 0 10px 0; 
    display: block; 
    }

.date {font-size: 8pt;}

p.credits { color: #aaaadd;
            font-size: 10px;
            text-align: center;
       }
       
table.credits {
    background-color: white;
}


/* lightbox
----------------------------------------------- */

#lightbox{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    background-color: #bbf;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
    padding: 10px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../pics/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../pics/prev.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../pics/next.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #bbf;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%
    }

#imageData{ padding:0 10px; color: #55b; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;  }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;  }

#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #55b;
    }


div#tipDiv {
  position:absolute; visibility:hidden;
  left:0;
  top:0;
  z-index:10000;
  background-color:#ffffff;
  font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
  font-size:11px;
  padding:5px;
  border: solid 1px #002277;
  width: 70px;
  color: #002277;
}