/*******************
  Copyright (c) 2004-2008 TinyWebGallery
  written by Michael Dempfle
  TWG version: 1.8
********************/
/*
This css has all the default settings for twg. If you want to edit the style please  
overwrite the settings here by using the mystyle.css - this makes it much easier to update TWG
*/

/* Needed for IE to resizes tables to the full height  */
html, body.twg {
  vertical-align:top;
  height:100%;
  margin: 0px;
  padding: 0px;
}

/* font settings for the body - if you change the color of the background you have to change the color as well in the 
config.php for the background of the slideshow, If you want to change the color of the text adapt the link colors at the bottom as well */
body.twg {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
}

table.twg_main {
  width:980px;
  height:100%;
  border: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  text-align: center;
}

table.twg_main img {
margin:0px;
}

/* font settings for tables - border is set because on the 1.st page the border otherwise does look bad ;) - */
table.twg {
  border: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  text-align: center;
  padding:0px;
}


/* font settings for cells */
td.twg {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

td.padding {
    padding:3px;
}

/* to make text look nicer + the border around the "main"-area */
td.twg_info {
	border-top: 2px solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	vertical-align:top;
  text-align: center;
}

.twg_100_prozent {
width: 100%; 
height:100%;
}

.twg_100_prozent_height {
height:100%;
}

.twg_tr {
vertical-align:top;
}

.twg_imagetablediv {
vertical-align:middle;
}

/* settings for images in a cell - some duplocate settings does exists - be carefull with changing this could be overwritten somewhere */
td.twg_image {
	 border: none;
	 text-align: center;
	 vertical-align: top;
	 padding: 9px 4px 4px 4px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   height:100px;
}

/* settings for centering the navigation table */
table.twg_nav {
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
}

/* the settings for the details image (border ...)   */
.twg_imageview {
  border : 1px inset Gray;
  vertical-align: middle;
  text-align: center;
	margin: 0px 0px 0px 0px;
}


/* the next commentent entries make a drop shadow - try them if you like - I changed this because I liked the new one better  */
/* does the drop shadow  - if you want a different one: adapt this settings - image-view does still a nice boarder 
div.twg_img-shadow table {
    display: block;
		position: relative;
		background-color: #fff;
		border: 1px solid #a9a9a9;
	  margin: -6px 6px 6px -6px; 
} 
 */

/* does the drop shadow  - if you don't like it - clear this settings - image-view does still a nice boarder  */
/* does not look nice if ie and a background image is used - therefore I removed it from the default - if you use white background this looks really good */
/*
div.twg_img-shadow {
  background: url(buttons/shadowalpha.png) no-repeat bottom right !important;
	background: url(buttons/shadow.gif) no-repeat bottom right;
  margin: 10px 0px 0px 5px !important;
  }
*/

/* does the drop shadow  - if you want a different one: adapt this settings - image-view does still a nice boarder  */
div.twg_img-shadow table {
    display: block;
	  position: relative;
	  background-color: transparent;
	  border: 1px solid #000000;
	  margin: 0px 0px 0px 0px;
} 

div.twg_img-shadow {
  background: none !important;
  margin: 0px 0px 0px 0px;
}
/* settings for the top middle cell where the navigation buttons are - everything can be set individuall in the top! 
   if you want to change the color of the top row change the color at topnav, topnavleft, topnavright
   
   if you want to change the color of the whole border you have to edit sideframe and framestyle.css as well!
*/
td.topnav {
  height: 30px;
  text-align: center;
  vertical-align: middle;
  border-top: 2px none; 
  border-bottom: 2px none; 
  font-size: 10px;
  width: auto;
  background-color: #f3f3f3;
}

/* settings for the top left cell where the galleries -> ... ->  buttons are */
td.topnavleft {
   height: 30px;
	 vertical-align: middle;
	 border-top: 2px none; 
   border-bottom: 2px none; 
   font-size: 10px;
	 text-align: left;
	 width: 35%;
   padding-left: 5px;
   background-color: #f3f3f3;
}

/* settings for the top right cell where the menu buttons are */
td.topnavright {
   height: 30px;
	 width: 35%;
	 text-align: right;
	 vertical-align: middle;
	 border-top: 2px none; 
   border-bottom: 2px none; 
   font-size: 10px;
   padding-right: 5px;
   background-color: #f3f3f3;
}

.hide {
display:none;
}

/* left and right border color */
td.sideframe {
	width:0px;
  background-color: transparent;
	vertical-align:top;
	text-align:left;
	height:100%;
}

.expandbutton {
margin-top:50px !important;
cursor:pointer;
}

.twg_bottom {
   height: 19px;
}
/* this is the cell where the powered by Tinywebgallery is in - the color is overwritten in frameset.css !! */
td.bottomtable {
   height: 19px;
	 width: auto;
	 vertical-align: middle;
	 text-align: center;
   background-color: transparent;
   font-size: 10px;
   color:#555555;
}

td.bottomtable a:link { color:#555555; text-decoration: none; }
td.bottomtable a:visited { color:#555555; text-decoration:none; }
td.bottomtable a:hover { color:#999999; text-decoration:none; }

/* this is the cell where the help is in - the color is overwritten in frameset.css !! */
td.bottomtableside {
 height: 19px;
 vertical-align: middle;
 text-align: right;
 background-color: transparent;
 font-size: 10px;
 padding-right: 5px;
 width:30%;
 color:#555555;
}

td.bottomtableside a:link { color:#555555; text-decoration: none; }
td.bottomtableside a:visited { color:#555555; text-decoration:none; }
td.bottomtableside a:hover { color:#999999; text-decoration:none; }


/* this is the cell where the counter is in - the color is overwritten in frameset.css !! */
td.bottomtablesideleft {
 height: 19px;
 vertical-align: middle;
 text-align: left;
 background-color: transparent;
 font-size: 10px;
 padding-left: 5px;
 width:30%;
 color:#555555;
 cursor: pointer;
}

td.twg_counterpixel {
  height: 1px;
}

/* settings for the thumbnails table */ 
table.thumbnails {
  vertical-align: middle;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
	
/* orientation of the thumbnails in a cell */
td.thumbnails {
   text-align: center;
   vertical-align: middle;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
}

/* empty thumbnails - currently not used. */
td.thumbnails_empty {
}


td.top {
  vertical-align: top;
}

/* table settings for the top 10 table */
table.thumbnails_top10 {
  margin-left: auto;
  margin-right: auto;
	text-align: left;
  vertical-align: middle;
  width:90%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

/* cell settings for the top10 */
td.thumbnails_top10 {
text-align: left;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

/* left alignment for the topx */
.left_top10 {
text-align: left;
width:50%;
}

/* some elements are bold - if you dont'l like this - change this - e.g.  Galleries in the left top corner */
table.twg_main .twg_bold {
	font-weight: bold;
}

.twg_title {
	font-weight: bold;
}

/* underline some elements */
.twg_underlineb {
    font-weight: bold;
  	text-decoration: underline;
    padding-top: 5px; 
    padding-bottom: 5px; 
    vertical-align: middle;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	  font-size: 10pt;  
}

/* this is the cell of the big navigation on the details page */ 
td.navbar {
	text-align: center;
	vertical-align: top;
}

/* this is the cell where the prieview images of the galleries are shown - makes only sure that the galleriey are displayed centered  */
td.mainnav {
	text-align: center;
	vertical-align: top;
	padding: 15px 10px 0px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

/* default width of the big navigation icons below the pictures on the details view */
td.navicon {
	text-align: center;
	width: 75px;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}


td.navicon a:hover img{
border: 1px solid navy;
}

td.navicon a img{
border: 1px solid transparent;
}


/* global settings for images - therfore they don't get any borders an are almost everywhere automatically centered (some fixes for the IE does exist in the code!) */
table.twg_main img {
  text-align: center;
  border: none;
  padding: 0px;
}

table.twg img {
  text-align: center;
  border: none;
  padding: 0px;
}

/* this is the font and size the comments are show below the pictures */
td.twg_kommentar {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
  vertical-align: middle;
  font-size: 11px;
}

/* this is the font and size the comments date is show below the pictures */
.twg_kommentar_date {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}

/* is used for the flags for the language selection - otherwise they don't look that good in mozilla */
img.twg_lock {
 cursor: pointer;
vertical-align: bottom;
}

/* on the thumbnail view there is a hover effect when moving over the images - this is the color on mouseover */
.twg_hoverthumbnail {
background-color: #555555;
}

/* on the thumbnail view there is a hover effect when moving over the images - this is the color an mouseout */
.twg_unhoverthumbnail {
background-color: transparent;
}

.widthsmall {
width:300px;
}

/* font settings for the caption text */
.twg_Caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:15px;
padding-top: 0px;
}

/* can be used for includes - right now used for image.php and image2.php from the examples folder! ... */
.twg_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width:200px;
padding:5px;
}

/* This is how the display for the text Javascript (error if not pressent) is handled  */
.twg_nojs {
  color:red;
	text-decoration: line-through;
}

/* This is how the display for the text 'No Cache' is displayed  */
.twg_nocache {
  color:red;
}

/* settings for the counter div */
#twg_counterdiv{
position:absolute;
bottom:100px;
left:30px;
width:150px;
height:90px;
z-index:5;
visibility:hidden;
border: 1px solid #000000;
background-color: #FFFFFF;
}

/* settings for the language div */
.twg_langdiv{
position:absolute;
top:22px;
width:22px;
z-index:3;
background-color: #f3f3f3;
border: 1px solid #AAAAAA;
visibility:hidden;
text-align: left;
vertical-align: middle;
margin: 0px;
padding: 0px;
}


/* on the languageselection view there is a hover effect when moving over the images - this is the color on mouseover */
.twg_hoverflag {
background-color: #000000;

}

/* on the languageselection view there is a hover effect when moving over the images - this is the color an mouseout */
.twg_unhoverflag {
background-color: #f3f3f3;
}

/* font settings for the counterdiv */
.twg_counterdivtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color:#555555;
text-align: center;
vertical-align: middle;
width:150px;
}

/* Nothing special yet - but if someone wants to change the folder description ;) */
.twg_folderdescription {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
padding-left:100px;
padding-right:100px;
}

/* The style for the header.html  - read how-to 3 */
.twg_headerhtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

/* The style for the header.html  - read how-to 3 */
.twg_tophtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

/* The style for the overview.html  - read how-to 3 */
.twg_overviewhtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}

/* The style for the overview.html  - read how-to 3 */
.twg_thumbhtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}

/* The style for the overview.html  - read how-to 3 */
.twg_imagehtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
}

/* The style for the footer.html  - read how-to 3 */
.twg_footerhtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

/* The style for the bottom.html  - read how-to 3 */
.twg_bottomhtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align:center;
width:100%;
}

/* color of the text of the sppedtest */
.twg_speedtest {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
  color: #CCCCCC;
}

/* The settings for the tips */
.twg_user_help_td {
text-align: center;
vertical-align: bottom;
font-size: 9px;
color:#555555;
padding: 1px;
height:12px;
}

/* Setting for the rating include */
.twg_rating {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
vertical-align: middle;
padding-top: 3px;
width:200px;
padding-bottom: 2px;
}

/* inactive elments at the top x - the dividor */
.twg_topx_sel {
  font-size: 10pt;
  color: #a5a5a5; 
}

/* settings for the top x text  views | downloads | rating |  .... */
.twg_topx_sel a:link    { color: #a5a5a5; }
.twg_topx_sel a:visited { color: #a5a5a5; }
.twg_topx_sel a:hover   { color: #eecc00; }
.twg_topx_selected { color: #000000; font-weight:bold;}

/* settings for the fullscreen mode */
.twg_fullscreen {
display: block;
}

/*
layer for fullscreen - you can use bottom instead of top but sometimes the layer then disapears because of an error in js!
*/
.twg_fullscreencontrol {
   position:absolute;
   top:2px;
   left:2px;
   padding: 5px;
   text-align: center;
   vertical-align: middle;
   z-index:20;
   width:230;
   visibility:visible;
   border: 1px solid #666;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background-image: url(buttons/alpha.png);
   cursor: move;
}

/* The caption in the fullscreen mode  */
.twg_fullscreencaption {
  position:absolute;
  bottom:5px;
  padding-bottom:2px;
  width:100%;
  left:0px;
  text-align: center;
  vertical-align: top;
  z-index:19;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color:#ffffff;
}

/* the text on the fullscreen control layer */
.twg_contol_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#000000;
text-align: center;
padding-bottom:5px;
}

/* centers the table of the fullscreen control layer */
.twg_centertable {
text-align: center;
vertical-align: middle;
}

/* Hand layer for the fullscreen contol layer */
.twg_hand {
 cursor: pointer;
}

/* Body for the fullscreen modus - mainly background! */
.twg_body_fullscreen {
  background-color:#000000;
  overflow: hidden;  
  height:100%;
	margin: 0px;
  padding: 0px;
}

.twg_body_popup {
  background-color:#000000;
	margin: 0px;
  padding: 0px;
  height:100%;
}

/* centers the div of the popup! */

.twg_bodydiv {
position:absolute;
z-index:10;
top:0;
left:0;
height:100%;
width:100%
}

.twg_background {
  position:fixed;
  left:0;
  top:0;
  z-index:1;
  overflow: hidden;
}

.button {
	border : solid 1px #cccccc;
	background: #E9ECEF;
	color : #666666;
	font-weight : bold;
	font-size : 11px;
	padding: 4px;
}

.twg_rating_text {
 font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

/* 
  The next three styles are for the side navigaion tables.
*/
.sidenavleft {
}

.sidenavmiddle {
padding:5px;
text-align:center;
}

.sidenavright {
}

td.html_side_right {
	padding:3px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
  border-right: 1px solid #555555;
}

td.html_side_right a:hover img{
border: 1px solid navy;
}

td.html_side_right a img{
border: 1px solid transparent;
}

td.html_side_left {
	padding:3px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
  border-left: 1px solid #555555;
}

td.html_side_left a:hover img{
border: 1px solid navy;
}

.html_side_left a img{
border: 1px solid transparent;
}

td.html_side_default {
  padding:3px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	border: 1px solid transparent;
}

td.html_side_default a:hover img{
border: 1px solid navy;
}

.html_side_default a img{
border: 1px solid transparent;
}

td.html_side_mark {
  padding:3px;
	text-align: center;
	vertical-align: middle;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}

td.html_side_mark img {
  border: 1px solid navy;
}

.albumtxt  {
  border:none;
  padding:0px;
  margin:0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
}

/* this style is used in the demo - if a div is in the albuml.txt this style is used */
.albumtxtleft div {
width:250px;
text-align:right;
padding-right:10px;
border: none;
}

/* this style is used in the demo - if a div is in the albumr.txt this style is used */
.albumtxtright div {
width:250px;
text-align:left;
padding-left:10px;
border: none;
}

.imagealpha {
-moz-opacity:0.40;
opacity:0.40;
}

.imagefull {
-moz-opacity:0.90;
opacity:0.90;
}

.dllink {
padding-top:5px;
padding-bottom:10px;
width:150px;
text-align:center;
font-size: 10pt;
font-weight: bold;
}

.mp3top {
height:30px;
width:1px;
}
.mp3bottom {
height:30px;
width:1px;
}

/** background for new galleries! */
.highlight {
 background-color:#FFFFAA;
}

.new_div {
position:absolute;
z-index:45;
text-align:left;
}

.nowrap {
  white-space: nowrap;
  padding:0px;
  margin:0px;
  display:inline;
}

/*
left.htm style ! - width is set in the config.php -> $left_htm_width
*/
.twg_lefthtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
vertical-align:top;
}

/*
right.htm style ! - width has to be set with content! because the rest is already using the rest.
Setting this by css only is ignored by some browsers. e.g. use: <div style="width:200px;">abc</div>
*/
.twg_righthtml {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
vertical-align:top;
}


.twg_album_view {
  text-align:left;
  border-right: 1px solid black; 
  padding:0px; 
  margin:0px; 
  padding-left:0px;
  height:100%; 
  vertical-align:top;
  background-color: #ffffff;
}

.twg_album_view_div {
float:left;
vertical-align:top;
border: none; 
background-color: #ffffff; 
color: #000000; 
padding: 0px; 
margin: 0px; 
height:100%;
overflow:auto;
}

.album_view_cache {
padding: 20px;
}

/* the align is in the code! - not possible in the style because IE sucks! */
.twg_img_hide_inner {
cursor:pointer;
margin-top:20px;
height:63px;
width:20px;
}

.noflash {
  padding:10px;
  margin:10px;
  border: 1px solid #555555;
  background-color: #f8f8f8;
  text-align:center;
  width:330px;
}

.widthwii {
}

.align_left {
text-align:left;
}

.align_right {
text-align:right;
}

.thumb_text {
  font-size: 10px;
}

.transparent {
 background-color: transparent;
}

.twg_pag {
margin-bottom: 3px;
}

.twg_pag a {
cursor: pointer;
text-decoration: none;
border: 1px solid #e0e0e0;
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
padding-left: 0.5em;
margin-right: 0.1em;
margin-left: 0.1em;
text-align: center;
}

.twg_pag .inactive {
color: #cccccc;
background-color: transparent !important;
border: 1px solid #e0e0e0 !important;
cursor: default;
padding-top: 0.2em;
padding-right: 0.5em;
padding-bottom: 0.2em;
padding-left: 0.5em;
margin-right: 0.1em;
margin-left: 0.1em;
text-align: center;
}

.twg_pag a:hover, .twg_pag a.sel {
background-color: #e5e5e5;
color: #222222;
border: 1px solid #b7b7b7;
}

.twg_pag a.sel {
padding-right: 0.5em;
padding-bottom: 0.2em;
padding-left: 0.5em;
font-weight: bold;
}

/* The space of the pager to the albums */
.twg_pag_spacer {
 margin-top: 3px;
}

div.private {
position:absolute;width:100%;
height:100%;
z-index:51;
background-color: #AAAAAA;
opacity: 0.85;
text-align:center;
}

.slideframe {
  margin: 0px;
  padding: 0px;
}


/* the colors of the links */
a:link { color:#000000; text-decoration: none; }
a:visited { color:#000000; text-decoration:none; }
a:hover { color:#eecc00; text-decoration:none; }
a:active { color:#eecc00; text-decoration:none; }
a:focus { color:#eecc00; text-decoration:none; }

/*--------------------------------------------------|
| dTree 2.05 | www.destroydrop.com/javascript/tree/ |
|---------------------------------------------------|
| Copyright (c) 2002-2003 Geir Landrö               |
|--------------------------------------------------*/
.dtree {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;
}
.dtree img {
	border: 0px;
	vertical-align: middle;
}
.dtree a {
	color: #333;
	text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
	white-space: nowrap;
	padding: 1px 2px 1px 2px;
}

.dtree a.nodeSel {
}

.dtree .clip {
	overflow: hidden;
}

.dtree div.dTreeNode {
  padding-left:10px;
}

.dtree div.dTreeNodehover {
 padding-left:10px;
  color: #666;
	background-color:#f3f3f3;
	background-image:url('dtree/img/border.gif');
	background-repeat: repeat-x;	
}

.dtree a:hover { color:#111111; text-decoration:none; }

.dtree div.dTreeNodenodeSel {
	color: #111;
	padding-top:2px;
	font-weight:bold;
	background-color:#eeeeee;
	background-image:url('dtree/img/bordersel.gif');
	background-repeat: repeat-x;
	padding-bottom:1px;
	padding-left:10px;
}

.dtree_header {
  padding-left:15px;
}

.twg_exp {
position:absolute;
top:40px;
z-index:3;
}

/*
Size of the rating image. Is set directly to prevent jumping of the layout when the rating image is not loaded yet.
*/

/*
  Internal setting needed to set some divs to the right position
*/
.higher_div {
  position: relative;
  z-index:2;
}

.twg_magglas {
position:absolute;
z-index:45;
width:30px;
text-align:left;
}

div.hiddendiv {
display:none;
}

/*
Height of the navigation buttons. was hard coded before 1.7.8
*/
#slideshow, #print, #topend, #stop_slideshow, #topnext, #topthumb, #topback, #topfirst, #stop_slideshow_img {
height:24px;
}

.twg_sprites { 
 background-image : url(buttons/buttons.png); 
 background-color : transparent; 
 background-repeat : no-repeat; 
 } 
 
.add_gif { 
 height : 10px; 
 width : 12px; 
 background-position : -0px -0px; 
} 

.hbw_gif { 
    height               : 7px; 
    width                : 16px; 
    background-position  : -12px -0px; 
 } 
  
.new_gif { 
    height               : 32px; 
    width                : 50px; 
    background-position  : -28px -0px; 
 } 
 
.select_gif { 
    height               : 10px; 
    width                : 12px; 
    background-position  : -78px -0px; 
 } 
 
.lbw_gif { 
    height               : 7px; 
    width                : 16px; 
    background-position  : -90px -0px; 
 } 
 
.mbw_gif { 
    height               : 8px; 
    width                : 16px; 
    background-position  : -106px -0px; 
 } 
 
.lock_gif { 
    height               : 13px; 
    width                : 13px; 
    background-position  : -122px -0px; 
 } 
 
.nbw_gif { 
    height               : 7px; 
    width                : 16px; 
    background-position  : -135px -0px; 
 } 
 
.unlock_gif { 
    height               : 13px; 
    width                : 18px; 
    background-position  : -151px -0px; 
 } 
 
.vhbw_gif { 
    height               : 7px; 
    width                : 16px; 
    background-position  : -169px -0px; 
 } 

.header_top {width: 980px;	height: 1px; margin: 0px auto; padding: 0px 0px 0px 0px;	text-align: right; color: darkred; font-size: 12px; font-family:Arial,Helvetica,sans-serif;}
.header_top a:link {color: darkred; text-decoration: none;}
.header_top a:visited {color: darkred; text-decoration: none;}
.header_top a:hover {color:#C90404; text-decoration: underline;}

.header_image {width: 980px;	height: 90px; margin: 0px auto; padding: 1px 0px 0px 0px;	text-align: center;}

.menu, .menu ul { /* remove all list stylings */
	/*margin: 0;*/
	padding: 0;
	border-bottom: 1px solid #DDDDDD;
	display: block;
	width: 980px;	
	margin: 0px auto;	
	text-align: center;
}

.menu{ padding-left:0px;}

.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;	      /* move all main list items into one row, by floating them */
	position: relative;	  /* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		      /* thus we need to apply explicit z-index here... */
	list-style: none;
}

.menu li:hover {
	z-index: 10000;	      /* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;  /* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							 see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
	float: none;		 /* items of the nested menus are kept on separate lines */
	position:relative !important;
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	       /* while hidden, always keep them at the top left corner, */
	top: 0;		       /* to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	top: 100%;	            /* 1st level go below their parent item */
}

.menu li li:hover>ul {	    /* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
}

/* -- float.clear -- force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {/* IE7 float clear: */min-height: 0;}
/* -- float.clear.END --  */

/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(../img/empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
	padding: 30px 30px 30px 10px;
	margin: 0 0 0 -10px;
}
/* -- sticky.submenu.END -- */



/************************************************************************************/
/*************************** DHTML_menu styles **************************************/
#mainNav {
    /* background: #42464A url(../img/pages_bg.gif) bottom repeat-x; */
	/* border: 2px solid #000000; */
}

.menu ul {font-size:85%;}

.menu ul li {
    margin:0;
    float:none;
    border:none;
  }
.menu ul li ul {
	font-size:100%;
}

.menu ul {
	width: 15em;
	margin:0; 
	padding:0;
}

.menu li:hover {
	background:darkred;
}

/* Link styles */
.menu li a{
	display:block;
	height:30px;
	line-height:30px;
	padding:0px 0px 0px 5px;
}

.menu li a:link,
.menu li a:visited,
.menu li a:hover {
	color: #000000;
    font-weight:normal;
    text-decoration:none;
	font-size: 18px;
	font-family:Arial,Helvetica,sans-serif;
}

.menu li a:hover {
	background:darkred;
	color: #ffffff;
}

.menu ul li {
	background:#darkred;
}

.menu ul li:hover {
	background:#darkred;
}

.menu ul li a:link,
.menu ul li a:visited,
.menu ul li a:hover {
	text-decoration: none;
	display: block;
	float:none;
	position: relative;
	border:none;
	height:auto;
	line-height:100%;
	padding:4px;
	background:transparent;
	border-bottom:1px solid #bfbfbf;
	color: #fff;
}

.menu ul li a:hover {
	background: #eeeeee;
	color: #C90404;
}

.menu ul li ul li a:link,
.menu ul li ul li a:visited,
.menu ul li ul li a:hover {
	background:#EEEEEE;
}

.menu li ul li ul li a:hover {
	background: #bfbfbf;
	color: #C90404;
}
  
.menu a:hover, .menu li:hover>a {}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
	background:#333333;
	padding:0;
}
/********************************************************************************************/
/**************************** Internet Explorer only styles ********************************/

/* Hides from IE5-mac \*/
* html #mainNav a {float:left;}

* html .menu, * html .menu ul {zoom: 1;}

* html .menu li.adxmhover {z-index: 10000; background:#B7B8B8; color: #fff;}

* html .menu .adxmhoverUL {visibility: visible;}

* html .menu .adxmhoverUL {top: 100%; left: 0;}

* html .menu .adxmhoverUL .adxmhoverUL {top: 0; left: 100%;}

* html .menu ul a {zoom: 1;}

* html .menu ul li {display:inline !important;}

* html .menu ul li a:link,
* html .menu ul li a:visited,
* html .menu ul li a:hover {text-decoration: none; display:inline-block; display:block;}

* html #mainNav .menu li ul li {margin:0; padding:0;}

* html .menu li li {width:100%; margin:0; padding:0;}

* html #mainNav .menu ul li a:link,
* html #mainNav .menu ul li a:visited,
* html #mainNav .menu ul li a:hover {float:none;}

* html .menu ul ul {padding:0;}
/* End hide from IE5-mac */ 


.footer { 
	text-align: center; 
	padding: 0px 0px;
	margin: 0px 0px 0px 0px;
	color: #666666; 
    font-size: 14px;
}

.footer a:link { color: #666666;}
.footer a:visited { color: #666666;}

.static_footer { background-color: #ffffff; padding: 6px 0px 6px 0px;}

/*** First level categories in footer ***/

.footer ul { text-transform: uppercase; background: #ffffff;	border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; padding: 1px 0px 1px 0px; margin: 0px;}

.footer li {display: inline; padding: 0px 3px;}

.footer li a:link { color:#000000;}
.footer li a:visited { color:#000000;}
.footer li a:hover {background: darkred; color:#fff; text-decoration: none;}