/* ------------ generic settings */
HTML, BODY {
  font-size  : 100%;
}
BODY       {
  background : #181818; /* 000 */
  color      : #EEE;
  margin     :    0;
  padding    :    0;
  font-family: "Gill Sans", GillSans, "Trebuchet MS", Arial, sans-serif;
}
DIV.spacer {
  clear: both;
}
A,
A:visited,
A:link     {
  padding: 0px 5px;
  color  :    #339;
  text-decoration: none;
}
A:hover    {
  background: #339;
  color     : #EEE;
  text-decoration: none;
}
#photo A IMG,
#calendar A IMG {
  border: none;
}
#photo A,
#photo A:hover,
#calendar A,
#calendar A:hover {
  background: none;
  padding: 0;
}
P {
  margin: 10px
}

/* ------------------ text page */
#pagewrap {
  position: absolute;
  top : 10%;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  border: 1px solid #555;
  padding-bottom: 5px;
}
#pagewrap H1 {
  margin : 0;
  padding: 2px 10px;
  letter-spacing: 0.5em;
  font-size: 1.0em;
  font-weight: normal;
  background: #234;
  border-bottom: 1px solid #555;
}
#pagewrap P {
  font-size: 1.0em;
  line-height: 2.0em;
  padding: 5px 20px;
  text-align: justify;
  letter-spacing: 0.2em;
  color: #CCC;
}

/* ------------------ main photo */
#photowrap {
  margin     :        0;
  padding    :        0;
  position   : absolute;
  left       :      50%;
  top        :      10%;
  width      :    755px;
  margin-left:   -379px;
  margin-top :        0;
  background :     #000;
  padding    :        0;
  border     : 1px solid #555;
}
#photo {
  margin     :        0;
  padding    :        0;
  width      :    735px;
  height     :    490px;
  background :     #000;
  padding    :     10px;
}
#photocaption {
  font-size     :  0.8em;
  line-height   :  1.0em;
  letter-spacing:  0.8em;
  text-align    : center;
  padding-bottom:   10px;
}

/* ---------------- page header/menu */
#header    {
  position  : absolute;
  top       :        0;
  left      :        0;
  width     :     100%;
  background:     #234; /* 333 */
  z-index   :        2;
  border-bottom: 1px solid #555;
}
#header H1 {
  float       :    left;
  text-align  :    left;
  font-weight :  normal;
  font-size   :   0.7em;
  line-height :   1.0em;
  margin      :       0;
  padding     : 4px 6px 3px 6px;
  letter-spacing: 0.8em;
}
#header H1 A,
#header H1 A:hover {
  text-decoration:   none;
  background: transparent;
  color  : #FFF;
  padding:    0;
}
#header H1 SPAN SPAN {
  letter-spacing: 0.2em;
}
html>body #header H1 SPAN SPAN.iespacer {
  display: none;
}

/* --------------------- shadows */
.endSpacer {
  height: 20px;
}

/* --------------------- shadows */
#shadow1,
#shadow2 {
  clear   :     both;
  margin  :        0;
  padding :        0;
  height  :     15px;
  width   :     100%;
  z-index :      999;
  background: transparent;
}
html>body #shadow1 {
  background: transparent
    url('/photoblog/graphics/shadow-top15.png')
    repeat-x top left;
}
html>body #shadow2 {
  background: transparent
    url('/photoblog/graphics/shadow-bottom15.png')
    repeat-x bottom left;
}
* html #shadow1 {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='graphics/shadow-top15.png',sizingMethod='crop');
}
* html #shadow2 {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='graphics/shadow-bottom15.png',sizingMethod='crop');
}
#shadow1 SPAN,
#shadow2 SPAN {
  display: none;
}

#calendar {
  position: absolute;
  background:   #000;
  width : 735px;
  top   :   10%;
  left  :   50%;
  border:   1px solid #555;
  border-left:      0;
  margin-left: -368px;
}
.endMonth {
  clear: both;
}
#calMonth {
  background    :   #234;
  text-align    : center;
  letter-spacing:  0.8em;
  border-left: 1px solid #555;
}
#calMonth .spacer {
  line-height   :      0;
}
#calMonthPrev {
  float         :   left;
  width         :   30px;
  letter-spacing:  0.1em;
  text-align    : center;
}
#calMonthName {
  float         :   left;
  width         :  670px;
  text-align    : center;
  padding       :    2px;
}
#calMonthNext {
  float         :  right;
  width         :   30px;
  letter-spacing:  0.1em;
  text-align    : center;
}
#calMonth A,
#calMonth A:hover {
  display :   block;
  padding : 2px 4px;
  color   :   White;
}
#calMonth A:hover {
  background:  #CCC;
  color     :  #333;
}
.week {
  clear: both;
}
.day,
.dummyday {
  float: left;
  height: 92px;
  width: 104px;
  background: #333;
  border-top : 1px solid #555;
  border-left: 1px solid #555;
  position: relative;
}
.dummyday {
  background: #222;
}
.dayNumBG {
  position: absolute;
  height: 20px;
  width : 24px;
  top   :    0;
  right :    0;
  background: black;
  -moz-opacity: 0.50;
  opacity: 0.50;
  filter:alpha(opacity=50);
  z-index: 1;
  border-bottom: 1px solid #555;
  border-left  : 1px solid #555;
}
.dayNum {
  position: absolute;
  /*
    height: 20px;
  */
  width: 24px;
  top  :    0;
  right:    0;
  text-align: center;
  padding: 4px 0px 3px;
  font-size: 0.8em;
  line-height: 1.0em;
  z-index: 1;
}
.dayPic {
  position: absolute;
  height: 92px;
  width: 104px;
  top: 0;
  right: 0;
}
.dayPic IMG {
  height: 92px;
  width: 104px;
}