.app {}
.appBox { border: 1px solid #aaaaaa; }
.appWrapper { padding: 8px; }
.appBoxWrapper { padding: 8px; border: 1px solid #aaaaaa; }
.appPanel { opacity: .85; filter: alpha(opacity=85); }
.appTitle { opacity: .85; filter: alpha(opacity=85); text-align: center; font-size: 14px; font-weight: bold; color: #aaaaaa; }
.appBoxTitle { opacity: .85; filter: alpha(opacity=85); text-align: center; font-size: 14px; font-weight: bold; color: #aaaaaa; border: 1px dotted #aaaaaa; }
.appBarTitle { opacity: .85; filter: alpha(opacity=85); text-align: center; font-size: 14px; font-weight: bold; color: #aaaaaa; background-color: #aaaaaa; }
table.appBox { font-size: 11px; border: 1px solid #aaaaaa; }
.popWrapper { padding: 8px; }
.popPanel { opacity: .95; filter: alpha(opacity=95); background-color: #cccccc; }
.popTitle { opacity: .95; filter: alpha(opacity=95); text-align: center; font-size: 14px; font-weight: bold; color: #ffffff; background-color: #333333; }
.pop { font-size: 11px; color: #333333; }
.lstPix { float: left; margin: 0px; padding: 0px; width:65px; text-align: right; }
.lstTxt { float: left; padding: 0px 8px; }
div.thumb { margin: 3px; text-align: center; }
.thumb img{ display: inline; margin: 5px; }
.thumb a:hover img { border: 1px solid #A0ACC0; }
div.thumb75 { margin: 3px; width: 75px; height: 75px; float: left; text-align: center; }
.thumb75 img{ display: inline; margin: 5px; }
.thumb75 a:hover img { border: 1px solid #A0ACC0; }
div.thumb95 { margin: 3px; width: 95px; height: 95px; float: left; text-align: center; }
.thumb95 img{ display: inline; margin: 5px; }
.thumb95 a:hover img { border: 0px solid #A0ACC0; }
div.thumb125 { margin: 3px; width: 125px; height: 125px; float: left; text-align: center; }
.thumb125 img{ display: inline; margin: 5px; }
.thumb125 a:hover img { border: 1px solid #A0ACC0; }
div.thumb175 { margin: 3px; width: 175px; height: 175px; float: left; text-align: center; }
.thumb175 img{ display: inline; margin: 5px; }
.thumb175 a:hover img { border: 1px solid #A0ACC0; }
.photocattitle175 { text-align: center; font-weight: bold; }
.phototitle175 { text-align: center; font-weight: normal; width: 175px; margin: 0 3px 3px 3px; word-break: break-all; }
div.i125 { margin: 3px; width: 125px; height: 125px; text-align: center; }
.i125 img{ display: inline; margin: 5px; }
.i125 a:hover img { border: 1px solid #A0ACC0; }
.photocattitle { text-align: center; font-weight: bold; }
.phototitle { text-align: center; font-weight: normal; margin: 0 3px 3px 3px; word-break: break-all; }

.marquee
{ overflow:auto;
  overflow-style: marquee;
  marquee-style: scroll;
  marquee-loop: infinite;
  overflow-x: -webkit-marquee;
  -webkit-marquee: backwards medium infinite scroll normal;
  white-space: nowrap;
  padding: 2px 2px; 
  color: white;
  background-color: #4d4d4d;
}

a.info{ position:relative; /*this is the key*/ z-index:24; xbackground-color:#ccc; color:#000; text-decoration:none}

a.info:hover { z-index:25; }

a.info span { display: none; }

a.info:hover span{ display:block; position:absolute; padding: 2px 2px; top:1px; left:0px; border:1px solid #333333; background-color:#333333; color:white; overflow: auto; white-space: nowrap; text-align: center}

a.album{ position:relative; /*this is the key*/ z-index:24; xbackground-color:#ccc; color:#000; text-decoration:none}

.vtop { vertical-align:top; }
.butTop { vertical-align:top; color: silver; border: 1px outset silver; }
.xxxspanButtonxxx { color: silver; border: 1px outset silver; }

a.bar { text-decoration: none; font-size: 12px; background-color: transparent; }
a.bar:link    { text-decoration: none; font-size: 12px; background-color: transparent; }
a.bar:visited { text-decoration: none; font-size: 12px; background-color: transparent; }
a.bar:active  { text-decoration: none; font-size: 12px; background-color: transparent; }
a.bar:hover   { text-decoration: none; font-size: 12px; background-color: lime; }

div.barOn { display:inline; margin: 0px 1px 0px 1px; padding: 0px 2px; background-color:red; }
div.barOff { display:inline; margin: 0px 1px 0px 1px; padding: 0px 2px; background-color:darkgray; }

div.container { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; }

/** showHide **/
.hidden { display: none; }
.unhidden { display: block; }

/*********************************************/
/* o clearfix - to stretch container*/
/*********************************************/
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size: 0;
}

.clearfix { display: inline-block; }

html[xmlns] .clearfix {
        display: block;
}

* html .clearfix { height: 1%; overflow: visible; }
*+html .clearfix { min-height: 1%; }

/*********************************************/
/* o clearfix */
/*********************************************/

/*********************************************/
/* o Layout - UILayout3Wide 3 cols wide middle */
/*********************************************/
div#uicanvas { margin: 4px 4px; width: auto; }

div#uiheader { clear: both; overflow:auto; }
div#uiheaderInner {}

div#uibanTop { clear: both; overflow:auto; }
div#uibanTopInner { padding: 4px 0px; border-top: 1px dotted dimgray; border-bottom: 1px dotted dimgray; }

div#uicontainer { position: relative; width: auto; }

div#uicol1abs { float:left; width:250px; }
div#uicol2abs { white-space: nowrap; overflow: hidden; }

div#uicol1 { float: left; width: 250px; overflow:auto; }
div#uicol1Inner { padding: 4px 0px 4px 0px; overflow:auto; }

div#uicol2 { min-width: 250px; overflow:auto; }
div#uicol2Inner { min-width: 600px; padding: 0px 8px 0px 8px; overflow: auto; }

div#uicol3 { float: right; width: 302px; overflow:auto; }
div#uicol3Inner { padding: 4px 0px 4px 0px; }

div#uibanBot { clear: both; overflow:auto; }
div#uibanBotInner { padding: 0px 0px; }

div#uifooter { clear: both; overflow:auto; }
div#uifooterInner {}
/*********************************************/
/* o Layout - UILayout3Wide 3 cols wide middle */
/*********************************************/
div#lay3wcanvas { margin: 4px 4px; width: auto; }

div#lay3wheader { clear: both; overflow:auto; }
div#lay3wheaderInner {}

div#lay3wbanTop { clear: both; overflow:auto; }
div#lay3wbanTopInner { padding: 4px 0px; border-top: 1px dotted dimgray; border-bottom: 1px dotted dimgray; }

/* container for the cols */
div#lay3wcontainer { position: relative; width: auto; }

div#lay3wcol1 { float: left; width: 250px; overflow:auto; }
div#lay3wcol1Inner { padding: 4px 0px 4px 0px; overflow:auto; }

div#lay3wcol2 { min-width: 250px; overflow:auto; }
div#lay3wcol2Inner { padding: 0px 8px 0px 8px; overflow: auto; }

div#lay3wcol3 { float: right; width: 302px; overflow:auto; }
div#lay3wcol3Inner { padding: 4px 0px 4px 0px; }

div#lay3wbanBot { clear: both; overflow:auto; }
div#lay3wbanBotInner { padding: 0px 0px; }

div#lay3wfooter { clear: both; overflow:auto; }
div#lay3wfooterInner {}
/***********************************************/
/* o Layout - UILayout3Wide 3 cols wide middle */
/***********************************************/
/***********************************************/
/* o Layout - UILayout2Wide 3 cols wide middle */
/***********************************************/
div#lay2wcanvas { margin: 4px 4px; width: auto; }

div#lay2wheader { clear: both; overflow:auto; }
div#lay2wheaderInner {}

div#lay2wbanTop { clear: both; overflow:auto; }
div#lay2wbanTopInner { padding: 4px 0px; border-top: 1px dotted dimgray; border-bottom: 1px dotted dimgray; }

/* container for the cols */
div#lay2wcontainer { width: auto; overflow:hidden; }

div#lay2wcol1 { float:left; width: 225px; overflow:auto; }
div#lay2wcol1Inner { padding: 4px 0px 4px 0px; overflow:auto; }

div#lay2wcol2 { float:left; min-width: 640px; overflow:hidden; }
div#lay2wcol2Inner { min-width: 600px; padding: 0px 4px 0px 4px; overflow: hidden; }

div#lay2wcol3 { overflow: auto; }
div#lay2wcol3Inner { padding: 4px 0px 4px 0px; }

div#lay2wbanBot { clear: both; overflow:auto; }
div#lay2wbanBotInner { padding: 0px 0px; }

div#lay2wfooter { clear: both; overflow:auto; }
div#lay2wfooterInner {}
/***********************************************/
/* o Layout - UILayout2Wide 3 cols wide middle */
/***********************************************/
/***********************************************/
/* o Layout - UILayoutWide wide                */
/***********************************************/
div#laywcanvas { margin: 4px 4px; width: auto; }

div#laywheader { clear: both; overflow:auto; }
div#laywheaderInner {}

div#laywbanTop { clear: both; overflow:auto; }
div#laywbanTopInner { padding: 4px 0px; border-top: 1px dotted dimgray; border-bottom: 1px dotted dimgray; }

/* container for the cols */
div#laywcontainerinner { position: relative; width: auto; }

div#laywcol { overflow:auto; }
div#laywcolInner { padding: 0px 4px 0px 4px; overflow: auto; }

div#laywbanBot { clear: both; overflow:auto; }
div#laywbanBotInner { padding: 0px 0px; }

div#laywfooter { clear: both; overflow:auto; }
div#laywfooterInner {}
/***********************************************/
/* o Layout - UILayoutWide wide                */
/***********************************************/
/***********************************************/
/* o tabmenu                                   */
/***********************************************/
#tabmenu
{ color: #000;
  border-bottom: 2px solid black;
  margin: 12px 0px 0px 0px;
  padding: 0px;
  z-index: 1;
  padding-left: 10px
}
 
#tabmenu li { display: inline; overflow: hidden; list-style-type: none; }
 
#tabmenu a, a.active
{ color: #DEDECF;
  background: #898B5E;
  font: bold 1em "Trebuchet MS", Arial, sans-serif;
  border: 2px solid black;
  padding: 2px 5px 0px 5px;
  margin: 0;
  text-decoration: none;
}
 
#tabmenu a.active { background: #ABAD85; border-bottom: 3px solid #ABAD85; } 
#tabmenu a:hover { color: #fff; background: #ADC09F; }
 
#tabmenu a:visited { color: #E8E9BE; } 
#tabmenu a.active:hover { background: #ABAD85; color: #DEDECF; }
 
#content
{ font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
  text-align: justify;
  background: #ABAD85;
  padding: 20px;
  border: 2px solid black;
  border-top: none;
  z-index: 2;
}
 
#content a { text-decoration: none; color: #E8E9BE; }

/***********************************************/
/* o others                                   */
/***********************************************/
.xcircle {
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;;
    border:solid 10px #f00; 
    width:50px;
    height:50px;   
}